/* ============================================================
   DINO BLOOM — UI styles
   ============================================================ */
:root{
  --ink:#1d2b33;
  --ink-soft:#5b6f79;
  --paper:#ffffff;
  --mint:#5ed3b5;
  --mint-deep:#27a789;
  --amber:#ffb43c;
  --amber-deep:#e07f16;
  --danger:#ff6b6b;
  --shadow:0 18px 46px -18px rgba(16,42,52,.55);
  --radius:22px;
  --font: "Avenir Next", "Nunito", "Quicksand", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font);
  background:#0d1b22;
  color:var(--ink);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-text-size-adjust:100%;
}

#app{ position:fixed; inset:0; }
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------------- loading ---------------- */
.loading{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; gap:9px; transition:opacity .4s ease; z-index:5;
}
.loading.hide{ opacity:0; pointer-events:none; }
.loading-dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--mint); box-shadow:0 0 16px rgba(94,211,181,.8);
  animation:lb 1s infinite ease-in-out;
}
.loading-dot:nth-child(2){ animation-delay:.15s; background:var(--amber); box-shadow:0 0 16px rgba(255,180,60,.8); }
.loading-dot:nth-child(3){ animation-delay:.3s; }
@keyframes lb{ 0%,80%,100%{ transform:scale(.55); opacity:.5 } 40%{ transform:scale(1); opacity:1 } }

/* ---------------- HUD ---------------- */
.hud{
  position:absolute; inset:0; pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-right,0px) + 16px) 0 calc(env(safe-area-inset-left,0px) + 16px);
  display:flex; align-items:flex-start; justify-content:space-between;
  z-index:3; opacity:0; transition:opacity .35s ease;
}
.hud.visible{ opacity:1; }
.hud-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hud-right{ display:flex; gap:9px; pointer-events:auto; }

.stat{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-radius:14px; padding:7px 13px;
  box-shadow:0 8px 22px -12px rgba(9,32,42,.6);
  border:1.5px solid rgba(255,255,255,.9);
}
.stat-label{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; }
.stat-value{ display:flex; align-items:baseline; gap:2px; font-variant-numeric:tabular-nums; }
.stat-value b{ font-size:22px; font-weight:900; line-height:1; letter-spacing:-.01em; }
.stat-value i{ font-style:normal; font-size:12px; font-weight:800; color:var(--ink-soft); }
.stat-score .stat-value b{ font-size:27px; }
.stat-amber{ background:linear-gradient(180deg,#fff5dd,#ffe6b4); border-color:#ffd68f; }
.stat-amber .stat-value b{ color:var(--amber-deep); }
.stat-best{ opacity:.9; }
.stat-best .stat-value b{ font-size:18px; }

.amber-icon{
  width:15px; height:15px; background:linear-gradient(160deg,#ffe28a,#ffa31e);
  border-radius:3px; transform:rotate(45deg);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75), 0 0 10px rgba(255,175,45,.75);
}

.icon-btn{
  width:44px; height:44px; display:grid; place-items:center;
  border:none; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px -12px rgba(9,32,42,.6);
  border:1.5px solid rgba(255,255,255,.9);
  transition:transform .12s ease, background .2s ease;
}
.icon-btn:hover{ background:#fff; }
.icon-btn:active{ transform:scale(.92); }
.icon-btn svg{ width:22px; height:22px; fill:currentColor; }
#btnSound .ico-off{ display:none; }
#btnSound.muted .ico-on{ display:none; }
#btnSound.muted .ico-off{ display:block; }
#btnSound.muted{ color:var(--ink-soft); }

.shield-badge{
  position:absolute; left:50%; top:calc(env(safe-area-inset-top,0px) + 16px);
  transform:translate(-50%,-14px) scale(.9);
  display:flex; align-items:center; gap:7px;
  padding:6px 14px 6px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(223,246,255,.94));
  border:1.5px solid #a8e4ff; color:#0d6f96; font-weight:900; font-size:13px;
  box-shadow:0 0 20px rgba(120,215,255,.55);
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.shield-badge.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.shield-orb{
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ffffff, #57c8f5 55%, #1f7fae);
  box-shadow:0 0 12px rgba(90,205,250,.95);
  animation:pulse 1.5s infinite ease-in-out;
}
@keyframes pulse{ 50%{ transform:scale(1.22) } }

/* ---------------- overlays ---------------- */
.overlay{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.scrim{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 42%, rgba(8,26,36,.18), rgba(6,22,30,.62));
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.panel{
  position:relative; width:min(460px,94vw);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,252,255,.93));
  border-radius:28px; padding:30px 28px 26px;
  box-shadow:var(--shadow), inset 0 1px 0 #fff;
  border:2px solid rgba(255,255,255,.9);
  text-align:center;
  animation:pop .38s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes pop{ from{ transform:translateY(14px) scale(.94); opacity:0 } }
.kicker{
  margin:0 0 6px; font-size:11px; font-weight:900; letter-spacing:.28em;
  color:var(--mint-deep); text-transform:uppercase;
}
.kicker-over{ color:var(--danger); }
.title{
  margin:0; font-size:clamp(46px,12vw,68px); line-height:.92;
  font-weight:900; letter-spacing:-.03em; color:var(--mint-deep);
  text-shadow:0 3px 0 rgba(255,255,255,.9);
}
.title span{ display:block; color:var(--amber-deep); }
.tagline{ margin:12px 0 22px; font-size:15px; font-weight:700; color:var(--ink-soft); }
.panel-title{ margin:2px 0 8px; font-size:clamp(22px,5.4vw,28px); font-weight:900; letter-spacing:-.01em; }
.panel-title b{ color:var(--mint-deep); }
.panel-sub{ margin:0 0 18px; font-size:14px; font-weight:700; color:var(--ink-soft); }
.panel-sub b{ color:var(--amber-deep); }
.panel-foot{ margin:16px 0 0; font-size:12.5px; font-weight:700; color:var(--ink-soft); }

.btn{
  font-family:inherit; cursor:pointer; border:none;
  border-radius:16px; padding:15px 34px;
  font-size:17px; font-weight:900; letter-spacing:.04em; color:#06332c;
  background:linear-gradient(180deg,#6fe0c2,#2fb496);
  box-shadow:0 6px 0 #1d8f78, 0 16px 30px -12px rgba(20,120,100,.85);
  transition:transform .1s ease, box-shadow .1s ease, filter .2s ease;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #1d8f78, 0 8px 18px -10px rgba(20,120,100,.85); }

.hints{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 14px; margin-top:20px; }
.hint{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
kbd{
  font-family:inherit; font-size:11.5px; font-weight:900; color:var(--ink);
  background:#fff; border:1.5px solid #d9e6ea; border-bottom-width:3px;
  border-radius:8px; padding:3px 8px; min-width:26px; text-align:center;
}
.mobile-only{ display:none; }
.hint-inline{ margin:14px 0 0; font-size:12.5px; }

.result-grid{ display:flex; justify-content:center; gap:10px; margin:6px 0 22px; }
.result-cell{
  flex:1; background:#fff; border:1.5px solid #e4eff2; border-radius:16px; padding:11px 6px;
  display:flex; flex-direction:column; gap:3px;
}
.result-cell span{ font-size:10.5px; font-weight:800; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; }
.result-cell b{ font-size:19px; font-weight:900; font-variant-numeric:tabular-nums; }

/* ---------------- toast ---------------- */
.toast{
  position:absolute; left:50%; top:22%; transform:translate(-50%,10px);
  padding:11px 22px; border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--ink);
  font-size:15px; font-weight:900; letter-spacing:.01em;
  box-shadow:0 14px 34px -14px rgba(9,32,42,.6);
  border:2px solid rgba(255,255,255,.95);
  opacity:0; pointer-events:none; z-index:6;
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.good{ color:var(--mint-deep); border-color:#b8f0e2; }
.toast.warn{ color:#c2410c; border-color:#ffd9b8; }

/* ---------------- touch controls ----------------
   Shown when the page detects a touch-first / small screen
   (body.touch-ui, set from JS); the media query covers the
   case where JS has not run yet. */
.touch{ display:none; }
body.touch-ui .touch{
  display:block; position:absolute; inset:auto 0 0 0; z-index:2;
  padding:0 18px calc(env(safe-area-inset-bottom,0px) + 20px);
  pointer-events:none;
}
body.touch-ui .mobile-only{ display:block; }
body.touch-ui .hints .hint{ display:none; }
.touch-btn{
  position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  pointer-events:auto; font-family:inherit; cursor:pointer;
  width:86px; height:86px; border-radius:50%; border:2px solid rgba(255,255,255,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:12px; font-weight:900; letter-spacing:.08em;
  color:#0b4d40; background:rgba(255,255,255,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -12px rgba(6,26,34,.75);
  transition:transform .1s ease, background .15s ease;
  touch-action:none;
}
.touch-btn svg{ width:30px; height:30px; stroke:currentColor; }
.touch-btn:active,.touch-btn.held{ transform:scale(.93); background:rgba(255,255,255,.62); }
.touch-duck{ left:18px; }
.touch-jump{ right:18px; background:rgba(111,224,194,.4); }
.touch-jump:active{ background:rgba(111,224,194,.7); }
.touch.dim{ opacity:.3; pointer-events:none; transition:opacity .2s ease; }
.touch-btn.bump{ animation:bump .22s ease; }
@keyframes bump{ 40%{ transform:scale(1.12) } }
.stat-amber.bump{ animation:abump .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes abump{ 40%{ transform:scale(1.18) rotate(-3deg) } }

@media (pointer:coarse){
  .mobile-only{ display:block; }
}

/* small phones: tighten HUD */
/* on wide screens the title card moves right so the dino on the
   title screen stays fully visible */
@media (min-width: 780px){
  #startScreen{ justify-items:end; padding-right:4vw; }
}
@media (max-width:420px){
  .stat{ padding:6px 10px; border-radius:12px; }
  .stat-value b{ font-size:19px; }
  .stat-score .stat-value b{ font-size:22px; }
  .icon-btn{ width:40px; height:40px; }
  .panel{ padding:24px 20px 20px; border-radius:24px; }
}
@media (max-height:520px){
  .panel{ padding:18px 20px 16px; }
  .title{ font-size:40px; }
  .tagline{ margin:8px 0 14px; }
  .hints{ margin-top:12px; }
}

@media (prefers-reduced-motion:reduce){
  .panel{ animation:none; }
  .loading-dot, .shield-orb{ animation:none; }
}