@font-face{font-family:"Yeseva One";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/yeseva-one.woff2") format("woff2")}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400 900;font-display:swap;src:url("../assets/fonts/alegreya.woff2") format("woff2")}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400 900;font-display:swap;src:url("../assets/fonts/alegreya-italic.woff2") format("woff2")}
@font-face{font-family:"Yatra One";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/yatra-khelghar.woff2") format("woff2")}

/* The room is painted from the sliders: game.js blends four worlds (Western Classical, Jazz & Modern,
   Carnatic, Hindustani) and three textures (melody, rhythm, harmony) into these tokens. The values
   below are the Carnatic room, so the page is already dressed before (or without) JavaScript. */
@property --bg1{syntax:"<color>";inherits:true;initial-value:#7a2412}
@property --bg2{syntax:"<color>";inherits:true;initial-value:#45120a}
@property --bg3{syntax:"<color>";inherits:true;initial-value:#210804}
:root{
  --bg1:#7a2412; --bg2:#45120a; --bg3:#210804; --glow:rgba(255,196,110,.22);
  --ink:#fbeedd; --ink-dim:#e8cfb2; --accent:#f2b134; --accent2:#9fd18b; --on-accent:#2a1504;
  --panel:rgba(30,8,4,.46); --panel-line:rgba(242,177,52,.32);
  --cell:#fbf3e3; --cell-ink:#5a1410; --cell-line:#3a0d07; --block:#6e1a0f; --block-ink:#fff4e0; --cell-r:4px;
  --hl:#f6d58c; --cur:#f2b134; --solved:#cfe7b8; --num:#8a3a20; --mine:#2f6f8f;
  --o-western:0; --o-jazz:0; --o-carnatic:1; --o-hindustani:0; --o-melody:.34; --o-rhythm:.33; --o-harmony:.33;
  --edge:transparent; --cell-size:40px;
  --block-art:radial-gradient(circle at 50% 50%, var(--block-ink) 0 7%, transparent 8%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"Alegreya",Georgia,serif;color:var(--ink);background:var(--bg3);min-height:100dvh;overflow-x:hidden;font-size:1.06rem;line-height:1.4;-webkit-tap-highlight-color:transparent;transition:color .4s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.75 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(110% 80% at 50% 12%, var(--glow), transparent 58%),
  radial-gradient(140% 120% at 50% 38%, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  transition:--bg1 .5s,--bg2 .5s,--bg3 .5s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;box-shadow:inset 0 0 0 7px var(--edge),inset 0 0 70px color-mix(in srgb,var(--edge) 45%,transparent);transition:box-shadow .45s}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* ---------- the painted room ---------- */
.scenery{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lay{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s}
.lay-western{opacity:var(--o-western)}.lay-jazz{opacity:var(--o-jazz)}.lay-carnatic{opacity:var(--o-carnatic)}.lay-hindustani{opacity:var(--o-hindustani)}
.lay-melody{opacity:calc(var(--o-melody) * .55)}.lay-rhythm{opacity:calc(var(--o-rhythm) * .7)}.lay-harmony{opacity:calc(var(--o-harmony) * .7)}
body.in-game .lay{opacity:calc(var(--o, 1) * .5)}
body.in-game .lay-western{--o:var(--o-western)}body.in-game .lay-jazz{--o:var(--o-jazz)}body.in-game .lay-carnatic{--o:var(--o-carnatic)}body.in-game .lay-hindustani{--o:var(--o-hindustani)}
body.in-game .lay-melody{--o:calc(var(--o-melody) * .6)}body.in-game .lay-rhythm{--o:calc(var(--o-rhythm) * .7)}body.in-game .lay-harmony{--o:calc(var(--o-harmony) * .7)}
@media (prefers-reduced-motion:reduce){.lay,body::before{transition:none}}
.lay .mid{display:none}
@media (max-aspect-ratio:4/5){.lay .mid{display:inline}}

/* ---------- top bar ---------- */
.top{position:relative;z-index:5;display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));min-height:60px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 8px;border-radius:999px;text-decoration:none;background:rgba(0,0,0,.28);border:1px solid var(--panel-line);font-size:1rem;white-space:nowrap}
.back img{width:30px;height:30px}
.back:hover{background:rgba(0,0,0,.42)}
.top .title{white-space:nowrap;font-family:"Yeseva One",serif;font-size:1.3rem;letter-spacing:.1em;margin-left:auto;margin-right:auto;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.icon-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.28);border:1px solid var(--panel-line);flex:none;color:var(--accent)}
.icon-btn:hover{background:rgba(0,0,0,.45)}
.icon-btn svg{width:22px;height:22px}
.icon-btn .off{display:none}
.icon-btn[aria-pressed="true"] .on{display:none}
.icon-btn[aria-pressed="true"] .off{display:block}
@media (max-width:520px){.back .txt-long{display:none}.top .title{font-size:1.1rem}}

.screen{position:relative;z-index:1;display:none}
.screen.active{display:block}

/* ---------- setup ---------- */
#setup{max-width:1080px;margin:0 auto;padding:4px max(16px,env(safe-area-inset-right)) 120px max(16px,env(safe-area-inset-left))}
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,4vw,48px);align-items:center;margin:clamp(6px,2vw,24px) 0 clamp(14px,3vw,28px)}
.hero-art{width:min(100%,380px);justify-self:center;aspect-ratio:1;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));transform:rotate(-2deg)}
.hero-art svg{width:100%;height:100%;display:block}
.eyebrow{font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.wordmark{font-family:"Yeseva One",serif;font-weight:400;letter-spacing:.08em;font-size:clamp(2.8rem,8.4vw,5rem);line-height:1;text-shadow:0 3px 22px rgba(0,0,0,.5);margin:.12em 0 .08em}
.meaning{display:block;font-style:italic;letter-spacing:.1em;color:var(--accent);font-size:clamp(1rem,2.4vw,1.2rem)}
.deva{font-family:"Yatra One","Kohinoor Devanagari","Noto Sans Devanagari",serif;font-style:normal;letter-spacing:.02em;font-size:1.2em}
.lede{margin-top:.9em;font-size:clamp(1.06rem,2.2vw,1.24rem);max-width:40ch}
.lede b{color:var(--accent);font-weight:700}
@media (max-width:760px){.hero{grid-template-columns:1fr;text-align:center}.hero-art{width:min(52vw,240px);order:-1}.lede{margin-left:auto;margin-right:auto}}
@media (max-width:560px){.hero{grid-template-columns:104px 1fr;text-align:left;gap:2px 14px;align-items:center}.hero>div{display:contents}.hero-art{width:104px;order:0;grid-row:1/span 3;grid-column:1}.hero .eyebrow,.hero .wordmark,.hero .meaning{grid-column:2}.wordmark{font-size:clamp(1.7rem,9vw,2.3rem);letter-spacing:.04em;white-space:nowrap;margin:0}.eyebrow{font-size:1rem;letter-spacing:.08em}.meaning{font-size:.98rem;letter-spacing:.04em}.lede{grid-column:1/-1;font-size:1.04rem;margin-top:.6em;max-width:none}}

.pick{background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;padding:16px clamp(14px,2.4vw,22px) 18px;margin-top:16px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.pick h2{font-family:"Yeseva One",serif;font-weight:400;font-size:1.35rem;color:var(--accent);margin-bottom:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pick h2 small{font-family:"Alegreya",serif;font-size:.95rem;color:var(--ink-dim);font-style:italic}
.lab{color:var(--accent);font-size:1rem}
.lab output{color:var(--ink);font-style:italic;margin-left:6px}

/* the two sliders */
.tune-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px 26px;align-items:start}
@media (max-width:760px){.tune-grid{grid-template-columns:1fr}}
.range-wrap{margin-top:10px}
#trad{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;touch-action:pan-y}
#trad::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:linear-gradient(90deg,#d99a3a 0%,#b07a3a 16%,#7c5cc8 33%,#4e7fb8 49%,#e1672a 66%,#b8321f 82%,#3b44a6 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
#trad::-moz-range-track{height:14px;border-radius:999px;background:linear-gradient(90deg,#d99a3a 0%,#b07a3a 16%,#7c5cc8 33%,#4e7fb8 49%,#e1672a 66%,#b8321f 82%,#3b44a6 100%)}
#trad::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff7e0,var(--accent) 55%,#8a5a12);border:2px solid #2a1504;box-shadow:0 4px 14px rgba(0,0,0,.5)}
#trad::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff7e0,var(--accent) 55%,#8a5a12);border:2px solid #2a1504}
.zones{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2px}
.zones button{min-height:44px;font-size:.95rem;line-height:1.1;color:var(--ink-dim);padding:4px 2px;border-radius:10px;text-align:center}
.zones button:first-child{text-align:left}.zones button:last-child{text-align:right}
.zones button.on{color:var(--ink);font-weight:700}
.tri-wrap{display:flex;align-items:center;gap:14px;margin-top:6px}
.tri{width:150px;height:auto;flex:none;color:var(--ink);cursor:grab;touch-action:none;overflow:visible}
.tri:active{cursor:grabbing}
.tri .knob{fill:var(--accent);stroke:#2a1504;stroke-width:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.corners{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1}
.corners button{min-height:44px;border-radius:12px;background:rgba(0,0,0,.24);border:1.5px solid var(--panel-line);font-size:1rem;padding:4px 8px}
.corners button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.preview{margin-top:12px;color:var(--ink-dim);font-size:1rem;line-height:1.5}
.preview b{color:var(--ink);font-weight:700;letter-spacing:.04em}
@media (max-width:420px){.tri{width:124px}.corners button{font-size:.95rem;padding:4px}}

.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.seg button{min-height:56px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.26);border:1.5px solid var(--panel-line);font-size:1.1rem;line-height:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:background .2s,border-color .2s}
.seg button small{font-size:.86rem;color:var(--ink-dim)}
.seg button[aria-checked="true"]{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 55%,#5a1a0a),color-mix(in srgb,var(--accent) 25%,#2a0a04));border-color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.seg button[aria-checked="true"] small{color:var(--ink)}
.seg-sm button{min-height:52px;font-size:1.04rem}
.seg-3{grid-template-columns:repeat(3,minmax(44px,1fr));max-width:240px}
@media (max-width:420px){.seg button{font-size:1.02rem;padding:8px 6px}.seg button small{font-size:.8rem}}
.sub{margin-top:14px}
.count-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:12px}
.names label{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.26);border-radius:14px;padding:6px 10px;border:1px solid var(--panel-line)}
.names i{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.names input,.online input{font:inherit;font-size:1.06rem;color:var(--ink);background:transparent;border:0;min-height:44px;width:100%;min-width:0}
.names input:focus,.online input:focus{outline:none}
.online{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.online .box{background:rgba(0,0,0,.26);border:1px solid var(--panel-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.online .box p{color:var(--ink-dim);font-size:.98rem}
.online .field{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--panel-line);border-radius:12px;padding:2px 4px 2px 12px}
.online #join-code{text-transform:uppercase;letter-spacing:.3em;font-family:"Yeseva One",serif}
.online .note{color:#ffd0b0;min-height:1.3em;font-size:.95rem}
.online .pill{min-height:44px;padding:6px 18px}
@media (max-width:640px){.online{grid-template-columns:1fr}}

.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.way{position:relative;text-align:left;border-radius:18px;padding:14px 14px 16px;background:rgba(0,0,0,.24);border:1.5px solid var(--panel-line);display:grid;grid-template-columns:60px 1fr;gap:4px 12px;align-items:center;transition:border-color .2s,background .2s}
.way svg{grid-row:span 2;width:60px;height:60px}
.way b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.25rem}
.way span{color:var(--ink-dim);font-size:1rem;line-height:1.3}
.way[aria-checked="true"]{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 45%,#4a1408),color-mix(in srgb,var(--accent) 18%,#1e0703));border-color:var(--accent);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.way[aria-checked="true"] span{color:var(--ink)}
@media (max-width:860px){.ways{grid-template-columns:1fr}.way{grid-template-columns:52px 1fr}.way svg{width:52px;height:52px}}
.levels{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.levels button{width:100%;min-height:92px;text-align:left;border-radius:14px;padding:10px 12px;background:rgba(0,0,0,.3);border:1.5px solid var(--panel-line);display:flex;flex-direction:column;gap:2px}
.levels b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.08rem}
.levels .k{font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.levels .sw{font-size:.95rem;color:var(--ink-dim);line-height:1.25}
.levels button[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 30%,#2a0a04);border-color:var(--accent)}
.levels button[aria-checked="true"] .sw{color:var(--ink)}
@media (max-width:900px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.levels{grid-template-columns:1fr}.levels button{min-height:0}}

.more{margin-top:16px;background:var(--panel);border:1px solid var(--panel-line);border-radius:20px}
.more summary{list-style:none;cursor:pointer;min-height:56px;padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"▸";color:var(--accent);transition:transform .2s}
.more[open] summary::before{transform:rotate(90deg)}
.more-t{font-family:"Yeseva One",serif;font-size:1.15rem;color:var(--accent)}
.more-sum{color:var(--ink-dim);font-size:.95rem;font-style:italic}
.more-body{padding:0 18px 18px}
.sub-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;margin-top:12px}
@media (max-width:560px){.sub-row{grid-template-columns:1fr}}
.toggle{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(0,0,0,.28);border:1.5px solid var(--panel-line);font-size:1rem;text-align:left;margin-top:12px}
.toggle i{width:40px;height:24px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;flex:none;transition:background .2s}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .2s}
.toggle[aria-checked="true"]{border-color:var(--accent)}
.toggle[aria-checked="true"] i{background:var(--accent)}
.toggle[aria-checked="true"] i::after{transform:translateX(16px)}
.toggle small{display:block;color:var(--ink-dim);font-size:.86rem}

.go{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 24px;border-radius:999px;font-weight:700;font-size:1.08rem;text-decoration:none;background:rgba(0,0,0,.28);border:1.5px solid var(--panel-line);color:var(--ink)}
.pill.gold{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000),0 12px 26px rgba(0,0,0,.35)}
.pill.gold:hover{filter:brightness(1.08)}
.pill.gold:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.pill.big{min-height:60px;font-size:1.28rem;padding:12px 40px}
.pill:disabled{opacity:.45;cursor:not-allowed}
.best-line{color:var(--ink-dim);font-size:1rem;text-align:center;margin-top:10px}
.best-line b{color:var(--accent)}

.how summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}
.how summary::-webkit-details-marker{display:none}
.how-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:22px;align-items:start}
.mini-eg table{border-collapse:collapse;margin:0 auto;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.mini-eg td{width:40px;height:40px;border:2px solid var(--cell-line);background:var(--cell);color:var(--cell-ink);text-align:center;font-weight:800;font-size:1.25rem;position:relative}
.mini-eg td.b{background:var(--block)}
.mini-eg td.n::before{content:attr(data-n);position:absolute;left:3px;top:1px;font-size:.62rem;font-weight:700;color:var(--num)}
.how-txt ul{margin:0 0 10px 1.1em;display:grid;gap:6px}
.how-txt p{color:var(--ink-dim);margin-top:8px}
.how-txt p b,.how-txt li b{color:var(--ink)}
.how-txt i{color:var(--ink-dim)}
@media (max-width:700px){.how-grid{grid-template-columns:1fr}}
.maker{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:40px;color:var(--ink-dim);font-size:.95rem;text-align:center}
.maker img{height:44px;width:auto;opacity:.9}
.noscript{position:relative;z-index:2;text-align:center;padding:12px}

/* ---------- sheets ---------- */
.veil{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(8,6,12,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto}
.veil.open{display:flex}
.card{position:relative;width:min(600px,100%);margin:auto;border-radius:22px;padding:24px clamp(16px,4vw,28px);text-align:center;color:var(--ink);
  background:linear-gradient(160deg,color-mix(in srgb,var(--bg1) 70%,#1a100b),color-mix(in srgb,var(--bg3) 80%,#000));border:1px solid var(--panel-line);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.card h2{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.1;margin-bottom:8px}
.card p{color:var(--ink-dim);font-size:1.04rem}
.card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pass-card{border:3px solid var(--c,var(--accent));background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c,#e9b95a) 30%,#1a100b),#1a100b 70%)}
.pass-card .to{font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.pass-card .who{font-family:"Yeseva One",serif;font-size:clamp(2.6rem,12vw,4.4rem);line-height:1.05;color:var(--c,var(--accent));text-shadow:0 4px 30px rgba(0,0,0,.6);margin:.1em 0;word-break:break-word}
.lobby-wrap{width:min(560px,100%);margin:auto}
.lobby-set{margin-top:10px;color:var(--accent);font-size:1rem}
.nsmr-status{z-index:70}
.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;margin:16px 0 8px}
.podium .step{display:flex;flex-direction:column;align-items:center;gap:6px}
.podium .block{width:100%;border-radius:12px 12px 4px 4px;display:grid;place-items:center;font-family:"Yeseva One",serif;font-size:1.8rem;color:#2a1706;background:linear-gradient(180deg,#e9b95a,#a67c2e);box-shadow:inset 0 2px 0 rgba(255,245,210,.6)}
.podium .p1 .block{height:110px}.podium .p2 .block{height:78px;filter:saturate(.3) brightness(1.05)}.podium .p3 .block{height:56px;filter:sepia(.6) hue-rotate(-20deg) brightness(.85)}
.podium .nm{font-family:"Yeseva One",serif;font-size:1.1rem;word-break:break-word}
.podium .nm i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:middle}
.podium small{color:var(--ink-dim);font-size:.9rem}
.rest{list-style:none;display:grid;gap:6px;margin-top:8px}
.rest li{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-radius:10px;background:rgba(0,0,0,.25)}

/* the result card: every answer, with its sound and its notation */
.res{width:min(760px,100%)}
.res .stat{font-family:"Yeseva One",serif;font-size:clamp(2.4rem,9vw,3.4rem);color:var(--accent);line-height:1}
.answers{list-style:none;text-align:left;margin-top:14px;display:grid;gap:8px;max-height:min(52vh,560px);overflow-y:auto;padding-right:4px;overscroll-behavior:contain}
.answers li{background:rgba(0,0,0,.26);border:1px solid var(--panel-line);border-radius:14px;padding:10px 12px}
.answers .ah{display:flex;align-items:center;gap:10px}
.answers .aw{font-weight:800;letter-spacing:.08em;font-size:1.08rem}
.answers .ak{color:var(--accent);font-size:.9rem;min-width:2.6em}
.answers .by{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--ink-dim)}
.answers .by i{width:10px;height:10px;border-radius:50%}
.answers .ac{color:var(--ink-dim);font-size:.98rem;margin-top:2px}
.answers .fact{color:var(--ink);font-size:.95rem;margin-top:4px;font-style:italic}
.answers .mini-play{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.answers .mini-play svg{width:18px;height:18px}
.answers .staff{background:#f8f1df;border-radius:10px;margin-top:8px;padding:2px 4px;overflow-x:auto}
.answers .staff svg{display:block;min-width:260px}
.bolgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bolgrid .vib{display:flex;flex-direction:column;border-left:2px solid var(--accent);padding-left:6px}
.bolgrid .mk{font-weight:800;color:var(--accent);font-size:.9rem}
.bolgrid .bols{display:flex;gap:6px;font-size:.95rem}
.next-game{margin-top:14px}
.next-game a{color:var(--accent);font-weight:700;text-decoration:none;display:inline-block;min-height:44px;padding:10px 6px}

/* ================= play ================= */
:root{--vh:1vh}
@supports (height:100dvh){:root{--vh:1dvh}}
body.in-game{height:calc(100 * var(--vh));min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
body.in-game .top{flex:none;width:100%;max-width:none;min-height:52px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:4px}
body.in-game .back{min-height:44px}
#play.active{flex:1 1 auto;min-height:0;width:100%;max-width:1500px;margin:0 auto;display:grid;gap:8px;padding:0 10px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"hud" "clue" "board" "tools" "keys"}
#play .lists{display:none}
.hud{grid-area:hud;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:36px;font-size:1rem}
.hud .mode{color:var(--ink-dim);font-style:italic;font-size:.95rem;margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.3);border:1.5px solid transparent;font-size:1rem;min-height:34px}
.chip i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.chip b{font-family:"Yeseva One",serif;font-weight:400}
.chip.turn{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.chip.away{opacity:.5}
.chip.time b{font-variant-numeric:tabular-nums}
.cluebar{grid-area:clue;display:flex;align-items:stretch;gap:6px;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:6px;min-height:64px}
.cluebar .nav{width:44px;flex:none;border-radius:12px;font-size:1.7rem;line-height:1;color:var(--accent);background:rgba(0,0,0,.2)}
.clue-now{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:2px 4px;font-size:1.06rem;line-height:1.25}
.cn-num{font-weight:800;color:var(--accent);white-space:nowrap}
.cn-text{min-width:0}
.cn-text .en{color:var(--ink-dim);white-space:nowrap}
.cn-text .listen{font-style:italic}
.playbtn{width:52px;flex:none;border-radius:14px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 50%,#000)}
.playbtn svg{width:24px;height:24px}
.playbtn.playing{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.25);transform:scale(1.04)}}
.board{grid-area:board;min-height:0;display:grid;place-items:center;position:relative}
.grid{display:grid;grid-template-columns:repeat(var(--n),var(--cell-size));grid-template-rows:repeat(var(--n),var(--cell-size));gap:0;
  padding:5px;border-radius:calc(var(--cell-r) + 6px);background:var(--cell-line);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent);touch-action:manipulation;outline:none}
.grid:focus-visible{box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 3px var(--accent)}
.cell{position:relative;background:var(--cell);color:var(--cell-ink);border:1px solid var(--cell-line);border-radius:var(--cell-r);display:grid;place-items:center;
  font-weight:800;font-size:calc(var(--cell-size) * .56);line-height:1;user-select:none;-webkit-user-select:none;cursor:pointer;transition:background .18s}
.cell.block{background:var(--block);background-image:var(--block-art);cursor:default;border-color:var(--cell-line)}
.cell .num{position:absolute;left:calc(var(--cell-size) * .06);top:calc(var(--cell-size) * .03);font-size:max(9px,calc(var(--cell-size) * .25));font-weight:700;color:var(--num)}
.cell .ch{transform:translateY(calc(var(--cell-size) * .05))}
.cell.inword{background:color-mix(in srgb,var(--hl) 70%,var(--cell))}
.cell.cur{background:var(--cur);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cell-ink) 60%,transparent)}
.cell.solved{background:color-mix(in srgb,var(--solved) 55%,var(--cell))}
.cell.solved.inword{background:color-mix(in srgb,var(--solved) 55%,var(--hl))}
.cell.revealed .ch{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--accent) 80%,#000)}
.cell.wrong{background:#f2a08a}
.cell.tent .ch{color:var(--pc,var(--mine))}
.cell.glow{animation:glow .9s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 0 var(--accent);transform:scale(1)}35%{box-shadow:0 0 18px 6px var(--accent);transform:scale(1.08);z-index:2}100%{box-shadow:0 0 0 0 transparent;transform:scale(1)}}
.cell.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.cell.glow,.cell.shake,.playbtn.playing{animation:none}}
.lists{grid-area:lists;min-height:0;overflow:hidden;gap:10px}
.list{min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:8px 6px 8px 10px}
.list h3{font-family:"Yeseva One",serif;font-weight:400;color:var(--accent);font-size:1.1rem;margin:2px 4px 6px}
.list ol{list-style:none;overflow-y:auto;min-height:0;padding-right:4px;display:grid;gap:2px;overscroll-behavior:contain}
.list li{border-radius:10px}
.list li button{width:100%;text-align:left;display:flex;gap:8px;padding:8px 8px;border-radius:10px;font-size:1rem;line-height:1.25;min-height:44px;align-items:flex-start}
.list li button .k{font-weight:800;color:var(--accent);min-width:1.8em}
.list li button .t{flex:1}
.list li button .p{color:var(--accent);flex:none}
.list li.on button{background:color-mix(in srgb,var(--hl) 28%,transparent)}
.list li.done button{opacity:.55}
.list li.done button .t{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.tools{grid-area:tools;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tools button{min-height:44px;padding:6px 16px;border-radius:999px;background:rgba(0,0,0,.3);border:1.5px solid var(--panel-line);font-size:1rem;font-weight:700}
.tools button.gold{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tools button:disabled{opacity:.4}
.keys{grid-area:keys;display:grid;gap:6px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.keys .row{display:flex;gap:5px;justify-content:center}
.keys button{flex:1 1 0;max-width:62px;min-width:0;height:48px;border-radius:9px;background:color-mix(in srgb,var(--cell) 90%,#fff);color:var(--cell-ink);font-weight:800;font-size:1.2rem;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.keys button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.keys button.wide{flex:1.6 1 0;max-width:96px;font-size:1rem;background:color-mix(in srgb,var(--accent) 80%,#fff);color:var(--on-accent)}
.keys:empty{display:none}

/* phones: the play bar is just leave · title · sound */
@media (max-width:600px){
  body.in-game .back{display:none}
  body.in-game #leave{order:-1}
  #play.active{gap:6px;padding:0 6px calc(6px + env(safe-area-inset-bottom))}
  .cluebar{min-height:58px;padding:4px}
  .clue-now{font-size:1rem}
  .keys button{height:46px;font-size:1.12rem}
  .keys .row{gap:4px}
}
/* no on-screen keyboard where there's a real one */
@media (hover:hover) and (pointer:fine){ #play.active .keys{display:none} }
body.show-keys #play.active .keys{display:grid}

/* landscape: the grid as tall as the screen, clue, lists and keys beside it */
@media (min-aspect-ratio:6/5){
  #play.active{grid-template-columns:var(--board,60vh) minmax(280px,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;
    grid-template-areas:"board hud" "board clue" "board lists" "board tools" "board keys";column-gap:14px}
  #play .lists{display:grid;grid-template-columns:1fr 1fr}
  .board{align-self:stretch}
}
@media (min-aspect-ratio:6/5) and (min-width:1100px){ #play .lists{grid-template-columns:1fr 1fr} }
/* short landscape phones: the smallest possible chrome */
@media (min-aspect-ratio:6/5) and (max-height:500px){
  body.in-game .top{position:absolute;top:0;right:0;z-index:6;width:auto;min-height:0;padding:calc(4px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 0;gap:6px}
  body.in-game .top .title,body.in-game .back{display:none}
  body.in-game .icon-btn{width:44px;height:44px}
  #play.active{padding-top:max(6px,env(safe-area-inset-top));grid-template-columns:var(--board,80vh) minmax(0,1fr);grid-template-areas:"board hud" "board clue" "board lists" "board tools" "board keys";gap:5px 10px}
  .hud{padding-right:104px;min-height:44px}
  #play .lists{display:none}
  .keys button{height:44px;font-size:1.05rem}
  .keys{gap:4px}
  .cluebar{min-height:52px}
  .tools button{min-height:44px;padding:4px 12px}
}
/* tall phones in portrait with a keyboard: keep the clue list out, keep it roomy */
@media (max-aspect-ratio:6/5) and (min-width:700px){
  #play.active{grid-template-rows:auto auto minmax(0,1fr) auto auto;max-width:900px}
}