:root {
  --bg-0: #07021a;
  --bg-1: #15063b;
  --bg-2: #2d0a5e;
  --ink: #f5ebff;
  --ink-dim: #b9a8d9;
  --accent: #ff5fa2;
  --accent-2: #5ee0ff;
  --accent-3: #ffd24a;
  --good: #58f5b3;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-bd: rgba(255, 255, 255, 0.14);
  --shadow-1: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 28px 80px rgba(122, 45, 220, 0.45);
  --radius: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Use the dynamic viewport unit on mobile so the URL bar collapsing/expanding
     doesn't make the layout overflow. Fallback to 100vh on older browsers. */
  height: 100vh;
  height: 100dvh;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, #4a0e9a 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #1d0a55 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, #0f0432 100%);
  overflow: hidden;
  overscroll-behavior: none; /* no bounce/pull-to-refresh on mobile */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation; /* removes 300ms tap delay, prevents double-tap zoom */
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-orbs span {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  animation: float 22s ease-in-out infinite;
  will-change: transform;
}
.bg-orbs span:nth-child(1) { background: #ff3d9a; top: -140px; left: -120px; }
.bg-orbs span:nth-child(2) { background: #4ad8ff; bottom: -160px; right: -100px; animation-delay: -7s; }
.bg-orbs span:nth-child(3) { background: #ffd24a; top: 25%; right: -180px; animation-delay: -12s; opacity: 0.22; }
.bg-orbs span:nth-child(4) { background: #8a2be2; bottom: 8%; left: -180px; animation-delay: -16s; opacity: 0.36; }

@keyframes float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(60px, -40px, 0) scale(1.1); }
}

.app {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 80px;
  grid-template-rows: auto 1fr auto;
  column-gap: 12px;
  row-gap: 10px;
  padding: 12px clamp(8px, 2.4vw, 24px);
  max-width: 1020px;
  margin: 0 auto;
  overflow: hidden;
}
/* Explicit grid placement (more portable than grid-template-areas on older
   browsers). Tube occupies column 2 across all 3 rows. */
.reserve     { grid-column: 1; grid-row: 1; }
.board-wrap  { grid-column: 1; grid-row: 2; min-height: 0; }
.deck-bar    { grid-column: 1; grid-row: 3; }
.score-tube  { grid-column: 2; grid-row: 1 / -1; align-self: stretch; }

/* ---------- Score test-tube ---------- */
.score-tube {
  width: 80px;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tube-canvas {
  display: block;
  width: 76px;
  /* Use vh fallback because `height: 100%` doesn't always resolve in Safari
     when the parent is a grid item spanning rows with a 1fr row inside */
  height: 70vh;
  max-height: 620px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}
/* (mobile layout for the score tube is defined in the responsive block at the
   end of the file — see the @media (max-width: 720px) block there) */

/* ---------- Gem reserve (top of screen) ---------- */
.reserve {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  min-height: 130px;
  width: 100%;
  pointer-events: none;
}
.reserve-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 130px;
  /* Clip the canvas to the funnel shape so balls visually look contained */
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.reserve-funnel-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 60%, rgba(0,0,0,0.18)),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 95, 162, 0.18), transparent 65%);
  border: 1px solid var(--card-bd);
  border-bottom: none;
  /* Funnel: wider at top, narrows toward the bottom */
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 10px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.reserve-funnel-bg::after {
  /* Inner taper highlight that follows the funnel edge */
  content: "";
  position: absolute;
  inset: 1px 1px 0 1px;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 50%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .reserve { min-height: 100px; }
  .reserve-canvas { height: 100px; }
}

/* Cursor-tracked glass reflection removed — only per-gem specular kept. */

/* ---------- Liquid glass cards ---------- */
.topbar,
.modal-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 60%),
    linear-gradient(135deg, rgba(255, 95, 162, 0.10), rgba(94, 224, 255, 0.10));
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    var(--shadow-1);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.topbar::before,
.modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(80% 60% at 80% 100%, rgba(255, 95, 162, 0.18), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:
    0 6px 22px rgba(255, 95, 162, 0.5),
    inset 0 -2px 4px rgba(0,0,0,0.2);
  color: #2b0644;
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.logo-text { font-size: 18px; }
.logo-text em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stats { display: flex; gap: 8px; position: relative; z-index: 1; }
.stat {
  min-width: 78px;
  padding: 8px 12px;
  text-align: center;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.stat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.stat-value {
  display: block;
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #d6c3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat.pulse .stat-value { animation: pulse-score 0.5s ease-out; }
@keyframes pulse-score {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,210,74,0)); }
  40% { transform: scale(1.28); filter: drop-shadow(0 0 14px rgba(255,210,74,0.8)); }
  100% { transform: scale(1); }
}

/* ---------- Board ---------- */
.board-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  align-self: center;
  justify-self: center;
  width: 100%;
}

/* ---------- Deck bar (Slay-the-Spire style, bottom of screen) ---------- */
.deck-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--card-bd);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 40px rgba(0,0,0,0.32);
  position: relative;
  z-index: 5;
}
.deck-bar-side {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* Static pile (deck / discard / void) — visual stack of card backs + count + label.
   Rendered as buttons so they're clickable to view contents in a modal. */
.pile {
  position: relative;
  width: 72px;
  height: 108px;
  flex: 0 0 auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  border: none;
  padding: 0;
  transition: transform 0.15s ease;
}
.pile:hover { transform: translateY(-2px); }
.pile:active { transform: translateY(0) scale(0.96); }
.pile:focus-visible { outline: 2px solid #ffd24a; outline-offset: 4px; border-radius: 12px; }
.pile .pile-stack {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 14px rgba(0,0,0,0.32);
}
.pile .pile-stack::before,
.pile .pile-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  box-shadow: 0 4px 10px rgba(0,0,0,0.22);
}
.pile .pile-stack::before { transform: translate(-3px, -3px) rotate(-3deg); z-index: -1; }
.pile .pile-stack::after  { transform: translate(3px, -2px) rotate(2deg); z-index: -2; }

.pile.pile-deck .pile-stack {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 95, 162, 0.30), transparent 60%),
    linear-gradient(160deg, rgba(120, 60, 200, 0.55), rgba(60, 20, 120, 0.85));
  border-color: rgba(255, 130, 200, 0.30);
}
.pile.pile-deck .pile-stack::before,
.pile.pile-deck .pile-stack::after {
  background: linear-gradient(160deg, rgba(120, 60, 200, 0.5), rgba(60, 20, 120, 0.7));
  border-color: rgba(255, 130, 200, 0.18);
}
.pile.pile-discard .pile-stack {
  background:
    linear-gradient(160deg, rgba(94, 184, 255, 0.25), rgba(40, 90, 160, 0.55));
  border-color: rgba(94, 184, 255, 0.22);
}
.pile.pile-void .pile-stack {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(0,0,0,0.35));
  border-color: rgba(255,255,255,0.06);
  opacity: 0.7;
}

.pile-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #1a0744;
  background: linear-gradient(180deg, #fff, #d6c3ff);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
  z-index: 2;
}
.pile.pile-void .pile-count { background: linear-gradient(180deg, #888, #555); color: #fff; }

.pile-label {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-dim);
  pointer-events: none;
}

/* Hand: 4 cards (active + 3 upcoming) — flex row */
.hand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.hand-card {
  --card-color: #ff5fa2;
  position: relative;
  width: 88px;
  height: 124px;
  flex: 0 0 auto;
  padding: 8px 6px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.12)),
    radial-gradient(120% 80% at 50% 0%, var(--card-color), transparent 65%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 8px 18px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
  transform: translateY(0) scale(1);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              box-shadow 0.3s ease,
              width 0.35s ease,
              height 0.35s ease;
}
.hand-card.active {
  width: 108px;
  height: 152px;
  opacity: 1;
  transform: translateY(-12px) scale(1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 16px 32px rgba(0,0,0,0.45),
    0 0 24px var(--card-color);
  border-color: rgba(255,255,255,0.32);
  z-index: 3;
}
.hand-card .card-type {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}
.hand-card.event .card-type { color: #ffd24a; }
.hand-card .card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.3);
  color: var(--card-color);
}
.hand-card.active .card-icon {
  width: 50px;
  height: 50px;
}
.hand-card .card-icon svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.hand-card .card-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  text-align: center;
  line-height: 1.1;
}
.hand-card.active .card-name { font-size: 13px; }
.hand-card .card-turns {
  margin-top: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.16);
}
.hand-card .card-turns strong { color: var(--card-color); }

@keyframes draw-fly-in {
  0%   { transform: translate(var(--draw-from-x, -280px), var(--draw-from-y, 0)) scale(0.4) rotate(-14deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
@keyframes draw-fly-in-active {
  0%   { transform: translate(var(--draw-from-x, -280px), var(--draw-from-y, 0)) scale(0.4) rotate(-14deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(-12px) scale(1) rotate(0); opacity: 1; }
}
.hand-card.drawing { animation: draw-fly-in 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.hand-card.active.drawing { animation: draw-fly-in-active 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Card announcement (punchy 3D banner when a card is drawn) ---------- */
.announce {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  pointer-events: none;
  text-align: center;
  perspective: 800px;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity, filter;
}
.announce[hidden] { display: none; }
.announce-type {
  font-size: clamp(11px, 1.6vw, 16px);
  font-weight: 800;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 4px 14px rgba(0,0,0,0.6);
  margin-bottom: 10px;
}
.announce.event .announce-type { color: #ffd24a; }
.announce-name {
  --ann-color: #ff5fa2;
  font-size: clamp(54px, 10vw, 120px);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  /* Diagonal 3D extrusion + drop shadow for depth */
  text-shadow:
    1px 1px 0 var(--ann-color),
    2px 2px 0 var(--ann-color),
    3px 3px 0 var(--ann-color),
    4px 4px 0 var(--ann-color),
    5px 5px 0 var(--ann-color),
    6px 6px 0 var(--ann-color),
    7px 7px 0 var(--ann-color),
    8px 8px 0 var(--ann-color),
    9px 9px 0 rgba(20,4,40,0.85),
    10px 12px 24px rgba(0,0,0,0.8),
    0 0 32px rgba(255,255,255,0.18);
  transform: rotateX(10deg);
  transform-origin: 50% 100%;
}

@keyframes announce-enter {
  0%   { transform: translate(-50%, -50%) scale(0.25) rotate(-12deg); opacity: 0; filter: blur(18px); }
  55%  { transform: translate(-50%, -50%) scale(1.18) rotate(4deg);  opacity: 1; filter: blur(0); }
  78%  { transform: translate(-50%, -50%) scale(0.96) rotate(-1.5deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; filter: blur(0); }
}
@keyframes announce-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  20%      { transform: translate(-50.6%, -50.2%) rotate(-0.9deg); }
  40%      { transform: translate(-49.4%, -49.8%) rotate(0.9deg); }
  60%      { transform: translate(-50.5%, -50.3%) rotate(-0.5deg); }
  80%      { transform: translate(-49.5%, -49.7%) rotate(0.5deg); }
}
@keyframes announce-exit {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%, -50%) scale(1.85) rotate(6deg); opacity: 0; filter: blur(20px); }
}
.announce.announce-entering { animation: announce-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.announce.announce-shaking  { animation: announce-shake 0.22s ease-in-out 3; }
.announce.announce-exiting  { animation: announce-exit 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards; }

/* ---------- Pile-contents modal ---------- */
.pile-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(8, 2, 22, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.2s ease both;
}
.pile-modal[hidden] { display: none; }
.pile-modal-card {
  width: min(720px, 92vw);
  max-height: 80vh;
  padding: 18px 22px 22px;
  overflow: auto;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--card-bd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 24px 60px rgba(0,0,0,0.55);
  animation: pop-in 0.3s cubic-bezier(.2,.9,.3,1.4) both;
}
.pile-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pile-modal-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
}
.pile-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.pile-modal-close:hover {
  background: rgba(255,255,255,0.12);
}
.pile-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.pile-modal-empty {
  color: var(--ink-dim);
  text-align: center;
  padding: 24px;
  margin: 0;
}
.pile-modal-card-mini {
  --card-color: #ff5fa2;
  padding: 10px 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.12)),
    radial-gradient(120% 80% at 50% 0%, var(--card-color), transparent 65%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 6px 14px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pile-modal-card-mini .card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  color: var(--card-color);
}
.pile-modal-card-mini .card-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  text-align: center;
}
.pile-modal-card-mini .card-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pile-modal-card-mini.event .card-type { color: #ffd24a; }

/* Compact controls bar */
.btn-icon {
  padding: 10px 12px;
  min-width: auto;
}
.btn-icon .label { display: none; }

@media (max-width: 720px) {
  .deck-bar { gap: 8px; padding: 8px 8px 22px; }
  .pile { width: 56px; height: 84px; }
  .pile-label { font-size: 8px; bottom: -18px; }
  .hand { gap: 6px; }
  .hand-card { width: 64px; height: 92px; padding: 5px 3px; }
  .hand-card .card-name { font-size: 9px; }
  .hand-card .card-icon { width: 26px; height: 26px; }
  .hand-card.active { width: 80px; height: 116px; }
  .hand-card.active .card-name { font-size: 11px; }
  .hand-card.active .card-icon { width: 36px; height: 36px; }
}

/* ---------- Deck panel (legacy — removed but rules kept harmless) ---------- */
.deck-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  width: 180px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--card-bd);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 30px rgba(0,0,0,0.3);
}

.deck-current {
  position: relative;
  border-radius: 18px;
  padding: 14px 12px 12px;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
}
.deck-current::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, var(--card-color, rgba(255,95,162,0.4)), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.deck-current .card-type {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  z-index: 1;
}
.deck-current .card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 18px rgba(0,0,0,0.35);
  color: var(--card-color, #ff5fa2);
  position: relative;
  z-index: 1;
}
.deck-current .card-icon svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.deck-current .card-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  text-align: center;
  position: relative;
  z-index: 1;
}
.deck-current .card-turns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  z-index: 1;
}
.deck-current .card-turns strong {
  font-size: 14px;
  color: var(--card-color, #ffd24a);
}
.deck-current.event {
  border-color: rgba(255, 210, 74, 0.45);
}

/* Draw-in animation when a new card is revealed */
@keyframes card-draw-in {
  0%   { transform: translateY(-24px) scale(0.7) rotate(-6deg); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.04) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
.deck-current.flash { animation: card-draw-in 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

.deck-upcoming-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin-top: 4px;
}
.deck-upcoming {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  opacity: 0.75;
}
.card-mini .card-mini-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  color: var(--card-color, #fff);
  flex-shrink: 0;
}
.card-mini .card-mini-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.card-mini .card-mini-type {
  font-size: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1;
}
.card-mini.event { border-color: rgba(255, 210, 74, 0.25); }

@media (max-width: 720px) {
  .deck-panel {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
  }
  .deck-current { min-height: auto; flex: 1; padding: 10px 8px; }
  .deck-upcoming-label { display: none; }
  .deck-upcoming { flex-direction: row; gap: 6px; }
  .card-mini { padding: 6px; }
  .card-mini .card-mini-name { font-size: 10px; }
}

/* ---------- Mode switcher (legacy — kept for reference, no longer in HTML) ---------- */
.mode-switcher {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--card-bd);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 30px rgba(0,0,0,0.3);
}
.mode-btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  color: var(--ink-dim);
  cursor: pointer;
  /* No transform on hover — pure bg/shadow/color transitions to avoid flicker. */
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 10px rgba(0,0,0,0.28);
  position: relative;
  padding: 4px 0;
}
.mode-btn .mode-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.85;
}
.mode-btn:hover {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.18);
}
.mode-btn:active {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
}
.mode-btn[aria-pressed="true"] {
  color: #2b0644;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--accent), var(--accent-3));
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 8px 24px rgba(255, 95, 162, 0.45);
}
.mode-btn[aria-pressed="true"] .mode-label { opacity: 1; }

/* ---------- Ability bar (left side, one-shot effects) ---------- */
.ability-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--card-bd);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 30px rgba(0,0,0,0.3);
}
.ability-btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 10px rgba(0,0,0,0.28);
  position: relative;
  padding: 4px 0;
}
.ability-btn .mode-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.85;
}
.ability-btn:hover {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.22);
}
.ability-btn:active {
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
}
/* Distinct color per ability */
.ability-btn[data-ability="rotate-grid"]:hover { color: #b56bff; }
.ability-btn[data-ability="freeze"]:hover { color: #54b8ff; }
.ability-btn[data-ability="bomb"]:hover { color: #ff8a3d; }
.ability-btn.firing {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 24px rgba(255, 255, 255, 0.4);
}

@media (max-width: 720px) {
  .board-wrap { flex-direction: column-reverse; gap: 8px; }
  .mode-switcher, .ability-bar { flex-direction: row; padding: 6px; gap: 6px; }
  .mode-btn, .ability-btn { width: 56px; height: 48px; }
}

.board-card {
  position: relative;
  z-index: 2;
  padding: 18px;
  border-radius: 28px;
  will-change: transform;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.15) 100%),
    radial-gradient(120% 100% at 50% 0%, rgba(255, 95, 162, 0.18), transparent 65%);
  border: 1px solid var(--card-bd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -2px 8px rgba(0,0,0,0.2),
    var(--shadow-2);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  isolation: isolate;
}
.board-card.rotating {
  z-index: 100;            /* overlay above side button bars while rotating */
}
/* The conic halo rotates with .board-card during CSS rotation, then snaps back
   when we reset the transform — that snap is what the user perceives as the
   "background changing color at the end". Hide it during rotation. */
.board-card.rotating .board-card-glow {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.board-card .board-card-glow {
  transition: opacity 0.25s ease 0.1s; /* fade back in shortly after rotation */
}
.ability-bar, .mode-switcher {
  position: relative;
  z-index: 1;
}

.board-card-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(255, 95, 162, 0.55),
    rgba(94, 224, 255, 0.55),
    rgba(255, 210, 74, 0.55),
    rgba(94, 224, 255, 0.55),
    rgba(255, 95, 162, 0.55)
  );
  filter: blur(28px);
  opacity: 0.45;
  z-index: -1;
  animation: rotate-conic 24s linear infinite;
  /* CRITICAL: this element rotates, and a rotated bbox extends beyond the original.
     Without pointer-events:none, the rotating glow intercepts hovers/clicks on the
     side buttons at certain angles. */
  pointer-events: none;
}
@keyframes rotate-conic { to { transform: rotate(360deg); } }

.board-card-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,0.08), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

#board {
  display: block;
  width: min(86vmin, 720px);
  height: min(86vmin, 720px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22)),
    radial-gradient(120% 120% at 50% 0%, rgba(124, 75, 255, 0.28), rgba(0,0,0,0.30) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 6px 20px rgba(0,0,0,0.35),
    inset 0 -4px 10px rgba(255,255,255,0.08);
  touch-action: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.combo {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -130%) scale(0.9);
  padding: 8px 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: #2b0644;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, var(--accent-3), var(--accent));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(.2,.9,.3,1.4);
  box-shadow:
    0 10px 40px rgba(255, 95, 162, 0.55),
    inset 0 -2px 0 rgba(0,0,0,0.15);
  z-index: 5;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.combo.show {
  opacity: 1;
  transform: translate(-50%, -10px) scale(1);
}

.floaters {
  position: absolute;
  inset: 18px;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.float-num {
  position: absolute;
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  text-shadow:
    0 0 12px rgba(255, 210, 74, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.7);
  animation: float-up 1s cubic-bezier(.2,.7,.3,1) forwards;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  letter-spacing: 0.5px;
}
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}

.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 4px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--card-bd);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 8px 24px rgba(0,0,0,0.25);
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn.primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, var(--accent), #ff8a3d);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 14px 36px rgba(255, 95, 162, 0.45);
}

.ico {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.ico-sound {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4z'/><path d='M19 12c0-2-1-4-3-5'/><path d='M22 12c0-4-2-7-5-9'/></svg>");
}
.btn[aria-pressed="true"] .ico-sound {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4z'/><line x1='22' y1='9' x2='16' y2='15'/><line x1='16' y1='9' x2='22' y2='15'/></svg>");
}
.ico-restart {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 4v5h5'/></svg>");
}
.ico-shuffle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 3 21 3 21 8'/><line x1='4' y1='20' x2='21' y2='3'/><polyline points='21 16 21 21 16 21'/><line x1='15' y1='15' x2='21' y2='21'/><line x1='4' y1='4' x2='9' y2='9'/></svg>");
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(8, 2, 22, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.25s ease both;
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(420px, 90vw);
  padding: 28px;
  text-align: center;
  animation: pop-in 0.4s cubic-bezier(.2,.9,.3,1.4) both;
}
.modal-card h2 { margin: 0 0 8px; font-size: 28px; position: relative; z-index: 1; }
.modal-card p { margin: 0 0 18px; color: var(--ink-dim); position: relative; z-index: 1; }
.modal-card strong { color: var(--accent-3); font-size: 20px; }
.modal-card .btn { position: relative; z-index: 1; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 540px) {
  .stat { min-width: 60px; padding: 6px 8px; }
  .stat-value { font-size: 16px; }
  .logo-text { font-size: 16px; }
  .btn .label { display: none; }
  .btn { padding: 12px 14px; }
  .board-card { padding: 12px; }
}

/* ===========================================================================
   RESPONSIVE — tablet & phone. Final block: overrides earlier rules.
   ========================================================================= */

/* Tablet / small landscape (≤ 720px): keep 2-column layout but make tube compact.
   The score tube is a key gameplay element so it stays visible on every viewport. */
@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr 56px;
    column-gap: 8px;
    padding: 8px clamp(6px, 2vw, 16px);
    row-gap: 8px;
  }
  .score-tube { width: 56px; min-height: 0; }
  #tube-canvas { width: 50px; height: 65vh; max-height: none; }
  .reserve { min-height: 96px; }
  .reserve-canvas { height: 96px; }
  .board-card { padding: 12px; border-radius: 22px; }
  .deck-bar { gap: 14px; padding: 8px 12px; border-radius: 18px; }
  .deck-bar-side { gap: 8px; }
  /* Board: shrink to fit the remaining column (1fr minus the tube + gaps) */
  #board {
    width: min(86vmin, calc(100vw - 84px), 720px);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Phone portrait (≤ 540px): drop exil pile, shrink everything for narrow widths */
@media (max-width: 540px) {
  .app {
    grid-template-columns: 1fr 48px;
    column-gap: 6px;
    padding: 6px;
  }
  .score-tube { width: 48px; }
  #tube-canvas { width: 44px; height: 65vh; }
  .reserve { min-height: 78px; }
  .reserve-canvas { height: 78px; }
  .board-card { padding: 8px; border-radius: 18px; }
  .deck-bar { gap: 8px; padding: 6px 8px; border-radius: 14px; }
  .deck-bar-side { gap: 6px; }
  #board { width: min(86vmin, calc(100vw - 70px), 720px); }
  /* Hide the exil pile (always 0 currently) to save horizontal room */
  .pile-void { display: none; }
  /* Compact piles */
  .pile { width: 46px; height: 68px; }
  .pile-label { font-size: 8px; bottom: -14px; letter-spacing: 0.8px; }
  .pile-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; top: -6px; right: -6px; }
  /* Compact hand cards */
  .hand { gap: 4px; padding: 0 4px; }
  .hand-card {
    width: 48px; height: 66px;
    padding: 4px 3px;
    border-radius: 9px;
    gap: 2px;
  }
  .hand-card .card-type { font-size: 7px; letter-spacing: 0.8px; }
  .hand-card .card-icon { width: 20px; height: 20px; }
  .hand-card .card-name { font-size: 8px; letter-spacing: 0; line-height: 1.05; }
  .hand-card .card-turns { font-size: 8px; padding: 2px 5px; }
  .hand-card.active {
    width: 62px; height: 88px;
    transform: translateY(-6px) scale(1);
  }
  .hand-card.active .card-icon { width: 28px; height: 28px; }
  .hand-card.active .card-name { font-size: 10px; }
  /* Announce — keep punchy but a bit smaller */
  .announce-name { font-size: clamp(40px, 12vw, 78px); letter-spacing: 2px; }
  .announce-type { font-size: 10px; letter-spacing: 5px; }
  /* Pile-modal grid: smaller cells */
  .pile-modal-card { padding: 14px; }
  .pile-modal-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
  .pile-modal-card-mini { padding: 8px 6px; }
  .pile-modal-card-mini .card-name { font-size: 11px; }
}

/* Very small (≤ 380px): minimal sizes — old/budget phones */
@media (max-width: 380px) {
  .app {
    grid-template-columns: 1fr 42px;
    column-gap: 4px;
  }
  .score-tube { width: 42px; }
  #tube-canvas { width: 38px; height: 60vh; }
  #board { width: min(86vmin, calc(100vw - 58px), 720px); }
  .pile { width: 40px; height: 60px; }
  .pile-label { font-size: 7px; }
  .hand-card { width: 42px; height: 58px; }
  .hand-card.active { width: 54px; height: 78px; }
  .hand-card .card-name { font-size: 7px; }
  .hand-card.active .card-name { font-size: 9px; }
}

/* Landscape phone (short heights): trim vertical chrome aggressively */
@media (max-height: 520px) and (orientation: landscape) {
  .app { padding: 4px 8px; row-gap: 4px; }
  .reserve { min-height: 60px; }
  .reserve-canvas { height: 60px; }
  .deck-bar { padding: 4px 8px; }
  .hand-card { height: 60px; }
  .hand-card.active { height: 76px; }
  .pile { height: 58px; }
}