:root{
  --bg: #150a21;
  --bg2: #1f1032;
  --panel: #1b0e2c;
  --ink: #f5efff;
  --ink-dim: #b6a6d6;
  --outline: #0a0512;
  --magenta: #ff2e9a;
  --lime: #c6ff3d;
  --cyan: #33fff0;
  --yellow: #ffc93d;
  --chip1: #fff1fb;
  --chip2: #f2fff0;
  --chip3: #eefcff;
  --chip4: #fffaf0;
  --glow1: rgba(255,46,154,0.16);
  --glow2: rgba(51,255,240,0.14);
}

/* ---------- Theme: Dark Grey ---------- */
body.theme-dark{
  --bg: #17181b;
  --bg2: #202226;
  --panel: #1c1e22;
  --ink: #eef0f2;
  --ink-dim: #9aa1a8;
  --outline: #0a0b0c;
  --magenta: #5ec8ff;
  --lime: #8be28f;
  --cyan: #ff9f5c;
  --yellow: #f2c94c;
  --chip1: #f4f5f6;
  --chip2: #eef1f3;
  --chip3: #e9edf0;
  --chip4: #f7f6f2;
  --glow1: rgba(94,200,255,0.12);
  --glow2: rgba(255,159,92,0.10);
}

/* ---------- Theme: White ---------- */
body.theme-white{
  --bg: #f3f1f8;
  --bg2: #ffffff;
  --panel: #ffffff;
  --ink: #1c1330;
  --ink-dim: #6b6280;
  --outline: #1c1330;
  --magenta: #e91e8c;
  --lime: #1f9d55;
  --cyan: #0891b2;
  --yellow: #f5a623;
  --chip1: #fff1fb;
  --chip2: #f0fbf4;
  --chip3: #eef8fb;
  --chip4: #fff8ec;
  --glow1: rgba(233,30,140,0.08);
  --glow2: rgba(8,145,178,0.07);
}

/* ---------- Theme: Mango (secret) ---------- */
body.theme-mango{
  --bg: #1f1004;
  --bg2: #2a1607;
  --panel: #241206;
  --ink: #fff3e6;
  --ink-dim: #d9a875;
  --outline: #140900;
  --magenta: #ff8a1e;
  --lime: #ffb703;
  --cyan: #ff5a1e;
  --yellow: #ffcf5c;
  --chip1: #fff3e0;
  --chip2: #ffe9cf;
  --chip3: #ffe0c2;
  --chip4: #fff0e6;
  --glow1: rgba(255,138,30,0.18);
  --glow2: rgba(255,207,92,0.14);
}

/* ---------- Theme: Strawberry (secret) ---------- */
body.theme-strawberry{
  --bg: #3a1420;
  --bg2: #4a1c2e;
  --panel: #401826;
  --ink: #fff0f4;
  --ink-dim: #e6b0c2;
  --outline: #200410;
  --magenta: #ff3860;
  --lime: #2ecc71;
  --cyan: #ff6b81;
  --yellow: #ffd93d;
  --chip1: #fff0f3;
  --chip2: #ffe4ea;
  --chip3: #ffeef5;
  --chip4: #fff5e8;
  --glow1: rgba(255,56,96,0.18);
  --glow2: rgba(46,204,113,0.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  transition:background-color .25s ease;
  position:relative;
}
body::before, body::after{
  content:"";
  position:fixed;
  width:55vw;
  height:55vw;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(50px);
}
body::before{
  top:-12%; left:-12%;
  background:radial-gradient(circle, var(--glow1), transparent 70%);
  animation:ambientDrift1 26s ease-in-out infinite;
}
body::after{
  bottom:-16%; right:-12%;
  background:radial-gradient(circle, var(--glow2), transparent 70%);
  animation:ambientDrift2 32s ease-in-out infinite;
}
@keyframes ambientDrift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4%, 5%) scale(1.08); }
}
@keyframes ambientDrift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-4%, -6%) scale(1.06); }
}
.display{font-family:'Bungee', sans-serif; letter-spacing:0.5px;}
.mono{font-family:'JetBrains Mono', monospace;}
.hidden{ display:none !important; }

/* ---------- App shell ---------- */
#app{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:14px;
  gap:12px;
}

/* ---------- Theme rain (mango / strawberry) ---------- */
#theme-rain{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:50;
}
.rain-drop{
  position:absolute;
  top:-60px;
  animation-name:rainFall;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
  will-change:transform, opacity;
}
@keyframes rainFall{
  0%{ transform:translateY(0) scale(1); opacity:1; }
  100%{ transform:translateY(112vh) scale(0.35); opacity:0.4; }
}

/* ---------- Auth screen ---------- */
#auth-screen{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  padding:28px 26px 24px;
  text-align:center;
}
.auth-card .logo{
  font-size:34px;
  background:var(--yellow);
  border:3px solid var(--outline);
  border-radius:16px;
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--outline);
  transform:rotate(-6deg);
  margin:0 auto 14px;
}
.auth-card h1{
  font-size:22px;
  margin:0 0 10px;
  color:var(--lime);
  text-shadow:2px 2px 0 var(--outline);
}
.auth-sub{
  font-size:13px;
  color:var(--ink-dim);
  margin:0 0 18px;
  line-height:1.5;
}
#usernameInput{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:2.5px solid var(--outline);
  background:var(--bg2);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;
  outline:none;
  margin-bottom:12px;
}
#usernameInput::placeholder{ color:var(--ink-dim); }

.primary-btn{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:3px solid var(--outline);
  background:var(--magenta);
  color:#1a0113;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--outline);
  transition:transform .1s ease;
}
.primary-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--outline); }

.auth-error{
  min-height:18px;
  color:var(--magenta);
  font-size:12px;
  margin:10px 0 0;
}
.auth-hint{
  font-size:11px;
  color:var(--ink-dim);
  margin:14px 0 0;
}

/* ---------- Header ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 18px;
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--outline);
}
.title-block{display:flex; align-items:center; gap:12px;}
.title-block .logo{
  font-size:30px;
  background:var(--yellow);
  border:3px solid var(--outline);
  border-radius:14px;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--outline);
  transform:rotate(-6deg);
  flex-shrink:0;
  animation:logoSway 5s ease-in-out infinite;
}
@keyframes logoSway{
  0%,100%{ transform:rotate(-6deg); }
  50%{ transform:rotate(-2deg); }
}
h1{
  font-size:22px;
  margin:0;
  color:var(--lime);
  text-shadow:2px 2px 0 var(--outline);
}
.tagline{margin:2px 0 0; font-size:12px; color:var(--ink-dim);}

#info-btn{
  align-self:flex-start;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:10px;
  width:32px; height:32px;
  font-size:14px;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--outline);
  flex-shrink:0;
  margin-left:4px;
}
#info-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--outline); }

.stat{
  font-size:13px;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:10px;
  padding:6px 12px;
  white-space:nowrap;
}
.stat b{color:var(--yellow);}

.header-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.header-visualizer{
  flex:1;
  min-width:40px;
  height:34px;
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding:0 20px;
  overflow:hidden;
}
.viz-bar{
  flex:1 1 0;
  min-width:2px;
  max-width:6px;
  height:6%;
  min-height:2px;
  border-radius:3px 3px 0 0;
  background:var(--magenta);
  transition:height .06s linear;
}

/* mode switch */
.mode-switch{
  display:flex;
  background:var(--outline);
  border:3px solid var(--outline);
  border-radius:999px;
  padding:3px;
  gap:3px;
  cursor:pointer;
  user-select:none;
  box-shadow:3px 3px 0 var(--outline);
}
.mode-switch .opt{
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-dim);
  transition:all .18s ease;
  white-space:nowrap;
}
.mode-switch .opt.active.plus{background:var(--magenta); color:#1a0113;}
.mode-switch .opt.active.minus{background:var(--cyan); color:#03211f;}

/* account controls */
.account-box{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:12px;
  padding:5px 8px;
}
.account-label{
  font-size:12px;
  color:var(--yellow);
  padding:0 4px;
  white-space:nowrap;
}
.mini-btn{
  background:var(--panel);
  border:2px solid var(--outline);
  color:var(--ink-dim);
  border-radius:8px;
  padding:6px 9px;
  font-size:11px;
  font-family:'Space Grotesk',sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.mini-btn:hover{ color:var(--cyan); }
.mini-btn.danger:hover{ color:var(--magenta); }

/* ---------- Main layout ---------- */
main{
  flex:1;
  display:flex;
  gap:12px;
  min-height:0;
  height:calc(100vh - 110px);
}

#workspace-wrap{
  flex:1;
  position:relative;
  border:3px solid var(--outline);
  border-radius:22px;
  overflow:hidden;
  transition:box-shadow .2s ease;
  box-shadow:5px 5px 0 var(--outline);
}
#workspace-wrap.mode-plus{ box-shadow:5px 5px 0 var(--magenta); }
#workspace-wrap.mode-minus{ box-shadow:5px 5px 0 var(--cyan); }

#workspace{
  position:absolute;
  inset:0;
  background-color:var(--bg2);
  touch-action:none;
  overflow:hidden;
}

#workspace-dots{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

#empty-hint{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:var(--ink-dim);
  font-size:14px;
  max-width:280px;
  pointer-events:none;
  z-index:1;
}
#empty-hint span{display:block; font-size:38px; margin-bottom:8px; animation:ghostFloat 3.2s ease-in-out infinite;}
@keyframes ghostFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-6px) rotate(-4deg); }
}

#trash-zone{
  position:absolute;
  bottom:16px; right:16px;
  width:56px; height:56px;
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  box-shadow:3px 3px 0 var(--outline);
  z-index:20;
  cursor:pointer;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  touch-action:none;
  user-select:none;
}
#trash-zone .trash-fill{
  position:absolute;
  left:0; right:0; bottom:0;
  height:0%;
  background:var(--magenta);
  opacity:0.75;
  transition:height .15s ease;
}
#trash-zone.holding .trash-fill{
  height:100%;
  transition:height 2.5s linear;
}
#trash-zone .trash-icon{ position:relative; z-index:2; pointer-events:none; }
#trash-zone.drag-over{
  transform:scale(1.18);
  box-shadow:3px 3px 0 var(--magenta);
  background:var(--outline);
}
@keyframes trashBoom{
  0%{ transform:scale(1) rotate(0); }
  25%{ transform:scale(1.4) rotate(-10deg); }
  55%{ transform:scale(0.82) rotate(8deg); }
  80%{ transform:scale(1.08) rotate(-3deg); }
  100%{ transform:scale(1) rotate(0); }
}
#trash-zone.boom{ animation:trashBoom .5s ease; }

/* ---------- Sidebar (inventory) ---------- */
#sidebar{
  width:280px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:5px 5px 0 var(--outline);
  overflow:hidden;
}
#sidebar h2{
  font-size:13px;
  margin:0;
  padding:14px 16px 8px;
  color:var(--ink-dim);
  letter-spacing:1px;
  text-transform:uppercase;
}
#search{
  margin:0 14px 10px;
  padding:9px 12px;
  border-radius:10px;
  border:2px solid var(--outline);
  background:var(--bg2);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  outline:none;
}
#search::placeholder{color:var(--ink-dim);}

#inventory{
  flex:1;
  overflow-y:auto;
  padding:6px 14px 14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-content:start;
}
#inventory::-webkit-scrollbar{width:8px;}
#inventory::-webkit-scrollbar-thumb{background:var(--outline); border-radius:4px;}

.chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 6px 8px;
  border-radius:14px;
  border:2.5px solid var(--outline);
  background:var(--chip1);
  color:#1a0e29;
  cursor:grab;
  box-shadow:3px 3px 0 var(--outline);
  touch-action:none;
  user-select:none;
  transition:transform .12s ease;
  animation:chipFloat 4s ease-in-out infinite;
}
.chip:active{cursor:grabbing;}
.chip:hover{transform:translateY(-2px); animation-play-state:paused;}
@keyframes chipFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
.chip .emoji{font-size:26px; line-height:1;}
.chip .name{font-size:10.5px; font-weight:700; text-align:center; line-height:1.2;}
.chip:nth-child(4n+1){animation-delay:0s;}
.chip:nth-child(4n+2){background:var(--chip2); animation-delay:-1s;}
.chip:nth-child(4n+3){background:var(--chip3); animation-delay:-2s;}
.chip:nth-child(4n+4){background:var(--chip4); animation-delay:-3s;}

/* ---------- Tokens in workspace ---------- */
.token{
  position:absolute;
  width:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:10px 4px 8px;
  border-radius:16px;
  border:2.5px solid var(--outline);
  background:var(--chip1);
  color:#1a0e29;
  box-shadow:4px 4px 0 var(--outline);
  cursor:grab;
  touch-action:none;
  user-select:none;
  transition:box-shadow .1s ease;
}
.token.dragging{cursor:grabbing; box-shadow:6px 6px 0 var(--outline); z-index:999; animation:none !important;}
.token .emoji{font-size:30px; line-height:1;}
.token .name{font-size:10px; font-weight:700; text-align:center; line-height:1.15;}

@keyframes shake{
  0%,100%{ transform:translateX(0) rotate(0); }
  20%{ transform:translateX(-5px) rotate(-4deg); }
  40%{ transform:translateX(5px) rotate(4deg); }
  60%{ transform:translateX(-4px) rotate(-3deg); }
  80%{ transform:translateX(4px) rotate(3deg); }
}
.shake{ animation:shake .35s ease; }

@keyframes popin{
  0%{ transform:scale(0.2) rotate(-10deg); opacity:0; }
  60%{ transform:scale(1.15) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); }
}
.pop{ animation:popin .32s ease; }

@keyframes suckIn{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(0.15) translateY(12px); opacity:0; }
}
.token.deleting{ animation:suckIn .25s ease forwards; pointer-events:none; }

/* idle breathing — tokens sitting on the board pulse gently */
@keyframes tokenBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.025); }
}
.token.breathing{ animation:tokenBreathe 3.4s ease-in-out infinite; }

/* landing wobble — a soft settle instead of a hard stop after dragging */
@keyframes tokenLand{
  0%{ transform:scale(0.92) rotate(-3deg); }
  45%{ transform:scale(1.06) rotate(2deg); }
  75%{ transform:scale(0.97) rotate(-1deg); }
  100%{ transform:scale(1) rotate(0); }
}
.token.landing{ animation:tokenLand .32s ease; }

/* rarity glow — endgame elements get an animated pulse (outline, doesn't clash with the sticker box-shadow) */
@keyframes rarePulseOutline{
  0%,100%{ outline:2px solid var(--magenta); outline-offset:2px; filter:drop-shadow(0 0 4px var(--magenta)); }
  50%{ outline:2px solid var(--yellow); outline-offset:3px; filter:drop-shadow(0 0 10px var(--yellow)); }
}
.rare-glow{ animation:rarePulseOutline 2.4s ease-in-out infinite; }
/* combined animations need to be listed together so they don't override each other */
.token.breathing.rare-glow{ animation:tokenBreathe 3.4s ease-in-out infinite, rarePulseOutline 2.4s ease-in-out infinite; }
.token.landing.rare-glow{ animation:tokenLand .32s ease, rarePulseOutline 2.4s ease-in-out infinite; }

/* shockwave ring — pulses out from the drop point on every successful combine */
.shockwave{
  position:absolute;
  width:20px; height:20px;
  border-radius:50%;
  border:3px solid var(--magenta);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:6;
  animation:shockwaveExpand .5s ease-out forwards;
}
@keyframes shockwaveExpand{
  0%{ width:20px; height:20px; opacity:0.85; }
  100%{ width:150px; height:150px; opacity:0; }
}

/* screen flash — brief full-page pulse when you discover a rare element */
.screen-flash{
  position:fixed; inset:0;
  background:var(--magenta);
  opacity:0;
  pointer-events:none;
  z-index:150;
  animation:screenFlashPulse .5s ease-out forwards;
}
@keyframes screenFlashPulse{
  0%{ opacity:0; }
  15%{ opacity:0.32; }
  100%{ opacity:0; }
}

.new-badge{
  position:absolute;
  top:-14px; right:-14px;
  background:var(--yellow);
  color:var(--outline);
  font-family:'Bungee', sans-serif;
  font-size:9px;
  padding:4px 6px;
  border-radius:8px;
  border:2px solid var(--outline);
  transform:rotate(12deg);
  box-shadow:2px 2px 0 var(--outline);
  pointer-events:none;
}

.confetti{
  position:absolute;
  width:7px; height:7px;
  border-radius:2px;
  pointer-events:none;
  opacity:0.95;
}
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(70px) rotate(360deg); opacity:0; }
}

/* ---------- Floating toolbar (book / achievements / theme / codes) ---------- */
#toolbar-buttons{
  position:absolute;
  bottom:16px; left:16px;
  display:flex;
  gap:12px;
  z-index:20;
}
.toolbar-btn{
  width:56px; height:56px;
  border-radius:50%;
  border:3px solid var(--outline);
  box-shadow:3px 3px 0 var(--outline);
  font-size:24px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  animation:btnFloat 4.5s ease-in-out infinite;
}
.toolbar-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--outline); animation-play-state:paused; }
@keyframes btnFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
#book-btn{ background:var(--yellow); order:1; animation-delay:0s; }
#achievements-btn{ background:var(--cyan); order:2; animation-delay:-1.1s; }
#achievements-btn.has-new{ animation:trashBoom 0.6s ease infinite; }
#theme-btn{ background:var(--lime); order:3; animation-delay:-2.2s; }
#codes-btn{ background:var(--magenta); order:999; animation-delay:-3.3s; }

#book-modal{
  position:fixed; inset:0;
  background:rgba(10,5,18,0.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
#book-modal.open{ display:flex; }
#book-card{
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  width:100%;
  max-width:560px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#book-card header{
  background:var(--panel);
  border:none;
  border-bottom:3px solid var(--outline);
  border-radius:0;
  box-shadow:none;
  padding:14px 18px;
}
.book-head-row{ display:flex; align-items:center; justify-content:space-between; }
#book-card h2{ margin:0; font-size:15px; color:var(--lime); font-family:'Bungee',sans-serif; }
#close-book, #close-achievements, #close-info, #close-theme, #close-codes, #close-tracks{
  background:var(--magenta);
  border:2px solid var(--outline);
  color:#1a0113;
  width:32px;height:32px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--outline);
}

.tab-row{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.tab-btn{
  flex:1;
  background:var(--bg2);
  border:2px solid var(--outline);
  color:var(--ink-dim);
  border-radius:10px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  font-family:'Space Grotesk',sans-serif;
  cursor:pointer;
}
.tab-btn.active{ background:var(--magenta); color:#1a0113; }

.tab-panel{
  padding:14px 18px 20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tab-panel.hidden{ display:none; }

.recipe-row{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:12px;
  padding:8px 12px;
  font-size:13px;
  flex-wrap:wrap;
}
.recipe-row .plus{color:var(--ink-dim);}
.recipe-row .eq{color:var(--yellow); font-weight:700;}
#book-empty, #index-empty{color:var(--ink-dim); font-size:13px; padding:6px 4px;}
#book-hint{
  font-size:11px; color:var(--ink-dim); padding:0 18px 14px;
}

#index-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.index-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:12px;
  padding:8px 4px;
  text-align:center;
}
.index-item .emoji{ font-size:22px; }
.index-item .name{ font-size:10px; font-weight:700; color:var(--ink); line-height:1.2; }
.index-item.locked{ filter:grayscale(1); opacity:0.35; }

/* ---------- Achievements ---------- */
#achievements-modal{
  position:fixed; inset:0;
  background:rgba(10,5,18,0.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
#achievements-modal.open{ display:flex; }
#achievements-card{
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  width:100%;
  max-width:420px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#achievements-card header{
  background:var(--panel);
  border:none;
  border-bottom:3px solid var(--outline);
  border-radius:0;
  box-shadow:none;
  padding:14px 18px;
}
#achievements-card h2{ margin:0; font-size:15px; color:var(--lime); font-family:'Bungee',sans-serif; }
#achievements-list{
  padding:14px 18px 20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.achievement-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:14px;
  padding:12px 14px;
}
.achievement-row .ach-emoji{
  font-size:28px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:2px solid var(--outline);
  border-radius:12px;
  flex-shrink:0;
}
.achievement-row .ach-text{ flex:1; }
.achievement-row .ach-name{ font-size:13px; font-weight:700; color:var(--ink); }
.achievement-row .ach-desc{ font-size:11px; color:var(--ink-dim); margin-top:2px; }
.achievement-row.locked{ opacity:0.4; filter:grayscale(0.6); }
.achievement-row.unlocked .ach-emoji{ background:var(--yellow); color:var(--outline); }

/* ---------- Theme picker ---------- */
#theme-modal{
  position:fixed; inset:0;
  background:rgba(10,5,18,0.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
#theme-modal.open{ display:flex; }
#theme-card{
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  width:100%;
  max-width:400px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#theme-card header{
  background:var(--panel);
  border:none;
  border-bottom:3px solid var(--outline);
  border-radius:0;
  box-shadow:none;
  padding:14px 18px;
}
#theme-card h2{ margin:0; font-size:15px; color:var(--lime); font-family:'Bungee',sans-serif; }
#theme-list{
  padding:14px 18px 20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.theme-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  transition:transform .1s ease;
}
.theme-row:hover{ transform:translateY(-1px); }
.theme-row.active{ box-shadow:0 0 0 3px var(--magenta) inset; }
.theme-swatch{
  width:40px; height:40px;
  border-radius:11px;
  border:2px solid var(--outline);
  flex-shrink:0;
}
.theme-row .theme-name{ flex:1; font-size:13px; font-weight:700; color:var(--ink); }
.theme-row .theme-check{ font-size:16px; color:var(--lime); width:20px; text-align:center; }

/* ---------- Music: simple/advanced controls + track picker ---------- */
#musicControls{ display:flex; align-items:center; gap:8px; background:var(--bg2); border:2px solid var(--outline); border-radius:10px; padding:5px 10px; }
.music-icon{ font-size:14px; }
#musicVolumeSlider{
  width:90px;
  accent-color:var(--magenta);
  cursor:pointer;
}
#musicTracksBtn{ padding:5px 9px; font-size:13px; }

#tracks-modal{
  position:fixed; inset:0;
  background:rgba(10,5,18,0.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
#tracks-modal.open{ display:flex; }
#tracks-card{
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  width:100%;
  max-width:400px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#tracks-card header{
  background:var(--panel);
  border:none;
  border-bottom:3px solid var(--outline);
  border-radius:0;
  box-shadow:none;
  padding:14px 18px;
}
#tracks-card h2{ margin:0; font-size:15px; color:var(--lime); font-family:'Bungee',sans-serif; }
#tracks-list{
  padding:14px 18px 20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.track-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg2);
  border:2px solid var(--outline);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  transition:transform .1s ease;
}
.track-row:hover{ transform:translateY(-1px); }
.track-row.active{ box-shadow:0 0 0 3px var(--magenta) inset; }
.track-row .track-emoji{ font-size:22px; width:32px; text-align:center; flex-shrink:0; }
.track-row .track-name{ flex:1; font-size:13px; font-weight:700; color:var(--ink); }
.track-row .track-check{ font-size:16px; color:var(--lime); width:20px; text-align:center; }

/* ---------- Codes ---------- */
#codes-modal{
  position:fixed; inset:0;
  background:rgba(10,5,18,0.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
#codes-modal.open{ display:flex; }
#codes-card{
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  width:100%;
  max-width:380px;
  overflow:hidden;
}
#codes-card header{
  background:var(--panel);
  border:none;
  border-bottom:3px solid var(--outline);
  border-radius:0;
  box-shadow:none;
  padding:14px 18px;
}
#codes-card h2{ margin:0; font-size:15px; color:var(--lime); font-family:'Bungee',sans-serif; }
#codes-body{ padding:18px 20px 22px; }
.codes-sub{ font-size:12.5px; color:var(--ink-dim); margin:0 0 12px; }
.codes-row{ display:flex; gap:8px; }
#codeInput{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:2px solid var(--outline);
  background:var(--bg2);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  outline:none;
}
#codeInput::placeholder{ color:var(--ink-dim); }
#redeemBtn{ font-size:12px; padding:10px 14px; }
.codes-message{
  min-height:18px;
  font-size:12px;
  margin:12px 0 0;
  color:var(--ink-dim);
}
.codes-message.success{ color:var(--lime); }
.codes-message.error{ color:var(--magenta); }

/* ---------- Info modal ---------- */
#info-modal{
  position:fixed; inset:0;
  background:rgba(10,5,18,0.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
#info-modal.open{ display:flex; }
#info-card{
  background:var(--panel);
  border:3px solid var(--outline);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--outline);
  width:100%;
  max-width:380px;
  overflow:hidden;
}
#info-card header{
  background:var(--panel);
  border:none;
  border-bottom:3px solid var(--outline);
  border-radius:0;
  box-shadow:none;
  padding:14px 18px;
}
#info-card h2{ margin:0; font-size:15px; color:var(--lime); font-family:'Bungee',sans-serif; }
#info-body{
  padding:18px 20px 22px;
  font-size:14px;
  line-height:1.6;
}
#info-body .dim{ color:var(--ink-dim); font-size:12.5px; }
#info-body a{ color:var(--cyan); font-weight:700; }
#info-body a:hover{ color:var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  #app{ padding:8px; gap:8px; height:auto; min-height:100vh; }
  header{ padding:8px 12px; border-radius:16px; }
  h1{ font-size:16px; }
  .tagline{ display:none; }
  .title-block .logo{ width:40px; height:40px; font-size:22px; }
  #info-btn{ width:28px; height:28px; font-size:12px; }
  .header-visualizer{ display:none; }
  .header-right{ width:100%; justify-content:space-between; }
  .stat{ font-size:11px; padding:5px 8px; }
  .mode-switch .opt{ padding:6px 10px; font-size:11px; }
  .account-box{ width:100%; justify-content:space-between; }
  .mini-btn{ padding:5px 7px; font-size:10px; }

  main{ flex-direction:column; height:auto; gap:8px; }
  #workspace-wrap{ height:54vh; flex:none; border-radius:18px; }
  #sidebar{ width:100%; height:34vh; flex:none; border-radius:18px; }
  #inventory{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .chip{ padding:8px 4px 6px; }
  .chip .emoji{ font-size:22px; }
  .chip .name{ font-size:9px; }
  .token{ width:74px; }
  .token .emoji{ font-size:26px; }
  .token .name{ font-size:9px; }

  .toolbar-btn, #trash-zone{ width:48px; height:48px; font-size:20px; }
  #toolbar-buttons{ gap:8px; }
  #book-card, #achievements-card, #theme-card, #codes-card{ max-height:86vh; }
  #index-list{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:420px){
  #inventory{ grid-template-columns:repeat(3,1fr); }
  #index-list{ grid-template-columns:repeat(2,1fr); }
}