/* ============================================================
   FISH TYCOON — Reef & River Edition
   UI theme: deep-sea glass + brass accents
   ============================================================ */

:root{
  --bg-0:#04121c;
  --bg-1:#07202f;
  --bg-2:#0a2d40;
  --glass:rgba(9,38,54,.72);
  --glass-2:rgba(11,46,66,.86);
  --stroke:rgba(120,220,255,.18);
  --stroke-2:rgba(120,220,255,.32);
  --text:#dff3fb;
  --text-dim:#8fb6c6;
  --gold:#e9b949;
  --gold-2:#ffd97a;
  --cyan:#4fd8ef;
  --teal:#1fb6a6;
  --coral:#ff7a6b;
  --green:#5ddc8f;
  --red:#ff5f6d;
  --violet:#b58cff;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --r:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 700px at 20% -10%, #0d3c55 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 20%, #12405a 0%, transparent 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  color:var(--text);
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:13px; overflow:hidden; user-select:none;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:.4px}
button{font-family:inherit;color:inherit;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb{background:rgba(90,180,215,.35);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,215,255,.55)}

#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* ---------------- HUD ---------------- */
#hud{
  display:flex;align-items:center;gap:18px;
  padding:8px 14px;
  background:linear-gradient(180deg,rgba(6,30,44,.96),rgba(6,26,38,.82));
  border-bottom:1px solid var(--stroke);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  z-index:30;
  flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:10px;min-width:210px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(145deg,#0e4d6b,#08303f);
  border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.4);
}
.brand-txt h1{font-size:15px;letter-spacing:2.2px;
  background:linear-gradient(90deg,var(--gold-2),#fff6d8 40%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.brand-txt span{font-size:9.5px;color:var(--text-dim);letter-spacing:1.6px;text-transform:uppercase}

.hud-stats{display:flex;gap:10px;flex:1;justify-content:center;flex-wrap:wrap}
.stat{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:5px 12px;border-radius:11px;min-width:118px;
  background:var(--glass);border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.stat-ico{font-size:17px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.stat-body{display:flex;flex-direction:column;line-height:1.12}
.stat-body b{font-size:14px;color:var(--gold-2);font-variant-numeric:tabular-nums}
.stat-body i{font-size:10.5px;color:var(--text-dim);font-style:normal;letter-spacing:.6px}
.xpbar{
  position:absolute;left:6px;right:6px;bottom:2px;height:3px;border-radius:3px;
  background:rgba(0,0,0,.45);overflow:hidden
}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--cyan));transition:width .35s}
.stat.pulse{animation:pulseGlow .6s ease}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(233,185,73,.55)}100%{box-shadow:0 0 0 14px rgba(233,185,73,0)}}

.hud-actions{display:flex;gap:7px;align-items:center}
.hbtn{
  display:flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:11px;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  background:linear-gradient(180deg,rgba(18,66,90,.9),rgba(10,40,56,.9));
  border:1px solid var(--stroke);transition:.16s;white-space:nowrap;
}
.hbtn span{font-size:14px}
.hbtn em{
  font-style:normal;background:var(--gold);color:#20160a;border-radius:8px;
  padding:0 5px;font-size:10px;font-weight:800
}
.hbtn:hover{transform:translateY(-1px);border-color:var(--stroke-2);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.hbtn.active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(233,185,73,.4) inset,0 6px 16px rgba(0,0,0,.5)}
/* Fullscreen toggle: lit differently once the API session is live, so the
   player can tell "already chromeless" from "still has an address bar". */
.hbtn.on{border-color:var(--gold);background:linear-gradient(180deg,#2a4a5e,#16303f);color:#ffe9b0}
/* One-line nudge toward fullscreen. Sits over the tank, never blocks input
   (pointer-events:none) and self-hides once the API session or the installed
   PWA makes it moot — see FT.Fullscreen.sync(). */
.fs-hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding:6px 12px;border-radius:999px;font-size:11px;letter-spacing:.2px;
  background:rgba(4,20,31,.82);border:1px solid var(--stroke-2);color:var(--text-dim);
  pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
  backdrop-filter:blur(3px);z-index:6;transition:opacity .25s ease
}
.fs-hint.hidden{opacity:0}
@media (max-width:520px){.fs-hint{font-size:10px;padding:5px 10px}}

/* ---------------- STAGE ---------------- */
#stage{flex:1;display:flex;min-height:0;position:relative}

#leftCol{
  width:236px;flex:0 0 236px;padding:10px;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;border-right:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(5,24,35,.7),rgba(4,18,28,.55));
}
.panel{
  background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r);
  padding:10px;box-shadow:var(--shadow)
}
.panel-title{
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:8px;display:flex;align-items:center;gap:6px
}
.panel-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--stroke-2),transparent)}

.tablist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.tab{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;
  background:rgba(0,0,0,.22);border:1px solid transparent;font-size:11.5px;text-align:left;width:100%;
  transition:.15s
}
.tab:hover{background:rgba(30,90,120,.35)}
.tab.active{border-color:var(--cyan);background:rgba(30,120,160,.35);box-shadow:0 0 0 1px rgba(79,216,239,.25) inset}
.tab .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.tab small{margin-left:auto;color:var(--text-dim);font-size:10px}
.tab.locked{opacity:.5}

.gauge{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:11px}
.gauge label{width:74px;color:var(--text-dim);font-size:10.5px}
.gauge .bar{flex:1;height:7px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden}
.gauge .bar i{display:block;height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#2fd18f,#5ddc8f);transition:width .5s,background .5s}
.gauge .val{width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-size:10.5px}
.gauge[data-g="clean"] .bar i{background:linear-gradient(90deg,#2fd18f,#7ef0b0)}
.gauge[data-g="oxygen"] .bar i{background:linear-gradient(90deg,#3aa9ff,#7fd8ff)}
.gauge[data-g="temp"] .bar i{background:linear-gradient(90deg,#ffb347,#ff7a6b)}
.gauge[data-g="beauty"] .bar i{background:linear-gradient(90deg,var(--violet),#ff9dd8)}
.gauge.warn .bar i{background:linear-gradient(90deg,#ffb347,#ffd97a)!important}
.gauge.bad .bar i{background:linear-gradient(90deg,#ff3b3b,#ff7a6b)!important}
.gauge.bad .val{color:var(--red)}

.caprow{display:flex;justify-content:space-between;font-size:11px;margin:9px 0 4px;color:var(--text-dim)}
.caprow b{color:var(--text)}
.capbar{height:6px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden}
.capbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .4s}
.capbar.full i{background:linear-gradient(90deg,#ff8a3d,#ff4d5e)}
.tips{font-size:10.5px;color:var(--text-dim);margin-top:9px;line-height:1.5;border-top:1px dashed var(--stroke);padding-top:7px}
.tips b{color:var(--gold-2)}
#tankLogWrap{flex:1;min-height:120px;display:flex;flex-direction:column}
.loglist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-size:10.5px;line-height:1.6;color:var(--text-dim)}
.loglist li{padding:3px 0;border-bottom:1px dotted rgba(120,220,255,.09)}
.loglist li b{color:var(--cyan)}

/* ---------------- TANK CANVAS ---------------- */
#tankWrap{flex:1;position:relative;min-width:0;overflow:hidden;background:#02121b}
/* Hold-and-drag on a canvas needs the browser to stop guessing: without these
   a 260ms press is interpreted as the start of a scroll/long-press menu and
   the ornament never gets lifted. `user-select`/`-webkit-touch-callout` kill
   the iOS "Copy / Look Up" popover that fires on a long press. */
#tank{
  display:block;width:100%;height:100%;cursor:crosshair;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#tank.grab{cursor:grab}
#tank.grabbing{cursor:grabbing}
#tank.feed{cursor:cell}
#tank.net{cursor:pointer}
#tank.decor{cursor:move}

.tooltip{
  position:absolute;pointer-events:none;z-index:40;
  background:rgba(6,26,38,.94);border:1px solid var(--stroke-2);border-radius:10px;
  padding:7px 10px;font-size:11px;line-height:1.5;box-shadow:var(--shadow);max-width:250px;
  backdrop-filter:blur(6px)
}
.tooltip b{color:var(--gold-2)}
.tooltip .tname{font-size:12.5px;font-weight:700;margin-bottom:3px;display:block}
.tooltip .row{display:flex;justify-content:space-between;gap:12px;color:var(--text-dim)}
.tooltip .row b{color:var(--text)}
.tooltip .bar{height:5px;border-radius:5px;background:rgba(0,0,0,.5);overflow:hidden;margin:3px 0 5px}
.tooltip .bar i{display:block;height:100%}
.hidden{display:none!important}

.cursor-hint{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(233,185,73,.92);color:#22180a;font-weight:700;font-size:11px;
  padding:5px 14px;border-radius:20px;z-index:35;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.5);animation:fadeSlide .3s ease
}
@keyframes fadeSlide{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

#floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:36}
.floater{
  position:absolute;font-weight:800;font-size:15px;text-shadow:0 2px 6px rgba(0,0,0,.8);
  animation:floatUp 1.15s ease-out forwards;white-space:nowrap
}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px) scale(.85)}18%{opacity:1;transform:translateY(0) scale(1.08)}100%{opacity:0;transform:translateY(-46px) scale(1)}}

/* ---------------- RIGHT PANEL ---------------- */
#rightCol{
  width:360px;flex:0 0 360px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(7,32,46,.97),rgba(5,22,33,.97));
  border-left:1px solid var(--stroke);box-shadow:-14px 0 40px rgba(0,0,0,.5);
  transition:margin-right .28s cubic-bezier(.4,0,.2,1);z-index:25
}
#rightCol.closed{margin-right:-360px}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(16,58,80,.7),transparent)
}
.panel-head h3{font-size:13.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-2)}
.x{
  width:28px;height:28px;border-radius:9px;background:rgba(0,0,0,.3);
  border:1px solid var(--stroke);font-size:12px;transition:.15s
}
.x:hover{background:rgba(255,95,109,.3);border-color:var(--red)}
.panel-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}

.sec-title{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-dim);margin:6px 0 2px;display:flex;align-items:center;gap:8px}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--stroke-2),transparent)}

.card{
  display:flex;gap:10px;padding:9px;border-radius:12px;
  background:rgba(0,0,0,.24);border:1px solid var(--stroke);transition:.15s;align-items:center
}
.card:hover{border-color:var(--stroke-2);background:rgba(20,64,88,.38)}
.card.sel{border-color:var(--gold);background:rgba(233,185,73,.12)}
.card.locked{opacity:.45;filter:grayscale(.6)}
.card canvas{width:62px;height:44px;flex:0 0 62px;border-radius:9px;background:rgba(2,18,26,.75);border:1px solid rgba(120,220,255,.1)}
.card .cinfo{flex:1;min-width:0}
.card .cname{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.card .csub{font-size:10px;color:var(--text-dim);margin-top:2px;line-height:1.45}
.card .cprice{color:var(--gold-2);font-weight:800;font-size:12px;white-space:nowrap}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.chip{
  font-size:9px;padding:2px 7px;border-radius:20px;background:rgba(120,220,255,.12);
  border:1px solid rgba(120,220,255,.22);color:#bfe9f7;letter-spacing:.3px
}
.chip.gold{background:rgba(233,185,73,.16);border-color:rgba(233,185,73,.4);color:var(--gold-2)}
.chip.violet{background:rgba(181,140,255,.16);border-color:rgba(181,140,255,.4);color:#d9c6ff}
.chip.green{background:rgba(93,220,143,.14);border-color:rgba(93,220,143,.35);color:#a8f5c8}
.chip.red{background:rgba(255,95,109,.15);border-color:rgba(255,95,109,.4);color:#ffb3b8}

.row{display:flex;gap:7px;flex-wrap:wrap}
.row.tight{gap:5px}
button.mini{
  padding:6px 11px;border-radius:9px;font-size:11px;font-weight:600;transition:.15s;
  /* min-width keeps short labels ("Ya", "OK") from collapsing into a target
     too small to hit with a thumb — the modal's confirm button measured 40px. */
  min-width:44px;min-height:32px;
  background:linear-gradient(180deg,rgba(24,80,108,.9),rgba(12,46,64,.9));border:1px solid var(--stroke)
}
button.mini:hover{transform:translateY(-1px);border-color:var(--stroke-2)}
button.mini.wide{width:100%;justify-content:center;display:flex;gap:6px}
button.mini.gold{background:linear-gradient(180deg,#f0c463,#c99321);border-color:#ffdf9a;color:#241a05}
button.mini.gold:hover{filter:brightness(1.08)}
button.mini.danger{background:linear-gradient(180deg,#a83a48,#7a2531);border-color:#ff8b96}
button.mini.ghost{background:rgba(0,0,0,.25)}
button.mini:disabled{opacity:.4;cursor:not-allowed;transform:none}

.tabsRow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:4px}
.tabd{
  padding:5px 10px;border-radius:9px;font-size:10.5px;font-weight:600;
  background:rgba(0,0,0,.28);border:1px solid var(--stroke);transition:.15s
}
.tabd.active{background:linear-gradient(180deg,rgba(30,120,160,.8),rgba(16,70,96,.8));border-color:var(--cyan);color:#eafcff}
.tabd:hover{border-color:var(--stroke-2)}

/* dex */
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.dexcell{
  border-radius:11px;padding:7px;text-align:center;border:1px solid var(--stroke);
  background:rgba(0,0,0,.24);transition:.15s;position:relative;overflow:hidden
}
.dexcell:hover{border-color:var(--stroke-2);transform:translateY(-2px)}
.dexcell.unknown{opacity:.5}
.dexcell.unknown .dxname{color:var(--text-dim);font-style:italic}
.dexcell.magic{border-color:rgba(233,185,73,.55);box-shadow:0 0 14px rgba(233,185,73,.18) inset}
.dexcell canvas{width:100%;height:46px;display:block;border-radius:8px}
.dxname{font-size:9.5px;margin-top:4px;line-height:1.25;font-weight:600}
.dxr{font-size:8.5px;color:var(--text-dim)}
.stars{color:var(--gold);font-size:9px;letter-spacing:1px}

/* quest */
.quest{display:flex;gap:9px;align-items:center;padding:9px;border-radius:12px;background:rgba(0,0,0,.24);border:1px solid var(--stroke)}
.quest .qico{font-size:22px}
.quest .qbody{flex:1;min-width:0}
.quest .qname{font-size:11.5px;font-weight:700}
.quest .qdesc{font-size:10px;color:var(--text-dim);margin-top:2px}
.quest.done{border-color:rgba(93,220,143,.5);background:rgba(93,220,143,.09)}

/* ---------------- TOOLBAR ---------------- */
#toolbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 14px;border-top:1px solid var(--stroke);
  background:linear-gradient(0deg,rgba(6,28,40,.97),rgba(8,36,52,.86));z-index:30
}
.tools{display:flex;gap:7px;flex-wrap:wrap}
.tool{
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:66px;
  padding:6px 9px;border-radius:11px;font-size:9.5px;letter-spacing:.3px;
  background:linear-gradient(180deg,rgba(18,66,90,.85),rgba(10,40,56,.85));
  border:1px solid var(--stroke);transition:.15s
}
.tool span{font-size:16px;line-height:1.1}
.tool i{font-style:normal;color:var(--text-dim)}
.tool:hover{transform:translateY(-2px);border-color:var(--stroke-2)}
.tool.active{border-color:var(--gold);background:linear-gradient(180deg,rgba(233,185,73,.28),rgba(120,90,20,.28));box-shadow:0 0 14px rgba(233,185,73,.25)}
.tool.active i{color:var(--gold-2)}
.tool-right{display:flex;align-items:center;gap:8px}
.switch{display:inline-flex;align-items:center;cursor:pointer}
.switch input{display:none}
.switch span{
  display:grid;place-items:center;width:34px;height:30px;border-radius:10px;font-size:14px;
  background:rgba(0,0,0,.3);border:1px solid var(--stroke);opacity:.5;transition:.15s
}
.switch input:checked + span{opacity:1;border-color:var(--cyan);background:rgba(79,216,239,.18);box-shadow:0 0 10px rgba(79,216,239,.25)}

/* ---------------- MODAL ---------------- */
.modal{position:fixed;inset:0;background:rgba(2,10,16,.74);display:grid;place-items:center;z-index:90;backdrop-filter:blur(4px)}
.modal-box{
  width:min(680px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(9,38,54,.98),rgba(5,22,33,.98));
  border:1px solid var(--stroke-2);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden;
  animation:popIn .22s cubic-bezier(.2,1.3,.5,1)
}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(20,72,98,.6),transparent)}
.modal-head h2{font-size:15px;letter-spacing:1.2px;color:var(--gold-2)}
.modal-body{padding:16px 18px;overflow-y:auto;font-size:12px;line-height:1.65}
.modal-body h3{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cyan);margin:14px 0 6px}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin:0 0 9px;color:#c9e6f2}
.modal-body ul{margin:0 0 9px;padding-left:20px;color:#c9e6f2}
.modal-body li{margin-bottom:4px}
.modal-body code{background:rgba(0,0,0,.45);padding:1px 6px;border-radius:6px;font-size:11px;color:var(--gold-2)}
.modal-body .kbd{display:inline-block;background:rgba(255,255,255,.1);border:1px solid var(--stroke-2);border-bottom-width:2px;
  border-radius:6px;padding:0 6px;font-size:10.5px;font-weight:700}
.modal-foot{padding:12px 18px;border-top:1px solid var(--stroke);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ---------------- TOASTS ---------------- */
#toasts{position:fixed;right:16px;bottom:76px;display:flex;flex-direction:column-reverse;gap:8px;z-index:95;pointer-events:none}
.toast{
  min-width:200px;max-width:320px;padding:9px 13px;border-radius:12px;font-size:11.5px;
  background:linear-gradient(180deg,rgba(12,52,72,.97),rgba(7,32,46,.97));
  border:1px solid var(--stroke-2);border-left:3px solid var(--cyan);
  box-shadow:var(--shadow);animation:toastIn .28s ease
}
.toast b{display:block;color:var(--gold-2);font-size:11.5px;margin-bottom:1px}
.toast.good{border-left-color:var(--green)}
.toast.bad{border-left-color:var(--red)}
.toast.gold{border-left-color:var(--gold)}
.toast.magic{border-left-color:var(--violet);box-shadow:0 0 26px rgba(181,140,255,.35)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ---------------- FX (achievement) ---------------- */
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:96}
.achv{
  position:absolute;left:50%;top:22%;transform:translateX(-50%);
  padding:14px 26px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(20,70,95,.97),rgba(8,34,48,.97));
  border:1px solid var(--gold);box-shadow:0 0 40px rgba(233,185,73,.45);
  animation:achvIn 2.6s ease forwards
}
.achv .t{font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.achv .n{font-size:17px;font-weight:800;color:#fff;margin-top:3px}
.achv .d{font-size:11px;color:var(--text-dim);margin-top:2px}
@keyframes achvIn{0%{opacity:0;transform:translate(-50%,-14px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px) scale(.98)}}

.sparkle{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none}

/* ---------------- RESPONSIVE ---------------- */

/* --- Tablet / small laptop --- */
@media (max-width:1180px){
  #leftCol{width:200px;flex-basis:200px}
  #rightCol{width:320px;flex-basis:320px}
  #rightCol.closed{margin-right:-320px}
}

/* --- Narrow windows / phone portrait --- */
@media (max-width:900px){
  #leftCol{display:none}
  .brand-txt span{display:none}
  .brand{min-width:0}
}

/* ============================================================
   PHONE LANDSCAPE — the critical case.
   Short + wide viewport: the canvas must own the screen, so
   every side panel becomes a floating overlay instead of a
   flex sibling that squeezes the tank.
   Triggered by available HEIGHT, not width.
   ============================================================ */
@media (max-height:620px) and (orientation:landscape){

  /* dvh so mobile Chrome's address bar can't push the toolbar off-screen */
  #app{height:100vh;height:100dvh}

  /* ---------- HUD: one thin row, never wraps ---------- */
  #hud{padding:4px 8px;gap:6px}
  .brand{min-width:0;flex:0 1 auto;gap:6px}
  .brand-mark{width:28px;height:28px;border-radius:8px;font-size:15px}
  .brand-txt h1{font-size:11px;letter-spacing:1.2px}
  .brand-txt span{display:none}

  .hud-stats{gap:4px;flex:1 1 auto;flex-wrap:nowrap;justify-content:center;overflow:hidden}
  .stat{padding:3px 8px;gap:5px;min-width:0;border-radius:9px;flex:0 0 auto}
  .stat-ico{font-size:13px}
  .stat-body b{font-size:12px}
  .stat-body i{font-size:10px;letter-spacing:.2px;white-space:nowrap}
  .xpbar{left:4px;right:4px;bottom:0;height:2px}
  #statRep{display:none}                       /* reputation is the dispensable one */

  /* Buttons keep their label: an unlabelled icon row is guesswork on a phone.
     Height is raised to a comfortable tap target instead of a 21px strip. */
  .hud-actions{gap:4px;flex:0 0 auto}
  .hbtn{padding:0 9px;height:38px;font-size:12px;gap:5px;border-radius:10px}
  .hbtn span{font-size:15px}
  .hbtn em{font-size:9.5px;padding:0 4px}

  /* ---------- LEFT column: gone (canvas needs the width) ---------- */
  #leftCol{display:none}

  /* ---------- RIGHT panel: floats OVER the canvas ---------- */
  #rightCol{
    position:absolute;top:0;right:0;bottom:0;
    width:min(430px,64vw);flex:0 0 auto;
    box-shadow:-18px 0 44px rgba(0,0,0,.62);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
  }
  #rightCol.closed{margin-right:0;transform:translateX(102%)}
  .panel-head{padding:9px 12px}
  .panel-head h3{font-size:13px;letter-spacing:1px}
  /* 12px is the floor for comfortable reading on a phone; 9.8px was below it.
     line-height 1.4 keeps two-line bullets compact instead of sprawling. */
  .panel-body{padding:11px 13px;font-size:12px;line-height:1.4;gap:8px;overflow-y:auto}
  .panel-body h3{font-size:11px;letter-spacing:1.1px;margin:9px 0 4px}
  .panel-body ul{padding-left:18px;margin:0 0 6px}
  .panel-body li{margin-bottom:3px}
  .panel-body p{margin:0 0 8px}
  /* The panel close ✕ was 34px here — below the 44px thumb floor used
     everywhere else in this range. */
  .x{width:44px;height:44px;font-size:15px}

  /* ---------- Toolbar: 44px tap targets ---------- */
  #toolbar{padding:5px 8px;gap:6px}
  .tools{gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tools::-webkit-scrollbar{display:none}
  .tool{
    min-width:48px;min-height:44px;justify-content:center;
    padding:4px 8px;gap:0;border-radius:12px;
  }
  .tool span{font-size:19px;line-height:1}
  .tool i{display:none}                        /* label hidden, icon sized for the tap */
  .tool-right{gap:6px;flex:0 0 auto}
  .switch span{width:44px;height:44px;font-size:17px;border-radius:11px}
  .tool-right .mini{width:44px;height:44px;padding:0;font-size:17px;display:grid;place-items:center}

  /* ---------- Floating bits must fit a short screen ---------- */
  .tooltip{max-width:min(255px,58vw);font-size:10.5px;padding:7px 9px}
  .tooltip .tname{font-size:11px}
  .tooltip .row{font-size:10px}

  .modal-box{width:min(600px,94vw);max-height:94vh;max-height:94dvh;border-radius:14px}
  .modal-head{padding:10px 14px}
  .modal-head h2{font-size:13px}
  .modal-body{padding:12px 14px;font-size:12px;line-height:1.5}
  .modal-body h3{font-size:10.5px;letter-spacing:1.1px;margin:10px 0 5px}
  .modal-body ul{padding-left:18px;margin:0 0 8px}
  .modal-body li{margin-bottom:3px}
  .modal-foot{padding:10px 14px}

  #toasts{right:8px;bottom:56px}
  .toast{min-width:0;max-width:min(280px,70vw);padding:7px 10px;font-size:10.5px}
  .achv{padding:10px 18px}
  .achv .n{font-size:14px}
  .achv .d{font-size:10px}
}

/* ============================================================
   VERY SHORT (≤ 430px tall) — browser chrome eats even more height.
   Rule: reclaim space with PADDING and GAPS, never by shrinking type
   below ~11px or tap targets below 36px. The previous version went to
   8px labels and 30px buttons, which is what made the phone UI feel
   like a wall of cramped micro-text.
   ============================================================ */
@media (max-height:430px) and (orientation:landscape){
  #hud{padding:3px 7px;gap:5px}
  .brand-txt{display:none}
  .brand-mark{width:26px;height:26px;font-size:14px}

  /* Stats: keep the label readable, drop the least useful stat instead of
     shrinking everything. `#statRep` is already hidden in this range. */
  .hud-stats{gap:3px}
  .stat{padding:2px 7px;gap:4px}
  .stat-ico{font-size:12px}
  .stat-body b{font-size:11.5px}
  .stat-body i{font-size:9.5px}

  /* Toolbar: same 44px thumb floor as the HUD. 42x36 measured 42x36 on a
     740x360 phone and missed taps constantly; the row is horizontal so the
     extra 8px of height costs nothing in usable tank area. */
  #toolbar{padding:4px 7px;gap:5px}
  .tool{min-width:44px;min-height:44px;padding:3px 7px;border-radius:10px}
  .tool span{font-size:17px}
  /* 44px is the minimum comfortable thumb target (Apple HIG / Material). The
     audit flagged every HUD button here at 34px, which is why taps kept
     missing on a phone in landscape. Height costs 10px total across the bar;
     that is cheaper than a mis-tap every other press. */
  .hbtn{height:44px;min-width:44px;padding:0 10px;font-size:11.5px;justify-content:center}
  .hbtn span{font-size:14px}
  .switch span{width:44px;height:44px;font-size:15px}
  .tool-right .mini{width:44px;height:44px;font-size:15px}
  .x{width:44px;height:44px;font-size:16px}
  button.mini{min-height:44px;padding:10px 13px;font-size:12px}
  .tabd{min-height:44px;padding:0 12px}
  #rightCol{width:min(400px,68vw)}
}

/* ============================================================
   PHONE PORTRAIT — the rotate overlay owns the screen, but the
   game must still be usable if the user dismisses/ignores it.
   ============================================================ */
@media (max-width:620px) and (orientation:portrait){
  #hud{flex-wrap:wrap;gap:6px;padding:6px 8px}
  .brand{min-width:0}
  .brand-txt h1{font-size:12px}
  .hud-stats{gap:5px;flex-wrap:wrap}
  .stat{min-width:0;padding:3px 8px}
  #statRep{display:none}
  .hud-actions{gap:4px;flex-wrap:wrap}
  .hbtn{padding:5px 8px;font-size:10.5px}
  #rightCol{position:absolute;top:0;right:0;bottom:0;width:88vw;transition:transform .26s cubic-bezier(.4,0,.2,1)}
  #rightCol.closed{margin-right:0;transform:translateX(102%)}
  #toolbar{padding:4px 6px}
  .tools{gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tools::-webkit-scrollbar{display:none}
  .tool{padding:4px 8px;font-size:0;gap:0}
  .tool span{font-size:16px}
  .tool i{display:none}
}