/* RSI Arena · Human Arena. The homepage's printed fight-night poster (rsiarena.org): Bake AI Color System v1.0 (Ink,
   Warm Ivory, Frontier Moss, Ember Amber, Clay) plus the mascot's own browns and creams. One geometric sans, Outfit. */
:root{color-scheme:light;--ink:#231a15;--pp:#f7f0df;--paper:#fffdf6;--moss:#5d6b2c;--amber:#df9d49;--amber-200:#efd5af;--clay:#8b4b2e;--crumb:#5f320c;--ink-700:#524941;--ink-500:#827a70;--ink-300:#a79e90;--ink-200:#bcb4a6;--ink-100:#d9d2c3;--text2:#4b4037;--red:#b4382a;--sans:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background-color:var(--pp);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .1 0 0 0 0 .08 .15 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 14px;background:var(--ink);color:var(--pp);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.k{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}

/* ---- Ticker and the preview strip ---- */
.ticker{display:flex;align-items:center;height:38px;overflow:hidden;background:var(--ink);color:var(--pp);white-space:nowrap}
.ticker .track{display:flex;flex:none;animation:tick 52s linear infinite}
.ticker .track>span{display:inline-block;padding-right:26px;font-weight:700;font-size:13px;letter-spacing:.15em;word-spacing:.1em;text-transform:uppercase}
.ticker .track>span:after{content:"";display:inline-block;width:7px;height:7px;margin-left:26px;border-radius:50%;background:var(--amber);vertical-align:2px}
.ticker i{font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}
.pv{display:flex;align-items:center;justify-content:center;gap:10px 16px;margin:0;padding:10px clamp(16px,4vw,40px);border-bottom:3px solid var(--ink);background:var(--amber);font-size:15px;line-height:1.35}
.pv b{flex:none;padding:4px 9px 3px;background:var(--ink);color:var(--amber);font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* ---- Header ---- */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px;border-bottom:3px solid var(--ink)}
.brand{--mk:30px;display:flex;align-items:center;gap:12px;min-width:0}
.brand a{display:flex;align-items:center;gap:8px;text-decoration:none}
.brand a:hover{opacity:.8}
.brand .rsimark{width:auto;height:44px}
.brand .rule{flex:none;width:1px;height:28px;background:currentColor;opacity:.28}
.brand small{font-size:13px;font-weight:600;color:var(--clay);white-space:nowrap}
.brand .bakemark{width:var(--mk);height:var(--mk);margin:0 -3px 0 -2px}
/* The Bake AI wordmark sits on the loaf, not on the whole mascot (the chef's hat fills the top of the image). */
.brand .wm{flex:none;width:70px;height:18px;background:currentColor;-webkit-mask:url(assets/bake-ai-wordmark.svg) left center/contain no-repeat;mask:url(assets/bake-ai-wordmark.svg) left center/contain no-repeat;transform:translateY(calc(var(--mk) * .149))}
.brand .by small{transform:translateY(calc(var(--mk) * .149))}
.links{display:flex;gap:26px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.links a{text-decoration:none}
.links a:hover{color:var(--clay)}
.chip{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;background:var(--ink);color:var(--pp);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.chip:hover{background:var(--clay)}
.chip .mini{display:flex;gap:3px}
.chip .mini i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-300)}
.chip .mini i.on{background:var(--amber);box-shadow:none}
.chip.open{background:var(--amber);color:var(--ink)}
.chip.open .mini i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip.open .mini i.on{background:var(--ink)}

/* ---- Hero: the title and the visitor's scorecard ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:32px 48px;align-items:end;padding-block:clamp(28px,4vw,52px) 36px}
.kick{margin:0;font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
h1{word-spacing:.08em;margin:14px 0 0;font-weight:900;font-size:clamp(64px,10.6vw,150px);line-height:.8;letter-spacing:-.05em;text-transform:uppercase}
h1 span{display:block;color:var(--clay)}
.lead{max-width:30em;margin:26px 0 0;font-weight:600;font-size:clamp(19px,1.8vw,23px);line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.sub{max-width:38em;margin:12px 0 0;font-size:16px;color:var(--text2)}
.scorecard{display:flex;flex-direction:column;gap:14px;padding:20px 20px 0;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.sc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.scorecard .big{font-weight:900;font-size:52px;line-height:.8;letter-spacing:-.04em}
.scorecard .big small{font-size:.5em;letter-spacing:0;color:var(--ink-500)}
.pips{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.pips li{display:grid;place-items:center;aspect-ratio:1.2;border:2px dashed var(--ink-200);border-radius:10px;font-weight:800;font-size:17px;color:var(--ink-300)}
.pips li svg{display:none;width:72%;height:72%}
.pips li.on{border:2px solid var(--ink);background:var(--amber-200);color:#d9534a}
.pips li.on svg{display:block}
.pips li.on .num{display:none}
.pips li.pop{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(.6) rotate(-14deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}
.sc-note{margin:0;font-size:15px;line-height:1.4;color:var(--text2)}
.sc-who{margin:-6px 0 0;font-weight:600;font-size:13px;color:var(--ink-500);overflow-wrap:anywhere}
.sc-who b{color:var(--ink)}
.scorecard .big small.w{font-size:.32em;letter-spacing:.06em;text-transform:uppercase}
.sc-note b{color:var(--ink)}
.sc-prizes{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-decoration:none}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:96px;padding:8px 10px;overflow:hidden;border:2px solid var(--ink)}
.tile b{position:relative;font-weight:900;font-size:20px;line-height:1}
.tile small{position:relative;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tile.amz{background:#fff}
.tile.amz img{position:absolute;top:8px;right:8px;width:76px;border-radius:6px;box-shadow:0 2px 6px rgba(35,26,21,.18)}
.tile.pods{background:#fafafa}
.tile.pods img{position:absolute;top:4px;right:6px;width:64px;height:64px;object-fit:contain}
.sc-prizes:hover .tile{border-color:var(--clay)}
.scorecard .act{margin:0 -20px;border-top:3px solid var(--ink)}

/* Buttons from the homepage: square, heavy, uppercase. */
.act{display:inline-grid;place-items:center;height:52px;padding:0 22px;border:0;background:var(--pp);color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.act.primary{background:var(--amber)}
.act:hover:not(:disabled){background:var(--ink);color:var(--pp)}
.act:disabled{cursor:default;opacity:.45}
.link{padding:0;border:0;background:none;font-weight:700;font-size:14px;color:var(--clay);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.link:hover{color:var(--ink)}

/* ---- The ring: question box, the two answers, the vote ---- */
.ring{padding-top:6px}
.composer{border:3px solid var(--ink);background:var(--paper)}
.composer textarea{display:block;width:100%;min-height:104px;max-height:40vh;padding:20px 22px 8px;border:0;background:none;font-weight:500;font-size:20px;line-height:1.4;resize:vertical}
.composer textarea:focus{outline:none}
.composer:focus-within{box-shadow:0 0 0 3px var(--amber)}
.composer textarea::placeholder{color:var(--ink-300)}
.crow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 18px;padding:8px 10px 10px 22px}
.tries{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.tries .k{margin-right:2px}
.idea{padding:5px 11px;border:1.5px dashed var(--ink-300);border-radius:999px;font-size:13.5px;line-height:1.25;color:var(--ink-700);white-space:nowrap}
.gobox{display:flex;flex:none;align-items:center;gap:14px}
.srch{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;white-space:nowrap;cursor:pointer;user-select:none}
.srch input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.srch[hidden],.srchnote[hidden]{display:none}
.srchnote{margin:8px 2px 0;font-size:14px;color:var(--text2)}
.srch-steps{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.srch-step{padding:7px 10px;border:2px solid var(--ink-200);background:rgba(255,255,255,.55);font-size:14px;line-height:1.4;color:var(--text2)}
.srch-step q{font-weight:700;color:var(--ink)}
.srch-step.pending{border-style:dashed}
.srch-step summary{cursor:pointer}
.srch-step ol{margin:8px 0 2px;padding-left:24px}
.srch-step li{margin:3px 0;line-height:1.35}
.srch-step a{color:var(--ink);font-weight:600}
.srch-step .dom{color:var(--text2);font-size:12px}
.composer-note{margin:10px 2px 0}
.composer-note:empty{display:none}
.composer-note.bad{padding:10px 14px;border:2px solid var(--red);background:#fbe9e4}
.go{display:inline-flex;flex:none;align-items:center;gap:10px;height:56px;padding:0 24px 0 18px;border:3px solid var(--ink);background:var(--amber);font-weight:900;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.go svg{width:34px;height:28px;color:#d9534a;transform:rotate(-8deg);transition:transform .3s var(--ease)}
.go:hover:not(:disabled){background:var(--ink);color:var(--pp)}
.go:hover:not(:disabled) svg{transform:translateX(4px) rotate(-8deg)}
.go:disabled{cursor:progress;background:var(--amber-200)}
.go:disabled svg{animation:jab .9s ease-in-out infinite}
@keyframes jab{50%{transform:translateX(5px) rotate(-8deg)}}
.tip{max-width:62em;margin:12px 2px 0;font-size:15px;line-height:1.5;color:var(--text2)}
.tip b{color:var(--ink)}
.datanote{max-width:62em;margin:6px 2px 0;font-size:13.5px;line-height:1.45;color:var(--ink-700)}
.datanote .link,.rules .link{font-size:inherit}
.ts-slot:empty{display:none}
.ts-slot{margin-top:10px}

/* The board: the two headers (sticky), then one block per question with both answers, then the names after the vote. */
.board{position:relative;margin-top:28px;border:3px solid var(--ink);background:var(--paper)}
.bhead{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink)}
.bhead .sh+.vs+.sh{box-shadow:inset 3px 0 0 #3a2c23}
.vs{position:absolute;top:50%;left:50%;z-index:2;display:grid;place-items:center;width:58px;height:58px;border:3px solid var(--ink);border-radius:50%;background:var(--amber);transform:translate(-50%,-50%) rotate(-8deg)}
.vs b{font-style:italic;font-weight:900;font-size:19px;letter-spacing:-.02em}
.sh{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:64px;padding:9px 18px 9px 12px;color:var(--pp)}
.sh[data-head=x]{padding-right:40px}
.sh[data-head=y]{padding-left:40px}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.badge{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fbf7ee;box-shadow:inset 0 0 0 1px rgba(35,26,21,.08);overflow:hidden}
.badge img{width:60%;height:60%;object-fit:contain}
.badge.dark{background:#0c0c0c}
.badge.anon{background:none;box-shadow:inset 0 0 0 2px rgba(247,240,223,.4);font-weight:900;font-size:19px;color:var(--pp)}
.names{display:flex;flex-direction:column;min-width:0}
.names b{word-spacing:.14em;font-weight:900;font-size:19px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere}
.names small{margin-top:3px;font-weight:600;font-size:12.5px;color:var(--ink-200);overflow-wrap:anywhere}
.st{flex:none;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-200);white-space:nowrap}
.st:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-500)}
.sh[data-state=thinking] .st:before,.sh[data-state=writing] .st:before{background:var(--amber);animation:blink 1.1s ease-in-out infinite}
.sh[data-state=done] .st:before{background:#a6bc76}
.sh[data-state=error] .st:before{background:#e0574a}
@keyframes blink{50%{opacity:.25}}
.turn{scroll-margin-top:76px}
.turn+.turn{border-top:3px solid var(--ink)}
.tq{padding:14px 22px 15px;border-bottom:1.5px solid var(--ink);background:#f4ecda}
.tq p{margin:4px 0 0;font-weight:700;font-size:clamp(17px,1.6vw,20px);line-height:1.35;letter-spacing:-.01em;white-space:pre-wrap;overflow-wrap:anywhere}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pair .ans+.ans{border-left:3px solid var(--ink)}
.ans{min-width:0;min-height:120px;padding:22px 26px 28px;font-size:16px;line-height:1.62;overflow-wrap:anywhere}
.turn:last-child .ans{min-height:240px}
.ans .empty{margin:0;color:var(--ink-500)}
.ans .wait{display:flex;gap:6px;margin:4px 0}
.ans .wait i{width:9px;height:9px;border-radius:50%;background:var(--ink-200);animation:bounce 1.2s ease-in-out infinite}
.ans .wait i:nth-child(2){animation-delay:.15s}
.ans .wait i:nth-child(3){animation-delay:.3s}
@keyframes bounce{40%{transform:translateY(-6px);background:var(--amber)}}
.ans .err{margin:0;color:var(--red);font-weight:600}
/* After the vote: who was who, under the answers. The winner's half turns amber and gets the stamp. */
.reveal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:3px solid var(--ink)}
.rv{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:18px 22px}
.rv+.rv{border-left:3px solid var(--ink)}
.rv.won{background:var(--amber)}
.rv.tie{background:var(--amber-200)}
.rv .badge{width:56px;height:56px;box-shadow:0 0 0 3px var(--ink);animation:flip .6s var(--ease)}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:none}}
.rvn{display:flex;flex-direction:column;min-width:0}
.rvn small{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.rv.won .rvn small{color:var(--crumb)}
.rvn b{margin-top:3px;font-weight:900;font-size:clamp(20px,2vw,26px);line-height:1;letter-spacing:-.02em;word-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere}
.rvn .mk{margin-top:4px;font-weight:600;font-size:13.5px;color:var(--ink-700)}
.rvn .si{margin-top:2px;font-weight:600;font-size:12px;color:var(--clay)}
.rv.won .rvn .si{color:var(--crumb)}
.rv .stamp{flex:none;margin-left:auto;padding:4px 9px;border:3px solid var(--clay);color:var(--clay);background:rgba(255,253,246,.85);font-weight:900;font-size:15px;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-12deg)}
.rv .stamp:empty{display:none}
.rv-note{grid-column:1/-1;margin:0;padding:12px 22px 14px;border-top:1.5px solid var(--ink);background:var(--paper);font-size:14.5px;line-height:1.45;color:var(--text2)}
/* The follow-up box: shown between turns, until the vote. */
.followup{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin-top:-3px;padding:12px 12px 12px 18px;border:3px solid var(--ink);background:var(--paper)}
.followup .k{flex:1 0 100%}
.followup textarea{flex:1 1 300px;min-height:52px;max-height:30vh;padding:12px 14px;border:2px solid var(--ink);background:#fff;font-size:16px;line-height:1.4;resize:vertical}
.followup textarea:focus{outline:none;box-shadow:0 0 0 3px var(--amber)}
.followup .act{height:52px;border:3px solid var(--ink)}
.followup .formnote{flex:1 0 100%;margin:0}
.followup .formnote:empty{display:none}

.votebar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:-3px;padding:14px 16px 14px 22px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));border:3px solid var(--ink);background:var(--ink);color:var(--pp)}
.vq{word-spacing:.12em;margin:0;font-weight:900;font-size:20px;letter-spacing:-.01em;text-transform:uppercase}
.vbtns{display:flex;flex-wrap:wrap;gap:8px}
.vb{height:50px;padding:0 18px;border:2px solid var(--pp);background:none;color:var(--pp);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.vb.x,.vb.y{border-color:var(--amber);background:var(--amber);color:var(--ink)}
.vb:hover:not(:disabled){background:var(--pp);border-color:var(--pp);color:var(--ink)}
.vb:disabled{opacity:.5;cursor:default}
.after,.oops{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:-3px;padding:16px 16px 16px 22px;border:3px solid var(--ink);background:var(--amber-200)}
.after .am,.oops p{margin:0;font-weight:700;font-size:17px;line-height:1.35}
.after .aa{display:flex;flex-wrap:wrap;gap:10px}
.after .act,.oops .act{height:48px;border:3px solid var(--ink)}
.after .act+.act{margin-left:0}
.oops{background:#f6d7cd}

/* Markdown inside an answer. */
.ans>:first-child{margin-top:0}
.ans>:last-child{margin-bottom:0}
.ans p,.ans ul,.ans ol,.ans pre,.ans blockquote,.ans .tbl{margin:0 0 .85em}
.ans h3,.ans h4,.ans h5,.ans h6{margin:1.2em 0 .45em;font-weight:800;line-height:1.25}
.ans h3{font-size:1.22em}
.ans h4{font-size:1.1em}
.ans h5,.ans h6{font-size:1em}
.ans ul,.ans ol{padding-left:1.35em}
.ans li{margin:.25em 0}
.ans li>ul,.ans li>ol{margin:.25em 0}
.ans strong{font-weight:700}
.ans a{color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:2px}
.ans code{padding:.1em .35em;border-radius:4px;background:rgba(35,26,21,.07);font-family:var(--mono);font-size:.88em}
.ans pre{padding:14px 16px;overflow-x:auto;border-radius:6px;background:var(--ink);color:#f2e9d8;font-size:13.5px;line-height:1.55;scrollbar-width:thin;scrollbar-color:rgba(242,233,216,.35) transparent}
.ans pre::-webkit-scrollbar{height:8px}
.ans pre::-webkit-scrollbar-thumb{background:rgba(242,233,216,.32);border-radius:4px}
.ans pre::-webkit-scrollbar-track{background:transparent}
.ans pre code{padding:0;background:none;font-size:inherit;color:inherit}
.ans blockquote{padding:10px 16px;background:rgba(35,26,21,.05);color:var(--text2)}
.ans hr{height:0;margin:1.2em 0;border:0;border-top:1.5px solid var(--ink-100)}
.ans .tbl{max-width:100%;overflow-x:auto}
.ans table{border-collapse:collapse;font-size:14.5px}
.ans th,.ans td{padding:6px 10px;border:1px solid var(--ink-100);text-align:left;vertical-align:top}
.ans th{background:rgba(35,26,21,.05);font-weight:700}
.ans .a-center{text-align:center}
.ans .a-right{text-align:right}

/* ---- Section heads ---- */
.shead{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;padding-block:64px 22px}
h2{word-spacing:.12em;margin:0;font-weight:900;font-size:clamp(44px,5.8vw,84px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.shead p{flex:0 1 22em;min-width:14em;margin:0;font-size:17px;color:var(--text2);text-wrap:pretty}

/* ---- Prizes ---- */
/* Two small prize cards side by side: the picture on the left, the count and the name on the right. */
.prizes{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink);background:var(--paper)}
.prize{display:flex;align-items:stretch;min-width:0}
.prize+.prize{border-left:3px solid var(--ink)}
.prize .art{flex:none;display:grid;place-items:center;width:150px;min-height:124px;overflow:hidden;border-right:3px solid var(--ink)}
.prize.amz .art{background:#fff}
.prize.amz .art img{width:84%;height:auto;border-radius:7px;box-shadow:0 3px 10px rgba(35,26,21,.18)}
.prize.pods .art{background:#fafafa}
.prize.pods .art img{width:100%;height:100%;object-fit:cover}
.pb{display:flex;align-items:center;gap:16px;min-width:0;padding:16px 22px}
.qty{display:flex;align-items:baseline;font-weight:900;font-size:56px;line-height:.8;letter-spacing:-.05em}
.qty small{margin-left:3px;font-size:.45em;letter-spacing:0;color:var(--clay)}
.pb h3{word-spacing:.12em;margin:0;font-weight:900;font-size:24px;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.pb p{margin:6px 0 0;font-weight:600;font-size:15px;color:var(--text2)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:-3px 0 0;padding:0;list-style:none;border:3px solid var(--ink);background:var(--ink);gap:3px}
.steps li{padding:22px 24px 26px;background:var(--pp)}
.steps b{display:block;font-weight:900;font-size:15px;letter-spacing:.12em;color:var(--clay)}
.steps h3{word-spacing:.12em;margin:10px 0 0;font-weight:900;font-size:24px;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.steps p{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--text2)}

/* ---- Enter the draw: a ticket with three steps ---- */
.ticket{border:3px solid var(--ink);background:var(--paper)}
.tsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-bottom:3px solid var(--ink)}
.tsteps li{display:flex;align-items:center;gap:10px;padding:14px 20px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.tsteps li+li{border-left:1.5px solid var(--ink)}
.tsteps b{display:grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;font-size:13px;letter-spacing:0}
.tsteps li.now{background:var(--amber);color:var(--ink)}
.tsteps li.did{color:var(--moss)}
.tsteps li.did b{border-color:var(--moss);background:var(--moss);color:var(--pp)}
.tbody{padding:26px 26px 28px}
.pane{display:none}
.pane.on{display:block}
.pane.locked.on{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.locked .lk{flex:none;width:52px;height:52px;color:var(--clay)}
.locked>div{flex:1 1 280px}
.pt{margin:0;font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.pd{margin:6px 0 0;color:var(--text2)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:18px}
.fields label{display:flex;flex-direction:column;gap:6px}
.fields span{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.fields input,.code{height:52px;padding:0 14px;border:2.5px solid var(--ink);border-radius:0;background:#fff;font-size:18px}
.fields input:focus,.code:focus{outline:none;box-shadow:0 0 0 3px var(--amber)}
.tick{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:15px;color:var(--text2);cursor:pointer}
.tick input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink)}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.frow .act{border:3px solid var(--ink)}
.formnote{min-height:1.4em;margin:0;font-size:15px;color:var(--text2)}
.formnote.bad{color:var(--red);font-weight:600}
.code{width:9.5em;font-family:var(--mono);font-size:26px;letter-spacing:.3em;text-align:center}
.pv-code{display:inline-block;margin:14px 0 0;padding:8px 12px;background:var(--amber-200);font-size:15px}
.pv-code b{font-family:var(--mono);font-size:18px;letter-spacing:.15em}
.alt{margin:14px 0 0;font-size:14px;color:var(--ink-500)}
/* The corners to pick from: the homepage's fight card. The inner grid is 1.5px wider and taller than the frame, so the
   last column's and the last row's lines fall outside it and the frame stays a single 3px line. */
.fightcard{margin-top:20px;overflow:hidden;border:3px solid var(--ink)}
.fc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 -1.5px -1.5px 0}
.corner{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:18px 16px 16px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--paper)}
.corner .lt{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.corner .badge{width:54px;height:54px;box-shadow:0 0 0 3px var(--ink)}
.corner .nm{word-spacing:.14em;margin:2px 0 0;font-weight:900;font-size:18px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.corner .mk{margin:0;font-weight:500;font-size:13px;color:#6b5f55}
.corner .pick{width:100%;height:40px;margin-top:auto;border:2px solid var(--ink);background:none;font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.corner:not(.on) .pick:hover:not(:disabled){background:rgba(35,26,21,.06)}
.corner .pick:disabled{cursor:default;opacity:.4}
.corner.on{background:rgba(223,157,73,.18)}
.corner.on .pick{background:var(--ink);color:var(--pp);opacity:1}
.corner .tag{position:absolute;top:14px;right:8px;padding:3px 7px;border:3px solid var(--clay);color:var(--clay);font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:rotate(-12deg) scale(1.7);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.corner.on .tag{opacity:1;transform:rotate(-12deg) scale(1)}
.corner.off{opacity:.5}
/* The finished entry: a printed slip. */
.slip{position:relative;max-width:560px;margin:14px 0;padding:30px 34px;background:#fffdf6;box-shadow:0 22px 44px rgba(35,26,21,.16),0 2px 0 rgba(35,26,21,.06);transform:rotate(-1.2deg)}
.slip:before,.slip:after{content:"";position:absolute;left:0;right:0;height:12px;background:radial-gradient(circle at 7px 12px,transparent 6px,#fffdf6 6.5px) 0 0/14px 12px repeat-x}
.slip:before{top:-11px}
.slip:after{bottom:-11px;transform:scaleY(-1)}
.slip-top{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:4px double var(--ink);font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.slip-t{word-spacing:.12em;margin:16px 0 4px;font-weight:900;font-size:34px;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.slip-who{margin:0;font-weight:600;color:var(--text2)}
.slip-att{margin:4px 0 14px;font-size:14px;color:var(--text2)}
.slip-picks{display:flex;flex-direction:column;gap:10px;margin:0;padding:12px 0;list-style:none;border-top:1.5px dashed var(--ink-200);border-bottom:1.5px dashed var(--ink-200)}
.slip-picks li{word-spacing:.12em;display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;text-transform:uppercase}
.slip-picks .badge{width:38px;height:38px;box-shadow:0 0 0 2px var(--ink)}
.slip-picks small{display:block;font-weight:500;font-size:12.5px;text-transform:none;color:#6b5f55}
.slip-d{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--text2)}
.pane.done.on{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px 48px;align-items:center}
.next ol{margin:10px 0 0;padding-left:1.2em}
.next li{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--text2)}
.next li::marker{font-weight:800;color:var(--clay)}
.next .alt{margin-top:18px}

/* ---- Rules ---- */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0 0 72px;padding:0;list-style:none;counter-reset:r;border-top:3px solid var(--ink)}
.rules li{position:relative;padding:16px 0 16px 46px;border-bottom:1.5px solid var(--ink-100);font-size:16px;line-height:1.5;counter-increment:r}
.rules li:before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:17px;font-weight:900;font-size:14px;letter-spacing:.08em;color:var(--clay)}

/* ---- Your battles: this browser's past battles under the board, one of them in a dialog ---- */
.past{margin-top:40px}
.past-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.past-top h3{margin:0;font-weight:900;font-size:clamp(24px,2.6vw,32px);line-height:1;letter-spacing:-.02em}
.past-top span{font-weight:600;font-size:14px;color:var(--ink-500)}
.past-sub{margin:8px 0 14px;font-size:15px;line-height:1.45;color:var(--text2)}
.past-list{margin:0;padding:0;list-style:none;border:3px solid var(--ink);background:var(--paper)}
.past-list li+li{border-top:1.5px solid var(--ink-100)}
.pastb{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;width:100%;padding:14px 18px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pastb:hover{background:#fff}
.pst-q{grid-column:1;display:-webkit-box;overflow:hidden;font-weight:700;font-size:16.5px;line-height:1.35;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pst-meta{grid-column:1;font-size:13.5px;line-height:1.4;color:var(--ink-500)}
.pst-res{grid-column:2;grid-row:1/span 2;padding:6px 12px;border:2px solid var(--ink);font-weight:800;font-size:13.5px;white-space:nowrap}
.pst-res.won{background:var(--amber)}
.pst-res.tie{background:var(--amber-200)}
.pst-res.bad{background:var(--ink-100)}
.pst-res.none{border-style:dashed;border-color:var(--ink-300);font-weight:700;color:var(--ink-500)}
.past .link{margin-top:12px}
.pastdlg{width:min(1100px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);padding:0;overflow:hidden;border:3px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.pastdlg[open]{display:flex;flex-direction:column}
.pastdlg::backdrop{background:rgba(21,16,12,.55)}
.pdg-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 22px;border-bottom:3px solid var(--ink)}
.pdg-top h2{margin:3px 0 0;font-weight:900;font-size:clamp(21px,2.3vw,27px);line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.pdg-when{margin:0;font-weight:600;font-size:13.5px;color:var(--ink-500)}
.pdg-top .act{flex:none;height:44px;border:3px solid var(--ink)}
.pdg-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:var(--pp)}
.pdg-side{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 18px}
.pdg-side+.pdg-side{border-left:3px solid var(--paper)}
.pdg-side .names{display:flex;flex-direction:column;min-width:0}
.pdg-side b{font-weight:900;font-size:16px;line-height:1.1;word-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere}
.pdg-side small{margin-top:3px;font-weight:600;font-size:12.5px;color:var(--ink-200)}
.pdg-side.won{background:var(--amber);color:var(--ink)}
.pdg-side.tie{background:var(--amber-200);color:var(--ink)}
.pdg-side.won small,.pdg-side.tie small{color:var(--crumb)}
.pdg-body{overflow:auto;overscroll-behavior:contain}
.pdg-body .ans,.pdg-body .turn:last-child .ans{min-height:0}
.pdg-body>.wait,.pdg-body>.err{margin:22px}

/* ---- First-battle notice ---- */
.notice{max-width:600px;max-height:calc(100vh - 32px);overflow:auto;width:calc(100% - 32px);padding:28px 28px 24px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.notice::backdrop{background:rgba(21,16,12,.55)}
.notice h2{margin:8px 0 14px;font-size:clamp(30px,4vw,40px);line-height:.95}
.notice p{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--text2)}
.terms{margin:0 0 6px;padding:0;list-style:none}
.terms li{margin:0 0 10px;padding-left:16px;font-size:15px;line-height:1.5;color:var(--text2);text-indent:-16px}
.terms li:before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 2px 0;border-radius:50%;background:var(--amber)}
.terms b{color:var(--ink)}
.notice .tick{margin:14px 0 0;padding:12px 14px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:600}
.notice .agreed{margin:14px 0 0;font-weight:700;color:var(--moss)}
.notice .formnote{margin-top:8px}
.notice .act:disabled{opacity:.45;cursor:default}
.foot-link{color:var(--ink-300)}
.foot-link:hover{color:var(--pp)}
.nacts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
/* The optional prize-draw sign-up inside the data agreement. */
.drawopt[hidden],[data-draw-fields][hidden]{display:none}
.notice .drawopt>.tick{margin-top:10px;font-weight:500}
.notice [data-draw-fields]{margin-top:14px;padding:12px 14px 14px;border:2px solid var(--ink);background:#fff}
.notice .drawhead{margin:0;font-size:15px;line-height:1.45;color:var(--text2)}
.notice .drawhead b{color:var(--ink)}
.notice [data-draw-fields] .fields{margin-top:12px}
.notice [data-draw-fields] .fields input{height:46px;font-size:17px}
.notice [data-draw-fields] .tick{margin:12px 0 0;padding:0;border:0;background:none;font-weight:500;font-size:14px;color:var(--text2)}
.lacts{display:flex;flex-wrap:wrap;gap:10px}
.lacts .act{border:3px solid var(--ink)}
.nacts .act{height:48px;border:3px solid var(--ink)}

/* ---- Footer (the homepage's) ---- */
.foot{background:#0f0b08;color:var(--pp);padding-block:44px calc(44px + env(safe-area-inset-bottom,0px))}
.foot .frow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;margin:0}
.foot .brand .rsilogo{display:block;flex:none;width:150px;line-height:0}
.foot .brand .rsilogo img{width:100%;height:auto}
.foot .brand .bakemark{margin:0 -3px 0 0}
.foot .partners{display:flex;flex-direction:column;gap:14px;max-width:100%}
.foot .plab{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-300)}
.foot .logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px}
.scale{height:18px;width:auto}
/* Hugging Face: its lockup has a large face and a small name, so it runs taller than the other marks (as on the homepage). */
.hf{width:auto;height:34px}
.pm{display:block;flex:none;background:var(--pp);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.pm.nd{width:94px;height:22px;-webkit-mask-image:url(assets/partner-nd.svg);mask-image:url(assets/partner-nd.svg)}
.pm.uw{width:42px;height:28px;-webkit-mask-image:url(assets/partner-uw.svg);mask-image:url(assets/partner-uw.svg)}
.pm.stanford{width:92px;height:21px;-webkit-mask-image:url(assets/partner-stanford.png);mask-image:url(assets/partner-stanford.png)}
.foot .fsmall{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:34px;padding-top:22px;border-top:1px solid rgba(247,240,223,.1);font-size:14px;color:var(--ink-300)}
.foot .fsmall a{text-decoration:none}
.foot .fsmall a:hover{text-decoration:underline}

/* ---- Smaller screens ---- */
@media (max-width:1080px){
 .links{display:none}
 .fc{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
 .hero{grid-template-columns:minmax(0,1fr);align-items:start}
 .scorecard{box-shadow:6px 6px 0 var(--ink)}
 .vs{display:none}
 .sh[data-head=x],.sh[data-head=y]{justify-content:flex-start;min-height:50px;padding:7px 10px}
 .sh .badge{width:34px;height:34px}
 .sh .names{display:none}
 .st{font-size:10.5px;letter-spacing:.08em}
 .pair{grid-template-columns:minmax(0,1fr)}
 .pair .ans+.ans{border-left:0;border-top:3px solid var(--ink)}
 .pair .ans:before{content:attr(data-label);display:inline-block;margin:0 0 10px;padding:2px 8px;background:var(--ink);color:var(--pp);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
 .ans,.turn:last-child .ans{min-height:110px}
 .reveal{grid-template-columns:minmax(0,1fr)}
 .rv+.rv{border-left:0;border-top:3px solid var(--ink)}
 .pdg-sides{grid-template-columns:minmax(0,1fr)}
 .pdg-side+.pdg-side{border-left:0;border-top:2px solid rgba(247,240,223,.3)}
 .prizes{grid-template-columns:minmax(0,1fr)}
 .prize+.prize{border-left:0;border-top:3px solid var(--ink)}
 .steps{grid-template-columns:minmax(0,1fr)}
 .rules{grid-template-columns:minmax(0,1fr)}
 .fc{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shead{flex-wrap:wrap}
}
@media (max-width:640px){
 .pv{font-size:13.5px;justify-content:flex-start}
 .sub{display:none}
 .hero{gap:20px;padding-block:22px 22px}
 .lead{margin-top:18px;font-size:18px}
 .scorecard{gap:10px;padding:14px 14px 14px;box-shadow:5px 5px 0 var(--ink)}
 .scorecard .big{font-size:40px}
 .sc-prizes,.scorecard .act{display:none}
 .pips li{aspect-ratio:1.5;font-size:15px}
 .board.idle{display:none}
 .followup .act{flex:1 0 100%}
 .pane.done.on{display:block}
 .top{gap:12px;padding-block:12px}
 .brand{gap:8px}
 .brand .rsimark{height:38px}
 .brand small{display:none}
 .chip{height:40px;padding:0 12px 0 10px;font-size:11.5px}
 .chip .mini{display:none}
 .composer textarea{padding:16px 16px 6px;font-size:18px}
 .crow{flex-direction:column;align-items:stretch;padding:6px 10px 10px 16px}
 .go{justify-content:center}
 .gobox{flex-wrap:wrap;justify-content:flex-end;gap:10px 14px}
 .gobox .go{flex:1 1 auto}
 .idea{font-size:12.5px;white-space:normal}
 .vq{font-size:14px;letter-spacing:.02em}
 .vbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
 .vb{height:42px;padding:0 6px;font-size:11.5px}
 .votebar{gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}
 .ans{padding:18px 18px 22px;font-size:15.5px}
 .fields{grid-template-columns:minmax(0,1fr)}
 .tsteps li{justify-content:center;padding:12px 6px;font-size:11px;letter-spacing:.08em}
 .tsteps b{width:24px;height:24px}
 .tbody{padding:20px 16px 22px}
 .qty{font-size:46px}
 .prize .art{width:116px;min-height:104px}
 .pb{padding:16px 18px 20px}
 .slip{padding:24px 18px 26px}
 .slip-t{font-size:28px}
 .corner{padding:14px 12px 12px}
 .corner .nm{font-size:16px}
 .rules li{padding-left:40px}
 .pastb{grid-template-columns:minmax(0,1fr);padding:12px 14px}
 .pst-res{grid-column:1;grid-row:auto;justify-self:start;padding:4px 10px;font-size:12.5px}
 .pastdlg{width:calc(100% - 16px);max-height:calc(100vh - 16px);box-shadow:5px 5px 0 var(--ink)}
 .pdg-top{padding:10px 10px 10px 16px}
 .pdg-top .act{height:40px;padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 html{scroll-behavior:auto}
}