:root{
    --wall:#15110d;
    --wall-2:#0c0a07;
    --panel:#1c1711;
    --panel-edge:#34291c;
    --ink:#ece3d3;
    --ink-soft:#b6ab97;
    --ink-faint:#7d745f;
    --gold:#c9a45c;
    --gold-bright:#e8cd96;
    --gold-deep:#8a6c38;
    --right:#9caf74;   /* verdigris / patina */
    --wrong:#bc6f55;   /* oxblood terracotta */
    --frame-1:#caa863;
    --frame-2:#705222;
    --shadow:rgba(0,0,0,.6);
    --serif:'EB Garamond', Georgia, serif;
    --display:'Fraunces', Georgia, serif;
    --caps:'Cinzel', serif;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  [hidden]{display:none !important;}
  html,body{height:100%; min-width:0; -webkit-text-size-adjust:100%;}
  body{
    font-family:var(--serif);
    color:var(--ink);
    background:var(--wall);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }

  /* ---- atmosphere : the dark gallery, the spotlight, the grain ---- */
  .wall-light{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(135% 85% at 50% -22%, rgba(255,226,168,.13), rgba(255,226,168,0) 50%),
      radial-gradient(75% 60% at 50% 30%, rgba(255,214,150,.08), rgba(0,0,0,0) 66%),
      linear-gradient(180deg, #1a150f 0%, #15110d 38%, #0d0a07 100%);
  }
  .vignette{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    box-shadow:inset 0 0 220px 70px rgba(0,0,0,.78);
    background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
  }
  .grain{
    position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .stage{position:relative; z-index:5; min-height:100%; min-height:100dvh; display:flex; flex-direction:column;}

  /* ---- top rail ---- */
  header{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:18px clamp(20px,5vw,70px) 0; gap:14px; flex-wrap:wrap;
  }
  .wordmark{display:flex; align-items:baseline; gap:14px; min-width:0;}
  .wordmark h1{
    font-family:var(--caps); font-weight:500; font-size:clamp(20px,2.3vw,28px);
    letter-spacing:.42em; color:var(--gold-bright); text-indent:.42em;
    text-shadow:0 1px 0 rgba(0,0,0,.6);
  }
  .wordmark .sub{
    color:var(--ink-faint); font-size:15px; letter-spacing:.02em;
    border-left:1px solid var(--panel-edge); padding-left:14px;
  }
  .scoreline{
    font-family:var(--serif); color:var(--ink-soft); font-size:16px;
    letter-spacing:.02em; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    min-width:0; max-width:100%;
  }
  .scoreline b{color:var(--gold-bright); font-weight:500;}
  .scoreline .dot{color:var(--ink-faint);}
  #room-scores{max-width:100%; overflow-wrap:anywhere;}
  .score-actions{display:contents;}
  .lives{display:inline-flex; gap:7px; align-items:center;}
  .pip{font-size:13px; color:var(--gold);}
  .pip.gone{color:#3a3026;}
  .topbtn{
    background:none; border:none; color:var(--ink-faint); font-family:var(--serif);
    font-size:14.5px; letter-spacing:.03em; cursor:pointer;
    border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s;
  }
  .topbtn:hover{color:var(--gold-bright); border-color:var(--gold-deep);}

  /* ---- the painting ---- */
  main{flex:1; display:flex; flex-direction:column; align-items:center; padding:clamp(10px,2vh,24px) 16px calc(28px + env(safe-area-inset-bottom, 0px));}
  .room{width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center;}

  /* painting + answers : stacked by default, side by side on wider screens */
  .play-area{width:100%; display:flex; flex-direction:column; align-items:center;}
  .answer-col{width:100%; display:flex; flex-direction:column; align-items:center; min-width:0;}

  .spot{position:relative; display:flex; justify-content:center; width:100%;}
  .spot::before{
    content:''; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
    width:118%; height:128%; z-index:-1; pointer-events:none;
    background:radial-gradient(50% 50% at 50% 42%, rgba(255,223,160,.16), rgba(255,223,160,.04) 55%, transparent 72%);
    filter:blur(8px);
  }
  .frame{
    position:relative; max-width:100%;
    padding:10px;
    background:
      linear-gradient(135deg, var(--frame-1), var(--frame-2) 42%, #5a3f1a 60%, var(--frame-1) 100%);
    border-radius:2px;
    box-shadow:
      0 2px 0 rgba(255,233,190,.35) inset,
      0 -2px 0 rgba(0,0,0,.5) inset,
      0 34px 60px -22px rgba(0,0,0,.85),
      0 8px 22px -10px rgba(0,0,0,.6);
  }
  .frame::after{ /* inner liner */
    content:''; position:absolute; inset:7px; border:1px solid rgba(0,0,0,.45);
    box-shadow:0 0 0 1px rgba(255,228,180,.18); pointer-events:none; border-radius:1px;
  }
  .canvas-wrap{
    position:relative; overflow:hidden; background:#0a0805; border-radius:1px;
    display:flex; align-items:center; justify-content:center; min-height:170px; max-width:100%;
  }
  .canvas-wrap img{
    display:block; max-width:100%; max-height:42vh; width:auto; height:auto;
    opacity:0; transition:opacity .65s ease;
  }
  .canvas-wrap img.in{opacity:1;}
  .loading{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--ink-faint); letter-spacing:.08em; font-size:14px;
    background:repeating-linear-gradient(110deg,#100d09,#100d09 18px,#13100b 18px,#13100b 36px);
  }
  .loading.hide{display:none;}
  .canvas-wrap.zoomable{cursor:zoom-in;}

  /* ---- prompt + plaque ---- */
  .prompt{
    margin:16px 0 10px; display:flex; align-items:center; gap:16px; width:100%; max-width:560px;
    color:var(--ink-soft);
  }
  .prompt .rule{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--panel-edge));}
  .prompt .rule.r{background:linear-gradient(270deg,transparent,var(--panel-edge));}
  .prompt span{
    font-family:var(--caps); font-size:13px; letter-spacing:.22em; text-indent:.22em;
    color:var(--gold); white-space:nowrap;
  }

  .plaque{
    width:100%; max-width:560px;
    background:linear-gradient(180deg,#221c14 0%, #18130d 100%);
    border:1px solid var(--panel-edge);
    border-radius:3px;
    box-shadow:0 1px 0 rgba(255,228,180,.10) inset, 0 18px 40px -26px #000;
    overflow:hidden;
  }
  .choice{
    display:flex; align-items:center; gap:18px; width:100%; text-align:left;
    background:none; border:none; cursor:pointer; color:var(--ink);
    font-family:var(--serif); font-size:clamp(19px,2.4vw,23px);
    padding:11px clamp(18px,4vw,26px); position:relative;
    border-top:1px solid rgba(255,228,180,.06);
    transition:background .25s, color .2s, padding-left .25s;
  }
  .choice:first-child{border-top:none;}
  .choice .num{
    font-family:var(--caps); font-size:13px; color:var(--gold-deep);
    width:22px; flex:none; letter-spacing:.05em; transition:color .2s;
  }
  .choice .nm{flex:1; min-width:0; letter-spacing:.01em; overflow-wrap:anywhere;}
  .choice::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--gold); transform:scaleY(0); transition:transform .25s; transform-origin:center;
  }
  .choice:not(:disabled):hover{background:rgba(201,164,92,.07); padding-left:calc(clamp(18px,4vw,30px) + 6px);}
  .choice:not(:disabled):hover .nm{color:var(--gold-bright);}
  .choice:not(:disabled):hover .num{color:var(--gold);}
  .choice:not(:disabled):hover::before{transform:scaleY(1);}
  .choice .verdict{font-family:var(--caps); font-size:13px; letter-spacing:.1em; opacity:0; transition:opacity .3s; white-space:nowrap;}
  .choice:disabled{cursor:default;}

  .plaque.revealed .choice{color:var(--ink-faint);}
  .choice.waiting-pick{
    background:rgba(201,164,92,.14); color:var(--ink);
  }
  .choice.waiting-pick::before{transform:scaleY(1); background:var(--gold);}
  .choice.waiting-pick .nm{color:var(--gold-bright);}
  .choice.waiting-pick .num{color:var(--gold);}
  .choice.waiting-pick .verdict{opacity:1; color:var(--gold-deep);}
  .choice.correct{background:rgba(156,175,116,.13); color:var(--ink);}
  .choice.correct::before{transform:scaleY(1); background:var(--right);}
  .choice.correct .nm{color:#cde0a8;}
  .choice.correct .num{color:var(--right);}
  .choice.correct .verdict{opacity:1; color:var(--right);}
  .choice.wrong-pick{background:rgba(188,111,85,.12);}
  .choice.wrong-pick::before{transform:scaleY(1); background:var(--wrong);}
  .choice.wrong-pick .nm{color:#e6b3a1; text-decoration:line-through; text-decoration-color:rgba(188,111,85,.6);}
  .choice.wrong-pick .num{color:var(--wrong);}
  .choice.wrong-pick .verdict{opacity:1; color:var(--wrong);}

  /* ---- hint ---- */
  .hint-row{margin-top:12px; min-height:26px; display:flex; align-items:center; gap:16px; max-width:560px; width:100%; justify-content:center; min-width:0;}
  .hint-btn{
    background:none; border:1px solid var(--panel-edge); color:var(--ink-soft);
    font-family:var(--serif); font-size:15px; letter-spacing:.02em;
    padding:7px 18px; border-radius:2px; cursor:pointer; transition:.2s;
  }
  .hint-btn:hover:not(:disabled){border-color:var(--gold-deep); color:var(--gold-bright);}
  .hint-btn:disabled{opacity:.35; cursor:default;}
  .hint-text{color:var(--gold); font-size:15.5px; letter-spacing:.02em; opacity:0; transition:opacity .4s; min-width:0; overflow-wrap:anywhere;}
  .hint-text.show{opacity:1;}

  /* ---- reveal : label + learn + other works ---- */
  .reveal{width:100%; max-width:760px; margin-top:20px; opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s;}
  .reveal.show{opacity:1; transform:none;}
  .label{
    text-align:center; border-top:1px solid var(--panel-edge); border-bottom:1px solid var(--panel-edge);
    padding:22px 10px; margin-bottom:30px;
  }
  .label .artist{font-family:var(--display); font-weight:400; font-size:clamp(26px,4vw,40px); color:var(--gold-bright); line-height:1.1;}
  .label .meta{color:var(--ink-faint); font-size:15px; letter-spacing:.03em; margin-top:6px;}
  .label .title{font-size:19px; color:var(--ink); margin-top:14px;}
  .label .title em{color:var(--ink-soft);}

  .learn{display:flex; gap:18px; max-width:620px; margin:0 auto 36px; align-items:flex-start; min-width:0;}
  .learn .glyph{font-family:var(--caps); font-size:13px; letter-spacing:.2em; color:var(--gold-deep); padding-top:4px; white-space:nowrap;}
  .learn p{color:var(--ink-soft); font-size:17px; line-height:1.62;}
  .learn b{color:var(--ink); font-weight:500;}

  .gallery-h{
    text-align:center; font-family:var(--caps); font-size:13px; letter-spacing:.18em; text-indent:.18em;
    color:var(--ink-faint); margin-bottom:22px;
  }
  .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 20px; margin-bottom:40px;}
  .work{display:flex; flex-direction:column; gap:9px; cursor:zoom-in;}
  .work .mini{
    background:linear-gradient(135deg,var(--frame-1),var(--frame-2));
    padding:5px; border-radius:1px; box-shadow:0 14px 26px -16px #000;
    transition:transform .3s; position:relative; overflow:hidden;
  }
  .work:hover .mini{transform:translateY(-4px);}
  .work .mini img{display:block; width:100%; height:130px; object-fit:cover; background:#0a0805; opacity:0; transition:opacity .5s;}
  .work .mini img.in{opacity:1;}
  .work .cap{font-size:15px; color:var(--ink-faint); line-height:1.38;}
  .work .cap b{color:var(--ink-soft); font-style:normal; font-weight:500;}

  /* verdict + advance : sits at the top of the reveal, no scrolling needed */
  .verdict-bar{
    position:sticky; top:0; z-index:35;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:14px 18px; margin-bottom:30px; border-radius:4px;
    border:1px solid var(--panel-edge);
    background:linear-gradient(180deg,#1d1810,#15110d);
    box-shadow:0 16px 34px -20px #000;
  }
  .verdict-bar.win{
    border-color:var(--right);
    background:linear-gradient(180deg,rgba(156,175,116,.20),rgba(156,175,116,.05));
    box-shadow:0 0 0 1px rgba(156,175,116,.35) inset, 0 18px 38px -18px rgba(156,175,116,.4);
  }
  .verdict-bar.lose{
    border-color:var(--wrong);
    background:linear-gradient(180deg,rgba(188,111,85,.20),rgba(188,111,85,.05));
    box-shadow:0 0 0 1px rgba(188,111,85,.35) inset, 0 18px 38px -18px rgba(188,111,85,.4);
  }
  .verdict-msg{display:flex; align-items:center; gap:13px; min-width:0;}
  .vmark{
    flex:none; width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--caps); font-size:19px; border:1.5px solid currentColor;
  }
  .vlabel{font-family:var(--caps); font-size:16px; letter-spacing:.16em; text-indent:.16em; overflow-wrap:anywhere;}
  .verdict-bar.win .vmark, .verdict-bar.win .vlabel{color:var(--right);}
  .verdict-bar.lose .vmark, .verdict-bar.lose .vlabel{color:var(--wrong);}
  .verdict-bar.win .vlabel{color:#cde0a8;}
  .verdict-bar.lose .vlabel{color:#e6b3a1;}
  .verdict-bar .btn-major{flex:none; padding:13px 34px;}
  .btn-major{
    font-family:var(--caps); font-size:14px; letter-spacing:.22em; text-indent:.22em;
    color:#1a130a; background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    border:none; padding:16px 42px; border-radius:2px; cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 16px 30px -14px rgba(201,164,92,.6);
    transition:transform .15s, box-shadow .2s;
  }
  .btn-major:hover{transform:translateY(-2px); box-shadow:0 22px 36px -14px rgba(201,164,92,.7);}
  .btn-major:active{transform:translateY(0);}

  /* ---- entrance ---- */
  .entrance{
    position:relative; z-index:5; display:none; flex:1; align-items:center; justify-content:center;
    width:100%; padding:clamp(34px,8vh,90px) 18px calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .entrance.show{display:flex;}
  .entrance-inner{
    width:100%; max-width:680px; text-align:center;
    padding:clamp(18px,4vw,40px) 0;
  }
  .entrance .mark{
    font-family:var(--caps); font-size:clamp(44px,9vw,92px); line-height:.95;
    letter-spacing:.28em; text-indent:.28em; color:var(--gold-bright);
    text-shadow:0 14px 38px rgba(0,0,0,.7);
  }
  .entrance .tag{color:var(--ink-soft); margin-top:18px; font-size:clamp(18px,2.4vw,23px);}
  .entrance .rule{height:1px; width:min(260px,68vw); margin:24px auto; background:linear-gradient(90deg,transparent,var(--panel-edge),transparent);}
  .visit-summary{
    color:var(--gold); font-family:var(--caps); font-size:13px; letter-spacing:.16em;
    text-indent:.16em; margin-bottom:24px; overflow-wrap:anywhere;
  }
  .btn-quiet{
    display:block; margin:18px auto 0; background:none; border:1px solid var(--panel-edge);
    color:var(--ink-soft); padding:10px 18px; border-radius:2px; cursor:pointer;
    font-family:var(--serif); font-size:16px; letter-spacing:.02em;
  }
  .btn-quiet:hover{border-color:var(--gold-deep); color:var(--gold-bright);}

  /* ---- overlays (summary / modals / lightbox) ---- */
  .overlay{
    position:fixed; inset:0; z-index:40; display:flex; align-items:flex-start; justify-content:center;
    padding:24px; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto; background:rgba(7,5,3,.86); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
  }
  .overlay.show{opacity:1; visibility:visible;}
  .sheet{
    width:100%; max-width:600px; margin:auto; text-align:center;
    border:1px solid var(--panel-edge);
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(255,224,160,.07), transparent 60%),
      linear-gradient(180deg,#1a140d,#120e09);
    padding:clamp(26px,4vw,44px) clamp(24px,5vw,52px);
    box-shadow:0 40px 80px -30px #000;
  }
  .sheet .mark{font-family:var(--caps); font-size:clamp(28px,4vw,40px); letter-spacing:.4em; text-indent:.4em; color:var(--gold-bright);}
  .sheet .tag{color:var(--ink-soft); margin-top:12px; font-size:17px;}
  .sheet .rule{height:1px; background:var(--panel-edge); margin:20px auto; width:80px;}

  .group{margin-bottom:20px; text-align:left;}
  .group > .glab{font-family:var(--caps); font-size:13px; letter-spacing:.16em; color:var(--ink-faint); display:block; margin-bottom:12px; text-align:center;}
  .opts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
  .opt{
    flex:1; min-width:120px; background:none; cursor:pointer; color:var(--ink-soft);
    border:1px solid var(--panel-edge); border-radius:2px; padding:11px 13px;
    font-family:var(--serif); transition:.2s; text-align:center;
  }
  .opt .t{display:block; font-size:19px; color:var(--ink); letter-spacing:.02em;}
  .opt .d{display:block; font-size:16px; color:var(--ink-soft); margin-top:5px; line-height:1.35;}
  .opt:hover{border-color:var(--gold-deep);}
  .opt.sel{border-color:var(--gold); background:rgba(201,164,92,.09); box-shadow:0 0 0 1px var(--gold) inset;}
  .opt.sel .t{color:var(--gold-bright);}
  .room-panel{
    display:none; margin:18px auto 4px; max-width:720px; width:100%; padding:16px;
    border:1px solid var(--panel-edge); background:rgba(255,228,180,.025); text-align:left;
  }
  .room-panel.show{display:block;}
  .room-row{display:grid; grid-template-columns:1fr auto 1fr auto; gap:10px; align-items:end;}
  .field label{
    display:block; font-family:var(--caps); font-size:12px; letter-spacing:.12em;
    color:var(--ink-faint); margin-bottom:6px; text-align:left;
  }
  .field input{
    width:100%; height:39px; background:#120e09; border:1px solid var(--panel-edge);
    border-radius:2px; color:var(--ink); padding:0 12px; font-family:var(--serif);
    font-size:17px; letter-spacing:.02em;
  }
  .field input:focus{outline:none; border-color:var(--gold-deep);}
  .btn-small{
    height:39px; padding:0 15px; border:1px solid var(--gold-deep); border-radius:2px;
    background:rgba(201,164,92,.12); color:var(--gold-bright); cursor:pointer;
    font-family:var(--caps); font-size:12px; letter-spacing:.1em; text-indent:.1em;
    white-space:normal; overflow-wrap:anywhere;
  }
  .btn-small:disabled{opacity:.42; cursor:default;}
  .room-status{min-height:20px; margin-top:10px; text-align:center; color:var(--ink-soft); font-size:16px;}
  .room-lobby{display:none; text-align:center;}
  .room-lobby.show{display:block;}
  .room-code{
    display:inline-block; margin:2px 0 14px; padding:8px 14px; border:1px solid var(--gold-deep);
    color:var(--gold-bright); font-family:var(--caps); letter-spacing:.3em; text-indent:.3em;
    font-size:22px; background:rgba(201,164,92,.08);
  }
  .player-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:0 0 14px;}
  .player-chip{border:1px solid var(--panel-edge); padding:8px 10px; color:var(--ink-soft); text-align:center; min-width:0; overflow-wrap:anywhere; font-size:16px;}
  .player-chip.host{border-color:var(--gold-deep); color:var(--gold-bright);}

  .sheet .btn-major{margin-top:8px;}
  .sheet .stat-grid{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; margin:6px 0 30px;}
  .sheet .stat-grid .s{display:flex; flex-direction:column;}
  .sheet .stat-grid .s .v{font-family:var(--display); font-size:42px; color:var(--gold-bright); line-height:1;}
  .sheet .stat-grid .s .k{font-family:var(--caps); font-size:12px; letter-spacing:.12em; color:var(--ink-faint); margin-top:8px;}
  .footnote{margin-top:30px; font-size:15px; color:var(--ink-soft); line-height:1.52;}
  .footnote a{color:var(--gold-deep);}

  /* lightbox */
  .lightbox{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:40px; background:rgba(5,4,2,.94); cursor:zoom-out;}
  .lightbox.show{display:flex;}
  .lightbox figure{max-width:92vw; max-height:92vh; text-align:center;}
  .lightbox img{max-width:92vw; max-height:82vh; box-shadow:0 30px 80px -20px #000; border:6px solid; border-image:linear-gradient(135deg,var(--frame-1),var(--frame-2)) 1;}
  .lightbox figcaption{margin-top:16px; color:var(--ink-soft); letter-spacing:.03em; overflow-wrap:anywhere;}

  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

  /* ---- timer (blitz) ---- */
  #timer{font-variant-numeric:tabular-nums; color:var(--gold-bright); font-size:15.5px; min-width:54px; display:inline-block;}
  #timer.warn{color:var(--wrong); font-weight:600;}

  /* ---- blur reveal (connoisseur) ---- */
  .canvas-wrap img.blurring{filter:blur(30px);}
  .canvas-wrap img.deblur{filter:blur(0); transition:opacity .65s ease, filter 7s linear;}

  /* ---- colour-blind palette ---- */
  body.cb{--right:#3d8bd4; --wrong:#e08a3c;}
  body.cb .choice.correct .nm{color:#acd3f3;}
  body.cb .choice.wrong-pick .nm{color:#f0c39a;}

  /* ---- reduced motion ---- */
  body.reduced-motion *{transition:none !important; animation:none !important;}
  body.reduced-motion .canvas-wrap img.deblur{transition:none !important;}
  @media (prefers-reduced-motion: reduce){
    *{transition-duration:.001s !important;}
  }

  /* ---- modal sheets (stats / settings) ---- */
  .sheet.wide{max-width:660px; max-height:88vh; overflow-y:auto; text-align:left;}
  .sheet.wide .mark{text-align:center;}
  .sheet .close{position:absolute; top:18px; right:22px;}
  .overlay .sheet{position:relative;}
  .sec-h{font-family:var(--caps); font-size:13px; letter-spacing:.16em; color:var(--ink-faint);
    text-align:center; margin:30px 0 16px; border-top:1px solid var(--panel-edge); padding-top:22px;}

  /* movement accuracy bars */
  .mvbar{display:flex; align-items:center; gap:12px; margin:9px 0; font-size:15px;}
  .mvbar .nm{flex:0 0 150px; color:var(--ink-soft);}
  .mvbar .track{flex:1; height:8px; background:#241d14; border-radius:6px; overflow:hidden;}
  .mvbar .fill{height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));}
  .mvbar .pct{flex:0 0 64px; text-align:right; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

  /* achievements */
  .ach-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;}
  .ach{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--panel-edge);
    border-radius:3px; padding:13px 14px; background:rgba(255,228,180,.02);}
  .ach.locked{opacity:.4;}
  .ach.got{border-color:var(--gold-deep); background:rgba(201,164,92,.06);}
  .ach .ai{font-family:var(--caps); color:var(--gold); font-size:16px; line-height:1.2;}
  .ach .at{font-size:15px; color:var(--ink);}
  .ach .ad{font-size:14px; color:var(--ink-soft); margin-top:3px; line-height:1.38;}
  .ach.got .at{color:var(--gold-bright);}

  /* settings toggles */
  .setrow{display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:15px 2px; border-top:1px solid rgba(255,228,180,.06);}
  .setrow:first-of-type{border-top:none;}
  .setrow .lab{font-size:17px; color:var(--ink);}
  .setrow .sub2{font-size:15px; color:var(--ink-soft); margin-top:3px; line-height:1.35;}
  .switch{flex:none; width:50px; height:28px; border-radius:20px; border:1px solid var(--panel-edge);
    background:#241d14; cursor:pointer; position:relative; transition:background .2s, border-color .2s;}
  .switch::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:var(--ink-faint); transition:transform .2s, background .2s;}
  .switch.on{background:rgba(201,164,92,.22); border-color:var(--gold-deep);}
  .switch.on::after{transform:translateX(22px); background:var(--gold-bright);}
  .lang-pick{display:flex; gap:6px; flex:none;}
  .lang-pick button{
    min-width:58px; height:32px; border:1px solid var(--panel-edge); border-radius:2px;
    background:#120e09; color:var(--ink-soft); cursor:pointer; font-family:var(--serif); font-size:15px;
  }
  .lang-pick button.sel{border-color:var(--gold); color:var(--gold-bright); background:rgba(201,164,92,.12);}

  /* about / credits */
  .about-copy{max-width:560px; margin:0 auto; color:var(--ink-soft); font-size:17px; line-height:1.58;}
  .about-copy p + p{margin-top:14px;}
  .credit-list{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
  .credit-list a{
    border:1px solid var(--panel-edge); color:var(--gold-bright); text-decoration:none;
    padding:8px 12px; background:rgba(201,164,92,.05);
  }
  .credit-list a:hover{border-color:var(--gold-deep);}

  /* lobby quick links */
  .lobby-links{display:flex; gap:18px; justify-content:center; margin-top:22px;}
  .lobby-links button{background:none; border:none; color:var(--ink-soft); cursor:pointer;
    font-family:var(--serif); font-size:16px; letter-spacing:.02em;
    border-bottom:1px solid transparent; transition:color .2s, border-color .2s;}
  .lobby-links button:hover{color:var(--gold-bright); border-color:var(--gold-deep);}

  /* options: lay the three choice groups out horizontally to keep it short */
  #gameOptions .sheet{max-width:920px;}
  .choices{display:grid; grid-template-columns:repeat(3,1fr); gap:18px 24px; text-align:left; margin-bottom:6px; align-items:start;}
  .choices .group{margin-bottom:0;}
  .choices .opts{flex-direction:column; flex-wrap:nowrap; gap:8px;}
  .choices .opt{width:100%; flex:none; min-width:0;}
  .choices .group > .footnote{display:none;}
  #themeOpts .opt .d{display:none;}
  #themeOpts .opt{padding:9px 12px;}
  /* ---- desktop / tablet : choices sit beside the canvas ---- */
  @media (min-width:721px){
    .room{max-width:1080px;}
    .play-area{flex-direction:row; align-items:center; justify-content:center; gap:clamp(26px,3.5vw,54px);}
    .play-area .spot{flex:1 1 0; width:auto; min-width:0;}
    .play-area .answer-col{flex:0 1 440px; align-items:stretch;}
    .play-area .canvas-wrap img{max-height:62vh;}
    .answer-col .prompt{margin-top:0; max-width:none;}
    .answer-col .plaque,
    .answer-col .hint-row{max-width:none;}
  }

  @media (max-width:720px){
    .overlay{padding:14px;}
    .sheet{padding:26px 20px;}
    header{flex-direction:column; align-items:flex-start; gap:8px; padding:12px 14px 0;}
    .wordmark{flex-wrap:wrap; gap:5px 10px;}
    .wordmark h1{font-size:22px; letter-spacing:.28em; text-indent:.28em;}
    .wordmark .sub{font-size:14px; border-left:none; padding-left:0; flex-basis:100%;}
    .scoreline{width:100%; gap:7px 9px; font-size:15px; line-height:1.35;}
    .score-actions{display:none;}
    #room-scores{flex-basis:100%; line-height:1.35;}
    main{padding:8px 10px calc(28px + env(safe-area-inset-bottom, 0px));}
    .frame{padding:7px;}
    .frame::after{inset:5px;}
    .canvas-wrap{min-height:118px;}
    .canvas-wrap img{max-height:34dvh;}
    .prompt{margin:12px 0 8px; gap:10px;}
    .prompt span{font-size:12px; letter-spacing:.14em; text-indent:.14em;}
    .choice{gap:10px; padding:10px 12px; font-size:18px; line-height:1.12; min-height:44px;}
    .choice:not(:disabled):hover{padding-left:14px;}
    .choice .verdict{font-size:12px; letter-spacing:.06em;}
    .hint-row{flex-direction:column; gap:6px; text-align:center; margin-top:10px;}
    .hint-btn{padding:6px 14px; font-size:14px;}
    .hint-text{font-size:14px;}
    .reveal{margin-top:16px;}
    .label{padding:18px 8px; margin-bottom:22px;}
    .label .artist{font-size:28px;}
    .learn{flex-direction:column; gap:8px; margin-bottom:28px;}
    .learn .glyph br{display:none;}
    .learn p{font-size:16px; line-height:1.55;}
    .gallery{grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:16px 12px;}
    .work .mini img{height:112px;}
    .btn-major{width:100%; max-width:320px; padding:14px 16px; font-size:13px; letter-spacing:.1em; text-indent:.1em;}
    .verdict-bar{flex-direction:column; align-items:stretch; gap:12px; text-align:center; padding:13px 14px; margin-bottom:22px;}
    .verdict-msg{justify-content:center;}
    .verdict-bar .btn-major{width:100%; max-width:420px; margin:0 auto; padding:13px 16px;}
    .lightbox{padding:16px;}
    .lightbox img{max-width:calc(100vw - 32px); max-height:78dvh; border-width:4px;}
    .lightbox figcaption{font-size:14px; line-height:1.35;}
    .entrance{padding-top:32px;}
    .entrance .mark{font-size:clamp(40px,14vw,64px); letter-spacing:.16em; text-indent:.16em;}
    .choices{grid-template-columns:1fr; gap:18px;}
    .choices .opts{gap:7px;}
    .opt{min-width:0; padding:10px 12px;}
    .opt .t{font-size:18px;}
    .opt .d{font-size:15px;}
    #themeOpts .opt .d{display:block;}
    .room-row{grid-template-columns:1fr;}
    .btn-small{width:100%; min-height:42px;}
    .lobby-links{flex-direction:column; gap:8px; align-items:center;}
  }

  @media (max-width:390px){
    .overlay{padding:8px;}
    .sheet{padding:22px 14px;}
    .sheet .mark{font-size:28px; letter-spacing:.24em; text-indent:.24em;}
    .sheet .tag{font-size:16px;}
    .wordmark h1{font-size:20px; letter-spacing:.2em; text-indent:.2em;}
    .scoreline{font-size:14px; gap:5px 7px;}
    .topbtn{font-size:14px;}
    main{padding-left:8px; padding-right:8px;}
    .frame{padding:6px;}
    .canvas-wrap{min-height:104px;}
    .canvas-wrap img{max-height:30dvh;}
    .prompt{margin:10px 0 7px;}
    .prompt span{font-size:11px; letter-spacing:.08em; text-indent:.08em;}
    .choice{gap:8px; padding:9px 10px; font-size:16px; min-height:40px;}
    .choice .num{width:18px; font-size:11px;}
    .choice .verdict{white-space:normal; text-align:right; max-width:72px;}
    .gallery{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
    .work .mini img{height:96px;}
    .mvbar{display:grid; grid-template-columns:1fr auto; gap:5px 8px;}
    .mvbar .nm{flex:auto;}
    .mvbar .track{grid-column:1 / -1;}
    .mvbar .pct{flex:auto;}
    .ach-grid{grid-template-columns:1fr;}
    .room-code{font-size:19px; letter-spacing:.2em; text-indent:.2em;}
  }

  @media (max-width:340px){
    header{padding-left:10px; padding-right:10px;}
    .wordmark h1{font-size:18px; letter-spacing:.14em; text-indent:.14em;}
    .wordmark .sub{font-size:12px;}
    .scoreline .dot{display:none;}
    .scoreline > span,
    .scoreline > button{margin-right:5px;}
    .prompt .rule{display:none;}
    .prompt{justify-content:center;}
    .choice{font-size:16px;}
    .choice .verdict{display:none;}
    .sheet .stat-grid{gap:18px;}
    .sheet .stat-grid .s .v{font-size:34px;}
    .footnote{font-size:14px;}
  }

  @media (max-height:520px) and (max-width:900px){
    header{padding-top:8px;}
    main{padding-top:6px;}
    .canvas-wrap{min-height:92px;}
    .canvas-wrap img{max-height:28dvh;}
    .prompt{margin:9px 0 6px;}
    .choice{padding-top:8px; padding-bottom:8px; min-height:38px;}
    .hint-row{margin-top:8px;}
    .overlay{align-items:flex-start;}
    .sheet{margin:0 auto;}
  }

  /* achievement toast */
  .toast-wrap{position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:80;
    display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none;}
  .toast{min-width:240px; max-width:90vw; background:linear-gradient(180deg,#221c14,#15110d);
    border:1px solid var(--gold-deep); border-radius:4px; padding:13px 22px; text-align:center;
    box-shadow:0 18px 40px -18px #000, 0 0 0 1px rgba(255,228,180,.06) inset;
    opacity:0; transform:translateY(12px); transition:opacity .35s, transform .35s;}
  .toast.in{opacity:1; transform:none;}
  .toast .tk{font-family:var(--caps); font-size:12px; letter-spacing:.14em; color:var(--gold-deep); display:block; margin-bottom:5px;}
  .toast .tn{font-family:var(--display); font-size:18px; color:var(--gold-bright);}
  .toast .td{font-size:15px; color:var(--ink-soft); margin-top:4px;}
  .toast .tn,.toast .td{overflow-wrap:anywhere;}