/* =====================================================================
 * planc.css — プランC「カントク！」 UIスタイル（縦持ち・子供向けトーン）
 *
 * 仕様: docs/13-planc-detail-spec.md §11（ビジュアル/UI指針）。
 *   - 390x844基準 / 320x568対応・100dvh・safe-area。
 *   - 論理3層: ①ライブ層(上40%) ②クロック層(中20%) ③采配層(下40%)（§11.3）。
 *   - 演出は transform / opacity のみ（§11.3・AC-23）。
 *   - 配色トークンは §11.2（balance.js の COLOR_* と1:1）。
 *   - 旧 css/style.css は使わない（プランC専用）。
 * ===================================================================== */

/* ---- 配色トークン（§11.2） ---- */
:root {
  --red:#FF4D5E; --blue:#3DA5FF; --green:#2FCB6E;
  --red-deep:#C8313F; --blue-deep:#1F73C8; --green-deep:#1E9E52;
  --pitch:#1C7C3E; --pitch-line:#2BA055;
  --bg:#1C2333; --bg2:#262F45;
  --panel:#FFFFFF; --ink:#1C2333;
  --accent:#FFD23F;   /* 必殺・はやぎり 黄金 */
  --alert:#FF6B81;    /* クロック残8s 脈動赤 */
  --shadow: 0 6px 0 rgba(0,0,0,.25);
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body {
  height:100%;
  background:var(--bg);
  color:var(--panel);
  font-family: system-ui, "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Hiragino Sans", sans-serif;
  font-weight:700;
  /* iOS既定動作抑止（テキスト選択・コールアウト） */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
}

#app {
  position:relative;
  width:100%;
  height:100dvh; min-height:100vh;     /* 100dvhフォールバック */
  max-width:480px; margin:0 auto;
  overflow:hidden;
  /* safe-area（ノッチ・ホームバー） */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* iOS既定動作抑止: viewport の user-scalable=no とは別軸。
     JS preventDefault だけでは Safari のパン/ズーム/長押しを完全抑止できないため CSS でも止める。 */
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}

/* タッチ操作領域は touch-action:none を必須に（指の微小移動でブラウザのパン/ズームが
   先取りして Closing Ring のタップ時刻が遅延→タイミング判定がぶれるのを防ぐ・§5/§12.1）。 */
.ck-live, .ck-cards, .ck-cheer-btn {
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}

/* ---- 画面切替（タイトル / 試合 / リザルト 等） ---- */
.ck-screen { position:absolute; inset:0; display:none; flex-direction:column; }
.ck-screen.ck-active { display:flex; }

/* =====================================================================
 * タイトル画面
 * ===================================================================== */
#ck-title {
  align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(120% 90% at 50% 30%, #2C3650 0%, var(--bg) 70%);
  text-align:center; padding:24px;
}
.ck-logo {
  font-size:clamp(40px, 14vw, 64px); line-height:1.05;
  color:var(--accent);
  text-shadow: 0 4px 0 var(--red-deep), 0 0 24px rgba(255,210,63,.4);
  letter-spacing:2px;
}
.ck-logo small { display:block; font-size:.34em; color:var(--panel); margin-top:8px; letter-spacing:1px; }
.ck-sub { font-size:15px; line-height:1.6; opacity:.9; max-width:300px; }
.ck-hint { font-size:12px; opacity:.6; }
.ck-hint code { background:rgba(255,255,255,.1); padding:1px 5px; border-radius:5px; }

/* 大きく丸い明るいボタン（共通） */
.ck-btn {
  appearance:none; border:0; cursor:pointer;
  font-family:inherit; font-weight:800;
  color:var(--ink); background:var(--accent);
  border-radius:999px; padding:16px 34px;
  font-size:20px; box-shadow:var(--shadow);
  transition: transform .08s;
}
.ck-btn:active { transform: translateY(3px) scale(.98); }
.ck-btn--big { font-size:24px; padding:20px 44px; }
.ck-btn--blue { background:var(--blue); color:#fff; }
.ck-btn--ghost { background:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.ck-pulse { animation: ckPulse 1.1s ease-in-out infinite; }
@keyframes ckPulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.7; transform:scale(.96);} }

.ck-title-entries { display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; }
.ck-title-sublinks { display:flex; gap:10px; margin-top:6px; }
.ck-title-sublinks .ck-btn { font-size:14px; padding:10px 18px; }

/* =====================================================================
 * 試合画面 — 論理3層
 * ===================================================================== */
#ck-match { display:none; }
#ck-match.ck-active { display:grid; grid-template-rows: 40fr 20fr 40fr; height:100%; }

/* ---- ① ライブ層（上40%） ---- */
.ck-live {
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, var(--pitch) 0 11%, var(--pitch-line) 11% 12%),
    var(--pitch);
  border-bottom:4px solid rgba(0,0,0,.25);
}
/* ゴール前（奥=2点）ゾーンの明るい芝 */
.ck-zone-gold {
  position:absolute; top:0; left:0; right:0; height:34%;
  background:linear-gradient(180deg, rgba(255,210,63,.35), transparent);
  pointer-events:none;
}
.ck-zone-label {
  position:absolute; top:6px; left:8px;
  font-size:11px; background:rgba(0,0,0,.35); padding:3px 8px; border-radius:8px;
}
.ck-goal-mouth {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:96px; height:8px; background:#fff; border-radius:0 0 6px 6px; opacity:.85;
}

/* 選手/ボールの簡易トークン */
.ck-token {
  position:absolute; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  transform: translate(-50%,-50%);
  transition: left .5s ease, top .5s ease;
}
.ck-token--red { background:var(--red); }
.ck-token--blue { background:var(--blue); }
.ck-token--green { background:var(--green); }
.ck-token--cpu { background:#555E72; }
.ck-token--ball { width:24px; height:24px; background:#fff; color:#1C2333; font-size:15px; }
/* キーマン強調オーラ（opacityのみ） */
.ck-token--keyman::after {
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:3px solid var(--accent); opacity:.85;
  animation: ckAura 1s ease-in-out infinite;
}
@keyframes ckAura { 0%,100%{ opacity:.3; } 50%{ opacity:.9; } }

/* 実況テロップ */
.ck-ticker {
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(12,16,28,.82);
  color:#fff; font-size:15px; line-height:1.4;
  padding:9px 12px; min-height:44px;
  display:flex; align-items:center;
  border-top:2px solid var(--accent);
}
.ck-ticker--in { animation: ckTickerIn .28s ease; }
@keyframes ckTickerIn { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* 相性「+2」バッジ（3重符号化の数字成分・§11.2） */
.ck-color-badge {
  position:absolute; top:8px; right:8px;
  background:var(--accent); color:var(--ink);
  font-size:18px; font-weight:900; border-radius:12px;
  padding:4px 12px; box-shadow:var(--shadow);
  opacity:0; transform:scale(.6);
}
.ck-color-badge--show { animation: ckBadgePop .5s ease forwards; }
@keyframes ckBadgePop { 0%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.25)} 100%{opacity:1;transform:scale(1)} }

/* Closing Ring（ACTION中・中央固定） */
.ck-ring-wrap {
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; pointer-events:none;
}
.ck-ring-wrap.ck-on { display:flex; }
.ck-ring-target, .ck-ring-guide {
  position:absolute; left:50%; top:50%;
  width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
}
.ck-ring-target { border:4px solid rgba(255,255,255,.85); }
.ck-ring-guide {
  border:6px solid var(--accent);
  /* JSが transform:scale() でR_START→R_ENDへ縮める（半径=表示のみ） */
  transform: scale(2.4);
}
.ck-ring-guide--perfect { border-color:#fff; box-shadow:0 0 18px var(--accent); }
.ck-ring-tap-grade {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6);
  font-size:30px; font-weight:900; color:var(--accent); opacity:0;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.ck-ring-tap-grade--show { animation: ckGrade .55s ease forwards; }
@keyframes ckGrade { 0%{opacity:0;transform:translate(-50%,-50%) scale(.5)} 40%{opacity:1;transform:translate(-50%,-50%) scale(1.3)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)} }

/* 中央バナー（ゴール！等の特大演出） */
.ck-banner {
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(.5);
  font-size:34px; font-weight:900; color:var(--accent);
  text-shadow:0 3px 0 var(--red-deep); opacity:0; text-align:center; white-space:nowrap;
}
.ck-banner--show { animation: ckBanner .9s ease forwards; }
@keyframes ckBanner { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 25%{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(1)} }

/* ---- ② クロック層（中20%） ---- */
.ck-hud {
  background:var(--bg2);
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  gap:8px; padding:6px 12px;
  border-bottom:3px solid rgba(0,0,0,.25);
}
.ck-clock {
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.ck-clock-num {
  font-size:clamp(34px,11vw,48px); font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:1px; color:#fff;
  text-align:center;
}
.ck-clock--alert .ck-clock-num { color:var(--alert); animation: ckAlert .5s ease-in-out infinite; }
@keyframes ckAlert { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
/* 20秒ショットクロックバー */
.ck-clock-bar { height:10px; border-radius:6px; background:rgba(255,255,255,.15); overflow:hidden; }
.ck-clock-bar > i {
  display:block; height:100%; width:100%; border-radius:6px;
  background:var(--green); transform-origin:left center;
  /* JSが transform:scaleX() で残量表示（width変更でなくtransform・AC-23） */
  transition: transform .12s linear, background-color .3s;
}
.ck-clock--mid .ck-clock-bar > i { background:var(--accent); }
.ck-clock--alert .ck-clock-bar > i { background:var(--alert); }

.ck-hud-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.ck-score { font-size:22px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
/* 気合いゲージ ●●●○○○（6目盛） */
.ck-gauge { display:flex; gap:3px; }
.ck-gauge i {
  width:11px; height:11px; border-radius:50%;
  background:rgba(255,255,255,.2); transition: background-color .25s, transform .25s;
}
.ck-gauge i.on { background:var(--accent); }
.ck-gauge i.ult { background:var(--red); transform:scale(1.12); }  /* 必殺解禁3目盛 */
.ck-gauge-label { font-size:10px; opacity:.7; }

/* 応援ゲージ＋応援ボタン */
.ck-cheer-row { display:flex; align-items:center; gap:6px; }
.ck-cheer-bar { width:60px; height:7px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; }
.ck-cheer-bar > i { display:block; height:100%; width:100%; background:var(--blue); transform-origin:left; transform:scaleX(0); transition:transform .15s; }
.ck-cheer-bar.ck-ready > i { background:var(--accent); }
.ck-cheer-btn {
  appearance:none; border:0; cursor:pointer; font-family:inherit;
  background:var(--blue); color:#fff; font-weight:800; font-size:13px;
  border-radius:999px; padding:7px 14px; box-shadow:0 3px 0 var(--blue-deep);
}
.ck-cheer-btn:active { transform:translateY(2px); }
.ck-cheer-btn.ck-ready { background:var(--accent); color:var(--ink); box-shadow:0 3px 0 #C89A1F; }

/* ---- ③ 采配層（下40%） ---- */
.ck-tactics {
  background:linear-gradient(180deg, #2A3450, var(--bg));
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:6px;
}
.ck-tactics-guide { text-align:center; font-size:13px; min-height:18px; opacity:.9; }
.ck-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:1; min-height:0; }

/* 采配カード（顔+色枠+効果アイコン） */
.ck-card {
  position:relative; border-radius:14px; overflow:hidden;
  background:var(--panel); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 4px;
  border:4px solid #ccc; cursor:pointer;
  box-shadow:var(--shadow);
  /* せり上がり初期位置（DEALでtranslateY解除・AC-23 transformのみ） */
  transform: translateY(120%);
  opacity:0;
}
.ck-card.ck-dealt { animation: ckDeal .42s cubic-bezier(.2,.8,.3,1.2) forwards; }
@keyframes ckDeal { from{ transform:translateY(120%); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.ck-card--red { border-color:var(--red); }
.ck-card--blue { border-color:var(--blue); }
.ck-card--green { border-color:var(--green); }
.ck-card-face { font-size:30px; line-height:1; }
.ck-card-icon { font-size:22px; }
.ck-card-label { font-size:14px; font-weight:900; }
.ck-card-name { font-size:10px; opacity:.7; }
.ck-card-color-dot { position:absolute; top:5px; left:5px; width:14px; height:14px; border-radius:50%; }
.ck-card-color-dot--red { background:var(--red); } .ck-card-color-dot--blue { background:var(--blue); } .ck-card-color-dot--green { background:var(--green); }
/* shoot（決定力）= ★メーター。数字でなく ★の数で派手さを補助表示（§11.1）。 */
.ck-card-shoot { position:absolute; top:3px; right:5px; font-size:9px; letter-spacing:-1px; color:var(--accent, #E8B923); opacity:.85; white-space:nowrap; pointer-events:none; }
/* 攻めるGK 警告 */
.ck-card-warn { position:absolute; bottom:4px; right:5px; font-size:13px; }
/* 必殺カード（黄金フレーム） */
.ck-card--special { border-color:var(--accent); box-shadow:0 0 14px rgba(255,210,63,.6), var(--shadow); }
.ck-card--disabled { opacity:.4; filter:grayscale(.6); pointer-events:none; }
/* 選択中→上スワイプで切る誘導 */
.ck-card--armed { transform:translateY(-10px) scale(1.04); border-style:dashed; }
.ck-card--cut { animation: ckCut .35s ease forwards; }
@keyframes ckCut { to{ transform:translateY(-160%) scale(.7); opacity:0; } }
.ck-swipe-hint { font-size:11px; color:var(--accent); text-align:center; min-height:14px; }

/* はやぎり発光（切った瞬間のスキャン風・opacityのみ） */
.ck-early-flash {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,210,63,.5), transparent);
  opacity:0;
}
.ck-early-flash--on { animation: ckEarly .5s ease; }
@keyframes ckEarly { 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }

/* =====================================================================
 * ハーフタイム / リザルト / オーバーレイ
 * ===================================================================== */
.ck-overlay {
  position:absolute; inset:0; z-index:20;
  background:rgba(12,16,28,.92);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:28px;
}
.ck-overlay.ck-on { display:flex; animation: ckTickerIn .3s ease; }
.ck-overlay h2 { font-size:30px; color:var(--accent); }
.ck-overlay .ck-big-score { font-size:54px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
.ck-overlay p { font-size:15px; line-height:1.6; max-width:300px; }
.ck-mvp { font-size:17px; color:var(--accent); }
.ck-reward-card {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--panel); color:var(--ink); border-radius:14px; padding:12px 18px;
  border:4px solid var(--accent); box-shadow:0 0 18px rgba(255,210,63,.5);
  transform:scale(.4); opacity:0;
}
.ck-reward-card.ck-pop { animation: ckBadgePop .6s ease forwards; }
.ck-reward-card .face { font-size:38px; }

/* 三すくみ図（チュートリアル試合2・§10.4） */
.ck-sankan { display:flex; gap:8px; font-size:20px; align-items:center; }

/* =====================================================================
 * 小画面対応（320x568）
 * ===================================================================== */
@media (max-height:600px) {
  .ck-clock-num { font-size:30px; }
  .ck-card-face { font-size:24px; }
  .ck-card-label { font-size:12px; }
  .ck-ticker { font-size:13px; min-height:38px; }
}
@media (max-width:340px) {
  .ck-card-name { display:none; }
}

/* =====================================================================
 * メタゲーム: 図鑑（ずかん）/ チーム編成（へんせい）/ 確定排出演出（§7）
 *   演出は transform / opacity のみ（AC-23）。子供が嬉しい収集感。
 * ===================================================================== */
.ck-title-dexcount { font-size:12px; opacity:.7; margin-top:8px; }

/* メタ画面はスクロール可能（グリッドが縦に伸びる） */
.ck-meta-screen { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 12px 28px; }
.ck-meta-screen.ck-active { display:block; }

/* ---- 図鑑ヘッダ・進捗 ---- */
.ck-dex-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ck-dex-back { font-size:13px; padding:8px 14px; }
.ck-dex-title { flex:1; font-size:20px; font-weight:900; color:var(--accent); }
.ck-dex-title small { display:block; font-size:11px; color:var(--panel); opacity:.75; }
.ck-dex-dust { font-size:13px; background:rgba(255,210,63,.18); color:var(--accent);
  padding:6px 10px; border-radius:10px; white-space:nowrap; }
.ck-dex-progress { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.ck-dex-chip { font-size:12px; padding:5px 10px; border-radius:10px; background:var(--bg2);
  border:2px solid transparent; }
.ck-dex-chip--red { border-color:var(--red); } .ck-dex-chip--blue { border-color:var(--blue); } .ck-dex-chip--green { border-color:var(--green); }
.ck-dex-chip--done { background:var(--accent); color:var(--ink); }

/* ---- 図鑑グリッド（3列・所持/未所持） ---- */
.ck-dex-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ck-dex-cell { position:relative; background:var(--panel); color:var(--ink);
  border-radius:12px; border:4px solid #ddd; padding:8px 4px 6px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-height:96px; justify-content:center; cursor:pointer;
  transition: transform .12s; }
.ck-dex-cell:active { transform:scale(.95); }
.ck-dex-cell--red { border-color:var(--red); } .ck-dex-cell--blue { border-color:var(--blue); } .ck-dex-cell--green { border-color:var(--green); }
.ck-dex-cell-rarity { font-size:10px; color:var(--accent); text-shadow:0 1px 0 rgba(0,0,0,.2); letter-spacing:-1px; }
.ck-dex-cell-face { font-size:30px; line-height:1; }
.ck-dex-cell-name { font-size:10px; font-weight:900; text-align:center; line-height:1.1; }
.ck-dex-cell-count { position:absolute; bottom:3px; right:5px; font-size:11px;
  background:var(--ink); color:#fff; border-radius:8px; padding:0 5px; }
.ck-dex-cell-new { position:absolute; top:-6px; right:-6px; font-size:9px; font-weight:900;
  background:var(--alert); color:#fff; border-radius:8px; padding:2px 5px; transform:rotate(8deg);
  animation: ckPulse 1.1s ease-in-out infinite; }
/* 未所持＝シルエット＋？ */
.ck-dex-cell--locked { background:var(--bg2); color:#7a8298; border-color:#3a4258; }
.ck-dex-cell--locked .ck-dex-cell-face { opacity:.45; filter:grayscale(1); }
/* キラ箔（プリズム）= 重複所持 */
.ck-dex-cell--kira { box-shadow:0 0 14px rgba(255,210,63,.55), inset 0 0 18px rgba(61,165,255,.25); }
.ck-dex-cell--kira .ck-dex-cell-face { animation: ckKira 2.4s linear infinite; }
@keyframes ckKira { 0%{opacity:1} 50%{opacity:.75} 100%{opacity:1} }

/* ---- カード詳細モーダル ---- */
.ck-card-detail { z-index:40; }
.ck-card-detail-box { position:relative; background:var(--panel); color:var(--ink);
  border-radius:18px; border:5px solid var(--accent); padding:18px 16px; max-width:330px;
  width:100%; text-align:left; max-height:86vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px; }
.ck-card-detail-box--red { border-color:var(--red); } .ck-card-detail-box--blue { border-color:var(--blue); } .ck-card-detail-box--green { border-color:var(--green); }
.ck-card-detail-close { position:absolute; top:6px; right:6px; font-size:14px; padding:6px 11px; }
.ck-card-detail-head { display:flex; align-items:center; gap:12px; }
.ck-card-detail-face { font-size:48px; line-height:1; }
.ck-card-detail-name { font-size:19px; font-weight:900; line-height:1.15; }
.ck-card-detail-name small { display:block; font-size:11px; opacity:.7; }
.ck-card-detail-sub { font-size:12px; opacity:.8; margin-top:3px; }
.ck-card-detail-locked { text-align:center; font-size:14px; line-height:1.7; padding:18px 0; opacity:.85; }
.ck-card-detail-locked small { display:block; margin-top:8px; font-size:11px; color:var(--blue-deep); }
.ck-card-detail-stats { display:flex; flex-wrap:wrap; gap:6px; }
.ck-stat-chip { display:flex; flex-direction:column; background:#f1f3f8; border-radius:9px; padding:5px 9px; }
.ck-stat-chip-label { font-size:9px; opacity:.6; }
.ck-stat-chip-val { font-size:14px; font-weight:900; }
.ck-card-detail-tri { display:flex; flex-direction:column; gap:3px; font-size:12px; }
.ck-tri-win { color:var(--green-deep); font-weight:900; }
.ck-tri-lose { color:var(--red-deep); opacity:.85; }
.ck-card-detail-quote { font-size:13px; font-style:italic; color:var(--blue-deep); }
.ck-card-detail-desc { font-size:12px; line-height:1.6; opacity:.9; }
.ck-card-detail-badge { font-size:12px; line-height:1.5; background:#eef4ff; color:var(--blue-deep);
  border-radius:10px; padding:8px 10px; border-left:4px solid var(--blue); }
.ck-card-detail-special { font-size:13px; font-weight:900; color:#B07A00;
  background:rgba(255,210,63,.2); border-radius:10px; padding:7px 10px; }
.ck-card-detail-special small { display:block; font-size:10px; font-weight:700; opacity:.8; }
.ck-card-detail-first { font-size:11px; opacity:.6; }

/* ---- チーム編成 ---- */
.ck-team-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ck-team-head .ck-btn { font-size:13px; padding:8px 14px; }
.ck-team-title { flex:1; font-size:20px; font-weight:900; color:var(--accent); }
.ck-team-deck { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.ck-team-slot { position:relative; background:var(--panel); color:var(--ink); border-radius:10px;
  border:3px solid #ddd; padding:8px 2px 4px; display:flex; flex-direction:column; align-items:center;
  gap:1px; min-height:72px; justify-content:center; cursor:pointer; transition:transform .1s; }
.ck-team-slot:active { transform:scale(.94); }
.ck-team-slot--red { border-color:var(--red); } .ck-team-slot--blue { border-color:var(--blue); } .ck-team-slot--green { border-color:var(--green); }
.ck-team-slot--gk { box-shadow:0 0 0 2px var(--accent) inset; }
.ck-team-slot-face { font-size:24px; }
.ck-team-slot-name { font-size:9px; font-weight:900; text-align:center; line-height:1.05; }
.ck-team-slot-cost { position:absolute; bottom:2px; right:4px; font-size:9px; opacity:.7; }
.ck-team-slot-gkbadge { position:absolute; top:-5px; left:-3px; font-size:8px; font-weight:900;
  background:var(--accent); color:var(--ink); border-radius:6px; padding:1px 4px; }
.ck-team-status { margin:6px 0 10px; }
.ck-team-status-line { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; padding:6px 0; }
.ck-team-stat { white-space:nowrap; }
.ck-team-status-line--ok span { color:var(--green); }
.ck-team-status-line--ng span { color:var(--alert); }
.ck-team-status-reasons { font-size:11px; color:var(--alert); }
.ck-team-status-ok { font-size:12px; color:var(--green); font-weight:900; }
.ck-team-ctrl { display:flex; gap:8px; margin-bottom:8px; }
.ck-team-ctrl .ck-btn { flex:1; font-size:13px; padding:11px 8px; }
.ck-team-save { width:100%; margin-bottom:12px; font-size:18px; }
.ck-btn--disabled { opacity:.4; pointer-events:none; }
.ck-team-pool-title { font-size:12px; opacity:.8; margin-bottom:6px; }
.ck-team-pool { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.ck-pool-chip { position:relative; background:var(--bg2); border-radius:10px; border:3px solid #3a4258;
  padding:7px 3px 5px; display:flex; flex-direction:column; align-items:center; gap:1px;
  min-height:74px; justify-content:center; cursor:pointer; transition:transform .1s; }
.ck-pool-chip:active { transform:scale(.94); }
.ck-pool-chip--red { border-color:var(--red); } .ck-pool-chip--blue { border-color:var(--blue); } .ck-pool-chip--green { border-color:var(--green); }
.ck-pool-chip-face { font-size:22px; }
.ck-pool-chip-name { font-size:9px; font-weight:900; text-align:center; line-height:1.05; }
.ck-pool-chip-meta { font-size:9px; color:var(--accent); opacity:.85; }
.ck-pool-chip-gk { position:absolute; top:-5px; left:-3px; font-size:8px; font-weight:900;
  background:var(--accent); color:var(--ink); border-radius:6px; padding:1px 4px; }
/* デッキ内＝チェック表示 */
.ck-pool-chip--in { box-shadow:0 0 0 3px var(--accent) inset; opacity:.7; }
.ck-pool-chip--in::after { content:'✔'; position:absolute; top:3px; right:5px; font-size:12px; color:var(--accent); }
/* 推し被り or 無所持＝選べない */
.ck-pool-chip--clash { opacity:.35; filter:grayscale(.6); }

/* ---- 確定排出演出（パック開封→1枚せり出し） ---- */
.ck-pack-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
.ck-pack { width:120px; height:150px; border-radius:14px; background:var(--bg2);
  border:4px solid var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:48px; cursor:pointer; transition:transform .2s; }
.ck-pack--red { box-shadow:0 0 18px rgba(255,77,94,.5); }
.ck-pack--blue { box-shadow:0 0 18px rgba(61,165,255,.5); }
.ck-pack--green { box-shadow:0 0 18px rgba(47,203,110,.5); }
.ck-pack:active { transform:scale(.96); }
.ck-pack-front { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ck-pack-label { font-size:11px; font-weight:900; color:var(--accent); }
.ck-pack--open { animation: ckPackOpen .45s ease forwards; }
@keyframes ckPackOpen { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(0); opacity:0; } }
.ck-pack-card { background:var(--panel); color:var(--ink); border-radius:14px;
  border:5px solid var(--accent); padding:12px 16px; display:flex; flex-direction:column;
  align-items:center; gap:3px; transform:scale(.3); opacity:0; }
.ck-pack-card--red { border-color:var(--red); } .ck-pack-card--blue { border-color:var(--blue); } .ck-pack-card--green { border-color:var(--green); }
.ck-pack-card--shine { box-shadow:0 0 22px rgba(255,210,63,.7); }
.ck-pack-card--in { animation: ckPackCardIn .5s cubic-bezier(.2,.8,.3,1.3) forwards; }
@keyframes ckPackCardIn { 0%{transform:scale(.3) translateY(20px); opacity:0;} 100%{transform:scale(1) translateY(0); opacity:1;} }
.ck-pack-card-rarity { font-size:12px; color:var(--accent); font-weight:900; letter-spacing:-.5px; }
.ck-pack-card-face { font-size:46px; }
.ck-pack-card-name { font-size:14px; font-weight:900; text-align:center; }
.ck-pack-card-foot { font-size:11px; opacity:.75; }
.ck-pack-card-foot--new { color:var(--green-deep); font-weight:900; opacity:1; }

@media (max-height:600px) {
  .ck-dex-cell { min-height:84px; }
  .ck-dex-cell-face { font-size:24px; }
}