:root{
  --coral:#ff6f91; --cream:#fff3e0; --coffee:#5a3520; --sun:#ffb85c;
  --mint:#3ecf8e; --sky:#5cc8ff;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:'Fredoka',sans-serif; background:#2a1a12; color:var(--coffee);
  display:flex; flex-direction:column; align-items:center; overflow:hidden;
  touch-action:manipulation;
}
#game-wrap{
  position:relative; width:100%; max-width:760px; flex:1; min-height:0;
  height:calc(100vh - 34px); margin:0 auto; overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,0.5);
}
canvas{ display:block; width:100%; height:100%; }

/* ---------- HUD ---------- */
#hud{
  position:absolute; top:8px; left:8px; right:8px;
  display:flex; gap:8px; align-items:flex-start; pointer-events:none; z-index:5;
}
.hud-item{
  background:rgba(255,255,255,0.9); border-radius:16px; padding:6px 14px;
  font-family:'Baloo 2'; font-weight:800; font-size:18px; color:var(--coffee);
  box-shadow:0 4px 0 rgba(0,0,0,0.12); display:flex; flex-direction:column; align-items:center; line-height:1;
}
.hud-label{ font-size:9px; letter-spacing:1px; color:#b07850; margin-bottom:2px; }
#hud-timer{ margin-left:auto; }
#pause-btn{
  pointer-events:auto; background:rgba(255,255,255,0.9); border:none; border-radius:14px;
  width:44px; height:44px; font-size:20px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,0.12);
}
#combo-wrap{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  width:180px; text-align:center;
}
#combo-bar{
  height:8px; background:linear-gradient(90deg,var(--sun),var(--coral));
  border-radius:4px; width:0; transition:width .2s; box-shadow:0 0 8px var(--sun);
}
#combo-label{ font-family:'Baloo 2'; font-weight:800; font-size:14px; color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,.4); }

/* ---------- Station ---------- */
#station{
  position:absolute; bottom:10px; left:8px; right:8px; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.brew-btn{
  border:none; cursor:pointer; border-radius:18px; padding:8px 4px;
  background:#fff; box-shadow:0 5px 0 rgba(0,0,0,0.18);
  font-family:'Baloo 2'; font-weight:700; font-size:12px; color:var(--coffee);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .08s, box-shadow .08s; user-select:none;
}
.brew-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,0.18); }
.brew-btn .brew-emoji{ font-size:24px; }
.brew-btn.active{
  background:var(--sun); transform:translateY(2px) scale(1.04);
  box-shadow:0 3px 0 #b06b1e, 0 0 16px var(--sun);
}
@media (max-width:420px){ .brew-btn{ font-size:10px; } .brew-btn .brew-emoji{ font-size:20px; } }

/* ---------- Overlays ---------- */
.overlay{
  position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:rgba(42,26,18,0.55); backdrop-filter:blur(3px); padding:16px;
}
.overlay.hidden,.hidden{ display:none !important; }
.panel{
  background:linear-gradient(160deg,#fff6ec,#ffe4c9);
  border-radius:28px; padding:26px 24px; width:100%; max-width:380px;
  text-align:center; box-shadow:0 14px 0 rgba(0,0,0,0.25), inset 0 0 0 4px #fff;
  animation:pop .35s cubic-bezier(.2,1.4,.5,1);
}
@keyframes pop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }

.title{
  font-family:'Baloo 2'; font-weight:800; font-size:44px; color:var(--coffee);
  line-height:1; letter-spacing:-1px;
}
.title .cup{ display:inline-block; animation:bob 1.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-8px) rotate(6deg);} }
.tagline{ font-size:16px; color:#b07850; margin:8px 0 18px; font-weight:600; }
h2{ font-family:'Baloo 2'; font-weight:800; font-size:30px; color:var(--coffee); margin-bottom:14px; }

#name-input{
  width:100%; border:3px solid #ffcf9e; border-radius:16px; padding:12px 16px;
  font-family:'Fredoka'; font-size:16px; margin-bottom:14px; outline:none; text-align:center;
  background:#fff; color:var(--coffee);
}
#name-input:focus{ border-color:var(--coral); }

.big-btn{
  width:100%; border:none; cursor:pointer; border-radius:18px; padding:15px;
  font-family:'Baloo 2'; font-weight:800; font-size:20px; color:#fff;
  background:linear-gradient(180deg,#ff8aa6,var(--coral));
  box-shadow:0 6px 0 #d64d70; transition:transform .1s, box-shadow .1s; margin-bottom:12px;
}
.big-btn:hover{ transform:translateY(-2px) rotate(-1deg); }
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #d64d70; }

.ghost-btn{
  border:none; cursor:pointer; background:rgba(255,255,255,0.7); color:var(--coffee);
  font-family:'Baloo 2'; font-weight:700; font-size:15px; border-radius:14px; padding:10px 16px;
  box-shadow:0 4px 0 rgba(0,0,0,0.1);
}
.ghost-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.1); }
.sub-btns{ display:flex; gap:10px; justify-content:center; }
.sub-btns .ghost-btn{ flex:1; }

.how{ margin-top:16px; background:rgba(255,255,255,0.6); border-radius:16px; padding:14px; }
.how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; font-weight:600; }
.how-grid span{ font-size:22px; }
.tiny{ font-size:12px; color:#b07850; }

.final{ font-family:'Baloo 2'; font-weight:800; font-size:56px; color:var(--coral);
  text-shadow:0 4px 0 rgba(0,0,0,0.1); }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; font-size:14px; font-weight:600; }
.stats span{ background:rgba(255,255,255,0.6); border-radius:12px; padding:8px; }
.stats b{ color:var(--coral); }

.lb-list{ max-height:300px; overflow-y:auto; margin-bottom:16px; }
.lb-row{
  display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:6px;
  background:rgba(255,255,255,0.7); border-radius:14px; font-weight:600;
}
.lb-row.me{ background:linear-gradient(90deg,#ffe4a3,#ffd0dc); box-shadow:0 0 0 2px var(--coral); }
.lb-row .rank{ font-family:'Baloo 2'; font-weight:800; font-size:18px; width:36px; text-align:left; }
.lb-row .lname{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-row .lscore{ font-family:'Baloo 2'; font-weight:800; color:var(--coral); }

#mute-btn{
  position:absolute; bottom:64px; right:10px; z-index:6;
  width:40px; height:40px; border:none; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,0.85); font-size:18px; box-shadow:0 4px 0 rgba(0,0,0,0.12);
}

footer{
  height:34px; display:flex; align-items:center; justify-content:center; width:100%;
  background:#2a1a12;
}
footer a{ color:#ffb85c; font-size:13px; text-decoration:none; font-weight:600; }
footer a:hover{ text-decoration:underline; }