@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")}
:root{
  --felt-1:#17453f; --felt-2:#0c2b27; --felt-3:#071c19;
  --lacquer-1:#b23a20; --lacquer-2:#8a2413; --lacquer-3:#6d1b0d;
  --gold-1:#e9b95a; --gold-2:#caa04a; --gold-3:#a67c2e;
  --cream:#f4e7c9; --cream-dim:#e3d6b6; --ink:#221410; --ring:#f2cf7e; --gold-text:#f2cf7e;
  --arcade:#07091a; --edge:transparent; --top-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"Alegreya",Georgia,serif;color:var(--cream);background:var(--felt-3);min-height:100dvh;overflow-x:hidden;font-size:1.06rem;line-height:1.4;-webkit-tap-highlight-color:transparent}
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.09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(120% 90% at 50% 18%, rgba(255,214,140,.16), rgba(255,214,140,0) 55%),
  radial-gradient(140% 120% at 50% 40%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%)}
/* the player whose turn it is owns the edge of the screen */
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}
body.in-game{overflow:hidden;touch-action:none;overscroll-behavior:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* ---------- 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)) 16px 6px;min-height:var(--top-h)}
.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 rgba(233,185,90,.4);font-size:1rem;white-space:nowrap}
.back img{width:30px;height:30px}
.back:hover{background:rgba(0,0,0,.42)}
.top .title{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);white-space:nowrap}
.icon-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.28);border:1px solid rgba(233,185,90,.4);flex:none}
.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}
#mute{margin-left:auto}
body.in-game #mute{margin-left:0}
@media (max-width:520px){.back .txt-long{display:none}.top{gap:8px;padding-left:10px;padding-right:10px}.top .title{font-size:1.05rem;letter-spacing:.06em}}
@media (max-width:480px){.top .title{display:none!important}}

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

/* ---------- setup ---------- */
#setup{max-width:1080px;margin:0 auto;padding:4px 16px 120px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto;column-gap:clamp(18px,4vw,48px);align-items:center;margin:clamp(6px,2vw,24px) 0 clamp(18px,3vw,32px)}
.hero-art{grid-row:1 / span 2;width:min(100%,460px);justify-self:center;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
.hero > div:not(.hero-art){align-self:end}
.hero > .lede{grid-column:2;align-self:start}
.hero-art svg{width:100%;height:auto;display:block}
.eyebrow{font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.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:.12em;color:var(--gold-text);font-size:clamp(1rem,2.4vw,1.2rem)}
.lede{margin-top:.9em;font-size:clamp(1.08rem,2.3vw,1.3rem);max-width:38ch}
.lede b{color:var(--gold-text);font-weight:700}
/* a wide screen: a smaller picture so Begin is on the first screen */
@media (min-width:761px){.hero{grid-template-columns:minmax(0,.75fr) minmax(0,1.1fr);margin:4px 0 10px}.hero-art{width:min(100%,330px)}.wordmark{font-size:clamp(2.8rem,6vw,4.2rem)}.pick{margin-top:12px;padding-top:12px;padding-bottom:14px}.go{margin-top:16px}}
@media (max-width:760px){.hero{grid-template-columns:1fr;text-align:center}.hero-art{grid-row:auto;width:min(88vw,380px);order:-1}.hero > .lede{grid-column:1}.lede{margin-left:auto;margin-right:auto}}

.pick{background:rgba(0,0,0,.24);border:1px solid rgba(233,185,90,.22);border-radius:20px;padding:16px clamp(14px,2.4vw,22px) 18px;margin-top:16px}
.pick h2{font-family:"Yeseva One",serif;font-weight:400;font-size:1.35rem;color:var(--gold-text);margin-bottom:12px}
.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,.28);border:1.5px solid rgba(233,185,90,.3);font-size:1.12rem;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(--cream-dim)}
.seg button[aria-checked="true"]{background:linear-gradient(160deg,var(--lacquer-1),var(--lacquer-2));border-color:var(--gold-1);box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,225,170,.25)}
.seg button:hover{border-color:rgba(233,185,90,.7)}
@media (max-width:520px){.seg{grid-template-columns:1fr}.seg button{flex-direction:row;justify-content:space-between;text-align:left;gap:10px}}

.sub{margin-top:14px}
.names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.names label{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.26);border-radius:14px;padding:6px 10px;border:1px solid rgba(233,185,90,.2)}
.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.08rem;color:var(--cream);background:transparent;border:0;min-height:44px;width:100%;min-width:0}
.names input:focus,.online input:focus{outline:none}
@media (max-width:420px){.names{grid-template-columns:1fr}}
.online{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.online .box{background:rgba(0,0,0,.26);border:1px solid rgba(233,185,90,.22);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.online .box p{color:var(--cream-dim);font-size:1rem}
.online .field{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid rgba(233,185,90,.35);border-radius:12px;padding:2px 12px}
.online #join-code{text-transform:uppercase;letter-spacing:.3em;font-family:"Yeseva One",serif}
.online .note{color:#ffc4a0;min-height:1.3em;font-size:1rem}
@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:linear-gradient(160deg,rgba(178,58,32,.35),rgba(109,27,13,.35));border:1.5px solid rgba(233,185,90,.28);display:grid;grid-template-columns:64px 1fr;gap:4px 12px;align-items:center;transition:border-color .2s,background .2s}
.way svg{grid-row:span 2;width:64px;height:64px}
.way b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.3rem;letter-spacing:.02em}
.way span{color:var(--cream-dim);font-size:1rem;line-height:1.3}
.way[aria-checked="true"]{background:linear-gradient(160deg,var(--lacquer-1),var(--lacquer-2) 60%,var(--lacquer-3));border-color:var(--gold-1);box-shadow:0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,225,170,.25)}
.way[aria-checked="true"] span{color:#f3d9b8}
@media (max-width:860px){.ways{grid-template-columns:1fr}.way{grid-template-columns:56px 1fr}.way svg{width:56px;height:56px}}

.levels{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.levels button{width:100%;height:100%;min-height:92px;text-align:left;border-radius:14px;padding:10px 12px;background:rgba(0,0,0,.3);border:1.5px solid rgba(233,185,90,.25);display:flex;flex-direction:column;gap:4px}
.levels b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.15rem}
.levels .k{font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.levels .sw{font-size:.98rem;color:var(--cream-dim);line-height:1.3}
.levels .pb{font-size:.9rem;color:var(--gold-text);margin-top:auto}
.levels button[aria-checked="true"]{background:linear-gradient(160deg,var(--lacquer-1),var(--lacquer-2));border-color:var(--gold-1)}
.levels button[aria-checked="true"] .sw{color:#f3d9b8}
@media (max-width:900px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.levels{grid-template-columns:1fr}}

.way-desc{display:none;color:#f3d9b8;font-size:1rem;margin-top:10px;line-height:1.35}
.raga-notes{margin-top:12px}
.more{margin-top:12px;border-top:1px solid rgba(233,185,90,.2);padding-top:6px}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 2px;font-size:1.06rem;color:var(--cream)}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"";width:9px;height:9px;flex:none;border-right:2.4px solid var(--gold-1);border-bottom:2.4px solid var(--gold-1);transform:rotate(-45deg);transition:transform .2s;margin:0 4px 0 6px}
.more[open] summary::before{transform:rotate(45deg)}
.more .more-h{font-family:"Yeseva One",serif;letter-spacing:.02em;white-space:nowrap}
.more .more-sum{color:var(--gold-text);font-style:italic;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more #levels-panel .levels{margin-top:6px}
.journey-opts{margin-top:6px}
.opt-h{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin:10px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:44px;padding:6px 16px;border-radius:999px;background:rgba(0,0,0,.28);border:1.5px solid rgba(233,185,90,.3);font-size:1rem}
.chips button[aria-checked="true"]{background:var(--gold-1);color:#2a1706;border-color:var(--gold-1)}
.opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.raga-btn small{font-weight:400;color:var(--cream-dim);font-style:italic}
.raga-btn b{font-family:"Yeseva One",serif;font-weight:400;color:var(--gold-text)}
.raga-notes{color:var(--cream-dim);font-size:1rem}

.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 26px;border-radius:999px;font-weight:700;font-size:1.1rem;text-decoration:none;background:rgba(0,0,0,.28);border:1.5px solid rgba(233,185,90,.45)}
.pill.gold{background:var(--gold-1);color:#2a1706;border-color:var(--gold-1);box-shadow:0 4px 0 var(--gold-3),0 12px 26px rgba(0,0,0,.35)}
.pill.gold:hover{background:#f4cb72}
.pill.gold:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-3)}
.pill.big{min-height:60px;font-size:1.3rem;padding:12px 40px}
.pill.small{min-height:44px;padding:6px 16px;font-size:1rem}
.pill:disabled{opacity:.5;cursor:not-allowed}
.best-line{color:var(--cream-dim);font-size:1rem;text-align:center;margin-top:10px}
.best-line b{color:var(--gold-text)}

.rules{margin-top:36px;background:rgba(0,0,0,.2);border:1px solid rgba(233,185,90,.18);border-radius:20px;padding:20px clamp(14px,2.6vw,26px)}
.rules h2{font-family:"Yeseva One",serif;font-weight:400;font-size:1.5rem;color:var(--gold-text);margin-bottom:14px}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.rules h3{font-family:"Yeseva One",serif;font-weight:400;font-size:1.15rem;margin-bottom:4px}
.rules p{color:var(--cream-dim);font-size:1.04rem}
.rules b{color:var(--gold-text);font-weight:700}
.rules-sub{margin-top:18px}
.rules-p{margin-top:8px}
@media (max-width:760px){.rule-grid{grid-template-columns:1fr}}
.maker{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:40px;color:var(--cream-dim);font-size:1rem;text-align:center}
.maker img{height:44px;width:auto;opacity:.9}
.noscript{position:relative;z-index:2;text-align:center;padding:12px 16px 40px;color:var(--gold-text)}

/* ---------- setup on a phone: the choices that matter, then Begin, without a long scroll ---------- */
@media (max-width:600px){
  #setup{padding-bottom:96px}
  .hero{grid-template-columns:118px minmax(0,1fr);text-align:left;gap:14px;margin:0 0 6px}
  .hero-art{width:118px;order:0}
  .wordmark{font-size:2.05rem;white-space:nowrap}
  .more summary{flex-wrap:wrap;row-gap:0}
  .more .more-sum{flex-basis:100%;padding-left:27px;white-space:normal}
  .eyebrow{font-size:.78rem;letter-spacing:.16em}
  .meaning{font-size:1rem;letter-spacing:.06em}
  .hero > .lede{grid-column:1 / -1;margin:10px 0 0;font-size:1rem;max-width:none}
  .hero > div:not(.hero-art){align-self:center}
  .pick{padding:12px 12px 14px;margin-top:10px}
  .pick h2{font-size:1.15rem;margin-bottom:8px}
  .seg{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .seg button{flex-direction:column;justify-content:center;text-align:center;min-height:52px;padding:6px 4px;font-size:1rem}
  .seg button small{display:none}
  .ways{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .way{grid-template-columns:1fr;justify-items:center;text-align:center;padding:8px 4px 10px;gap:4px;min-height:52px}
  .way svg{grid-row:auto;width:40px;height:40px}
  .way b{font-size:1.02rem;line-height:1.1}
  .way span{display:none}
  .way-desc{display:block}
  .raga-notes{display:none}
  .go{margin-top:14px}
}
@media (max-width:600px) and (max-height:700px){.lede{display:none}.hero-art{width:96px}.hero{grid-template-columns:96px minmax(0,1fr)}}
/* a phone held sideways: the two choices side by side, Begin straight under them */
@media (orientation:landscape) and (max-height:500px){
  #setup.active{display:grid}
  #setup{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:start;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  #setup > *{grid-column:1 / -1}
  #setup > .pick{grid-column:auto;margin-top:8px;padding:10px 12px 12px}
  #setup > .pick[aria-labelledby="way-h"]{grid-column:2;grid-row:2 / span 3}
  #setup > .go{grid-column:1;grid-row:3}
  #setup > .best-line{grid-column:1;grid-row:4}
  #setup > .more{grid-column:1 / -1}
  .hero{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto;text-align:left;gap:16px;margin:0 0 2px}
  .hero-art{grid-row:auto;width:120px}
  .hero > .lede{grid-column:3;display:none}
  .wordmark{font-size:2.3rem}
  .pick h2{font-size:1.12rem;margin-bottom:8px}
  .seg{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .seg button{flex-direction:column;min-height:50px;padding:6px 4px;font-size:1rem}
  .seg button small{display:none}
  .ways{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .way{grid-template-columns:1fr;justify-items:center;text-align:center;padding:6px 4px 8px;gap:2px}
  .way svg{grid-row:auto;width:36px;height:36px}
  .way b{font-size:1rem;line-height:1.1}
  .way span{display:none}
  .way-desc{display:block;font-size:.98rem}
  .raga-notes{display:none}
  .online{grid-template-columns:1fr}
  .levels{grid-template-columns:1fr}
  .go{margin-top:12px}
}
@media (orientation:landscape) and (max-height:500px) and (min-width:800px){.hero > .lede{display:block;grid-column:auto;margin:0;font-size:1rem}.hero{grid-template-columns:120px auto minmax(0,1fr)}}
/* portrait play: the maze sits right under the score, the pad waits at the bottom for the thumbs */
@media (orientation:portrait){#play .stage{align-items:start}}

/* ---------- play ---------- */
body.in-game{height:100vh;height:100dvh;display:flex;flex-direction:column}
body.in-game .top{flex:none;width:100%}
#play{flex:1 1 auto;min-height:0;width:100%;padding:0 max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
body.in-game .top{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
/* on a phone the way home is the X — the big back link would only get tapped by mistake mid-maze */
@media (max-width:600px){body.in-game .back{display:none}body.in-game .top .title{display:block!important;margin-left:0}}
#play.active{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px;max-width:1180px;margin:0 auto}
#play .hud{grid-row:1}#play .rail{grid-row:2}#play .stage{grid-row:3}#play .under{grid-row:4}
.hud{width:100%;max-width:760px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:1rem}
.hud .left{display:flex;gap:10px;min-width:0}
.hud .left:empty{display:none}
.hud .sc{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.hud .sc small{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .sc b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.35rem;color:var(--cream);letter-spacing:.04em}
.hud .sc.p{padding:3px 10px;border-radius:12px;border:2px solid transparent}
.hud .sc.p.now{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,rgba(0,0,0,.3))}
.hud .sc.p.out{opacity:.5}
.hud .mid{flex:1;text-align:center;min-width:0}
.hud .mid .rg{font-family:"Yeseva One",serif;font-size:1.05rem;color:var(--gold-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.hud .mid small{display:block;color:var(--cream-dim);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.lives{display:flex;gap:3px;align-items:center}
.lives svg{width:15px;height:15px}
.breath{display:flex;gap:4px}
.breath i{width:10px;height:10px;border-radius:50%;background:#9fe0ff;box-shadow:0 0 8px rgba(159,224,255,.8)}
.breath i.gone{background:rgba(255,255,255,.14);box-shadow:none}
.fruits{display:flex;gap:2px}
.fruits canvas{width:16px;height:16px}

.rail{width:100%;max-width:760px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.rail:empty{display:none}
.rail .pl{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;border-radius:999px;background:rgba(0,0,0,.32);border:1.5px solid rgba(233,185,90,.22);font-size:1rem;line-height:1.2;white-space:nowrap}
.rail .pl i{width:12px;height:12px;border-radius:50%;flex:none;background:var(--c)}
.rail .pl b{font-family:"Yeseva One",serif;font-weight:400;color:var(--gold-text)}
.rail .pl.me{border-color:var(--c);background:color-mix(in srgb,var(--c) 24%,rgba(0,0,0,.35))}
.rail .pl.out{opacity:.6}
.rail .pl small{color:var(--cream-dim);font-style:italic;font-size:.88rem}
.rail .pill{min-height:44px}

.stage{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center}
.board{position:relative;border-radius:14px;background:var(--arcade);box-shadow:0 0 0 3px rgba(202,160,74,.7),0 0 0 7px rgba(42,12,6,.9),0 26px 60px rgba(0,0,0,.6);touch-action:none;user-select:none;-webkit-user-select:none}
.board canvas{display:block;width:100%;height:100%;border-radius:12px}
.toast{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);max-width:92%;text-align:center;padding:6px 14px;border-radius:999px;background:rgba(20,12,6,.86);border:1px solid rgba(233,185,90,.45);font-size:1rem;color:var(--cream);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1}

.under{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:6px}
.swaras{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;min-height:0}
.swaras span{font-size:1rem;padding:1px 9px;border-radius:999px;border:1px solid rgba(232,220,180,.3);color:var(--cream-dim);line-height:1.45;transition:background .1s,color .1s}
.swaras span small{font-size:.8rem;opacity:.8;margin-left:3px}
.swaras span.lit{background:var(--gold-1);color:var(--ink);border-color:var(--gold-1)}
.keyhint{color:var(--cream-dim);font-size:1rem;font-style:italic}
.dpad{display:none;grid-template-columns:repeat(3,clamp(52px,8.4vh,72px));grid-template-rows:repeat(3,clamp(46px,7vh,60px));gap:4px;justify-content:center;touch-action:none}
.dpad button{display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,var(--gold-1),var(--gold-3));box-shadow:0 4px 0 #6b4a12,0 8px 16px rgba(0,0,0,.35);touch-action:none;user-select:none;-webkit-user-select:none}
.dpad button svg{width:24px;height:24px;fill:#3d2606}
.dpad button.on,.dpad button:active{transform:translateY(3px);box-shadow:0 1px 0 #6b4a12,0 4px 10px rgba(0,0,0,.35)}
.dpad [data-d="0"]{grid-column:2;grid-row:1}
.dpad [data-d="1"]{grid-column:1;grid-row:2}
.dpad [data-d="3"]{grid-column:3;grid-row:2}
.dpad [data-d="2"]{grid-column:2;grid-row:3}
body.touch .dpad{display:grid}
body.touch .keyhint{display:none}

/* held sideways (phones, and iPads by touch): the maze fills the height in the middle,
   the score on the left, the pad on the right under the thumb. The top bar steps into the corners. */
@media (orientation:landscape) and (max-height:620px){
  :root{--top-h:52px}
  .top{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:2px;min-height:var(--top-h)}
  .back{min-height:44px}
  .icon-btn{width:44px;height:44px}
}
@media (orientation:landscape) and (max-height:620px), (orientation:landscape) and (pointer:coarse){
  body.in-game .top{position:fixed;top:0;left:0;right:0;max-width:none;margin:0;min-height:0;pointer-events:none;
    padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  body.in-game .top > *{pointer-events:auto}
  body.in-game .top .title{display:none!important}
  body.in-game .back .txt-long{display:none}
  body.in-game #leave{margin-left:auto}
  #play{padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  #play{--side:clamp(150px,17vw,250px)}
  #play.active{max-width:none;grid-template-columns:var(--side) minmax(0,1fr) var(--side);grid-template-rows:minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-items:center}
  #play .stage{grid-column:2;grid-row:1 / span 2;height:100%;justify-self:center;
    width:min(calc((100vh - 12px) * .9032), 100%);
    width:min(calc((100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .9032), 100%)}
  #play .hud{grid-column:1;grid-row:1;flex-direction:column;align-items:stretch;justify-content:center;align-self:center;gap:8px;padding-top:52px;max-width:none}
  #play .hud .left{flex-wrap:wrap}
  #play .hud .mid{text-align:left}
  #play .hud .right{align-items:flex-start;flex-direction:row;gap:10px}
  #play .rail{grid-column:1;grid-row:2;align-self:end;justify-content:flex-start;max-width:none}
  #play .under{grid-column:3;grid-row:1 / span 2;align-self:center;padding-top:52px;max-width:none}
  #play .dpad{grid-template-columns:repeat(3,clamp(44px,calc((var(--side) - 12px) / 3),64px));grid-template-rows:repeat(3,clamp(44px,9vh,60px))}
  .swaras span{padding:0 7px}
}

/* ---------- sheets ---------- */
.veil{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(7,22,20,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto}
.veil.open{display:flex}
.card{position:relative;width:min(580px,100%);margin:auto;border-radius:22px;padding:24px clamp(16px,4vw,28px);text-align:center;
  background:linear-gradient(160deg,#2a1a12,#1a100b);border:1px solid rgba(233,185,90,.4);box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,225,170,.2)}
.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(--cream-dim);font-size:1.06rem}
.card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.card .eyebrow{margin-bottom:6px}
.card .next-game{margin-top:12px}
.card .cleared{margin:-6px 0 12px;padding-bottom:10px;border-bottom:1px solid rgba(233,185,90,.2)}
.card .staff{display:flex;justify-content:center;min-height:110px;margin-top:4px}
.card .staff svg{max-width:100%;height:auto}
.card .scale-facts{color:var(--gold-text);margin-bottom:6px}
.card .scale-facts .sep{opacity:.6}
.card .scale-facts .bsep{display:none}
.card .next-game a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--gold-text);font-style:italic;text-underline-offset:3px}
.pass-card{border:3px solid var(--c,var(--gold-1));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(--cream-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(--gold-1));text-shadow:0 4px 30px rgba(0,0,0,.6);margin:.1em 0;word-break:break-word}
.big-num{font-family:"Yeseva One",serif;font-size:clamp(3.2rem,14vw,4.8rem);line-height:1;color:var(--gold-text)}
.path{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:8px 0 2px;list-style:none}
.path li{min-width:42px;padding:4px 8px;border-radius:10px;background:rgba(0,0,0,.35);border:1.5px solid rgba(233,185,90,.3);display:flex;flex-direction:column;align-items:center;line-height:1.1;transition:transform .12s,background .12s}
.path li b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.08rem}
.path li small{font-size:.86rem;color:var(--cream-dim)}
.path li.now{transform:translateY(-3px);background:rgba(233,185,90,.35)}
.path li.bad{border-color:#ff7a5c}
.card .row.sticky{position:sticky;bottom:-24px;z-index:2;margin:14px calc(-1 * clamp(16px,4vw,28px)) -24px;padding:12px 10px 16px;background:#1a100b;border-top:1px solid rgba(233,185,90,.22);border-radius:0 0 22px 22px}
/* a card taller than the screen scrolls inside itself, above its solid button bar */
.card{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.ladders{display:grid;grid-template-columns:minmax(0,1fr);column-gap:18px}
@media (orientation:landscape) and (max-height:500px){
  .veil{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .card{width:min(820px,100%);max-height:calc(100dvh - 16px);padding:14px 20px 24px}
  .card h2{font-size:1.5rem;margin-bottom:2px}
  .card p{font-size:1rem}
  .card .scale-facts br{display:none}
  .card .scale-facts .bsep{display:inline}
  .card .scale-facts .sep{margin:0 .2em}
  .ladders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path{gap:4px;margin:4px 0 0}
  .path li{min-width:34px;padding:2px 5px}
  .path li b{font-size:.98rem}
  .path li small{font-size:.8rem}
  .path-h{margin-top:8px}
  .card .row.sticky{margin-top:10px;padding:8px 10px 12px}
  .pill.big{min-height:52px;font-size:1.15rem}
}
@media (max-width:520px){.path li{min-width:36px;padding:3px 6px}.path li b{font-size:1rem}.path{gap:4px}}
.path-h{margin-top:12px;font-size:.9rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)!important}
.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,var(--gold-1),var(--gold-3));box-shadow:inset 0 2px 0 rgba(255,245,210,.6);animation:rise .7s cubic-bezier(.2,.9,.3,1.1) both}
.podium .p1 .block{height:110px;animation-delay:.3s}.podium .p2 .block{height:78px;filter:saturate(.3) brightness(1.05);animation-delay:.15s}.podium .p3 .block{height:56px;filter:sepia(.6) hue-rotate(-20deg) brightness(.85)}
@keyframes rise{from{transform:scaleY(0);transform-origin:bottom}}
.podium .nm{font-family:"Yeseva One",serif;font-size:1.15rem;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(--cream-dim);font-size:.95rem}
.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)}
.board-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:1rem;text-align:left}
.board-table td{padding:7px 6px;border-bottom:1px solid rgba(233,185,90,.16)}
.board-table td.n{text-align:right;font-family:"Yeseva One",serif;color:var(--gold-text)}
.board-table i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px}
.lobby-wrap{width:min(560px,100%);margin:auto}
.lobby-wrap .nsmr-lobby{background:linear-gradient(160deg,#2a1a12,#1a100b)}
.lobby-set{margin-top:10px;color:var(--gold-text);font-size:1rem}
.nsmr-status{z-index:70}

/* the raga picker */
.picker{text-align:left;padding:18px clamp(12px,3vw,22px) 16px;display:flex;flex-direction:column;max-height:min(86dvh,760px)}
.picker header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.picker header h2{flex:1;margin:0;font-size:1.5rem}
.picker .x{width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;background:rgba(0,0,0,.3);flex:none}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;flex:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{min-height:44px;padding:0 14px;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid rgba(233,185,90,.28);font-size:1rem;white-space:nowrap;flex:none}
.tabs button[aria-selected="true"]{background:var(--gold-1);color:var(--ink);border-color:var(--gold-1)}
.picker input[type=search]{flex:none;width:100%;min-height:44px;border-radius:999px;border:1px solid rgba(233,185,90,.3);background:rgba(0,0,0,.3);color:var(--cream);padding:0 16px;font:inherit;font-size:1rem;margin-bottom:8px}
.rlist{list-style:none;overflow:auto;overscroll-behavior:contain;min-height:0}
.rlist button{width:100%;display:flex;flex-direction:column;text-align:left;padding:9px 12px;border-radius:12px;min-height:52px;border:1px solid transparent}
.rlist button:hover{background:rgba(255,255,255,.05)}
.rlist button[aria-current="true"]{border-color:var(--gold-1);background:rgba(233,185,90,.13)}
.rlist .nm{font-family:"Yeseva One",serif;font-size:1.08rem}
.rlist .nt{font-size:.98rem;color:var(--cream-dim)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}