:root {
  --wood1: #8f6038;
  --wood2: #5a321a;
  --wood3: #2d170a;
  --felt1: #23764b;
  --felt2: #145434;
  --felt3: #0d3422;
  --dark: #07170e;
  --panel: rgba(7, 22, 14, .78);
  --line: #91ff79;
  --line2: #eeff86;
  --text: #f6ffe7;
  --muted: #c6e5bf;
  --cyan: #79ecff;
  --danger: #ff6969;
  --fire: #ff9c5a;
  --nature: #91ff79;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 6%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 90% 14%, rgba(255,255,255,.07), transparent 20%),
    linear-gradient(180deg, #316e4b 0%, #214d36 36%, #102317 100%);
}

.sky-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.13) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.09) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 70%, rgba(255,255,255,.07) 0 2px, transparent 3px);
  background-size: 280px 220px, 340px 280px, 300px 240px;
  animation: floatBg 16s ease-in-out infinite;
}

@keyframes floatBg {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-12px,9px,0); }
}

button, a, select { font: inherit; }
button { cursor: pointer; }

.game-app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  height: 100vh;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  overflow: hidden;
}

.play-topbar {
  height: 76px;
  padding: 8px 14px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: rgba(9, 24, 15, .96);
  border-bottom: 4px solid var(--line);
  box-shadow: 0 6px 0 #071009;
  backdrop-filter: blur(8px);
}

.play-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

.mode-badge {
  display: inline-block;
  padding: 5px 9px;
  border: 3px solid var(--line);
  background: #143021;
  color: var(--line2);
  box-shadow: 3px 3px 0 #000;
  font-size: 12px;
  line-height: 1;
}

.play-title-block h1 {
  margin: 4px 0 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: .9;
  text-shadow: 3px 3px 0 #000;
}

.play-top-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  min-width: max-content;
}

.primary, .secondary, .pixel-select {
  border: 3px solid #26442e;
  box-shadow: 3px 3px 0 #000;
  padding: 9px 11px;
  background: #153622;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease;
}

.primary {
  background: linear-gradient(180deg, #acff84, #7cff90);
  color: #092012;
  border: 4px solid #f4ff9d;
  font-weight: 900;
}

.pixel-select {
  background: #173627;
  min-width: 130px;
  max-width: 145px;
}

.help-btn {
  width: 42px;
  padding-inline: 0;
  font-weight: 900;
}

.primary:hover, .secondary:hover, .pixel-select:hover {
  transform: translate(-1px, -1px);
  filter: brightness(1.08);
}

.play-shell {
  min-height: 0;
  padding: 12px;
  display: grid;
  overflow: hidden;
}

.table-frame {
  min-height: 0;
  display: grid;
  border-radius: 24px;
  padding: 12px;
  background: linear-gradient(145deg, var(--wood1), var(--wood2) 52%, var(--wood3));
  border: 5px solid #d1a26b;
  box-shadow: 0 9px 0 #2a160a, 0 18px 34px rgba(0,0,0,.38);
  overflow: hidden;
}

.game-layout {
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.055), transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.04), transparent 18%),
    linear-gradient(180deg, var(--felt1), var(--felt2) 48%, var(--felt3));
  border: 5px solid #30543c;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
}

.battle-area {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 104px minmax(200px, 1fr) 96px minmax(200px, 1fr) 240px;
  gap: 10px;
}

.core-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 250px minmax(220px, 1fr);
  gap: 10px;
}

.core-banner,
.board-section,
.hand-panel,
.side-box {
  background: var(--panel);
  border: 4px solid rgba(191,255,157,.42);
  box-shadow: 5px 5px 0 rgba(0,0,0,.48);
}

.core-banner {
  padding: 9px 12px;
  text-align: center;
  overflow: hidden;
}

.enemy-banner { border-color: rgba(255,156,90,.65); }
.player-banner { border-color: rgba(145,255,121,.68); }

.banner-title {
  color: var(--line2);
  font-weight: 900;
  font-size: 12px;
}

.banner-name {
  font-size: 19px;
  font-weight: 900;
  margin: 2px 0 4px;
  text-shadow: 3px 3px 0 #000;
}

.hp-line { font-size: 16px; }

.hp-bar {
  width: 100%;
  height: 14px;
  background: #08110b;
  border: 3px solid #000;
  margin: 5px 0 4px;
  overflow: hidden;
}

.hp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #98ff77, #eaff8e);
  transition: width .35s ease;
}

.enemy-banner .hp-bar span {
  background: linear-gradient(90deg, #ff6b6b, #ffbf73);
}

.core-banner small {
  color: var(--muted);
  font-size: 11px;
}

.center-hud {
  display: grid;
  gap: 8px;
  align-content: center;
}

.turn-badge {
  padding: 11px 12px;
  background: linear-gradient(180deg, #f5ff92, #afff79);
  color: #0b2313;
  font-weight: 900;
  border: 4px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-align: center;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.resource-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.resource-strip div {
  background: rgba(0,0,0,.26);
  border: 3px solid rgba(255,255,255,.14);
  padding: 5px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}

.resource-strip b {
  display: block;
  color: var(--line2);
  font-size: 17px;
}

.board-section {
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.zone-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.zone-chip {
  display: inline-block;
  padding: 5px 8px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-weight: 900;
  font-size: 12px;
}

.player-chip {
  background: linear-gradient(180deg, #acff84, #7cff90);
  color: #092012;
}

.enemy-chip {
  background: linear-gradient(180deg, #ffc37a, #ff8c61);
  color: #331608;
}

.zone-sub {
  color: var(--muted);
  font-size: 12px;
}

.battle-row {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(158px, 1fr));
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
}

.board-slot {
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-slot {
  width: 100%;
  max-width: 176px;
  height: 100%;
  min-height: 190px;
  border: 3px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.22);
  font-size: 12px;
}

.selection-row {
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px;
}

.battle-center-line {
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.14);
  border: 3px solid rgba(255,255,255,.12);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}

.battle-center-line span {
  color: var(--muted);
  font-size: 12px;
}

.selection-panel {
  min-height: 0;
  background: rgba(0,0,0,.20);
  border: 3px solid rgba(255,255,255,.16);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
  align-items: center;
}

.selection-panel.empty {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.selection-title {
  font-size: 12px;
  color: var(--line2);
  font-weight: 900;
}

.selection-name {
  font-size: 13px;
  line-height: 1.35;
}

.selection-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.hand-panel {
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.hand-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.hand-top h2 {
  margin: 0;
  font-size: 16px;
}

.hint-pill {
  display: inline-block;
  padding: 5px 8px;
  background: rgba(0,0,0,.22);
  border: 3px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-size: 11px;
}

.small-pill { font-size: 10px; }

.hand {
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 8px 2px;
}

.side-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 230px minmax(0, 1fr);
  gap: 10px;
}

.side-box {
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.side-box h2 {
  margin: 0 0 8px;
  font-size: 16px;
}

.action-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.action-stack button { padding: 9px 10px; }

.status-box, .log-box {
  background: rgba(4,13,8,.82);
  border: 3px solid rgba(191,255,157,.26);
  padding: 8px;
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  overflow: auto;
}

.status-box { height: calc(100% - 28px); }

.log-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.log-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.log-box {
  min-height: 0;
}

.log-entry {
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(255,255,255,.10);
  font-size: 12px;
  line-height: 1.35;
}

.card {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 7px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(34,70,47,.97), rgba(18,40,28,.98));
  border: 3px solid #a2ff7f;
  box-shadow: 0 5px 0 #000, inset 0 0 0 2px rgba(255,255,255,.05);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  transform-origin: center center;
  overflow: hidden;
}

.card.hand-card {
  flex: 0 0 138px;
  width: 138px;
  height: 194px;
}

.card.board-card {
  width: min(100%, 168px);
  height: min(100%, 228px);
  min-height: 204px;
  max-height: 238px;
  animation: idleFloat 3.8s ease-in-out infinite;
}

.card:hover {
  transform: translateY(-4px) rotate(-1deg);
  filter: brightness(1.06);
  box-shadow: 0 8px 0 #000, inset 0 0 0 2px rgba(255,255,255,.08);
}

.card.disabled {
  filter: grayscale(.62) brightness(.72);
  cursor: not-allowed;
}

@keyframes idleFloat {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

.card.exhausted {
  filter: grayscale(.55) brightness(.68);
  transform: rotate(-2deg);
}

.card.rooted { outline: 3px solid #ffb4ff; }

.card.can-attack {
  outline: 3px solid var(--line2);
  cursor: pointer;
}

.card.selected-attacker {
  outline: 4px solid var(--cyan);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 0 4px rgba(121,236,255,.25),0 8px 0 #000;
}

.card.targetable {
  outline: 3px solid var(--danger);
  cursor: crosshair;
}

.card.fire-theme { border-color: #ffb168; }
.card.nature-theme { border-color: #a2ff7f; }

.card-top {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  align-items: start;
  margin-bottom: 5px;
}

.card-name {
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
}

.cost-badge {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--cyan);
  color: #001114;
  border: 2px solid #000;
  font-size: 12px;
  font-weight: 900;
}

.art-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .85;
  overflow: hidden;
  border: 2px solid #000;
  background: linear-gradient(180deg,#89d3ff,#68bfff 45%,#1c6e46 46%,#13432d);
  margin-bottom: 5px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}

.art-frame img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  object-fit: cover;
  transform: scale(1.02);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 4px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}

.stat-grid span {
  text-align: center;
  background: rgba(0,0,0,.26);
  border: 2px solid rgba(255,255,255,.12);
  padding: 2px 1px;
  font-size: 9px;
  line-height: 1.1;
}

.keyword, .badge-mini {
  display: inline-block;
  margin-bottom: 3px;
  margin-right: 4px;
  padding: 2px 5px;
  background: #f8ff8c;
  color: #1a1a05;
  border: 2px solid #000;
  font-size: 9px;
  font-weight: 900;
}

.badge-mini.rooted-badge { background: #ffb4ff; }
.badge-mini.shield-badge { background: #9ce4ff; }

.card-text {
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.22;
  max-height: 32px;
  overflow: hidden;
}

.damage-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 5px;
  border: 2px solid #000;
  background: #ff6b6b;
  font-size: 9px;
  font-weight: 900;
  color: white;
  z-index: 2;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  background: rgba(11,31,19,.96);
  color: white;
  border: 4px solid var(--line);
  box-shadow: 6px 6px 0 #000;
  z-index: 60;
}

.hidden { display: none !important; }

.flash-hit { animation: flashHit .45s ease; }
.flash-play { animation: popIn .35s ease; }
.summon-burst { animation: summonBurst .5s ease; }
.attack-lunge { animation: attackLunge .42s ease; }
.zone-pulse { animation: zonePulse .45s ease; }

@keyframes flashHit {
  0% { filter: brightness(1); transform: translateX(0); }
  20% { filter: brightness(1.8); transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  100% { filter: brightness(1); transform: translateX(0); }
}

@keyframes popIn {
  0% { transform: scale(.85) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes summonBurst {
  0% { transform: translateY(16px) scale(.86); opacity: 0; filter: brightness(1.3); }
  65% { transform: translateY(-5px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes attackLunge {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(12px) scale(1.03); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes zonePulse {
  0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.0); }
  50% { box-shadow: inset 0 0 0 999px rgba(255,255,255,.06); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.0); }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
}

.modal-panel {
  position: relative;
  width: min(900px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  border: 5px solid #d1a26b;
  background: linear-gradient(145deg,#8f6038,#5a321a 52%,#2d170a);
  box-shadow: 0 14px 40px rgba(0,0,0,.55),0 10px 0 #2a160a;
  border-radius: 18px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(10,32,20,.92);
  border-bottom: 4px solid var(--line);
}

.modal-head h2 {
  margin: 0;
  font-size: 24px;
  text-shadow: 3px 3px 0 #000;
}

.modal-close {
  min-width: 48px;
  font-weight: 900;
}

.modal-content {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.055), transparent 20%),
    linear-gradient(180deg,var(--felt1),var(--felt2) 48%,var(--felt3));
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.help-card {
  background: rgba(7,22,14,.75);
  border: 3px solid rgba(191,255,157,.34);
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  padding: 12px;
}

.help-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--line2);
}

.help-card p, .help-card li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.help-card ul {
  margin: 0;
  padding-left: 18px;
}

/* Laptop compression */
@media (max-width: 1450px), (max-height: 850px) {
  .game-app { grid-template-rows: 70px minmax(0,1fr); }
  .play-topbar { height: 70px; }
  .play-logo { height: 50px; }
  .mode-badge { display: none; }
  .play-title-block h1 { font-size: 24px; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 315px; }
  .battle-area { grid-template-rows: 94px minmax(176px,1fr) 86px minmax(176px,1fr) 218px; }
  .core-row { grid-template-columns: minmax(200px,1fr) 230px minmax(200px,1fr); }
  .banner-name { font-size: 17px; }
  .core-banner small { display: none; }
  .card.board-card { width: min(100%, 150px); min-height: 178px; max-height: 205px; }
  .card.hand-card { flex-basis: 126px; width: 126px; height: 176px; }
  .card-text { display: none; }
  .side-panel { grid-template-rows: auto 210px minmax(0,1fr); }
}

/* Tablet and mobile: allow page scroll but keep clarity */
@media (max-width: 1080px) {
  html, body { overflow: auto; }
  .game-app { height: auto; min-height: 100dvh; overflow: visible; grid-template-rows: auto auto; }
  .play-topbar {
    height: auto;
    min-height: 78px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo actions" "title title";
  }
  .brand-link { grid-area: logo; }
  .play-top-actions { grid-area: actions; }
  .play-title-block { grid-area: title; text-align: center; }
  .back-link { display: none; }
  .play-shell, .table-frame, .game-layout { overflow: visible; }
  .game-layout { grid-template-columns: 1fr; }
  .battle-area { grid-template-rows: auto auto auto auto auto; }
  .core-row { grid-template-columns: 1fr; }
  .selection-row { grid-template-columns: 1fr; }
  .selection-panel { grid-template-columns: 1fr; }
  .side-panel { grid-template-rows: auto auto 260px; }
  .battle-row { grid-template-columns: repeat(3, minmax(120px,1fr)); overflow-x: auto; }
  .card.board-card { min-height: 190px; }
  .card-text { display: block; }
  .help-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .play-topbar { padding: 8px; gap: 8px; }
  .play-logo { height: 44px; max-width: 150px; }
  .play-top-actions { gap: 6px; }
  .primary, .secondary, .pixel-select { padding: 7px 8px; font-size: 12px; }
  .pixel-select { min-width: 112px; max-width: 112px; }
  .play-shell { padding: 8px; }
  .table-frame { border-radius: 18px; padding: 8px; }
  .game-layout { border-radius: 14px; padding: 8px; gap: 8px; }
  .battle-row { grid-template-columns: repeat(3, minmax(112px, 1fr)); gap: 8px; }
  .hand { display: flex; overflow-x: auto; }
  .card.hand-card { flex: 0 0 130px; width: 130px; height: 182px; }
  .card.board-card { width: min(100%, 125px); min-height: 175px; }
  .hint-pill { display: none; }
  .side-panel { grid-template-rows: auto auto 220px; }
}


/* =========================
   V22 FIX: HAND ALWAYS VISIBLE
   The V21 board was readable, but the hand was pushed below the viewport.
   This compresses the board areas and reserves a fixed visible hand strip.
========================= */

@media (min-width: 1081px) {
  .game-app {
    grid-template-rows: 70px minmax(0, 1fr);
  }

  .play-topbar {
    height: 70px;
  }

  .play-logo {
    height: 50px;
  }

  .play-shell {
    padding: 8px;
  }

  .table-frame {
    padding: 10px;
    border-radius: 20px;
  }

  .game-layout {
    padding: 10px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .battle-area {
    grid-template-rows:
      88px
      minmax(138px, 1fr)
      72px
      minmax(138px, 1fr)
      190px;
    gap: 8px;
  }

  .core-row {
    grid-template-columns: minmax(220px, 1fr) 230px minmax(220px, 1fr);
    gap: 8px;
  }

  .core-banner {
    padding: 6px 10px;
  }

  .banner-name {
    font-size: 16px;
    margin: 1px 0 2px;
  }

  .banner-title {
    font-size: 11px;
  }

  .hp-line {
    font-size: 14px;
  }

  .hp-bar {
    height: 12px;
    margin: 3px 0;
  }

  .core-banner small {
    display: none;
  }

  .turn-badge {
    padding: 9px 10px;
  }

  .resource-strip div {
    padding: 4px;
    font-size: 10px;
  }

  .resource-strip b {
    font-size: 15px;
  }

  .board-section {
    padding: 8px;
  }

  .zone-header {
    margin-bottom: 5px;
  }

  .battle-row {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 8px;
  }

  .empty-slot {
    min-height: 120px;
    max-height: 132px;
  }

  .selection-row {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 8px;
  }

  .selection-panel {
    padding: 7px;
  }

  .selection-title {
    font-size: 11px;
  }

  .selection-name {
    font-size: 12px;
  }

  .hand-panel {
    padding: 8px;
  }

  .hand-top {
    margin-bottom: 6px;
  }

  .hand-top h2 {
    font-size: 15px;
  }

  .hand {
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
    padding-bottom: 6px;
  }

  .card.hand-card {
    flex: 0 0 116px;
    width: 116px;
    height: 154px;
  }

  .card.board-card {
    width: min(100%, 116px);
    height: 136px;
    min-height: 136px;
    max-height: 136px;
  }

  .card {
    padding: 5px;
    border-radius: 10px;
  }

  .card-name {
    font-size: 10px;
  }

  .cost-badge {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .art-frame {
    aspect-ratio: 1 / .72;
    margin-bottom: 3px;
  }

  .card-meta {
    font-size: 8px;
    margin-bottom: 3px;
  }

  .stat-grid {
    gap: 2px;
    margin-bottom: 2px;
  }

  .stat-grid span {
    font-size: 8px;
    padding: 1px;
  }

  .keyword,
  .badge-mini {
    font-size: 8px;
    padding: 1px 4px;
    margin-bottom: 2px;
  }

  .card-text {
    display: none;
  }

  .side-panel {
    grid-template-rows: auto 200px minmax(0, 1fr);
    gap: 8px;
  }

  .side-box {
    padding: 8px;
  }

  .side-box h2 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .action-stack {
    gap: 7px;
  }

  .action-stack button {
    padding: 8px;
  }

  .status-box {
    font-size: 11px;
  }

  .log-entry {
    font-size: 11px;
  }
}

/* Very short screens: even more compression */
@media (min-width: 1081px) and (max-height: 820px) {
  .battle-area {
    grid-template-rows:
      78px
      minmax(112px, 1fr)
      62px
      minmax(112px, 1fr)
      166px;
  }

  .card.hand-card {
    flex-basis: 104px;
    width: 104px;
    height: 138px;
  }

  .card.board-card {
    width: min(100%, 104px);
    height: 122px;
    min-height: 122px;
    max-height: 122px;
  }

  .empty-slot {
    min-height: 104px;
  }

  .play-title-block h1 {
    font-size: 22px;
  }

  .mode-badge {
    display: none;
  }
}


/* =========================
   V23 ULTRA COMPACT MODE
   Priority: everything must be visible.
   Smaller fonts, smaller cards, tighter layout.
========================= */

@media (min-width: 1081px) {
  html,
  body {
    font-size: 12px;
  }

  .game-app {
    grid-template-rows: 58px minmax(0, 1fr) !important;
  }

  .play-topbar {
    height: 58px !important;
    padding: 4px 10px !important;
    grid-template-columns: 180px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .play-logo {
    height: 42px !important;
    max-width: 170px !important;
  }

  .play-title-block h1 {
    font-size: 19px !important;
    margin: 0 !important;
  }

  .mode-badge {
    display: none !important;
  }

  .play-top-actions {
    gap: 5px !important;
  }

  .primary,
  .secondary,
  .pixel-select {
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #000 !important;
  }

  .pixel-select {
    min-width: 105px !important;
    max-width: 115px !important;
  }

  .help-btn {
    width: 30px !important;
  }

  .play-shell {
    padding: 5px !important;
  }

  .table-frame {
    padding: 7px !important;
    border-width: 4px !important;
    border-radius: 16px !important;
  }

  .game-layout {
    padding: 7px !important;
    gap: 7px !important;
    border-width: 4px !important;
    border-radius: 13px !important;
    grid-template-columns: minmax(0, 1fr) 270px !important;
  }

  .battle-area {
    grid-template-rows:
      66px
      minmax(98px, 1fr)
      50px
      minmax(98px, 1fr)
      132px !important;
    gap: 5px !important;
  }

  .core-row {
    grid-template-columns: minmax(180px, 1fr) 190px minmax(180px, 1fr) !important;
    gap: 6px !important;
  }

  .core-banner {
    padding: 4px 7px !important;
    border-width: 3px !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.48) !important;
  }

  .banner-title {
    font-size: 9px !important;
  }

  .banner-name {
    font-size: 13px !important;
    margin: 0 !important;
  }

  .hp-line {
    font-size: 12px !important;
  }

  .hp-bar {
    height: 9px !important;
    border-width: 2px !important;
    margin: 2px 0 !important;
  }

  .core-banner small {
    display: none !important;
  }

  .center-hud {
    gap: 4px !important;
  }

  .turn-badge {
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-width: 3px !important;
    box-shadow: 3px 3px 0 #000 !important;
  }

  .resource-strip {
    gap: 4px !important;
  }

  .resource-strip div {
    padding: 3px !important;
    font-size: 8.5px !important;
    border-width: 2px !important;
  }

  .resource-strip b {
    font-size: 12px !important;
  }

  .board-section {
    padding: 5px !important;
    border-width: 3px !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.48) !important;
  }

  .zone-header {
    margin-bottom: 3px !important;
  }

  .zone-chip {
    padding: 3px 6px !important;
    font-size: 9px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #000 !important;
  }

  .zone-sub {
    font-size: 9px !important;
  }

  .battle-row {
    grid-template-columns: repeat(3, minmax(82px, 1fr)) !important;
    gap: 5px !important;
  }

  .board-slot {
    align-items: stretch !important;
  }

  .empty-slot {
    min-height: 82px !important;
    max-height: 100px !important;
    max-width: 112px !important;
    border-width: 2px !important;
    font-size: 9px !important;
  }

  .selection-row {
    grid-template-columns: 130px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .battle-center-line {
    border-width: 2px !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,.35) !important;
  }

  .battle-center-line span {
    font-size: 9px !important;
  }

  .selection-panel {
    padding: 5px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,.35) !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 5px !important;
  }

  .selection-title {
    font-size: 9px !important;
  }

  .selection-name {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .selection-panel .hint-pill {
    display: none !important;
  }

  .selection-actions {
    gap: 5px !important;
  }

  .hand-panel {
    padding: 5px !important;
    border-width: 3px !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.48) !important;
  }

  .hand-top {
    margin-bottom: 3px !important;
  }

  .hand-top h2 {
    font-size: 12px !important;
  }

  .hint-pill {
    padding: 3px 5px !important;
    font-size: 9px !important;
    border-width: 2px !important;
  }

  .hand {
    gap: 6px !important;
    padding-bottom: 3px !important;
  }

  .card.hand-card {
    flex: 0 0 88px !important;
    width: 88px !important;
    height: 116px !important;
  }

  .card.board-card {
    width: min(100%, 92px) !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
  }

  .card {
    padding: 3px !important;
    border-radius: 8px !important;
    border-width: 2px !important;
    box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(255,255,255,.05) !important;
  }

  .card-name {
    font-size: 8px !important;
    line-height: 1.0 !important;
  }

  .cost-badge {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 8px !important;
    border-width: 1px !important;
  }

  .card-top {
    margin-bottom: 2px !important;
  }

  .art-frame {
    aspect-ratio: 1 / .58 !important;
    margin-bottom: 2px !important;
    border-width: 1px !important;
  }

  .card-meta {
    font-size: 6.8px !important;
    margin-bottom: 1px !important;
  }

  .stat-grid {
    gap: 1px !important;
    margin-bottom: 1px !important;
  }

  .stat-grid span {
    font-size: 6.8px !important;
    padding: 1px 0 !important;
    border-width: 1px !important;
  }

  .keyword,
  .badge-mini {
    font-size: 6.8px !important;
    padding: 1px 3px !important;
    border-width: 1px !important;
    margin-right: 2px !important;
    margin-bottom: 1px !important;
  }

  .damage-tag {
    top: 2px !important;
    left: 2px !important;
    font-size: 7px !important;
    padding: 1px 3px !important;
    border-width: 1px !important;
  }

  .card-text {
    display: none !important;
  }

  .side-panel {
    grid-template-rows: auto 155px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .side-box {
    padding: 6px !important;
    border-width: 3px !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,.48) !important;
  }

  .side-box h2 {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .action-stack {
    gap: 5px !important;
  }

  .action-stack button {
    padding: 6px !important;
    font-size: 11px !important;
  }

  .status-box,
  .log-box {
    padding: 5px !important;
    gap: 3px !important;
    font-size: 9px !important;
    border-width: 2px !important;
  }

  .log-entry {
    font-size: 9px !important;
    line-height: 1.2 !important;
    padding-bottom: 3px !important;
  }

  .log-head {
    gap: 4px !important;
  }

  .small-pill {
    display: none !important;
  }
}

/* 1366x768 and smaller laptop screens */
@media (min-width: 1081px) and (max-height: 760px) {
  .game-app {
    grid-template-rows: 52px minmax(0, 1fr) !important;
  }

  .play-topbar {
    height: 52px !important;
  }

  .play-logo {
    height: 38px !important;
  }

  .play-title-block h1 {
    font-size: 17px !important;
  }

  .battle-area {
    grid-template-rows:
      58px
      minmax(82px, 1fr)
      42px
      minmax(82px, 1fr)
      116px !important;
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr) 250px !important;
  }

  .core-row {
    grid-template-columns: minmax(160px, 1fr) 170px minmax(160px, 1fr) !important;
  }

  .banner-name {
    font-size: 12px !important;
  }

  .hp-line {
    font-size: 10px !important;
  }

  .hp-bar {
    height: 7px !important;
  }

  .turn-badge {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .resource-strip div {
    font-size: 7.5px !important;
    padding: 2px !important;
  }

  .resource-strip b {
    font-size: 10px !important;
  }

  .selection-row {
    grid-template-columns: 110px minmax(0, 1fr) !important;
  }

  .selection-panel {
    grid-template-columns: minmax(0, 1fr) 130px !important;
  }

  .card.hand-card {
    flex-basis: 78px !important;
    width: 78px !important;
    height: 102px !important;
  }

  .card.board-card {
    width: min(100%, 78px) !important;
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
  }

  .empty-slot {
    min-height: 74px !important;
  }

  .side-panel {
    grid-template-rows: auto 135px minmax(0, 1fr) !important;
  }

  .action-stack button {
    padding: 5px !important;
    font-size: 10px !important;
  }
}


/* =========================
   V24 BALANCED FILL LAYOUT
   Bigger readable board cards + bigger hand cards,
   while using space more efficiently without overlap.
========================= */

@media (min-width: 1081px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 286px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .battle-area {
    grid-template-rows:
      64px
      minmax(182px, 1fr)
      48px
      minmax(182px, 1fr)
      152px !important;
    gap: 6px !important;
  }

  .core-row {
    grid-template-columns: minmax(170px, 1fr) 178px minmax(170px, 1fr) !important;
    gap: 6px !important;
  }

  .core-banner {
    padding: 5px 8px !important;
  }

  .banner-title {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .banner-name {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  .hp-line {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .hp-bar {
    height: 8px !important;
    margin: 2px 0 !important;
  }

  .turn-badge {
    padding: 5px 6px !important;
    font-size: 11px !important;
  }

  .resource-strip div {
    padding: 2px !important;
    font-size: 7.5px !important;
  }

  .resource-strip b {
    font-size: 11px !important;
  }

  .board-section,
  .hand-panel,
  .side-box {
    padding: 6px !important;
  }

  .zone-header,
  .hand-top {
    margin-bottom: 4px !important;
  }

  .zone-chip {
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  .zone-sub,
  .hint-pill,
  .small-pill {
    font-size: 8px !important;
  }

  .battle-row {
    grid-template-columns: repeat(3, minmax(116px, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .board-slot {
    align-items: start !important;
    justify-content: center !important;
    min-height: 0 !important;
    padding-top: 2px !important;
  }

  .empty-slot {
    width: min(100%, 132px) !important;
    min-height: 150px !important;
    max-height: 150px !important;
    max-width: 132px !important;
    font-size: 9px !important;
  }

  .card.board-card {
    width: min(100%, 126px) !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  .selection-row {
    grid-template-columns: 105px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .battle-center-line {
    min-height: 100% !important;
  }

  .selection-panel {
    grid-template-columns: minmax(0, 1fr) 130px !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  .selection-title {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .selection-name {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .selection-actions {
    gap: 5px !important;
  }

  .selection-actions .primary,
  .selection-actions .secondary {
    padding: 5px 6px !important;
    font-size: 9px !important;
  }

  .hand-panel {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .hand {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 104px !important;
    gap: 7px !important;
    align-items: start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 4px 1px !important;
  }

  .card.hand-card {
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 142px !important;
  }

  .card {
    padding: 4px !important;
    border-radius: 8px !important;
  }

  .card-top {
    margin-bottom: 2px !important;
  }

  .card-name {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  .cost-badge {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }

  .art-frame {
    aspect-ratio: 1 / 0.66 !important;
    margin-bottom: 2px !important;
  }

  .card-meta {
    font-size: 7px !important;
    margin-bottom: 2px !important;
  }

  .stat-grid {
    gap: 1px !important;
    margin-bottom: 2px !important;
  }

  .stat-grid span {
    font-size: 7px !important;
    padding: 1px 0 !important;
  }

  .keyword,
  .badge-mini,
  .damage-tag {
    font-size: 7px !important;
  }

  .damage-tag {
    padding: 1px 3px !important;
  }

  .side-panel {
    grid-template-rows: auto 150px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .side-box h2 {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .action-stack {
    gap: 5px !important;
  }

  .action-stack button {
    padding: 6px !important;
    font-size: 10px !important;
  }

  .status-box,
  .log-box {
    padding: 5px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  .status-box {
    line-height: 1.15 !important;
  }

  .log-entry {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 1081px) and (max-height: 780px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 272px !important;
  }

  .battle-area {
    grid-template-rows:
      58px
      minmax(164px, 1fr)
      44px
      minmax(164px, 1fr)
      142px !important;
  }

  .card.board-card {
    width: min(100%, 118px) !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
  }

  .empty-slot {
    width: min(100%, 124px) !important;
    min-height: 142px !important;
    max-height: 142px !important;
    max-width: 124px !important;
  }

  .hand {
    grid-auto-columns: 98px !important;
  }

  .card.hand-card {
    width: 98px !important;
    height: 134px !important;
    flex-basis: 98px !important;
  }

  .selection-panel {
    grid-template-columns: minmax(0, 1fr) 120px !important;
  }
}