/* One dark look on purpose, matching Entry 13: green ground, one lime accent. */
:root{
  --bg:#07110c; --bg-2:#0b1711; --bg-3:#10201a; --line:#1c3125; --line-2:#2a4433;
  --fg:#e8efe9; --fg-2:#a3b7a9; --fg-3:#6f8777; --accent:#b9f23f; --on-accent:#07110c; --warn:#e9b949;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:22px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);text-decoration:none}
.brand b{color:var(--fg);font-weight:500}
.nav{display:flex;gap:1.6rem;font-size:14px}
.nav a{text-decoration:none;color:var(--fg-2);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0}
.lime{color:var(--accent)}
h1,h2{font-family:var(--display);font-variation-settings:"wdth" 110;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98}
h2{font-weight:700;font-size:1.5rem;line-height:1.15}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:end;padding-block:56px 36px}
.hero .sub{color:var(--fg-2);margin:.9rem 0 0;max-width:52ch}
.clock{text-align:right}
.clock .t{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.02em}
.clock .label{margin-bottom:.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:0 1.25rem;border:1px solid var(--line-2);border-radius:3px;
  background:transparent;color:var(--fg);font:600 15px/1 var(--display);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--fg-3)}
.btn-fill{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-fill:hover{background:#cbff5c;border-color:#cbff5c}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Board list */
.board{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:1.25rem;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.row .n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-3);font-size:15px}
.row .who{font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:600;font-size:clamp(1.25rem,2.4vw,1.8rem);line-height:1.15;min-width:0;overflow-wrap:anywhere}
.row .meta{display:flex;gap:1.4rem;align-items:baseline;font-family:var(--mono);font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .meta a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.row .meta a:hover{color:var(--fg);border-color:var(--fg-3)}
.empty{padding:48px 0;color:var(--fg-3);border-top:1px solid var(--line)}
.foot{padding-block:40px 56px;color:var(--fg-3);font-size:13px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Results */
.podium{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prize{padding:28px 24px 30px 0;min-width:0}
.prize + .prize{padding-left:24px;border-left:1px solid var(--line)}
.prize .who{font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:700;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.05;margin:.8rem 0 .5rem;overflow-wrap:anywhere}
.prize.first .who{color:var(--accent)}
.prize .num{font-family:var(--mono);font-size:14px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.prize .links{margin-top:.9rem;display:flex;gap:1rem;font-size:13px}
.prize .links a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.table-x{overflow-x:auto;margin-top:2.5rem}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:500;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line-2)}
td{padding:12px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-size:14px;color:var(--fg-2)}
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}
td.name{font-family:var(--body);color:var(--fg);font-size:15px}
td.tot{color:var(--fg);font-weight:500}
.bench{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--fg-2);font-size:14px}
.bench a{color:var(--fg)}

/* Forms */
.panel{max-width:640px;padding-block:48px 72px}
.panel .sub{color:var(--fg-2);margin:.8rem 0 2rem}
.field{display:grid;gap:.45rem;margin-bottom:1.2rem}
.field label{font-size:13px;color:var(--fg-2)}
.field small{color:var(--fg-3);font-size:13px}
input[type=text],input[type=url],input[type=password],input[type=datetime-local],select{
  width:100%;min-height:48px;padding:0 14px;background:var(--bg-2);color:var(--fg);border:1px solid var(--line-2);border-radius:3px;font:16px var(--body)}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.msg{margin-top:1.2rem;padding:14px 0 0;border-top:1px solid var(--line);font-size:15px}
.msg.err{color:var(--warn)}
.msg.ok{color:var(--fg)}
.msg .note{display:block;color:var(--fg-2);font-size:14px;margin-top:.3rem}
.picks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.picks li{border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem}
.pick{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;align-items:center;width:100%;padding:14px 0;background:none;border:0;color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.pick .slot{font-family:var(--mono);color:var(--fg-3);font-size:14px}
.pick.on .slot{color:var(--accent)}
.pick .nm{font-family:var(--display);font-weight:600;font-size:1.15rem}
.pick .open{font-size:13px;color:var(--fg-3)}
.ext{font-size:13px;color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2)}

/* Admin */
.adm section{padding-block:28px;border-top:1px solid var(--line)}
.adm h2{margin-bottom:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.adm table td,.adm table th{text-align:left}
.adm td{font-family:var(--body);font-size:14px;vertical-align:top}
.adm td .mono{font-family:var(--mono)}
.adm select.s{width:64px;min-height:38px;padding:0 6px}
.adm .small{font-size:13px;color:var(--fg-3)}
.linkbtn{background:none;border:0;color:var(--fg-2);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
.warn{color:var(--warn)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-block:36px 24px}
  .clock{text-align:left}
  .podium{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prize:nth-child(3){padding-left:0;border-left:0}
  .prize:nth-child(n+3){border-top:1px solid var(--line)}
  .grid3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .row{grid-template-columns:2.6rem minmax(0,1fr)}
  .row .meta{grid-column:2;white-space:normal;flex-wrap:wrap;gap:.4rem 1rem}
  .podium{grid-template-columns:1fr}
  .prize + .prize{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .nav{gap:1rem}
  .brand{font-size:11px;letter-spacing:.1em}
}

/* Refinement pass: hierarchy, rhythm, TV scale. */
.label{font-family:var(--mono);font-size:12px;letter-spacing:.16em}
.hero{padding-block:72px 44px;gap:1.5rem 4rem}
.hero .label{margin-bottom:1.1rem}
.hero .sub{margin-top:1.2rem;font-size:17px}
.clock{padding-bottom:6px}
.clock .label{margin-bottom:.9rem}
.clock .t{font-weight:400;font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:-.04em}

/* Rows: tighter rhythm, quiet meta in body face, finish rank leads. */
.row{grid-template-columns:3.4rem minmax(0,1fr) auto;gap:1.5rem;padding:20px 0}
.row .n{font-size:14px}
.row .who{font-weight:600;letter-spacing:-.01em}
.row .meta{font-family:var(--body);font-size:14px;gap:1.6rem}
.row .meta span:last-child{font-family:var(--mono);font-size:13px;min-width:5.4em;text-align:right}
.row .meta a{border-bottom-color:var(--line-2);padding-bottom:1px}
.empty{font-size:17px}

/* Podium: first prize gets the width, figures in mono. */
.podium{grid-template-columns:1.5fr 1fr 1fr 1fr}
.prize{padding:32px 28px 34px 0}
.prize + .prize{padding-left:28px}
.prize .label{line-height:1.7}
.prize .who{margin:1rem 0 .6rem;font-size:clamp(1.4rem,2.2vw,2rem)}
.prize.first .who{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1}
.prize .num{font-size:15px;color:var(--fg)}
.prize.first .num{font-size:18px}
.prize .links a{border-bottom-color:var(--line-2)}
.table-x{margin-top:3.5rem}
th{font-family:var(--mono);font-size:11px;padding:10px 12px 12px}
td{padding:13px 12px}
th:first-child,td:first-child{width:4.5rem;padding-left:0}
td.name{font-family:var(--display);font-weight:600;font-size:16px}
tbody tr:nth-child(n+4) td.name{color:var(--fg-2);font-weight:500}
td.tot{color:var(--accent)}
tbody tr:nth-child(n+4) td.tot{color:var(--fg)}

/* Forms: visible focus without glow. */
input[type=text],input[type=url],input[type=password],input[type=datetime-local],select{transition:border-color .15s,background .15s}
input:hover,select:hover{border-color:var(--fg-3)}
input:focus,select:focus{border-color:var(--accent);background:var(--bg)}
.field label{color:var(--fg)}
.pick{grid-template-columns:3rem minmax(0,1fr)}
.pick .slot{font-size:15px}
.pick.on .nm{color:var(--accent)}

/* Admin density */
.adm td{padding:9px 12px}
.adm th{padding:8px 12px}

/* TV: 1920 wide and up, read from across the room. */
@media (min-width:1680px){
  .wrap{max-width:1640px}
  .top{padding-block:30px}
  .brand{font-size:15px}
  .nav{font-size:18px}
  .label{font-size:15px}
  h1{font-size:6.4rem}
  .hero{padding-block:72px 48px}
  .hero .sub{font-size:22px;max-width:60ch}
  .clock .t{font-size:6.2rem}
  .row{grid-template-columns:5rem minmax(0,1fr) auto;padding:22px 0}
  .row .n{font-size:20px}
  .row .who{font-size:2.6rem}
  .row .meta{font-size:18px}
  .row .meta span:last-child{font-size:18px}
  .btn{min-height:56px;font-size:18px;padding:0 1.6rem}
  .prize .who{font-size:2.6rem}
  .prize.first .who{font-size:4rem}
  .prize .num{font-size:19px}.prize.first .num{font-size:22px}
  th{font-size:14px} td{font-size:19px} td.name{font-size:22px}
  .foot,.bench{font-size:16px}
}
@media (max-width:820px){
  .podium{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prize.first{grid-column:1 / -1;padding-right:0}
  .prize:nth-child(2){padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .prize:nth-child(3){padding-left:28px;border-left:1px solid var(--line)}
  .prize:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:560px){
  .hero{padding-block:40px 28px}
  .hero .sub{font-size:16px}
  .clock .t{font-size:2.6rem}
  .row{grid-template-columns:2.4rem minmax(0,1fr);gap:.25rem 1rem;padding:16px 0}
  .row .meta{font-size:13px}
  .row .meta span:last-child{text-align:left;min-width:0}
  .podium{grid-template-columns:1fr}
  .prize,.prize + .prize,.prize:nth-child(3){padding:24px 0;border-left:0}
  .prize + .prize{border-top:1px solid var(--line)}
  .pick{grid-template-columns:2.2rem minmax(0,1fr)}
  th:first-child,td:first-child{width:3rem}
}
.prize .label{letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td.tot,tbody tr:nth-child(n+4) td.tot{color:var(--fg)}
tbody tr:nth-child(-n+3) td.tot{font-weight:600}
@media (min-width:1680px){.prize .links{font-size:16px}}


/* v2: finish order is not a ranking, so every row reads the same. */
.row .n{color:var(--fg-2)}
.row .who{color:var(--fg)}
th{font-size:13px}
td{padding:16px 12px}

/* Now presenting (demo day) */
.now{padding:28px 0 32px;border-top:1px solid var(--line)}
.now .who{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:800;font-size:clamp(2.4rem,7vw,5.6rem);line-height:1;letter-spacing:-.025em;margin:.6rem 0 .8rem;overflow-wrap:anywhere}
.now .nx{margin:0;font-family:var(--mono);font-size:15px;color:var(--fg-2)}

/* Voting: who has voted, and the QR to /vote */
.voters{margin:0 0 28px;color:var(--fg-2);font-size:15px;line-height:1.7}
.voters .label{display:block;margin-bottom:.4rem}
.qr{display:flex;align-items:center;gap:20px}
.qr #qrBox img,.qr #qrBox canvas{display:block;width:120px;height:120px}
.qr .label{line-height:1.8}
.qr .qrurl{font-size:15px;color:var(--fg);letter-spacing:.02em;text-transform:none}
.qr.noqr #qrBox{display:none}
.qr.noqr .qrurl{font-size:2.2rem;letter-spacing:-.01em}
@media (max-width:1679px){.qr{display:none}}

/* Results reveal */
.plabel{display:flex;flex-wrap:wrap;gap:0 1.2em;white-space:normal}
.rhero{padding-block:72px 40px}
.winner{min-height:calc(100vh - 90px);display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid var(--line)}
.winner .plabel{font-size:1.4rem;color:var(--fg-2);letter-spacing:.06em}
.winner .who{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:800;font-size:clamp(3.4rem,10vw,9rem);line-height:.95;letter-spacing:-.03em;color:var(--accent);margin:2rem 0 1.6rem;overflow-wrap:anywhere}
.winner .num{font-family:var(--mono);font-size:clamp(1.8rem,3vw,3rem);font-variant-numeric:tabular-nums}
.stack{border-top:1px solid var(--line)}
.stack .prize,.stack .prize + .prize{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}
.stack .prize .who{font-size:clamp(2rem,4.4vw,3.8rem);line-height:1}
.prize .who.none{color:var(--fg-2)}
.fresh{animation:reveal .6s ease-out both}
@keyframes reveal{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fresh{animation:none}}
.fn{display:block}

/* Vote page: two columns on desktop */
.panel.vote{max-width:1120px}
.vote-grid{display:grid;gap:0 64px}
.panel.vote h1{margin-bottom:1.4rem}
.vote-grid .left .sub{margin:0 0 1rem}
.vote-grid .left .field{margin-top:1.4rem}
.pick .slot{font-family:var(--mono)}
@media (min-width:900px){.vote-grid{grid-template-columns:320px minmax(0,1fr)}.vote-grid .right{padding-top:4px}}

/* TV: compact band, two columns, everything on one screen. */
@media (min-width:1680px){
  th{font-size:14px}
  .hero{height:120px;padding:0;margin-top:28px;margin-bottom:28px;align-items:center;gap:0 4rem;grid-template-columns:minmax(0,1fr) auto auto}
  .hero .label{margin-bottom:.5rem}
  .hero h1{font-size:3.2rem;line-height:1}
  .hero .sub,.hero .actions{display:none}
  .clock{padding:0}
  .clock .label{margin-bottom:.4rem}
  .clock .t{font-size:4.4rem}
  .board{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;grid-template-rows:repeat(var(--rows,6),auto);grid-auto-flow:column}
  .row{padding:18px 0}
  .row .who{font-size:2.4rem}
  .row .meta a{display:none}
  .hero{margin-top:16px;margin-bottom:16px}
  .now{padding:14px 0 18px}
  .now .who{font-size:4.4rem;margin:.3rem 0 .4rem}
  .now .nx{font-size:20px}
  .voters{font-size:19px;margin-bottom:14px;line-height:1.5}
  .voters .label{margin-bottom:.2rem}
  .foot{padding-block:20px 24px}
  .rhero{height:auto;padding:56px 0 32px}
  .rhero h1{font-size:6.4rem}
  .winner .who{font-size:9rem}
  .winner .num{font-size:3rem}
  .stack .prize .who{font-size:4rem}
}
@media (max-width:560px){
  .podium .prize:not(.first){padding:16px 0}
  .podium .prize:not(.first) .who{font-size:1.4rem;margin:.4rem 0 .3rem}
  .podium .prize:not(.first) .links{margin-top:.4rem}
}
