/* MURMUR — Conduct the Sky. UI only; the sky itself is canvas-rendered. */
:root{
  --amber:#ffd257; --amber-deep:#f08c1d; --ink:#0b1026;
  --panel:rgba(10,14,34,.78); --line:rgba(255,210,87,.28);
  --txt:#fdf6e3; --dim:#cfc4a8;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:#0b1026; color:var(--txt);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none;
}
#sky{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair}
/* faint static star-grain over canvas for texture */
#grain{position:fixed; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
#flash{position:fixed; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 55%,rgba(255,90,60,.55),rgba(255,90,60,0) 70%); transition:opacity .35s ease-out}

/* ---------- HUD ---------- */
#hud{position:fixed; top:calc(10px + var(--safe-t)); left:12px; right:12px; display:flex;
  justify-content:space-between; align-items:center; gap:8px; z-index:5; pointer-events:none}
#hud.hidden{display:none}
.hud-left,.hud-right{display:flex; align-items:center; gap:8px; pointer-events:auto}
.hud-chip{display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:linear-gradient(160deg,rgba(20,26,58,.85),rgba(10,14,34,.7));
  border:1px solid rgba(255,210,87,.25); box-shadow:0 2px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  font-size:14px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.hud-chip b{font-variant-numeric:tabular-nums; font-size:15px}
.hud-chip.ghost{opacity:.85}
.hud-chip.ghost b{font-weight:600; color:var(--dim)}
#chip-combo{border-color:rgba(125,240,255,.5); color:#aef4ff; animation:comboPop .3s ease}
#chip-combo.hidden{display:none}
#chip-combo b{color:#d8fbff}
@keyframes comboPop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.icon-btn{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,210,87,.25);
  background:linear-gradient(160deg,rgba(30,38,80,.9),rgba(12,16,38,.8)); color:var(--txt);
  font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 14px rgba(0,0,0,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.icon-btn:hover{border-color:rgba(255,210,87,.6)}
.icon-btn:active{transform:scale(.92)}
#btn-sound{position:relative}
#btn-sound.on::before{content:""; width:14px; height:14px;
  background:radial-gradient(circle at 35% 30%,#fff6d8,#ffcf4d 55%,#c66a00); border-radius:50%;
  box-shadow:0 0 8px rgba(255,210,87,.9)}
#btn-sound.off::before{content:""; width:14px; height:10px;
  border-top:2px solid var(--dim); border-bottom:2px solid var(--dim); border-radius:2px;
  background:linear-gradient(90deg,transparent 42%,var(--dim) 42%,var(--dim) 58%,transparent 58%)}
#btn-sound .wv{display:none}

#beat-hint{position:fixed; left:50%; bottom:calc(26px + var(--safe-b)); transform:translateX(-50%);
  z-index:5; font-size:13px; letter-spacing:.04em; color:#ffe9a8; padding:8px 16px 8px 12px; border-radius:999px;
  background:linear-gradient(160deg,rgba(40,26,8,.85),rgba(20,14,6,.75)); border:1px solid rgba(255,210,87,.4);
  display:flex; align-items:center; gap:8px; pointer-events:none; transition:opacity .5s}
#beat-hint.hidden{opacity:0; visibility:hidden}
#beat-hint span{width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#ffd257 60%,#b34700); animation:beatDot 2.2s infinite}
@keyframes beatDot{0%,100%{transform:scale(.7); box-shadow:0 0 0 0 rgba(255,210,87,.7)}12%{transform:scale(1.25); box-shadow:0 0 0 9px rgba(255,210,87,0)}}

#toast{position:fixed; left:50%; top:22%; transform:translateX(-50%) scale(1); z-index:6; pointer-events:none;
  font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:clamp(22px,4.6vw,38px); color:#fff3d0;
  text-shadow:0 0 18px rgba(255,180,60,.9),0 2px 6px rgba(0,0,0,.6); opacity:0; transition:opacity .3s; white-space:nowrap}
#toast.show{opacity:1}
#toast.gold{color:#ffe9a8}

/* ---------- Overlays ---------- */
.overlay{position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  padding:18px; padding-bottom:calc(18px + var(--safe-b));
  background:radial-gradient(ellipse at 50% 120%,rgba(240,140,29,.16),transparent 60%),rgba(4,6,18,.62);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:1; transition:opacity .35s ease; overflow-y:auto}
.overlay.hidden{opacity:0; visibility:hidden; pointer-events:none}
.panel{width:min(620px,100%); max-height:100%; overflow-y:auto; border-radius:20px 20px 26px 20px;
  background:linear-gradient(165deg,rgba(24,30,66,.96),rgba(10,13,32,.94) 60%,rgba(26,16,8,.93));
  border:1px solid rgba(255,210,87,.3);
  box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),0 0 60px rgba(240,140,29,.12);
  padding:clamp(20px,4vw,36px); text-align:center; scrollbar-width:thin}
.panel.slim{width:min(380px,100%)}
.sun-badge{filter:drop-shadow(0 0 22px rgba(255,190,60,.45))}
.eyebrow{margin:10px 0 2px; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); opacity:.9}
h1{font-family:Georgia,"Times New Roman",Didot,serif; font-weight:700; letter-spacing:.14em;
  font-size:clamp(34px,7vw,52px); margin:.1em 0 .15em;
  background:linear-gradient(180deg,#fff8e2 20%,#ffd257 55%,#e07f16 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 0 34px rgba(255,190,60,.25)}
.tagline{margin:.2em auto 1em; max-width:46ch; line-height:1.55; color:var(--txt); font-size:15px}
.tagline b{color:var(--amber)}
.howto{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left}
.howto li{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:6px 16px 6px 16px;
  background:linear-gradient(150deg,rgba(255,210,87,.09),rgba(125,240,255,.05));
  border:1px solid rgba(255,255,255,.09); font-size:14px; line-height:1.5; color:#f2ead2}
.howto b{color:var(--amber)}
.howto.tight li{padding:9px 12px; font-size:13.5px}
kbd{display:inline-block; padding:1px 7px; border-radius:6px; font-size:12px; font-family:inherit;
  background:linear-gradient(180deg,#3a4470,#232a52); border:1px solid rgba(255,255,255,.2);
  border-bottom-width:2px; color:#fff}
/* animated step icons */
.demo{flex:0 0 52px; width:52px; height:52px; border-radius:14px 14px 14px 4px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 30% 25%,#2b3a7d,#12173a 70%); border:1px solid rgba(255,210,87,.3)}
.demo i{position:absolute; display:block}
.demo-wind i{left:-40%; width:90%; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,transparent,#7df0ff,#ffd257,transparent); animation:windSlide 1.8s linear infinite}
.demo-wind i:nth-child(1){top:26%} .demo-wind i:nth-child(2){top:48%; animation-delay:.35s}
.demo-wind i:nth-child(3){top:70%; animation-delay:.7s}
@keyframes windSlide{from{transform:translateX(-30%)}to{transform:translateX(160%)}}
.demo-pulse i{left:50%; top:50%; width:10px; height:10px; margin:-5px; border-radius:50%;
  border:2px solid #ffd257; animation:pulseDemo 1.8s ease-out infinite}
@keyframes pulseDemo{0%{transform:scale(.4); opacity:1}100%{transform:scale(3.4); opacity:0}}
.demo-feast i{border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff6d8,#ffcf4d 55%,#c66a00);
  box-shadow:0 0 8px rgba(255,210,87,.9); animation:bob 1.6s ease-in-out infinite}
.demo-feast i:nth-child(1){left:8px; top:14px; width:11px; height:11px}
.demo-feast i:nth-child(2){left:22px; top:26px; width:14px; height:14px; animation-delay:.3s}
.demo-feast i:nth-child(3){left:36px; top:10px; width:9px; height:9px; animation-delay:.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.controls-line{display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center; align-items:center;
  font-size:12.5px; color:var(--dim); margin:2px 0 16px}
.controls-line .dot{opacity:.5}
.big-btn{display:inline-block; border:0; cursor:pointer; padding:15px 42px; border-radius:999px;
  font-size:17px; font-weight:800; letter-spacing:.06em; color:#3a1e00;
  background:linear-gradient(180deg,#ffe9a8,#ffc93c 45%,#ef8f1a);
  box-shadow:0 6px 26px rgba(240,150,30,.45),inset 0 1px 0 #fff8, inset 0 -2px 0 #a35a0088;
  transition:transform .12s ease, box-shadow .12s ease}
.big-btn:hover{transform:translateY(-1px); box-shadow:0 10px 32px rgba(240,150,30,.55),inset 0 1px 0 #fff8}
.big-btn:active{transform:translateY(1px) scale(.98)}
.ghost-btn{border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--txt);
  padding:13px 26px; border-radius:14px; font-size:14px; font-weight:600; cursor:pointer}
.ghost-btn:hover{border-color:rgba(255,210,87,.6)}
.btn-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px}
.fineprint{font-size:12px; color:var(--dim); margin:12px 0 0}
#over-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0 4px}
.stat-cell{padding:10px 8px; border-radius:12px 12px 12px 4px;
  background:linear-gradient(150deg,rgba(255,210,87,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1)}
.stat-cell small{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.stat-cell b{font-size:22px; font-variant-numeric:tabular-nums; color:#ffe9a8}

@media (max-width:560px){
  #hud{left:8px; right:8px; gap:6px}
  .hud-left,.hud-right{gap:6px}
  .hud-chip{padding:5px 9px; font-size:12px}
  .hud-chip b{font-size:13px}
  #chip-time,#chip-best{display:none}
  #chip-combo{max-width:96px}
  #chip-combo b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .icon-btn{width:30px; height:30px; font-size:13px}
  .howto li{font-size:13.5px}
  #over-stats{grid-template-columns:repeat(2,1fr)}
  #beat-hint{font-size:12px; white-space:nowrap; max-width:92vw; bottom:calc(18px + var(--safe-b))}
}
@media (prefers-reduced-motion:reduce){
  .demo-wind i,.demo-pulse i,.demo-feast i,#beat-hint span{animation:none}
  .overlay,.big-btn,#toast{transition:none}
}