/* Gameplay-only skin. Geometry, camera and input behavior live in game.html. */
:root {
  --play-night: oklch(0.1 0.025 265);
  --play-glass: oklch(0.16 0.035 250);
  --play-metal: oklch(0.33 0.035 250);
  --play-ink: oklch(0.96 0.025 215);
  --play-soft: oklch(0.73 0.06 235);
  --play-cyan: oklch(0.85 0.16 205);
  --play-blue: oklch(0.62 0.2 255);
  --play-gold: oklch(0.85 0.17 85);
  --play-orange: oklch(0.76 0.18 55);
  --play-violet: oklch(0.72 0.2 300);
  --play-shadow: 0 4px 10px color-mix(in oklch, var(--play-night) 90%, transparent);
  --play-world: url('/__l5e/assets-v1/242f30d3-bc86-40b1-bd4f-022a0856d95e/gameplay-cosmos.jpg');
  --play-safe-top: env(safe-area-inset-top, 0px);
  --play-safe-bottom: env(safe-area-inset-bottom, 0px);
}
html, body { height:100dvh; background:var(--play-night); overscroll-behavior:none; }
#app { position:fixed; inset:0; overflow:hidden; background:var(--play-world) center / 100% 100% no-repeat var(--play-night); }
#app::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 42%, color-mix(in oklch,var(--play-night) 48%,transparent) 0%,color-mix(in oklch,var(--play-night) 25%,transparent) 43%,transparent 76%); }
#app, #app * { letter-spacing:0; }
#gc { background:transparent; }
#hud { top:var(--play-safe-top); height:82px; padding:8px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:30px 32px; gap:5px 8px; align-items:center; background:linear-gradient(var(--play-night),transparent); }
#hud .logo { font-size:19px; color:var(--play-ink); text-shadow:0 0 8px var(--play-cyan),2px 1px 0 var(--play-blue); min-width:0; }
#hud .stats { display:contents; }
#hud .stat { grid-row:2; min-width:0; }
#hud .stat .l { font:600 10px 'Rajdhani',sans-serif; color:var(--play-soft); line-height:1.2; }
#hud .stat .v, #hud #mv { font:700 15px 'Orbitron',monospace !important; line-height:1.25; }
#hud { grid-template-columns:1.3fr 1fr .75fr .75fr; }
#hud .logo { grid-column:1 / 4; }
#app #menubtn { pointer-events:auto; white-space:nowrap; grid-column:4; grid-row:1; justify-self:end; min-height:34px; padding:5px 10px; font:700 11px 'Rajdhani',sans-serif; color:var(--play-violet); border:3px double currentColor; border-radius:5px; background:var(--play-glass); box-shadow:inset 0 0 8px color-mix(in oklch,currentColor 22%,transparent),0 0 6px color-mix(in oklch,currentColor 30%,transparent); }
#app #installbtn { position:fixed; top:calc(151px + var(--play-safe-top)); left:10px; font-size:9px; }
#app #audiopanel { position:fixed; z-index:25; display:flex; flex-direction:column; align-items:flex-start; pointer-events:auto; top:calc(88px + var(--play-safe-top)); left:10px; gap:6px; }
#app #mutebtn, #app #ingameMusicSel { background:color-mix(in oklch,var(--play-glass) 90%,transparent); border:1px solid var(--play-cyan); color:var(--play-cyan); border-radius:4px; box-shadow:inset 0 0 9px color-mix(in oklch,var(--play-blue) 30%,transparent),0 0 5px color-mix(in oklch,var(--play-cyan) 20%,transparent); }
#app #mutebtn { width:42px; height:34px; font-size:17px; padding:0; }
#app #ingameMusicSel { width:106px; height:30px; font:700 11px 'Rajdhani',sans-serif; padding:3px 6px; }
#plabel { top:calc(89px + var(--play-safe-top)); font:600 11px 'Rajdhani',sans-serif; padding:5px 9px; max-width:112px; overflow:hidden; text-overflow:ellipsis; border:1px solid var(--play-metal); background:color-mix(in oklch,var(--play-night) 85%,transparent); border-radius:3px; }
#cpanel { top:calc(89px + var(--play-safe-top)); right:9px; gap:4px; width:82px; }
.nlabel { font:600 10px 'Rajdhani',sans-serif; line-height:1; color:var(--play-cyan); }
.nlabel[data-i18n=saved] { color:var(--play-gold); }
#nc, #hc { width:82px; height:59px; border-radius:5px; border:1px solid var(--play-cyan); background:color-mix(in oklch,var(--play-night) 88%,transparent); box-shadow:inset 0 0 12px color-mix(in oklch,var(--play-blue) 18%,transparent),0 0 6px color-mix(in oklch,var(--play-cyan) 22%,transparent); }
#hc { height:52px; border-color:var(--play-gold); box-shadow:inset 0 0 10px color-mix(in oklch,var(--play-gold) 10%,transparent),0 0 5px color-mix(in oklch,var(--play-gold) 22%,transparent); }
#rotpanel { right:10px; bottom:calc(12px + var(--play-safe-bottom)); width:164px; gap:7px; }
#rotdpad { display:grid; grid-template-columns:48px 56px 48px; grid-template-rows:44px 52px 44px; gap:3px; justify-content:center; position:relative; border-radius:50%; background:radial-gradient(circle,var(--play-metal),var(--play-glass) 45%,transparent 71%); }
#dpadmid { display:contents; }
#rotUpBtn { grid-column:2; grid-row:1; }
#rotDownBtn { grid-column:2; grid-row:3; }
#rotLeftBtn { grid-column:1; grid-row:2; }
#rotRightBtn { grid-column:3; grid-row:2; }
#app .dbtn, #app #chiralbtn, #app #holdbtn, #app #softbtn, #app #dpadcenter {
  --control-light:var(--play-cyan); position:relative; margin:0; padding:0 5px; min-width:0; width:100%; height:44px; font:700 13px 'Rajdhani',sans-serif;
  color:var(--control-light); border:4px double var(--control-light); border-radius:7px; cursor:pointer;
  background:linear-gradient(145deg,color-mix(in oklch,var(--play-metal) 70%,var(--control-light)),var(--play-glass) 18%,var(--play-night) 65%,color-mix(in oklch,var(--control-light) 22%,var(--play-metal)));
  box-shadow:inset 0 1px 0 var(--play-ink),inset 0 0 11px color-mix(in oklch,var(--control-light) 18%,transparent),0 0 5px color-mix(in oklch,var(--control-light) 38%,transparent),var(--play-shadow);
  text-shadow:0 0 7px color-mix(in oklch,var(--control-light) 65%,transparent); transition:transform .12s,box-shadow .12s,filter .12s; touch-action:none;
}
#app .dbtn { font-size:25px; height:100%; }
#app .dbtn-up, #app .dbtn-down { --control-light:var(--play-orange); }
#app #chiralbtn, #app #holdbtn { --control-light:var(--play-gold); }
#app #chiralbtn { font-size:13px; }
#app #holdbtn { font-size:14px; }
#app #softbtn { font-size:14px; }
#app #chiralbtn::before, #app #holdbtn::before, #app #softbtn::before { content:''; position:absolute; inset:3px; border:1px solid color-mix(in oklch,var(--control-light) 25%,transparent); border-radius:3px; pointer-events:none; }
#app #dpadcenter { grid-column:2; grid-row:2; height:56px; width:56px; align-self:center; z-index:1; border-radius:50%; border:4px double var(--play-cyan); outline:2px solid var(--play-metal); outline-offset:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; line-height:1; }
#dpadcenter .dial-symbol { font:32px 'Rajdhani',sans-serif; line-height:.9; }
#app button:focus-visible, #app select:focus-visible { outline:2px solid var(--play-ink); outline-offset:3px; }
#app .dbtn:active, #app #dpadcenter:active, #app #chiralbtn:active, #app #holdbtn:active, #app #softbtn:active { transform:translateY(2px) scale(.97); filter:brightness(1.3); }
#app button:disabled { opacity:.35; filter:saturate(.4); cursor:not-allowed; box-shadow:none; }
#app #holdbtn:disabled.control-pulse { opacity:.8; filter:none; }
#app .control-pulse, #app #softbtn.dropping { box-shadow:inset 0 0 14px color-mix(in oklch,var(--control-light) 40%,transparent),0 0 13px color-mix(in oklch,var(--control-light) 60%,transparent); }
#dpadcenter.control-pulse .dial-symbol { animation:dial-pulse .28s ease-out; }
#holdbtn.control-pulse::before { animation:capture-pulse .3s ease-out; }
#softbtn.dropping::before { animation:energy-drop .55s ease-out infinite; }
#jmove { width:136px; height:136px; left:12px; bottom:calc(16px + var(--play-safe-bottom)); border:4px double var(--play-cyan); outline:2px solid var(--play-metal); outline-offset:4px; background:radial-gradient(circle,var(--play-glass) 40%,var(--play-night) 55%,var(--play-blue) 57%,var(--play-glass) 60%,var(--play-night) 69%,var(--play-metal) 72%); box-shadow:inset 0 0 18px var(--play-blue),0 0 10px color-mix(in oklch,var(--play-cyan) 30%,transparent),var(--play-shadow); }
#jmove::before { content:''; position:absolute; inset:7px; border:1px dashed color-mix(in oklch,var(--play-cyan) 55%,transparent); border-radius:50%; pointer-events:none; }
#jmove::after { content:'▴'; position:absolute; top:3px; left:calc(50% - 5px); font-size:15px; color:var(--play-cyan); text-shadow:0 0 5px currentColor; pointer-events:none; }
#jmove .jt { width:64px; height:64px; background:radial-gradient(circle at 35% 24%,var(--play-ink),var(--play-cyan) 10%,var(--play-blue) 35%,var(--play-glass) 65%,var(--play-night) 78%); border:2px solid var(--play-cyan); box-shadow:inset 0 0 8px var(--play-cyan),0 0 12px color-mix(in oklch,var(--play-cyan) 50%,transparent),var(--play-shadow); }
#jmove.active .jt, #jmove.pulse .jt { border-color:var(--play-ink); box-shadow:0 0 18px var(--play-cyan),inset 0 0 10px var(--play-cyan); }
.jswrap > .jslabel { position:fixed; left:14px; top:auto; transform:none; bottom:calc(167px + var(--play-safe-bottom)); font:600 10px 'Rajdhani',sans-serif; color:var(--play-soft); }
#logbox { left:12px; bottom:calc(184px + var(--play-safe-bottom)); width:calc(100% - 202px); font:600 11px/1.6 'Rajdhani',sans-serif; text-shadow:0 1px 3px var(--play-night); }
#hint { display:none; }
@keyframes dial-pulse { to { transform:rotate(90deg); } }
@keyframes capture-pulse { from { transform:scale(.8); opacity:.2; } to { transform:scale(1); opacity:1; } }
@keyframes energy-drop { from { transform:translateY(-2px); opacity:.2; } to { transform:translateY(2px); opacity:.8; } }
@media (min-width:700px) {
  #app { background-size:cover; }
  #hud { height:64px; display:flex; gap:32px; padding:10px 24px; justify-content:space-between; }
  #hud .logo { font-size:27px; }
  #hud .stats { display:flex; gap:25px; }
  #hud .stat .l { font-size:12px; }
  #hud .stat .v, #hud #mv { font-size:19px !important; }
  #app #menubtn { min-width:90px; height:42px; font-size:15px; }
  #app #audiopanel { top:76px; left:24px; }
  #plabel { top:80px; font-size:15px; max-width:200px; }
  #cpanel { top:82px; right:24px; width:112px; }
  #nc { width:112px; height:89px; } #hc { width:112px; height:74px; }
  .nlabel { font-size:12px; }
  #rotpanel { right:24px; bottom:24px; width:190px; gap:10px; }
  #app #chiralbtn, #app #holdbtn, #app #softbtn { height:48px; font-size:16px; }
  #jmove { left:30px; bottom:30px; width:154px; height:154px; }
  #logbox { left:30px; bottom:215px; font-size:14px; }
  .jswrap > .jslabel { left:30px; bottom:195px; font-size:12px; }
}
@media (max-height:720px) and (max-width:699px) {
  #rotpanel { gap:5px; }
  #rotdpad { grid-template-rows:40px 46px 40px; }
  #app #chiralbtn, #app #holdbtn, #app #softbtn { height:40px; }
  #jmove { width:120px; height:120px; }
  .jswrap > .jslabel { bottom:150px; }
  #logbox { bottom:165px; }
  #cpanel { width:74px; } #nc { width:74px; height:52px; } #hc { width:74px; height:46px; }
}
@media (prefers-reduced-motion:reduce) { #app *, #app *::before { animation:none !important; transition:none !important; } }
/* ── Endgame card ─────────────────────────────────────────── */
#overlay.game-over { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0; gap:0;
  background:linear-gradient(color-mix(in oklch,var(--play-night) 72%,transparent),color-mix(in oklch,var(--play-night) 88%,transparent)),var(--play-world) center/cover fixed, var(--play-night);
  animation:eg-dim .4s ease-out; }
.eg { --eg-gold:oklch(0.86 0.16 85); --eg-amber:oklch(0.74 0.18 55); --eg-red:oklch(0.64 0.24 25); --eg-cyan:oklch(0.85 0.15 205);
  --eg-violet:oklch(0.62 0.25 300); --eg-magenta:oklch(0.68 0.28 340); --eg-green:oklch(0.84 0.2 160); --eg-ink:oklch(0.97 0.02 230);
  --eg-soft:oklch(0.78 0.06 250); --eg-glass:oklch(0.17 0.05 275 / .78); --eg-line:oklch(0.75 0.14 225 / .55);
  min-height:100%; display:flex; justify-content:center; font-family:'Rajdhani',sans-serif; color:var(--eg-ink);
  padding:calc(14px + env(safe-area-inset-top)) 12px calc(22px + env(safe-area-inset-bottom)); }
.eg-card { position:relative; width:100%; max-width:440px; padding:16px 14px 18px; border-radius:14px;
  background:linear-gradient(160deg,oklch(0.2 0.07 280 / .7),oklch(0.12 0.04 265 / .82));
  border:1px solid var(--eg-line); box-shadow:0 0 0 1px oklch(0.6 0.2 300 / .3) inset,0 0 26px oklch(0.6 0.22 290 / .35),0 0 60px oklch(0.5 0.2 260 / .25);
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.eg-gem { position:absolute; width:14px; height:14px; transform:rotate(45deg); background:linear-gradient(135deg,var(--eg-ink),var(--eg-magenta) 45%,var(--eg-violet)); box-shadow:0 0 10px var(--eg-magenta); }
.eg-gem.tl{top:-7px;left:-7px}.eg-gem.tr{top:-7px;right:-7px}.eg-gem.bl{bottom:-7px;left:-7px}.eg-gem.br{bottom:-7px;right:-7px}
.eg-logo { width:min(120px,34%); height:auto; filter:drop-shadow(0 0 10px oklch(0.75 0.15 220 / .6)); animation:eg-in .5s ease-out both; }
#overlay .eg-full { margin:0; font:900 clamp(60px,20vw,92px)/.95 'Orbitron',sans-serif; letter-spacing:.06em;
  background:linear-gradient(180deg,var(--eg-gold) 5%,var(--eg-amber) 45%,var(--eg-red) 95%); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px oklch(0.95 0.08 70 / .7); text-shadow:none;
  filter:drop-shadow(0 3px 0 oklch(0.35 0.15 25)) drop-shadow(0 0 14px oklch(0.65 0.22 35 / .7));
  animation:eg-title .7s cubic-bezier(.2,.9,.3,1.2) .15s both; }
.eg-sealed { margin:-4px 0 0; font:600 14px 'Orbitron',sans-serif; letter-spacing:.32em; text-transform:uppercase; color:var(--eg-ink); text-align:center; animation:eg-in .5s ease-out .5s both; }
.eg-show { display:flex; align-items:center; gap:6px; width:100%; animation:eg-glow .9s ease-out .6s both; }
.eg-sculpt { width:46%; aspect-ratio:1; flex:none; }
.eg-scorebox { flex:1; min-width:0; padding:10px 10px 12px; border:1px solid var(--eg-line); border-radius:8px; background:var(--eg-glass);
  box-shadow:inset 0 0 18px oklch(0.6 0.18 230 / .25); text-align:center; }
.eg-cap { display:block; font:700 11px 'Orbitron',sans-serif; letter-spacing:.2em; color:var(--eg-cyan); }
.eg-score { display:block; font:900 clamp(28px,9.5vw,44px)/1.15 'Orbitron',sans-serif; overflow-wrap:anywhere;
  background:linear-gradient(100deg,var(--eg-cyan),var(--eg-gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 oklch(0.3 0.1 250)) drop-shadow(0 0 10px oklch(0.8 0.15 200 / .55)); font-variant-numeric:tabular-nums; }
.eg-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; }
.eg-stat { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:7px 9px; border-radius:6px; border:1px solid var(--eg-line);
  background:var(--eg-glass); box-shadow:inset 0 -1px 0 oklch(0.7 0.2 300 / .4); animation:eg-in .4s ease-out both; animation-delay:calc(.9s + var(--i)*.07s); }
.eg-stat span { font:600 11px 'Rajdhani',sans-serif; letter-spacing:.08em; color:var(--eg-soft); }
.eg-stat b { font:800 13px 'Orbitron',sans-serif; color:var(--eg-cyan); text-align:right; }
.eg-btn { font:800 14px 'Orbitron',sans-serif; letter-spacing:.12em; border-radius:9px; cursor:pointer; color:var(--eg-ink); transition:transform .12s,filter .12s; }
.eg-btn:active { transform:translateY(2px) scale(.98); filter:brightness(1.25); }
.eg-btn:focus-visible, .eg-mini:focus-visible, .eg-submit input:focus-visible { outline:2px solid var(--eg-ink); outline-offset:3px; }
.eg-play { width:100%; min-height:56px; font-size:18px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--eg-gold);
  border:3px double var(--eg-gold); background:linear-gradient(180deg,oklch(0.32 0.1 60 / .9),oklch(0.16 0.05 50 / .95));
  box-shadow:inset 0 0 16px oklch(0.75 0.17 70 / .4),0 0 18px oklch(0.75 0.17 70 / .55); text-shadow:0 0 10px oklch(0.8 0.17 75 / .8); }
.eg-replay { display:inline-block; font-size:26px; line-height:1; animation:eg-spin 3s linear infinite; }
.eg-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.eg-share, .eg-view { min-height:46px; font-size:11px; padding:6px; }
.eg-share { border:2px solid var(--eg-magenta); background:linear-gradient(160deg,oklch(0.3 0.14 320 / .9),oklch(0.16 0.08 300 / .9)); box-shadow:0 0 14px oklch(0.65 0.27 330 / .5),inset 0 0 10px oklch(0.65 0.27 330 / .35); }
.eg-view { border:2px solid var(--eg-cyan); color:var(--eg-cyan); background:linear-gradient(160deg,oklch(0.28 0.1 235 / .9),oklch(0.14 0.05 250 / .9)); box-shadow:0 0 12px oklch(0.8 0.15 210 / .45); }
.eg-share span, .eg-view span { font-size:15px; margin-inline-end:4px; }
.eg-sharealt { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; width:100%; }
.eg-sharealt[hidden] { display:none; }
.eg-mini { font:700 11px 'Orbitron',sans-serif; letter-spacing:.08em; padding:8px 10px; border-radius:6px; border:1px solid var(--eg-violet); background:var(--eg-glass); color:var(--eg-ink); cursor:pointer; }
.eg-msg { font:600 12px 'Rajdhani',sans-serif; color:var(--eg-green); width:100%; text-align:center; min-height:1em; }
.eg-lb { width:100%; padding:10px; border-radius:10px; border:1px solid var(--eg-line); scroll-margin-top:12px;
  background:linear-gradient(180deg,oklch(0.24 0.04 250 / .85),oklch(0.13 0.04 265 / .9)); box-shadow:inset 0 0 0 1px oklch(0.85 0.03 250 / .12),0 0 16px oklch(0.75 0.14 220 / .25);
  animation:eg-in .5s ease-out 1.4s both; }
.eg-lbhead { font:700 12px 'Orbitron',sans-serif; letter-spacing:.3em; text-align:center; color:var(--eg-ink); margin-bottom:8px; }
#overlay.game-over .eg-lblist { font:600 13px/1.5 'Rajdhani',sans-serif; color:var(--eg-ink); min-height:40px; }
.eg-lblist .lbrow { align-items:center; padding:4px 6px !important; border-bottom:1px solid oklch(0.7 0.1 240 / .15); }
.eg-lblist .lb-rank { font:700 12px 'Orbitron',sans-serif; color:var(--eg-soft); width:36px !important; }
.eg-lblist .lb-score { font:700 13px 'Orbitron',sans-serif; color:var(--eg-cyan) !important; }
.eg-lblist .lb-lv { color:var(--eg-soft); min-width:28px; text-align:right; }
.lbrow.lb-gold .lb-rank, .lbrow.lb-gold .lb-name { color:var(--eg-gold,oklch(0.86 0.16 85)); }
.lbrow.lb-silver .lb-rank, .lbrow.lb-silver .lb-name { color:oklch(0.88 0.02 250); }
.lbrow.lb-bronze .lb-rank, .lbrow.lb-bronze .lb-name { color:oklch(0.72 0.12 55); }
.eg-lblist .lb-gold { background:linear-gradient(90deg,oklch(0.6 0.14 80 / .22),transparent); }
.eg-lblist .lb-me { outline:1px solid var(--eg-cyan); }
.eg-submit { display:flex; gap:6px; margin-top:10px; }
.eg-submit input { flex:1; min-width:0; font:700 13px 'Orbitron',sans-serif; letter-spacing:.14em; text-transform:uppercase; text-align:center; color:var(--eg-ink);
  padding:10px; border-radius:7px; border:1px solid var(--eg-cyan); background:oklch(0.15 0.05 240 / .85); box-shadow:inset 0 0 12px oklch(0.8 0.15 210 / .3); }
.eg-sub { font-size:12px; padding:8px 12px; color:var(--eg-green); border:2px solid var(--eg-green); background:oklch(0.2 0.07 180 / .85); box-shadow:0 0 12px oklch(0.8 0.18 165 / .45); }
.eg-sub.fail { color:var(--eg-red); border-color:var(--eg-red); box-shadow:0 0 10px oklch(0.64 0.24 25 / .4); }
.eg-sub:disabled { opacity:.85; cursor:default; }
.eg-site { margin:0; font:700 11px 'Orbitron',sans-serif; letter-spacing:.2em; color:var(--eg-gold); }
@keyframes eg-dim { from { opacity:0; } to { opacity:1; } }
@keyframes eg-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes eg-title { from { opacity:0; transform:scale(1.25); letter-spacing:.3em; } to { opacity:1; transform:none; } }
@keyframes eg-glow { from { opacity:0; filter:brightness(2.2); } to { opacity:1; filter:none; } }
@keyframes eg-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { #overlay.game-over, #overlay.game-over * { animation:none !important; transition:none !important; } }