:root{
  --ink:#2a1d2e; --pearl:#fff8ee; --onyx:#2b2438; --lagoon:#19b3c8; --felt:#1d7a52; --mango:#ffb627; --coral:#ff5d8f;
  --panel:#fff8ee; --panel-text:#2a1d2e; --panel-edge:#2a1d2e; --muted:#6d5a72; --bg:#9fdcff;
  --font-ui:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --font-disp:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* light colours only, also when the phone is in dark mode (the game's look is the same day and night) */
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg);}
body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--panel-text);font-family:var(--font-ui);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
#app{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none;}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 58%,rgba(30,12,60,.26) 100%);}
button{font-family:inherit;touch-action:manipulation;cursor:pointer;color:inherit;}
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none;pointer-events:none}
button:focus-visible{outline:3px solid var(--mango);outline-offset:3px;}
[hidden]{display:none !important;}
svg{display:block}

/* outlined game text */
.ol{text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),0 4px 0 var(--ink);}
.ol3{text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2.2px 2.2px 0 var(--ink),-2.2px 2.2px 0 var(--ink),2.2px -2.2px 0 var(--ink),-2.2px -2.2px 0 var(--ink),0 6px 0 var(--ink);}

/* buttons */
.btn{font-weight:800;font-size:17px;line-height:1.2;color:var(--ink);background:var(--pearl);border:3px solid var(--ink);border-radius:16px;
  padding:11px 22px;box-shadow:0 5px 0 var(--ink);transition:transform .07s,box-shadow .07s;white-space:nowrap;}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink);}
.btn.primary{background:var(--mango);font-size:21px;padding:13px 38px;border-radius:20px;}
.btn.ghost{background:rgba(255,248,238,.9);}
.icon-btn{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--pearl);color:var(--ink);display:grid;place-items:center;padding:0;box-shadow:0 4px 0 var(--ink);}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);}
.icon-btn svg{width:22px;height:22px}
.icon-btn.big{width:52px;height:52px}
/* title sound switch: icon + ON/OFF text (the state is readable without relying on the icon) */
.icon-btn.snd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.icon-btn.snd svg{width:20px;height:20px}
.icon-btn.snd small{font-size:10px;font-weight:800;line-height:1;letter-spacing:.04em;margin-top:1px}
.icon-btn.snd.off{background:#d9d1dc}

/* screens */
.screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));}
.panel{background:var(--panel);color:var(--panel-text);border:3px solid var(--panel-edge);border-radius:26px;box-shadow:0 8px 0 var(--panel-edge);padding:22px 24px;max-width:min(560px,94vw);}
.panel h2{margin:0 0 12px;font-size:22px;font-weight:800;}
.col{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}

/* loading */
#loading{background:var(--bg);gap:14px;color:var(--ink);font-weight:800;}
.spin{width:54px;height:54px;border-radius:50%;border:4px solid var(--ink);background:linear-gradient(90deg,var(--pearl) 50%,var(--onyx) 50%);animation:spin 1s linear infinite;will-change:transform;}
@keyframes spin{to{transform:rotateY(360deg)}}
#loading p{margin:0}
#loading .err{max-width:320px;text-align:center;font-weight:500}

/* title */
#title{justify-content:space-between;padding-top:max(6vh,22px);padding-bottom:max(6vh,26px);}
.logo{margin:0;display:flex;gap:.08em;font-family:var(--font-disp);font-weight:400;font-size:clamp(28px,7.6vw,70px);line-height:1;perspective:600px;}
.logo span{width:1.34em;height:1.34em;border-radius:50%;display:grid;place-items:center;border:.09em solid var(--ink);box-shadow:0 .1em 0 var(--ink);
  background:var(--pearl);color:var(--ink);animation:discIn .7s cubic-bezier(.3,1.5,.5,1) both;}
.logo span.k{background:var(--onyx);color:var(--pearl);}
.logo span:nth-child(1){animation-delay:.05s}.logo span:nth-child(2){animation-delay:.12s}.logo span:nth-child(3){animation-delay:.19s}.logo span:nth-child(4){animation-delay:.26s}
.logo span:nth-child(5){animation-delay:.33s}.logo span:nth-child(6){animation-delay:.40s}.logo span:nth-child(7){animation-delay:.47s}.logo span:nth-child(8){animation-delay:.54s}
@keyframes discIn{0%{transform:translateY(-.6em) rotateX(180deg);opacity:0}60%{opacity:1}100%{transform:none}}
.sub{margin:.7em 0 0;text-align:center;font-weight:800;font-size:clamp(14px,2.2vw,18px);color:var(--pearl);letter-spacing:.06em;}
.title-top{display:flex;flex-direction:column;align-items:center}
.title-actions{display:flex;flex-direction:column;align-items:center;gap:16px}

/* select */
#select{justify-content:flex-end;padding-bottom:max(14px,env(safe-area-inset-bottom));}
#select::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,40,24,.55) 0%,rgba(14,40,24,.18) 30%,rgba(14,40,24,0) 50%)}
.sel-top{position:absolute;top:12px;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:12px}
.sel-top h2{margin:0;font-size:18px;font-weight:800;color:var(--pearl)}
.arrow{position:absolute;top:36%;width:52px;height:52px;border-radius:50%;border:3px solid var(--ink);background:var(--pearl);color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 0 var(--ink);padding:0}
.arrow:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.arrow svg{width:24px;height:24px}
.arrow.l{left:max(12px,env(safe-area-inset-left))}.arrow.r{right:max(12px,env(safe-area-inset-right))}
.sel-panel{width:min(520px,94vw);display:flex;flex-direction:column;gap:10px;padding:16px 18px}
.sel-head{display:flex;align-items:baseline;gap:10px}
#selEn{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.sel-head h3{margin:0;font-family:var(--font-disp);font-weight:400;font-size:30px;line-height:1}
.sel-head span{font-weight:800;color:var(--muted)}
.stats{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;margin:0;align-items:center;font-size:14px;font-weight:800}
.stats dt{color:var(--muted)}
.stats dd{margin:0;display:flex;gap:4px}
.pip{width:13px;height:13px;border-radius:50%;border:2px solid var(--panel-edge);background:transparent}
.pip.on{background:var(--mango)}
.sp{border-top:2px dashed color-mix(in srgb,var(--panel-text) 25%,transparent);padding-top:8px}
.sp b{font-size:16px}
.sp p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--muted);font-weight:500}
.diff{display:flex;gap:6px;background:color-mix(in srgb,var(--panel-text) 10%,transparent);padding:4px;border-radius:14px}
.diff button{flex:1;border:0;background:transparent;font-weight:800;font-size:15px;padding:8px 4px;border-radius:10px;color:var(--panel-text)}
.diff button[aria-checked="true"]{background:var(--ink);color:var(--pearl)}
#selGo{align-self:stretch}
@media (orientation:landscape){
  #select{align-items:flex-end;justify-content:center;padding-right:max(24px,env(safe-area-inset-right))}
  .sel-panel{width:min(420px,44vw);max-height:calc(100% - 70px);overflow:auto}
  .arrow.r{right:calc(min(420px,44vw) + 44px)}
}
@media (orientation:landscape) and (max-height:540px){
  .sel-panel{padding:12px 14px;gap:7px}
  .sel-head h3{font-size:24px}
  .btn.primary{font-size:18px;padding:10px 24px}
}

/* howto */
.how{max-width:min(600px,94vw);max-height:calc(100% - 24px);overflow:auto}
.how ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:12px}
.how li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start}
.how li svg{width:52px;height:52px}
.how b{font-size:16px}
.how p{margin:2px 0 0;font-size:14px;line-height:1.6;font-weight:500}
.keys{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 14px;font-weight:500}
.keys kbd{font-family:inherit;font-weight:800;border:2px solid currentColor;border-radius:6px;padding:0 5px;margin:0 2px}


@media (orientation:landscape) and (max-height:540px){
  .how{max-width:94vw;padding:12px 16px}
  .how h2{margin-bottom:6px;font-size:18px}
  .how ul{flex-direction:row;gap:12px;margin-bottom:8px}
  .how li{grid-template-columns:1fr;gap:4px;flex:1}
  .how li svg{width:40px;height:40px}
  .how p{font-size:12px;line-height:1.5}
  .keys{font-size:11px;margin-bottom:8px}
}
#btnA{--chg:0}
#btnA::before{content:'';position:absolute;inset:-7px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--chgc,#ffd23f) calc(var(--chg) * 1turn),transparent 0);-webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);mask:radial-gradient(circle,transparent 61%,#000 62%)}
/* HUD */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
.hud-top{position:absolute;top:8px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.bug{position:relative;display:flex;align-items:center;gap:7px;padding:5px 7px 11px;background:rgba(16,44,28,.82);border:3px solid var(--ink);border-radius:22px;box-shadow:0 4px 0 var(--ink)}
.face{--g:0;--gc:var(--mango);position:relative;width:46px;height:46px;flex:none;border-radius:50%;padding:4px;
  background:conic-gradient(var(--gc) calc(var(--g)*1%),rgba(255,255,255,.14) 0)}
.face img{width:100%;height:100%;border-radius:50%;display:block;border:2px solid var(--ink);background:#bfe8ff}
.face.full{animation:glow .7s ease-in-out infinite alternate}
.face.full::after{content:"SP";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-family:var(--font-ui);font-weight:800;font-size:11px;line-height:1.2;
  background:var(--mango);color:var(--ink);border:2px solid var(--ink);border-radius:7px;padding:0 4px}
@keyframes glow{from{filter:drop-shadow(0 0 0 var(--mango))}to{filter:drop-shadow(0 0 7px var(--mango))}}
.score{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);font-family:var(--font-disp);font-size:20px;line-height:1}
.score.p{background:var(--pearl);color:var(--ink)}
.score.c{background:var(--onyx);color:var(--pearl)}
.score.bump{animation:cbump .25s}
@keyframes cbump{50%{transform:scale(1.25)}}
#timer{min-width:56px;text-align:center;font-family:var(--font-disp);font-size:21px;line-height:1;color:var(--pearl);font-variant-numeric:tabular-nums}
#timer.hurry{color:var(--mango);animation:cbump .5s infinite}
#timer{transition:opacity .25s}
#timer.stop{opacity:.45}
.disc-ico{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);background:var(--pearl);flex:none;display:inline-block}
.disc-ico.onyx{background:var(--onyx)}
#share{position:absolute;left:16px;right:16px;bottom:3px;height:5px;border-radius:4px;background:var(--onyx);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
#share i{display:block;height:100%;width:50%;background:var(--pearl);transition:width .3s}
#rally{font-weight:800;font-size:13px;color:var(--mango);height:0;opacity:0;transition:opacity .2s;white-space:nowrap}
#rally.on{height:auto;opacity:1}
#rally.pop{animation:cbump .3s}
#pauseBtn{position:absolute;top:10px;right:max(10px,env(safe-area-inset-right));pointer-events:auto;width:36px;height:36px;box-shadow:0 3px 0 var(--ink)}
#pauseBtn svg{width:15px;height:15px}
.lb{position:absolute;left:0;right:0;height:11vh;background:#0b0710;transition:transform .45s cubic-bezier(.6,0,.3,1);pointer-events:none;display:flex;align-items:center;justify-content:center}
#lbT{top:0;transform:translateY(-102%)}
#lbB{bottom:0;transform:translateY(102%)}
#app.cine #lbT,#app.cine #lbB{transform:none}
#lbName{display:flex;flex-direction:column;align-items:center;line-height:1.1}
#lbName b{font-family:var(--font-disp);font-weight:400;font-size:clamp(22px,5vh,40px);color:var(--pearl);letter-spacing:.08em}
#lbName small{font-family:var(--font-ui);font-weight:800;font-size:clamp(10px,1.8vh,13px);letter-spacing:.3em;color:rgba(255,248,238,.7);margin-top:2px}
#lbName.c b{color:#c9b8ff}
.hud-top,#pauseBtn{transition:opacity .3s}
#app.cine .hud-top,#app.cine #pauseBtn,#app.cine #touch{opacity:0}
#app.cine #banner{top:70%}
#tutCard{position:absolute;top:10px;left:max(10px,env(safe-area-inset-left));width:auto;max-width:min(26vw,300px);text-align:left;pointer-events:none;
  background:var(--panel);color:var(--panel-text);border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);padding:6px 11px}
#tutCard small{display:block;font-weight:800;font-size:12px;color:var(--muted)}
#tutCard b{display:block;font-size:13px;line-height:1.5}
@media (orientation:portrait){#tutCard{top:84px;left:50%;transform:translateX(-50%);max-width:92vw;text-align:center}}
#tutCard.ok{animation:tutok .5s}
@keyframes tutok{30%{scale:1.08;background:#e8ffd9}}
.td-p{margin:0 0 16px;font-weight:500;line-height:1.6}
#focusFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .12s}
#focusFx.on{opacity:1}
.pc-note{margin:6px 0 0;font-size:13px;font-weight:800;color:var(--pearl);text-align:center;letter-spacing:.04em}
/* title footer credit */
.credit{margin:-4px 0 0;padding:3px 12px;border-radius:999px;background:rgba(20,14,40,.42);color:var(--pearl);font-size:12px;font-weight:800;line-height:1.6;letter-spacing:.04em;text-align:center}
.credit a{color:inherit;text-underline-offset:3px;text-decoration-color:rgba(255,248,238,.6);white-space:nowrap} /* a narrow screen breaks between links, never inside one */
@media (max-width:359px){.credit{font-size:11px;letter-spacing:0;padding:3px 10px}}
.credit a:focus-visible{outline:2px solid var(--mango);outline-offset:2px;border-radius:4px}
#prompt{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:22px;font-weight:800;font-size:15px;line-height:1.4;color:var(--pearl);white-space:nowrap;max-width:92vw;text-align:center;opacity:0;transition:opacity .3s}
@media (orientation:portrait){#app.touch #prompt{bottom:200px}}
#prompt.on{opacity:1}
/* PC key guide at the bottom of the match screen; the SP item lights up when the gauge is full */
#keyGuide{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;white-space:nowrap;pointer-events:none;transition:opacity .3s}
#keyGuide span{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:rgba(20,14,40,.55);color:var(--pearl);font-size:12px;font-weight:800;line-height:1.4}
#keyGuide kbd{font-family:inherit;font-weight:800;font-size:11px;line-height:1.3;border:2px solid rgba(255,248,238,.75);border-radius:6px;padding:0 5px}
#keyGuide .kg-sp.ready{background:var(--mango);color:var(--ink);animation:glow .6s ease-in-out infinite alternate}
#keyGuide .kg-sp.ready kbd{border-color:var(--ink)}
#app.cine #keyGuide{opacity:0}
#app.pc #prompt{bottom:52px}
#keyGuide{max-width:calc(100% - 16px)}
@media (max-width:1100px){#keyGuide{gap:4px}#keyGuide span{font-size:11px;padding:3px 8px}#keyGuide .kg-esc{display:none}}
@media (max-width:820px){#keyGuide .kg-move{display:none}}
#banner{position:absolute;left:50%;top:38%;font-family:var(--font-disp);font-size:clamp(40px,9vw,92px);line-height:1;color:var(--pearl);white-space:nowrap;opacity:0;transform:translate(-50%,-50%)}
#banner.p{color:var(--pearl)} #banner.c{color:#b8a8ff} #banner.warn{color:var(--mango)}
#banner.show{animation:bannerPop 1.3s ease-out forwards}
@keyframes bannerPop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-8deg);opacity:0}14%{transform:translate(-50%,-50%) scale(1.18) rotate(2deg);opacity:1}24%{transform:translate(-50%,-50%) scale(1) rotate(0)}78%{opacity:1}100%{transform:translate(-50%,-62%) scale(1);opacity:0}}
#cutin{position:absolute;left:-12%;right:-12%;top:24%;height:clamp(130px,30vh,210px);transform:skewY(-6deg) translateX(-110%);overflow:hidden;opacity:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ci,#ff5d8f) 62%,#fff) 0%,var(--ci,#ff5d8f) 46%,color-mix(in srgb,var(--ci,#ff5d8f) 62%,#1a0f2a) 100%);
  border-top:5px solid var(--ink);border-bottom:5px solid var(--ink)}
.ci-rays{position:absolute;inset:-80%;transform-origin:44% 50%;background:repeating-conic-gradient(from 0deg at 44% 50%,rgba(255,255,255,.24) 0 3deg,transparent 3deg 11deg);animation:rays 2.6s linear infinite}
.ci-rays.baked{background:none} /* game.js drew the same rays into a canvas once (no gradient painting at each special) */
.ci-rays canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes rays{to{transform:rotate(360deg)}}
.ci-streaks{position:absolute;inset:0}
/* six rows of light streaks; each row slides by whole tiles with transform, so the compositor moves them (same speeds as before) */
.ci-streaks i{position:absolute;left:0;width:calc(100% + var(--d));height:var(--h);top:calc((100% - var(--h)) * var(--y));background-image:linear-gradient(90deg,transparent,rgba(255,255,255,var(--a)) 75%,transparent);background-repeat:repeat-x;background-size:var(--w) var(--h);background-position:var(--x) 0;animation:streak .42s linear infinite;will-change:transform}
.ci-streaks i:nth-child(1){--w:280px;--h:4px;--x:0px;--y:.14;--d:280px;--a:.95}
.ci-streaks i:nth-child(2){--w:190px;--h:2px;--x:80px;--y:.30;--d:380px;--a:.6}
.ci-streaks i:nth-child(3){--w:360px;--h:6px;--x:30px;--y:.47;--d:360px;--a:.85}
.ci-streaks i:nth-child(4){--w:150px;--h:2px;--x:120px;--y:.63;--d:300px;--a:.5}
.ci-streaks i:nth-child(5){--w:240px;--h:3px;--x:60px;--y:.78;--d:480px;--a:.9}
.ci-streaks i:nth-child(6){--w:320px;--h:3px;--x:10px;--y:.90;--d:320px;--a:.55}
@keyframes streak{to{transform:translateX(calc(-1 * var(--d)))}}
.ci-glow{position:absolute;left:14%;top:-40%;width:36%;height:180%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0))}
#cutChar{position:absolute;left:4%;top:calc(24% - 13vh);height:43vh;min-height:190px;max-height:320px;aspect-ratio:1.1;opacity:0;pointer-events:none;transform:translateX(-130%)}
#cutChar.show{animation:cutc 1.15s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes cutc{0%{transform:translateX(-130%);opacity:1}18%{transform:translateX(0)}80%{transform:translateX(5%);opacity:1}100%{transform:translateX(170%);opacity:1}}
@media (orientation:portrait){#cutChar{left:0;height:22vh;min-height:150px;top:calc(24% - 6vh)}#cutin span{right:5%;font-size:clamp(24px,7.5vw,40px)}}
#cutCanvas{position:absolute;left:-12px;top:-12px;width:calc(100% + 24px);height:calc(100% + 24px);display:block} /* rim + drop shadow are drawn in the canvas (game.js buildCut); the 12px margin (CUT_PAD) is where they spill out, like the old CSS filters did */
#frost{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 22vmin 6vmin rgba(170,235,255,.85);background:radial-gradient(ellipse at center,transparent 50%,rgba(210,245,255,.35) 100%)}
#frost.show{animation:frost 1.4s ease-out}
@keyframes frost{0%{opacity:1}100%{opacity:0}}
#cutin img{position:absolute;left:19%;top:50%;height:88%;aspect-ratio:1;transform:translateY(-50%) skewY(6deg);border-radius:50%;display:none}
#cutin.noGL img{display:block}
#cutin span{position:absolute;right:13%;top:50%;font-family:var(--font-disp);font-size:clamp(30px,6.4vw,66px);color:var(--pearl);white-space:nowrap;transform:translateY(-50%) skewY(6deg)}
#cutin.show span{animation:slam .5s cubic-bezier(.2,1.4,.4,1) .12s both}
@keyframes slam{0%{transform:translateY(-50%) skewY(6deg) scale(2.4);opacity:0}100%{transform:translateY(-50%) skewY(6deg) scale(1);opacity:1}}
#flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,var(--fc,#fff) 100%);opacity:0;pointer-events:none}
#flash.tint{mix-blend-mode:screen} /* coloured flashes only: a white flash looks the same without the blend, so the cut-in skips it */
#flash.show{animation:flash .38s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
#vignette{transition:box-shadow .3s ease}
#app.aimslow #vignette{box-shadow:inset 0 0 18vmin 4vmin rgba(18,40,110,.55)}
#cutin.show{animation:cut 1.15s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes cut{0%{transform:skewY(-6deg) translateX(-110%);opacity:1}18%{transform:skewY(-6deg) translateX(0)}80%{transform:skewY(-6deg) translateX(3%);opacity:1}100%{transform:skewY(-6deg) translateX(110%);opacity:1}}
#labels{position:absolute;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.flt{position:absolute;left:0;top:0;font-family:var(--font-disp);font-size:22px;color:var(--pearl);white-space:nowrap;will-change:transform}
.flt.q-perfect{color:var(--mango);font-size:30px}.flt.q-great{color:#9ff5ff}.flt.q-good{font-size:18px}.flt.q-lob,.flt.lab{font-family:var(--font-ui);font-weight:800;font-size:16px}
.flt.big{font-size:32px;color:var(--mango)}
.flt.ump{font-family:var(--font-ui);font-weight:800;font-size:14px;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:3px 10px;text-shadow:none}
.flt.ump::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
#aimTag{position:absolute;left:0;top:0;pointer-events:none;text-align:center;opacity:0;transition:opacity .15s;will-change:transform}
#aimTag.on{opacity:1}
#aimTag b{display:block;font-family:var(--font-disp);font-weight:400;font-size:30px;line-height:1;color:var(--mango)}
#aimTag small{display:block;font-weight:800;font-size:12px;color:var(--pearl);white-space:nowrap;margin-top:2px}
#aimTag i{display:none}

/* touch controls */
#touch{position:absolute;inset:0;z-index:12;pointer-events:none}
#stickZone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:auto;touch-action:none}
#stickBase{position:absolute;left:max(34px,env(safe-area-inset-left));bottom:34px;width:118px;height:118px;border-radius:50%;
  border:3px solid rgba(42,29,46,.55);background:rgba(255,248,238,.22);opacity:.7}
#stickBase.on{bottom:auto;margin:-59px 0 0 -59px;opacity:1}
#stickKnob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:var(--pearl);border:3px solid var(--ink)}
.pad{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:22px;width:176px;height:170px}
.tbtn{position:absolute;pointer-events:auto;border-radius:50%;border:4px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;color:var(--ink);box-shadow:0 6px 0 var(--ink);padding:0;touch-action:none}
.tbtn.down{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
#btnA{right:0;bottom:0;width:96px;height:96px;background:var(--coral);color:var(--pearl);font-size:14px}
#btnA svg{width:34px;height:34px}
#btnSP{--g:0;right:104px;bottom:58px;width:64px;height:64px;font-size:16px;color:var(--pearl);
  background:conic-gradient(var(--mango) calc(var(--g)*1%),#6a5b73 0)}
#btnSP.full{color:var(--ink);animation:glow .6s ease-in-out infinite alternate}

/* pause / result */
@media (orientation:landscape){#result{align-items:flex-end;padding-right:max(24px,env(safe-area-inset-right))}}
@media (orientation:portrait){#result{justify-content:flex-end;padding-bottom:max(24px,env(safe-area-inset-bottom))}}
#pause,#result{background:rgba(20,14,40,.35)}
.opts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chip{border:2px solid var(--panel-edge);background:transparent;color:var(--panel-text);border-radius:12px;padding:6px 12px;font-weight:800;font-size:14px}
.res{text-align:center;min-width:min(420px,92vw)}
.res h2{font-family:var(--font-disp);font-weight:400;font-size:48px;margin:0 0 8px;line-height:1.1}
.res-score{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-disp);font-size:44px;line-height:1;margin-bottom:12px}
.res-score .disc-ico{width:30px;height:30px}
.res-stats{display:grid;grid-template-columns:1fr auto 1fr;gap:4px 14px;margin:0 auto 18px;max-width:320px;font-weight:800;font-size:15px}
.res-stats dt{grid-column:2;color:var(--muted);font-size:13px;text-align:center}
.res-stats dd{margin:0}
.res-stats dd.pv{grid-column:1;grid-row:var(--r);text-align:right}
.res-stats dd.cv{grid-column:3;grid-row:var(--r);text-align:left}
.res-stats dt{grid-row:var(--r)}
@media (orientation:landscape) and (max-height:540px){
  .res h2{font-size:34px}.res-score{font-size:34px;margin-bottom:8px}.res-stats{margin-bottom:10px}
  .panel{padding:14px 18px}
  .face{width:42px;height:42px}.score{width:38px;height:38px;font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  .logo span,#banner.show,#cutin.show,.score.bump,.face.full,#btnSP.full{animation-duration:.01s !important}
}

/* online (lobby, consent) */
#online{background:rgba(20,14,40,.35)}
.net{width:min(520px,94vw);max-height:calc(100% - 24px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.net>*,#netSetup>*,#netLobby>*{flex-shrink:0} /* on a short phone screen the panel scrolls; nothing gets squashed (the status line used to shrink under the back button) */
.net h2{margin:0;text-align:center}
#netSetup,#netLobby{display:flex;flex-direction:column;gap:10px}
#netSetup[hidden],#netLobby[hidden]{display:none}
.net input{font:inherit;font-weight:800;font-size:17px;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;min-width:0;
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.net input:focus-visible{outline:3px solid var(--mango);outline-offset:2px}
.net-field{display:flex;align-items:center;gap:10px;font-weight:800}
.net-field input{flex:1}
.net-or{margin:4px 0 0;text-align:center;font-size:13px;font-weight:800;color:var(--muted)}
.net-join{display:flex;gap:8px}
.net-join input{flex:1;letter-spacing:.2em;text-transform:uppercase}
.net-code{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.net-code span{font-size:13px;font-weight:800;color:var(--muted)}
.net-code b{font-family:var(--font-disp);font-weight:400;font-size:30px;letter-spacing:.14em}
.net-players{display:flex;align-items:center;justify-content:center;gap:10px}
.net-p{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.net-p img{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:#bfe8ff}
.net-p b{font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.net-p small{font-size:12px;font-weight:800;color:var(--muted);min-height:1.2em}
.net-vs{font-family:var(--font-disp);font-size:20px}
.net-chars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.net-chars button{display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid var(--panel-edge);border-radius:14px;background:transparent;color:var(--panel-text);padding:6px 2px;font-weight:800;font-size:12px}
.net-chars button img{width:44px;height:44px;border-radius:50%;background:#bfe8ff}
.net-chars button[aria-checked="true"]{background:var(--mango);color:var(--ink);border-color:var(--ink)}
.net-status{margin:0;min-height:1.5em;line-height:1.5;text-align:center;font-weight:800;font-size:14px;white-space:pre-line} /* a \n in the message breaks between sentences, not inside a word */
/* waiting: the loading screen's flipping stone, small, before the text */
.net-status.wait::before{content:"";display:inline-block;width:14px;height:14px;margin:0 8px -2px 0;border-radius:50%;border:2px solid var(--panel-edge);background:linear-gradient(90deg,var(--pearl) 50%,var(--onyx) 50%);animation:spin 1s linear infinite}
@media (prefers-reduced-motion: reduce){.net-status.wait::before{animation-duration:3s}}
.net-note{margin:0;font-size:12px;line-height:1.6;color:var(--muted);font-weight:500;text-align:center}
@media (max-height:640px){ /* short phone screens (browser bars showing): tighter, so the back button stays in view */
  .net{gap:8px;padding-top:14px;padding-bottom:14px} #netSetup,#netLobby{gap:6px} .net h2{font-size:20px}
  .net-code b{font-size:26px} .net-p img{width:52px;height:52px} .net-chars button{padding:4px 2px} .net-chars button img{width:36px;height:36px}
}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 5px 0 var(--ink)}
#netConsent{z-index:30;background:rgba(20,14,40,.55)}
.net-consent{width:min(480px,94vw)}
.net-consent p{margin:0 0 10px;font-size:14px;line-height:1.7;font-weight:500}
.net-check{display:flex;align-items:center;gap:8px;margin:6px 0 14px;font-weight:800}
.net-check input{width:20px;height:20px}
/* the guest (black) sees their own face, count and stones on the left */
#app.mirror .bug{flex-direction:row-reverse}
#app.mirror #share{transform:scaleX(-1)}
#app.mirror .res-score{flex-direction:row-reverse}
#app.mirror .res-stats dd.pv{grid-column:3;text-align:left}
#app.mirror .res-stats dd.cv{grid-column:1;text-align:right}