/* ═══════════════════════════════════════════════════════════════
   VIRTUAL PET SIMULATOR — style.css
   3D Responsive Design | Neon Arcade Aesthetic
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Variables ──────────────────────────────────────────────── */
:root {
  --bg:     #05060f;
  --bg2:    #0a0c1a;
  --bg3:    #0f1225;
  --bg4:    #141830;
  --bg5:    #1a1f3a;
  --bdr:    #1e2440;
  --bdr2:   #2a3060;
  --tx:     #d0d8ff;
  --tx2:    #6070a0;
  --tx3:    #30386080;

  --green:  #00ff88;  --gd:#002218; --gb:#004433;
  --red:    #ff3355;  --rd:#220010; --rb:#440025;
  --amber:  #ffaa00;  --ad:#1a1000; --ab:#443000;
  --blue:   #00aaff;  --bd:#001020; --bb:#003050;
  --purple: #aa55ff;  --pd:#150830; --pb:#3a1870;
  --cyan:   #00ddff;
  --pink:   #ff44aa;

  --r:  6px; --r2: 10px; --r3: 14px; --r4: 20px;

  /* 3D */
  --p: 1000px;
  --shadow-card: 0 4px 6px #00000060, 0 16px 40px #00000050;
  --shadow-lift: 0 8px 12px #00000080, 0 24px 60px #00000060, 0 0 0 1px #ffffff08;
  --glow-g:  0 0 20px #00ff8840, 0 0 60px #00ff8818;
  --glow-r:  0 0 20px #ff335540, 0 0 60px #ff335518;
  --glow-a:  0 0 20px #ffaa0040, 0 0 60px #ffaa0018;
  --glow-b:  0 0 20px #00aaff40, 0 0 60px #00aaff18;
  --glow-p:  0 0 20px #aa55ff40, 0 0 60px #aa55ff18;
  --glow-c:  0 0 20px #00ddff40, 0 0 60px #00ddff18;

  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
}

/* ── 2. Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--tx);
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px; line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
}

/* ── 3. 3D Background Scene ────────────────────────────────────── */
.scene {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  perspective:600px; perspective-origin:50% 100%;
}
.grid-floor {
  position:absolute;
  bottom:-20%; left:-50%; right:-50%;
  height:100%;
  background-image:
    linear-gradient(rgba(0,170,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,170,255,.07) 1px, transparent 1px);
  background-size:60px 60px;
  transform:rotateX(70deg);
  transform-origin:50% 100%;
  animation:gridScroll 8s linear infinite;
}
@keyframes gridScroll {
  from { background-position:0 0; }
  to   { background-position:0 120px; }
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(100px); opacity:.12;
  animation:orbFloat 14s ease-in-out infinite;
}
.orb-1 { width:700px;height:700px;background:#aa55ff;top:-200px;left:-150px; animation-delay:0s; }
.orb-2 { width:600px;height:600px;background:#00aaff;bottom:-150px;right:-100px; animation-delay:-5s; }
.orb-3 { width:500px;height:500px;background:#00ff88;top:30%;left:45%; animation-delay:-10s; }
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-40px) scale(1.12); }
}
.scanline {
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
  pointer-events:none;
  animation:scanMove 8s linear infinite;
  opacity:.4;
}
@keyframes scanMove { from{background-position:0 0} to{background-position:0 100px} }

/* ── 4. App wrapper ────────────────────────────────────────────── */
#app {
  position:relative; z-index:1;
  max-width:1160px; margin:0 auto;
  padding:14px 14px 24px;
}

/* ── 5. Header ─────────────────────────────────────────────────── */
.hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; margin-bottom:14px;
  background:linear-gradient(90deg,rgba(10,12,26,.95),rgba(5,6,15,.95));
  border:1px solid var(--bdr2);
  border-radius:var(--r3);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
  position:sticky; top:8px; z-index:100;
  flex-wrap:wrap; gap:8px;
}
.hdr-brand {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.brand-icon { font-size:20px; filter:drop-shadow(0 0 8px #00ff8860); }
.brand-name {
  font-family:'Orbitron',monospace;
  font-size:14px; font-weight:700; letter-spacing:2px;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 0 10px rgba(0,221,255,.3));
}
.hud-badge {
  font-family:'Orbitron',monospace;
  font-size:10px; letter-spacing:1px;
  color:var(--tx2); padding:2px 8px;
  border:1px solid var(--bdr2);
  border-radius:999px; background:var(--bg3);
}
.hdr-controls {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.speed-cluster { display:flex; gap:2px; }

/* ── 6. Glass Panel ────────────────────────────────────────────── */
.glass-panel {
  background:linear-gradient(145deg,rgba(15,18,37,.92),rgba(10,12,26,.96));
  border:1px solid var(--bdr2);
  border-radius:var(--r3);
  padding:16px;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative; overflow:hidden;
  transform:perspective(var(--p)) translateZ(0);
  transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out);
}
.glass-panel::before {
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  pointer-events:none;
}
.glass-panel::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  pointer-events:none;
}

/* ── 7. Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 13px; font-size:12px; font-weight:600;
  font-family:'Inter',sans-serif;
  border-radius:var(--r); cursor:pointer;
  border:1px solid var(--bdr2);
  background:linear-gradient(160deg,var(--bg4),var(--bg3));
  color:var(--tx); white-space:nowrap;
  position:relative; overflow:hidden;
  transform:perspective(var(--p)) translateZ(0);
  box-shadow:0 4px 0 var(--bdr),var(--shadow-card);
  transition:transform .13s var(--ease-spring), box-shadow .13s ease;
  -webkit-user-select:none; user-select:none;
}
.btn::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.07),transparent 60%);
  border-radius:inherit; pointer-events:none;
}
.btn:hover:not(:disabled) {
  transform:perspective(var(--p)) translateY(-3px) translateZ(8px);
  box-shadow:0 7px 0 var(--bdr),var(--shadow-lift);
}
.btn:active:not(:disabled) {
  transform:perspective(var(--p)) translateY(2px) translateZ(-2px);
  box-shadow:0 1px 0 var(--bdr);
  transition-duration:.06s;
}
.btn:disabled { opacity:.25; cursor:not-allowed; }
.btn.active {
  background:linear-gradient(160deg,var(--bg5),var(--bg4));
  box-shadow:inset 0 2px 4px #00000060,0 1px 0 var(--bdr2);
}
.btn.active:hover { transform:none; }
.btn-xs { padding:5px 10px; font-size:11px; }
.btn-dim { color:var(--tx2); }

.btn-neon-green  { border-color:var(--gb); color:var(--green); box-shadow:0 4px 0 var(--gb),var(--glow-g); }
.btn-neon-green:hover:not(:disabled)  { box-shadow:0 7px 0 var(--gb),var(--glow-g),var(--shadow-lift); }
.btn-neon-red    { border-color:var(--rb); color:var(--red);   box-shadow:0 4px 0 var(--rb),var(--glow-r); }
.btn-neon-red:hover:not(:disabled)    { box-shadow:0 7px 0 var(--rb),var(--glow-r),var(--shadow-lift); }
.btn-neon-amber  { border-color:var(--ab); color:var(--amber); box-shadow:0 4px 0 var(--ab),var(--glow-a); }
.btn-neon-amber:hover:not(:disabled)  { box-shadow:0 7px 0 var(--ab),var(--glow-a),var(--shadow-lift); }
.btn-neon-purple { border-color:var(--pb); color:var(--purple);box-shadow:0 4px 0 var(--pb),var(--glow-p); }
.btn-neon-purple:hover:not(:disabled) { box-shadow:0 7px 0 var(--pb),var(--glow-p),var(--shadow-lift); }
.btn-neon-blue   { border-color:var(--bb); color:var(--blue);  box-shadow:0 4px 0 var(--bb),var(--glow-b); }
.btn-neon-blue:hover:not(:disabled)   { box-shadow:0 7px 0 var(--bb),var(--glow-b),var(--shadow-lift); }

/* ── 8. Pills ──────────────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 9px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  border:1px solid transparent;
}
.pill-g { background:var(--gd);color:var(--green); border-color:var(--gb); box-shadow:var(--glow-g);}
.pill-r { background:var(--rd);color:var(--red);   border-color:var(--rb); box-shadow:var(--glow-r);}
.pill-a { background:var(--ad);color:var(--amber); border-color:var(--ab); box-shadow:var(--glow-a);}
.pill-b { background:var(--bd);color:var(--blue);  border-color:var(--bb); box-shadow:var(--glow-b);}
.pill-p { background:var(--pd);color:var(--purple);border-color:var(--pb); box-shadow:var(--glow-p);}
.pill-x { background:var(--bg4);color:var(--tx2); border-color:var(--bdr2);}

/* ── 9. Alerts ─────────────────────────────────────────────────── */
#alerts { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.alert {
  display:flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:var(--r2); border:1px solid;
  font-size:12px; font-weight:600;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:slideIn .2s var(--ease-out);
}
.alert.crit { background:var(--rd);border-color:var(--rb);color:var(--red);box-shadow:var(--glow-r); }
.alert.warn { background:var(--ad);border-color:var(--ab);color:var(--amber);box-shadow:var(--glow-a); }
.alert button {
  margin-left:auto; font-size:10px; padding:2px 9px;
  border-radius:var(--r); border:1px solid currentColor;
  cursor:pointer; font-family:'Inter',sans-serif; font-weight:700;
  background:transparent; color:inherit; transition:opacity .12s;
}
.alert button:hover { opacity:.7; }
@keyframes slideIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

/* ── 10. User tabs ─────────────────────────────────────────────── */
.utabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }

/* ── 11. Layout ────────────────────────────────────────────────── */
.main-grid {
  display:grid;
  grid-template-columns:1fr 330px;
  gap:14px; align-items:start;
}

/* ── 12. Pet Strip — 3D tilt cards ────────────────────────────── */
.pet-strip {
  display:flex; gap:10px;
  overflow-x:auto; padding:4px 2px 12px;
  margin-bottom:12px;
  scroll-snap-type:x mandatory;
}
.pet-strip::-webkit-scrollbar { height:3px; }
.pet-strip::-webkit-scrollbar-thumb { background:var(--bdr2); border-radius:2px; }

.pchip {
  flex-shrink:0; scroll-snap-align:start;
  min-width:148px;
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  border:1px solid var(--bdr2); border-radius:var(--r3);
  padding:12px 14px; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  /* True 3D */
  transform:perspective(var(--p)) rotateY(0) rotateX(0) translateZ(0);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .3s var(--ease-spring), box-shadow .3s ease, border-color .15s;
  position:relative;
}
.pchip::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,.05),transparent 50%);
  pointer-events:none;
}
.pchip:hover {
  transform:perspective(var(--p)) rotateY(-6deg) rotateX(3deg) translateZ(14px);
  box-shadow:var(--shadow-lift), -4px 8px 20px rgba(0,0,0,.4);
  border-color:var(--bdr2);
}
.pchip.sel {
  border-color:var(--purple);
  background:linear-gradient(145deg,#180d3a,#100824);
  transform:perspective(var(--p)) rotateY(-6deg) rotateX(3deg) translateZ(16px);
  box-shadow:var(--shadow-lift), var(--glow-p), -4px 8px 20px rgba(0,0,0,.5);
}
.chip-info { min-width:0; flex:1; }
.chip-name {
  font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip-sub { font-size:10px; color:var(--tx2); margin-top:1px; }
.chip-hp-bar {
  height:3px; background:var(--bg5); border-radius:2px;
  overflow:hidden; margin-top:5px;
}
.chip-hp-fill {
  height:100%; border-radius:2px;
  transition:width .4s ease;
  box-shadow:0 0 6px currentColor;
}

/* ── 13. Avatar ────────────────────────────────────────────────── */
.ava {
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',monospace; font-weight:700; flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.5);
}
.ava.evo {
  animation:evoPulse 2s ease-in-out infinite;
}
@keyframes evoPulse {
  0%,100% { filter:brightness(1) saturate(1); }
  50%      { filter:brightness(1.25) saturate(1.3); }
}

/* ── 14. Pet detail display ────────────────────────────────────── */
.pet-display {
  display:flex; flex-direction:column; align-items:center;
  padding:20px 16px 16px; text-align:center;
  border-bottom:1px solid var(--bdr); margin-bottom:16px;
}
.pet-face-stage {
  position:relative; margin-bottom:12px;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6));
}
.pet-face {
  font-size:68px; line-height:1; display:block;
  animation:petBob 3s ease-in-out infinite;
}
.pet-shadow {
  position:absolute; bottom:-6px; left:50%;
  transform:translateX(-50%);
  width:52px; height:10px;
  background:radial-gradient(ellipse,rgba(255,255,255,.12) 0%,transparent 70%);
  border-radius:50%;
  animation:shadowPulse 3s ease-in-out infinite;
}
@keyframes petBob {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%      { transform:translateY(-10px) rotate(2deg); }
}
@keyframes shadowPulse {
  0%,100% { transform:translateX(-50%) scaleX(1); opacity:.8; }
  50%      { transform:translateX(-50%) scaleX(.65); opacity:.3; }
}
.pet-name-row {
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-bottom:3px;
}
.pet-name {
  font-family:'Orbitron',monospace;
  font-size:17px; font-weight:700; letter-spacing:1px;
}
.rename-btn {
  font-size:10px; padding:2px 8px; color:var(--tx2); cursor:pointer;
  background:transparent; border:1px solid var(--bdr2); border-radius:var(--r);
  font-family:'Inter',sans-serif; font-weight:600; transition:all .12s;
}
.rename-btn:hover { color:var(--tx); border-color:var(--bdr2); }
.pet-meta { font-size:11px; color:var(--tx2); margin-bottom:9px; }
.pet-badges { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }

/* ── 15. Rename input ──────────────────────────────────────────── */
.ri {
  background:var(--bg5); border:1px solid var(--purple);
  border-radius:var(--r); padding:5px 10px;
  color:var(--tx); font-size:16px; font-weight:700;
  font-family:'Orbitron',monospace; width:140px;
  transition:box-shadow .15s;
}
.ri:focus { outline:none; box-shadow:0 0 0 3px rgba(170,85,255,.25),var(--glow-p); }

/* ── 16. Stat bars — 3D depth track ───────────────────────────── */
.sb { margin-bottom:13px; }
.sb-head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:5px;
}
.sb-lbl { font-size:11px; color:var(--tx2); display:flex; align-items:center; gap:5px; }
.sb-lbl i { width:12px; text-align:center; font-size:10px; }
.sb-val { font-size:12px; font-weight:700; font-family:'Orbitron',monospace; }
.sb-delta { font-size:10px; font-weight:700; margin-left:4px; font-family:'Inter',sans-serif; }
.strack {
  height:10px; border-radius:5px; overflow:hidden;
  background:var(--bg5);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.03);
  position:relative;
}
.sfill {
  height:100%; border-radius:5px;
  transition:width .55s cubic-bezier(.4,0,.2,1);
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.4),0 0 8px currentColor;
}
.sfill::after {
  content:''; position:absolute;
  top:0;left:0;right:0; height:40%;
  background:rgba(255,255,255,.18); border-radius:5px 5px 0 0;
}
.sfill.shimmer::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:shimmer 2s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }

/* ── 17. XP bar ────────────────────────────────────────────────── */
.xp-wrap { margin-bottom:14px; }
.xp-track {
  height:5px; background:var(--bg5); border-radius:3px;
  overflow:hidden; margin-top:4px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.xp-fill {
  height:100%;
  background:linear-gradient(90deg,var(--pd),var(--purple),#cc88ff);
  border-radius:3px;
  transition:width .55s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px var(--purple),0 0 20px rgba(170,85,255,.3);
}

/* ── 18. Tip box ───────────────────────────────────────────────── */
.tip-box {
  padding:9px 12px; border-radius:var(--r);
  font-size:11px; line-height:1.7; color:var(--tx2);
  border-left:2px solid var(--bdr2);
  background:rgba(255,255,255,.02);
  margin:10px 0;
}
.tip-box.warn  { border-color:var(--amber); color:#c09030; }
.tip-box.bad   { border-color:var(--red);   color:#c03040; }
.tip-box.good  { border-color:var(--green); color:#30a060; }

/* ── 19. Action buttons — Arcade 3D press ─────────────────────── */
.actions-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px; }
.act-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:13px 4px; border-radius:var(--r2);
  border:1px solid var(--bdr2);
  background:linear-gradient(160deg,var(--bg4),var(--bg3));
  cursor:pointer; font-family:'Inter',sans-serif; color:var(--tx);
  box-shadow:0 5px 0 var(--bdr),0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  transform:perspective(var(--p)) translateY(0) translateZ(0);
  transition:transform .13s var(--ease-spring),box-shadow .13s ease;
  position:relative;
}
.act-btn::before {
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,.06),transparent 50%);
  pointer-events:none;
}
.act-btn:hover:not(:disabled) {
  transform:perspective(var(--p)) translateY(-4px) translateZ(10px);
  box-shadow:0 9px 0 var(--bdr),0 16px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
}
.act-btn:active:not(:disabled) {
  transform:perspective(var(--p)) translateY(3px) translateZ(-4px);
  box-shadow:0 2px 0 var(--bdr),inset 0 3px 6px rgba(0,0,0,.3);
  transition-duration:.06s;
}
.act-btn:disabled { opacity:.25; cursor:not-allowed; }
.act-btn.warn-state { border-color:var(--ab); }
.act-btn.danger-state { border-color:var(--rb); }
.act-icon { font-size:22px; line-height:1; }
.act-lbl { font-size:10px; font-weight:700; color:var(--tx2); letter-spacing:.4px; text-transform:uppercase; }
.act-btn.warn-state   .act-lbl { color:var(--amber); }
.act-btn.danger-state .act-lbl { color:var(--red); }

/* ── 20. Items grid ────────────────────────────────────────────── */
.item-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:14px; }
.item-btn {
  display:flex; align-items:center; gap:8px;
  padding:10px 11px; border-radius:var(--r2);
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  border:1px solid var(--bdr); cursor:pointer;
  font-family:'Inter',sans-serif; color:var(--tx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),var(--shadow-card);
  transform:perspective(var(--p)) translateZ(0);
  transition:transform .15s var(--ease-spring),box-shadow .15s ease,border-color .12s;
}
.item-btn:hover:not(:disabled) {
  border-color:var(--bdr2);
  transform:perspective(var(--p)) translateY(-2px) translateZ(7px);
  box-shadow:var(--shadow-lift);
}
.item-btn:active:not(:disabled) { transform:perspective(var(--p)) translateY(1px); transition-duration:.06s; }
.item-btn:disabled { opacity:.25; cursor:not-allowed; }
.item-icon { font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.item-name  { font-size:11px; font-weight:700; }
.item-stock { font-size:10px; color:var(--tx2); }

/* ── 21. Right panel tabs ──────────────────────────────────────── */
.rp-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px; }
.rp-body { min-height:200px; }
.ptitle {
  font-family:'Orbitron',monospace;
  font-size:9px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--tx2); margin-bottom:13px;
}

/* ── 22. Log ───────────────────────────────────────────────────── */
.log-list { max-height:220px; overflow-y:auto; }
.le { padding:5px 0; font-size:12px; border-bottom:1px solid var(--bdr); line-height:1.5; color:var(--tx2); }
.le:last-child { border-bottom:none; }
.le.good { color:var(--green); }
.le.bad  { color:var(--red); }
.le.warn { color:var(--amber); }
.le.sys  { color:var(--purple); }

/* ── 23. Pool / Overview rows ──────────────────────────────────── */
.prow {
  display:flex; align-items:center; gap:9px;
  padding:10px 12px;
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  border-radius:var(--r2); border:1px solid var(--bdr);
  margin-bottom:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),var(--shadow-card);
  transform:perspective(var(--p)) translateZ(0);
  transition:transform .2s var(--ease-out),box-shadow .2s ease,border-color .12s;
}
.prow:hover {
  transform:perspective(var(--p)) translateZ(7px);
  border-color:var(--bdr2); box-shadow:var(--shadow-lift);
}

/* ── 24. Shop items ────────────────────────────────────────────── */
.shop-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:var(--r2);
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  border:1px solid var(--bdr); margin-bottom:7px;
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.02);
  transform:perspective(var(--p)) translateZ(0);
  transition:transform .2s var(--ease-out),box-shadow .2s ease;
}
.shop-item:hover { transform:perspective(var(--p)) translateZ(6px); box-shadow:var(--shadow-lift); }

/* ── 25. Achievements ──────────────────────────────────────────── */
.ach {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r2); border:1px solid var(--bdr);
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  margin-bottom:6px;
  transform:perspective(var(--p)) translateZ(0);
  transition:transform .2s var(--ease-out),box-shadow .2s ease;
}
.ach.earned {
  border-color:var(--gb);
  background:linear-gradient(145deg,#08200e,#051408);
  box-shadow:var(--glow-g);
  transform:perspective(var(--p)) translateZ(4px);
}
.ach.locked { opacity:.3; }

/* ── 26. Battle arena ──────────────────────────────────────────── */
.arena { display:grid; grid-template-columns:1fr 40px 1fr; gap:8px; align-items:center; margin:12px 0; }
.arena-card {
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  border:1px solid var(--bdr2); border-radius:var(--r2);
  padding:14px; text-align:center;
  box-shadow:var(--shadow-card);
  transform:perspective(400px) rotateY(0);
  transition:all .3s var(--ease-out);
}
.arena-card.winner {
  border-color:var(--green); background:linear-gradient(145deg,#0a2012,#061409);
  box-shadow:var(--glow-g),var(--shadow-lift);
  transform:perspective(400px) rotateY(-4deg) translateZ(10px);
}
.arena-card.loser { opacity:.6; transform:perspective(400px) rotateY(4deg); }
.bt-log { max-height:150px; overflow-y:auto; margin-top:10px; }
.bt-le { font-size:11px; padding:3px 0; border-bottom:1px solid var(--bdr); color:var(--tx2); }
.bt-le:last-child { border-bottom:none; }
.bt-le.a { color:var(--purple); }
.bt-le.b { color:var(--amber); }
.bt-le.w { color:var(--green); font-weight:700; text-shadow:0 0 8px var(--green); }

/* ── 27. Sparklines ────────────────────────────────────────────── */
.spark-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.spark-lbl { font-size:10px; color:var(--tx2); width:54px; flex-shrink:0; }

/* ── 28. Toasts ────────────────────────────────────────────────── */
#toast-rack {
  position:fixed; top:16px; right:16px;
  display:flex; flex-direction:column; gap:7px;
  z-index:9999; pointer-events:none; width:280px;
}
.toast {
  padding:10px 14px; border-radius:var(--r2);
  font-size:12px; line-height:1.5; font-weight:600;
  border:1px solid; pointer-events:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:toastIn .22s var(--ease-out);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
.toast.good    { background:var(--gd);border-color:var(--gb);color:var(--green);box-shadow:0 8px 24px rgba(0,0,0,.6),var(--glow-g); }
.toast.bad     { background:var(--rd);border-color:var(--rb);color:var(--red);  box-shadow:0 8px 24px rgba(0,0,0,.6),var(--glow-r); }
.toast.warn    { background:var(--ad);border-color:var(--ab);color:var(--amber);box-shadow:0 8px 24px rgba(0,0,0,.6),var(--glow-a); }
.toast.sys     { background:var(--pd);border-color:var(--pb);color:var(--purple);box-shadow:0 8px 24px rgba(0,0,0,.6),var(--glow-p); }
.toast.neutral { background:var(--bg3);border-color:var(--bdr2);color:var(--tx2); }
@keyframes toastIn  { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;transform:translateX(20px)} }
.toast.out { animation:toastOut .2s ease forwards; }

/* ── 29. Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,6,15,.85);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:fadeIn .15s ease;
}
.modal-overlay[hidden] { display:none !important; }
.modal-box {
  background:linear-gradient(145deg,var(--bg3),var(--bg2));
  border:1px solid var(--bdr2); border-radius:var(--r3);
  padding:22px; width:min(360px,92vw);
  box-shadow:var(--shadow-lift),var(--glow-p);
  animation:modalIn .22s var(--ease-spring);
}
@keyframes modalIn {
  from { opacity:0; transform:perspective(800px) rotateX(-8deg) scale(.94); }
  to   { opacity:1; transform:perspective(800px) rotateX(-2deg) scale(1); }
}
.modal-title {
  font-family:'Orbitron',monospace;
  font-size:13px; font-weight:700; letter-spacing:1px;
  margin-bottom:16px; color:var(--tx);
}
.modal-cancel { width:100%; margin-top:10px; }
.slot-item {
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; border-radius:var(--r2); border:1px solid var(--bdr2);
  background:linear-gradient(145deg,var(--bg4),var(--bg3));
  cursor:pointer; margin-bottom:7px;
  box-shadow:var(--shadow-card);
  transform:perspective(var(--p)) translateZ(0);
  transition:all .15s var(--ease-spring);
}
.slot-item:hover {
  border-color:var(--purple);
  transform:perspective(var(--p)) translateZ(8px);
  box-shadow:var(--shadow-lift),var(--glow-p);
}
.slot-num {
  width:30px; height:30px; border-radius:50%;
  background:var(--pd); border:1px solid var(--pb);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',monospace; font-size:12px; font-weight:700;
  color:var(--purple); flex-shrink:0;
  box-shadow:var(--glow-p);
}
.slot-info { flex:1; }
.slot-name { font-size:12px; font-weight:700; }
.slot-meta { font-size:10px; color:var(--tx2); margin-top:1px; }

/* ── 30. Empty state ───────────────────────────────────────────── */
.empty-hint {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:3rem 1rem; color:var(--tx2); text-align:center;
}
.empty-emoji { font-size:44px; opacity:.3; animation:petBob 4s ease-in-out infinite; }

/* ── 31. Scrollbars ────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bdr2); border-radius:2px; }

/* ── 32. Misc ──────────────────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.fi { animation:fadeIn .2s var(--ease-out); }
.coins-display {
  font-family:'Orbitron',monospace;
  color:var(--amber); font-size:13px; font-weight:700;
  text-shadow:0 0 10px var(--amber);
}

/* ── 33. Mobile bottom nav ─────────────────────────────────────── */
.mob-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:linear-gradient(to top,rgba(5,6,15,.98),rgba(5,6,15,.92));
  border-top:1px solid var(--bdr2);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  justify-content:space-around; align-items:center;
}
.mob-nav button {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 8px; flex:1; max-width:72px;
  background:transparent; border:none; border-radius:var(--r);
  color:var(--tx2); cursor:pointer; font-family:'Inter',sans-serif;
  transition:color .12s,background .12s;
}
.mob-nav button span:first-child { font-size:19px; line-height:1; }
.mob-nav button small { font-size:9px; font-weight:600; letter-spacing:.3px; }
.mob-nav button:hover,.mob-nav button.active { color:var(--purple); }

/* ── 34. Responsive ────────────────────────────────────────────── */
@media (max-width:1040px) {
  .main-grid { grid-template-columns:1fr 290px; }
}
@media (max-width:740px) {
  #app { padding:10px 10px 90px; }
  .hdr { padding:8px 12px; }
  .brand-name { font-size:12px; }
  .hdr-controls .speed-cluster { display:none; }
  .hdr-controls .btn span { display:none; }
  .main-grid { grid-template-columns:1fr; }
  .right-col { display:none; }
  .right-col.mob-visible { display:block; }
  .actions-grid { grid-template-columns:repeat(3,1fr); }
  .mob-nav { display:flex; }
  .pchip:hover { transform:none; }
  .pchip.sel { transform:none; box-shadow:var(--shadow-card),var(--glow-p); }
  #toast-rack { width:calc(100vw - 28px); right:14px; }
  .arena { grid-template-columns:1fr 32px 1fr; }
}
@media (max-width:400px) {
  .item-grid { grid-template-columns:1fr; }
  .utabs .btn { padding:5px 8px; font-size:11px; }
}