/* 対戦シミュレーター（deck/battle.php）。カード・盤面・手番バー・選択ダイアログ。 */

.bt-app {
  --bt-card-w: 78px;
  --bt-active-w: 98px;
  --bt-zone-w: 62px;
  --bt-prize-w: 50px;
  /* Bench card width (smaller when the Bench is narrower) and the gap between Bench spots */
  --bt-bench-w: 78px;
  --bt-bench-gap: 8px;
  /* Cards tucked under a Pokémon: how far the last one peeks out to the right (share of the card
     width), how far the first one peeks out below and each further one more (share of the height) */
  --bt-tuck-x: 0.36;
  --bt-tuck-y: 0.2;
  --bt-tuck-dy: 0.1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 16px 24px;
}
/* colours, shared with the enlarged card view (it is attached to <body>, outside .bt-app) and a deck
   article's clips (.bt-embed) and dialogs (.bt-embed-host) */
.bt-app, .bt-zoom, .bt-embed, .bt-embed-host {
  --bt-primary: #f59e0b;
  --bt-primary-dark: #d97706;
  --bt-ink: #0f172a;
  --bt-muted: #64748b;
  --bt-border: #cbd5e1;
  --bt-danger: #dc2626;
  --bt-ok: #16a34a;
  --bt-mat: #dcefe2;
  color: var(--bt-ink);
}

.bt-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.bt-beta { display: inline-block; font-size: 0.75rem; vertical-align: middle; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; }
.bt-sub { font-size: 0.85rem; color: var(--bt-muted); margin: 0 0 12px; }
.bt-zoom__link { display: inline-block; margin-top: 4px; color: #2563eb; font-size: 0.85rem; }
.bt-notice { background: #fef3c7; border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; }
.bt-muted { color: var(--bt-muted); font-size: 0.85rem; }
.bt-error { color: var(--bt-danger); font-size: 0.85rem; }
.bt-ok { color: var(--bt-ok); font-size: 0.85rem; font-weight: 600; }
.bt-note { color: var(--bt-danger); }

/* buttons */
.bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--bt-border); border-radius: 8px; background: #fff; color: var(--bt-ink); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.bt-btn:hover { background: #f8fafc; }
.bt-btn:focus-visible, .is-usable:focus-visible, .is-target:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.bt-btn--primary { background: var(--bt-primary); border-color: var(--bt-primary); color: #fff; }
.bt-btn--primary:hover { background: var(--bt-primary-dark); }
.bt-btn--attack { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.bt-btn--attack:hover { background: #1e40af; }
.bt-btn--end { margin-left: auto; }
.bt-btn--inert { cursor: default; color: var(--bt-muted); background: #f1f5f9; border-style: dashed; }
.bt-btn--inert:hover { background: #f1f5f9; }
/* 「LINEで送る」（LINEの決まりで文言だけ、アイコンは描かない） */
.bt-btn--line { background: #06c755; border-color: #06c755; color: #fff; text-decoration: none; }
.bt-btn--line:hover { background: #05b14c; }
.bt-btn--small { min-height: 32px; padding: 4px 10px; font-size: 0.8rem; }
.bt-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bt-btn:disabled:hover { background: #fff; }
.bt-btn--large { min-height: 48px; padding: 12px 28px; font-size: 1rem; }

/* deck picker */
.bt-picker__lead { font-size: 0.9rem; margin: 0 0 12px; }
.bt-picker__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bt-picker__side { background: #fff; border: 1px solid var(--bt-border); border-radius: 12px; padding: 12px; min-width: 0; }
.bt-picker__side h3 { font-weight: 700; margin: 0; }
.bt-picker__start { display: flex; justify-content: center; margin: 16px 0 0; }
.bt-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.bt-tabs button { padding: 6px 12px; border: 1px solid var(--bt-border); border-radius: 999px; background: #fff; font-size: 0.85rem; cursor: pointer; }
.bt-tabs button.is-active { background: var(--bt-ink); border-color: var(--bt-ink); color: #fff; }
.bt-tabpanel { display: flex; flex-direction: column; gap: 8px; }
.bt-field-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.bt-field-label input, .bt-field-label select { border: 1px solid var(--bt-border); border-radius: 8px; padding: 8px; font-size: 1rem; }
.bt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.bt-list__item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; border: 1px solid var(--bt-border); border-radius: 8px; background: #fff; text-align: left; font-size: 0.85rem; cursor: pointer; }
.bt-list__item:hover { background: #f8fafc; }
.bt-list__item span { color: var(--bt-muted); font-size: 0.75rem; }
/* 保存デッキタブの案内（未ログイン・0件のとき） */
.bt-saved-guide { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bt-border); border-radius: 8px; background: #f8fafc; font-size: 0.9rem; }
.bt-saved-guide__lead { margin: 0; font-weight: 600; }
.bt-saved-guide__steps { margin: 0; padding-left: 1.4em; list-style: decimal; display: flex; flex-direction: column; gap: 4px; }
.bt-saved-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bt-saved-guide__actions a.bt-btn { text-decoration: none; }
.bt-saved-guide .bt-saved-guide__actions { margin-top: 0; }
.bt-saved-guide .bt-muted { margin: 0; }
.bt-pager { display: flex; gap: 6px; }
.bt-summary { margin-top: 10px; padding: 10px; border-radius: 8px; font-size: 0.85rem; }
.bt-summary.is-ok { background: #f0fdf4; }
.bt-summary.is-ng { background: #fef2f2; }
.bt-resume { background: #fff; border: 1px solid var(--bt-border); border-radius: 12px; padding: 16px; }
/* the opponent: the CPU (strength, hand shown) or solo play */
.bt-setup { background: #fff; border: 1px solid var(--bt-border); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.bt-setup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bt-setup__row .bt-tabs { margin: 0; }
.bt-setup__label { font-size: 0.85rem; font-weight: 700; min-width: 5.5em; }
.bt-setup__note { margin: 0; }
/* the CPU's plan (作戦メモ) under its deck */
.bt-plan { margin-top: 10px; padding: 10px; border: 1px solid var(--bt-border); border-radius: 8px; background: #fff; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.bt-plan h4 { margin: 0; font-weight: 700; }
.bt-plan p { margin: 0; }
.bt-plan__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bt-plan__row .bt-tabs { margin: 0; }
.bt-plan__type { padding: 8px 10px; border-radius: 6px; background: #f8fafc; display: flex; flex-direction: column; gap: 4px; }
.bt-plan__type-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bt-plan__summary { font-size: 0.8rem; line-height: 1.6; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bt-chip { padding: 4px 10px; border: 1px solid var(--bt-border); border-radius: 999px; background: #fff; font-size: 0.8rem; cursor: pointer; }
.bt-chip.is-active { background: var(--bt-primary); border-color: var(--bt-primary); color: #fff; }
.bt-plan-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--bt-muted); }

/* turn bar */
.bt-turnbar { background: #fff; border: 1px solid var(--bt-border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.bt-turnbar__whose { font-size: 1.05rem; font-weight: 700; }
.bt-turnbar__steps { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 6px 0; padding: 0; }
.bt-turnbar__steps li { padding: 2px 10px; border-radius: 999px; background: #f1f5f9; color: var(--bt-muted); font-size: 0.75rem; }
.bt-turnbar__steps li.is-current { background: var(--bt-primary); color: #fff; font-weight: 700; }
.bt-turnbar__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0; padding: 0; }
.bt-turnbar__chips li { padding: 2px 8px; border: 1px solid var(--bt-border); border-radius: 6px; font-size: 0.75rem; }
.bt-turnbar__chips li span { margin-right: 4px; color: var(--bt-muted); }
.bt-turnbar__chips li.is-ok strong { color: var(--bt-ok); }
.bt-turnbar__chips li.is-no strong { color: var(--bt-muted); }
.bt-turnbar__hint { margin: 4px 0 0; font-size: 0.85rem; }
.bt-turnbar__error { margin: 4px 0 0; color: var(--bt-danger); font-size: 0.85rem; }
.bt-turnbar__cpu { margin: 4px 0 0; padding: 4px 8px; border-radius: 6px; background: #eff6ff; font-size: 0.85rem; }

/* board */
.bt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
/*
 * The mat: an illustration made for this page (PC 4:5, phone 9:16, 2026-10-02) shown through a
 * white veil so the cards and labels stay readable. A light blur is baked into the image files;
 * the strength of the veil is --bt-veil. The image covers the board and is cut at the edges.
 */
.bt-board {
  --bt-veil: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(var(--bt-veil), var(--bt-veil)), url('../images/battle-bg-pc.webp') center / cover no-repeat var(--bt-mat);
  min-width: 0;
}
.bt-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bt-side__name { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.bt-side__name span { color: #475569; font-size: 0.75rem; }
.bt-hand { display: flex; gap: 4px; overflow-x: auto; padding: 8px 4px 4px; min-height: calc(var(--bt-card-w) * 88 / 63 + 12px); }
.bt-hand > .bt-card { flex: 0 0 auto; }
.bt-field { display: flex; flex-direction: column; gap: 6px; }
.bt-field__row { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.bt-bench {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--bt-bench-gap);
  padding: 2px;
  /* five spots always fit the Bench area (a container): the cards shrink when it is narrow */
  --bt-card-w: min(var(--bt-bench-w), calc((100cqi - 4 * var(--bt-bench-gap) - 4px) / (5 * (1 + var(--bt-tuck-x)))));
}
.bt-active { --bt-card-w: var(--bt-active-w); }
/* the Active Pokémon card itself stays centred; the tucked cards stick out to its right */
.bt-active > .bt-slot { margin-left: calc(var(--bt-card-w) * var(--bt-tuck-x)); }
/*
 * Play mat (positions chosen by the user, 2026-10-02). For the player at the bottom: prizes on
 * the left edge, deck on the right edge with the discard pile below it. The opponent's side is
 * the same mat turned around: deck and discard on the left edge (discard on top), prizes on the right.
 */
.bt-mat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.bt-mat--you { grid-template-areas: "prizes active deck" "prizes bench discard"; }
.bt-mat--opponent { grid-template-areas: "discard bench prizes" "deck active prizes"; }
.bt-mat__prizes { grid-area: prizes; }
.bt-mat__active { grid-area: active; justify-self: center; }
.bt-mat__bench { grid-area: bench; justify-self: stretch; min-width: 0; container-type: inline-size; }
.bt-mat__deck { grid-area: deck; justify-self: center; }
.bt-mat__discard { grid-area: discard; justify-self: center; display: flex; flex-direction: column; gap: 6px; }
.bt-mat__deck, .bt-mat__discard { --bt-card-w: var(--bt-zone-w); }

.bt-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt-zone__label { color: #334155; font-size: 0.7rem; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.bt-zone__empty { width: var(--bt-zone-w); aspect-ratio: 63 / 88; border: 2px dashed rgba(15, 23, 42, 0.25); border-radius: 5px; background: rgba(255, 255, 255, 0.45); }
.bt-zone--public { cursor: pointer; border-radius: 6px; }
.bt-zone--public:hover .bt-card, .bt-zone--public:hover .bt-zone__empty, .bt-zone--public:focus-visible .bt-card { box-shadow: 0 0 0 2px #2563eb; }
.bt-stack { box-shadow: 2px 2px 0 #c9a227, 4px 4px 0 #9a7b17, 0 1px 3px rgba(15, 23, 42, 0.3); }

/* prizes: two columns of three, the columns overlapping and offset by half a card */
.bt-zone--prizes { --bt-card-w: var(--bt-prize-w); --bt-prize-h: calc(var(--bt-prize-w) * 88 / 63); }
.bt-prizes { position: relative; width: calc(var(--bt-prize-w) * 1.5); height: calc(var(--bt-prize-h) * 3.5 + 12px); }
/* (.bt-prizes .bt-prize beats .bt-card's position: relative) */
.bt-prizes .bt-prize { position: absolute; width: var(--bt-prize-w); left: calc(var(--col) * var(--bt-prize-w) * 0.5); top: calc(var(--row) * (var(--bt-prize-h) + 6px) + (1 - var(--col)) * var(--bt-prize-h) * 0.5); z-index: calc(var(--col) + 1); }
.bt-prizes::before { content: ''; position: absolute; inset: 0; border: 2px dashed rgba(15, 23, 42, 0.2); border-radius: 6px; background: rgba(255, 255, 255, 0.35); }
/* taking prizes: the two columns move apart so every card can be pressed whole (the tray may cover
   the edge of the Bench meanwhile; nothing else reacts then). The cards that can be taken pulse;
   a picked card lifts until enough cards are picked. */
.bt-zone--prizes.is-choosing .bt-prizes { z-index: 20; }
.bt-zone--prizes.is-choosing .bt-prizes::before { top: -4px; bottom: -4px; left: -4px; right: calc(var(--bt-prize-w) * -0.5 - 8px); border-color: var(--bt-primary); background: rgba(255, 255, 255, 0.75); }
.bt-zone--prizes.is-choosing .bt-prizes .bt-prize { left: calc(var(--col) * (var(--bt-prize-w) + 4px)); }
.bt-prizes .bt-prize.is-target { cursor: pointer; box-shadow: 0 0 0 3px var(--bt-primary), 0 0 12px var(--bt-primary); animation: bt-pulse 1.2s ease-in-out infinite; }
.bt-prizes .bt-prize.is-target:hover, .bt-prizes .bt-prize.is-target:focus-visible { z-index: 5; transform: translateY(-3px); }
.bt-prizes .bt-prize.is-picked { z-index: 6; transform: translate(-3px, -8px); animation: none; box-shadow: 0 0 0 3px #2563eb, 0 6px 14px rgba(15, 23, 42, 0.35); }
.bt-pile__label { color: var(--bt-muted); }
/* Stadium: on the line between the two sides, to the right of the Active Spots */
.bt-center { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 2px 0; }
.bt-center::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(15, 23, 42, 0.15); }
.bt-stadium { position: relative; z-index: 1; grid-column: 2; justify-self: start; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: calc(var(--bt-active-w) / 2 + 28px); --bt-card-w: var(--bt-zone-w); }
.bt-resolving { position: relative; z-index: 1; grid-column: 1; grid-row: 1; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-right: calc(var(--bt-active-w) / 2 + 28px); --bt-card-w: var(--bt-zone-w); }
.bt-stadium__empty { display: flex; align-items: center; justify-content: center; padding: 2px; background: rgba(255, 255, 255, 0.75); color: #475569; font-size: 0.65rem; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }

/* cards */
.bt-card { position: relative; box-sizing: border-box; width: var(--bt-card-w); aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 0.12s; }
.bt-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* ウラ面：カードの裏面の画像（2026-10-03 のユーザー指定）。読めないときは同じ色の地 */
.bt-card--back { background: #2a4a9a url('../images/battle-card-back.webp') center / cover no-repeat; }
.bt-card.is-usable { cursor: pointer; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.7), 0 1px 3px rgba(15, 23, 42, 0.25); }
.bt-card.is-usable:hover { transform: translateY(-3px); }
.bt-card.is-selected { box-shadow: 0 0 0 3px var(--bt-primary), 0 4px 10px rgba(245, 158, 11, 0.5); transform: translateY(-8px); }
.bt-dim .bt-hand .bt-card:not(.is-usable):not(.bt-card--back) { opacity: 0.45; }
.bt-card-text { height: 100%; padding: 4px; font-size: 9px; line-height: 1.25; background: linear-gradient(#fff, #f1f5f9); border-top: 5px solid var(--bt-type, #94a3b8); overflow: hidden; }
.bt-card-text__head { display: flex; justify-content: space-between; gap: 2px; font-weight: 700; }
.bt-card-text__attack { display: flex; justify-content: space-between; gap: 2px; margin-top: 2px; }
.bt-card-text--energy { background: linear-gradient(#fff 0 32%, var(--bt-type, #94a3b8) 32% 100%); }
.bt-card.is-inspectable { cursor: zoom-in; }
.bt-card.is-inspectable:hover, .bt-card.is-inspectable:focus-visible { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.65), 0 1px 3px rgba(15, 23, 42, 0.25); }

/*
 * Pokémon in play. Energy and Tools are tucked under the Pokémon card and peek out toward the
 * lower right (user request 2026-10-02): the k-th of n cards sits k/n of the way to the right and
 * one step lower than the one before. Every spot keeps that room on its right, so nothing moves
 * sideways when a card is attached; the spot only grows downward.
 */
.bt-slot { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: calc(var(--bt-card-w) * (1 + var(--bt-tuck-x))); }
.bt-slot__stack {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(var(--bt-card-w) * 88 / 63 * (1 + var(--bt-tuck-y) * min(var(--n, 0), 1) + var(--bt-tuck-dy) * max(var(--n, 0) - 1, 0)));
  transform-origin: calc(var(--bt-card-w) / 2) calc(var(--bt-card-w) * 44 / 63);
}
.bt-slot__top { position: relative; z-index: 20; width: var(--bt-card-w); }
.bt-attached { position: absolute; left: calc(var(--bt-card-w) * var(--bt-tuck-x) * var(--kx)); top: calc(var(--bt-card-w) * 88 / 63 * (var(--bt-tuck-y) + var(--bt-tuck-dy) * var(--ky))); z-index: var(--kz); }
.bt-slot--empty { box-sizing: border-box; width: var(--bt-card-w); height: calc(var(--bt-card-w) * 88 / 63); border: 2px dashed rgba(15, 23, 42, 0.25); border-radius: 6px; background: rgba(255, 255, 255, 0.45); }
/* asleep / paralyzed / confused turn the whole stack, as when the card is turned on the table */
.bt-slot.is-sideways .bt-slot__stack { transform: rotate(90deg) scale(0.8); }
.bt-slot.is-upside-down .bt-slot__stack { transform: rotate(180deg); }
.bt-slot.is-target { cursor: pointer; }
.bt-slot.is-inspectable { cursor: zoom-in; }
.bt-slot.is-inspectable:hover .bt-slot__card, .bt-slot.is-inspectable:focus-visible .bt-slot__card { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.65), 0 1px 3px rgba(15, 23, 42, 0.25); }
.bt-slot.is-target .bt-slot__card { box-shadow: 0 0 0 3px var(--bt-primary), 0 0 14px var(--bt-primary); animation: bt-pulse 1.2s ease-in-out infinite; }
@keyframes bt-pulse { 50% { box-shadow: 0 0 0 3px var(--bt-primary), 0 0 4px var(--bt-primary); } }
.bt-badge { position: absolute; z-index: 1; padding: 1px 6px; border-radius: 999px; background: var(--bt-ink); color: #fff; font-size: 0.65rem; font-weight: 700; white-space: nowrap; }
.bt-badge--damage { top: 4px; right: -6px; background: var(--bt-danger); }
.bt-badge--stack { top: 4px; left: -6px; background: #334155; }
.bt-badge--ability { bottom: 4px; left: -6px; background: #7c3aed; }
.bt-slot.has-ability .bt-slot__card { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.75), 0 1px 3px rgba(15, 23, 42, 0.25); }
.bt-slot__attached { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: var(--bt-card-w); margin-top: 3px; }
.bt-slot__attached:empty { display: none; }
.bt-cond { padding: 0 4px; border-radius: 4px; color: #fff; font-size: 10px; line-height: 16px; background: #ea580c; }
.bt-cond--poison { background: #7e22ce; }
.bt-cond--burn { background: #b91c1c; }

.bt-type-grass { --bt-type: #16a34a; }
.bt-type-fire { --bt-type: #dc2626; }
.bt-type-water { --bt-type: #2563eb; }
.bt-type-lightning { --bt-type: #ca8a04; }
.bt-type-psychic { --bt-type: #9333ea; }
.bt-type-fighting { --bt-type: #b45309; }
.bt-type-darkness { --bt-type: #1f2937; }
.bt-type-metal { --bt-type: #64748b; }
.bt-type-fairy { --bt-type: #db2777; }
.bt-type-dragon { --bt-type: #a16207; }
.bt-type-colorless { --bt-type: #94a3b8; }

/* action bar: between the viewer's field and hand, where the player is looking */
.bt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bt-border); border-radius: 10px; background: rgba(255, 255, 255, 0.92); }
.bt-actions:empty { display: none; }
.bt-actions__label { font-size: 0.85rem; font-weight: 700; }

/* side panel */
.bt-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--bt-border); border-radius: 12px; background: #fff; }
.bt-panel h2 { margin: 0; font-size: 0.9rem; font-weight: 700; }
.bt-log { max-height: 52vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; }
.bt-log li { padding: 3px 0; border-bottom: 1px dashed #e2e8f0; }
.bt-log li.is-turn { color: #1d4ed8; font-weight: 700; }
.bt-options { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; }
.bt-option { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bt-option select { border: 1px solid var(--bt-border); border-radius: 6px; padding: 2px 6px; font-size: 0.8rem; }
/* logged in: finished games are saved to the player's records (the note under the consent option) */

/* dialogs */
.bt-choice, .bt-zoom { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); }
.bt-choice__panel, .bt-zoom__body { width: 100%; max-width: 760px; max-height: 90vh; overflow: auto; padding: 16px; border-radius: 12px; background: #fff; }
.bt-choice__prompt { margin: 0 0 10px; font-weight: 700; }
.bt-choice__cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; --bt-card-w: 92px; }
.bt-choice__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bt-choice__hint { color: var(--bt-muted); font-size: 0.85rem; align-self: center; }
.bt-choice__peek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bt-border); }
.bt-choice__others { margin: 0 0 12px; }
.bt-choice__others summary { margin-bottom: 8px; cursor: pointer; color: var(--bt-muted); font-size: 0.85rem; }
.bt-card.is-unselectable { opacity: 0.45; filter: grayscale(0.5); }
.bt-choice__pokemon { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; color: #334155; font-size: 0.75rem; }
.bt-choice__pokemon figcaption { max-width: calc(var(--bt-card-w) + 24px); text-align: center; }
.bt-choice__stepper { display: flex; gap: 6px; }
/* a card of a dialog (choices.ts): pressing it chooses it, the magnifier on its corner opens it enlarged (2026-10-04) */
.bt-pick { position: relative; flex: none; }
.bt-pick__zoom { position: absolute; right: 3px; bottom: 3px; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(15, 23, 42, 0.78); color: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.45); cursor: zoom-in; transition: transform 0.12s, background-color 0.12s; }
.bt-pick__zoom svg { width: 16px; height: 16px; }
.bt-pick__zoom:hover { background: #2563eb; }
.bt-pick__zoom:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
/* the magnifier moves with its card when the card is lifted */
.bt-card.is-usable:hover + .bt-pick__zoom { transform: translateY(-3px); }
.bt-card.is-selected + .bt-pick__zoom { transform: translateY(-8px); }
/* one of several effects or attacks: a list of full-width buttons with what each one does */
.bt-choice__options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bt-btn--option { flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; text-align: left; }
.bt-btn__note { color: var(--bt-muted); font-size: 0.8rem; font-weight: 400; }
.bt-stadium .bt-card.has-ability { cursor: pointer; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.75), 0 1px 3px rgba(15, 23, 42, 0.25); }
.bt-viewer { z-index: 110; }
.bt-viewer__summary { margin: 0 0 6px; font-size: 0.85rem; }
.bt-result { font-size: 1.2rem; }
/* the result (logged in): keep the game in the history on マイページ or not */
.bt-record { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.bt-record.is-saved { border-color: #a7f3d0; background: #ecfdf5; }
.bt-record__text { margin: 0; font-size: 0.9rem; font-weight: 700; }
.bt-record__hint { margin: 2px 0 0; color: var(--bt-muted); font-size: 0.8rem; }
.bt-record__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bt-record__link { display: inline-block; margin-top: 4px; color: #047857; font-size: 0.85rem; font-weight: 700; }
/* the result of a game: what to do next with the player's deck (next.ts) */
.bt-result-next { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bt-border); }
.bt-result-next__title { margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--bt-muted); }
.bt-result-next__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-result-next__action { flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--bt-next-accent); border-radius: 10px; background: var(--bt-next-accent-soft); color: var(--bt-next-accent-strong); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.bt-result-next__action svg { flex: none; width: 20px; height: 20px; }
.bt-result-next__action:hover, .bt-result-next__action:focus-visible { background: #fff; }
.bt-zoom__body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; --bt-card-w: 300px; }
.bt-zoom__body > img { width: 100%; border-radius: 10px; }
/* a card without an image keeps the card shape, with readable text */
.bt-zoom__body > .bt-card-text { align-self: start; box-sizing: border-box; height: auto; aspect-ratio: 63 / 88; padding: 10px; border-radius: 10px; font-size: 14px; }
.bt-zoom { z-index: 120; }
.bt-zoom__buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* back to the list the card was opened from (the Pokémon, a discard pile), on the left */
.bt-zoom__back { margin-right: auto; }
.bt-zoom__text h3 { margin: 0 0 6px; font-weight: 700; }
.bt-zoom__text p { margin: 0 0 6px; font-size: 0.85rem; }
.bt-zoom__text .bt-zoom__label { margin: 12px 0 4px; font-weight: 700; }
.bt-zoom__text .bt-zoom__state { font-weight: 700; }
.bt-zoom__thumbs { display: flex; flex-wrap: wrap; gap: 6px; --bt-card-w: 64px; }
.bt-zoom__thumb { cursor: zoom-in; }
/* what can be done with the card (use it, attach it, an ability): with the buttons at the bottom */
.bt-zoom__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* with the card's image (2026-10-04): the image alone, as large as the screen allows (its name and text are read
   there), the link under it and the buttons at the bottom, all as wide as the image */
.bt-zoom__body--image { width: auto; max-width: calc(100vw - 32px); grid-template-columns: min-content; }
/* (max-width: none: the page's Tailwind sets img { max-width: 100% }, which would shrink the image to the narrow column) */
.bt-zoom__body--image > img { width: min(560px, calc((90vh - 140px) * 63 / 88), calc(100vw - 64px)); max-width: none; aspect-ratio: 63 / 88; object-fit: contain; }
/* a Pokémon in play: where it is, its state and the cards under it beside the image */
.bt-zoom__body--side { grid-template-columns: min-content minmax(200px, 300px); }
.bt-zoom__body--side > img { width: min(560px, calc((90vh - 96px) * 63 / 88), calc(100vw - 300px)); }

/* under the simulator: what to do next with the player's deck (next.ts). The three actions are
   cards of their own colour; smaller links lead to other pages. */
.bt-next { margin: 24px 0 8px; padding: 20px; border: 1px solid #fde68a; border-radius: 16px; background: linear-gradient(180deg, #fffbeb, #ffffff 70%); }
.bt-next:empty { display: none; }
.bt-next__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.bt-next__title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.bt-next__target { margin: 0; font-size: 0.85rem; color: var(--bt-muted); overflow-wrap: anywhere; }
.bt-next__target strong { color: var(--bt-ink); }
.bt-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bt-next__card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; border: 1px solid #e7e5e4; border-top: 4px solid var(--bt-next-accent); border-radius: 14px; background: #fff; color: var(--bt-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.bt-next__card:hover, .bt-next__card:focus-visible { transform: translateY(-2px); border-color: var(--bt-next-accent); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); }
.bt-next__card:focus-visible { outline: 3px solid var(--bt-next-accent-soft); outline-offset: 2px; }
.bt-next__card[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.bt-next__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bt-next-accent-soft); color: var(--bt-next-accent-strong); }
.bt-next__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 1.05rem; font-weight: 700; }
.bt-next__badge { padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 0.7rem; font-weight: 700; }
.bt-next__text { font-size: 0.85rem; line-height: 1.6; color: #57534e; }
.bt-next__note { font-size: 0.75rem; font-weight: 700; color: var(--bt-next-accent-strong); }
.bt-next__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 0.9rem; font-weight: 700; color: var(--bt-next-accent-strong); }
.bt-next__cta::after { content: '→'; transition: transform 0.15s; }
.bt-next__card:hover .bt-next__cta::after { transform: translateX(3px); }
.bt-next--edit { --bt-next-accent: #f59e0b; --bt-next-accent-soft: #fef3c7; --bt-next-accent-strong: #b45309; }
.bt-next--diagnose { --bt-next-accent: #3b82f6; --bt-next-accent-soft: #dbeafe; --bt-next-accent-strong: #1d4ed8; }
.bt-next--article { --bt-next-accent: #10b981; --bt-next-accent-soft: #d1fae5; --bt-next-accent-strong: #047857; }

/*
 * The way to tournaments near the player (events.ts, design B of docs/tournament-events-proposal-2026-10-04.md):
 * three steps (finish the deck here, find a tournament, get ready), the tournament decks and other pages.
 */
.bt-ev { position: relative; margin: 20px 0 8px; padding: 26px 24px 18px; border: 1.5px solid #fde68a; border-radius: 20px; background: radial-gradient(circle at 92% 0%, #fef3c7 0, rgba(254, 243, 199, 0) 38%), linear-gradient(180deg, #ffffff, #fffdf5); overflow: hidden; color: #1e293b; }
.bt-ev:empty { display: none; }
.bt-ev img { max-width: none; }
.bt-ev__head { position: relative; padding-right: 300px; margin-bottom: 18px; }
.bt-ev__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #2563eb; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; }
.bt-ev__burst { width: 16px; height: auto; }
.bt-ev__title { margin: 6px 0 0; font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.15rem); font-weight: 900; line-height: 1.3; letter-spacing: 0.02em; }
.bt-ev__accent { color: #f97316; padding: 0 2px 8px; white-space: nowrap; background: url('../images/events/deco-underline.webp') left bottom / 100% 14px no-repeat; }
.bt-ev__lead { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.8; color: #475569; }
.bt-ev__hand { position: absolute; top: 34px; right: 120px; margin: 0; padding-bottom: 20px; transform: rotate(-9deg); color: #334155; font-size: 0.95rem; font-weight: 700; line-height: 1.6; text-align: center; background: url('../images/events/deco-sparkle-line.webp') center bottom / 190px auto no-repeat; }
.bt-ev__trophy { position: absolute; top: -18px; right: -6px; width: 150px; height: auto; opacity: 0.42; pointer-events: none; }
.bt-ev__steps { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.08fr) 22px minmax(0, 1fr); align-items: stretch; gap: 0 10px; }
.bt-ev__arrow { align-self: center; width: 18px; height: auto; }
.bt-ev__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.bt-ev__step--main { border: 2px solid #fb923c; box-shadow: 0 10px 28px rgba(249, 115, 22, 0.18); padding-top: 22px; }
.bt-ev__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 4px 16px 5px; border-radius: 999px; background: linear-gradient(180deg, #fbbf24, #f97316); color: #fff; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3); }
.bt-ev__badge::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #f97316; border-bottom: 0; }
.bt-ev__step-head { display: flex; align-items: center; gap: 12px; }
.bt-ev__step-head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.bt-ev__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, #3b82f6, #1d4ed8); color: #fff; font-family: Inter, sans-serif; font-size: 1.3rem; font-weight: 800; box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3); }
.bt-ev__step--main .bt-ev__num { background: linear-gradient(180deg, #fb923c, #ea580c); box-shadow: 0 3px 8px rgba(234, 88, 12, 0.3); }
.bt-ev__step-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bt-ev__step-body p { margin: 0; font-size: 0.86rem; line-height: 1.75; color: #475569; }
.bt-ev__step-icon { width: 92px; height: 92px; object-fit: contain; }
.bt-ev__practice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin-top: auto; padding: 12px 14px; border-radius: 14px; background: #eff6ff; }
.bt-ev__practice p { margin: 0; font-size: 0.84rem; font-weight: 700; line-height: 1.6; color: #1e3a8a; overflow-wrap: anywhere; }
.bt-ev__practice p strong { color: #1d4ed8; }
.bt-ev__practice-icon { grid-row: 1 / span 2; width: 40px; height: auto; }
.bt-ev__practice-link { justify-self: start; font-size: 0.8rem; font-weight: 700; color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.bt-ev__controls { display: flex; flex-direction: column; gap: 8px; }
.bt-ev__pref { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #fdba74; border-radius: 10px; background: #fff; font-size: 0.92rem; font-weight: 700; color: #1e293b; }
.bt-ev__pref:focus-visible { outline: 3px solid #fed7aa; outline-offset: 1px; }
.bt-ev__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-ev__chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #fde68a; border-radius: 999px; background: #fffbeb; color: #57534e; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.bt-ev__chip[aria-pressed="true"] { border-color: #fb923c; background: #ffedd5; color: #9a3412; box-shadow: inset 0 0 0 1px #fb923c; }
.bt-ev__chip:focus-visible { outline: 3px solid #fed7aa; outline-offset: 1px; }
.bt-ev__chip-icon { width: 16px; height: 16px; object-fit: contain; }
.bt-ev__results { min-height: 54px; }
.bt-ev__results[aria-busy="true"] { opacity: 0.55; }
.bt-ev__hint, .bt-ev__count { margin: 0; font-size: 0.82rem; line-height: 1.6; color: #64748b; }
.bt-ev__count strong { color: #ea580c; font-size: 1.05rem; }
.bt-ev__events { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.bt-ev__event a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; padding: 8px 10px; border: 1px solid #f1f5f9; border-radius: 10px; background: #f8fafc; color: #1e293b; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.bt-ev__event a:hover, .bt-ev__event a:focus-visible { border-color: #fdba74; background: #fff7ed; }
.bt-ev__when { font-size: 0.76rem; font-weight: 800; color: #c2410c; }
.bt-ev__kind { justify-self: start; padding: 0 7px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 0.68rem; font-weight: 800; line-height: 1.7; }
.bt-ev__kind--shop { background: #ffedd5; color: #c2410c; }
.bt-ev__what { grid-column: 1 / -1; font-size: 0.84rem; font-weight: 700; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-ev__where { grid-column: 1 / -1; font-size: 0.74rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-ev__cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; min-height: 52px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(180deg, #fb923c 0%, #f97316 55%, #ea580c 100%); box-shadow: 0 8px 18px rgba(234, 88, 12, 0.3); color: #fff; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.06em; text-decoration: none; transition: transform 0.15s, filter 0.15s; }
.bt-ev__cta:hover, .bt-ev__cta:focus-visible { transform: translateY(-1px); filter: brightness(1.05); }
.bt-ev__cta:focus-visible { outline: 3px solid #fed7aa; outline-offset: 2px; }
.bt-ev__cta-icon { width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.bt-ev__cta-arrow { transition: transform 0.15s; }
.bt-ev__cta:hover .bt-ev__cta-arrow { transform: translateX(3px); }
.bt-ev__checks { display: grid; gap: 8px; margin: auto 0 0; padding: 12px 14px; border-radius: 14px; background: #f8fafc; list-style: none; }
.bt-ev__checks li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; }
.bt-ev__checks li::before { content: ''; flex: none; width: 18px; height: 18px; background: url('../images/events/check.webp') center / contain no-repeat; }
.bt-ev__checks a { color: #1e293b; text-decoration: none; }
.bt-ev__checks a:hover, .bt-ev__checks a:focus-visible { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
.bt-ev__decks { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; margin-top: 16px; padding: 14px 18px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.bt-ev__decks-icon { width: 74px; height: auto; }
.bt-ev__decks-text p { margin: 0; font-size: 0.82rem; line-height: 1.6; color: #64748b; }
.bt-ev__decks-text .bt-ev__decks-title { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 2px; font-size: 1rem; font-weight: 800; color: #1e293b; }
.bt-ev__decks-title strong { color: #1d4ed8; }
.bt-ev__outline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid #2563eb; border-radius: 12px; background: #fff; color: #1d4ed8; font-size: 0.95rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.bt-ev__outline:hover, .bt-ev__outline:focus-visible { background: #eff6ff; }
.bt-ev__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e7e5e4; font-size: 0.85rem; }
.bt-ev__more span { color: var(--bt-muted); font-weight: 700; }
.bt-ev__more a { color: #44403c; text-decoration: underline; text-underline-offset: 3px; }
.bt-ev__more a:hover, .bt-ev__more a:focus-visible { color: #92400e; }
@media (max-width: 960px) {
  .bt-ev__head { padding-right: 0; }
  .bt-ev__hand { display: none; }
  .bt-ev__trophy { width: 110px; opacity: 0.3; }
  .bt-ev__steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bt-ev__arrow { justify-self: center; transform: rotate(90deg); width: 14px; }
  .bt-ev__step--main { margin-top: 12px; }
}
@media (max-width: 640px) {
  .bt-ev { padding: 20px 12px 14px; border-radius: 16px; }
  .bt-ev__lead br { display: none; }
  .bt-ev__step { padding: 16px 14px 14px; }
  .bt-ev__step--main { padding-top: 22px; }
  .bt-ev__step-icon { width: 70px; height: 70px; }
  .bt-ev__decks { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .bt-ev__decks-icon { width: 56px; }
  .bt-ev__outline { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 960px) {
  .bt-layout { grid-template-columns: 1fr; }
  .bt-log { max-height: 30vh; }
}

@media (max-width: 760px) {
  .bt-app {
    --bt-card-w: 46px; --bt-active-w: 62px; --bt-zone-w: 40px; --bt-prize-w: 30px;
    /* narrow: the tucked cards peek out mostly downward so five Bench spots still fit in a row */
    --bt-bench-w: 46px; --bt-bench-gap: 4px; --bt-tuck-x: 0.12; --bt-tuck-y: 0.2; --bt-tuck-dy: 0.12;
    padding: 12px 8px 16px;
  }
  .bt-picker__sides { grid-template-columns: 1fr; }
  .bt-board { background-image: linear-gradient(var(--bt-veil), var(--bt-veil)), url('../images/battle-bg-phone.webp'); }
  .bt-mat { gap: 6px; }
  .bt-stadium { margin-left: calc(var(--bt-active-w) / 2 + 12px); }
  .bt-zoom__body { grid-template-columns: 1fr; --bt-card-w: 220px; }
  .bt-zoom__body > img { max-width: 260px; justify-self: center; }
  .bt-zoom__body > .bt-card-text { width: 100%; max-width: 220px; justify-self: center; font-size: 12px; }
  /* the image the whole width of the screen, the rest under it */
  .bt-zoom__body--image { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .bt-zoom__body--image > img { width: 100%; max-width: 480px; }
  .bt-choice__cards { --bt-card-w: 70px; }
  /* the panel of what to do next: one card per row, the icon beside the title */
  .bt-next { padding: 16px 12px; }
  .bt-next__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bt-next__card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 14px; }
  .bt-next__card > :not(.bt-next__icon) { grid-column: 2; }
  .bt-next__icon { grid-row: 1 / span 4; width: 40px; height: 40px; }
  .bt-next__name { margin-top: 0; }
}

/*
 * Animations (design 6.7, 2026-10-03): one layer fixed over the page, above the board and below the
 * dialogs. Copies of cards move on it while the board is hidden in their place; the attack is shown
 * with both Pokémon large and the HP on wheels. Nothing on the screen reacts meanwhile.
 */
.bt-busy .bt-layout, .bt-busy .bt-turnbar { pointer-events: none; }
.bt-fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.bt-fx__ghost { position: absolute; z-index: 2; transform-origin: 0 0; will-change: transform; }
.bt-fx__ghost > .bt-card { width: 100%; height: 100%; }
.bt-fx__ghost.is-big { z-index: 4; }
.bt-fx__ghost.is-big > .bt-card { border-radius: 9px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.45); }
.bt-fx__ghost.is-ko > .bt-card { filter: grayscale(1) brightness(0.75); }
.bt-fx__caption { position: absolute; z-index: 5; transform: translateX(-50%); width: max-content; max-width: min(90vw, 440px); padding: 6px 14px; border-radius: 999px; background: rgba(15, 23, 42, 0.92); color: #fff; font-size: 0.9rem; font-weight: 700; line-height: 1.5; text-align: center; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3); }
.bt-fx__caption.is-ability { background: #6d28d9; }
.bt-fx__banner { position: absolute; z-index: 6; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 16px; background: #c2570c; color: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3); }
.bt-fx__banner strong { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.bt-fx__banner span { font-size: 0.9rem; opacity: 0.9; white-space: nowrap; }
.bt-fx__banner.is-other { background: #1e293b; }
.bt-fx__banner.is-check { height: 42px; background: #475569; }
.bt-fx__banner.is-check strong { font-size: 1.1rem; }
.bt-fx__banner.is-win { background: linear-gradient(90deg, #9a3412, #d97706, #9a3412); }
.bt-fx__banner.is-lose { background: #334155; }
/* the attack: both Pokémon large, side by side */
.bt-fx__closeup { position: absolute; inset: 0; z-index: 3; }
.bt-fx__backdrop { position: absolute; inset: -24px; background: rgba(15, 23, 42, 0.58); }
.bt-fx__attack { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -100%); padding: 8px 18px; border-radius: 12px; background: #fff; color: #0f172a; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35); white-space: nowrap; }
.bt-fx__attack.is-viewer { box-shadow: 0 0 0 3px #f59e0b, 0 6px 20px rgba(15, 23, 42, 0.35); }
.bt-fx__attack-who { color: #475569; font-size: 0.75rem; }
.bt-fx__attack strong { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.04em; }
.bt-fx__info { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translateX(-50%); color: #fff; white-space: nowrap; }
.bt-fx__info-name { font-size: 0.85rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.bt-fx__hp { display: flex; align-items: baseline; gap: 5px; padding: 3px 12px; border-radius: 8px; background: rgba(15, 23, 42, 0.88); font-variant-numeric: tabular-nums; }
.bt-fx__hp-label { color: #cbd5e1; font-size: 0.8rem; font-weight: 700; }
.bt-fx__hp .bt-odo { font-size: 1.7rem; font-weight: 800; }
.bt-fx__hp-max { color: #cbd5e1; font-size: 0.85rem; }
.bt-fx__info.is-hurt .bt-odo { color: #fca5a5; }
/* HP on wheels (ドラムロール): each digit is a strip of 0-9 that turns */
.bt-odo { display: inline-flex; height: 1em; overflow: hidden; line-height: 1; vertical-align: -0.12em; font-variant-numeric: tabular-nums; }
.bt-odo__wheel { display: inline-block; width: 0.62em; height: 1em; overflow: hidden; text-align: center; }
.bt-odo__strip { display: flex; flex-direction: column; will-change: transform; }
.bt-odo__strip > span { display: block; height: 1em; line-height: 1; }
.bt-fx__damage { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; color: #e11d48; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; white-space: nowrap; }
.bt-fx__damage strong { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 900; line-height: 1; }
.bt-fx__damage span { color: #b91c1c; font-size: 0.95rem; font-weight: 800; -webkit-text-stroke-width: 3px; }
.bt-fx__ko { position: absolute; z-index: 7; padding: 4px 16px; border: 4px solid #dc2626; border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: #dc2626; font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 900; letter-spacing: 0.1em; white-space: nowrap; }
.bt-fx__fail { position: absolute; z-index: 7; padding: 4px 12px; border-radius: 8px; background: #475569; color: #fff; font-size: 1rem; font-weight: 800; white-space: nowrap; }
/* the hit in the attacker's type colour, damage counters flying, the light of an evolution */
.bt-fx__hit { position: absolute; z-index: 6; width: 0; height: 0; }
.bt-fx__ring { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 5px solid var(--c); border-radius: 50%; box-shadow: 0 0 18px var(--c); }
.bt-fx__slash { position: absolute; left: 0; top: 0; width: 150px; height: 8px; margin: -4px 0 0 -75px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--c), #fff, var(--c), transparent); }
.bt-fx__pop { position: absolute; z-index: 6; color: #e11d48; font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 900; line-height: 1; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; white-space: nowrap; }
.bt-fx__pop.is-heal { color: #16a34a; }
.bt-fx__pop.is-poison { color: #7e22ce; font-size: 1.15rem; }
.bt-fx__pop.is-burn { color: #ea580c; font-size: 1.15rem; }
.bt-fx__counters { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt-fx__counters-label { padding: 0 5px; border-radius: 4px; background: #fff; color: #9f1239; font-size: 10px; font-weight: 700; line-height: 1.5; }
.bt-fx__counters-disc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fb7185, #be123c); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.35); }
.bt-fx__spark { position: absolute; z-index: 6; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fb7185, #be123c); box-shadow: 0 0 0 2px #fff; }
.bt-fx__flash { position: absolute; z-index: 6; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 25%, rgba(255, 255, 255, 0) 70%); }
.bt-fx__confetti { position: absolute; z-index: 8; width: 8px; height: 12px; border-radius: 2px; }
/* coins */
.bt-fx__coins { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); padding: 12px 16px; border-radius: 14px; background: rgba(15, 23, 42, 0.8); }
.bt-fx__coin-caption { color: #fff; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.bt-fx__coin-caption.is-result { color: #fde68a; font-size: 1rem; }
.bt-fx__coin-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(80vw, 420px); perspective: 500px; }
.bt-fx__coin { position: relative; width: 52px; height: 52px; transform-style: preserve-3d; }
.bt-fx__coin-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: 0.75rem; font-weight: 800; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18); }
.bt-fx__coin-face.is-heads { background: radial-gradient(circle at 35% 30%, #fde68a, #d99a1e); color: #5b3a00; }
.bt-fx__coin-face.is-tails { background: radial-gradient(circle at 35% 30%, #e2e8f0, #8a99ad); color: #1e293b; transform: rotateX(180deg); }
@media (max-width: 760px) {
  .bt-fx__banner strong { font-size: 1.2rem; }
  .bt-fx__attack strong { font-size: 1.05rem; }
  .bt-fx__hp .bt-odo { font-size: 1.35rem; }
  .bt-fx__caption { font-size: 0.8rem; }
}

/* 対戦の再生（deck/battle-replay.php、設計7.6）。操作のバーは盤面の下にあり、画面の下端に止まって見え続ける。 */
.bt-replay__head { margin: 0 0 8px; }
.bt-replay__match { margin: 0; font-weight: 700; }
.bt-replay__meta { margin: 2px 0 0; font-size: 0.85rem; color: var(--bt-muted); }
.bt-replay__options { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; font-size: 0.85rem; }
/* 動画を作る（段階3）：長さを選び、作っている間は進み具合、できたら見本と保存・共有 */
.bt-replay__video { margin-left: auto; }
.bt-video { max-width: 560px; }
.bt-video__lengths { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.bt-video__length { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--bt-border); border-radius: 10px; cursor: pointer; }
.bt-video__length.is-active { border-color: var(--bt-primary); background: #fffbeb; }
.bt-video__length input { grid-row: 1 / span 2; accent-color: var(--bt-primary); }
.bt-video__length-label { font-weight: 700; font-size: 0.95rem; }
.bt-video__length-note { grid-column: 2; font-size: 0.8rem; color: var(--bt-muted); }
.bt-video__bar { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.bt-video__progress { flex: 1; height: 14px; accent-color: var(--bt-primary); }
.bt-video__percent { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
.bt-video__preview { display: block; max-width: 100%; max-height: 50vh; margin: 8px auto; border-radius: 10px; background: #000; }
.bt-video__pick { grid-column: 2; justify-self: start; margin-top: 6px; }
/* 解説記事の対戦の動画（docs/battle-replay-article-embed-proposal-2026-10-03.md）：縦長の枠に区間だけを描く */
.bt-embed { max-width: 400px; margin: 0 auto; }
.bt-embed__head { margin: 0 0 6px; }
.bt-embed__title { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.4; }
.bt-embed__meta { margin: 2px 0 0; font-size: 0.8rem; color: var(--bt-muted); }
.bt-embed__frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #0f172a; }
.bt-embed__canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.bt-embed__start { position: absolute; inset: 0; width: 76px; height: 76px; margin: auto; border: 0; border-radius: 50%; background: rgba(245, 158, 11, 0.94); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.45); }
.bt-embed__start[hidden] { display: none; }
.bt-embed__start:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bt-embed__status { position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; color: #e2e8f0; font-size: 0.85rem; }
.bt-embed__bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.bt-embed__play { min-width: 44px; }
.bt-embed__seek { flex: 1; min-width: 0; accent-color: var(--bt-primary); }
.bt-embed__time { font-size: 0.8rem; color: var(--bt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-embed__speed { min-height: 32px; padding: 2px 6px; border: 1px solid var(--bt-border); border-radius: 8px; background: #fff; font-size: 0.8rem; }
.bt-embed__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; font-size: 0.85rem; }
.bt-embed__link { color: #b45309; font-weight: 700; text-decoration: underline; }
.bt-embed__notice { margin: 0; }
/* 区間を決める：対戦の全体を「全部（1倍）」の時刻で流し、区間を手の切れ目で決める */
.bt-choice__panel.bt-range { max-width: 880px; }
.bt-range__body { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 16px; align-items: start; margin-top: 10px; }
.bt-range__frame { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 62vh; overflow: hidden; border-radius: 10px; background: #0f172a; }
.bt-range__canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.bt-range__track { position: relative; padding: 14px 0 16px; }
.bt-range__seek { width: 100%; margin: 0; accent-color: var(--bt-primary); }
.bt-range__band { position: absolute; top: 4px; height: 7px; border-radius: 4px; background: rgba(245, 158, 11, 0.7); pointer-events: none; }
.bt-range__marks { position: absolute; left: 0; right: 0; bottom: 2px; height: 10px; pointer-events: none; }
.bt-range__tick { position: absolute; bottom: 0; width: 1px; height: 9px; background: #94a3b8; }
.bt-range__ko { position: absolute; bottom: 1px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--bt-danger); }
.bt-range__controls, .bt-range__times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.bt-range__play { min-width: 44px; }
.bt-range__time { min-width: 6.5em; font-variant-numeric: tabular-nums; color: var(--bt-muted); font-size: 0.85rem; }
.bt-range__time-field { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.bt-range__input { width: 5em; padding: 6px 8px; border: 1px solid var(--bt-border); border-radius: 6px; font-variant-numeric: tabular-nums; }
.bt-range__summary { margin: 10px 0 4px; font-weight: 700; }
.bt-range__problem:empty { display: none; }
.bt-range__reveal { margin-top: 6px; font-size: 0.85rem; }
@media (max-width: 640px) {
  .bt-range__body { grid-template-columns: 1fr; }
  .bt-range__frame { width: auto; height: 44vh; max-height: none; margin: 0 auto; }
}
/* 共有（段階2）：記録した本人だけに出る */
.bt-replay__share { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.bt-replay__share:empty { display: none; }
.bt-replay__share-text { margin: 0; font-size: 0.85rem; }
.bt-replay__share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.bt-replay__share-url { flex: 1 1 260px; min-width: 0; padding: 6px 8px; border: 1px solid var(--bt-border); border-radius: 6px; background: #fff; font-size: 0.8rem; }
.bt-replay__bar { position: sticky; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--bt-border); border-radius: 12px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12); }
.bt-replay__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bt-replay__play { min-width: 7.5em; }
.bt-replay__speed { margin: 0 0 0 auto; }
.bt-replay__speed button { padding: 4px 10px; }
.bt-replay__speed-select { display: none; min-height: 32px; padding: 2px 6px; border: 1px solid var(--bt-border); border-radius: 8px; background: #fff; font-size: 0.85rem; }
/* the replay's turn bar is short (one line and what the move did) so the whole board fits on the screen */
.bt-replay__screen .bt-turnbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 12px; margin-bottom: 8px; }
.bt-replay__screen .bt-turnbar__whose { font-size: 0.95rem; }
.bt-replay__screen .bt-turnbar__steps { margin: 0; }
.bt-replay__screen .bt-turnbar__hint, .bt-replay__screen .bt-turnbar__cpu { flex-basis: 100%; margin: 0; }
/* what the move did: always one line high on a PC and two on a phone (cut beyond), so the board does not move */
.bt-replay__screen .bt-turnbar__cpu { padding: 2px 8px; line-height: 1.5; min-height: 1.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.bt-replay__seek { display: flex; align-items: center; gap: 12px; }
.bt-replay__track { position: relative; flex: 1; min-width: 0; padding-top: 6px; }
.bt-replay__track input[type="range"] { display: block; width: 100%; margin: 0; accent-color: var(--bt-primary); }
/* the turns (ticks) and Knock Outs (dots) above the bar, inside the travel of its thumb */
.bt-replay__marks { position: absolute; left: 8px; right: 8px; top: 0; height: 6px; pointer-events: none; }
.bt-replay__tick { position: absolute; top: 0; width: 1px; height: 6px; background: #94a3b8; }
.bt-replay__ko { position: absolute; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--bt-danger); }
.bt-replay__pos { min-width: 9.5em; font-size: 0.8rem; color: var(--bt-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bt-replay__after { margin-top: 16px; }
.bt-replay__decks { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 0.9rem; }
.bt-replay__decks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bt-replay__deck { margin-right: 4px; }
.bt-replay__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
@media (max-width: 760px) {
  .bt-replay__bar { padding: 6px 8px; }
  .bt-replay__buttons { gap: 4px; }
  .bt-replay__buttons .bt-btn { padding: 4px 9px; }
  /* only the icons (their names stay as aria-label) and the speed as a select: one row of buttons */
  .bt-replay__label { display: none; }
  .bt-replay__label--play { display: inline; }
  .bt-replay__speed { display: none; }
  .bt-replay__speed-select { display: inline-block; margin-left: auto; }
  .bt-replay__screen .bt-turnbar__steps { display: none; }
  .bt-replay__screen .bt-turnbar__cpu { min-height: 3em; -webkit-line-clamp: 2; }
  .bt-replay__pos { min-width: 0; }
}