/* DinoM web edition - layout & UI */
:root{
  --bg:#0b0e13;
  --fg:#e8eef7;
  --dim:#8a97a8;
  --accent:#5ad1a0;
  --accent2:#ffd166;
  --danger:#ef476f;
  --panel:rgba(14,19,27,.92);
  --border:rgba(255,255,255,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  overflow:hidden;overscroll-behavior:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace}
.hidden{display:none !important}
.small{font-size:12px}

#app{position:fixed;inset:0;display:block}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;top:0;padding:clamp(8px,2vw,18px);
  display:flex;align-items:flex-start;gap:14px;pointer-events:none;
  text-shadow:0 2px 0 rgba(0,0,0,.5)}
#score{font-size:clamp(16px,2.6vw,24px);letter-spacing:.12em;color:#dfe8f2}
#hp{display:flex;gap:5px;margin-left:auto}
#hp i{width:clamp(12px,1.6vw,16px);height:clamp(12px,1.6vw,16px);display:block;
  background:var(--danger);
  clip-path:polygon(50% 100%,0 45%,0 22%,12% 6%,30% 6%,50% 26%,70% 6%,88% 6%,100% 22%,100% 45%)}
#hp i.off{background:#3a4351}
#fps{position:absolute;right:10px;bottom:8px;color:#4c5766}

/* ---------- dialogue (boss text) ---------- */
#dialog{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(96px,18vh,170px);max-width:min(720px,84vw);
  background:rgba(8,11,16,.86);border:2px solid rgba(255,255,255,.75);
  padding:clamp(10px,2vw,16px) clamp(14px,2.4vw,22px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(14px,2.2vw,22px);letter-spacing:.06em;line-height:1.35;
  white-space:pre-wrap;text-align:center;pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* ---------- touch pad ---------- */
#touch{position:absolute;inset:auto 0 0 0;padding:clamp(10px,2.4vw,22px);
  display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
#touch .pad{display:flex;gap:10px;pointer-events:auto}
.tbtn{width:clamp(56px,13vw,78px);height:clamp(56px,13vw,78px);border-radius:50%;
  border:1px solid var(--border);background:rgba(255,255,255,.07);color:var(--fg);
  font-size:clamp(18px,4vw,26px);line-height:1;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:background .08s,transform .08s}
.tbtn:active,.tbtn.on{background:rgba(90,209,160,.35);transform:scale(.94)}

/* ---------- overlay ---------- */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(20,28,40,.72),rgba(6,8,12,.92));
  padding:16px;z-index:5}
#overlay.hidden{display:none}
.panel{width:min(560px,92vw);background:var(--panel);border:1px solid var(--border);
  border-radius:18px;padding:clamp(18px,3.4vw,30px);text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.panel h1{margin:0 0 2px;font-size:clamp(30px,7vw,44px);letter-spacing:.06em}
.panel .sub{margin:0 0 14px;color:var(--dim);letter-spacing:.18em;font-size:12px;text-transform:uppercase}
.panel p{margin:8px 0;line-height:1.6;color:#c9d4e2;font-size:clamp(13px,2.4vw,15px)}
.panel .row{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.panel .hint{color:var(--dim);font-size:12px;margin-top:14px}
button{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--fg);padding:10px 16px;transition:.12s}
button:hover{background:rgba(255,255,255,.11)}
button:active{transform:translateY(1px)}
button.big{background:linear-gradient(180deg,#5ad1a0,#31b081);color:#06231a;font-weight:700;
  border-color:transparent;padding:13px 40px;font-size:clamp(15px,3vw,18px);letter-spacing:.06em}
button.mini{font-size:12px;padding:8px 12px;color:#b9c5d4}
.hi{color:var(--accent2)}
.danger{color:var(--danger)}