/* ============================================================
   TICK — 予約制デュエル
   最優先事項：画面を見ただけで「次に何をすればいいか」が分かること。
   ============================================================ */

html { overflow: hidden; }

.tick-body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.tick-arena {
  /* 1枠に3枚まで重なるので、3段重ねが行に収まる大きさに抑える */
  --tcard-w: clamp(48px, min(10vw, 8.6vh), 94px);
  --hand-w:  clamp(74px, min(11vw, 12.5vh), 120px);
  --side-w:  clamp(38px, 5vw, 62px);
  --gap:     clamp(4px, 0.7vw, 10px);

  position: relative;
  display: grid;
  /* 列を明示的に上限つきにしないと、暗黙列が中身に押し広げられて
     盤面がビューポートより広くなる */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  height: 100vh;
  height: 100dvh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(6px, 1.4vw, 20px) env(safe-area-inset-bottom);
}
.thud, .opp-zone, .timeline, .tdock, .guide, .legend { min-width: 0; }

/* ============================================================
   HUD
   ============================================================ */

.thud {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  padding: clamp(5px, 0.9vh, 10px) clamp(6px, 1vw, 12px);
}
.thud-side { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.thud-me { justify-content: flex-end; }

.thud-avatar {
  display: grid; place-items: center;
  width: clamp(28px, 4vh, 40px); height: clamp(28px, 4vh, 40px);
  border-radius: var(--corner-sm);
  font-size: clamp(14px, 2.1vh, 20px);
  background: linear-gradient(160deg, rgba(255,111,97,0.32), rgba(255,111,97,0.06));
  border: 1px solid rgba(255,111,97,0.55);
  flex-shrink: 0;
}
.thud-avatar--me {
  background: linear-gradient(160deg, rgba(67,214,197,0.32), rgba(67,214,197,0.06));
  border-color: rgba(67,214,197,0.55);
}
.thud-body { min-width: 0; flex: 1; }
.thud-body--right { text-align: right; }
.thud-name {
  font-size: clamp(10px, 1.4vh, 12px);
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.thud-opp .thud-name { color: #ff9084; }
.thud-me  .thud-name { color: #78ecdd; }

.hpline { display: flex; align-items: center; gap: 8px; }
.hpline--right { justify-content: flex-end; }
.hpline b {
  font-family: var(--font-num);
  font-size: clamp(15px, 2.2vh, 20px);
  font-weight: 900;
  min-width: 2.2ch;
  font-variant-numeric: tabular-nums;
}
.hpbar {
  flex: 1;
  min-width: 50px;
  max-width: 210px;
  height: 9px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  overflow: hidden;
}
.hpbar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff8a7d, var(--accent));
  transition: width 0.5s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 0 10px -2px var(--accent);
}
.hpbar-fill--me { background: linear-gradient(90deg, #5ce6d5, var(--cyan)); box-shadow: 0 0 10px -2px var(--cyan); }
.hpbar-fill.low { background: linear-gradient(90deg, #ffb37a, #ff4056); animation: hpFlash 0.9s ease-in-out infinite; }
@keyframes hpFlash { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

.thud-center { flex: 0 0 auto; }
.tick-badge {
  font-family: var(--font-num);
  font-size: clamp(10px, 1.35vh, 12px);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  white-space: nowrap;
}
.tick-badge b { color: var(--gold); font-size: 1.5em; }

.thud-tools { display: flex; gap: 4px; flex: 0 0 auto; }
.icon-btn {
  display: grid; place-items: center;
  width: clamp(24px, 3.2vh, 30px); height: clamp(24px, 3.2vh, 30px);
  border-radius: var(--corner-sm);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font: inherit; font-size: clamp(11px, 1.5vh, 13px); font-weight: 800;
  cursor: pointer; transition: all 0.15s;
}
.icon-btn:hover { background: rgba(67,214,197,0.18); color: #fff; transform: translateY(-1px); }
.icon-btn--danger:hover { background: rgba(255,111,97,0.28); border-color: var(--accent); color: #ffd3cd; }
/* 「やめてトップへ」。降参の隣に置くが、危険操作ではないので色を分ける */
.btn-exit { border-color: rgba(67,214,197,0.42); color: var(--cyan); }
.btn-exit:hover { background: rgba(67,214,197,0.22); border-color: var(--cyan); color: #b6fff5; }
.icon-btn--sm { width: 24px; height: 24px; border: none; background: none; font-size: 16px; }

/* ============================================================
   タイムライン
   ============================================================ */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(5px, 1vh, 12px) 0;
  /* 左へ流れるカードは盤外へ消える。ガイドバーへのはみ出しも止める。 */
  overflow: hidden;
}

/* 盤面は縦を使い切る。上＝あいて／下＝あなた が空間として伝わるようにする。 */
.tl-board {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: min(100%, 620px);
  margin: auto 0;
  padding: clamp(6px, 1vh, 12px) 0 clamp(10px, 1.6vh, 18px);
}

.tl-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: clamp(12px, 2vw, 24px) 4px clamp(12px, 2vw, 24px) 4px;
  background:
    linear-gradient(90deg, rgba(255,209,102,0.14), transparent 26%),
    radial-gradient(ellipse 55% 40% at 50% 4%,   rgba(255,111,97,0.14), transparent 70%),
    radial-gradient(ellipse 55% 40% at 50% 96%,  rgba(67,214,197,0.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 0 80px -22px rgba(0,0,0,0.9);
  overflow: hidden;
}

/* 行の共通グリッド：[サイドラベル] + 6枠 */
.tl-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
  padding: 0 clamp(6px, 1.2vw, 16px);
}
.slot-host,
.tl-head-cols,
.axis-body { min-width: 0; }

/* --- 列見出し --- */
.tl-head { grid-template-columns: var(--side-w) repeat(6, minmax(0, 1fr)); }
.tl-corner { }
.tl-colhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 0 3px;
  border-bottom: 1px solid rgba(155,214,234,0.12);
}
.colhead-name {
  font-family: var(--font-num);
  font-size: clamp(9px, 1.2vh, 12px);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.colhead-mark {
  font-size: clamp(8px, 1.05vh, 10px);
  font-weight: 800;
  color: #04101a;
  background: linear-gradient(135deg, #ffe9a8, var(--gold));
  padding: 0 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.tl-colhead.is-next { border-bottom-color: var(--gold); }
.tl-colhead.is-next .colhead-name { color: var(--gold); }

/* --- サイドラベル（誰の場かを明示する） --- */
.tl-side {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 8px 2px 8px 2px;
  font-size: clamp(9px, 1.25vh, 12px);
  font-weight: 800;
  letter-spacing: 0.04em;
  writing-mode: horizontal-tb;
  text-align: center;
  padding: 4px 2px;
}
.tl-side--opp { background: rgba(255,111,97,0.16); border: 1px solid rgba(255,111,97,0.4); color: #ffb8ae; }
.tl-side--me  { background: rgba(67,214,197,0.16); border: 1px solid rgba(67,214,197,0.42); color: #9df3ea; }

/* --- 予約行 --- */
.slot-host {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  align-items: flex-end;
}
.tl-row--opp .slot-host { align-items: flex-start; }
.tl-row--opp { background: linear-gradient(180deg, rgba(255,111,97,0.07), transparent); border-radius: 10px; }
.tl-row--me  { background: linear-gradient(0deg,  rgba(67,214,197,0.07), transparent); border-radius: 10px; }

/* 盤面が1つ左へ流れる動き（時間が進むのを見せる） */
.slot-host.sliding { transition: transform 0.45s cubic-bezier(.3,.7,.3,1); }

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(var(--tcard-w) * 1.36);
  padding: 3px;
  border: 1px dashed transparent;
  border-radius: 10px 2px 10px 2px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.tl-row--opp .slot { justify-content: flex-start; }
.slot.empty { border-color: rgba(155,214,234,0.14); }
.slot.imminent { background: rgba(255,209,102,0.07); border-color: rgba(255,209,102,0.38); border-style: solid; }

/* 置ける枠：はっきり光らせる */
.slot.legal {
  border-color: var(--gold);
  border-style: solid;
  background: rgba(255,209,102,0.16);
  box-shadow: inset 0 0 26px -6px rgba(255,209,102,0.95), 0 0 16px -6px rgba(255,209,102,0.8);
  cursor: pointer;
  animation: legalPulse 1.5s ease-in-out infinite;
}
.slot.legal::after {
  content: 'ここに置く';
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  font-size: clamp(8px, 1.05vh, 10px);
  font-weight: 800;
  color: #04101a;
  background: var(--gold);
  padding: 0 6px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.tl-row--opp .slot.legal::after { display: none; }
.slot.legal:hover { background: rgba(255,209,102,0.3); transform: translateY(-3px); }
@keyframes legalPulse {
  0%, 100% { box-shadow: inset 0 0 26px -6px rgba(255,209,102,0.9), 0 0 12px -6px rgba(255,209,102,0.6); }
  50%      { box-shadow: inset 0 0 26px -4px rgba(255,209,102,1), 0 0 22px -4px rgba(255,209,102,0.95); }
}
.slot.illegal { opacity: 0.25; }
.slot.full { border-color: rgba(255,111,97,0.32); border-style: solid; }

.slot.resolving { animation: slotResolve 0.7s ease-out; }
@keyframes slotResolve {
  0%   { background: rgba(255,209,102,0.07); }
  22%  { background: rgba(255,209,102,0.6); box-shadow: 0 0 46px -6px rgba(255,209,102,1); }
  100% { background: rgba(255,209,102,0.07); }
}

/* 同じ枠のカードは、机の上の重なりのようにずらして積む。
   全部を縦に並べると行から溢れる。 */
.slot .tcard + .tcard { margin-top: calc(var(--w, var(--tcard-w)) * -1.06); }
.slot .tcard:nth-child(2) { z-index: 2; }
.slot .tcard:nth-child(3) { z-index: 3; }
.slot .tcard:nth-child(4) { z-index: 4; }

.slot-power {
  margin: 2px 0;
  font-family: var(--font-num);
  font-size: clamp(10px, 1.35vh, 13px);
  font-weight: 900;
  padding: 0 7px;
  border-radius: 999px;
  line-height: 1.55;
  white-space: nowrap;
}
.tl-row--me .slot-power  { background: rgba(67,214,197,0.26); color: #b6fff5; border: 1px solid rgba(67,214,197,0.5); }
.tl-row--opp .slot-power { background: rgba(255,111,97,0.26); color: #ffcdc6; border: 1px solid rgba(255,111,97,0.5); }

/* ============================================================
   カードの裏面（山札・相手の手札・伏せ予約で共通）
   ============================================================ */

.cardback {
  background:
    radial-gradient(circle at 50% 42%, rgba(67,214,197,0.42) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 42%, transparent 0 15%, rgba(67,214,197,0.22) 16% 17.5%, transparent 18%),
    repeating-linear-gradient(60deg,  rgba(155,214,234,0.10) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-60deg, rgba(155,214,234,0.10) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, #24486a 0%, #12293f 45%, #081724 100%);
  border: 1px solid rgba(155,214,234,0.4);
  box-shadow: inset 0 0 0 2px rgba(6,18,28,0.85), inset 0 0 18px -6px rgba(67,214,197,0.5);
}

/* ============================================================
   山札 / 捨札（カードの出どころと行き先を目に見せる）
   ============================================================ */

.pile {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--pile-w, 42px));
  height: calc(var(--pile-w, 42px) * 1.3);
  border-radius: calc(var(--pile-w, 42px) * 0.14) 2px calc(var(--pile-w, 42px) * 0.14) 2px;
}
.pile-stack {
  position: absolute; inset: 0;
  border-radius: inherit;
}
.pile-stack::before,
.pile-stack::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(155,214,234,0.22);
  
  background: linear-gradient(165deg, #1a344d, #0a1a28);
}
.pile-stack::before { transform: translate(3px, 3px); }
.pile-stack::after  { transform: translate(1.5px, 1.5px); }
.pile-stack {
  background:
    radial-gradient(circle at 50% 42%, rgba(67,214,197,0.42) 0 9%, transparent 10%),
    repeating-linear-gradient(60deg,  rgba(155,214,234,0.10) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, #24486a 0%, #12293f 45%, #081724 100%);
  border: 1px solid rgba(155,214,234,0.4);
  box-shadow: inset 0 0 0 2px rgba(6,18,28,0.85);
  z-index: 1;
}
.pile-slot {
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px dashed rgba(155,214,234,0.28);
  background: rgba(0,0,0,0.25);
}
.pile-n {
  position: absolute;
  z-index: 3;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--font-num);
  font-size: calc(var(--pile-w, 42px) * 0.36);
  font-weight: 900;
  color: #dff3ff;
  text-shadow: 0 1px 4px #000;
}
.pile-label {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  bottom: calc(var(--pile-w, 42px) * -0.34);
  text-align: center;
  font-size: max(8px, calc(var(--pile-w, 42px) * 0.2));
  color: var(--text-faint);
  white-space: nowrap;
}
.pile--discard .pile-n { color: var(--text-secondary); }
/* 「補充は1ティック1枚」を盤面に常設で出す。ここが分からないと
   手札を全部吐き出して枯らす事故が起きる */
.pile-rate {
  position: absolute;
  z-index: 3;
  top: calc(var(--pile-w, 42px) * -0.30);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-num, inherit);
  font-size: max(8px, calc(var(--pile-w, 42px) * 0.22));
  font-weight: 800;
  color: var(--cyan);
  white-space: nowrap;
  opacity: 0.9;
}
.pile.pulse { animation: pilePulse 0.34s ease-out; }
@keyframes pilePulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); filter: brightness(1.5); }
  100% { transform: scale(1); }
}

/* ============================================================
   相手の手元（裏向きの手札＋山札）
   ============================================================ */

.opp-zone {
  --pile-w: clamp(30px, min(4.6vw, 4.6vh), 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  padding: 2px 8px clamp(9px, 1.3vh, 15px);
  min-height: 0;
}
.opp-hand { display: flex; align-items: center; }
.opp-hand .ohand-card {
  width: calc(var(--pile-w) * 0.82);
  height: calc(var(--pile-w) * 1.08);
  border-radius: calc(var(--pile-w) * 0.11) 2px calc(var(--pile-w) * 0.11) 2px;
  margin-left: calc(var(--pile-w) * -0.44);
  transform-origin: bottom center;
  animation: ohandIn 0.32s cubic-bezier(.2,.8,.3,1.3) both;
}
.opp-hand .ohand-card:first-child { margin-left: 0; }
@keyframes ohandIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   飛ぶカード（山札→手札→盤面→捨札）
   ============================================================ */

.fly-layer { position: fixed; inset: 0; z-index: 1800; pointer-events: none; }
.fly-card {
  position: fixed;
  /* 掴んでいる最中のゴーストは指の真下に来るので、当たり判定を持たせると
     elementFromPoint() が枠ではなくゴーストを拾い、ドロップ先を見失う */
  pointer-events: none;
  border-radius: 9px 2px 9px 2px;
  transition: transform 0.36s cubic-bezier(.25,.8,.3,1), opacity 0.36s ease;
  will-change: transform, opacity;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.95);
  overflow: hidden;
}
.fly-card .tcard { width: 100% !important; height: 100% !important; }

/* 掴んでいる最中 */
.drag-ghost {
  transition: none !important;
  opacity: 0.94;
  box-shadow: 0 18px 34px -10px rgba(0,0,0,1), 0 0 26px -4px rgba(255,209,102,0.85);
  cursor: grabbing;
}
body.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.dragging .hand .tcard { cursor: grabbing; }
/* touch-action を切らないと、スマホでは指の動きがスクロール扱いになり
   pointermove が来ないまま pointercancel でドラッグが死ぬ */
.hand .tcard { cursor: grab; touch-action: none; }
/* 掴んだカードが乗っている枠 */
.slot.drop-hover {
  background: rgba(255,209,102,0.38) !important;
  border-color: #fff !important;
  transform: translateY(-4px) scale(1.03);
  box-shadow: inset 0 0 30px -4px rgba(255,209,102,1), 0 0 24px -4px rgba(255,209,102,0.9) !important;
}

/* ============================================================
   TICKカード
   ============================================================ */

.tcard {
  position: relative;
  width: var(--w, var(--tcard-w));
  height: calc(var(--w, var(--tcard-w)) * 1.3);
  border-radius: calc(var(--w, var(--tcard-w)) * 0.13) 2px calc(var(--w, var(--tcard-w)) * 0.13) 2px;
  overflow: hidden;
  background: #071521;
  border: 1px solid var(--tc, #557286);
  /* 紙の厚みと、机に置かれている感じ */
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 2px 0 rgba(4,12,20,0.9),
    0 5px 12px -4px rgba(0,0,0,0.85);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(.2,.8,.3,1.3), box-shadow 0.15s, filter 0.15s;
  --tc: #557286;
  --tcs: rgba(155,214,234,0.4);
  flex-shrink: 0;
}
.tcard.t-fire      { --tc: var(--fire);      --tcs: rgba(255,122,53,0.6); }
.tcard.t-water     { --tc: var(--water);     --tcs: rgba(63,149,255,0.6); }
.tcard.t-lightning { --tc: var(--lightning); --tcs: rgba(255,214,10,0.6); }
.tcard.t-psychic   { --tc: var(--psychic);   --tcs: rgba(169,105,239,0.6); }
.tcard.t-fighting  { --tc: var(--fighting);  --tcs: rgba(224,90,36,0.6); }
.tcard.t-darkness  { --tc: var(--darkness);  --tcs: rgba(111,111,156,0.65); }
.tcard.t-metal     { --tc: var(--metal);     --tcs: rgba(159,176,198,0.6); }
.tcard.t-grass     { --tc: var(--grass);     --tcs: rgba(18,214,154,0.6); }
.tcard.t-dragon    { --tc: var(--dragon);    --tcs: rgba(230,187,28,0.65); }
.tcard.t-colorless { --tc: var(--colorless); --tcs: rgba(201,211,224,0.5); }

.tcard-art { position: absolute; inset: 0; z-index: 0; }
.tcard-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.tcard::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(3,10,18,0.88) 0%, rgba(3,10,18,0.1) 30%, rgba(3,10,18,0.25) 52%, rgba(3,10,18,0.96) 86%);
}
.tcard::after {
  content: '';
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--tcs), inset 0 0 14px -5px var(--tcs);
}
.tcard.is-ex::after { box-shadow: inset 0 0 0 2px rgba(255,209,102,0.9), inset 0 0 20px -6px rgba(255,209,102,0.95); }

/* 速度＝いつ置けるか。時計アイコンを必ず添える */
.tcard-speed {
  position: absolute; z-index: 3;
  top: 3px; left: 3px;
  display: flex; align-items: center; gap: 1px;
  padding: 0 5px 0 4px;
  border-radius: 999px;
  background: rgba(4,16,26,0.92);
  border: 1px solid rgba(120,236,221,0.75);
  font-family: var(--font-num);
  font-size: calc(var(--w, var(--tcard-w)) * 0.16);
  font-weight: 900;
  color: #9df3ea;
  line-height: 1.5;
}
.tcard-speed i { font-style: normal; font-size: 0.85em; }

/* 威力＝ぶつかったときの数字。剣アイコンを添える */
.tcard-power {
  position: absolute; z-index: 3;
  right: 3px; bottom: calc(var(--w, var(--tcard-w)) * 0.185);
  display: flex; align-items: baseline; gap: 1px;
  font-family: var(--font-num);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 10px var(--tcs), 0 2px 3px #000;
}
.tcard-power {
  padding: 0 5px 0 4px;
  border-radius: 999px;
  background: rgba(190, 40, 25, 0.88);
  border: 1px solid rgba(255,160,145,0.8);
}
.tcard-power i {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: calc(var(--w, var(--tcard-w)) * 0.13);
  opacity: 0.9;
  margin-right: 1px;
}
.tcard-power b { font-size: calc(var(--w, var(--tcard-w)) * 0.24); font-weight: 900; }

.tcard-name {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: calc(var(--w, var(--tcard-w)) * 0.09);
  padding: 0 4px;
  font-size: calc(var(--w, var(--tcard-w)) * 0.115);
  font-weight: 700;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000;
}
.tcard-eff {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 1px;
  padding: 0 3px;
  font-size: calc(var(--w, var(--tcard-w)) * 0.1);
  font-weight: 700;
  text-align: center;
  color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}

/* 伏せカード */
.tcard.hidden-card {
  background:
    radial-gradient(circle at 50% 42%, rgba(67,214,197,0.42) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 42%, transparent 0 15%, rgba(67,214,197,0.22) 16% 17.5%, transparent 18%),
    repeating-linear-gradient(60deg,  rgba(155,214,234,0.10) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-60deg, rgba(155,214,234,0.10) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, #24486a 0%, #12293f 45%, #081724 100%);
  border-color: rgba(155,214,234,0.4);
  display: grid; place-items: center;
}
.tcard.hidden-card .tcard-art,
.tcard.hidden-card .tcard-name,
.tcard.hidden-card .tcard-eff,
.tcard.hidden-card .tcard-power { display: none; }
.tcard.hidden-card::before { display: none; }
.tcard.hidden-card .qmark {
  position: relative; z-index: 3;
  font-family: var(--font-num);
  font-size: calc(var(--w, var(--tcard-w)) * 0.42);
  font-weight: 900;
  color: rgba(155,214,234,0.65);
}

/* 状態 */
.tcard.mine-fresh { box-shadow: 0 0 0 2px var(--gold), 0 4px 12px -4px #000; }
.tcard.mine-fresh::before { background: linear-gradient(to bottom, rgba(3,10,18,0.88) 0%, rgba(3,10,18,0.1) 30%, rgba(3,10,18,0.25) 52%, rgba(3,10,18,0.96) 86%); }
.tcard.selected {
  transform: translateY(-10px) scale(1.1);
  box-shadow: 0 0 0 3px var(--gold), 0 0 28px -4px rgba(255,209,102,1);
  z-index: 30;
}
.tcard.dimmed { filter: grayscale(0.75) brightness(0.5); }
.tcard:hover { transform: translateY(-4px) scale(1.05); z-index: 20; }
.tcard.selected:hover { transform: translateY(-10px) scale(1.1); }

/* ============================================================
   カード同士がぶつかる
   ============================================================ */

/* 突撃中は他の全てより手前へ */
.tcard.charging { z-index: 70 !important; }

/* 競り勝った側：踏みとどまって光る */
.tcard.victor { animation: victorGlow 0.5s ease-out; }
@keyframes victorGlow {
  0%   { filter: brightness(2.2) saturate(1.4); }
  100% { filter: brightness(1); }
}

/* 競り負けた側：砕けて消える */
.tcard.broken { animation: cardBreak 0.44s cubic-bezier(.4,0,.7,1) forwards; }
@keyframes cardBreak {
  0%   { opacity: 1; filter: brightness(2.6) saturate(0.2); }
  30%  { opacity: 1; filter: brightness(0.7); }
  100% { opacity: 0; transform: translateY(var(--brk-y, 0px)) scale(0.42) rotate(var(--brk-r, 16deg)); filter: brightness(0.2) blur(3px); }
}

/* 属性ごとの飛び散り */
.shard {
  position: fixed;
  z-index: 1782;
  pointer-events: none;
  background: var(--sh-c, #fff);
  box-shadow: 0 0 10px var(--sh-c, #fff);
  animation: shardFly var(--sh-d, 520ms) cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes shardFly {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--sh-x), var(--sh-y)) rotate(var(--sh-r)) scale(var(--sh-s, 0.4)); }
}
/* 炎：破片が舞う */
.shard.fx-fire { width: 7px; height: 12px; border-radius: 60% 40% 55% 45%; }
/* 水：しずく */
.shard.fx-water { width: 9px; height: 9px; border-radius: 60% 60% 70% 30%; }
/* 雷：稲妻の破片 */
.shard.fx-lightning { width: 3px; height: 18px; border-radius: 1px; }
/* 草：葉 */
.shard.fx-grass { width: 12px; height: 6px; border-radius: 90% 10% 90% 10%; }
/* 超：光の粒 */
.shard.fx-psychic { width: 8px; height: 8px; border-radius: 50%; }
/* 闘：拳圧の線 */
.shard.fx-fighting { width: 18px; height: 4px; border-radius: 2px; }
/* 悪：影の刃 */
.shard.fx-darkness { width: 5px; height: 16px; border-radius: 50% 50% 0 0; }
/* 鋼：火花 */
.shard.fx-metal { width: 2px; height: 14px; }
/* 竜：鱗 */
.shard.fx-dragon { width: 10px; height: 10px; border-radius: 50% 0 50% 0; }
/* 無：粒 */
.shard.fx-colorless { width: 6px; height: 6px; border-radius: 50%; }

/* 二重リング（竜・Ω用） */
.clash-burst.ring2::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--burst-c, #fff);
  opacity: 0.6;
}

/* 衝突点の衝撃波 */
.clash-burst {
  position: fixed;
  z-index: 1780;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 3px solid var(--burst-c, #fff);
  box-shadow: 0 0 30px var(--burst-c, #fff), inset 0 0 18px var(--burst-c, #fff);
  pointer-events: none;
  animation: burstOut 0.42s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes burstOut {
  0%   { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(7); }
}
/* 衝突点に走る横一閃 */
.clash-line {
  position: fixed;
  z-index: 1779;
  left: 0; right: 0;
  height: 3px;
  margin-top: -1.5px;
  background: linear-gradient(90deg, transparent, var(--burst-c, #fff) 22%, #fff 50%, var(--burst-c, #fff) 78%, transparent);
  pointer-events: none;
  animation: lineFlash 0.4s ease-out forwards;
}
@keyframes lineFlash {
  0%   { opacity: 0; transform: scaleX(0.2); }
  25%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.05); }
}

/* 突撃中に出す威力の数字 */
.clash-num {
  position: fixed;
  z-index: 1785;
  font-family: var(--font-num);
  font-size: clamp(20px, 3.2vh, 36px);
  font-weight: 900;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 6px #000;
  animation: clashNum 0.9s ease-out forwards;
}
.clash-num.me  { color: #b6fff5; }
.clash-num.opp { color: #ffc7c0; }
@keyframes clashNum {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ============================================================
   時間の軸
   ============================================================ */

.axis-body { display: flex; align-items: center; gap: 10px; }
.axis-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(155,214,234,0.3) 34%, transparent); }
.axis-cap {
  font-size: clamp(8px, 1.1vh, 10.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  flex-shrink: 0;
  white-space: nowrap;
}
.axis-cap--now { color: var(--gold); }

/* ============================================================
   手順ガイド（画面が次の操作を言う）
   ============================================================ */

.guide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(5px, 0.9vh, 10px) 0 0;
  padding: clamp(7px, 1.1vh, 11px) clamp(11px, 1.4vw, 18px);
  border-radius: var(--corner-sm);
  border: 1px solid rgba(255,209,102,0.45);
  background: linear-gradient(100deg, rgba(255,209,102,0.16), rgba(255,209,102,0.04));
  transition: all 0.2s;
}
.guide-step {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe9a8, var(--gold));
  color: #2a1d00;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 900;
}
.guide-text {
  font-size: clamp(12.5px, 1.75vh, 15.5px);
  font-weight: 800;
  color: #ffeec2;
}
.guide-hint {
  font-size: clamp(10.5px, 1.4vh, 12.5px);
  color: var(--text-secondary);
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.guide.waiting {
  border-color: var(--stroke-2);
  background: rgba(255,255,255,0.04);
}
.guide.waiting .guide-step { background: rgba(155,214,234,0.25); color: var(--text-secondary); }
.guide.waiting .guide-text { color: var(--text-secondary); }
.guide.resolving {
  border-color: rgba(67,214,197,0.6);
  background: linear-gradient(100deg, rgba(67,214,197,0.2), rgba(67,214,197,0.04));
}
.guide.resolving .guide-step { background: linear-gradient(135deg, #b6fff5, var(--cyan)); color: #032a26; }
.guide.resolving .guide-text { color: #cffff8; }

/* ============================================================
   手札ドック
   ============================================================ */

.tdock {
  --pile-w: clamp(34px, min(5vw, 5.4vh), 52px);
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.2vw, 18px);
  padding: clamp(5px, 0.9vh, 11px) 0 clamp(12px, 1.8vh, 20px);
}
.tdock .pile { margin-bottom: calc(var(--pile-w) * 0.3); }

.dock-left { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; padding-bottom: 6px; }
.slots-meter { display: flex; flex-direction: column; gap: 3px; }
.slots-label { font-size: 9.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }
.slots-pips { display: flex; gap: 4px; }
.spip {
  width: 14px; height: 16px;
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  background: rgba(155,214,234,0.18);
}
.spip.open { background: linear-gradient(150deg, #fff2c4, var(--gold)); filter: drop-shadow(0 0 6px rgba(255,209,102,0.9)); }
.spip.bonus { background: linear-gradient(150deg, #d3b0ff, var(--link)); filter: drop-shadow(0 0 6px rgba(193,139,255,0.9)); }

.fd-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: var(--corner-sm);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.fd-toggle:hover { background: rgba(155,214,234,0.14); color: #fff; }
.fd-toggle.on {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(67,214,197,0.32), rgba(67,214,197,0.1));
  color: #cffff8;
}
.fd-toggle:disabled { opacity: 0.3; cursor: not-allowed; }
.fd-ico { font-size: 14px; }
.fd-count { font-family: var(--font-num); font-size: 10px; opacity: 0.7; }

.hand-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  /* あふれた時に左端が切れて掴めなくならないように safe を付ける */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 24px;
  margin-top: -24px;
  scrollbar-width: none;
}
.hand-wrap::-webkit-scrollbar { display: none; }
/* 手札は扇状に。まっすぐ並べると「並んだボタン」に見える。 */
.hand {
  --w: var(--hand-w);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: calc(var(--hand-w) * 0.14);
  min-height: calc(var(--hand-w) * 1.46);
}
.hand .tcard {
  --w: var(--hand-w);
  margin-right: calc(var(--hand-w) * -0.12);
  transform-origin: bottom center;
  transform: rotate(var(--fan-r, 0deg)) translateY(var(--fan-y, 0px));
}
.hand .tcard:last-child { margin-right: 0; }
.hand .tcard:hover {
  transform: rotate(0deg) translateY(-14px) scale(1.1);
  z-index: 25;
}
.hand .tcard.selected {
  transform: rotate(0deg) translateY(-20px) scale(1.14);
  box-shadow: 0 0 0 3px var(--gold), 0 0 30px -4px rgba(255,209,102,1), 0 14px 26px -10px #000;
  z-index: 30;
}
.hand-empty { align-self: center; font-size: 12px; color: var(--text-faint); }

.commit-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  width: clamp(88px, 10vw, 124px);
  padding: clamp(9px, 1.5vh, 14px) 10px;
  border-radius: var(--corner);
  border: 1px solid rgba(255,209,102,0.5);
  background: linear-gradient(180deg, rgba(255,209,102,0.32), rgba(150,110,20,0.3));
  color: #ffeec2;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.16s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.commit-sub { font-family: var(--font-num); font-size: clamp(8px, 1.05vh, 10px); font-weight: 800; letter-spacing: 0.2em; opacity: 0.6; }
.commit-main { font-size: clamp(13px, 1.8vh, 16px); font-weight: 800; }
.commit-btn.ready { animation: commitGlow 1.6s ease-in-out infinite; }
.commit-btn:not(:disabled):hover { transform: translateY(-3px); border-color: var(--gold); background: linear-gradient(180deg, rgba(255,209,102,0.5), rgba(170,125,25,0.42)); }
.commit-btn:disabled { opacity: 0.28; filter: grayscale(0.8); cursor: not-allowed; animation: none; }
@keyframes commitGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0 rgba(255,209,102,0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 26px -3px rgba(255,209,102,1); }
}

/* 数字の読み方（常時表示） */
.legend {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 5px 0 clamp(5px, 0.9vh, 10px);
  font-size: clamp(9.5px, 1.25vh, 11.5px);
  color: var(--text-faint);
  flex-wrap: wrap;
}
.legend b {
  font-family: var(--font-num);
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 4px;
}
.lg-speed { color: #9df3ea; background: rgba(4,16,26,0.9); border: 1px solid rgba(120,236,221,0.75); }
.lg-power { color: #fff; background: rgba(255,111,97,0.28); border: 1px solid rgba(255,111,97,0.6); }

/* ============================================================
   ティッカー / ログ
   ============================================================ */

.ticker {
  position: absolute;
  z-index: 3;
  left: 50%; bottom: 3px;
  transform: translateX(-50%);
  max-width: 82%;
  font-size: clamp(10px, 1.3vh, 12.5px);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.ticker.show { opacity: 1; }

.log-panel {
  position: absolute;
  z-index: 30;
  top: 8px; right: 8px; bottom: 8px;
  width: clamp(210px, 22vw, 290px);
  display: flex; flex-direction: column;
  border-radius: var(--corner);
  border: 1px solid var(--stroke-2);
  background: rgba(5,17,27,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(.2,.8,.3,1), opacity 0.22s;
}
.log-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 8px 9px 14px;
  font-family: var(--font-num);
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--stroke);
}
.log-body { flex: 1; overflow-y: auto; padding: 8px 12px 12px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.log-body .le { padding: 3px 0 3px 9px; border-left: 2px solid rgba(155,214,234,0.14); }
.log-body .le.hit { color: #ff9d92; border-left-color: var(--accent); }
.log-body .le.good { color: #7cf0ab; border-left-color: var(--hp-bar); }
.log-body .le.gold { color: var(--gold); border-left-color: var(--gold); font-weight: 700; }
.log-body .le.sep { color: var(--text-faint); border-left-color: rgba(67,214,197,0.5); margin-top: 6px; }

/* ============================================================
   解決演出
   ============================================================ */

.resolve-cue {
  position: fixed;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 1700;
  width: min(88vw, 560px);
  padding: 14px 22px 16px;
  border: 1px solid var(--cue, var(--gold));
  border-radius: 20px 5px 20px 5px;
  background: linear-gradient(105deg, rgba(4,15,24,0.97), rgba(16,36,58,0.95));
  box-shadow: 0 0 46px -8px var(--cue, var(--gold));
  text-align: center;
  pointer-events: none;
}
.resolve-cue.hidden { display: none; }
.resolve-cue.show { animation: cueIn 0.85s ease-out both; }
.rc-kicker { font-family: var(--font-num); font-size: 10px; font-weight: 800; letter-spacing: 0.2em; color: var(--cue, var(--gold)); }
.rc-main {
  margin-top: 4px;
  font-size: clamp(19px, 3.8vw, 32px);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.rc-sub { margin-top: 5px; font-size: 13px; color: #c5d8e5; }
.resolve-cue.danger { --cue: var(--accent); }
.resolve-cue.good { --cue: var(--cyan); }
.resolve-cue.gold { --cue: var(--gold); }
@keyframes cueIn {
  0%   { opacity: 0; transform: translate(-50%, -44%) scale(0.92); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  84%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(0.98); }
}

.dmg-float {
  position: fixed;
  z-index: 1750;
  font-family: var(--font-num);
  font-size: clamp(26px, 4vh, 44px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,60,44,1), 3px 3px 0 #6b1200;
  pointer-events: none;
  animation: dmgFloat 1s cubic-bezier(.2,.8,.3,1) forwards;
}
.dmg-float.heal { text-shadow: 0 0 14px rgba(53,224,127,1), 3px 3px 0 #0a3b1e; }
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.4); }
  18%  { opacity: 1; transform: translate(-50%, -16px) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(0.9); }
}

.arena-shake { animation: arenaShake 0.24s linear; }
@keyframes arenaShake {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-5px, 2px); }
  50% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, -1px); }
}

/* ============================================================
   遊び方（3ステップ）
   ============================================================ */

/* ── ロビー（対戦相手を選ぶ） ── */
.tick-lobby { width: min(94vw, 460px); max-height: 90vh; overflow-y: auto; text-align: center; }
.tick-lobby h2 { font-size: clamp(16px, 2.2vw, 20px); margin-bottom: 16px; }
.lobby-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; margin-bottom: 10px; padding: 12px 14px; text-align: left;
}
.lobby-btn b { font-size: 14px; }
.lobby-btn span { font-size: 11px; opacity: 0.8; font-weight: 500; }
.lobby-lead { font-size: 13px; margin-bottom: 10px; color: var(--text-secondary); }
.lobby-note { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; }
.room-code {
  font-family: var(--font-num, monospace);
  font-size: clamp(32px, 9vw, 52px); font-weight: 900; letter-spacing: 0.16em;
  color: var(--gold); margin: 6px 0 4px;
  text-shadow: 0 0 26px rgba(255,209,102,0.5);
}
#join-code {
  width: 100%; padding: 12px; margin-bottom: 12px;
  border: 1px solid var(--stroke); border-radius: 11px 3px 11px 3px;
  background: rgba(0,0,0,0.35); color: var(--gold);
  font-family: var(--font-num, monospace);
  font-size: 30px; font-weight: 900; letter-spacing: 0.2em; text-align: center;
  text-transform: uppercase;
}
#join-code:focus { outline: none; border-color: var(--cyan); }
.lobby-row { display: flex; gap: 8px; justify-content: center; }

.tick-help { width: min(94vw, 640px); max-height: 90vh; overflow-y: auto; position: relative; }
.tick-help h2 { font-size: clamp(17px, 2.4vw, 21px); margin-bottom: 18px; }
.hstep {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--stroke);
}
.hstep-n {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe9a8, var(--gold));
  color: #2a1d00;
  font-family: var(--font-num);
  font-size: 15px; font-weight: 900;
}
.hstep-body b { font-size: 15.5px; display: block; margin-bottom: 5px; }
.hstep-body p { font-size: 13px; line-height: 1.75; color: var(--text-secondary); margin: 0; }
.hstep-body p b { display: inline; font-size: inherit; color: var(--gold); }

.hfig {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: var(--corner-sm);
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--stroke);
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 800;
}
.hfig-card {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(4,16,26,0.9);
  border: 1px solid rgba(120,236,221,0.75);
  color: #9df3ea;
}
.hfig-arrow { color: var(--text-faint); }
.hfig-slot {
  padding: 3px 10px;
  border-radius: 7px 2px 7px 2px;
  border: 1px dashed rgba(155,214,234,0.3);
  color: var(--text-faint);
}
.hfig-slot.dim { opacity: 0.35; text-decoration: line-through; }
.hfig-slot.ok { border-style: solid; border-color: var(--gold); background: rgba(255,209,102,0.18); color: #ffeec2; }
.hfig--clash { font-family: inherit; font-size: 12.5px; }
.hl-warn { color: var(--gold); }
.hfig--econ { justify-content: center; gap: 10px; }
.hfig-econ {
  padding: 3px 12px; border-radius: 999px; font-weight: 800;
  background: rgba(255,255,255,0.06); border: 1px solid var(--stroke);
}
.hfig-econ b { font-family: var(--font-num, inherit); color: var(--gold); font-size: 1.15em; }
.hfig-side { padding: 3px 10px; border-radius: 999px; font-weight: 800; }
.hfig-side.me  { background: rgba(67,214,197,0.22); color: #b6fff5; border: 1px solid rgba(67,214,197,0.5); }
.hfig-side.opp { background: rgba(255,111,97,0.22); color: #ffcdc6; border: 1px solid rgba(255,111,97,0.5); }
.hfig-vs { color: var(--text-faint); font-family: var(--font-num); }
.hfig-res { color: var(--gold); font-weight: 800; }

.btn-block { width: 100%; margin-top: 20px; }
.modal-close {
  position: absolute; top: 8px; right: 10px;
  width: 38px; height: 38px;
  border: 0; background: transparent;
  color: var(--text-secondary); font-size: 28px; line-height: 1; cursor: pointer;
}
.modal-close:hover { color: var(--accent); }

/* ============================================================
   決着
   ============================================================ */

.tick-over {
  position: fixed; inset: 0;
  background: rgba(1,6,11,0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  z-index: 2500;
}
.tick-over.hidden { display: none; }
.over-content { text-align: center; padding: 40px 24px; }
.over-result {
  font-family: var(--font-num);
  font-size: clamp(42px, 9vw, 88px);
  font-weight: 900; letter-spacing: 0.06em;
  margin-bottom: 12px;
  animation: overIn 0.9s cubic-bezier(.2,.9,.3,1.2);
}
.over-result.win  { color: var(--gold); text-shadow: 0 0 50px rgba(255,209,102,0.8); }
.over-result.lose { color: var(--accent); text-shadow: 0 0 50px rgba(255,111,97,0.7); }
.over-result.draw { color: var(--text-secondary); }
.over-reason { font-size: 15px; color: var(--text-secondary); margin-bottom: 28px; }
.over-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes overIn {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); filter: blur(8px); }
  60%  { opacity: 1; transform: scale(1.12) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   レスポンシブ：縦持ち
   ============================================================ */

@media (max-width: 900px), (orientation: portrait) {
  .tick-arena {
    --tcard-w: clamp(36px, min(11.5vw, 6.2vh), 72px);
    --hand-w:  clamp(58px, min(16.5vw, 9.2vh), 98px);
    --side-w:  30px;
    --gap: 3px;
    padding: 0 5px env(safe-area-inset-bottom);
  }
  .thud { flex-wrap: wrap; padding: 5px; gap: 5px; }
  .thud-side { flex: 1 1 42%; }
  .thud-center { order: 3; flex: 1 1 100%; text-align: center; }
  .thud-tools { order: 2; }
  .hpbar { min-width: 40px; }
  .tl-side { font-size: 9px; padding: 4px 0; letter-spacing: -0.04em; }
  .tcard-name { display: none; }
  .tcard-eff { font-size: calc(var(--w, var(--tcard-w)) * 0.14); }
  .slot.legal::after { font-size: 8px; padding: 0 4px; }
  .colhead-mark { font-size: 7.5px; padding: 0 4px; }
  .guide { padding: 7px 10px; gap: 7px; }
  .guide-hint { display: none; }
  /* 縦画面では手札を1行まるごと使う。左右に部品を並べると手札が潰れる。 */
  .tdock { --pile-w: 30px; flex-wrap: wrap; align-items: center; gap: 7px; padding-bottom: 14px; }
  .dock-left { order: 1; flex-direction: row; align-items: center; gap: 7px; padding-bottom: 0; }
  #my-deck-pile { order: 2; }
  #my-discard-pile { order: 3; }
  .commit-btn { order: 4; margin-left: auto; width: 88px; padding: 7px 6px; }
  .hand-wrap { order: 5; flex: 1 1 100%; padding-top: 20px; margin-top: -20px; }
  .opp-zone { --pile-w: 26px; gap: 12px; padding-bottom: 8px; }
  .slots-label { display: none; }
  .fd-txt { display: none; }
  .commit-main { font-size: 12.5px; }
  .commit-sub { display: none; }
  .legend { gap: 10px; font-size: 9px; }
  .log-panel { top: auto; left: 6px; right: 6px; bottom: 6px; width: auto; height: 48%; transform: translateY(calc(100% + 16px)); }
  .log-panel.open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}