.duo{--night:#1a0f2b;--night2:#22143a;--duo-card:#2c1b49;--duo-card2:#372357;--rose:#f378a0;--rose-deep:#c0355f;--peach:#f6b782;--ruby:#d24b73;--cream:#f6ecf1;--muted:#b6a4c7;--dim:#8b7aa0;--line:rgba(255,255,255,.09);--good:#7fd0a6;--gate:#e05a86;--grad:linear-gradient(135deg,#f378a0,#f6b782);--radius:14px}
.duo *{box-sizing:border-box;margin:0;padding:0}
.duo{max-width:576px;margin:0 auto;position:relative;background:var(--night);color:var(--cream);font-family:'Inter',system-ui,sans-serif;border-radius:16px;overflow:hidden;box-sizing:border-box}
.duo .screen{display:none;padding:22px 20px 40px;animation:fade .35s ease}
.duo .screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.duo h1, .duo h2, .duo h3{font-family:'Fraunces',serif}
.duo .top{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-height:24px}
.duo .back{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:4px}
.duo .back:hover{color:var(--cream)}
/* V670: A BACK BUTTON THAT LOOKS LIKE A BUTTON. His words: "place 'Back' button
   with a click button shape", and "Give a <Back button (clickable)". The control
   it replaces was a bare '‹' -- no border, no label, 22px of glyph in a 30px box.
   Three things this fixes at once: it reads as a control, it says where it goes,
   and it is a 44px tap target, which the chevron never was.
   `--muted` on the card ground, not `--dim`: 3.96:1 is the pair this stylesheet
   has tripped on three times now (V662, V664, and the V669 pass rule). */
.duo .backbtn{display:inline-flex;align-items:center;gap:6px;background:var(--duo-card);
  border:1px solid var(--line);color:var(--muted);border-radius:10px;
  padding:9px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  min-height:44px;line-height:1;letter-spacing:.02em;transition:.15s;flex:0 0 auto}
.duo .backbtn:hover{color:var(--cream);border-color:var(--peach)}
.duo .backbtn:active{transform:scale(.97)}
.duo .backbtn:focus-visible{outline:2px solid var(--peach);outline-offset:2px}
.duo .kicker{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.duo .muted{color:var(--muted)}
.duo .hero{text-align:center;padding:14px 0 22px;position:relative}
.duo .hero .glow{position:absolute;inset:-40px 0 auto;height:170px;background:radial-gradient(circle at 50% 20%,rgba(243,120,160,.28),transparent 62%);filter:blur(6px);pointer-events:none}
.duo .hero h1{font-size:33px;font-weight:600;position:relative}
.duo .hero h1 em{font-style:italic;color:var(--peach)}
.duo .hero p{color:var(--muted);margin-top:9px;font-size:14.5px;position:relative}
.duo .gcards{display:flex;flex-direction:column;gap:14px}
.duo .gcard{background:var(--duo-card);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:.15s;text-align:left;width:100%;color:inherit;font-family:inherit}
.duo .gcard:hover{transform:translateY(-2px);border-color:rgba(243,120,160,.4);background:var(--duo-card2)}
.duo .gicon{width:54px;height:54px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center}
.duo .gicon svg{width:28px;height:28px}
.duo .gcard h3{font-size:19px;font-weight:500;margin-bottom:3px}
.duo .gcard .sub{font-size:13px;color:var(--muted);line-height:1.4}
.duo .gcard .chev{margin-left:auto;color:var(--dim);font-size:20px}
.duo .section-lbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin:22px 0 12px;display:flex;align-items:center;justify-content:space-between}
.duo .chips{display:flex;flex-wrap:wrap;gap:9px}
.duo .chip{background:var(--duo-card);border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;color:var(--cream);font-family:inherit}
.duo .chip .n{font-size:11px;color:var(--dim)}
.duo .chip:hover{border-color:rgba(243,120,160,.45)}
.duo .chip.on{background:var(--grad);color:#3a1226;border-color:transparent;font-weight:500}
.duo .chip.on .n{color:#7a2f45}
.duo .chip.gate{border-color:rgba(224,90,134,.5)}
.duo .chip.gate.on{background:linear-gradient(135deg,#e05a86,#c0355f);color:#fff}
.duo .mixnote{margin-top:12px;font-size:13px;color:var(--peach);display:none;align-items:center;gap:7px}
.duo .mixnote.show{display:flex}
/* V792 --- the iOS-style multi-select deck dropdown (replaces the chip wall). */
.duo .deckdd{position:relative}
.duo .deckdd .ddbtn{width:100%;display:flex;align-items:center;gap:10px;background:var(--duo-card);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--cream);font-size:14px;
  font-weight:600;cursor:pointer;font-family:inherit}
.duo .deckdd .ddbtn .lbl{flex:1 1 auto;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo .deckdd .ddbtn .lbl small{color:var(--dim);font-weight:500}
.duo .deckdd .ddbtn .chev{color:var(--dim);font-size:12px;transition:.15s}
.duo .deckdd.open .ddbtn{border-color:var(--peach)}
.duo .deckdd.open .ddbtn .chev{transform:rotate(180deg)}
.duo .deckdd .ddmenu{margin-top:8px;background:var(--duo-card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.duo .deckdd .ddhint{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);padding:9px 14px 4px}
.duo .deckdd .ddrow{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-top:1px solid var(--line)}
.duo .deckdd .ddrow:active{background:var(--duo-card2)}
.duo .deckdd .ddrow .rn{flex:1 1 auto;font-size:14px;color:var(--muted)}
.duo .deckdd .ddrow.on .rn{color:var(--cream);font-weight:600}
.duo .deckdd .ddrow .rn .spice{font-size:12.5px}
.duo .deckdd .ddrow .ck{width:20px;flex:0 0 auto;color:var(--rose);font-size:17px;text-align:center;opacity:0}
.duo .deckdd .ddrow.on .ck{opacity:1}
.duo .deckdd .ddfoot{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--line)}
.duo .deckdd .dddone{background:var(--grad);color:#3a1226;border:0;border-radius:9px;padding:7px 16px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit}

/* V806: the 2+More deck picker — two decks as front chips, the rest behind More. */
.duo .deckfront{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:9px}
.duo .deckchip{display:inline-flex;align-items:center;gap:7px;background:var(--duo-card);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:9px 15px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.duo .deckchip .spice{font-size:12.5px}
.duo .deckchip .ck{color:var(--rose);font-size:15px;opacity:0}
.duo .deckchip.on{border-color:var(--peach);color:var(--cream)}
.duo .deckchip.on .ck{opacity:1}
.duo .deckdd .ddbtn.morebtn{margin-top:0}

.duo .opt{background:var(--duo-card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-bottom:11px}
.duo .opt-head{display:flex;align-items:flex-start;gap:12px}
.duo .opt-head .txt{flex:1}
.duo .opt-head h4{font-size:15px;font-weight:500}
.duo .opt-head p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.duo .sw{width:46px;height:27px;border-radius:999px;background:#3a2a52;position:relative;cursor:pointer;flex:none;transition:.2s;border:none}
.duo .sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s}
.duo .sw.on{background:var(--rose)}
.duo .sw.on::after{left:22px}
.duo .subopt{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);display:none}
.duo .subopt.show{display:block}
.duo .radiorow{display:flex;gap:10px;margin-bottom:12px}
.duo .rbtn{flex:1;background:var(--night2);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;cursor:pointer;color:var(--muted);font-family:inherit;text-align:center}
.duo .rbtn.on{border-color:var(--rose);color:var(--cream);background:rgba(243,120,160,.12)}
.duo .linkbtn{background:none;border:1px dashed var(--line);border-radius:10px;padding:10px 14px;color:var(--peach);font-size:13px;cursor:pointer;width:100%;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px}
.duo .seg{display:flex;background:var(--duo-card);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.duo .seg button{flex:1;background:none;border:none;color:var(--muted);padding:10px;border-radius:9px;font-size:13px;cursor:pointer;font-family:inherit}
.duo .seg button.on{background:var(--grad);color:#3a1226;font-weight:500}
.duo .err{color:var(--gate);font-size:13px;margin-top:10px;display:none}
.duo .err.show{display:block}
.duo .cta{width:100%;background:var(--grad);color:#3a1226;border:none;border-radius:14px;padding:16px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;font-family:inherit;box-shadow:0 8px 24px rgba(243,120,160,.22)}
.duo .cta:active{transform:scale(.99)}
.duo .overlay{position:fixed;inset:0;background:rgba(10,5,20,.8);display:none;align-items:center;justify-content:center;z-index:50;padding:24px;backdrop-filter:blur(3px)}
.duo .overlay.show{display:flex}
.duo .modal{background:var(--duo-card);border:1px solid rgba(224,90,134,.4);border-radius:22px;padding:26px 22px;max-width:360px;width:100%;text-align:center}
.duo .modal .lockcirc{width:58px;height:58px;border-radius:50%;background:rgba(224,90,134,.16);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.duo .modal .lockcirc svg{width:26px;height:26px}
.duo .modal h3{font-size:22px;font-weight:600;margin-bottom:8px}
.duo .modal p{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:18px}
.duo .modal input{background:var(--night2);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--cream);font-size:var(--fld-fs,15px);width:130px;text-align:center;font-family:inherit;margin-bottom:16px}
.duo .modal .merr{color:var(--gate);font-size:12.5px;margin-bottom:10px;min-height:16px}
.duo .modal .mrow{display:flex;gap:10px}
.duo .modal .mrow button{flex:1;border-radius:11px;padding:13px;font-size:14px;cursor:pointer;font-family:inherit;border:none}
.duo .mcancel{background:var(--night2);color:var(--muted);border:1px solid var(--line)!important}
.duo .mok{background:linear-gradient(135deg,#e05a86,#c0355f);color:#fff}
.duo .phead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.duo .hchip{font-size:12px;padding:5px 11px;border-radius:20px;background:var(--duo-card);border:1px solid var(--line);color:var(--muted)}
.duo .hchip.score{margin-left:auto;color:var(--peach);border-color:rgba(246,183,124,.35)}
.duo .track{height:11px;background:#3a2a52;border-radius:999px;overflow:hidden;margin-bottom:18px}
.duo .fill{height:100%;background:var(--grad);border-radius:999px;transition:width .5s ease;width:0%}
.duo .pcard{background:var(--duo-card);border:1px solid var(--line);border-radius:18px;padding:22px 20px;text-align:center}
.duo .lockcirc2{width:52px;height:52px;border-radius:50%;background:rgba(243,120,160,.14);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.duo .lockcirc2 svg{width:24px;height:24px}
.duo .qcard{background:linear-gradient(135deg,rgba(243,120,160,.14),rgba(246,183,124,.1));border:1px solid rgba(243,120,160,.25);border-radius:16px;padding:20px;margin-bottom:16px}
.duo .qcard .qn{font-size:12px;color:var(--peach);margin-bottom:6px}
.duo .qcard .qt{font-family:'Fraunces';font-size:20px;font-weight:500;line-height:1.25}
.duo .optbtn{width:100%;background:var(--night2);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14.5px;cursor:pointer;color:var(--cream);font-family:inherit;text-align:left;margin-bottom:9px;transition:.15s}
.duo .optbtn:hover{border-color:rgba(243,120,160,.4)}
.duo .optbtn:disabled{cursor:default}
.duo .optbtn.match{background:rgba(127,208,166,.16);border-color:var(--good);color:var(--good)}
.duo .optbtn.miss{background:rgba(224,90,134,.14);border-color:var(--gate);color:#f7a8c0}
.duo .freein{width:100%;background:var(--night2);border:1px solid var(--line);border-radius:12px;padding:13px;color:var(--cream);font-family:inherit;font-size:15px;margin-bottom:12px}
.duo .reveal{font-size:13.5px;min-height:20px;margin:6px 0 14px;text-align:center}
.duo .judge{display:flex;gap:10px;margin:4px 0 6px}
.duo .judge button{flex:1;border-radius:11px;padding:12px;font-size:14px;cursor:pointer;font-family:inherit;border:1px solid var(--line);background:var(--night2);color:var(--cream)}
.duo .judge .yes{background:rgba(127,208,166,.14);border-color:var(--good);color:var(--good)}
.duo .judge .no{background:rgba(224,90,134,.12);border-color:var(--gate);color:#f7a8c0}
.duo .nextbtn{width:100%;background:var(--grad);color:#3a1226;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:8px}
.duo .tot-q{font-family:'Fraunces';font-size:20px;font-weight:500;text-align:center;margin:6px 0 18px}
.duo .tot-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;position:relative}
.duo .tot-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--night);border:1px solid var(--line);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-size:13px;color:var(--peach);z-index:2}
.duo .tot-side{min-height:120px;border-radius:18px;display:flex;align-items:center;justify-content:center;padding:16px;cursor:pointer;font-family:'Fraunces';font-size:15px;font-weight:500;text-align:center;color:var(--cream);border:1px solid var(--line);transition:.15s;line-height:1.25}
.duo .tot-side.a{background:rgba(243,120,160,.12)}
.duo .tot-side.b{background:rgba(246,183,124,.12)}
.duo .tot-side:hover{border-color:rgba(243,120,160,.5)}
.duo .tot-side.picked{outline:3px solid var(--rose);outline-offset:-3px}
.duo .cchip{display:flex;align-items:center;gap:10px;background:var(--duo-card);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13.5px}
.duo .result-card{background:var(--duo-card);border:1px solid var(--line);border-radius:22px;padding:28px 22px;text-align:center;margin-top:10px}
.duo .result-pct{font-family:'Fraunces';font-size:56px;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;margin-bottom:6px}
.duo .result-rating{font-family:'Fraunces';font-size:20px;margin-bottom:14px}
.duo .result-line{color:var(--muted);font-size:13.5px;margin-bottom:4px}
.duo .footnote{text-align:center;color:var(--dim);font-size:11px;margin-top:24px}
.duo :focus-visible{outline:2px solid var(--peach);outline-offset:2px}

/* ==========================================================================
   V661 — THE THREE SKINS. His ask: "keep option to keep twilight or use light or
   green as per tool (three options)".

   Only TOKENS are redeclared below; not one rule is repeated. That is the whole
   reason the palette was hoisted into custom properties on the container in the
   first place, and it is why a fourth skin would be eight lines rather than a
   second stylesheet.

   TWILIGHT is the default and is the block at the top of this file, so it needs
   no rule here -- `.duo.skin-twilight` inherits it. Absence is the default,
   the same way games_skin.py stores it as a missing row.

   LIGHT is the same design on warm white. The rose darkens to --rose-deep for
   text-weight use because #f378a0 measures about 2.1:1 on white and this project
   has a 4.5:1 floor it paid for once already (V578).

   GREEN IS NOT A COLOUR, IT IS "FOLLOW THE HOUSE". Every token maps onto the
   site's own (--bg, --panel, --text, --accent ...), so it is dark green on a dark
   site and white on a light one, and it tracks any future change to those tokens
   for free. It is the only one of the three that makes the tool look like the
   rest of the site, which is the reason it is offered.
   ========================================================================== */
.duo.skin-light{
  --night:#fdf7f9;--night2:#f6eef2;--duo-card:#ffffff;--duo-card2:#f4e8ee;
  --rose:#c0355f;--rose-deep:#96234a;--peach:#b96a2a;--ruby:#a52b52;
  --cream:#2a1c26;--muted:#5d4a56;--dim:#6b5766;--line:rgba(42,28,38,.14);
  --good:#1f7a52;--gate:#a52b52;
  --grad:linear-gradient(135deg,#c0355f,#b96a2a)}
.duo.skin-green{
  --night:var(--bg);--night2:var(--panel);--duo-card:var(--panel);--duo-card2:var(--btn);
  --rose:var(--accent);--rose-deep:var(--accent);--peach:var(--accent);--ruby:var(--accent);
  --cream:var(--text);--muted:var(--muted2);--dim:var(--muted3);--line:var(--line2);
  --good:var(--good-line);--gate:var(--bad);
  --grad:linear-gradient(135deg,var(--accent),var(--accent))}

/* The picker itself. Three pills, and it is on the tool's own tokens so it
   repaints with everything else the instant the class changes. */
.duo .skinrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.duo .spill{background:var(--duo-card);color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;font:inherit;font-size:12.5px;cursor:pointer}
.duo .spill:hover{color:var(--cream)}
.duo .spill.on{background:var(--rose);color:var(--night);border-color:var(--rose);font-weight:600}
/* V661: the inline SVGs stroke with currentColor, so their colour is a token
   here rather than a hex in the JS -- otherwise the icons keep the Twilight rose
   in all three skins, which is exactly what they did on the first pass. */
.duo .gicon{color:var(--rose)}
.duo .lockcirc,.duo .lockcirc2{color:var(--gate)}

/* ==========================================================================
   V662 — the (-) XX (+) steppers, player names, and the past-games list.
   His "number of questions and timed should be user enterable ..use (-) XX (+)
   format.. default 5 mins and 5 questions".
   ========================================================================== */
.duo .stepwrap{display:flex;align-items:center;gap:12px;margin-top:12px}
.duo .stepper{display:flex;align-items:center;gap:2px;background:var(--duo-card);
  border:1px solid var(--line);border-radius:999px;padding:4px}
/* 44px is the finger target this project already uses for TAP_RADIUS reasons --
   a stepper you have to aim at is a stepper somebody gives up on. */
.duo .stepbtn{width:40px;height:40px;border:none;background:transparent;color:var(--rose);
  font-size:22px;line-height:1;font-family:inherit;cursor:pointer;border-radius:999px}
.duo .stepbtn:hover{background:var(--duo-card2);color:var(--cream)}
.duo .stepbtn:active{transform:scale(.94)}
.duo .stepval{min-width:52px;text-align:center;font-size:22px;font-weight:600;
  font-family:'Fraunces',serif;color:var(--cream);font-variant-numeric:tabular-nums}
.duo .stephint{font-size:13px;color:var(--muted)}

.duo .pnames{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.duo .pname{display:flex;align-items:center;gap:10px;background:var(--duo-card);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.duo .pname .pn{width:26px;height:26px;flex:0 0 26px;border-radius:999px;display:grid;
  place-items:center;background:var(--duo-card2);color:var(--rose);font-size:12px;font-weight:600}
.duo .pname input{flex:1;background:none;border:none;color:var(--cream);font:inherit;
  font-size:var(--fld-fs,15px);outline:none;min-width:0}
.duo .pname input::placeholder{color:var(--dim)}

.duo .pastrow{display:flex;align-items:center;gap:12px;background:var(--duo-card);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.duo .pastpct{font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--rose);
  min-width:46px;font-variant-numeric:tabular-nums}
.duo .pastmid{flex:1;display:flex;flex-direction:column;min-width:0}
.duo .pastmid b{font-size:14px;font-weight:600}
.duo .pastsub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo .pastwhen{font-size:11.5px;color:var(--dim);text-align:right}
/* The play screen's back button sits in a flex header that was built for two
   chips, so it needs to not push them off a 360px phone. */
.duo .phead .back{margin-right:2px;flex:0 0 auto}
/* V662: 480 -> 576 (his "make the area 20% extra (horizontally)"), and the setup
   header loses half its vertical space -- it holds a back arrow and one line of
   kicker text and was reserving 32px plus 16px below it. The card still centres
   and still has `box-sizing:border-box`, so nothing inside needed touching. */

/* V662 — the two-outcome action row. Buttons, not a toggle: his "this should look
   like a action button", and the two outcomes genuinely differ in what they let
   the other player see, which is worth naming on each button rather than implying
   with a switch. */
.duo .actrow{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.duo .actbtn{flex:1 1 46%;min-width:150px;text-align:left;background:var(--duo-card);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;
  font:inherit;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.duo .actbtn b{font-size:14px;font-weight:600;color:var(--cream)}
.duo .actbtn span{font-size:11.5px;line-height:1.35}
.duo .actbtn:hover{border-color:var(--rose-deep)}
.duo .actbtn.on{background:var(--grad);border-color:transparent}
.duo .actbtn.on b,.duo .actbtn.on span{color:var(--night)}

/* V662 — the player picker: type, search the Hub, or invite. */
.duo .pslot{position:relative}
.duo .findbtn{flex:0 0 auto;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);
  background:var(--duo-card2);color:var(--rose);font-size:16px;cursor:pointer;line-height:1}
.duo .findbtn:hover{color:var(--cream);border-color:var(--rose-deep)}
.duo .sugg{display:none;margin-top:6px;background:var(--duo-card2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.duo .sugg.show{display:block}
.duo .sline{display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--cream);font:inherit;font-size:13.5px;padding:9px 12px;cursor:default}
.duo .sline.muted{color:var(--muted);font-size:12.5px}
.duo .sline.pickable{cursor:pointer}
.duo .sline.pickable:hover{background:var(--rose);color:var(--night)}
.duo .invbox{margin-top:12px;background:var(--duo-card);border:1px dashed var(--line);
  border-radius:14px;padding:12px}
.duo .invrow{display:flex;gap:8px;flex-wrap:wrap}
.duo .invrow input{flex:1 1 46%;min-width:140px;background:var(--duo-card2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;color:var(--cream);font:inherit;font-size:var(--fld-fs,14px);outline:none}
.duo .invrow input::placeholder{color:var(--dim)}
.duo .actbtn.solo{flex:0 0 auto;margin-top:9px;min-width:0}
/* V662: the neutral 'you picked this' state, for when the verdict is withheld
   until the end -- it has to look chosen without looking correct. */
.duo .optbtn.picked{border-color:var(--rose);background:var(--duo-card2);color:var(--cream)}
.duo .tot-side.picked{outline:2px solid var(--rose)}

/* ==========================================================================
   V662 round 2 — the agreed setup screen.
   ========================================================================== */
/* The title row: Dancing Script, one line, never wrapping. His pick over
   Playfair after seeing both. */
.duo .titleline{display:flex;align-items:baseline;justify-content:center;gap:.3em;
  white-space:nowrap;margin:0}
/*  V923 --- .duoname and .dot ARE GONE FROM THE MARKUP. The hero said "Duo" over a
    strip that already said Duo; only that word repeated, and the invitation beside
    it was doing real work, so the line kept the phrase and lost the name.

    .play TAKES .duoname's SIZE. Left at clamp(26px,8vw,35px) the hero would have
    SHRUNK by the same release that was meant to tidy it -- the small size was for
    the second half of a two-part line, not for a title. The clamp is a shade under
    the old name's because this is nine characters of italic script, not three, and
    the row is white-space:nowrap -- measured at 320px, the narrowest width the site
    supports, before this number was chosen.

    THE TWO RULES ARE KEPT, not deleted, and this is the project's rule rather than
    an oversight: dead-but-harmless CSS is listed and left in the release that stops
    using it, because a sweep across a stylesheet is a second change wearing the
    first one's clothes. test_v923 names them. */
.duo .titleline .duoname{font-family:'Dancing Script',cursive;font-weight:700;
  font-size:clamp(38px,12vw,52px);line-height:1;color:var(--cream)}
.duo .titleline .dot{color:var(--peach);font-size:.34em;line-height:1;transform:translateY(-1.1em)}
.duo .titleline .play{font-family:'Dancing Script',cursive;font-weight:500;font-style:italic;
  font-size:clamp(34px,11vw,48px);line-height:1;color:var(--rose)}

/* The colour chips move above the title and lose their label, so the row is
   three pills and nothing else. */
.duo .skinrow{justify-content:center;margin:0 0 14px}

/* Numbered sections, because his list is ordered and the order is the spec. */
.duo .secnum{display:flex;align-items:center;gap:9px;margin:24px 0 9px}
.duo .secnum .n{width:20px;height:20px;flex:0 0 20px;border-radius:999px;background:var(--duo-card2);
  color:var(--peach);font-size:11px;font-weight:600;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}
.duo .secnum .t{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* Three-way source picker. */
.duo .seg3{display:flex;background:var(--duo-card);border:1px solid var(--line);
  border-radius:12px;padding:4px;gap:4px}
.duo .seg3 button{flex:1;background:none;border:none;color:var(--muted);font:inherit;
  font-size:13px;padding:9px 4px;border-radius:9px;cursor:pointer}
.duo .seg3 button.on{background:var(--grad);color:var(--night);font-weight:600}
.duo .ownbox{margin-top:11px;background:var(--duo-card);border:1px dashed var(--line);
  border-radius:13px;padding:12px}

/* Length: toggle and value on ONE row. */
.duo .lenrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.duo .lentog{display:flex;background:var(--duo-card);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:3px}
.duo .lentog button{background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;
  padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.duo .lentog button.on{background:var(--grad);color:var(--night);font-weight:600}

.duo .conseq{font-size:12.5px;color:var(--muted);margin:9px 0 0}
.duo .hosttag{font-size:11px;color:var(--good);font-weight:600;letter-spacing:.04em}
.duo .guestbar{background:var(--duo-card);border:1px solid var(--line);
  border-left:3px solid var(--peach);border-radius:11px;padding:11px 13px;
  font-size:12.5px;color:var(--muted);margin:12px 0 4px}
.duo .guestbar b{color:var(--cream)}
.duo .cta:disabled{opacity:.45;cursor:default}

/* Sound picker. */
.duo .sndrow{display:flex;flex-wrap:wrap;gap:7px}
.duo .snd{background:var(--duo-card);border:1px solid var(--line);border-radius:999px;
  padding:8px 13px;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;
  display:inline-flex;gap:6px;align-items:center}
.duo .snd:hover{color:var(--cream)}
.duo .snd.on{background:var(--rose);color:var(--night);border-color:var(--rose);font-weight:600}
.duo .snd .up{color:var(--peach);font-size:9.5px;font-weight:600;letter-spacing:.05em}
.duo .snd.on .up{color:var(--night)}

/* The hand-over wall. A SCREEN, not an overlay -- see the note in duo.js: the
   answers must not be in the document behind it. */
.duo #handover{min-height:60vh;display:none;place-items:center}
.duo #handover.active{display:grid}
.duo .handcard{text-align:center;background:var(--duo-card);border:1px solid var(--line);
  border-radius:18px;padding:30px 22px;max-width:360px;margin:0 auto}
.duo .handicon{font-size:38px;line-height:1;margin-bottom:12px}
.duo .handcard h3{font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin:0 0 8px}
.duo .handcard p{color:var(--muted);font-size:13.5px;margin:0 0 18px}

/* The review pass. */
.duo #review .qrow{border-top:1px solid var(--line);padding:13px 0}
.duo #review .qq{font-size:14px;color:var(--cream);margin-bottom:6px}
.duo #review .pair{font-size:12.5px;color:var(--muted);margin-bottom:9px;line-height:1.5}
.duo #review .judge{display:flex;gap:8px}
.duo #review .judge button{flex:1;background:var(--duo-card);border:1px solid var(--line);
  border-radius:10px;padding:9px 6px;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.duo #review .judge button.yes.on{background:var(--good);color:#0d2b1e;border-color:transparent;font-weight:600}
.duo #review .judge button.no.on{background:var(--duo-card2);color:var(--cream);border-color:var(--line);font-weight:600}

/* ==========================================================================
   V664 — THE SKIN REACHES THE PAGE.

   HIS ASK, with a screenshot: "on themes on duo and spin- make whole page on same
   theme (not just this area)". The skin defined its tokens on `.duo`, so it
   repainted the card and stopped at its edge — a Twilight game sat on the site's
   dark green, under a green Home chip and a gold Admin chip. Three colour schemes
   on one page.

   WHY THIS IS TOKENS ON <body> AND NOT A BACKGROUND ON <body>. Painting the body
   would fix the backdrop and leave the toolbar gold, because every control on that
   row is built from the SITE tokens — `.tbar-adm` is `--accent` on `--accent-fg`,
   the subtitle is `--muted2`. Redefining those tokens is what makes the row follow
   the tool, and it is the same mechanism the tool's own skins already use.

   GREEN GETS NO BLOCK, AND THAT IS THE POINT. "Green" means follow the house, so
   the site tokens must stay exactly as they are — the absence IS the behaviour,
   the same way games_skin.py stores the default as a missing row.

   SCOPED TO body.duoskin-*, WHICH EXISTS ON THIS PAGE ONLY. A token redefined at
   :root would repaint all thirty-one tools, which is the "repaint the furniture"
   mistake #rh's own comment in line_escape.css warns about.
   ========================================================================== */

/* THE CHROME TOKEN, AND WHY IT NEEDS SAYING SEPARATELY.

   `--chrome-accent` exists precisely so a tool overriding `--accent` inside itself
   does NOT repaint the Home button sitting in its own subtree -- line_escape.css's
   own note explains that it was added because RaffleHub's product blue landed on the
   house green at 1.67:1. So it is declared at :root ONLY, on purpose.

   His ask here is the deliberate exception: he wants the chrome to follow the tool.
   That is why this is set on `body.duoskin-*` and not inside `.duo` -- the point of the
   token is that a tool's own subtree cannot reach it, and the page-level class is the
   one scope entitled to. Green still leaves it alone, so "follow the house" keeps the
   house's gold. */
body.duoskin-twilight{
  --chrome-accent:#f9a0bd;
  --bg:#1a0f2b; --panel:#2c1b49; --btn:#372357;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --text:#f6ecf1; --muted:#cbbcd8; --muted2:#c3b3d2; --muted3:#b6a4c7;
  --accent:#f378a0; --accent-fg:#2a0d1a;
  --backdrop:rgba(14,7,24,.74); --backdrop2:rgba(14,7,24,.85);
}
body.duoskin-light{
  --chrome-accent:#a4274d;
  --bg:#fdf7f9; --panel:#ffffff; --btn:#f4e8ee;
  --line:rgba(42,28,38,.14); --line2:rgba(42,28,38,.20);
  --text:#2a1c26; --muted:#5d4a56; --muted2:#5d4a56; --muted3:#6b5766;
  --accent:#a4274d; --accent-fg:#ffffff;
  --backdrop:rgba(42,28,38,.42); --backdrop2:rgba(42,28,38,.55);
}
/* The tool's card should not draw a second edge against a page it now matches. */
body.duoskin-twilight .duo, body.duoskin-light .duo{box-shadow:none}

/* ---- V664: the two things a token swap alone does not reach --------------- */

/* 1. THE WHITE BAND UNDER A SHORT PAGE. `background` on <body> only reaches the
      canvas when <html> has none, and this site paints html (line_escape.css sets
      `html, body`). On the Duo home screen the body is ~590px inside a 940px
      window, so html's own colour showed as a band below the content -- which is
      the "not just this area" complaint again, one element further out. */
body.duoskin-twilight, body.duoskin-light{min-height:100vh}

/* 2. THE FLOATING MENU IS A HARDCODED GOLD GRADIENT. It is the site's identity and
      it is deliberately not a token, so a token swap cannot touch it -- and it sits
      on top of the tool as the single most off-theme thing on the page. Repainted
      from the skin's own accents here, and NOWHERE ELSE: on all thirty other tools
      it stays gold, because this rule needs `body.duoskin-*` to apply. */
body.duoskin-twilight #shell-open{
  background:linear-gradient(180deg,#f9a0bd 0%,#e8628f 100%);
  border-color:rgba(90,20,45,.55); color:#2a0d1a;
  box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(255,200,220,.35) inset}
body.duoskin-twilight #shell-open:hover, body.duoskin-twilight #shell-open:focus,
body.duoskin-twilight #shell-open.fab-drag{border-color:rgba(90,20,45,.8)}
body.duoskin-light #shell-open{
  background:linear-gradient(180deg,#c0355f 0%,#96234a 100%);
  border-color:rgba(70,12,30,.5); color:#fff;
  box-shadow:0 4px 14px rgba(42,28,38,.28), 0 0 0 1px rgba(255,255,255,.22) inset}
body.duoskin-light #shell-open:hover, body.duoskin-light #shell-open:focus,
body.duoskin-light #shell-open.fab-drag{border-color:rgba(70,12,30,.75)}

/* ---- V664: the host swap ------------------------------------------------- */
.duo .swaprow{display:flex;align-items:center;gap:10px;margin:-2px 0 6px 2px}
.duo .swapb{display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;width:34px;min-height:34px;border-radius:9px;
  background:var(--duo-card2);border:1px solid var(--line);color:var(--rose);
  font-size:11px;line-height:1.05;cursor:pointer;font-family:inherit;padding:4px 0}
.duo .swapb:hover{color:var(--cream);border-color:var(--rose)}
.duo .swapb:active{transform:translateY(1px)}
.duo .swaphint{font-size:12px;color:var(--muted);line-height:1.35}
.duo .swaphint b{color:var(--cream);font-weight:600}
/* V666 — the round-by-round breakdown on the results screen. His "show question
   wise which was right and which was wrong". Rows tint by outcome so the whole
   card is scannable at a glance; the pair lines name who answered and who guessed. */
.duo .brk{margin-top:14px;text-align:left}
.duo .brk-h{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:2px 2px 8px}
.duo .brk-row{background:var(--duo-card);border:1px solid var(--line);border-left:3px solid var(--dim);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.duo .brk-row.ok{border-left-color:var(--good)}
.duo .brk-row.no{border-left-color:var(--gate)}
.duo .brk-q{font-size:13.5px;color:var(--cream);font-weight:600;line-height:1.35;margin-bottom:6px}
.duo .brk-pair{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--muted);line-height:1.4}
.duo .brk-pair b{color:var(--peach);font-weight:600}
.duo .brk-mark{margin-top:6px;font-size:12px;font-weight:600}
.duo .brk-ok{color:var(--good)}
.duo .brk-no{color:var(--rose)}

/* ===================== V723: Past games (button, screen, cards, review) ===== */
.duo .pastbtn{display:flex;align-items:center;gap:11px;width:100%;background:var(--night2);
  border:1px solid rgba(246,183,130,.42);border-radius:16px;padding:14px 16px;margin-top:8px;
  color:var(--cream);cursor:pointer;text-align:left;font-family:inherit}
.duo .pastbtn .pico{font-size:19px}
.duo .pastbtn .ptt{font-weight:600;font-size:14.5px;flex:1}
.duo .pastbtn .pcount{background:var(--grad);color:#3a1226;font-weight:800;font-size:12px;border-radius:999px;padding:2px 10px}
.duo .pastbtn .pcv{color:#fff;font-size:18px}/* V736: --dim was 4.38:1 on the night card; white is 17:1 */
.duo .pgcard{background:var(--duo-card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.duo .pgtop{display:flex;align-items:center;gap:8px}
.duo .pgwho{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo .st{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:6px;padding:2px 8px;flex:none}
.duo .st.draft{background:rgba(246,183,130,.16);color:var(--peach);border:1px solid rgba(246,183,130,.5)}
.duo .st.done{background:rgba(127,208,166,.14);color:var(--good);border:1px solid rgba(127,208,166,.45)}
.duo .pgmeta{font-size:12px;color:var(--muted);margin-top:5px}
.duo .pgscore{font-size:13px;margin-top:4px} .duo .pgscore b{color:var(--rose)}
.duo .pgacts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.duo .pgbtn{border-radius:9px;font-size:12.5px;font-weight:600;padding:7px 12px;border:1px solid var(--line);background:var(--duo-card2);color:var(--cream);cursor:pointer;font-family:inherit}
.duo .pgbtn.grad{background:var(--grad);color:#3a1226;border:0}
.duo .pgbtn.warn{border-color:rgba(224,90,134,.5);color:var(--gate);background:transparent}
.duo .review{margin-top:12px;border-top:1px dashed var(--line);padding-top:11px}
.duo .calc{background:var(--night2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;color:var(--muted);margin-bottom:10px}
.duo .calc b{color:var(--cream)}
.duo .qa{border-left:3px solid var(--line);padding:6px 0 6px 10px;margin-bottom:9px}
.duo .qa.ok{border-left-color:var(--good)} .duo .qa.no{border-left-color:var(--gate)}
.duo .qa .q{font-size:13px;font-weight:600;margin-bottom:3px}
.duo .qa .l{font-size:12px;color:var(--muted)} .duo .qa .l b{color:var(--cream)}
.duo .qa .m{font-size:11.5px;font-weight:700;margin-top:3px}
.duo .qa.ok .m{color:var(--good)} .duo .qa.no .m{color:var(--gate)}

/* V800 --- the ONLINE two-device screens (duo_online.js). Kept in the Duo look: rounded
   cards, the accent for actions, generous tap targets. */
.ol-panel{display:flex;flex-direction:column;gap:12px}
.ol-code{font-size:13px;color:var(--muted,#8a8f98);text-align:center;letter-spacing:.04em;text-transform:uppercase}
.ol-code b{display:block;font-size:34px;letter-spacing:.18em;color:var(--text,#fff);font-weight:800;margin-top:2px;font-family:var(--num,inherit)}
.ol-linkrow{display:flex;gap:8px}
.ol-linkrow input{flex:1;background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);color:var(--text,#eee);border-radius:10px;padding:10px 12px;font-size:var(--fld-fs,12.5px)}
.ol-share{font-size:12px;text-align:center}
.ol-roster{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:4px 0}
.ol-chip{background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600}
.ol-chip.host{border-color:var(--accent,#c77dff);color:var(--accent,#c77dff)}
.ol-wait{text-align:center;color:var(--muted,#8a8f98);font-size:13px;padding:6px 0}
.ol-role{background:linear-gradient(135deg,rgba(199,125,255,.16),rgba(255,107,157,.12));border:1px solid var(--line,#2a2a33);border-radius:12px;padding:12px 14px;font-weight:700;font-size:15px;text-align:center}
.ol-qcard{background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);border-radius:14px;padding:15px}
.ol-qn{font-size:12px;color:var(--muted,#8a8f98);margin-bottom:6px}
.ol-qt{font-size:17px;font-weight:700;margin-bottom:14px}
.ol-opt{display:block;width:100%;text-align:left;background:var(--bg,#101017);border:1px solid var(--line,#2a2a33);color:var(--text,#eee);border-radius:11px;padding:12px 14px;margin-bottom:9px;font:inherit;font-size:15px;cursor:pointer;transition:border-color .12s,background .12s}
.ol-opt:hover:not(:disabled){border-color:var(--accent,#c77dff)}
.ol-opt:disabled{opacity:.55;cursor:default}
.ol-progress{text-align:center;font-size:12.5px}
.ol-donewait{text-align:center;padding:26px 10px;font-size:15px;font-weight:600}
.ol-spinner{width:26px;height:26px;border:3px solid var(--line,#2a2a33);border-top-color:var(--accent,#c77dff);border-radius:50%;margin:0 auto 12px;animation:olspin .9s linear infinite}
@keyframes olspin{to{transform:rotate(360deg)}}
.ol-restitle,.ol-invtitle{font-size:18px;font-weight:800;text-align:center;margin-bottom:4px}
.ol-scorerow{display:flex;justify-content:space-between;align-items:center;background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);border-radius:12px;padding:13px 15px}
.ol-who{font-weight:700}
.ol-score{font-weight:800;font-size:18px}
.ol-join-body input,#ol-join-body input{width:100%}
.linkbtn{background:none;border:none;color:var(--muted,#8a8f98);text-decoration:underline;font-size:13px;cursor:pointer;padding:6px}
.cta.ghost{background:transparent;border:1px solid var(--accent,#c77dff);color:var(--accent,#c77dff)}

/* V801 — invite-by-username in the lobby + the standing-invite banner. */
.ol-invite{margin-top:6px}
.ol-invlbl{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted,#8a8f98);margin-bottom:6px}
.ol-hit{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);color:var(--text,#eee);border-radius:9px;padding:9px 12px;margin-top:6px;font:inherit;font-size:14px;cursor:pointer}
.ol-inviteb{background:var(--accent,#c77dff);color:#1a0b26;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:800}
.ol-chip.inv-pending{border-style:dashed;color:var(--muted,#8a8f98)}
.ol-chip.inv-joined{border-color:var(--good,#43c59e);color:var(--good,#43c59e)}
.ol-banner{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(199,125,255,.2),rgba(255,107,157,.15));border:1px solid var(--accent,#c77dff);border-radius:12px;padding:11px 13px;margin:0 0 12px}
.ol-bantxt{font-size:14px}
.ol-banbtns{display:flex;align-items:center;gap:8px}

/* V802 — the online chooser (game/decks/rounds) + Love Calculator big % */
.ol-gwrap{display:flex;flex-direction:column;gap:8px}
.ol-gbtn{width:100%;text-align:left;background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);color:var(--text,#eee);border-radius:11px;padding:13px 15px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.ol-gbtn.on{border-color:var(--accent,#c77dff);color:var(--accent,#c77dff);background:rgba(199,125,255,.10)}
.ol-deckwrap{display:flex;flex-wrap:wrap;gap:8px}
.ol-deck{background:var(--bg2,#181820);border:1px solid var(--line,#2a2a33);color:var(--muted,#9aa);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ol-deck.on{border-color:var(--accent,#c77dff);color:var(--accent,#c77dff);background:rgba(199,125,255,.10)}
.ol-rounds{display:flex;align-items:center;gap:14px}
.ol-rounds #ol-rval{font-size:20px;font-weight:800;min-width:28px;text-align:center}
.ol-bigpct{font-size:52px;font-weight:800;text-align:center;color:var(--accent,#c77dff);margin:8px 0}

/* V806: the online chooser's "More decks" toggle (matches the ol-deck chips). */
.ol-morebtn{display:inline-block;margin-top:8px;background:transparent;border:1px solid var(--line,#2a2a33);color:var(--muted,#9aa);border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ol-morebtn:hover{border-color:var(--accent,#c77dff);color:var(--accent,#c77dff)}
.ol-moredeck{margin-top:8px}