@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root {
  font-family: "Nunito", system-ui, sans-serif;
  color: #312417;
  background: #87c9ee;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body, #app, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
button { font: inherit; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.hud {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.hud-card {
  min-width: 108px;
  padding: 8px 15px 7px;
  border: 2px solid rgba(255,255,255,.62);
  border-radius: 18px;
  background: rgba(255,249,230,.86);
  box-shadow: 0 8px 22px rgba(79,57,25,.16), inset 0 1px 0 white;
  backdrop-filter: blur(10px);
  text-align: center;
}
.hud-card span { display:block; font-size:10px; font-weight:800; letter-spacing:.16em; color:#8a6841; }
.hud-card strong { display:block; margin-top:-2px; font-family:"Baloo 2",sans-serif; font-size:23px; line-height:1.15; }
.hud-card.lives { min-width:138px; }

.menu-panel {
  position:fixed; z-index:10; left:50%; top:50%;
  width:min(560px,calc(100vw - 32px));
  transform:translate(-50%,-50%);
  padding:34px 38px 28px;
  border:3px solid rgba(255,255,255,.68);
  border-radius:34px;
  background:linear-gradient(160deg,rgba(255,252,238,.96),rgba(255,241,205,.91));
  box-shadow:0 25px 70px rgba(72,50,25,.28), inset 0 1px 0 #fff;
  text-align:center;
  transition:opacity .28s ease, transform .28s ease;
  backdrop-filter:blur(14px);
}
.menu-panel.hidden { opacity:0; pointer-events:none; transform:translate(-50%,-46%) scale(.96); }
.logo-mark { font-size:50px; filter:drop-shadow(0 6px 7px rgba(80,60,20,.18)); animation:bob 1.8s ease-in-out infinite; }
.eyebrow { margin:2px 0 0; color:#bd6f2e; font-weight:800; font-size:11px; letter-spacing:.2em; }
h1,h2 { margin:4px 0 8px; font-family:"Baloo 2",sans-serif; color:#43301d; line-height:1; }
h1 { font-size:clamp(46px,7vw,72px); letter-spacing:-.045em; }
h1 em { color:#e28a2c; font-style:normal; }
h2 { font-size:42px; }
.lead { max-width:450px; margin:0 auto 20px; color:#6f5638; font-size:15px; line-height:1.48; }
.primary-button {
  min-width:180px; padding:13px 28px 11px; border:0; border-bottom:5px solid #ae5e1f;
  border-radius:18px; color:white; background:linear-gradient(#f4a743,#df7f26);
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:23px; letter-spacing:.04em;
  cursor:pointer; box-shadow:0 9px 22px rgba(170,83,20,.26); transition:transform .12s ease,filter .12s ease;
}
.primary-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.primary-button:active { transform:translateY(3px); border-bottom-width:2px; margin-bottom:3px; }
.controls-hint { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 15px; margin-top:20px; color:#876b4b; font-size:12px; font-weight:800; }
kbd { display:inline-grid; place-items:center; width:25px; height:25px; margin:0 2px; border-radius:7px; border:1px solid #d2bc95; border-bottom-width:3px; background:#fffaf0; color:#4c3925; box-shadow:0 2px 5px rgba(71,47,20,.08); }

.status {
  position:fixed; z-index:6; left:50%; top:98px; transform:translate(-50%,-8px) scale(.94);
  padding:8px 14px; border-radius:14px; background:rgba(64,45,26,.78); color:white;
  font-family:"Baloo 2",sans-serif; font-weight:800; opacity:0; pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.status.show { opacity:1; transform:translate(-50%,0) scale(1); }

.mobile-controls {
  position:fixed;
  inset:0;
  z-index:7;
  pointer-events:none;
  opacity:.42;
  transition:opacity .2s ease;
}
.mobile-controls.active { opacity:1; }
.mobile-controls button {
  position:absolute;
  width:76px;
  height:72px;
  transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.76);
  border-radius:22px;
  background:rgba(255,249,230,.9);
  color:#5b4026;
  box-shadow:0 7px 20px rgba(60,40,15,.2), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(9px);
  font-weight:900;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  pointer-events:none;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:0 11px;
  transition:transform .1s ease, background .1s ease, box-shadow .1s ease;
}
.mobile-controls.active button { pointer-events:auto; }
.mobile-controls button[data-lane="0"] { left:max(14px,env(safe-area-inset-left)); top:34%; }
.mobile-controls button[data-lane="1"] { left:max(14px,env(safe-area-inset-left)); top:61%; }
.mobile-controls button[data-lane="2"] { right:max(14px,env(safe-area-inset-right)); top:34%; }
.mobile-controls button[data-lane="3"] { right:max(14px,env(safe-area-inset-right)); top:61%; }
.mobile-controls button span { font-size:31px; line-height:1; }
.mobile-controls button small { font-size:10px; color:#9b7245; letter-spacing:.06em; }
.mobile-controls button:active {
  transform:translateY(calc(-50% + 2px)) scale(.96);
  background:#fff3cf;
  box-shadow:0 4px 12px rgba(60,40,15,.2), inset 0 2px 0 rgba(255,255,255,.9);
}

.vignette {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 55%,rgba(77,58,31,.12) 100%);
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-7px) rotate(3deg)} }

@media (pointer:fine) and (min-width:900px) {
  .mobile-controls button { width:72px; height:62px; opacity:.9; }
  .mobile-controls button[data-lane="0"], .mobile-controls button[data-lane="1"] { left:24px; }
  .mobile-controls button[data-lane="2"], .mobile-controls button[data-lane="3"] { right:24px; }
}
@media (pointer:coarse), (max-width:760px) {
  .hud { top:10px; gap:6px; width:calc(100% - 16px); justify-content:center; }
  .hud-card { min-width:0; flex:1 1 0; max-width:120px; padding:6px 8px; border-radius:14px; }
  .hud-card.lives { min-width:0; max-width:138px; }
  .hud-card strong { font-size:19px; }
  .menu-panel { padding:27px 22px 24px; border-radius:27px; }
  .controls-hint { display:none; }
  .status { top:80px; }
  .mobile-controls button { width:74px; height:72px; padding:0 10px; }
  .mobile-controls button[data-lane="0"], .mobile-controls button[data-lane="2"] { top:33%; }
  .mobile-controls button[data-lane="1"], .mobile-controls button[data-lane="3"] { top:62%; }
}
@media (max-width:360px) {
  .mobile-controls button { width:66px; height:66px; padding:0 8px; border-radius:19px; }
  .mobile-controls button span { font-size:28px; }
  .mobile-controls button small { font-size:9px; }
  .mobile-controls button[data-lane="0"], .mobile-controls button[data-lane="1"] { left:8px; }
  .mobile-controls button[data-lane="2"], .mobile-controls button[data-lane="3"] { right:8px; }
}
@media (max-height:650px) {
  .menu-panel { padding-top:20px; padding-bottom:18px; }
  .logo-mark { font-size:37px; }
  h1 { font-size:44px; }
  .lead { margin-bottom:12px; }
  .mobile-controls button[data-lane="0"], .mobile-controls button[data-lane="2"] { top:31%; }
  .mobile-controls button[data-lane="1"], .mobile-controls button[data-lane="3"] { top:64%; }
}