*{box-sizing:border-box;}
html,body{margin:0;height:100%;height:100dvh;background:#1c1209;overflow:hidden;overscroll-behavior:none;position:fixed;width:100%;}

@keyframes grfall{0%{transform:translateY(-30px) rotate(0deg);}100%{transform:translateY(105vh) rotate(420deg);}}
@keyframes grpop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.07);}100%{transform:scale(1);opacity:1;}}
@keyframes grpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes grflash{0%{opacity:.95;}100%{opacity:0;}}

input.grin::placeholder{color:rgba(255,255,255,.45);}
input.grin-light::placeholder{color:rgba(30,41,59,.4);}

.app{position:relative;width:100%;height:100dvh;overflow:hidden;background:#1c1209;font-family:'Fredoka',sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;color:#fff;}
.canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.screen[hidden]{display:none !important;}
.pop{animation:grpop .5s ease both;}

/* ---------- Gesture layer (swipe / tap) ---------- */
.gesture{position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;}

/* ---------- HUD ---------- */
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px;padding-top:max(16px,env(safe-area-inset-top));pointer-events:none;}
.hud-card{background:rgba(20,12,5,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:7px 13px;min-width:88px;}
.hud-card--right{text-align:right;}
.hud-label{font-size:10px;letter-spacing:.14em;opacity:.7;font-weight:600;}
.hud-value{font-size:24px;font-weight:700;line-height:1.05;}
.hud-center{text-align:center;}
.hud-speed-row{display:flex;align-items:baseline;gap:6px;justify-content:center;text-shadow:0 3px 12px rgba(0,0,0,.55);}
.hud-speed{font-family:'Bungee',sans-serif;font-size:58px;line-height:.9;}
.hud-unit{font-size:15px;font-weight:700;opacity:.85;}
.hud-mode{margin-top:3px;display:inline-block;background:#16a34a;color:#fff;font-weight:700;font-size:12px;letter-spacing:.16em;padding:4px 16px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.hud-pills{margin-top:8px;display:flex;gap:8px;justify-content:center;align-items:center;}
.hud-coins{background:rgba(20,12,5,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:2px solid rgba(253,224,138,.5);border-radius:999px;padding:3px 12px;font-weight:700;font-size:15px;display:flex;gap:5px;align-items:center;line-height:1;}
.hud-shield{opacity:.25;background:rgba(20,12,5,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:2px solid rgba(125,211,252,.6);border-radius:999px;padding:3px 9px;font-size:15px;line-height:1;}
.hud-shield.is-on{opacity:1;}

/* ---------- Menu ---------- */
.menu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,4,.32),rgba(12,8,4,.8));}
.screen-inner{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));}
.menu,.dead,.won{overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.menu-hero{text-align:center;}
.menu-emoji{font-size:52px;line-height:1;margin-bottom:2px;}
.menu-title{font-family:'Bungee',sans-serif;font-size:clamp(38px,10vw,68px);margin:0;color:#fde68a;text-shadow:0 4px 0 #b45309,0 8px 22px rgba(0,0,0,.6);letter-spacing:.02em;line-height:.95;}
.menu-blurb{font-family:'Fredoka',sans-serif;font-weight:500;font-size:14px;opacity:.85;margin:11px auto 0;max-width:340px;line-height:1.45;}
.accent-gold{color:#fde68a;}
.accent-teal{color:#5eead4;}
.menu-actions{display:flex;flex-direction:column;gap:11px;margin-top:22px;width:min(330px,86vw);}
.btn-mode{border:none;border-radius:18px;color:#fff;font-family:'Bungee',sans-serif;font-size:21px;padding:14px 20px;cursor:pointer;line-height:1.05;}
.btn-mode span{font-family:'Fredoka',sans-serif;font-size:12px;font-weight:500;opacity:.9;letter-spacing:0;}
.btn-mode--classic{background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 7px 0 #15803d,0 12px 22px rgba(0,0,0,.4);}
.btn-mode--infinite{background:linear-gradient(180deg,#14b8a6,#0d9488);box-shadow:0 7px 0 #0f766e,0 12px 22px rgba(0,0,0,.4);}
.btn-mode:active{transform:translateY(4px);}
.btn-mode--classic:active{box-shadow:0 3px 0 #15803d,0 6px 12px rgba(0,0,0,.4);}
.btn-mode--infinite:active{box-shadow:0 3px 0 #0f766e,0 6px 12px rgba(0,0,0,.4);}
.menu-stats{margin-top:13px;font-size:13px;opacity:.72;text-align:center;}
.menu-help{margin-top:16px;font-size:12px;opacity:.55;text-align:center;}

/* ---------- Leaderboard ---------- */
.board{margin-top:18px;width:min(360px,90vw);background:rgba(20,12,5,.6);border:2px solid rgba(255,255,255,.15);border-radius:18px;padding:13px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.board[hidden]{display:none;}
.board-tabs{display:flex;gap:6px;margin-bottom:9px;}
.board-tab{flex:1;text-align:center;font-family:'Bungee',sans-serif;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);border:none;border-radius:9px;padding:6px 0;cursor:pointer;}
.board-tab.is-active{color:#0c0804;cursor:default;}
#tab-classic.is-active{background:#fde68a;}
#tab-infinite.is-active{background:#5eead4;}
.board-empty{text-align:center;font-size:13px;opacity:.5;padding:10px 0;}
.board-empty[hidden]{display:none;}
.board-row{display:flex;align-items:center;gap:9px;padding:5px 0;border-top:1px solid rgba(255,255,255,.08);}
.board-medal{width:24px;font-weight:700;font-size:15px;text-align:center;}
.board-name-wrap{flex:1;min-width:0;}
.board-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:none;padding:0;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;text-align:left;cursor:pointer;}
.board-name--add{color:rgba(255,255,255,.4);font-size:13px;}
.board-edit{width:100%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);border-radius:9px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;padding:5px 9px;outline:none;}
.board-score{font-weight:700;font-size:14px;white-space:nowrap;}
.board-score span{font-size:11px;opacity:.55;}
.board-won{font-size:10px;font-weight:700;letter-spacing:.1em;color:#fde047;background:rgba(253,224,71,.15);padding:2px 8px;border-radius:999px;}

/* ---------- Dead ---------- */
.dead{position:absolute;inset:0;background:rgba(8,5,2,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-align:center;}
.dead .pop{animation-duration:.4s;}
.dead-emoji{font-size:50px;}
.dead-title{font-family:'Bungee',sans-serif;font-size:42px;margin:6px 0 0;color:#fca5a5;text-shadow:0 4px 0 #7f1d1d;}
.dead-sub{margin:14px 0 0;font-size:15px;opacity:.8;}
.final-score{font-family:'Bungee',sans-serif;font-size:58px;color:#fde68a;line-height:1;margin-top:4px;}
.final-unit{font-size:18px;}
.final-coins{margin-top:8px;font-size:15px;font-weight:600;color:#fcd34d;}
.final-coins[hidden]{display:none;}
.final-coins--light{font-weight:700;color:#d97706;}

.name-prompt{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:9px;animation-duration:.4s;}
.name-prompt[hidden]{display:none;}
.name-prompt-label{font-size:13px;font-weight:600;letter-spacing:.04em;opacity:.85;}
.name-prompt-label--light{color:#475569;opacity:1;}
.name-row{display:flex;gap:8px;}
.grin{width:170px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;padding:10px 14px;outline:none;}
.grin-light{width:170px;background:rgba(0,0,0,.05);border:2px solid rgba(0,0,0,.2);border-radius:12px;color:#1e293b;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;padding:10px 14px;outline:none;}
.btn-save{border:none;border-radius:12px;background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#7c2d12;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;padding:10px 18px;box-shadow:0 4px 0 #b45309;cursor:pointer;}
.btn-save--light{background:linear-gradient(180deg,#f59e0b,#d97706);color:#fff;}
.name-confirmed{margin-top:22px;font-size:15px;font-weight:600;color:#86efac;animation-duration:.35s;}
.name-confirmed[hidden]{display:none;}
.name-confirmed b{color:#fde68a;}
.name-confirmed--light{margin-top:20px;font-size:16px;font-weight:700;color:#16a34a;}
.name-confirmed--light b{color:#d97706;}

.end-actions{display:flex;gap:12px;margin-top:28px;}
.end-actions--wrap{flex-wrap:wrap;justify-content:center;}
.btn-pill{border:none;border-radius:999px;color:#fff;font-family:'Bungee',sans-serif;font-size:18px;padding:14px 32px;cursor:pointer;}
.btn-pill--green{background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 6px 0 #15803d;}
.btn-pill--ghost{border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);}
.won .btn-pill{font-size:17px;padding:14px 26px;}
.btn-pill--purple{background:linear-gradient(180deg,#a855f7,#7c3aed);box-shadow:0 6px 0 #6b21a8;line-height:1.15;padding:12px 26px !important;}
.btn-pill--purple span{font-size:10px;font-weight:400;opacity:.85;}
.btn-pill--purple[hidden]{display:none;}
.btn-pill--ghost-light{border:2px solid rgba(0,0,0,.2);background:rgba(0,0,0,.04);color:#1e293b;}
.btn-pill:active{transform:translateY(3px);}
.btn-pill--green:active{box-shadow:0 3px 0 #15803d;}
.btn-pill--purple:active{box-shadow:0 3px 0 #6b21a8;}

/* ---------- Won ---------- */
.won{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#ffffff,#f1f5f9 60%,#e2e8f0);text-align:center;color:#1e293b;}
.won-flash{position:absolute;inset:0;animation:grflash 1.2s ease-out forwards;background:#fff;pointer-events:none;}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.confetti div{position:absolute;top:-30px;animation-name:grfall;animation-timing-function:linear;animation-iteration-count:infinite;}
.won-content{position:relative;}
.won .pop{animation-duration:.6s;}
.won-emoji{font-size:60px;}
.won-title{font-family:'Bungee',sans-serif;font-size:clamp(44px,12vw,82px);margin:8px 0 0;color:#f59e0b;text-shadow:0 4px 0 #fff,0 6px 16px rgba(0,0,0,.18);line-height:.95;}
.won-blurb{margin:12px auto 0;font-size:17px;font-weight:600;max-width:360px;line-height:1.4;}
.won-meta{margin-top:6px;font-size:14px;opacity:.7;}

/* ---------- Focus + motion ---------- */
button:focus-visible,input:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .pop{animation:none;}
  .confetti div{animation:none;display:none;}
  .won-flash{animation:none;opacity:0;}
}

/* ---------- Tablet / iPad (≥700px wide) ---------- */
@media (min-width:700px) and (min-height:600px){
  /* HUD */
  .hud{padding:22px 28px;padding-top:max(22px,env(safe-area-inset-top));}
  .hud-card{padding:10px 18px;min-width:120px;border-radius:20px;}
  .hud-label{font-size:12px;}
  .hud-value{font-size:32px;}
  .hud-speed{font-size:84px;}
  .hud-unit{font-size:20px;}
  .hud-mode{font-size:15px;padding:5px 22px;margin-top:6px;}
  .hud-pills{margin-top:12px;gap:10px;}
  .hud-coins,.hud-shield{font-size:20px;padding:5px 16px;}
  /* Menu */
  .screen-inner{padding:32px;}
  .menu-emoji{font-size:76px;}
  .menu-title{font-size:clamp(68px,9vw,112px);}
  .menu-blurb{font-size:20px;max-width:520px;margin-top:16px;}
  .menu-actions{width:min(460px,70vw);gap:14px;margin-top:30px;}
  .btn-mode{font-size:28px;padding:18px 24px;border-radius:22px;}
  .btn-mode span{font-size:15px;}
  .menu-stats{font-size:17px;margin-top:18px;}
  .menu-help{font-size:15px;margin-top:22px;}
  .board{width:min(520px,80vw);padding:16px 22px;margin-top:24px;border-radius:22px;}
  .board-tab{font-size:14px;padding:9px 0;}
  .board-row{padding:8px 0;gap:12px;}
  .board-medal{width:30px;font-size:19px;}
  .board-name{font-size:19px;}
  .board-name--add{font-size:16px;}
  .board-score{font-size:18px;}
  .board-score span{font-size:13px;}
  .board-won{font-size:12px;}
  .board-edit{font-size:17px;}
  /* Crash / win */
  .dead-emoji{font-size:72px;}
  .dead-title{font-size:60px;}
  .dead-sub{font-size:20px;margin-top:18px;}
  .final-score{font-size:84px;}
  .final-unit{font-size:26px;}
  .final-coins{font-size:19px;}
  .won-emoji{font-size:84px;}
  .won-title{font-size:clamp(72px,10vw,120px);}
  .won-blurb{font-size:22px;max-width:520px;}
  .won-meta{font-size:17px;}
  .name-prompt{margin-top:28px;}
  .name-prompt-label{font-size:16px;}
  .grin,.grin-light{width:240px;font-size:20px;padding:13px 18px;}
  .btn-save{font-size:18px;padding:13px 24px;}
  .name-confirmed{font-size:19px;}
  .end-actions{margin-top:36px;gap:16px;}
  .btn-pill,.won .btn-pill{font-size:22px;padding:18px 40px;}
  .btn-pill--purple{padding:14px 34px !important;}
  .btn-pill--purple span{font-size:12px;}
}

/* ---------- XL + Shop buttons on the menu ---------- */
.accent-pink{color:#f9a8d4;}
.btn-mode--xl{background:linear-gradient(180deg,#f472b6,#db2777);box-shadow:0 7px 0 #9d174d,0 12px 22px rgba(0,0,0,.4);}
.btn-mode--xl:active{box-shadow:0 3px 0 #9d174d,0 6px 12px rgba(0,0,0,.4);}
.btn-mode--shop{background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#7c2d12;box-shadow:0 7px 0 #b45309,0 12px 22px rgba(0,0,0,.4);}
.btn-mode--shop:active{box-shadow:0 3px 0 #b45309,0 6px 12px rgba(0,0,0,.4);}
#tab-xl.is-active{background:#f9a8d4;}

/* ---------- Shop ---------- */
.shop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,4,.78),rgba(12,8,4,.92));overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.screen-inner--top{justify-content:flex-start;padding-top:max(16px,env(safe-area-inset-top));}
.shop-head{width:min(640px,100%);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.shop-title{font-family:'Bungee',sans-serif;font-size:clamp(26px,6vw,44px);margin:0;color:#fde68a;text-shadow:0 3px 0 #b45309,0 6px 16px rgba(0,0,0,.5);}
.btn-back{border:2px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-family:'Bungee',sans-serif;font-size:12px;padding:9px 14px;cursor:pointer;white-space:nowrap;}
.wallet{background:rgba(20,12,5,.6);border:2px solid rgba(253,224,138,.5);border-radius:999px;padding:7px 14px;font-weight:700;font-size:16px;white-space:nowrap;}
.shop-msg{width:min(640px,100%);background:rgba(253,224,138,.14);border:1px solid rgba(253,224,138,.4);border-radius:12px;padding:9px 13px;font-size:14px;font-weight:600;margin-bottom:12px;text-align:center;}
.shop-msg[hidden]{display:none;}
.shop-items{width:min(640px,100%);display:flex;flex-direction:column;gap:10px;}
.shop-item{display:flex;align-items:center;gap:12px;background:rgba(20,12,5,.6);border:2px solid rgba(255,255,255,.14);border-radius:18px;padding:12px 14px;}
.shop-item.is-owned{border-color:rgba(134,239,172,.45);}
.shop-icon{font-size:30px;width:44px;text-align:center;flex:0 0 auto;}
.shop-body{flex:1;min-width:0;}
.shop-name{font-weight:700;font-size:17px;}
.shop-desc{font-size:13px;opacity:.75;margin-top:2px;line-height:1.35;}
.shop-action{flex:0 0 auto;display:flex;align-items:center;}
.btn-buy{border:none;border-radius:12px;background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#7c2d12;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;padding:10px 14px;box-shadow:0 4px 0 #b45309;cursor:pointer;white-space:nowrap;}
.btn-buy.is-poor{filter:grayscale(.6) brightness(.8);}
.btn-buy:active{transform:translateY(2px);box-shadow:0 2px 0 #b45309;}
.btn-toggle{border:2px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;padding:9px 12px;cursor:pointer;white-space:nowrap;}
.btn-toggle.is-on{background:linear-gradient(180deg,#22c55e,#16a34a);border-color:transparent;box-shadow:0 4px 0 #15803d;}
.btn-toggle.is-on:active{transform:translateY(2px);box-shadow:0 2px 0 #15803d;}
.shop-owned{font-size:12px;font-weight:700;letter-spacing:.08em;color:#86efac;background:rgba(134,239,172,.15);padding:6px 10px;border-radius:999px;}
.shop-slider{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;}
.shop-slider input{width:110px;accent-color:#fbbf24;}
.shop-slider span{min-width:40px;text-align:right;}

/* ---------- Draw & Make ---------- */
.draw-layout{width:min(820px,100%);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center;}
.draw-studio{flex:1 1 300px;max-width:420px;background:rgba(20,12,5,.6);border:2px solid rgba(255,255,255,.14);border-radius:18px;padding:14px;}
.draw-side{flex:1 1 260px;max-width:360px;background:rgba(20,12,5,.6);border:2px solid rgba(255,255,255,.14);border-radius:18px;padding:14px;}
.draw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.draw-title{font-weight:700;font-size:16px;}
.draw-preview{width:48px;height:48px;background:rgba(255,255,255,.06);border-radius:8px;image-rendering:pixelated;}
.draw-types{display:flex;gap:6px;margin-bottom:10px;}
.type-btn{flex:1;border:2px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font-family:'Bungee',sans-serif;font-size:11px;padding:8px 0;cursor:pointer;}
.type-btn.is-active{background:#fde68a;color:#0c0804;border-color:transparent;}
.draw-grid{--grid:12;display:grid;grid-template-columns:repeat(var(--grid),1fr);gap:1px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.3);border-radius:8px;overflow:hidden;aspect-ratio:1/1;touch-action:none;user-select:none;}
.px{background:rgba(255,255,255,.04);min-height:0;}
.draw-palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.swatch{width:30px;height:30px;border-radius:8px;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;}
.swatch.is-active{outline:3px solid #fde68a;outline-offset:1px;}
.swatch--erase{background:rgba(255,255,255,.08);color:#fff;font-size:14px;}
.draw-form{display:flex;gap:8px;margin-top:12px;align-items:center;}
.draw-form .grin{flex:1;width:auto;min-width:0;}
.draw-side-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:8px;}
.draw-list{display:flex;flex-direction:column;gap:8px;}
.draw-empty{font-size:13px;opacity:.6;text-align:center;padding:12px 0;}
.draw-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:12px;padding:8px;}
.draw-row.is-off{opacity:.5;}
.draw-thumb{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,.08);image-rendering:pixelated;flex:0 0 auto;}
.draw-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.draw-info b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.draw-info span{font-size:11px;opacity:.6;letter-spacing:.08em;text-transform:uppercase;}
.draw-acts{display:flex;gap:4px;}
.draw-acts button{border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(255,255,255,.06);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:12px;padding:6px 8px;cursor:pointer;}
.draw-acts button.is-danger{color:#fca5a5;border-color:rgba(252,165,165,.4);}

@media (min-width:700px) and (min-height:600px){
  .btn-back{font-size:14px;padding:11px 18px;}
  .wallet{font-size:19px;padding:9px 18px;}
  .shop-items{gap:12px;}
  .shop-item{padding:16px 18px;border-radius:22px;}
  .shop-icon{font-size:38px;width:54px;}
  .shop-name{font-size:21px;}
  .shop-desc{font-size:15px;}
  .btn-buy{font-size:17px;padding:12px 18px;}
  .btn-toggle{font-size:15px;padding:11px 16px;}
  .shop-slider input{width:160px;}
  .draw-studio{max-width:460px;}
  .swatch{width:36px;height:36px;}
}

/* ---------- Mute toggle ---------- */
.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;}
.btn-mute{pointer-events:auto;border:2px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(20,12,5,.6);color:#fff;font-size:18px;line-height:1;padding:8px 11px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.btn-mute.is-muted{opacity:.55;}
.btn-mute--menu{margin-top:14px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;padding:8px 14px;}
@media (min-width:700px) and (min-height:600px){.btn-mute{font-size:22px;padding:10px 14px;}.btn-mute--menu{font-size:16px;}}

/* ---------- Short landscape (phones on their side) ---------- */
@media (max-height:520px){
  .hud{padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
  .hud-card{padding:4px 10px;min-width:70px;border-radius:12px;}
  .hud-label{font-size:9px;}
  .hud-value{font-size:18px;}
  .hud-speed{font-size:38px;}
  .hud-unit{font-size:12px;}
  .hud-mode{font-size:10px;padding:2px 12px;margin-top:2px;}
  .hud-pills{margin-top:4px;gap:6px;}
  .hud-coins,.hud-shield{font-size:12px;padding:2px 9px;}
  .hud-right{gap:4px;}
  .btn-mute{font-size:14px;padding:5px 8px;}
  .screen-inner{padding:14px 24px;}
  .menu-emoji{font-size:34px;}
  .menu-title{font-size:clamp(30px,7vh,44px);}
  .menu-blurb{font-size:12px;margin-top:6px;max-width:460px;}
  .menu-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;width:min(640px,92vw);gap:8px;margin-top:12px;}
  .btn-mode{flex:1 1 45%;font-size:16px;padding:10px 14px;}
  .btn-mode span{font-size:11px;}
  .menu-stats{margin-top:8px;font-size:12px;}
  .menu-help{margin-top:8px;font-size:11px;}
  .btn-mute--menu{margin-top:8px;}
  .board{margin-top:10px;}
  .dead-emoji{font-size:34px;}
  .dead-title{font-size:30px;margin-top:2px;}
  .dead-sub{margin-top:6px;font-size:13px;}
  .final-score{font-size:40px;}
  .final-unit{font-size:14px;}
  .final-coins{font-size:13px;margin-top:4px;}
  .name-prompt{margin-top:10px;gap:6px;}
  .name-confirmed{margin-top:10px;}
  .end-actions{margin-top:12px;}
  .btn-pill,.won .btn-pill{font-size:15px;padding:10px 22px;}
  .won-emoji{font-size:38px;}
  .won-title{font-size:clamp(34px,9vh,56px);}
  .won-blurb{font-size:14px;margin-top:6px;}
}