/* FCG mobile-first (~390×844), desktop enhancement at 700px+ */
:root {
  --bg: #1a1530;
  --bg2: #2a2350;
  --paper: #fff8ec;
  --ink: #1e1a24;
  --gold: #e8c66a;
  --muted: #a89ec0;
  /* board cards and hand cards scale with the phone (card art is 5:7).
     Hand cards are the big ones: art, name, cost and ATK/HP must be readable. */
  --card-w: clamp(56px, min(23vw, 10.7vh), 96px);
  --card-h: calc(var(--card-w) * 1.4);
  --hand-w: clamp(64px, min(30vw, 14.3vh), 140px);
  --hand-h: calc(var(--hand-w) * 1.4);
  --tap: 48px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --action-h: 64px;
  font-family: "Segoe UI", system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  margin: 0; padding: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0; padding: 0;
  height: 100%;
  height: 100dvh;
  max-width: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
  background: radial-gradient(ellipse at top, #322860 0%, var(--bg) 70%);
  color: var(--paper);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
img { -webkit-user-drag: none; user-select: none; }

#app {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: 100%;
  height: 100dvh;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding:
    calc(6px + var(--safe-t))
    calc(8px + var(--safe-r))
    0
    calc(8px + var(--safe-l));
  gap: 4px;
  overflow: hidden;
  /* one column that may shrink below its content: without this the hand's
     min-content width (all cards side by side) stretched the grid past the
     screen, so the hand never scrolled and cards on the right were cut off */
  grid-template-columns: minmax(0, 1fr);
}
#app > * { min-width: 0; }

/* —— Header —— */
header.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 12px; color: var(--muted);
  min-height: 36px;
}
header.bar .title { color: var(--gold); font-weight: 700; letter-spacing: .04em; font-size: 13px; }
header.bar .stat {
  background: #0004; border-radius: 999px; padding: 4px 8px; color: var(--paper);
  font-size: 11px;
}
header.bar .stat b { color: var(--gold); }
header.bar .turn { color: var(--paper); font-weight: 600; font-size: 12px; flex: 1 1 auto; text-align: right; }
header.bar .bar-actions { display: flex; gap: 6px; }
header.bar .btn {
  min-height: 40px; min-width: 40px;
  padding: 6px 10px; font-size: 12px;
}

/* —— Boards —— */
.boards {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0; overflow: hidden;
}
.board-block {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px; align-items: center;
  min-height: 0;
}
.board-row {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  min-height: calc(var(--card-h) + 4px);
  padding: 4px;
  background: #0002; border-radius: 12px; border: 1px dashed #ffffff18;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.board-row::-webkit-scrollbar { display: none; }
.board-row.enemy { border-color: #e0606033; }
.board-row.player { border-color: #5cbc7a33; }

.life-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10px; color: var(--muted);
}
.life-side .hp {
  font-size: 20px; font-weight: 800; color: var(--paper);
  background: #0005; border-radius: 10px; padding: 6px 8px;
  border: 1px solid #ffffff22; min-width: 44px; text-align: center;
}
.life-side.enemy .hp { color: #ffb0b0; }
.life-side.player .hp { color: #b0ffc8; }
.life-side .sub { font-size: 10px; text-align: center; line-height: 1.2; }
.life-side .sub b { color: var(--gold); }
.mana {
  display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 52px; margin-top: 2px;
}
.mana i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffffff22; border: 1px solid #ffffff33; display: inline-block;
}
.mana i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 6px #e8c66a88; }
.ai-backs {
  display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 2px;
  max-height: 28px; overflow: hidden;
}

/* —— Hand (scrolls horizontally) —— */
.hand-wrap {
  min-height: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
}
.hand {
  display: flex; justify-content: flex-start; align-items: flex-end;
  gap: 8px;
  height: calc(var(--hand-h) + 26px);
  padding: 16px 6px 8px; /* top room for the selected-card lift */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  scrollbar-width: thin;
  contain: layout paint;
}
.hand::-webkit-scrollbar { height: 3px; }
.hand::-webkit-scrollbar-thumb { background: #ffffff33; border-radius: 2px; }
.hand .card { scroll-snap-align: center; width: var(--hand-w); height: var(--hand-h); border-radius: 10px; }
.hand .card .pips { font-size: 14px; padding: 3px 6px; }

/* —— Sticky action bar (thumb zone) —— */
.dock {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, #140f28 18%);
  padding: 8px 0 calc(10px + var(--safe-b));
  z-index: 20;
}
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
button.btn {
  appearance: none; border: none; cursor: pointer;
  background: var(--bg2); color: var(--paper);
  border: 1px solid #ffffff28; border-radius: 14px;
  padding: 12px 14px;
  min-height: var(--tap);
  font-size: 15px; font-weight: 700;
  transition: transform .08s, background .15s, opacity .15s;
  touch-action: manipulation;
}
button.btn:hover { background: #3a3168; }
button.btn:active { transform: scale(.97); }
button.btn.primary {
  background: linear-gradient(180deg, #6b5bb5, #453880);
  border-color: #9a8ad8;
}
button.btn:disabled { opacity: .4; cursor: not-allowed; }
button.btn .tc {
  display: block; font-size: 11px; font-weight: 400; color: #c8bfe8; margin-top: 2px;
}
.selbar {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 6px;
  min-height: 48px; max-width: 480px; margin: 0 auto 6px; width: 100%;
}
.selbar .btn.sm { display: none; min-height: 44px; padding: 4px 12px; font-size: 14px; }
.selbar .btn.sm .tc { font-size: 10px; margin-top: 0; }
.selbar .btn.dim { opacity: .45; }
.selbar.has { grid-template-columns: minmax(0, 1fr) auto auto; }
.selbar.has .btn.sm { display: block; }
.sel-name, .sel-why { display: none; }
.selbar.has .hint { display: none; }
.selbar.has .sel-name {
  display: block; font-size: 13px; font-weight: 700; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selbar.has .sel-why {
  display: block; font-size: 11px; color: var(--paper); line-height: 1.3;
  max-height: 2.6em; overflow: hidden;
}
.sel-why.bad { color: #ffb0b0; font-weight: 700; }
.hint, .log {
  font-size: 11px; color: var(--muted); text-align: center;
  padding: 2px 4px; line-height: 1.35;
}
.log { min-height: 1.35em; max-height: 2.7em; overflow: hidden; }

/* —— Cards —— */
.card {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  border-radius: 8px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 4px 12px #0008; cursor: pointer;
  border: 2px solid transparent; background: #111;
  transition: transform .12s, border-color .12s;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.card img {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
.card.playable { border-color: #7dff9a88; }
.card.selected {
  border-color: #fff3b0;
  box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px #e8c66acc, 0 10px 22px #000a;
  transform: translateY(-12px);
  z-index: 2;
}
/* valid targets: red ring + opacity-only pulse (same cheap trick as .attacking) */
.card.target { border-color: #ff7070; box-shadow: 0 0 0 2px #ff7070, 0 4px 12px #0008; }
.card.target::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  box-shadow: inset 0 0 14px 5px #ff5050bb; pointer-events: none;
  animation: pulse .6s ease-in-out infinite alternate; will-change: opacity;
}
/* board rows clip vertically, so selected board cards glow instead of lifting */
.board-row .card.selected { transform: none; box-shadow: 0 0 0 3px var(--gold), inset 0 0 0 2px #fff3b0; }
.board-row.player .card.target { border-color: #7dff9a; box-shadow: 0 0 0 2px #7dff9a, 0 4px 12px #0008; }
.board-row.player .card.target::before { box-shadow: inset 0 0 14px 5px #60ff90aa; }
.board-row.enemy.targeting { border-color: #ff7070aa; border-style: solid; }
.life-side .hp.target { position: relative; border-color: #ff7070; box-shadow: 0 0 0 2px #ff7070; }
.life-side .hp.target::after {
  content: ""; position: absolute; inset: -4px; border-radius: 12px;
  box-shadow: 0 0 14px 4px #ff5050cc; pointer-events: none;
  animation: pulse .6s ease-in-out infinite alternate; will-change: opacity;
}
/* feedback: transform/opacity only */
.card.shake, .hp.shake { animation: shake .32s ease-in-out; }
.card.hit, .hp.hit { animation: hit .38s ease-out; }
.card.enter { animation: enter .28s ease-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
@keyframes hit {
  0% { transform: translateX(0); } 15% { transform: translateX(-5px) rotate(-2deg); }
  35% { transform: translateX(5px) rotate(2deg); } 55% { transform: translateX(-3px); }
  75% { transform: translateX(2px); } 100% { transform: translateX(0); }
}
@keyframes enter { from { transform: scale(.8); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.fx .pop {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 26px; font-weight: 900; color: #ff5a5a;
  text-shadow: 0 2px 0 #000, 0 0 8px #000c;
  animation: pop .9s ease-out forwards; will-change: transform, opacity;
}
.fx .pop.ko { color: #fff; font-size: 30px; }
.fx .pop.save { color: var(--gold); font-size: 18px; }
.fx .pop.buff { color: #7dff9a; }
@keyframes pop {
  0% { transform: translate(-50%, -30%) scale(.6); opacity: 0; }
  20% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}
.card.attacking { border-color: #ff7070; box-shadow: 0 0 0 2px #ff7070, 0 4px 12px #0008; }
/* glow pulse animates only opacity (compositor-only) instead of repainting box-shadow every frame */
.card.attacking::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  box-shadow: inset 0 0 12px 4px #ff7070aa; pointer-events: none;
  animation: pulse .8s ease-in-out infinite alternate; will-change: opacity;
}
.card.exhausted { filter: brightness(.7) saturate(.7); }
.card.buffed::after {
  content: attr(data-buff); position: absolute; top: 2px; right: 2px;
  background: #e8c66add; color: #1e1a24; font-size: 10px; font-weight: 800;
  border-radius: 4px; padding: 1px 4px;
}
.card .pips {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; padding: 2px 4px;
  background: linear-gradient(transparent, #000c);
  font-size: 11px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px #000; pointer-events: none;
}
.card .pips .p { color: #ffb0a0; }
.card .pips .g { color: #a0ffc0; }
.slot-empty {
  width: var(--card-w); height: var(--card-h);
  border: 1.5px dashed #ffffff22; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff33; font-size: 20px; flex-shrink: 0;
}

@keyframes pulse {
  from { opacity: 0; }
  to { opacity: 1; }
}

.toast {
  /* sits in the gap just above the hand, so it never covers your board or cards */
  position: fixed; left: 50%; bottom: calc(var(--hand-h) + 196px + var(--safe-b));
  transform: translateX(-50%);
  background: #1e1a24ee; color: var(--paper); border: 1px solid var(--gold);
  padding: 12px 16px; border-radius: 12px; font-size: 14px; max-width: min(92vw, 360px);
  z-index: 50; pointer-events: none; opacity: 0; transition: opacity .2s;
  text-align: center; box-shadow: 0 8px 30px #000a;
}
.toast.show { opacity: 1; }
.toast.bad { border-color: #ff7070; color: #ffd0d0; }

.overlay {
  position: fixed; inset: 0; background: #0a0818cc; z-index: 40;
  display: none; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.overlay.show { display: flex; }
.overlay .panel {
  background: var(--bg2); border: 1px solid var(--gold); border-radius: 16px;
  padding: 22px; max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px #000a;
}
.overlay h2 { margin: 0 0 8px; color: var(--gold); font-size: 26px; }
.overlay p { color: var(--muted); margin: 0 0 14px; }
.overlay .btn { width: 100%; max-width: 280px; margin: 0 auto; }

.inspect {
  position: fixed; inset: 0; background: #000c; z-index: 60;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));
  gap: 10px;
}
.inspect.show { display: flex; }
.inspect img {
  max-width: min(375px, 92vw);
  max-height: min(70dvh, 525px);
  width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 12px 40px #000a;
  object-fit: contain;
}
.inspect .meta {
  background: #1e1a24ee; border-radius: 10px; padding: 10px 12px;
  font-size: 12px; color: var(--paper); max-width: min(480px, 92vw);
  -webkit-user-select: text; user-select: text;
}
.inspect .meta b { color: var(--gold); }
.inspect .close-hint { font-size: 11px; color: var(--muted); }

/* —— Breakpoints —— */
/* Narrow phones / default already ~390 */
@media (max-width: 359px) {
  .board-block { grid-template-columns: 44px minmax(0, 1fr); }
  header.bar .stat:nth-child(n+4) { display: none; }
}


/* Short landscape / short phones: shrink vertical chrome */
@media (max-height: 700px) and (max-width: 899px) {
  header.bar { font-size: 11px; }
  .hint { display: none; }
}

/* Tablet / desktop */
@media (min-width: 700px) {
  :root { --card-w: 110px; --card-h: 154px; --hand-w: 120px; --hand-h: 168px; --tap: 52px; }
  #app {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    padding: 10px 16px calc(12px + var(--safe-b));
    gap: 8px;
  }
  .board-block { grid-template-columns: 72px minmax(0, 1fr) 24px; }
  .hand { justify-content: center; }
  .card:hover { transform: translateY(-8px) scale(1.03); }
  .card.selected:hover { transform: translateY(-12px); }
  .actions { max-width: 480px; gap: 14px; }
  button.btn { font-size: 16px; }
}

@media (min-width: 900px) {
  :root { --card-w: 120px; --card-h: 168px; --hand-w: 130px; --hand-h: 182px; }
}