/* Dragon Chess — Step 1 chess core styling. Warm Eastern-dragon palette. */
:root {
  --bg: #171310;
  --bg2: #211a15;
  --panel: #2b211a;
  --panel-line: #3d2f24;
  --ink: #f3e9d8;
  --ink-dim: #b8a690;
  --gold: #d8a93a;
  --gold-soft: #e7c56b;
  --red: #d24b3a;
  --sq-light: #e9d8b4;
  --sq-dark: #9a6b3f;
  --sel: #6fae5f;
  --last: #d8a93a;
  --check: #d24b3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 50% -10%, #2a201a 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header.topbar {
  width: 100%;
  text-align: center;
  padding: 22px 12px 6px;
}
.title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 8px;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(216, 169, 58, 0.25);
}
.subtitle {
  margin: 4px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 1px;
}

.layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Board ---- */
.board-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---- Hand (bought cards you can play) ---- */
.hand { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; min-height: 44px; }
.hand-empty { color: var(--ink-dim); font-size: 13px; padding: 12px; }
.hand-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 130px; }
.hand-card.targeting .gcard { box-shadow: 0 0 0 2px #e5487a, 0 0 14px #e5487a; }
.hc-btn { flex: 0 0 auto; width: 100%; padding: 5px 8px; font-size: 12px; }
.view-cards-btn { margin: 12px auto 0; display: block; padding: 7px 16px; border-color: var(--gold-soft); }

/* ---- Full-screen "my cards" viewer (reuses .shop-screen positioning) ---- */
.cards-big { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.cardbig { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 232px; }
.cardbig .hc-btn { width: 100%; padding: 8px; font-size: 14px; }
.cards-empty { text-align: center; color: var(--ink-dim); font-size: 16px; padding: 40px; }
.target-hint { display: none; color: var(--gold); font-weight: 700; font-size: 14px; text-align: center; }
.target-hint.show { display: block; }
.square.target { box-shadow: inset 0 0 0 3px #e5487a; cursor: pointer; }

.status {
  font-size: 17px;
  font-weight: 600;
  min-height: 24px;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
}
.status.check { color: var(--red); }
.status.over { color: var(--gold-soft); }

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(78vw, 560px);
  height: min(78vw, 560px);
  border: 6px solid #3d2b1c;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1;
  cursor: pointer;
}
.square.light { background: var(--sq-light); }
.square.dark { background: var(--sq-dark); }

/* Warded tiles (Ward card): a colored inset ring + shield, tinted by owner. */
.square.warded-w { box-shadow: inset 0 0 0 3px rgba(216, 169, 58, 0.75); }
.square.warded-b { box-shadow: inset 0 0 0 3px rgba(120, 180, 255, 0.75); }
.square.warded::after {
  content: '🛡';
  position: absolute; top: 1px; right: 2px;
  font-size: 12px; line-height: 1; opacity: 0.9; pointer-events: none;
}
/* Minded pieces (Mind cards): a brain badge + glow so you can spot the agent. */
.square.minded::before {
  content: '🧠';
  position: absolute; top: 0; left: 2px;
  font-size: 12px; line-height: 1; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 1px 1px #000);
}
.square.minded .piece { filter: drop-shadow(0 0 5px var(--gold-soft)); }

.square .coord {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.55;
  pointer-events: none;
}
.square .coord.file { right: 3px; bottom: 2px; }
.square .coord.rank { left: 3px; top: 2px; }
.square.light .coord { color: #7a5327; }
.square.dark .coord { color: #efe0c2; }

/* piece colours (filled glyphs, tinted) */
.piece { pointer-events: none; }
.piece.w { color: #faf5ea; text-shadow: 0 0 2px #000, 0 1px 2px rgba(0, 0, 0, 0.6); }
.piece.b { color: #241c16; text-shadow: 0 0 2px #d9c9ac, 0 1px 1px rgba(255, 255, 255, 0.3); }

/* highlights */
.square.sel { outline: 4px solid var(--sel); outline-offset: -4px; }
.square.last { box-shadow: inset 0 0 0 4px rgba(216, 169, 58, 0.75); }
.square.incheck { box-shadow: inset 0 0 0 5px var(--check); }

.square .dot {
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(40, 30, 20, 0.35);
}
.square.capture .dot {
  width: 84%;
  height: 84%;
  background: transparent;
  border: 5px solid rgba(40, 30, 20, 0.35);
}

/* ---- Side panel ---- */
.panel {
  width: 260px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel h2 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.controls { display: flex; flex-wrap: wrap; gap: 8px; }
button.btn {
  flex: 1 1 auto;
  background: linear-gradient(180deg, #3a2c20, #2b2017);
  color: var(--ink);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s, border-color 0.15s;
}
button.btn:hover { border-color: var(--gold); }
button.btn:active { transform: translateY(1px); }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); }

.select {
  width: 100%;
  background: var(--bg2);
  color: var(--ink);
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.select.inline { width: auto; flex: 0 0 auto; }
.select option:disabled { color: #7c6b58; }
.blurb { margin-top: 8px; font-size: 12px; color: var(--ink-dim); min-height: 16px; line-height: 1.4; }
.status.thinking { color: var(--gold-soft); }

.captured-row { min-height: 30px; font-size: 22px; line-height: 1.1; }
.captured-row .label { font-size: 11px; color: var(--ink-dim); display: block; letter-spacing: 1px; }
.adv { font-size: 13px; color: var(--gold-soft); font-weight: 700; }

.moves {
  background: var(--bg2);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 8px 10px;
  height: 220px;
  overflow-y: auto;
  font-size: 13px;
  font-family: "Consolas", monospace;
}
.moves .row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px; padding: 2px 0; }
.moves .num { color: var(--ink-dim); }

/* ---- Promotion overlay ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.overlay.show { display: flex; }
.promo {
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 18px 22px;
  text-align: center;
}
.promo h3 { margin: 0 0 12px; color: var(--gold); letter-spacing: 1px; }
.promo .choices { display: flex; gap: 10px; }
.promo .choice {
  font-size: 44px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--sq-light);
  cursor: pointer;
  border: 2px solid transparent;
}
.promo .choice:hover { border-color: var(--gold); }
/* Card mode-choice dialog (e.g. Ninja: Bombing vs Elite Pawns) */
.mode-overlay { z-index: 70; }
.mode-choices { flex-direction: column; gap: 8px; min-width: 220px; }
.mode-btn { padding: 12px 16px; font-size: 15px; border-color: var(--gold-soft); }

/* Elite pawns (Ninja) — a pawn glyph with a distinct gold glow */
.piece.elite { filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 2px var(--gold)); }

/* ===== Card-play animations (a floating clone plays as the card is used) =====
   Scroll (2) rolls up · Minimalist (3) burns · Ornate Gold (4) golds & shatters. */
.card-fx { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 80; }
.card-fx .gcard { animation-fill-mode: forwards; }

/* Scroll — roll up onto the top edge */
.fx-roll { transform-origin: 50% 0%; animation: fxRoll .85s ease-in forwards; }
@keyframes fxRoll {
  0%   { transform: scaleY(1) rotate(0); opacity: 1; }
  12%  { transform: scaleY(1.03) translateY(-3px); }
  100% { transform: scaleY(.03) translateY(-12px) rotate(-1.5deg); opacity: .45; filter: brightness(.8); }
}

/* Minimalist — char, ember-glow, shrink and burn away */
.fx-burn { animation: fxBurn .9s ease-in forwards; }
@keyframes fxBurn {
  0%   { transform: scale(1); opacity: 1; filter: none; box-shadow: 0 0 0 rgba(255,120,20,0); }
  25%  { filter: brightness(1.15) saturate(1.3); box-shadow: 0 0 22px 5px rgba(255,130,25,.85); }
  60%  { filter: sepia(.7) brightness(.6) contrast(1.3); box-shadow: 0 0 34px 10px rgba(255,90,10,.9); transform: scale(.97) rotate(-1.5deg); }
  100% { filter: sepia(1) brightness(.15) contrast(1.5); box-shadow: 0 0 12px 3px rgba(120,40,0,.3); transform: scale(.9) translateY(10px) rotate(1.5deg); opacity: 0; }
}

/* Ornate Gold — turn to gold, then the four quarters break off and fall */
.fx-shatter { position: relative; width: 210px; height: 294px; }
.fx-shard { position: absolute; top: 0; left: 0; }
.fx-shard-tl { clip-path: polygon(0 0,50% 0,50% 50%,0 50%); animation: fxGoldTL 1.05s ease-in forwards; }
.fx-shard-tr { clip-path: polygon(50% 0,100% 0,100% 50%,50% 50%); animation: fxGoldTR 1.05s ease-in forwards; }
.fx-shard-bl { clip-path: polygon(0 50%,50% 50%,50% 100%,0 100%); animation: fxGoldBL 1.05s ease-in forwards; }
.fx-shard-br { clip-path: polygon(50% 50%,100% 50%,100% 100%,50% 100%); animation: fxGoldBR 1.05s ease-in forwards; }
@keyframes fxGoldTL {
  0% { transform: translate(0,0) rotate(0); opacity: 1; filter: none; }
  28% { transform: translate(0,0); filter: sepia(1) saturate(5) brightness(1.35) hue-rotate(-8deg); }
  100% { transform: translate(-80px,210px) rotate(-42deg); opacity: 0; filter: sepia(1) saturate(3) brightness(.7); }
}
@keyframes fxGoldTR {
  0% { transform: translate(0,0) rotate(0); opacity: 1; filter: none; }
  28% { transform: translate(0,0); filter: sepia(1) saturate(5) brightness(1.35) hue-rotate(-8deg); }
  100% { transform: translate(85px,190px) rotate(38deg); opacity: 0; filter: sepia(1) saturate(3) brightness(.7); }
}
@keyframes fxGoldBL {
  0% { transform: translate(0,0) rotate(0); opacity: 1; filter: none; }
  28% { transform: translate(0,0); filter: sepia(1) saturate(5) brightness(1.3) hue-rotate(-8deg); }
  100% { transform: translate(-95px,250px) rotate(28deg); opacity: 0; filter: sepia(1) saturate(3) brightness(.6); }
}
@keyframes fxGoldBR {
  0% { transform: translate(0,0) rotate(0); opacity: 1; filter: none; }
  28% { transform: translate(0,0); filter: sepia(1) saturate(5) brightness(1.3) hue-rotate(-8deg); }
  100% { transform: translate(90px,260px) rotate(-30deg); opacity: 0; filter: sepia(1) saturate(3) brightness(.6); }
}

/* ---- Silver HUD + shop button ---- */
.silver-hud { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-dim); margin-bottom: 10px; }
.silver-hud b { color: var(--gold-soft); font-size: 16px; }
.shop-btn { width: 100%; background: linear-gradient(180deg, #4a3413, #35260f); border-color: var(--gold); font-size: 15px; }

/* ---- Full-screen shop ---- */
.shop-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  padding: 40px 20px;
  overflow: auto;
  background: radial-gradient(1000px 600px at 50% -5%, #33261a 0%, #120e0a 65%);
}
.shop-screen.show { display: block; }
.shop-inner { position: relative; width: min(1000px, 96vw); margin: 0 auto; }
.shop-x {
  position: absolute;
  top: -8px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--panel-line);
  font-size: 20px;
  cursor: pointer;
}
.shop-x:hover { border-color: var(--gold); color: var(--gold); }
.shop-title { text-align: center; color: var(--gold); letter-spacing: 4px; margin: 0 0 6px; font-size: 34px; }
.shop-silver { text-align: center; color: var(--gold-soft); font-size: 18px; margin-bottom: 10px; }
.shop-silver b { font-size: 22px; }
.shop-actions { display: flex; justify-content: center; margin-bottom: 22px; }
.shop-actions .btn { flex: 0 0 auto; padding: 8px 18px; border-color: var(--gold-soft); }

.shop-slots { display: flex; flex-wrap: wrap; gap: 20px 16px; justify-content: center; }
.shop-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shop-slots .shop-slot { width: 168px; }
.card-face {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 12px;
  background: linear-gradient(160deg, #2c2118, #1c150f);
  border: 2px solid var(--panel-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  color: var(--gold);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
}
.card-face.sold { color: var(--sel); border-color: var(--sel); opacity: 0.6; }
.card-name { font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; }
.slot-meta { font-size: 12px; font-weight: 700; color: var(--gold-soft); text-align: center; }
.slot-text { font-size: 11px; color: var(--ink-dim); text-align: center; line-height: 1.35; padding: 0 4px; }
.slot-pow { position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: #17110a; border: 1px solid var(--gold); color: var(--gold);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* Brain tints for the AI "mind" card icons (mirrors cards/preview.html) */
.ricon { display: inline-block; filter: hue-rotate(32deg) saturate(2.4) brightness(0.95); }
.brain-blue { display: inline-block; filter: hue-rotate(-110deg) saturate(1.9); }
.brain-yellow { display: inline-block; filter: hue-rotate(85deg) saturate(2.5) brightness(1.2); }
.brain-violet { display: inline-block; filter: hue-rotate(-58deg) saturate(1.9) brightness(0.92); }
.brain-white { display: inline-block; filter: grayscale(1) brightness(1.85); }
.brain-orange { display: inline-block; filter: hue-rotate(58deg) saturate(2.6) brightness(1.05); }
.brain-black { display: inline-block; filter: brightness(0) drop-shadow(0 0 4px rgba(255,255,255,0.7)); }
.card-price { font-size: 13px; color: var(--gold-soft); }
.slot-price { font-size: 13px; font-weight: 700; color: var(--gold-soft); text-align: center; margin: 2px 0; }
.buy-btn { width: 100%; }

/* ===== In-game card designs (mirror cards/preview.html prototypes 2/3/4).
   Every internal size is calc(var(--cw) * f) — relative to the card's own width
   --cw — so a card scales cleanly at any size with no container-query quirks.
   Set --cw per context (shop / hand / big view). Design chosen per family:
   Scroll=2 Scrollcard, Standard=3 Minimalist, Mind=4 Ornate Gold.
   --rc/--rg carry the rarity tint (set inline per card). ===== */
.gcard { --cw: 160px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .05); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 11px var(--rg); }
.gcard.sold { filter: grayscale(.75) brightness(.5); }
.gcard .sold-check { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * .44); color: var(--sel); text-shadow: 0 2px 8px #000; z-index: 4; }
.gcard.sold .sold-check { display: flex; }

/* ---- Design 2: Scrollcard (parchment) ---- */
.g2 { background: linear-gradient(160deg, #efe2c4, #d8c4a0); border: calc(var(--cw) * .013) solid #5a4326; color: #33260f; }
.g2 .g-title { text-align: center; font-family: Georgia, "Times New Roman", serif; font-weight: 800;
  font-size: calc(var(--cw) * .082); letter-spacing: .3px; line-height: 1.08;
  padding: calc(var(--cw) * .06) calc(var(--cw) * .15) calc(var(--cw) * .02); }
.g2 .g-rule { height: calc(var(--cw) * .01); background: #5a4326; opacity: .5; margin: 0 calc(var(--cw) * .07); }
.g2 .g-art { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * .4); height: calc(var(--cw) * .58); filter: sepia(.3) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.g2 .g-seal { position: absolute; top: calc(var(--cw) * .04); right: calc(var(--cw) * .04);
  width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); border-radius: 50%; background: var(--rc);
  border: calc(var(--cw) * .008) solid #3a2a12; color: #fff; font-size: calc(var(--cw) * .04); font-weight: 800;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.g2 .g-box { flex: 1 1 auto; overflow: hidden; margin: calc(var(--cw) * .02) calc(var(--cw) * .06);
  background: rgba(90,67,38,.12); border: calc(var(--cw) * .005) solid #5a4326; border-radius: calc(var(--cw) * .03);
  padding: calc(var(--cw) * .03) calc(var(--cw) * .04); font-size: calc(var(--cw) * .052); line-height: 1.25; }
.g2 .g-foot { display: flex; justify-content: space-between;
  padding: calc(var(--cw) * .02) calc(var(--cw) * .06) calc(var(--cw) * .035); font-weight: 700; font-size: calc(var(--cw) * .05); }

/* ---- Design 3: Minimalist (flat) ---- */
.g3 { background: #1d1712; border: calc(var(--cw) * .006) solid var(--panel-line); }
.g3 .g-band { background: var(--rc); color: #17110a; padding: calc(var(--cw) * .03) calc(var(--cw) * .05); display: flex;
  justify-content: space-between; font-weight: 800; font-size: calc(var(--cw) * .05); text-transform: uppercase; letter-spacing: .5px; }
.g3 .g-art { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cw) * .42); min-height: 0; }
.g3 .g-name { text-align: center; font-size: calc(var(--cw) * .082); font-weight: 700; color: var(--ink); }
.g3 .g-div { height: calc(var(--cw) * .005); background: var(--panel-line); margin: calc(var(--cw) * .03) calc(var(--cw) * .08); }
.g3 .g-text { text-align: center; font-size: calc(var(--cw) * .052); color: var(--ink-dim); padding: 0 calc(var(--cw) * .05); line-height: 1.28; }
.g3 .g-foot3 { display: flex; justify-content: space-between; padding: calc(var(--cw) * .03) calc(var(--cw) * .06);
  font-size: calc(var(--cw) * .05); font-weight: 800; border-top: calc(var(--cw) * .005) solid var(--panel-line); margin-top: calc(var(--cw) * .03); }
.g3 .g-foot3 .g-cost { color: var(--gold); }
.g3 .g-foot3 .g-odds { color: var(--rc); }

/* ---- Design 4: Ornate Gold (classic frame) ---- */
.g4 { background: #12100b; border: calc(var(--cw) * .013) double var(--gold); padding: calc(var(--cw) * .03); }
.g4 .g-inner { border: calc(var(--cw) * .005) solid var(--rc); border-radius: calc(var(--cw) * .04); flex: 1 1 auto;
  position: relative; display: flex; flex-direction: column; overflow: hidden; }
.g4 .g-ribbon { background: var(--rc); color: #17110a; text-align: center; font-size: calc(var(--cw) * .042); font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; padding: calc(var(--cw) * .015); border-radius: calc(var(--cw) * .03) calc(var(--cw) * .03) 0 0; }
.g4 .g-window { position: relative; margin: calc(var(--cw) * .03); border: calc(var(--cw) * .008) solid var(--gold);
  border-radius: calc(var(--cw) * .02); flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * .38); min-height: 0; background: radial-gradient(circle at 50% 40%, #2a2013, #100c08); }
.g4 .g-pow { position: absolute; top: calc(var(--cw) * .02); right: calc(var(--cw) * .02);
  width: calc(var(--cw) * .13); height: calc(var(--cw) * .13); border-radius: 50%; background: #17110a;
  border: calc(var(--cw) * .008) solid var(--gold); color: var(--gold); font-size: calc(var(--cw) * .06); font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.g4 .g-banner { text-align: center; font-family: Georgia, serif; font-weight: 800; font-size: calc(var(--cw) * .07); color: var(--gold); margin: 0 calc(var(--cw) * .03); }
.g4 .g-text4 { font-size: calc(var(--cw) * .046); color: var(--ink-dim); text-align: center;
  padding: calc(var(--cw) * .015) calc(var(--cw) * .05) calc(var(--cw) * .08); line-height: 1.25; }
.g4 .g-corners { position: absolute; inset: calc(var(--cw) * .01); pointer-events: none; }
.g4 .g-corners span { position: absolute; color: var(--gold); font-size: calc(var(--cw) * .05); }
.g4 .g-corners .tl { top: 0; left: calc(var(--cw) * .01); } .g4 .g-corners .tr { top: 0; right: calc(var(--cw) * .01); }
.g4 .g-corners .bl { bottom: 0; left: calc(var(--cw) * .01); } .g4 .g-corners .br { bottom: 0; right: calc(var(--cw) * .01); }
.g4 .g-pc { position: absolute; bottom: calc(var(--cw) * .02); width: 100%; display: flex; justify-content: space-between;
  padding: 0 calc(var(--cw) * .05); font-size: calc(var(--cw) * .046); font-weight: 800; color: var(--gold); }

/* Per-context card sizes */
.shop-slots .gcard { --cw: 168px; cursor: zoom-in; }
.hand-card .gcard { --cw: 130px; }
.cardbig .gcard { --cw: 232px; }

/* Click-to-zoom overlay (tap any shop card to see it large; click to dismiss) */
.zoom-screen { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); cursor: zoom-out; padding: 20px; }
.zoom-screen.show { display: flex; }
.zoom-screen .gcard { --cw: min(340px, 80vw); box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 24px var(--rg); }
.buy-btn:disabled { opacity: 0.45; cursor: default; border-color: var(--panel-line); }
.shop-note { text-align: center; color: var(--ink-dim); font-size: 12px; margin-top: 26px; }

/* Bug-report bar (under the silver + rarity panels). Placeholder — not wired up yet. */
.bug-bar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px;
}
.bug-label { color: var(--gold-soft); font-size: 14px; font-weight: 700; white-space: nowrap; }
.bug-input {
  flex: 1; min-width: 0; background: #17110d; border: 1px solid var(--panel-line);
  border-radius: 8px; color: var(--ink); padding: 9px 12px; font-size: 14px; font-family: inherit;
}
.bug-input::placeholder { color: var(--ink-dim); }
.bug-input:focus { outline: none; border-color: var(--gold-soft); }
.bug-bar .bug-send { flex: 0 0 auto; padding: 9px 20px; }

/* Booster row: info panels (silver + draw odds) under card slots 1 & 2, then
   the 3 booster holders under card slots 3, 4 and 5. */
.booster-row { display: flex; flex-wrap: wrap; gap: 20px 16px; justify-content: center; margin-top: 20px; }
.booster-row .shop-slot { width: 168px; } /* match the card slots above */

/* Info panels that fill the two spots under card slots 1 & 2 */
.shop-info {
  width: 168px;
  aspect-ratio: 5 / 7;
  border-radius: 12px;
  background: linear-gradient(160deg, #2c2118, #1c150f);
  border: 2px solid var(--gold-soft);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.silver-info { align-items: center; justify-content: center; gap: 4px; }
.si-coin { font-size: 40px; line-height: 1; }
.si-amt { font-size: 32px; font-weight: 800; color: var(--gold); }
.si-cap { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); }
.rarity-info { justify-content: center; gap: 7px; }
.ri-row { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.ri-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.ri-name { color: var(--ink); flex: 1; }
.ri-odds { color: var(--gold-soft); font-weight: 700; }

@media (max-width: 640px) {
  .shop-slots { grid-template-columns: repeat(2, 1fr); }
  .card-face { font-size: 40px; }
  .booster-row { grid-template-columns: repeat(2, 1fr); }
  /* Keep the title clear of the ✕ close button on narrow screens */
  .shop-title { font-size: 22px; letter-spacing: 2px; padding: 0 44px; }
  .bug-bar { flex-wrap: wrap; }
  .bug-input { flex-basis: 100%; order: 3; }
}

footer { color: var(--ink-dim); font-size: 12px; padding: 10px 0 24px; }