/* ============================================================================
   THREAD DEFENSE — STYLES
   Dark streetwear aesthetic: garment-tag panels, stitch borders, signal
   accent. Colours/fonts come from CSS variables set by brand-config.js.
   ========================================================================== */
:root {
  --ink:#0b0b0d; --panel:#141417; --panelEdge:#26262b; --chalk:#ece9e1;
  --muted:#8d8b84; --accent:#ff5a1f; --accentSoft:#ff8a5c;
  --good:#57d99a; --bad:#ff4d6d; --stitch:#f5c518;
  --font-display:'Archivo Black',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  background:var(--ink) var(--bg-image, none) center/cover fixed;
  color:var(--chalk); font-family:var(--font-body);
  overflow:hidden; user-select:none; -webkit-user-select:none;
}
/* subtle textile texture */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 6px,var(--chalk) 6px 7px);
}
.mono { font-family:var(--font-mono); font-size:.85em; }
.muted { color:var(--muted); }
.good { color:var(--good); } .bad { color:var(--bad); } .gold { color:var(--stitch); }
.eyebrow { letter-spacing:.25em; color:var(--accent); font-size:.75rem; }

/* ---- header ---- */
#site-header {
  position:fixed; top:0; left:0; right:0; height:44px; z-index:40;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:rgba(11,11,13,.85); backdrop-filter:blur(6px);
  border-bottom:1px dashed var(--panelEdge);
  font-family:var(--font-display); letter-spacing:.06em;
}
#shop-link { color:var(--muted); font-family:var(--font-mono); font-size:.8rem; text-decoration:none; }
#shop-link:hover { color:var(--accent); }

/* ---- screens ---- */
#app { position:fixed; inset:44px 0 0 0; z-index:1; }
.screen {
  position:absolute; inset:0; display:none; overflow-y:auto; padding:24px;
  animation:fadeUp .35s ease both;
}
.screen.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none;} }

/* ---- buttons / inputs ---- */
.btn {
  display:inline-block; cursor:pointer; border:1px solid var(--panelEdge);
  background:var(--panel); color:var(--chalk); font-family:var(--font-body); font-weight:600;
  padding:12px 18px; font-size:1rem; border-radius:4px; position:relative;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent); }
.btn:active:not(:disabled) { transform:translateY(0) scale(.98); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.big { font-family:var(--font-display); font-size:1.25rem; padding:16px 26px;
  background:var(--accent); color:#0b0b0d; border-color:var(--accent); }
.btn.big:hover { background:var(--accentSoft); }
.btn.accent { background:var(--accent); color:#0b0b0d; border-color:var(--accent); }
.btn.danger { border-color:var(--bad); color:var(--bad); }
.btn.small { padding:8px 12px; font-size:.85rem; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.input {
  background:var(--ink); color:var(--chalk); border:1px solid var(--panelEdge);
  padding:10px 12px; border-radius:4px; font-family:var(--font-mono); font-size:.9rem;
}
.input:focus { outline:none; border-color:var(--accent); }

/* ---- main menu ---- */
#screen-menu { display:none; align-items:center; justify-content:center; text-align:center; }
#screen-menu.active { display:flex; }
.menu-inner { max-width:520px; margin:auto; }
#game-title {
  font-family:var(--font-display); font-size:clamp(2.4rem,8vw,4.5rem); line-height:.95;
  letter-spacing:.02em; margin:10px 0;
  background:linear-gradient(180deg,var(--chalk) 55%,var(--accent) 130%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#menu-stats { display:flex; gap:18px; justify-content:center; margin:14px 0 22px; color:var(--muted); }
.menu-nav { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.menu-nav .btn-row { justify-content:center; }

/* ---- panel heads / lists ---- */
.panel-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.panel-head h2 { font-family:var(--font-display); letter-spacing:.03em; }
.sub { margin:20px 0 10px; font-family:var(--font-display); font-size:1rem; color:var(--muted); }

#maps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; max-width:1100px; margin:0 auto; }
.map-card {
  background:var(--panel); border:1px solid var(--panelEdge); border-radius:6px; overflow:hidden;
  cursor:pointer; transition:transform .15s ease, border-color .15s ease;
}
.map-card:hover:not(.locked) { transform:translateY(-3px); border-color:var(--accent); }
.map-card.locked { opacity:.5; cursor:default; }
.map-thumb canvas { width:100%; display:block; }
.map-info { padding:12px 14px; }
.map-info h3 { font-family:var(--font-display); font-size:1rem; margin-bottom:4px; }
.map-info p { font-size:.82rem; margin-top:4px; }
.map-info .map-effect { color:var(--accent); font:600 .65rem var(--font-mono); letter-spacing:.04em; margin-top:8px; }

.locker-card, .ach-card, .challenge-card {
  display:flex; align-items:center; gap:14px; background:var(--panel);
  border:1px dashed var(--panelEdge); border-radius:6px; padding:12px 14px; margin-bottom:10px;
  max-width:760px;
}
#locker-towers, #locker-cosmetics, #ach-grid, #challenge-list, #profile-body, .prose, .settings-grid, .lb-controls, .table-wrap { max-width:760px; margin-left:auto; margin-right:auto; }
.locker-card .ico, .ach-card .ico { font-size:1.6rem; }
.locker-card div, .ach-card div { flex:1; }
.locker-card h4, .ach-card h4 { font-size:.95rem; }
.locker-card p, .ach-card p { font-size:.8rem; }
.locker-card.owned { border-style:solid; border-color:rgba(87,217,154,.35); }
.ach-card.done { border-style:solid; border-color:var(--stitch); }
.swatch { width:34px; height:34px; border-radius:50%; flex:none; }

.challenge-card { flex-direction:column; align-items:flex-start; }
.challenge-card .ch-head { display:flex; width:100%; justify-content:space-between; align-items:baseline; }
.challenge-card h3 { font-family:var(--font-display); font-size:1.05rem; }
.challenge-card ul { margin:8px 0 12px 18px; font-size:.85rem; color:var(--muted); }
.challenge-card.done { border-color:var(--good); }

/* ---- profile ---- */
.profile-head { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.avatar { width:56px; height:56px; border-radius:50%; background:var(--accent); color:#0b0b0d;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.5rem; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.stat { background:var(--panel); border:1px solid var(--panelEdge); border-radius:4px; padding:10px 12px; }
.stat span { display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.stat b { font-family:var(--font-mono); font-size:1.1rem; }
.prestige-box { margin-top:18px; background:var(--panel); border:1px dashed var(--stitch); border-radius:6px; padding:16px; }
.prestige-box h4 { color:var(--stitch); margin-bottom:6px; }
.prestige-box p { font-size:.85rem; margin-bottom:12px; }

/* ---- leaderboard ---- */
.lb-controls { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
#lb-tabs { display:flex; gap:6px; }
.tab { background:var(--panel); border:1px solid var(--panelEdge); color:var(--muted);
  padding:8px 14px; border-radius:4px; cursor:pointer; font-family:var(--font-mono); font-size:.8rem; }
.tab.active { color:var(--chalk); border-color:var(--accent); }
.table-wrap { overflow-x:auto; }
#lb-table { width:100%; border-collapse:collapse; font-size:.88rem; }
#lb-table th { text-align:left; font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; padding:8px 10px; border-bottom:1px solid var(--panelEdge); }
#lb-table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); }

/* ---- settings / howto ---- */
.settings-grid { display:flex; flex-direction:column; gap:14px; }
.settings-grid label { display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.settings-grid label.check { flex-direction:row; align-items:center; gap:10px; }
.prose ol { margin-left:20px; display:flex; flex-direction:column; gap:10px; line-height:1.5; }

/* ---- GAME AREA + HUD ---- */
#screen-game { padding:0; overflow:hidden; }
#game-area { position:absolute; inset:66px 0 96px 0; }
#game-canvas { display:block; width:100%; height:100%; touch-action:none; }

#game-hud { display:none; }
#game-hud.active { display:block; }
#damage-vignette { position:fixed;inset:110px 0 96px;z-index:18;pointer-events:none;opacity:0;box-shadow:inset 0 0 90px 18px rgba(255,35,70,.55);transition:opacity .3s; }
#damage-vignette.active { opacity:.25;animation:dangerPulse 1.4s ease-in-out infinite; }
#damage-vignette.hit { opacity:.72; }
@keyframes dangerPulse{50%{opacity:.48}}
#hud-top {
  position:fixed; top:44px; left:0; right:0; z-index:20;
  height:66px; display:flex; align-items:center; gap:7px; padding:7px 12px;
  background:linear-gradient(180deg,rgba(7,9,12,.99),rgba(10,12,16,.96)); border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-mono); pointer-events:none;
}
.hud-stat { min-width:92px; display:flex; align-items:center; gap:8px; padding:6px 10px 6px 7px;
  background:linear-gradient(135deg,rgba(28,31,38,.94),rgba(15,17,22,.9)); border:1px solid rgba(255,255,255,.09);
  border-radius:6px; box-shadow:0 5px 14px rgba(0,0,0,.24); }
.hud-stat>span { display:flex; flex-direction:column; line-height:1; gap:4px; }
.hud-stat small { color:var(--muted); font-size:.49rem; letter-spacing:.11em; }
.hud-stat b { font-size:.92rem; }
.hud-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:5px; font-style:normal;
  font-family:var(--font-display); font-size:.72rem; background:#20242c; border:1px solid rgba(255,255,255,.1); }
.hud-stat.cash .hud-icon,.hud-stat.cash b { color:var(--good); }
.hud-stat.lives .hud-icon,.hud-stat.lives b { color:var(--bad); }
.hud-stat.wave .hud-icon,.hud-stat.wave b { color:#72d8ff; }
.hud-stat.score .hud-icon,.hud-stat.score b { color:var(--stitch); }
.hud-spacer { flex:1; }
.hbtn {
  pointer-events:auto; cursor:pointer; background:var(--panel); color:var(--chalk);
  border:1px solid var(--panelEdge); border-radius:4px; padding:6px 10px; font-size:.95rem;
  transition:border-color .12s;
}
.hbtn:hover { border-color:var(--accent); }
#hud-top .hbtn { pointer-events:auto; }

#hud-wave-btn {
  position:fixed; top:55px; left:50%; transform:translateX(-50%); z-index:22;
  font-family:var(--font-mono); font-size:.85rem; padding:8px 16px;
  animation:pulse 1.6s ease infinite;
}
@keyframes pulse { 50% { border-color:var(--accent); box-shadow:0 0 14px rgba(255,90,31,.35);} }

#boss-bar {
  position:fixed; top:54px; left:50%; transform:translateX(-50%); z-index:21; width:min(500px,42vw);
  display:none; text-align:center;
}
#boss-bar.active { display:block; }
#boss-name { font-family:var(--font-display); font-size:.95rem; letter-spacing:.06em; color:var(--bad);
  text-shadow:0 2px 8px #000; }
.boss-track { height:10px; background:rgba(0,0,0,.6); border:1px solid var(--bad); border-radius:5px; margin-top:4px; overflow:hidden; }
#boss-fill { height:100%; width:100%; background:linear-gradient(90deg,var(--bad),var(--accent)); transition:width .15s linear; }

/* wave presentation */
#wave-banner { position:fixed; z-index:24; top:31%; left:50%; width:min(560px,86vw); transform:translate(-50%,-50%) scale(.94);
  padding:15px 20px 17px; text-align:center; pointer-events:none; opacity:0; visibility:hidden;
  background:linear-gradient(90deg,rgba(8,11,15,0),rgba(8,11,15,.94) 14%,rgba(8,11,15,.94) 86%,rgba(8,11,15,0));
  border-top:1px solid rgba(57,255,136,.42); border-bottom:1px solid rgba(57,255,136,.42);
  transition:opacity .25s ease,transform .25s ease,visibility .25s; }
#wave-banner.show { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); animation:waveScan 2.5s ease both; }
#wave-banner.boss { border-color:rgba(255,77,109,.7); background:linear-gradient(90deg,transparent,rgba(34,8,15,.96) 14%,rgba(34,8,15,.96) 86%,transparent); }
#wave-banner.clear { border-color:rgba(87,217,154,.7); }
#wave-kicker { color:var(--accent); font:600 .62rem var(--font-mono); letter-spacing:.22em; margin-bottom:5px; }
#wave-banner.boss #wave-kicker { color:var(--bad); }
#wave-title { display:block; font:1.7rem var(--font-display); letter-spacing:.06em; text-shadow:0 0 24px rgba(57,255,136,.24); }
#wave-subtitle { margin-top:4px; color:var(--muted); font:.72rem var(--font-mono); }
#wave-preview { min-height:0; display:flex; justify-content:center; gap:13px; margin-top:10px; }
.wave-enemy { width:72px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.wave-enemy img { width:48px; height:42px; object-fit:contain; filter:drop-shadow(0 5px 4px #000); }
.wave-enemy em { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#c8cbd1; font:normal .5rem var(--font-mono); }
@keyframes waveScan { 0%{clip-path:inset(0 50%)} 14%,86%{clip-path:inset(0 0)} 100%{clip-path:inset(0 0)} }

/* shop bar */
#shop-bar {
  position:fixed; left:0; right:0; bottom:0; height:96px; z-index:20;
  display:flex; gap:7px; padding:7px 10px; overflow-x:auto; overflow-y:hidden;
  background:linear-gradient(180deg,rgba(11,11,13,.96),rgba(7,9,12,.99)); border-top:1px solid var(--panelEdge);
}
.shop-card {
  flex:1 0 124px; min-width:112px; max-width:154px; cursor:pointer; display:flex; align-items:center; gap:7px;
  background:var(--panel); border:1px solid var(--panelEdge); border-radius:6px; color:var(--chalk);
  padding:6px 8px; transition:transform .12s, border-color .12s, background .12s;
}
.shop-card:hover { transform:translateY(-2px); border-color:var(--accent); background:#191a20; }
.shop-card.placing { border-color:var(--good); box-shadow:inset 0 0 0 1px var(--good),0 0 14px rgba(87,217,154,.25); }
.shop-card.broke { opacity:.35; }
.shop-card.locked { opacity:.5; filter:grayscale(.75); cursor:help; }
.shop-card.locked:hover { transform:none; border-color:#59615f; background:var(--panel); }
.shop-card.locked .pr { color:#a9b1af; font-size:.58rem; white-space:nowrap; }
.shop-card .weapon-art { flex:none; width:48px; height:70px; display:flex; align-items:center; justify-content:center; }
.shop-card .weapon-art img { display:block; max-width:48px; max-height:68px; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(0,0,0,.65)); }
.shop-card .weapon-copy { min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.shop-card .nm { font-family:var(--font-display); font-size:.62rem; text-align:left; line-height:1.15; }
.shop-card .pr { color:var(--good); font-size:.72rem; }

/* tower panel */
#tower-panel {
  position:fixed; right:12px; top:96px; z-index:21; width:292px;
  background:var(--panel); border:1px solid var(--panelEdge); border-radius:8px; padding:14px;
  display:none; flex-direction:column; gap:8px;
  animation:fadeUp .2s ease both;
}
#tower-panel.active { display:flex; }
#tp-sprite { display:none; }
#tp-models { display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; padding:7px; background:rgba(0,0,0,.24); border:1px solid var(--panelEdge); border-radius:6px; }
#tp-models span { text-align:center; color:var(--muted); font:600 .5rem var(--font-mono); letter-spacing:.08em; }
#tp-models img { width:100%; height:70px; object-fit:contain; filter:drop-shadow(0 5px 4px #000); }
#tp-models.max span:nth-child(2),#tp-models.max img:last-child { opacity:.2; }
#tp-specialize { display:none; padding:8px; border:1px solid rgba(114,216,255,.25); border-radius:6px; background:rgba(114,216,255,.04); }
#tp-specialize p { margin-bottom:7px; color:#72d8ff; text-align:center; font-size:.57rem; }
#tp-specialize .btn-row { display:grid; grid-template-columns:1fr 1fr; }
#tp-specialize .btn { padding:7px 4px; font-size:.65rem; }
.tp-row i { color:var(--good); font-style:normal; font-size:.8em; }
#tp-close { position:absolute; top:8px; right:8px; padding:2px 8px; }
#tp-name { font-family:var(--font-display); font-size:1rem; padding-right:28px; }
#tp-level.gold { color:var(--stitch); }
#tp-desc { font-size:.8rem; }
.tp-row { display:flex; justify-content:space-between; font-size:.82rem; padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.05); font-family:var(--font-mono); }
#tower-panel .btn { padding:9px 10px; font-size:.85rem; }
#tower-panel.preview #tp-models span:first-child::after { content:" MODEL"; }
#tower-panel.preview #tp-models span:nth-child(2) { font-size:0; }
#tower-panel.preview #tp-models span:nth-child(2)::after { content:"LEVEL 2 PREVIEW"; font-size:.5rem; }
#tower-panel.preview #tp-specialize,#tower-panel.preview #tp-mode,#tower-panel.preview #tp-upgrade,#tower-panel.preview #tp-sell { display:none !important; }
.tp-role { padding:8px 9px; margin-bottom:5px; color:var(--good); border:1px solid rgba(87,217,154,.3); background:rgba(87,217,154,.06); font:600 .58rem var(--font-mono); letter-spacing:.08em; text-align:center; }


/* overlays */
.overlay { position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center;
  background:rgba(11,11,13,.8); backdrop-filter:blur(4px); }
.overlay.active { display:flex; }
.overlay-card {
  background:var(--panel); border:1px dashed var(--panelEdge); border-radius:8px; padding:28px;
  display:flex; flex-direction:column; gap:10px; min-width:280px; text-align:center;
  animation:fadeUp .25s ease both;
}
#overlay-unlock { z-index:60; background:radial-gradient(circle,rgba(25,70,50,.35),rgba(5,7,10,.94)); }
.unlock-card { width:min(430px,90vw); border-color:var(--good); box-shadow:0 0 60px rgba(87,217,154,.18); animation:unlockIn .45s ease both; }
.unlock-card img { width:180px; height:150px; object-fit:contain; margin:auto; filter:drop-shadow(0 12px 12px #000); }
.unlock-card h2 { font-family:var(--font-display); }
@keyframes unlockIn { from{opacity:0;transform:scale(.82) translateY(20px)} to{opacity:1;transform:none} }
#overlay-mission { z-index:58; background:rgba(4,6,9,.94); }
.mission-card { width:min(560px,92vw); padding:18px; border-color:rgba(57,255,136,.35); text-align:left; }
#mission-art { height:170px; border-radius:6px; background-position:center; background-size:cover; border:1px solid var(--panelEdge); }
#mission-zone { color:var(--accent); font-size:.65rem; letter-spacing:.13em; }
#mission-title { font:1.8rem var(--font-display); }
#mission-strategy { color:#c9ccd2; line-height:1.45; }
#mission-effect { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-left:3px solid var(--accent); background:rgba(255,255,255,.035); }
#mission-effect b { font:.7rem var(--font-mono); letter-spacing:.05em; }
#mission-effect span { color:var(--muted); font-size:.78rem; }
.mission-card .btn { align-self:stretch; text-align:center; margin-top:4px; }
#overlay-tutorial { z-index:59; background:rgba(4,7,11,.9); }
.tutorial-card { width:min(440px,90vw); border-color:#72d8ff; box-shadow:0 0 55px rgba(114,216,255,.14); }
#tutorial-icon { width:76px;height:76px;display:grid;place-items:center;margin:auto;border:1px solid #72d8ff;border-radius:50%;color:#72d8ff;font:2rem var(--font-display);box-shadow:inset 0 0 22px rgba(114,216,255,.14); }
.tutorial-card h2 { font-family:var(--font-display); }
#tutorial-text { color:#c8cbd1;line-height:1.5; }
.overlay-card h2 { font-family:var(--font-display); letter-spacing:.04em; }
.overlay-card.wide { max-width:520px; width:100%; margin:auto; text-align:left; }

/* game over */
#screen-gameover { display:none; align-items:center; justify-content:center; }
#screen-gameover.active { display:flex; }
.go-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.go-stats div { display:flex; justify-content:space-between; background:var(--ink);
  border:1px solid var(--panelEdge); border-radius:4px; padding:8px 10px; font-size:.85rem; }
.go-stats span { color:var(--muted); }
.submit-row { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.submit-row .input { flex:1; min-width:150px; }
.submit-row select.input { min-width:110px; }
.contact-note { margin:-3px 0 10px; color:var(--muted); font-size:.7rem; line-height:1.35; }

/* toasts */
#toasts { position:fixed; bottom:110px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:90vw; }
.toast {
  background:var(--panel); border:1px solid var(--panelEdge); border-left:3px solid var(--accent);
  padding:10px 16px; border-radius:4px; font-size:.85rem; opacity:0; transform:translateY(10px);
  transition:all .3s ease; box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.toast.in { opacity:1; transform:none; }
.toast.good { border-left-color:var(--good); }
.toast.bad { border-left-color:var(--bad); }
.toast.gold { border-left-color:var(--stitch); }

/* ---- responsive ---- */
@media (max-width:700px) {
  .screen { padding:16px; }
  #tower-panel { right:6px; left:6px; width:auto; top:auto; bottom:106px; flex-direction:column; }
  #hud-top { height:106px; align-content:flex-start; gap:4px; padding:6px; flex-wrap:wrap; }
  .hud-stat { min-width:0; flex:1; padding:5px; gap:4px; }
  .hud-icon { width:22px; height:22px; font-size:.58rem; }
  .hud-stat small { display:none; }
  .hud-stat b { font-size:.72rem; }
  .hud-stat.score { display:none; }
  #hud-top .hbtn { padding:5px 7px; }
  #wave-title { font-size:1.25rem; }
  .go-stats { grid-template-columns:1fr; }
  #hud-wave-btn { top:109px; bottom:auto; font-size:.68rem; padding:7px 11px; }
  #boss-bar { top:105px; width:76vw; }
  #game-area { inset:106px 0 96px 0; }
  .shop-card { flex-basis:118px; }
}