:root{
  --ink:#f7f0ff; --dim:#b9a8d0; --panel:#241b38ee; --accent:#ffd166;
  --teal:#2f9e8f; --rose:#f0648c; --sky:#2a1e3f;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{ font-family:"Trebuchet MS", Verdana, sans-serif; background:#1b1330; color:var(--ink); overflow:hidden; }
.game-body #scene{ position:fixed; inset:0; display:block; }
/* ---------- HUD ---------- */
#hud{ position:fixed; inset:0; pointer-events:none; z-index:5; }
#hud-top{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:14px; background:var(--panel); border:1px solid #ffffff22;
  border-radius:10px; padding:6px 14px; font-size:13px; letter-spacing:.06em;
}
.stat b{ color:var(--accent); font-size:15px; }
#hud-timer{
  position:absolute; top:52px; left:50%; transform:translateX(-50%);
  color:var(--dim); font-size:13px; text-shadow:0 1px 3px #000;
}
#hud-bottom{
  position:absolute; bottom:8px; left:10px; right:10px; text-align:center;
  background:var(--panel); border:1px solid #ffffff22; border-radius:10px;
  padding:6px 10px; font-size:13px;
}
#hud-info{ color:var(--dim); font-size:12px; margin-top:2px; }
#hud-msg{
  position:absolute; top:84px; left:50%; transform:translateX(-50%);
  color:#ffe08a; font-size:15px; text-shadow:0 1px 4px #000; white-space:nowrap;
}
/* ---------- screens ---------- */
.screen{
  position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:#14092bee;
}
.panel{
  max-width:520px; width:calc(100% - 32px); text-align:center;
  background:linear-gradient(160deg,#2e2148,#1c1332); border:1px solid #ffffff2a;
  border-radius:16px; padding:26px 22px; box-shadow:0 20px 60px #000a;
}
.panel h1{ font-size:30px; letter-spacing:.12em; color:var(--accent); }
.panel .tag{ color:var(--dim); margin:8px 0 14px; }
.howto{ list-style:none; text-align:left; font-size:14px; line-height:1.6; color:var(--ink); }
.howto li{ margin:6px 0; padding-left:18px; position:relative; }
.howto li::before{ content:"◆"; position:absolute; left:0; color:var(--teal); font-size:11px; }
.big-btn{
  margin-top:16px; padding:12px 30px; font-size:17px; font-weight:bold;
  color:#241b38; background:linear-gradient(180deg,#ffd166,#f0a24a);
  border:none; border-radius:10px; cursor:pointer; letter-spacing:.05em;
}
.big-btn:hover{ filter:brightness(1.12); }
.tiny{ color:#8f7fa8; font-size:11px; margin-top:10px; }
/* ---------- touch controls ---------- */
#touch-ui{ position:fixed; inset:0; z-index:8; pointer-events:none; }
#dpad{
  position:absolute; left:12px; bottom:76px; display:grid;
  grid-template-columns:repeat(3, 48px); grid-template-rows:repeat(3, 48px);
  gap:4px; pointer-events:auto;
}
#dpad .tbtn:nth-child(1){ grid-area:1/2; }
#dpad .tbtn:nth-child(2){ grid-area:2/1; }
#dpad .tbtn:nth-child(3){ grid-area:2/3; }
#dpad .tbtn:nth-child(4){ grid-area:3/2; }
#taction{
  position:absolute; right:12px; bottom:76px; display:grid; gap:6px;
  grid-template-columns:repeat(2, 74px); pointer-events:auto;
}
.tbtn{
  background:#241b38cc; border:1px solid #ffd16655; color:var(--accent);
  border-radius:10px; font-size:14px; font-weight:bold; touch-action:none;
  -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.tbtn:active{ background:#3a2c5ecc; }
.tbig{ grid-column:span 2; padding:10px 0; }
.tsel{ font-size:15px; }
@media (max-width:820px){
  #hud-top{ font-size:11px; gap:8px; padding:4px 8px; }
  .stat b{ font-size:13px; }
  #taction{ grid-template-columns:repeat(2, 64px); bottom:70px; }
  #dpad{ grid-template-columns:repeat(3,42px); grid-template-rows:repeat(3,42px); }
  .panel h1{ font-size:24px; }
}
#flash{ position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 40%, #ff2f4f 130%);
  transition:opacity .25s; }