/* ============================================================
   Magical Towers — Lego-style wizard game theme
   Bright plastic bricks, hard edges, subtle 3D. Chunky rounded
   Baloo 2 font (self-hosted). No border-radius on bricks.
   ============================================================ */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Baloo2-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Baloo2-700-latin.woff2') format('woff2');
}

/* element color palettes (base / light top face / dark shade-outline) */
:root {
  --fire:   #D01012; --fireL:   #F4373C; --fireD:   #6e0809;
  --ice:    #0D6BDB; --iceL:    #4D8FE8; --iceD:    #0a3d86;
  --nature: #2FA24E; --natureL: #6FD98C; --natureD: #145c2c;
  --bolt:   #F2B705; --boltL:   #FFE066; --boltD:   #8a6400;
  --star:   #7C2FD6; --starL:   #B77BF2; --starD:   #3f1660;

  --ink: #241a2e;
  --night1: #1c1145;
  --night2: #41247e;
  --horizon: #7a3b9e;
  --lawn: #1f6b3c;
  --lawnL: #37a05b;
  --plate: #2b7d49;
  --cream: #fff4d6;
  --gold: #ffe066;
  --font: 'Baloo 2', 'Comic Sans MS', 'Chalkboard SE', 'Arial Rounded MT Bold', sans-serif;
  --bw: 88px;            /* tower brick width  */
  --bh: 30px;            /* tower brick height */
  --radius-btn: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  background: var(--ink);
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============ TOP BAR ============ */
#topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px;
  background: linear-gradient(#2a1a63, #241a4d);
  border-bottom: 3px solid #171030;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand-brick { width: 34px; height: 34px; flex: 0 0 auto; }
.brand h1 {
  font-size: clamp(15px, 2.6vw, 24px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.top-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }

/* coin counter chip (top corner) */
#coinHUD {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: 8px;
  background: rgba(12, 6, 34, 0.72);
  border: 2px solid rgba(255, 224, 102, 0.95);
  border-radius: 999px;
  padding: 3px 12px 3px 7px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 2px 0 rgba(0, 0, 0, 0.4);
}
#coinHUD .coin-ic { width: 20px; height: 20px; flex: 0 0 auto; }
#coinHUD #coinAmt {
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  min-width: 26px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
#coinHUD.bump { animation: coinBump 0.38s ease; }
@keyframes coinBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* shop button gets its own color so it pops next to the book */
.btn-shop { background: #1f8f4d; box-shadow: 0 4px 0 #0e5a2d, inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.btn-shop:active { box-shadow: 0 1px 0 #0e5a2d, inset 0 2px 0 rgba(255, 255, 255, 0.3); }


/* ============ BUTTONS (toy chunky) ============ */
.btn {
  font-family: var(--font);
  font-weight: 700;
  border: none;
  cursor: pointer;
  color: #fff;
  background: #6a5acd;
  border-radius: var(--radius-btn);
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  touch-action: manipulation;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.3); }

.btn-tool { background: #4b3a8f; font-size: 13px; padding: 7px 12px; }
.btn-tool .btn-ic { font-size: 15px; line-height: 1; }
.btn-svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pill {
  background: var(--gold);
  color: #5a4000;
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
}

.btn-cast {
  background: var(--fire);
  color: var(--gold);
  font-size: clamp(19px, 3.4vw, 26px);
  padding: 10px 34px;
  letter-spacing: 2px;
  border-radius: 22px;
  box-shadow: 0 5px 0 #6e0809, 0 8px 0 rgba(0, 0, 0, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.btn-cast:active { transform: translateY(4px); box-shadow: 0 1px 0 #6e0809, 0 2px 0 rgba(0, 0, 0, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.3); }
.btn-cast .btn-svg { width: 24px; height: 24px; }

/* ============ STAGE ============ */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--night1) 0%, var(--night2) 55%, var(--horizon) 100%);
  z-index: 1;
}

/* sky stars (spans injected by JS) */
#sky { position: absolute; inset: 0 0 55% 0; pointer-events: none; }
#sky .st {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 2.4s ease-in-out infinite;
}
#sky .spark {
  position: absolute;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: rgba(255, 240, 200, 0.95);
  animation: twinkle 1.8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 240, 200, 0.8);
}
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* QA/demo screenshots: freeze infinite twinkle so headless virtual time can quiesce */
html.qa #sky .st, html.qa #sky .spark { animation: none !important; }

#moon {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffbe8, #ffe9a8 70%);
  box-shadow: 0 0 40px 10px rgba(255, 236, 170, 0.35);
  opacity: 0.95;
  z-index: 1;
}
#moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle 7px at 62% 40%, rgba(200, 170, 110, 0.5), transparent 70%),
    radial-gradient(circle 5px at 34% 62%, rgba(200, 170, 110, 0.45), transparent 70%),
    radial-gradient(circle 9px at 74% 72%, rgba(200, 170, 110, 0.4), transparent 70%);
}

/* hills silhouettes */
#hills { position: absolute; left: 0; right: 0; bottom: 42px; height: 90px; z-index: 1; pointer-events: none; }
.hill { position: absolute; border-radius: 50%; background: #2c1a55; }
.hill.h1 { width: 70%; height: 190px; left: -12%; bottom: -80px; background: #332060; }
.hill.h2 { width: 60%; height: 160px; right: -10%; bottom: -70px; background: #2a1950; }

/* ground lawn */
#ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 34%;
  min-height: 96px;
  background: linear-gradient(to top, var(--lawn), #287a47 60%, var(--lawnL));
  z-index: 2;
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.12);
}

/* LEGO baseplate front: stud-dotted strip below the lawn line */
#groundFront {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 26px;
  z-index: 3;
  background-color: var(--plate);
  background-image:
    radial-gradient(circle 4px at 14px 13px, rgba(0, 0, 0, 0.28) 55%, transparent 60%),
    radial-gradient(circle 4px at 14px 13px, #3f9a63 55%, transparent 60%);
  background-size: 28px 26px, 28px 26px;
  background-position: 0 0, 14px 0;
  border-top: 3px solid #17542e;
}

/* tower + plate */
#towerZone {
  position: absolute;
  left: 50%;
  bottom: 26px;              /* sits on top of the baseplate front strip */
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
#basePlate {
  position: absolute;
  left: 50%; bottom: -14px;
  transform: translateX(-50%);
  width: calc(var(--bw) + 64px);
  height: 16px;
  background: var(--lawnL);
  border: 3px solid #17542e;
  border-radius: 3px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
#tower {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--ts, 1));
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column-reverse; /* first brick at the bottom; new bricks stack upward */
}

/* ============ BRICKS ============ */
.brick {
  position: relative;
  width: var(--bw);
  height: var(--bh);
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px var(--cD), inset 0 -4px 0 rgba(0, 0, 0, 0.22);
  background:
    linear-gradient(var(--cL), var(--cL) 10px, var(--c) 10px, var(--c)); /* top face band */
}

.brick::before { /* glossy top highlight */
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: 1px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}

/* studs row */
.brick .studs {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12px;
  display: flex;
  justify-content: space-around;
  padding: 0 9px;
  pointer-events: none;
}
.brick .stud {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85) 0 22%, rgba(255, 255, 255, 0) 42%),
    var(--cL);
  box-shadow: inset 0 0 0 2px var(--cD), inset 0 -3px 2px rgba(0, 0, 0, 0.28);
  transform: translateY(-3px);
}

/* brick colour classes */
.el-fire   { --c: var(--fire);   --cL: var(--fireL);   --cD: var(--fireD); }
.el-ice    { --c: var(--ice);    --cL: var(--iceL);    --cD: var(--iceD); }
.el-nature { --c: var(--nature); --cL: var(--natureL); --cD: var(--natureD); }
.el-bolt   { --c: var(--bolt);   --cL: var(--boltL);   --cD: var(--boltD); }
.el-star   { --c: var(--star);   --cL: var(--starL);   --cD: var(--starD); }

/* new brick drop-in */
.brick.brick-in { animation: brickIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1); }
@keyframes brickIn {
  0%   { transform: translateY(-110px) scale(0.9); opacity: 0; }
  60%  { transform: translateY(6px) scale(1.02); opacity: 1; }
  80%  { transform: translateY(-3px); }
  100% { transform: translateY(0) scale(1); }
}

/* knock-down fall */
.brick.falling {
  animation: brickFall var(--fdur, 0.9s) cubic-bezier(0.4, 0, 1, 1) forwards;
  animation-delay: var(--delay, 0s);
  pointer-events: none;
}
@keyframes brickFall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, 500px)) rotate(var(--rot, 40deg)); opacity: 0; }
}

/* palette mini bricks */
#palette {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(6px, 1.6vw, 16px);
  flex-wrap: nowrap;
  padding: 2px 4px;
}
.pal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  font-family: var(--font);
  font-weight: 700;
  touch-action: none;
  -webkit-user-drag: none;
}
.pal .mini {
  position: relative;
  display: block;
  width: 62px;
  height: 26px;
  background:
    linear-gradient(var(--cL), var(--cL) 9px, var(--c) 9px, var(--c));
  box-shadow: inset 0 0 0 2px var(--cD), inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease;
  pointer-events: none;
}
.pal .mini .stud {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85) 0 22%, transparent 42%), var(--cL);
  box-shadow: inset 0 0 0 2px var(--cD), inset 0 -3px 2px rgba(0, 0, 0, 0.26);
}
.pal .mini .studs {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  display: flex;
  justify-content: space-around;
  padding: 0 8px;
  transform: translateY(-3px);
}
.pal span.name {
  font-size: clamp(8px, 1.5vw, 11.5px);
  color: var(--cream);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
  line-height: 1;
}
.pal:active .mini { transform: scale(0.92) translateY(2px); }
.pal.ghosting { opacity: 0.35; }

/* drag ghost brick */
#dragGhost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  width: var(--bw);
  height: var(--bh);
  opacity: 0.92;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
}

/* ============ SORCERESS ============ */
#sorceress {
  position: absolute;
  left: calc(50% + var(--bw) * 1.15 + 22px);
  bottom: 26px;
  width: 128px;
  z-index: 6;
  pointer-events: none;
}
#sorceress svg { width: 100%; height: auto; display: block; overflow: visible; }

/* body states */
#mage { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%; }
#sorceress.raising #mage { animation: mageHop 0.34s ease; }
#sorceress.casting #mage { animation: mageCast 0.5s ease; transform: rotate(-6deg); }
#sorceress.shrug #mage { animation: mageShrug 0.8s ease; }
@keyframes mageHop {
  0% { transform: translateY(0); }
  45% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
@keyframes mageCast {
  0% { transform: rotate(0); }
  30% { transform: rotate(4deg); }
  60% { transform: rotate(-7deg); }
  100% { transform: rotate(-6deg); }
}
@keyframes mageShrug {
  0% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  60% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* arms + staff (SVG groups, rotate around shoulder/hand) */
#armLeft, #armRight, #staffWrap, .headgear {
  transform-box: fill-box;
  transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1);
}
#armLeft  { transform-origin: 55% 12%; }
#armRight { transform-origin: 60% 38%; }
#staffWrap{ transform-origin: 50% 82%; }
.headgear { transform-origin: 50% 90%; }

#sorceress.raising #armRight { transform: rotate(-150deg); }  /* lift staff arm */
#sorceress.raising #staffWrap{ transform: rotate(-78deg); }   /* staff up toward tower */
#sorceress.casting #armRight { transform: rotate(-150deg); }
#sorceress.casting #staffWrap{ transform: rotate(-62deg); }
#sorceress.shrug #armLeft  { transform: rotate(40deg); }
#sorceress.shrug #armRight { transform: rotate(28deg); }
#sorceress.shrug #staffWrap{ transform: rotate(20deg); }
#sorceress.shrug .headgear { transform: rotate(8deg); }

#staffCrystal { transition: fill 0.25s ease, filter 0.2s ease; }
#sorceress.casting #staffCrystal { filter: drop-shadow(0 0 10px var(--crystal-glow, #ffe066)); }
#sorceress.raising #staffCrystal { filter: drop-shadow(0 0 6px var(--crystal-glow, #ffe066)); }

/* speech bubble */
#bubble {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #3a2160;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  animation: bubblePop 0.3s cubic-bezier(0.34, 1.8, 0.5, 1);
  max-width: 220px;
  text-align: center;
  white-space: normal;
  line-height: 1.1;
}
#bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
}
@keyframes bubblePop { from { transform: translateX(-50%) scale(0.4); } to { transform: translateX(-50%) scale(1); } }

/* ============ FX CANVAS + BANNER ============ */
#fx {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

#banner {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  text-align: center;
  pointer-events: none;
  animation: bannerIn 0.4s cubic-bezier(0.34, 1.9, 0.5, 1);
  max-width: 92vw;
}
#bannerSub {
  font-size: clamp(11px, 2vw, 15px);
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  margin-bottom: 2px;
}
#bannerName {
  font-size: clamp(30px, 7.5vw, 64px);
  line-height: 1.02;
  color: #fff;
  letter-spacing: 1px;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.55);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 26px var(--glow, #ffe066);
  white-space: nowrap;
}
#banner.new .pill-new {
  display: inline-block;
  background: var(--gold);
  color: #5a4000;
  font-size: clamp(10px, 1.8vw, 14px);
  border-radius: 999px;
  padding: 2px 12px;
  margin-top: 4px;
  letter-spacing: 1px;
  animation: popPulse 0.6s ease infinite alternate;
}
@keyframes bannerIn { from { transform: translateX(-50%) scale(0.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes popPulse { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ============ DOCK (palette + cast) ============ */
#dock {
  flex: 0 0 auto;
  background: linear-gradient(#241a4d, #1b1138);
  border-top: 4px solid #171030;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 15;
}
#hint {
  font-size: clamp(9px, 1.6vw, 12px);
  color: #b9a8e8;
  letter-spacing: 1px;
  text-align: center;
}
#dockRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 1px;
}

/* floating "+N coins" popup */
.coin-pop {
  position: fixed;
  z-index: 85;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(22px, 5.4vw, 38px);
  font-family: var(--font);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 224, 102, 0.5);
  white-space: nowrap;
  animation: coinPop 1.15s cubic-bezier(0.25, 0.7, 0.4, 1) forwards;
}
.cp-coin {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6d8 0 16%, #ffe066 34%, #f7b500 80%);
  box-shadow: inset 0 0 0 2px rgba(138, 100, 0, 0.85), inset 0 -2px 2px rgba(138, 100, 0, 0.55);
}
.cp-coin-sm { width: 0.72em; height: 0.72em; vertical-align: -0.08em; }
@keyframes coinPop {
  0%   { opacity: 0; transform: translate(-50%, -6px) scale(0.5); }
  18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  32%  { transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(1); }
}

/* ============ TOAST ============ */
#toast {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 12, 44, 0.92);
  border: 2px solid var(--gold);
  color: var(--cream);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.6px;
  z-index: 80;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: toastIn 0.25s ease;
  max-width: 92vw;
  text-align: center;
}
@keyframes toastIn { from { transform: translateX(-50%) translateY(-14px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ============ SPELL BOOK MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 30, 0.72);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal-card {
  background: linear-gradient(#33206e, #241a4d);
  border: 4px solid #171030;
  border-radius: 22px;
  box-shadow: 0 0 0 3px var(--gold), 0 14px 40px rgba(0, 0, 0, 0.6);
  width: min(680px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.6, 0.5, 1);
}
@keyframes modalIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 4px;
}
.modal-head h2 {
  color: var(--gold);
  font-size: clamp(18px, 3.4vw, 26px);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.btn-close {
  background: var(--fire);
  font-size: 15px;
  padding: 6px 13px;
  border-radius: 12px;
}
#bookSub {
  padding: 0 20px 8px;
  color: #b9a8e8;
  font-size: 12px;
  letter-spacing: 1px;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  padding: 8px 16px 16px;
  overflow-y: auto;
  min-height: 120px;
}
.book-tile {
  background: #1c1145;
  border: 3px solid #33206e;
  border-radius: 16px;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 116px;
  transition: transform 0.1s ease;
}
.book-tile.locked { opacity: 0.75; background: #171030; border-color: #241a4d; }
.book-tile .q {
  font-size: 42px;
  line-height: 1;
  color: #6a5a9e;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-tile .swatch { height: 22px; width: 74px; border-radius: 8px; flex: 0 0 auto; }
.book-tile.locked .swatch { visibility: hidden; }
.book-tile .nm {
  font-size: 11.5px;
  line-height: 1.05;
  text-align: center;
  color: var(--cream);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
}
.book-tile .tier-tag {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #8f7fa8;
  margin-top: -3px;
}
.book-tile .tier-tag.ultimate { color: var(--gold); }
.book-tile .mini-btn {
  font-family: var(--font);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  background: var(--gold);
  color: #5a4000;
  font-size: 10.5px;
  padding: 3px 12px;
  letter-spacing: 0.6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.book-tile .mini-btn:active { transform: translateY(2px); box-shadow: none; }
.book-tile.just-found { animation: foundPulse 0.8s ease; border-color: var(--gold); }
@keyframes foundPulse { 0% { transform: scale(0.6); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* swatches */
.swatch.ss-single { background: linear-gradient(var(--cL), var(--cL) 40%, var(--c) 40%); box-shadow: inset 0 0 0 2px var(--cD); }
.swatch.ss-pair { background: linear-gradient(90deg, var(--c1L) 0 50%, var(--c2L) 50% 100%); }
.swatch.ss-rainbow { background: linear-gradient(90deg, #D01012, #FF8A00, #F2B705, #2FA24E, #0D6BDB, #7C2FD6); }

/* ============ SHOP MODAL ============ */
.shop-card { width: min(600px, 96vw); }
#shopSub {
  padding: 0 20px 2px;
  color: #b9a8e8;
  font-size: 12px;
  letter-spacing: 1px;
}
.shop-bal {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 20px 4px auto;
  background: rgba(12, 6, 34, 0.8);
  border: 2px solid rgba(255, 224, 102, 0.85);
  border-radius: 999px;
  padding: 3px 14px 3px 8px;
  font-size: 15px;
  color: var(--gold);
}
.shop-bal .coin-ic { width: 19px; height: 19px; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  padding: 10px 18px 18px;
  overflow-y: auto;
  min-height: 140px;
}
.gear-card {
  background: #1c1145;
  border: 3px solid #33206e;
  border-radius: 18px;
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: transform 0.1s ease;
}
.gear-card.worn { border-color: var(--gold); background: #241a4d; }
.gear-ic {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #33206e, #241a4d 78%);
  border: 2px solid #4b3a8f;
  padding: 4px;
}
.gear-name { font-size: 13px; color: var(--cream); line-height: 1.1; letter-spacing: 0.3px; }
.gear-price {
  font-size: 12px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
  min-height: 16px;
}
.gear-price .cp-coin { width: 0.68em; height: 0.68em; }
.gear-price.owned { color: #8fdc9e; }
.gear-price.expensive { color: #ff8080; }
.gear-btn {
  font-family: var(--font);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  background: var(--gold);
  color: #5a4000;
  font-size: 12px;
  padding: 5px 16px;
  letter-spacing: 0.7px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  margin-top: 2px;
  min-width: 108px;
}
.gear-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.gear-btn.wearing { background: #1f8f4d; color: #fff; box-shadow: 0 3px 0 #0e5a2d; }
.gear-btn.broke {
  background: #4b4455;
  color: #9d93ad;
  box-shadow: 0 3px 0 #2e2a38;
  cursor: not-allowed;
}

/* ============ SMALL SCREENS ============ */
@media (max-width: 660px) {
  .btn-tool { font-size: 12px; padding: 7px 9px; }
  #coinHUD { padding: 3px 10px 3px 6px; }
  #coinHUD .coin-ic { width: 17px; height: 17px; }
  #coinHUD #coinAmt { font-size: 13px; min-width: 20px; }
}
@media (max-width: 560px) {
  /* icon-only tool buttons so everything still fits a phone */
  .btn-tool .lbl { display: none; }
  .btn-tool { padding: 9px; }
  .btn-svg { width: 19px; height: 19px; }
  .top-actions { gap: 7px; }
  #coinHUD { margin-left: 6px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 460px) {
  /* too narrow for the full wordmark - keep the brick badge */
  .brand h1 { display: none; }
  .brand-brick { width: 30px; height: 30px; }
  #topbar { padding: 8px 8px 6px; }
}
@media (max-width: 600px) {
  :root { --bw: 78px; --bh: 27px; }
  #sorceress { left: calc(50% + var(--bw) * 0.95 + 6px); width: 96px; }
  .pal .mini { width: 52px; height: 22px; }
  .pal .mini .stud { width: 9px; height: 9px; }
  .brand h1 { font-size: 15px; }
  #moon { width: 46px; height: 46px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
@media (max-height: 520px) {
  :root { --bw: 72px; --bh: 24px; }
  #sorceress { width: 84px; }
  #dock { padding-top: 2px; }
}

/* e2e results dump */
#e2e {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: #000;
  color: #0f0;
  font: 10px/1.3 monospace;
  padding: 6px;
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  user-select: text;
  pointer-events: auto;
}