*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --accent:#FFAA5C;
  --ink:#F4F5F7;
  --muted:#9299A5;
  --dim:#68707E;
  --line:rgba(255,255,255,.1);
}
html,body{margin:0;height:100%;background:#101218;color:var(--ink)}
body{
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden;
  touch-action:manipulation;
  background:
    radial-gradient(80% 80% at 50% 12%,rgba(255,170,92,.11),transparent 70%),
    linear-gradient(180deg,#161922,#0F1117);
}
button{font:inherit;color:inherit;cursor:pointer}
#app{
  width:min(100%,560px);
  min-height:100dvh;
  height:100%;
  margin:auto;
  padding:12px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.title{text-align:center}
.title b{
  display:block;
  font:700 21px 'Bricolage Grotesque',sans-serif;
  color:var(--accent);
  text-shadow:0 0 22px rgba(255,170,92,.35);
}
.title small,.stat span,.status small,.hint{
  font:10px 'Space Mono',monospace;
  color:var(--dim);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.stat{min-width:72px}
.stat.right{text-align:right}
.stat strong{display:block;font:700 25px 'Bricolage Grotesque',sans-serif}
.status{display:flex;justify-content:center;gap:7px}
.status span{
  min-width:64px;
  padding:8px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.035);
}
.status b{display:block;font:700 17px 'Space Mono',monospace}
.status small{display:block;margin-top:3px;font-size:8px;letter-spacing:.1em}
.modes{display:flex;justify-content:center;gap:6px}
.mode{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:700;
  color:#C7CCD5;
}
.mode.on{
  background:rgba(255,170,92,.16);
  border-color:rgba(255,170,92,.45);
  color:var(--accent);
  box-shadow:0 0 16px rgba(255,170,92,.18);
}
.stage{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.prompt{
  height:19px;
  font:700 12px 'Space Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  text-align:center;
}
.board{
  width:min(88vw,460px);
  height:min(46vh,300px);
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:14px 10px 0;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#1A1D26,#13161D);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 50px rgba(0,0,0,.45);
  position:relative;
}
.peg{
  flex:1;
  position:relative;
  border-radius:0 0 12px 12px;
  cursor:pointer;
}
.peg::before{
  content:'';
  position:absolute;
  left:50%;
  top:6px;
  bottom:0;
  width:10px;
  transform:translateX(-50%);
  border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#2A2E3A,#20242E);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.05);
}
.peg::after{
  content:'';
  position:absolute;
  left:-4px;
  right:-4px;
  bottom:0;
  height:12px;
  border-radius:8px;
  background:linear-gradient(180deg,#32374499,#232732);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.peg.goal::after{
  background:linear-gradient(180deg,var(--accent),#C97B36);
  box-shadow:0 0 18px rgba(255,170,92,.45),inset 0 1px 0 rgba(255,255,255,.25);
}
.peg.drop-ok{background:radial-gradient(60% 40% at 50% 100%,rgba(255,170,92,.14),transparent 70%)}
.peg.hint-from::before{background:linear-gradient(180deg,#FFD66B,#B8893A);box-shadow:0 0 14px rgba(255,214,107,.4)}
.disk{
  position:absolute;
  left:50%;
  bottom:10px;
  height:20px;
  margin-left:0;
  border-radius:999px;
  transition:left .22s cubic-bezier(.3,.9,.35,1.15),bottom .22s ease,border-color .15s,box-shadow .15s,filter .15s;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.30),
    inset 0 -4px 0 rgba(0,0,0,.24),
    0 3px 8px rgba(0,0,0,.38);
  pointer-events:none;
}
.disk.lifted{
  filter:brightness(1.22);
  border-color:#fff;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.42),
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 0 22px rgba(255,170,92,.55),
    0 8px 18px rgba(0,0,0,.45);
  z-index:3;
}
.disk.shake{animation:shake .3s ease}
@keyframes shake{
  20%{transform:translateX(-5px)}
  50%{transform:translateX(4px)}
  80%{transform:translateX(-2px)}
}
.hint{
  height:18px;
  text-align:center;
  letter-spacing:.03em;
  text-transform:none;
  font-size:11px;
  color:var(--muted);
}
.controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.controls.secondary{gap:6px}
.button{
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font-size:12.5px;
  font-weight:700;
  color:#D4D9E1;
}
.button:hover{background:rgba(255,255,255,.11)}
.button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#2A1608;
  box-shadow:0 8px 22px rgba(255,170,92,.24);
}
.button.small{min-width:40px;padding:0;font-size:15px}
.button.hiddenbtn{display:none}
.button:disabled{opacity:.45;cursor:default}
.modal{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(8,10,13,.76);
  backdrop-filter:blur(8px);
  z-index:5;
}
.modal[hidden]{display:none}
.modal-card{
  width:min(420px,100%);
  max-height:min(80vh,640px);
  overflow:auto;
  padding:26px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:linear-gradient(180deg,#1B1F29,#14171E);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  text-align:center;
}
.modal-card h2{margin:0 0 6px;font:700 27px 'Bricolage Grotesque',sans-serif}
.modal-card p{margin:8px 0;color:#B9C0CB;line-height:1.55;font-size:13.5px}
.bigscore{margin:12px 0 4px;color:var(--accent);font:700 46px 'Bricolage Grotesque',sans-serif}
.stars-row{font-size:28px;letter-spacing:.12em;color:#FFD66B;margin:8px 0}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .button{flex:1}
.level-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  margin-top:14px;
}
.level-btn{
  aspect-ratio:1;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font:700 13px 'Space Mono',monospace;
  color:#D4D9E1;
}
.level-btn.done{border-color:rgba(255,170,92,.4);color:var(--accent)}
.level-btn.current{background:rgba(255,170,92,.18);border-color:var(--accent)}
.level-btn.locked{opacity:.35}
.size-row{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
@media(max-height:700px){
  #app{gap:7px}
  .board{height:min(40vh,250px)}
  .status{gap:5px}
  .status span{padding:5px 6px;min-width:58px}
  .stage{gap:6px}
  .modes{margin-bottom:0}
  .disk{height:17px}
}
@media(max-width:380px){
  .button{padding:0 8px;font-size:11px}
  .board{width:calc(100vw - 28px);height:min(42vh,240px);gap:7px;padding:12px 8px 0}
  .level-grid{grid-template-columns:repeat(6,1fr);gap:5px}
  .level-btn{font-size:10px}
  .disk{height:16px}
}