/* ==========================================================
   BEAR ON BOARD — interface styles
   ========================================================== */

:root{
  --ink:#123049;
  --ink-soft:#3a5f7d;
  --cream:#fffdf6;
  --sky:#8fc9ee;
  --berry:#ff5d73;
  --sun:#ffc93c;
  --pine:#1f7a54;
  --shadow:0 6px 0 rgba(18,48,73,.22), 0 14px 30px rgba(18,48,73,.28);
  --round:22px;
  --font: "Avenir Next Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:#8fc9ee;
  font-family:var(--font);
  color:var(--ink);
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}

#game{ position:fixed; inset:0; display:block; }

.hidden{ display:none !important; }

/* ---------------- HUD ---------------- */
#hud{
  position:fixed; inset:0; pointer-events:none;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between;
}
.hud-top,.hud-bottom{ display:flex; align-items:center; gap:10px; }
.hud-top{ justify-content:space-between; }
.hud-bottom{ justify-content:space-between; }

.pill{
  background:rgba(255,253,246,.86);
  border:3px solid rgba(18,48,73,.85);
  border-radius:999px;
  padding:6px 14px;
  font-weight:800;
  font-size:clamp(14px,2.4vw,20px);
  letter-spacing:.02em;
  box-shadow:0 4px 0 rgba(18,48,73,.25);
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.pill .cap{ font-size:.72em; letter-spacing:.12em; color:var(--ink-soft); }

#hearts{ font-size:clamp(16px,2.8vw,24px); letter-spacing:2px; gap:2px; }
#hearts .lost{ opacity:.25; filter:grayscale(1); }

.progress{ flex:1; max-width:min(46vw,420px); padding:6px 12px; }
.progress .track{
  position:relative; flex:1; height:14px;
  background:#dbeaf5; border:2px solid rgba(18,48,73,.55); border-radius:999px;
  overflow:visible;
}
.progress .fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#7fd1ff,#4aa8e8); border-radius:999px;
}
.progress .marker{
  position:absolute; top:50%; left:0; transform:translate(-50%,-58%);
  font-size:20px; line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.speedo .bars{ display:flex; gap:3px; }
.speedo .bars i{
  display:block; width:9px; height:16px; border-radius:3px;
  background:#dbeaf5; border:2px solid rgba(18,48,73,.4);
}
.speedo .bars i.on{ background:var(--sun); border-color:rgba(18,48,73,.75); }
.speedo .bars i.hot{ background:var(--berry); border-color:rgba(18,48,73,.75); }

#timer{ font-variant-numeric:tabular-nums; }

/* ---------------- Screens ---------------- */
.screen{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:radial-gradient(120% 90% at 50% 20%, rgba(143,201,238,.55), rgba(20,58,88,.72));
  backdrop-filter:blur(2px);
  animation:fadeIn .25s ease-out;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.card{
  width:min(560px,94vw);
  max-height:94vh; overflow:auto;
  background:var(--cream);
  border:5px solid var(--ink);
  border-radius:var(--round);
  box-shadow:var(--shadow);
  padding:26px 26px 22px;
  text-align:center;
}

.hero{ font-size:clamp(46px,11vw,86px); line-height:1; position:relative; display:inline-block; animation:bob 1.6s ease-in-out infinite; }
.hero.small{ font-size:clamp(38px,9vw,64px); animation:none; }
.hero .board{ font-size:.5em; position:absolute; right:-.42em; bottom:-.06em; transform:rotate(12deg); }
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }

h1{
  margin:6px 0 2px;
  font-size:clamp(34px,8.4vw,60px);
  line-height:.95; letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:0 4px 0 rgba(74,168,232,.45);
}
h1 span{ display:inline-block; font-size:.44em; color:var(--berry); margin:0 .22em; transform:translateY(-.28em) rotate(-6deg); }
h2{ margin:8px 0 4px; font-size:clamp(26px,6.4vw,42px); color:var(--ink); }

.tag{ margin:6px 0 14px; font-size:clamp(14px,3vw,18px); color:var(--ink-soft); font-weight:700; }
.fine{ margin:12px 0 0; font-size:clamp(11px,2.4vw,14px); color:var(--ink-soft); font-weight:700; }
.best{ margin:12px 0 0; font-size:clamp(13px,2.6vw,16px); color:var(--ink-soft); font-weight:800; }

.keys{ display:flex; flex-direction:column; gap:8px; align-items:center; margin:14px 0 18px; }
.keyrow{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink-soft); font-size:clamp(13px,2.8vw,17px); }

kbd{
  display:inline-grid; place-items:center;
  min-width:2em; padding:.18em .45em;
  font-family:var(--font); font-size:1em; font-weight:900;
  background:#fff; color:var(--ink);
  border:3px solid var(--ink); border-radius:9px;
  box-shadow:0 3px 0 rgba(18,48,73,.85);
}

.big{
  display:block; width:100%; margin:6px 0 0;
  padding:16px 20px;
  font-family:var(--font); font-weight:900;
  font-size:clamp(20px,5vw,30px); letter-spacing:.04em;
  color:#fff; background:var(--berry);
  border:5px solid var(--ink); border-radius:18px;
  box-shadow:0 7px 0 rgba(18,48,73,.85);
  cursor:pointer; transition:transform .06s, box-shadow .06s, background .12s;
}
.big:hover{ background:#ff7185; }
.big:active{ transform:translateY(5px); box-shadow:0 2px 0 rgba(18,48,73,.85); }
.big:focus-visible{ outline:4px solid var(--sun); outline-offset:3px; }

.stats{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0 16px; }
.stat{
  flex:1 1 100px; min-width:92px;
  background:#eaf5fd; border:3px solid rgba(18,48,73,.75); border-radius:16px;
  padding:10px 8px;
}
.stat b{ display:block; font-size:clamp(18px,4.4vw,26px); line-height:1.1; }
.stat span{ display:block; margin-top:3px; font-size:10px; letter-spacing:.11em; color:var(--ink-soft); font-weight:800; }

/* ---------------- Mute ---------------- */
#btnMute{
  position:fixed; z-index:25;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(64px + env(safe-area-inset-bottom));
  width:44px; height:44px; font-size:20px; line-height:1;
  background:rgba(255,253,246,.86); border:3px solid rgba(18,48,73,.85);
  border-radius:50%; cursor:pointer; box-shadow:0 4px 0 rgba(18,48,73,.25);
}
#btnMute:active{ transform:translateY(3px); box-shadow:none; }

/* ---------------- Control hints ---------------- */
/* Keyboard instructions on desktop, finger instructions on touch screens. */
.touch-only{ display:none; }
@media (hover:none) and (pointer:coarse){
  .keyboard-only{ display:none !important; }
  .touch-only{ display:flex; }
  p.touch-only{ display:block; }
  #btnMute{ bottom:calc(16px + env(safe-area-inset-bottom)); }
}
.keyrow .swipe{ font-size:1.5em; line-height:1; animation:wag 1.4s ease-in-out infinite; }
@keyframes wag{ 0%,100%{transform:translateX(-6px) rotate(-8deg)} 50%{transform:translateX(6px) rotate(8deg)} }
@media (max-height:520px){ .card{ padding:16px 18px } .keys{ margin:8px 0 12px } .hero{ font-size:44px } }