/* THIC Draft Podium — shared TSPN look (from the approved mockups: main-screens-v1). */
:root {
  --bg: #06070A; --ink: #F5F2E9; --dim: #A9AEB6; --mute: #6F747C; --faint: #3B3F46;
  --gold: #E8C46F; --gold-hi: #F3D995; --line: #8C7342;
  --red: #C8102E; --red-hi: #F0384E; --red-deep: #9E0B20;
  --panel: rgba(9,10,13,.92); --field: #121418; --cell: #14161B; --cell-empty: #0E1013;
  --edge: #2A2D33; --edge2: #3A3D44; --good: #4FD18B; --blue: #7DB7F5;
  --QB: #F28B82; --RB: #7FD4A0; --WR: #7DB7F5; --TE: #F7C26B; --DL: #C3A6F7; --LB: #F59EC9; --DB: #8FE3E0; --DEF: #C9CED8;
  --os: "Oswald", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Barlow", system-ui, sans-serif; }
body.fit { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a { color: var(--gold); }
.os { font-family: var(--os); }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* A fixed 1920×1080 canvas, scaled to fit any screen (TV, laptop, tablet). */
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; overflow: hidden; }
.stadium {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(200,16,46,.26), transparent 55%),
    linear-gradient(180deg, rgba(6,7,10,.82), rgba(6,7,10,.94)),
    url(/img/stadium.jpg) left center / cover no-repeat;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.label { font-family: var(--os); font-weight: 500; letter-spacing: 3px; color: var(--dim); }

/* Position colors: text and the subtle underline on drafted cells. */
.pos { font-family: var(--os); font-weight: 600; letter-spacing: 1px; }
.pos-QB { color: var(--QB); } .pos-RB { color: var(--RB); } .pos-WR { color: var(--WR); } .pos-TE { color: var(--TE); }
.pos-DL { color: var(--DL); } .pos-LB { color: var(--LB); } .pos-DB { color: var(--DB); } .pos-DEF { color: var(--DEF); }
.ul-QB { --ul: var(--QB); } .ul-RB { --ul: var(--RB); } .ul-WR { --ul: var(--WR); } .ul-TE { --ul: var(--TE); }
.ul-DL { --ul: var(--DL); } .ul-LB { --ul: var(--LB); } .ul-DB { --ul: var(--DB); } .ul-DEF { --ul: var(--DEF); }

.btn { min-height: 48px; padding: 0 18px; border-radius: 4px; background: #14161B; border: 1px solid var(--line); font-family: var(--os); font-weight: 500; font-size: 20px; letter-spacing: 2px; }
.btn:hover:not(:disabled) { background: #1C1F25; }
.btn.quiet { border-color: var(--edge2); }
.btn.hot { background: linear-gradient(180deg, #E3122C, var(--red-deep)); border-color: var(--red-hi); color: #fff; font-weight: 600; }
.btn.hot:hover:not(:disabled) { background: linear-gradient(180deg, #F0213A, #B00D25); }
.btn.hot:disabled { background: #2A1418; color: #8C6B70; border-color: #4A2A30; }
.btn.gold { background: linear-gradient(180deg, #F3D995, #C9A24E); color: #17130A; border-color: var(--gold-hi); font-weight: 600; }
.btn:disabled:not(.hot) { opacity: .45; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5A5E66; flex-shrink: 0; }
.dot.on { background: var(--good); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes glow { 0%,100% { box-shadow: inset 0 0 0 2px var(--gold) } 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px 3px rgba(232,196,111,.55) } }
@keyframes crawl { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes landIn { from { opacity: 0; transform: translateY(-10px) scale(.96) } to { opacity: 1; transform: none } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
.glow { animation: glow 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse, .glow, .crawl, .land { animation: none !important; } }

/* Modal + toast */
.scrim { position: absolute; inset: 0; background: rgba(3,4,6,.78); display: flex; align-items: center; justify-content: center; z-index: 20; }
.dialog { display: flex; flex-direction: column; gap: 18px; padding: 30px 34px; background: #0D0F12; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 6px; }
.toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 30; padding: 14px 22px; border-radius: 4px; background: #0D0F12; border: 1px solid var(--line); font-size: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.toast.bad { border-color: var(--red-hi); }