/* Layout: the WebGL canvas fills the window; the HUD is DOM on top. Phones (portrait): JP / gems + wallet on top,
   controls (coin unit, PUSH) at the bottom; tapping the machine drops a coin. Wide screens: wallet/history on the
   left, controls on the right.
   Look: galaxy neon — deep navy glass, cyan/magenta/gold, LED-style numbers. */
:root{
  --ink:#fff; --muted:#a9a6d6; --bg:#07050c; --glass:#0d0a22d9; --glass2:#150f34ee; --line:#ffffff22; --dark:#120a26;
  --pink:#ff3bd0; --cyan:#38d6ff; --gold:#ffd34d; --orange:#ff7a1a; --red:#ff3b4e; --green:#7cff6b; --violet:#8a6bff;
  --en:'Bungee','Dela Gothic One',system-ui,sans-serif; --jp:'Dela Gothic One','M PLUS Rounded 1c','Hiragino Kaku Gothic ProN',sans-serif;
  --body:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
  --top:88px; --bot:116px; --sideL:0px; --sideR:0px;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{touch-action:manipulation;box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:500;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:60;transition:opacity .32s}
#fade.on{opacity:1}
[data-t]{position:relative;display:inline-block;isolation:isolate;color:var(--dark);-webkit-text-stroke:.16em var(--dark);text-shadow:.06em .08em 0 var(--dark),.05em .11em 0 var(--pink)}
[data-t]::after{content:attr(data-t);position:absolute;z-index:1;left:0;top:0;right:0;-webkit-text-stroke:0;text-shadow:none;background:var(--fill,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.screen.dim{background:#04020cc8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:30}

.btn{font:400 16px/1 var(--jp);letter-spacing:.04em;color:var(--ink);background:#ffffff14;border:2px solid #ffffff55;border-radius:999px;
  padding:13px 22px;min-width:120px;cursor:pointer;transition:background .15s,transform .1s;box-shadow:0 4px 0 #0006}
.btn:hover,.btn:focus-visible{background:#ffffff2a;outline:none}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0006}
.btn.main{background:linear-gradient(#b05bff,#ff3bd0);border-color:#fff;text-shadow:0 2px 0 #5a0a6a;box-shadow:0 4px 0 #5a0a6a,0 0 22px #ff3bd088}
.btn:disabled{opacity:.35;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.col{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:14px}

/* Loading */
.ld{display:grid;gap:12px;justify-items:center;width:min(100%,300px)}
.ld b{font:400 26px var(--en);letter-spacing:.06em;color:var(--gold)}
.ld i{display:block;width:100%;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}
.ld u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .2s}
.ld small{font:400 11px var(--en);letter-spacing:.2em;color:var(--muted)}

/* Title */
#title{justify-content:space-between;padding-top:max(7vh,env(safe-area-inset-top));background:linear-gradient(#04020cbb,transparent 32%,transparent 52%,#04020cee)}
.tlogo{text-align:center;transform:rotate(-5deg);animation:logoIn .8s cubic-bezier(.2,1.6,.4,1) both}
@keyframes logoIn{from{transform:rotate(-5deg) scale(2.2);opacity:0}}
.tlogo .kana{margin:0 0 6px;font:400 clamp(18px,5.4vw,30px) var(--jp);letter-spacing:.2em;color:#fff;-webkit-text-stroke:5px var(--dark);paint-order:stroke fill;text-shadow:0 4px 0 var(--pink);filter:drop-shadow(0 0 8px #ff3bd099)}
.tlogo h1{margin:0;font:400 clamp(58px,18vw,130px)/.86 var(--en);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 0 16px #8a6bff88)}
.tlogo h1 span{--fill:linear-gradient(#fff9c2 15%,#ffd34d 45%,#ff7a1a 80%);-webkit-text-stroke:.14em var(--dark);text-shadow:.04em .07em 0 var(--dark),.06em .11em 0 var(--pink)}
.tlogo h1 span:last-child{margin-left:.6em;--fill:linear-gradient(#ffffff 10%,#c8b8ff 45%,#8a6bff 80%);text-shadow:.04em .07em 0 var(--dark),.06em .11em 0 var(--cyan)}
.tbottom{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.twallet{list-style:none;margin:0;padding:8px 14px;display:flex;gap:16px;background:var(--glass);border:1px solid var(--line);border-radius:12px;font-size:12px}
.twallet li{display:grid;justify-items:center;gap:2px}
.twallet small{color:var(--muted)}
.twallet b{font:400 16px var(--en);color:var(--gold)}
.tnav{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(100%,300px)}
.tnav .btn.main{font-size:22px;padding:16px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
.row2{display:flex;gap:10px}.row2 .btn{flex:1;min-width:0;padding:11px}
.tnote{margin:0;font-size:11px;color:var(--muted);text-align:center}
.sitelinks{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:11px}
.sitelinks a{color:var(--muted);text-decoration:none}
.sitelinks a:hover{color:var(--ink);text-decoration:underline}

/* Panels */
.panel{background:var(--glass2);border:2px solid #ffffff30;border-radius:18px;box-shadow:0 20px 60px #000a,inset 0 0 0 1px #8a6bff44;padding:20px;width:min(100%,540px);max-height:100%;overflow:auto;touch-action:pan-y}
.panel.mini{width:min(100%,320px);text-align:center}
.ph{margin:0 0 14px;font:400 24px var(--en);letter-spacing:.04em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--gold)}
.ph small{font:500 12px var(--body);color:var(--muted)}
.panel.mini .ph{justify-content:center}
.h3{margin:18px 0 8px;font:400 15px var(--jp);color:var(--cyan)}
.howl{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13px;line-height:1.6}
.howl li{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:start}
.howl kbd{font:400 12px var(--jp);text-align:center;padding:4px;border-radius:8px;background:var(--violet);color:#fff}
.howl b{color:var(--gold);font-weight:800}
.pnote{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.7}
.prem{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prem li{padding:8px 10px;border-radius:10px;background:#ffffff0d;border:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.5}
.prem li b{display:block;font:400 13px var(--jp);color:#fff}
.prem li.seen{border-color:transparent;background:linear-gradient(#150f34,#150f34) padding-box,linear-gradient(90deg,#ff3b3b,#ffd34d,#3bff6a,#38d6ff,#e03bff) border-box;border:2px solid transparent}
.prem li.seen b::after{content:' ★';color:var(--gold)}
.optl{display:grid;gap:12px}
.optl label{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:12px;font-size:14px;font-weight:800}
.optl select,.optl input{font:inherit;font-weight:500;color:var(--ink);background:#ffffff12;border:1px solid #ffffff30;border-radius:8px;padding:7px 8px}
.optl select option{background:#150f34}
.optl input[type=range]{padding:0;accent-color:var(--pink)}
.btext{margin:0;font-size:14px;line-height:1.7}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#hud button{pointer-events:auto}
.lamp{position:absolute;left:0;right:0;top:0;display:flex;align-items:stretch;gap:2px;padding:max(6px,env(safe-area-inset-top)) 8px 6px;
  background:linear-gradient(#0a0618,#0a0618cc);border-bottom:1px solid #ff3b4e44;height:calc(50px + env(safe-area-inset-top))}
.lc{flex:1;display:grid;justify-items:center;align-content:center;background:#000;border-radius:6px;border:1px solid #2a1a2a;min-width:0}
.lc small{font-size:9px;color:#b98a8a;letter-spacing:.05em}
.lc b{font:400 17px/1.1 var(--en);color:#ff4a3a;text-shadow:0 0 8px #ff2a1a}
.lc.jp{flex:1.6}.lc.jp b{font-size:22px;color:#ffd34d;text-shadow:0 0 10px #ffb000}
.lc.jp.hot b{animation:jphot .5s steps(2) infinite}
@keyframes jphot{50%{color:#fff;text-shadow:0 0 16px #ff3bd0}}
.lc.gems span{display:flex;gap:5px}
.g{font:400 12px/18px var(--en);font-style:normal;width:18px;height:18px;text-align:center;color:#fff;clip-path:polygon(50% 100%,0 35%,22% 0,78% 0,100% 35%);opacity:.35}
.g.on{opacity:1;filter:drop-shadow(0 0 4px currentColor)}
.g.red{background:#ff2040}.g.blue{background:#2f8bff}.g.green{background:#2fc86a}
.mbtn{flex:0 0 40px;font:400 22px var(--en);color:#fff;background:#ffffff14;border:1px solid #ffffff33;border-radius:8px;cursor:pointer}
.mode{position:absolute;left:50%;top:calc(var(--top) + 6px);transform:translateX(-50%);padding:4px 14px;border-radius:999px;font:400 13px var(--en);letter-spacing:.06em;
  background:linear-gradient(90deg,#ff3bd0,#8a6bff);box-shadow:0 0 18px #ff3bd0aa;white-space:nowrap}
.mode.guard{background:linear-gradient(90deg,#2fae3a,#7cff6b);color:#062a08;box-shadow:0 0 18px #7cff6baa}
.mode.rush{background:linear-gradient(90deg,#ff4a1a,#ffb02e);color:#2a0c00;box-shadow:0 0 18px #ff8a1aaa;animation:rushPulse .5s ease-in-out infinite alternate}
@keyframes rushPulse{to{filter:brightness(1.3)}}
.mode.jitan{background:linear-gradient(90deg,#2f8bff,#38d6ff);box-shadow:0 0 18px #38d6ffaa}
.mode.bonus{background:linear-gradient(90deg,#ff7a1a,#ffd34d);color:#2a1000;box-shadow:0 0 18px #ffd34daa}
.side.left{position:absolute;left:0;right:0;top:calc(50px + env(safe-area-inset-top));padding:4px 8px}
.wallet{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.wallet li{flex:1;display:flex;flex-direction:column;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:3px 2px}
.wallet small{font-size:9px;color:var(--muted)}
.wallet b{font:400 13px var(--en);color:#fff;white-space:nowrap}
.wallet .cr b{color:var(--gold)}
.wallet .bal b.plus{color:var(--green)}.wallet .bal b.minus{color:var(--red)}
.hist{display:none}
.ctrl{position:absolute;left:0;right:0;bottom:0;height:calc(var(--bot) + env(safe-area-inset-bottom));padding:8px 10px max(8px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:center;gap:6px 10px;background:linear-gradient(#0a061800,#0a0618ee 22%)}
.sand{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;grid-column:1;grid-row:2;align-self:end}
.sbtn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 9px;border-radius:10px;cursor:pointer;color:#fff;
  background:#ffffff12;border:1px solid #ffffff40;font:inherit;text-align:left}
.sbtn b{font:400 13px var(--jp)}.sbtn small{font-size:9px;color:var(--muted)}
.sbtn.lend{background:linear-gradient(#2f8bff,#1a4cd0);border-color:#9ff0ff}
.sbtn.lend.need{animation:need .7s ease-in-out infinite}
@keyframes need{50%{box-shadow:0 0 0 4px #38d6ff88,0 0 24px #38d6ff;transform:scale(1.04)}}
.sbtn:disabled{opacity:.35}
.dropinfo{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;gap:8px;text-align:left;color:var(--muted);font-size:10px;line-height:1.35}
.dropinfo br{display:none}
.dropinfo b{font:400 18px var(--en);color:var(--gold);text-shadow:0 0 10px #ffb000}
.push{grid-column:2;grid-row:1/3;width:78px;height:78px;border-radius:50%;cursor:pointer;border:3px solid #fff;font:400 15px var(--en);color:#fff;
  background:radial-gradient(circle at 40% 30%,#ffb8f0,#ff3bd0 45%,#8a0a6a);box-shadow:0 6px 0 #4a0638,0 0 20px #ff3bd088;text-shadow:0 2px 0 #4a0638;opacity:.45}
.push:active,.push.press{transform:translateY(4px);box-shadow:0 2px 0 #4a0638}
.push.ask{opacity:1;animation:ask .35s ease-in-out infinite;background:radial-gradient(circle at 40% 30%,#fff,#ffd34d 45%,#ff3bd0);box-shadow:0 6px 0 #4a0638,0 0 40px #ffd34d}
@keyframes ask{50%{transform:scale(1.12)}}
#hint{position:absolute;left:50%;bottom:calc(var(--bot) + 10px + env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:10px;
  background:#000c;border:1px solid var(--cyan);font-size:13px;white-space:nowrap}
#toast{position:absolute;left:50%;top:calc(var(--top) + 40px);transform:translate(-50%,-10px);margin:0;padding:6px 14px;border-radius:999px;opacity:0;transition:.3s;
  background:linear-gradient(90deg,#ff3b3bcc,#ffd34dcc,#3bff6acc,#38d6ffcc,#e03bffcc);font:400 13px var(--jp);text-shadow:0 1px 2px #000;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* Wide screens: side panels. */
@media (min-aspect-ratio:11/10) and (min-width:760px){
  :root{--top:56px;--bot:0px;--sideL:220px;--sideR:220px}
  .lamp{left:var(--sideL);right:var(--sideR);height:50px;padding-top:6px;border:1px solid #ff3b4e44;border-top:0;border-radius:0 0 12px 12px}
  .side.left{top:0;bottom:0;right:auto;width:var(--sideL);padding:14px;background:linear-gradient(90deg,#0a0618f0,#0a061888);display:flex;flex-direction:column;gap:12px}
  .wallet{flex-direction:column;gap:6px}
  .wallet li{flex-direction:row;justify-content:space-between;padding:8px 10px}
  .wallet small{font-size:12px}.wallet b{font-size:16px}
  .hist{display:grid;list-style:none;margin:0;padding:0;gap:4px;overflow:hidden}
  .hist li{display:flex;justify-content:space-between;font-size:11px;padding:4px 8px;border-radius:6px;background:#ffffff0a;color:var(--muted)}
  .hist li b{font:400 12px var(--en);color:#fff}.hist li.r b{color:var(--gold)}
  .hist::before{content:'JPチャンス履歴';font-size:11px;color:var(--cyan)}
  .ctrl{left:auto;top:0;width:var(--sideR);height:auto;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:16px 14px;gap:20px;background:linear-gradient(270deg,#0a0618f0,#0a061888)}
  .sand{grid-template-columns:1fr;align-self:start;grid-row:1}.sbtn{padding:8px 12px}.sbtn b{font-size:15px}.sbtn small{font-size:11px}
  .dropinfo{grid-row:2;flex-direction:column;text-align:center;font-size:12px}.dropinfo br{display:inline}
  .push{grid-column:1;grid-row:3}
  .push{justify-self:center;align-self:end;width:104px;height:104px;margin-bottom:24px}
  #hint{bottom:24px}
}