/* =============================================================
   MangroveGuard — vibrant PIXEL-ART styling.
   Press Start 2P (display) + VT323 (body) over a neon retro
   palette. Apolownia wordmark stays crisp (logos aren't pixels).
   ============================================================= */
/* self-hosted fonts (no CDN → works fully offline) */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/PressStart2P-latin.woff2') format('woff2');}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/VT323-latin.woff2') format('woff2');}
:root{
  /* MangroveGuard coastal palette */
  --bg:#061C1D;        /* deep night teal */
  --bg2:#0C3030;       /* panel teal */
  --panel:#0C3030;
  --panel2:#164B4A;    /* border teal (raised) */
  --ink:#dff1e8;
  --dim:#9cc2b4;
  --mint:#B9D8CC;
  --lime:#7EE35F;      /* bright mangrove green */
  --lime-d:#2F8E45;    /* dark leaf green */
  --gold:#FFD84A;      /* sunlight yellow */
  --teal:#1E78A8;      /* sea blue */
  --foam:#8EDAF0;      /* foam blue */
  --coral:#E66B2E;     /* warning orange */
  --green:#2F8E45;
  --dark:#03101100;
  --edge:#041315;
  --hi:#164B4A;
  --disp:'Press Start 2P','Courier New',monospace;
  --body:'VT323','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;user-select:none;
  overscroll-behavior:none;
}
#app{position:fixed;inset:0;}

/* ---------- type helpers ---------- */
.eyebrow{font-family:var(--disp);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.5;}

/* Apolownia wordmark — crisp, never pixelated */
.wordmark{image-rendering:auto;height:30px;width:auto;margin-bottom:22px;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));}
.wordmark.sm{height:22px;margin-bottom:16px;}

/* ---------- stage (scaled to fit) ---------- */
#stage{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(var(--scale,1));
  transform-origin:center center;
  background:var(--bg);
  box-shadow:0 0 0 4px var(--edge),0 24px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
}
html.land #stage{width:1280px;height:816px;}
html.port #stage{width:720px;height:1480px;}

/* ---------- HUD ---------- */
#hud{display:none;align-items:center;gap:10px;background:var(--bg2);box-shadow:inset 0 -5px 10px rgba(0,0,0,.22);}
html.land #hud{width:1280px;height:96px;padding:0 16px;border-bottom:4px solid var(--edge);}
/* portrait: HUD sits at the BOTTOM (thumb reach) as a two-row bar */
html.port #hud{width:720px;height:392px;flex-wrap:wrap;align-items:center;align-content:center;gap:8px 10px;
  padding:12px 14px;border-top:4px solid var(--edge);order:2;}
html.port #field-wrap{order:1;}
html.port #sun-box{order:1;}
html.port #shovel-btn{order:2;}
html.port #hud-right{order:3;margin-left:auto;align-items:center;}
/* portrait: top-row controls sized to stay on ONE aligned line above the cards */
html.port #sun-box{font-size:18px;height:58px;min-width:104px;}
html.port .sun-ico{width:18px;height:18px;}
html.port #shovel-btn,html.port #pause-btn{width:56px;height:56px;font-size:24px;}
html.port #super-btn,html.port #advance-btn{width:60px;height:60px;}
html.port #advance-btn{font-size:26px;}
html.port .super-ico{font-size:26px;line-height:60px;}
html.port #hud-right{gap:9px;}
html.port #hud-info{min-width:0;}
html.port #level-label{font-size:11px;white-space:nowrap;}
html.port #wave-label{font-size:13px;white-space:nowrap;margin-top:2px;}
html.port #progress-bar{width:182px;height:12px;}
/* portrait: seed cards wrap into two big, thumb-sized rows */
html.port #seedbar{order:4;flex-basis:100%;flex-wrap:wrap;gap:12px;align-content:center;padding:2px 6px 4px;}
html.port .seed-card{width:148px;height:128px;padding-top:9px;gap:3px;}
html.port .seed-art{width:108px;height:72px;}
html.port .seed-cost{font-size:15px;}
html.port .seed-name{font-size:10px;}
html.land #seedbar{flex:1;}
#sun-box{
  display:flex;align-items:center;gap:8px;
  background:var(--panel);color:var(--gold);
  font-family:var(--disp);font-size:16px;
  padding:0 16px;height:52px;justify-content:center;min-width:104px;
  border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--hi),inset 0 3px 0 rgba(255,255,255,.05),inset 0 -4px 0 rgba(0,0,0,.28);
}
.sun-ico{width:16px;height:16px;background:var(--gold);
  box-shadow:0 0 0 3px rgba(255,210,74,.25), -6px 0 var(--gold),6px 0 var(--gold),0 -6px var(--gold),0 6px var(--gold);}
#seedbar{display:flex;gap:7px;justify-content:center;}
.seed-card{
  position:relative;width:74px;height:80px;cursor:pointer;
  background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--hi),inset 0 3px 0 rgba(255,255,255,.05),inset 0 -4px 0 rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;padding-top:5px;
  overflow:hidden;}
.seed-card:hover{transform:translateY(-3px);}
.seed-card.selected{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 3px var(--gold);transform:translateY(-3px);}
.seed-card.disabled{filter:saturate(.4) brightness(.7);cursor:not-allowed;}
.seed-art{display:block;flex-shrink:0;width:60px;height:40px;}
.seed-cost{font-family:var(--disp);font-size:10px;color:var(--gold);}
.seed-name{font-family:var(--disp);font-size:6.5px;color:var(--dim);line-height:1.3;
  white-space:nowrap;text-transform:uppercase;}
.seed-cd{position:absolute;top:0;left:0;width:100%;height:0;background:rgba(6,18,20,.7);transition:height .12s;}

#shovel-btn,#pause-btn{
  width:50px;height:50px;font-size:20px;cursor:pointer;
  background:var(--panel);border:3px solid var(--edge);color:var(--ink);
  display:flex;align-items:center;justify-content:center;}
#shovel-btn:hover,#pause-btn:hover{background:var(--panel2);}
#shovel-btn.active{box-shadow:0 0 0 3px var(--gold);}

#super-btn{position:relative;width:58px;height:58px;cursor:pointer;
  background:var(--panel);border:3px solid var(--edge);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;}
#super-fill{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--lime),var(--green));transition:height .2s;}
.super-ico{position:relative;z-index:2;font-size:22px;line-height:58px;color:rgba(234,250,240,.45);}
#super-btn.ready{animation:superglow 1.05s ease-in-out infinite;}
#super-btn.ready .super-ico{color:#fff;text-shadow:0 0 8px var(--gold);}
@keyframes superglow{
  0%,100%{box-shadow:0 0 0 3px var(--gold),0 0 12px 2px rgba(255,210,74,.7);transform:translateY(0);}
  50%{box-shadow:0 0 0 4px #fff3b0,0 0 28px 9px rgba(255,210,74,.9);transform:translateY(-2px);}
}

/* in-game "Next Mission" button — appears next to the super button once the
   coastline objective is reached; the game keeps running so you can play on */
#advance-btn{display:none;width:58px;height:58px;cursor:pointer;font-size:24px;
  background:var(--panel);border:3px solid var(--gold);color:var(--gold);
  align-items:center;justify-content:center;
  animation:superglow 1.05s ease-in-out infinite;}
#advance-btn.show{display:flex;}
#advance-btn:hover{background:var(--panel2);}

#hud-right{display:flex;align-items:center;gap:12px;}
#hud-info{color:var(--ink);text-align:right;min-width:188px;}
#level-label{font-family:var(--disp);font-size:11px;color:var(--gold);line-height:1.4;}
#wave-label{font-family:var(--body);font-size:17px;color:var(--dim);margin-top:3px;}
#progress-bar{position:relative;height:10px;width:188px;margin-top:6px;
  background:var(--edge);border:2px solid var(--hi);overflow:hidden;}
#progress-fill{height:100%;width:0;background:var(--lime);transition:width .3s;
  box-shadow:0 0 8px var(--lime);}
#progress-bar .flag{position:absolute;right:-3px;top:-9px;font-size:13px;}
/* coastal-command dashboard meters (landscape) */
#meters{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
html.port #meters{display:none;}
.meter{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.mlab{font-family:var(--disp);font-size:6px;color:var(--dim);width:34px;text-align:right;letter-spacing:.05em;}
.mbar{display:inline-block;width:150px;height:7px;background:var(--edge);border:2px solid var(--hi);overflow:hidden;}
.mbar i{display:block;height:100%;width:100%;transition:width .35s;}
#m-eco{background:var(--lime);box-shadow:0 0 6px rgba(126,227,95,.5);}
#m-sed{background:var(--gold);box-shadow:0 0 6px rgba(255,216,74,.4);}

/* ---------- field ---------- */
#field-wrap{position:relative;}
html.land #field-wrap{width:1280px;height:720px;}
html.port #field-wrap{width:720px;height:1080px;}
#game-canvas{display:block;background:#10363a;touch-action:none;}
html.land #game-canvas{width:1280px;height:720px;}
html.port #game-canvas{width:720px;height:1080px;}
#game-canvas.playing{cursor:crosshair;}

#sea-meter{position:absolute;right:12px;top:14px;width:30px;height:190px;
  background:rgba(6,18,20,.7);border:3px solid var(--edge);overflow:hidden;}
#sea-fill{position:absolute;left:0;bottom:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--teal),#0e6b8a);transition:height .35s;}
.sea-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-family:var(--disp);font-size:6px;color:var(--teal);white-space:nowrap;text-transform:uppercase;}

#tip{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(16px);
  background:var(--edge);color:var(--gold);padding:10px 20px;border:3px solid var(--gold);
  font-family:var(--body);font-size:19px;opacity:0;pointer-events:none;transition:.2s;text-align:center;}
#tip.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- coach marks (Level 0) ---------- */
#coach{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;
  padding-bottom:30px;z-index:8;pointer-events:none;}
#coach.show{display:flex;}
.coach-box{pointer-events:auto;max-width:760px;background:var(--panel);
  border:4px solid var(--gold);box-shadow:0 0 0 4px var(--edge),0 0 24px rgba(255,210,74,.3);
  padding:18px 22px;}
.coach-tag{font-family:var(--disp);font-size:8px;color:var(--gold);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:10px;}
#coach-text{font-family:var(--body);font-size:23px;line-height:1.15;color:var(--ink);}
.coach-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}

/* ---------- pause ---------- */
#pause-overlay{position:absolute;inset:0;background:rgba(6,18,20,.82);
  display:none;align-items:center;justify-content:center;z-index:9;}
#pause-overlay.show{display:flex;}
.pause-card{background:var(--panel);padding:34px 46px;text-align:center;
  border:4px solid var(--edge);box-shadow:0 0 0 4px var(--hi);}
.pause-card h2{font-size:20px;margin-bottom:22px;color:var(--gold);}
.pause-card .btn{display:block;width:250px;margin:9px auto;}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:safe center;padding:40px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:20;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(54,208,212,.12),transparent 55%),
    radial-gradient(90% 70% at 50% 120%,rgba(134,227,91,.1),transparent 55%),
    var(--bg);
}
.screen.active{display:flex;}
.topright{position:absolute;top:24px;right:24px;display:flex;gap:8px;z-index:5;}
.pill{background:var(--panel);border:3px solid var(--edge);padding:8px 12px;
  font-family:var(--disp);font-size:9px;cursor:pointer;color:var(--ink);}
.pill:hover{background:var(--panel2);}
.screen-footer{margin-top:26px;width:100%;text-align:center;flex-shrink:0;
  font-family:var(--disp);font-size:8px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;}

/* ---------- MENU + NAME ---------- */
#menu-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
#screen-menu .menu-inner, #screen-menu .screen-footer{position:relative;z-index:1;}
/* soft scrim so the title/buttons stay readable over the painted background */
#screen-menu .menu-inner{background:radial-gradient(ellipse 78% 68% at 50% 46%,rgba(4,18,20,.74),rgba(4,18,20,0) 76%);padding:28px 46px;border-radius:26px;}
.menu-inner{text-align:center;max-width:760px;display:flex;flex-direction:column;align-items:center;}
.menu-inner.narrow{max-width:520px;}
#menu-eyebrow{margin-bottom:16px;}
#menu-title{font-size:34px;color:var(--lime);letter-spacing:1px;
  text-shadow:4px 4px 0 var(--edge),0 0 22px rgba(134,227,91,.45);}
.big{font-family:var(--disp);font-size:12px;color:var(--gold);margin-top:18px;line-height:1.6;}
.tag{font-family:var(--body);font-size:21px;color:var(--dim);margin-top:10px;max-width:560px;line-height:1.1;}
.menu-buttons{margin-top:30px;display:flex;flex-direction:column;gap:14px;align-items:center;}
.menu-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

#name-input,#city-input{margin-top:22px;width:340px;max-width:80vw;text-align:center;
  font-family:var(--disp);font-size:16px;color:var(--ink);
  background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--hi),inset 0 3px 0 rgba(255,255,255,.05),inset 0 -4px 0 rgba(0,0,0,.28);
  padding:16px 14px;outline:none;text-transform:uppercase;}
#city-input{margin-top:12px;font-size:13px;}
#name-input:focus,#city-input:focus{box-shadow:inset 0 0 0 2px var(--lime),0 0 0 3px var(--lime);}
.feedback-link{display:inline-block;margin-top:20px;font-family:var(--body);font-size:17px;
  color:var(--foam);text-decoration:underline;text-underline-offset:3px;opacity:.92;cursor:pointer;}
.feedback-link:hover{opacity:1;color:#fff;}
.lb-city{display:block;font-family:var(--body);font-size:12px;color:var(--dim);
  text-transform:none;letter-spacing:0;margin-top:1px;}

/* ---------- buttons (8-bit) ---------- */
.btn{font-family:var(--disp);font-size:12px;cursor:pointer;
  padding:16px 26px;border:3px solid var(--edge);
  background:var(--panel);color:var(--ink);min-width:230px;
  box-shadow:4px 4px 0 var(--edge);transition:transform .05s,box-shadow .05s;}
.btn:hover{background:var(--panel2);}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--edge);}
.btn.primary{background:var(--lime);color:#06231a;border-color:#0a3a1f;
  box-shadow:4px 4px 0 #0a3a1f,0 0 18px rgba(134,227,91,.4);}
.btn.primary:hover{background:#9bef72;}
.btn.ghost{background:transparent;color:var(--dim);min-width:auto;box-shadow:4px 4px 0 var(--edge);}
.btn.ghost:hover{color:var(--ink);background:rgba(255,255,255,.04);}
.btn.small{font-size:10px;padding:12px 16px;min-width:auto;box-shadow:3px 3px 0 var(--edge);}
.btn.small:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--edge);}
.btn.small.primary{box-shadow:3px 3px 0 #0a3a1f;}

/* ---------- screen head ---------- */
.screen-head{width:100%;max-width:1000px;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;gap:16px;}
.screen-head h2{font-size:22px;color:var(--gold);text-shadow:3px 3px 0 var(--edge);flex:1;min-width:0;text-align:center;}

/* ---------- level select ---------- */
#level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:1000px;}
.level-card{position:relative;text-align:left;cursor:pointer;
  background:var(--panel);color:var(--ink);padding:18px;min-height:128px;
  border:3px solid var(--edge);box-shadow:4px 4px 0 var(--edge);
  display:flex;flex-direction:column;transition:transform .06s,box-shadow .06s;}
.level-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lime-d);}
.level-card.locked{filter:saturate(.3) brightness(.6);cursor:not-allowed;}
.level-card.locked:hover{transform:none;box-shadow:4px 4px 0 var(--edge);}
.level-card.endless{background:var(--panel2);border-color:var(--teal);box-shadow:4px 4px 0 #0d4c5e;}
.lvl-num{font-family:var(--disp);font-size:22px;color:var(--lime);}
.level-card.endless .lvl-num{color:var(--teal);}
.lvl-name{font-family:var(--disp);font-size:11px;margin-top:10px;color:var(--ink);line-height:1.5;}
.lvl-diff{font-family:var(--disp);font-size:7px;margin-top:auto;padding-top:12px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;}
.lvl-lock{position:absolute;top:14px;right:14px;font-size:14px;}

/* ---------- leaderboard ---------- */
.lb-status{font-family:var(--body);font-size:19px;color:var(--dim);margin-bottom:14px;min-height:22px;}
.lb-list{list-style:none;width:100%;max-width:680px;display:flex;flex-direction:column;gap:7px;}
.lb-row{display:flex;align-items:center;gap:14px;background:var(--panel);
  border:3px solid var(--edge);padding:12px 16px;}
.lb-row.me{border-color:var(--gold);box-shadow:0 0 14px rgba(255,210,74,.25);}
.lb-rank{font-family:var(--disp);font-size:13px;color:var(--gold);width:42px;}
.lb-name{font-family:var(--disp);font-size:11px;color:var(--ink);flex:1;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-meta{font-family:var(--body);font-size:17px;color:var(--dim);}
.lb-score{font-family:var(--disp);font-size:13px;color:var(--lime);}
.lb-row:nth-child(1) .lb-rank{color:#ffe66b;}
.lb-row:nth-child(2) .lb-rank{color:#cfd8dc;}
.lb-row:nth-child(3) .lb-rank{color:#e0a673;}

/* ---------- end screen ---------- */
.end-card{background:var(--panel);text-align:center;padding:36px 46px;max-width:560px;
  border:4px solid var(--edge);box-shadow:0 0 0 4px var(--coral);}
#screen-end.won .end-card{box-shadow:0 0 0 4px var(--lime);}
.end-card h2{font-size:24px;color:var(--coral);text-shadow:3px 3px 0 var(--edge);}
#screen-end.won .end-card h2{color:var(--lime);}
.end-card p{font-family:var(--body);font-size:20px;margin:14px 0 18px;color:var(--dim);line-height:1.1;}
#end-stats{display:flex;justify-content:center;gap:12px;margin-bottom:16px;}
#end-stats div{display:flex;flex-direction:column;gap:6px;background:var(--bg2);
  padding:14px 16px;border:3px solid var(--edge);min-width:92px;}
#end-stats span{font-family:var(--disp);font-size:7px;color:var(--dim);text-transform:uppercase;}
#end-stats b{font-family:var(--disp);font-size:16px;color:var(--gold);}
.end-score{font-family:var(--disp);font-size:13px;color:var(--lime);margin-bottom:22px;line-height:1.6;}
.end-card .menu-buttons{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:0;}
.end-card .btn{min-width:auto;font-size:10px;padding:12px 16px;}

/* ---------- top-left brand link ---------- */
.topleft{position:absolute;top:22px;left:24px;z-index:6;display:flex;align-items:center;gap:14px;}
.brand-link{display:block;opacity:.92;transition:opacity .12s,transform .12s;}
.brand-link:hover{opacity:1;transform:translateY(-1px);}
.topleft .wordmark{height:38px;margin:0;}
.topleft .yagasu-logo{height:48px;width:auto;margin:0;display:block;image-rendering:auto;}

/* ---------- music volume slider ---------- */
.vol-wrap{display:flex;align-items:center;gap:7px;background:var(--panel);
  border:3px solid var(--edge);padding:0 10px;height:36px;}
.vol-ico{font-family:var(--disp);font-size:11px;color:var(--gold);}
input.vol{-webkit-appearance:none;appearance:none;width:84px;height:8px;background:var(--edge);
  border:2px solid var(--hi);cursor:pointer;}
input.vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:16px;background:var(--lime);border:2px solid var(--edge);cursor:pointer;}
input.vol::-moz-range-thumb{width:12px;height:16px;background:var(--lime);border:2px solid var(--edge);cursor:pointer;border-radius:0;}
.pause-vol{margin:0 auto 16px;width:max-content;}

/* ---------- in-field event buttons ---------- */
.event-btn{position:absolute;left:50%;transform:translateX(-50%) translateY(8px);
  z-index:7;display:none;cursor:pointer;font-family:var(--disp);font-size:11px;
  color:#06231a;background:var(--gold);border:3px solid var(--edge);
  box-shadow:4px 4px 0 var(--edge),0 0 18px rgba(255,210,74,.5);padding:12px 18px;
  opacity:0;transition:opacity .2s,transform .2s;}
.event-btn.show{display:block;opacity:1;transform:translateX(-50%) translateY(0);
  animation:eventpulse .8s steps(2) infinite;}
#planting-season{top:118px;}
#replant-campaign{top:46%;background:var(--coral);color:#2a0d06;font-size:12px;
  box-shadow:4px 4px 0 var(--edge),0 0 22px rgba(255,122,92,.6);}
@keyframes eventpulse{50%{transform:translateX(-50%) translateY(-3px);}}

/* ---------- how-to-play fact sheet ---------- */
.howto-body{width:100%;max-width:980px;}
.howto-intro{font-family:var(--body);font-size:21px;line-height:1.15;color:var(--dim);
  background:var(--panel);border:3px solid var(--edge);padding:16px 18px;margin-bottom:16px;}
.ref-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ref-col{background:var(--panel);border:3px solid var(--edge);padding:14px 16px;}
.ref-col h3{font-family:var(--disp);font-size:10px;color:var(--lime);margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em;}
.ref-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:2px solid var(--edge);}
.ref-row:last-child{border-bottom:none;}
.ref-row canvas{background:var(--bg2);border:2px solid var(--edge);flex-shrink:0;}
.ref-row b{font-family:var(--disp);font-size:9px;color:var(--ink);line-height:1.5;}
.ref-row i{font-family:var(--body);font-size:15px;opacity:.55;}
.ref-row small{font-family:var(--body);font-size:16px;color:var(--dim);line-height:1.05;display:block;margin-top:4px;}
.role-badge{display:inline-block;font-family:var(--disp);font-size:6.5px;color:#06231a;background:var(--lime);
  padding:3px 6px;margin-left:6px;text-transform:uppercase;vertical-align:middle;}
.ref-cost{font-family:var(--disp);font-size:8px;color:var(--gold);}
.pending{display:inline-block;margin-top:5px;font-family:var(--disp);font-size:7px;letter-spacing:.06em;
  color:#06231a;background:var(--coral);padding:2px 5px;}

/* ---------- mobile / small screens ---------- */
@media (max-width:820px){
  #level-grid{grid-template-columns:1fr 1fr;}
  .ref-columns{grid-template-columns:1fr;}
  #menu-title{font-size:24px;}
}
@media (max-width:680px){
  .screen{padding:18px;}
  #menu-title{font-size:19px;}
  .big{font-size:10px;margin-top:12px;}
  .tag{font-size:16px;}
  .menu-buttons{margin-top:20px;gap:10px;}
  .btn{font-size:10px;padding:13px 16px;min-width:170px;}
  .btn.ghost{font-size:9px;}
  .screen-head{margin-bottom:18px;}
  .screen-head h2{font-size:15px;}
  .topright{top:12px;right:10px;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:68vw;}
  .pill{font-size:8px;padding:6px 8px;}
  .vol-wrap{height:30px;padding:0 6px;gap:4px;}
  input.vol{width:44px;}
  /* stack the two logos on phones so the bigger YAGASU mark never crowds the top-right controls */
  .topleft{top:12px;left:12px;gap:6px;flex-direction:column;align-items:flex-start;}
  .topleft .wordmark{height:24px;}
  .topleft .yagasu-logo{height:32px;}
  .level-card{min-height:92px;padding:12px;}
  .lvl-num{font-size:16px;}
  .lvl-name{font-size:9px;margin-top:7px;}
  .lvl-diff{font-size:6px;}
  .coach-box{max-width:92vw;padding:14px 16px;}
  #coach-text{font-size:18px;}
  .end-card{padding:24px 22px;}
  .end-card h2{font-size:17px;}
  .lb-name{font-size:9px;}
  #name-input,#city-input{width:88vw;font-size:13px;}
  .feedback-link{font-size:14px;}
}
@media (max-width:540px){
  #level-grid{grid-template-columns:1fr;}
}
/* narrow phones (portrait): keep the title + buttons from clipping */
@media (max-width:440px){
  #screen-menu .menu-inner{padding:20px 14px;}
  #menu-title{font-size:15px;letter-spacing:0;text-shadow:3px 3px 0 var(--edge),0 0 16px rgba(134,227,91,.45);}
  .big{font-size:8px;line-height:1.7;}
  .tag{font-size:13px;}
  .menu-buttons{width:100%;align-items:center;}
  .btn{min-width:0;width:86%;max-width:300px;font-size:10px;padding:13px 10px;}
  /* stack the secondary buttons so long labels (e.g. Bahasa "Papan Peringkat") never overflow/overlap */
  .menu-row{width:86%;max-width:300px;flex-direction:column;gap:10px;flex-wrap:nowrap;}
  .menu-row .btn{flex:none;width:100%;font-size:10px;padding:13px 10px;white-space:normal;line-height:1.2;}
  .btn.ghost{font-size:9px;}
  /* screen headers (leaderboard / how-to) — title on its own centered line so it never
     collides with the back/refresh buttons in any language */
  .screen-head{flex-wrap:wrap;justify-content:center;gap:8px;}
  .screen-head h2{flex-basis:100%;order:-1;font-size:15px;line-height:1.2;margin-bottom:2px;}
  .screen-head .back,.screen-head .pill,#lb-refresh{font-size:9px;padding:9px 12px;min-width:0;width:auto;}
}