/* 新ゲームの入口（app/app.html）。固定ステージ 1280×720 を縮尺して表示する。
 * 大きさ・傾きは、下の変数で調整できる（スマホ実機を見ながら変える場所）。
 */
:root {
  --bg: #0b1226;
  --panel: #16213f;
  --gold: #e3bd72;
  --text: #f4ecdc;
  --p1: #4aa3ff;          /* プレイヤー1の色 */
  --p2: #ff6b5e;          /* プレイヤー2の色 */

  --tilt: 37deg;          /* 盤面の傾き（大きいほど寝る） */
  --persp: 1500px;        /* 奥行きの強さ（小さいほど遠近が強い） */
  --persp-y: 100%;        /* 視点の高さ（100% = 手前の端の高さ） */
  --card-w: 78px;         /* 盤面のカード */
  --card-h: 109px;
  --row-h: 116px;         /* 盤面の1列の高さ */
  --center-h: 118px;      /* 中央の帯（マジック／アタック／バトル）の高さ */
  --hand-w: 84px;         /* 下側の手札 */
  --hand-h: 118px;
  --mini-w: 54px;         /* 上側の手札 */
  --mini-h: 76px;
}
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;                 /* 拡大・スクロールを止める（操作はタップ中心） */
  overscroll-behavior: none;          /* 引っぱって更新、を止める */
  -webkit-touch-callout: none;        /* 長押しのメニューを出さない（長押しは拡大表示に使う） */
  -webkit-tap-highlight-color: transparent;
}
#stage {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #24407a 0%, #14254d 55%, #0b1226 100%);
}
#screen, #overlay, #toast-layer { position: absolute; inset: 0; }
#overlay, #toast-layer { pointer-events: none; }
#overlay { z-index: 50; }
#toast-layer { z-index: 60; }
#toast-layer.on { pointer-events: auto; }

/* ピクセルアートは、拡大・変形しても滲ませない */
img { image-rendering: pixelated; image-rendering: crisp-edges; -webkit-user-drag: none; display: block; }
canvas { display: block; -webkit-user-drag: none; }   /* カードの絵は canvas（src/ui/cardrender.js）。縮小しても、にじまない */
/* カードのタイトル用の書体（SIL Open Font License。fonts/OFL.txt）。なければ、代わりの書体で描く */
@font-face { font-family: 'Cinzel Decorative'; src: url('../fonts/CinzelDecorative-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }
.p1 { --pc: var(--p1); }
.p2 { --pc: var(--p2); }

.btn {
  font: inherit; font-size: 20px; line-height: 1; color: var(--text);
  background: #2a3a66; border: 2px solid #8fa3d6; border-radius: 8px;
  padding: 11px 15px; cursor: pointer; white-space: nowrap;
}
.btn.main { background: var(--gold); color: #241a10; border-color: #fff0c8; font-weight: bold; }
.btn.phase { font-size: 23px; padding: 13px 20px; }      /* フェイズを進めるボタンは大きく */
.btn.card-action { background: #1f8a3a; border-color: #b6f5c2; font-weight: bold; font-size: 22px; padding: 13px 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* 縦持ちの案内（縦持ちの間だけ表示。ステージは隠す） */
#rotate-notice {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: var(--bg); color: var(--text);
  align-items: center; justify-content: center; flex-direction: column;
  text-align: center; font-size: 22px; line-height: 1.8;
}
#rotate-notice .icon { font-size: 64px; display: inline-block; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
html.portrait #rotate-notice { display: flex; }
html.portrait #stage { visibility: hidden; }

/* ---- 読み込み画面 ---- */
#loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; font-size: 28px;
}
#loading .bar { width: 480px; height: 14px; border: 2px solid var(--gold); border-radius: 8px; overflow: hidden; }
#loading .bar > div { height: 100%; width: 0; background: var(--gold); transition: width .1s; }
#loading .warn { color: #ff9a8a; font-size: 18px; }

/* ================= トップ画面 ================= */
.screen-top { display: flex; align-items: center; justify-content: center; }
.top-box { text-align: center; }
.top-title { font-family: 'Cinzel Decorative', serif; font-size: 66px; letter-spacing: 6px; color: var(--gold); font-weight: 900; text-shadow: 0 4px 0 #3a2a12; margin-top: -4px; }
.top-sub { font-size: 20px; color: #c9d3ee; margin: 0 0 16px; }
.top-mid { display: flex; justify-content: center; gap: 56px; }
.top-group { width: 470px; box-sizing: border-box; padding: 10px 18px 14px; border: 2px solid #8fa3d6; border-radius: 14px; background: rgba(6,10,24,.45);
  display: flex; flex-direction: column; gap: 10px; }
.top-group-title { font-size: 16px; color: #c9d3ee; text-align: left; letter-spacing: 2px; }
.menu-item {
  font: inherit; width: 100%; box-sizing: border-box; padding: 14px 22px; font-size: 26px; color: var(--text);
  background: #22335f; border: 3px solid var(--gold); border-radius: 12px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.menu-item.disabled { opacity: .45; border-color: #7f8db5; cursor: not-allowed; }
.menu-item .soon { font-size: 15px; color: #d6dcf0; border: 1px solid #8f9bc0; border-radius: 6px; padding: 2px 8px; margin-left: 10px; white-space: nowrap; }
.top-decks { font-size: 17px; color: #c9d3ee; text-align: left; margin: -2px 4px; }
.top-code-input {
  font: inherit; font-size: 28px; width: 150px; text-align: center; letter-spacing: 8px; padding: 6px 4px; box-sizing: border-box;
  color: var(--text); background: #0d1630; border: 2px solid #8fa3d6; border-radius: 8px;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; text-transform: uppercase;
}
.top-code-input:focus { outline: none; border-color: var(--gold); }
.top-code-hint { font-size: 15px; color: #aab6d8; margin-top: 6px; min-height: 18px; }
.top-code-hint.warn { color: #ffb86b; }
.top-tools { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.fs-btn { margin-top: 12px; font-size: 16px; padding: 8px 14px; }
.top-tools .fs-btn { margin-top: 0; }
.install-steps { white-space: pre-line; text-align: left; line-height: 1.7; max-width: 560px; }

/* ================= デッキ編集・相手のデッキを選ぶ（同じ部品） ================= */
.screen-deckEdit { box-sizing: border-box; }
.ds-panel { left: 4px; }                                  /* 左: カード詳細（試合画面と同じ部品） */
.ds-main { position: absolute; left: 196px; top: 0; width: 1080px; height: 720px; padding: 12px 8px; box-sizing: border-box; }
.ds-title { font-size: 34px; color: var(--gold); text-align: center; margin-bottom: 10px; }
.ds-col { height: 566px; border: 3px solid var(--pc); border-radius: 12px; padding: 12px 16px; box-sizing: border-box; background: rgba(6,10,24,.55); overflow: hidden; }
.ds-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }
.ds-player { font-size: 24px; font-weight: bold; color: var(--pc); }
.ds-sub { font-size: 18px; color: #c9d3ee; }
.ds-options { display: flex; gap: 10px; }
.ds-deck.disabled { opacity: .45; border-style: dashed; cursor: not-allowed; }
.ds-deck { font: inherit; flex: 1; font-size: 20px; padding: 12px 8px; color: var(--text); background: #22335f; border: 2px solid #8fa3d6; border-radius: 8px; cursor: pointer; }
.ds-deck.on { background: var(--pc); color: #10151c; border-color: #fff; font-weight: bold; }
.ds-level { align-items: center; margin-bottom: 8px; }
.ds-level-label { font-size: 18px; color: #c9d3ee; white-space: nowrap; }
.ds-level-note { font-size: 15px; margin: -2px 0 8px; }
.ds-count { margin: 8px 0; font-size: 18px; color: #c9d3ee; }
.ds-count.bad { color: #ff9a8a; }
.ds-cards { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ds-card.sel :is(img, canvas) { box-shadow: 0 0 0 3px #fff7d0, 0 0 0 6px #ff9d00, 0 0 14px 6px rgba(255,170,0,.9); }
.ds-card { position: relative; width: 88px; height: 123px; cursor: pointer; }
.ds-card :is(img, canvas) { width: 88px; height: 123px; }
.ds-card .n { position: absolute; right: -2px; bottom: -2px; background: #000; color: #fff; font-size: 17px; font-weight: bold; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--gold); }
.ds-foot { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 24px; }
.ds-btn { min-width: 260px; font-size: 24px; }

/* ================= 試合画面 =================
   横の並び: [カード詳細 184][手前の体力 48][ 中央 792 ][奥の体力 48][ログ 184]
   中央の縦: 上側の手札 → 上の操作バー → 盤面（ここだけ傾ける）→ 下の操作バー → 下側の手札 */
.screen-hotseat {
  /* 雷の走る青い背景（プレイマットの縁の雰囲気）。画像は使わず、SVGで描く */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 720' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='bevel' stroke-linecap='round'%3E%3Cg stroke='%237fc4ff' stroke-width='5' opacity='.28'%3E%3Cpath d='M236 0 L262 46 L244 78 L288 126 L262 150 L300 204'/%3E%3Cpath d='M1044 0 L1012 52 L1040 88 L996 132 L1030 170'/%3E%3Cpath d='M236 720 L270 668 L246 640 L292 600 L266 566'/%3E%3Cpath d='M1044 720 L1016 676 L1048 640 L1004 604'/%3E%3Cpath d='M200 300 L246 330 L226 356 L268 392'/%3E%3Cpath d='M1080 330 L1034 360 L1056 392 L1012 420'/%3E%3C/g%3E%3Cg stroke='%23eaf6ff' stroke-width='1.6' opacity='.9'%3E%3Cpath d='M236 0 L262 46 L244 78 L288 126 L262 150 L300 204'/%3E%3Cpath d='M262 46 L296 60 L286 84'/%3E%3Cpath d='M1044 0 L1012 52 L1040 88 L996 132 L1030 170'/%3E%3Cpath d='M1012 52 L980 70 L992 96'/%3E%3Cpath d='M236 720 L270 668 L246 640 L292 600 L266 566'/%3E%3Cpath d='M1044 720 L1016 676 L1048 640 L1004 604'/%3E%3Cpath d='M200 300 L246 330 L226 356 L268 392'/%3E%3Cpath d='M1080 330 L1034 360 L1056 392 L1012 420'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 45%, #2f5fb0 0%, #1c3875 45%, #0d1a3d 100%);
}

/* ---- 左右のパネル ---- */
.panel {
  position: absolute; top: 4px; width: 184px; height: 712px; box-sizing: border-box; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(8,14,34,.86); border: 2px solid var(--gold); border-radius: 8px;
}
.panel-left { left: 4px; }
.panel-right { left: 1092px; }
.hud { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 4px; border-bottom: 1px solid #5b6a94; }
.hud-turn { font-size: 18px; color: var(--gold); font-weight: bold; }
.hud-phase { font-size: 13px; color: #d6dcf0; }

/* カード詳細ウィンドウ */
.detail-panel { flex: 1; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.dp-empty { font-size: 14px; color: #a9b4d6; white-space: pre-line; text-align: center; line-height: 1.7; margin-top: 60px; }
.dp-img { width: 168px; height: 235px; margin: 2px auto 4px; cursor: pointer; }
.dp-name { font-size: 17px; font-weight: bold; color: var(--gold); line-height: 1.25; }
.dp-meta { font-size: 12.5px; color: #c9d3ee; line-height: 1.4; margin-top: 2px; }
.dp-stat { font-size: 14px; font-weight: bold; margin-top: 4px; color: #fff; }
.dp-state { font-size: 13px; color: #9fe8c9; margin-top: 2px; }
.dp-user { font-size: 13px; color: #ffd98a; margin-top: 4px; line-height: 1.35; }
.dp-block { margin-top: 6px; }
.dp-head { font-size: 12px; color: #10151c; background: var(--gold); display: inline-block; padding: 0 6px; border-radius: 4px; font-weight: bold; }
.dp-text { font-size: 14px; line-height: 1.45; margin-top: 2px; }
.dp-flavor { font-size: 12px; color: #9aa6c9; font-style: italic; margin-top: 8px; line-height: 1.4; }
.dp-stack { display: flex; gap: 4px; margin-top: 6px; }
.dp-stack-card { width: 54px; cursor: pointer; }
.dp-stack-card :is(img, canvas) { width: 54px; height: 76px; image-rendering: auto; }
.dp-stack-cap { font-size: 11px; text-align: center; color: #d6dcf0; }

/* ログ */
.menu-btn { font-size: 16px; padding: 8px 4px; }
.log-title { font-size: 12px; color: #c9d3ee; text-align: center; }
.log-panel { flex: 1; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; font-size: 13px; line-height: 1.4; }
.log-line { padding: 2px 2px; border-bottom: 1px solid rgba(143,163,214,.25); overflow-wrap: anywhere; }
.log-line.turn { color: #10151c; background: var(--gold); font-weight: bold; border-radius: 3px; }
.log-card { color: #8fd0ff; text-decoration: underline; cursor: pointer; }
.log-line.turn .log-card { color: #10151c; }

/* ---- 体力ゲージ（左が手前、右が奥） ---- */
.gauge-slot { position: absolute; top: 84px; width: 48px; height: 510px; display: flex; }
.gauge-left { left: 192px; }
.gauge-right { left: 1040px; }
.gauge { width: 48px; display: flex; flex-direction: column; align-items: center; }
.gauge-label { font-size: 14px; font-weight: bold; color: #10151c; background: var(--pc); border-radius: 6px; padding: 2px 3px; margin-bottom: 3px; white-space: nowrap; max-width: 48px; overflow: hidden; box-sizing: border-box; }
.gauge-bar {
  flex: 1; width: 100%; display: flex; flex-direction: column-reverse; gap: 2px; padding: 3px; box-sizing: border-box;
  border: 2px solid var(--pc); border-radius: 6px; background: #060a18;
}
.seg { flex: 1; border-radius: 2px; background: #27304f; transition: background .18s, box-shadow .18s; }
.seg.mark { margin-top: 3px; }                         /* 20000（初期値）の位置 */
/* 相手（右のゲージ）は、上が0・下が30000（上から下へ減る・増える） */
.gauge-right .gauge-bar { flex-direction: column; }
.gauge-right .seg.mark { margin-top: 0; margin-bottom: 3px; }
.lv-danger { --lit: #ff4d3d; } .lv-warn { --lit: #ffa63d; } .lv-ok { --lit: #2fe0b5; } .lv-high { --lit: #45d6ff; }
.seg.on { background: var(--lit); box-shadow: 0 0 7px var(--lit); }
.gauge-value { font-size: 15px; font-weight: bold; margin-top: 3px; color: var(--lit); }
/* タリスポッド: 持っている間は光る。使うと白黒になる */
.gauge-talis { margin-top: 5px; width: 46px; height: 46px; flex: none; }
.gauge-right .gauge-talis { order: -1; margin: 0 0 5px; } /* 相手（奥）の分は、ライフの上に出す。ゲージ本体は左右でずれるが、タリスポッドを含めた全体の高さは、左右でそろう */
.gauge-talis img { display: block; width: 100%; height: 100%; filter: grayscale(1) brightness(.62) contrast(1.05); opacity: .8; transition: filter .5s, opacity .5s; }
.gauge-talis.on img { filter: drop-shadow(0 0 6px rgba(120,190,255,.95)) drop-shadow(0 0 12px rgba(90,160,255,.7)); opacity: 1; animation: talis-glow 1.8s ease-in-out infinite; }
@keyframes talis-glow { 50% { filter: drop-shadow(0 0 3px rgba(120,190,255,.7)) drop-shadow(0 0 7px rgba(90,160,255,.4)); } }

/* ---- 手札 ---- */
.screen-hotseat .hand { position: absolute; left: 244px; width: 792px; display: flex; justify-content: center; align-items: center; }
.hand-top { top: 2px; height: 80px; }
.hand-bottom { top: 596px; height: 122px; }

/* ---- カード ---- */
.cardbox { position: relative; flex: none; cursor: pointer; }
.cardbox .cardimg { position: absolute; left: 50%; top: 50%; }
.cardbox :is(img, canvas) { width: 100%; height: 100%; border-radius: 3px; }
.size-board { width: var(--card-w); height: var(--card-h); }
.size-board.is-rest { width: var(--card-h); }
.size-board .cardimg { width: var(--card-w); height: var(--card-h); margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2); box-shadow: 0 2px 5px rgba(0,0,0,.55); }
.size-hand { width: var(--hand-w); height: var(--hand-h); }
.size-hand .cardimg { width: var(--hand-w); height: var(--hand-h); margin: calc(var(--hand-h) / -2) 0 0 calc(var(--hand-w) / -2); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.size-mini { width: var(--mini-w); height: var(--mini-h); }
.size-mini .cardimg { width: var(--mini-w); height: var(--mini-h); margin: calc(var(--mini-h) / -2) 0 0 calc(var(--mini-w) / -2); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.size-list { width: 72px; height: 101px; }
.size-list .cardimg { width: 72px; height: 101px; margin: -50.5px 0 0 -36px; }
.cardimg.rest { transform: rotate(90deg); }          /* レストは横向き */
.cardimg.flip { transform: rotate(180deg); }         /* 中央の帯に置かれた、上側のプレイヤーのカード */
.cardimg.flip.rest { transform: rotate(270deg); }

/* 今使えるカード（青白く光る）・選べる対象（緑）・選んだカード（金）・選べない（暗く） */
.cardbox.act .cardimg { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2f7dff, 0 0 16px 7px rgba(60,140,255,.95); animation: actpulse 1.2s ease-in-out infinite; }
.cardbox.cand .cardimg { box-shadow: 0 0 0 3px #eaffea, 0 0 0 6px #18b53a, 0 0 18px 8px rgba(40,210,80,.95); animation: pulse 1s ease-in-out infinite; }
.cardbox.sel .cardimg { box-shadow: 0 0 0 3px #fff7d0, 0 0 0 7px #ff9d00, 0 0 22px 9px rgba(255,170,0,.95); animation: none; }
.cardbox.dim .cardimg { filter: brightness(.55) saturate(.7); }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #eaffea, 0 0 0 6px #18b53a, 0 0 28px 12px rgba(40,210,80,.95); } }
@keyframes actpulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2f7dff, 0 0 24px 11px rgba(60,140,255,.95); } }
.hand-bottom .cardbox.sel { transform: translateY(-12px); }
.hand-top .cardbox.sel { transform: translateY(6px); }

/* カードに付ける数字の札 */
.chip {
  position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); z-index: 2;
  font-size: 13px; font-weight: bold; white-space: nowrap; padding: 1px 6px; border-radius: 6px;
  background: rgba(0,0,0,.88); color: #fff; border: 1px solid #c9d3ee; pointer-events: none; line-height: 1.25;
}
/* 盤面のレジェンズ: 攻撃力（赤）｜防御力（青）。カードの幅いっぱいに、大きく出す */
.chip.stat {
  display: flex; padding: 0; bottom: -9px; overflow: hidden; background: none;
  border: 2px solid #fff; border-radius: 7px; box-shadow: 0 2px 5px rgba(0,0,0,.75);
  font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -0.5px;
}
.chip.stat span { min-width: 37px; padding: 1px 0; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.chip.stat .atk { background: #c41f1f; }
.chip.stat .def { background: #1a4fc0; border-left: 2px solid #fff; }
.chip.stat.wide { font-size: 13.5px; }                                 /* 5けた（レギオン）は少し小さく */
/* 幅はカード1枚ぶん（78px）に収める。隣のカードの札と重ならないように */
.chip.cost { background: rgba(60,20,90,.92); border-color: #e2b8ff; } /* 手札のレジェンズ: 召喚パワー */
.size-mini .chip.cost { font-size: 11px; padding: 0 4px; bottom: -2px; }
.chip.legion { bottom: auto; top: -6px; background: #3a2a05; border-color: var(--gold); color: #ffe7a8; font-size: 11px; }
.chip.tag { background: #13324d; border-color: #7cc0ff; }
.is-legion .cardimg { box-shadow: 4px -4px 0 #d9c9a0, 5px -5px 0 #5b4f3a, 9px -9px 0 #c9b98e, 10px -10px 0 #5b4f3a, 14px -14px 0 #b9a97e, 15px -15px 0 #5b4f3a; }

/* ---- 盤面（ここだけ傾ける） ---- */
.board-wrap {
  position: absolute; left: 244px; top: 136px; width: 792px; height: 404px;
  perspective: var(--persp); perspective-origin: 50% var(--persp-y);
}
.board {
  position: absolute; left: 0; bottom: 0; width: 792px; box-sizing: border-box; padding: 6px;
  transform-origin: 50% 100%; transform: rotateX(var(--tilt));
  display: flex; flex-direction: column; gap: 4px;
  border: 3px solid #d9b36c; border-radius: 10px;
  background: linear-gradient(180deg, #1b3a7a, #12275a 50%, #1b3a7a);
  box-shadow: 0 0 0 2px #0a1330, 0 12px 26px rgba(0,0,0,.55);
}
.half { display: grid; grid-template-columns: 84px 1fr 84px; gap: 4px; }
.half-top { transform: rotate(180deg); }   /* 上側のプレイヤーの区画は、対面の向き（カードも逆さま） */
.rows { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row {
  position: relative; height: var(--row-h); display: flex; justify-content: center; align-items: center;
  border: 2px solid #a8823f; border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 18px rgba(120,84,30,.35);
}
/* 戦闘エリアは羊皮紙の色、召喚エリアは少し暗いオリーブ色（プレイマットに合わせる） */
.row-battle { background: linear-gradient(180deg, #f3ead0, #e2d3aa); }
.row-summon { background: linear-gradient(180deg, #b4b08a, #96916a); }
.row-label {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -15px; text-align: center; pointer-events: none;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 24px; font-weight: bold; letter-spacing: 6px;
  color: #6b4a16; opacity: .3;
}
.row-summon .row-label { color: #3c3a22; }
.row .cardbox + .cardbox { margin-left: 8px; }

/* 墓場・山札・パワー */
.zone-col {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 4px 0; box-sizing: border-box;
  border: 2px solid #8fa3d6; border-radius: 6px; background: rgba(6,12,34,.72);
}
.half-name { font-size: 22px; font-weight: bold; color: #10151c; background: var(--pc); border-radius: 6px; padding: 2px 10px; margin-bottom: 6px; }
.pile { width: 72px; text-align: center; position: relative; }
.pile.tap { cursor: pointer; }
.pile-card { width: 60px; height: 84px; margin: 0 auto; border-radius: 3px; background: rgba(0,0,0,.35); border: 2px dashed #8fa3d6; box-sizing: border-box; overflow: hidden; }
.pile-card:not(.empty) { border: none; box-shadow: 2px 2px 0 #0a1330, 3px 3px 0 #8fa3d6; }
.pile-card :is(img, canvas) { width: 100%; height: 100%; image-rendering: auto; }
.pile-count { position: absolute; left: 0; right: 0; top: 24px; font-size: 26px; font-weight: bold; color: #fff; text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 6px #000; pointer-events: none; }
.pile-label { font-size: 13px; color: #e6ecff; font-weight: bold; margin-top: 2px; }
/* 180度回した区画の中の文字は、読めるように戻す */
.half-top .chip { transform: translateX(-50%) rotate(180deg); }
.half-top .pile-count, .half-top .pile-label, .half-top .half-name, .half-top .row-label { transform: rotate(180deg); }

/* 中央の帯: [マジック][アタック][バトル][相手のアタック][相手のマジック] */
.center { height: var(--center-h); display: flex; justify-content: center; align-items: center; gap: 8px; }
.pos {
  position: relative; width: 112px; height: 114px; box-sizing: border-box; border-radius: 6px;
  border: 2px solid #f0d9a0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.pos-magic.mine { background: linear-gradient(180deg, #a56a2e, #6e4319); }
.pos-attack.mine { background: linear-gradient(180deg, #5c82b8, #2f4f85); }
.pos-battle { background: linear-gradient(180deg, #c22a6e, #7d1444); width: 132px; }
.pos-attack.theirs { background: linear-gradient(180deg, #dfe9f6, #a9bfdc); }
.pos-magic.theirs { background: linear-gradient(180deg, #c9a273, #94703f); }
.pos-label { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 15px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; line-height: 1.2; padding: 0 4px; }
.pos-attack.theirs .pos-label { color: #1c2c4c; text-shadow: none; }
.pos-slot { position: absolute; left: 50%; top: 1px; width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2); pointer-events: none; }
.pos .cardbox { position: absolute; left: 50%; top: 1px; margin-left: calc(var(--card-w) / -2); }
.pos .cardbox.is-rest { margin-left: calc(var(--card-h) / -2); }
.pos .under-card .cardimg { filter: brightness(.6); }
.pos .in-pos.p1 .cardimg, .pos .in-pos.p2 .cardimg { box-shadow: 0 0 0 2px var(--pc), 0 2px 6px rgba(0,0,0,.6); }
.pos-attack .in-pos .cardimg { box-shadow: 0 0 0 3px #ffd24a, 0 0 14px 5px rgba(255,90,60,.9); }

/* ---- 操作バー（操作するプレイヤーの側に出る） ---- */
.dock { position: absolute; left: 244px; width: 792px; z-index: 20; }
.dock-top { top: 83px; }
.dock-bottom { bottom: 126px; }
.dock-bar {
  height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 6px; box-sizing: border-box;
  border: 2px solid var(--pc); border-radius: 8px; background: rgba(8,14,34,.82); opacity: .78;
}
.dock.active .dock-bar { opacity: 1; background: rgba(8,14,34,.95); box-shadow: 0 0 0 2px #fff, 0 0 16px 4px var(--pc); }
.dock-who { font-size: 16px; font-weight: bold; color: #10151c; background: var(--pc); border-radius: 6px; padding: 6px 8px; white-space: nowrap; }
.dock-msg { flex: 1; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-msg.wait { color: #c9d3ee; font-size: 15px; }
.dock-msg.err { color: #ffb0a4; font-weight: bold; }
.dock-btns { display: flex; gap: 6px; }
.dock-list {
  display: flex; width: fit-content; gap: 12px; padding: 12px; box-sizing: border-box; overflow-x: auto; max-width: 792px;
  background: rgba(6,10,24,.95); border: 2px solid var(--pc); border-radius: 8px; margin: 4px 0;
}
.num-choice {
  width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 36px; font-weight: bold; border: 3px solid #7dff8a; border-radius: 12px; background: #1c2b1e; cursor: pointer;
}
.num-choice.sel { border-color: #ffe066; background: #4a3a05; }

/* ---- カードの移動アニメーション ---- */
.fly-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.ghost { position: absolute; }
.ghost :is(img, canvas) { width: 100%; height: 100%; border-radius: 3px; image-rendering: auto; box-shadow: 0 6px 14px rgba(0,0,0,.6); }

/* ---- ターン交代で上下が入れ替わる時 ---- */
.swap .board-wrap, .swap .hand, .swap .gauge-slot, .swap .dock { animation: swapin .45s ease-out; }
@keyframes swapin { from { opacity: 0; } to { opacity: 1; } }

/* ---- 拡大・一覧・メニュー（#overlay） ---- */
.detail {
  position: absolute; inset: 0; pointer-events: auto; background: rgba(4,8,20,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.detail-row { display: flex; gap: 14px; align-items: center; }
.detail :is(img, canvas).big { width: 428px; height: 600px; }
.detail :is(img, canvas).mid { width: 272px; height: 381px; }
.detail :is(img, canvas).small { width: 120px; height: 168px; }
.detail :is(img, canvas).pickable { cursor: pointer; }
.detail-cap { font-size: 24px; }
.detail-title { font-size: 28px; color: var(--gold); }
.detail-hint { font-size: 16px; color: #c9d3ee; }
.detail-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1180px; max-height: 540px; overflow: auto; touch-action: pan-y; }
.detail-empty { font-size: 22px; color: #c9d3ee; padding: 40px; }

/* ---- お知らせ（演出） ---- */
.toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 16px; padding: 14px 26px;
  background: rgba(6,10,24,.93); border: 3px solid var(--gold); border-radius: 14px;
  font-size: 30px; font-weight: bold; white-space: nowrap; animation: toastin .16s ease-out;
}
.toast :is(img, canvas) { width: 100px; height: 140px; }
.toast.turn { font-size: 44px; border-color: var(--pc, var(--gold)); color: var(--pc, var(--gold)); }
.toast.damage { color: #ff7a6b; border-color: #ff7a6b; font-size: 40px; }
.toast.judge { font-size: 36px; }
.toast.heal { color: #57e8c0; border-color: #57e8c0; }
.toast.dice { color: #ffe066; }
.toast.bad { color: #ffb0a4; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -40%); } }

/* ---- 試合結果 ---- */
.result { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.7); }
.result-box { text-align: center; padding: 30px 50px; background: #16213f; border: 4px solid var(--pc, var(--gold)); border-radius: 18px; }
.result-title { font-size: 60px; font-weight: bold; color: var(--pc, var(--gold)); }
.result-title.small { font-size: 34px; }
.result-reason { font-size: 22px; margin: 10px 0 24px; color: #d6dcf0; }
.result-tut { max-width: 640px; margin: -8px auto 22px; font-size: 19px; line-height: 1.6; color: #e8ecf8; white-space: pre-line; text-align: left; }

/* チュートリアルのふきだし（盤面の上端、相手の手札の位置に重ねる） */
.tut-bubble {
  position: absolute; left: 244px; top: 4px; width: 792px; box-sizing: border-box; z-index: 30;
  padding: 8px 16px 10px; background: rgba(255, 247, 214, .97); color: #2b2113; border: 3px solid var(--gold); border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.tut-tag { display: inline-block; font-size: 13px; font-weight: bold; color: #fff; background: #b8782a; border-radius: 6px; padding: 1px 8px; margin-bottom: 3px; }
.tut-text { font-size: 19px; line-height: 1.45; }
.tut-bubble.info { padding-right: 150px; }                  /* 「つぎへ」を、文の右に置く（ふきだしを低く保つ） */
.tut-next { position: absolute; right: 14px; bottom: 10px; font-size: 20px; padding: 6px 24px; }
.result-btns { display: flex; gap: 16px; justify-content: center; margin-top: 18px; }
.result-btns .btn { font-size: 24px; padding: 14px 24px; }
.fatal { font-size: 26px; padding: 60px; color: #ffb0a4; }

/* ---- 小さく表示するカードは滑らかに縮小する ----
   元画像は 480×672。盤面・手札では 1/5 ほどに縮むので、最近傍のままだと文字がつぶれてざらつく。
   拡大表示（#overlay と、左の詳細ウィンドウの大きい絵）はピクセルのまま。 */
.size-board img, .size-hand img, .size-mini img, .size-list img, .ds-card img, .gal-thumb img, .toast img, .dp-img {
  image-rendering: auto;
}

/* ---- 言語の切り替え（トップ画面の右上） ---- */
.lang-btn { position: absolute; right: 24px; top: 20px; font-size: 20px; padding: 10px 18px; z-index: 5; }
.screen-top { position: absolute; }

/* ---- 召喚を宣言したカード（相手の反応を待つ間、召喚エリアに半透明で置く） ---- */
.cardbox.declaring .cardimg { opacity: .6; box-shadow: 0 0 0 2px #ffe066, 0 0 12px 3px rgba(255,224,102,.8); }

/* ---- 手札シャッフルのボタン ---- */
.btn.shuffle { font-size: 16px; padding: 10px 10px; }
/* ---- カードの拡大表示: 左に大きな絵、右に大きな文字 ---- */
.dx-row { display: flex; gap: 28px; align-items: center; justify-content: center; }
.detail-one :is(img, canvas).big { width: 440px; height: 616px; flex: none; }
.dx-info { width: 640px; max-height: 620px; overflow-y: auto; touch-action: pan-y; box-sizing: border-box; padding: 18px 22px;
  background: rgba(8,14,34,.92); border: 3px solid var(--gold); border-radius: 12px; }
.dx-name { font-size: 38px; font-weight: bold; color: var(--gold); line-height: 1.25; }
.dx-meta { font-size: 22px; color: #c9d3ee; margin-top: 6px; line-height: 1.4; }
.dx-stat { font-size: 28px; font-weight: bold; color: #fff; margin-top: 12px; }
.dx-state { font-size: 22px; color: #9fe8c9; margin-top: 6px; }
.dx-user { font-size: 23px; color: #ffd98a; margin-top: 12px; line-height: 1.4; }
.dx-block { margin-top: 16px; }
.dx-head { display: inline-block; font-size: 19px; font-weight: bold; color: #10151c; background: var(--gold); padding: 1px 12px; border-radius: 6px; }
.dx-text { font-size: 26px; line-height: 1.5; margin-top: 6px; }
.dx-flavor { font-size: 19px; color: #9aa6c9; font-style: italic; margin-top: 16px; line-height: 1.45; }
.dx-stack { display: flex; gap: 12px; margin-top: 12px; }
.dx-stack-card { width: 110px; cursor: pointer; }
.dx-stack-card :is(img, canvas) { width: 110px; height: 154px; image-rendering: auto; }
.dx-stack-cap { font-size: 17px; text-align: center; color: #d6dcf0; margin-top: 2px; }
/* ---- ダイスの演出（転がって、出目で止まる） ---- */
.toast.has-dice { padding: 22px 40px; }
.dice-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dice-row { display: flex; gap: 36px; align-items: flex-start; }
.die-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.die {
  width: 120px; height: 120px; box-sizing: border-box; border-radius: 22px; position: relative;
  background: linear-gradient(145deg, #ffffff, #d9deea); border: 4px solid #8f9bbd;
  box-shadow: 0 8px 0 #6c7899, 0 14px 22px rgba(0,0,0,.6), inset 0 -6px 10px rgba(80,90,130,.35);
  display: flex; align-items: center; justify-content: center;
}
.die-pips { width: 84px; height: 84px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.die .pip { width: 22px; height: 22px; margin: auto; border-radius: 50%; background: transparent; }
.die .pip.on { background: radial-gradient(circle at 35% 30%, #4a5370, #14182b); box-shadow: inset 0 2px 3px rgba(0,0,0,.7); }
.die:has(.pip.on):not([data-face='1']) .pip.on { }
.die[data-face='1'] .pip.on { background: radial-gradient(circle at 35% 30%, #ff7a6b, #b3261e); width: 30px; height: 30px; }
.die-num { font-size: 72px; font-weight: 900; color: #14182b; line-height: 1; }
.die.rolling { animation: dice-tumble .28s linear infinite; }
.die.land { animation: dice-land .38s cubic-bezier(.2,1.6,.4,1); }
@keyframes dice-tumble {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-22px) rotate(95deg); }
  50%  { transform: translateY(0) rotate(180deg); }
  75%  { transform: translateY(-14px) rotate(275deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
@keyframes dice-land { 0% { transform: scale(1.35) rotate(-14deg); } 100% { transform: scale(1) rotate(0deg); } }
.die-label { font-size: 22px; font-weight: bold; color: #d6dcf0; }
.die-wrap.win .die { box-shadow: 0 0 0 5px #ffe066, 0 0 26px 8px rgba(255,210,70,.9), 0 8px 0 #6c7899; }
.die-wrap.win .die-label { color: #ffe066; }
.die-delta { position: absolute; right: -34px; top: -18px; font-size: 34px; font-weight: 900; color: #7dff8a; text-shadow: 0 2px 4px #000; animation: delta-pop .4s ease-out; }
.die-delta.minus { color: #ff8a7a; }
@keyframes delta-pop { from { transform: scale(.3) translateY(14px); opacity: 0; } }
.toast-text.small { font-size: 24px; }

/* ---- デッキ編集のギャラリー ---- */
.screen-deckEdit.gallery { box-sizing: border-box; }
.gal-head { position: absolute; left: 36px; right: 36px; top: 14px; height: 52px; display: flex; align-items: center; gap: 18px; }
.gal-head .ds-btn { min-width: 150px; font-size: 20px; padding: 8px 14px; }
.gal-title { flex: 1; text-align: center; font-size: 34px; color: var(--gold); }
.gal-import { font-size: 18px; padding: 8px 14px; }
.gal-note { position: absolute; left: 36px; right: 36px; top: 70px; height: 24px; text-align: center; font-size: 17px; color: #ffe39a; }
.gal-grid {
  position: absolute; left: 36px; right: 36px; top: 98px; bottom: 14px; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-content: start; padding: 4px 6px 10px;
  touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: thin;
}
.gal-tile {
  position: relative; font: inherit; color: var(--text); cursor: pointer; box-sizing: border-box; height: 262px; padding: 10px 8px 8px;
  background: rgba(22, 33, 63, .85); border: 3px solid #8fa3d6; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.gal-tile.use { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(227,189,114,.35), 0 0 14px rgba(227,189,114,.5); }
.gal-tile.bad { border-color: #d98a7a; }
.gal-thumb { width: 126px; height: 176px; flex: none; }
.gal-thumb :is(img, canvas) { width: 126px; height: 176px; border-radius: 4px; }
.gal-name { font-size: 20px; font-weight: bold; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-meta { font-size: 15px; color: #c9d3ee; display: flex; gap: 8px; align-items: center; }
.gal-meta .bad { color: #ffab9a; }
.gal-meta .tag { font-size: 13px; padding: 0 6px; border: 1px solid #8f9bc0; border-radius: 6px; color: #d6dcf0; }
.gal-badge { position: absolute; left: -6px; top: -8px; background: var(--gold); color: #241a10; font-weight: bold; font-size: 15px; padding: 2px 10px; border-radius: 8px; border: 2px solid #fff0c8; }
.gal-new { justify-content: center; border-style: dashed; opacity: .55; cursor: not-allowed; }
.gal-plus { font-size: 88px; line-height: 1; color: #aebbe0; }
.gal-new .soon { font-size: 14px; color: #d6dcf0; border: 1px solid #8f9bc0; border-radius: 6px; padding: 1px 8px; }
.dk-pop { min-width: 440px; max-width: 640px; padding: 22px 30px; }
.dk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 16px; }
.dk-grid .btn { min-width: 0; font-size: 22px; padding: 14px 10px; }
.dk-code { width: 100%; height: 110px; box-sizing: border-box; margin-top: 8px; font: 15px/1.4 monospace; color: var(--text); background: #0d1630; border: 2px solid #8fa3d6; border-radius: 8px; padding: 8px;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; resize: none; word-break: break-all; }
.dk-msg { font-size: 16px; color: #c9d3ee; margin: 8px 0 12px; min-height: 22px; }
.dk-msg.warn { color: #ffb86b; }

/* ================= デッキ編集（構築） ================= */
.screen-deckBuild { box-sizing: border-box; }
.db-input { font: inherit; color: var(--text); background: #0d1630; border: 2px solid #8fa3d6; border-radius: 8px; padding: 6px 10px; box-sizing: border-box;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.db-input:focus { outline: none; border-color: var(--gold); }
.db-head { position: absolute; left: 12px; right: 12px; top: 8px; height: 50px; display: flex; align-items: center; gap: 12px; }
.db-back { font-size: 19px; padding: 8px 16px; }
.db-title { font-size: 26px; color: var(--gold); margin-right: 6px; white-space: nowrap; }
.db-name-label { font-size: 16px; color: #c9d3ee; white-space: nowrap; }
.db-name { flex: 1; min-width: 120px; font-size: 21px; }
.db-count { font-size: 22px; font-weight: bold; white-space: nowrap; }
.db-state { font-size: 16px; font-weight: bold; padding: 4px 12px; border-radius: 8px; white-space: nowrap; }
.db-state.ok { background: #1f7a3d; color: #eaffea; border: 2px solid #7fe09a; }
.db-state.bad { background: #8f2219; color: #ffe9e4; border: 2px solid #ff9a8a; }
.db-save { font-size: 21px; padding: 8px 26px; }
.db-detail { position: absolute; left: 12px; top: 64px; width: 214px; bottom: 34px; display: flex; flex-direction: column; box-sizing: border-box; padding: 8px;
  background: rgba(6,10,24,.55); border: 2px solid #8fa3d6; border-radius: 12px; overflow: hidden; }
.db-detail-body { flex: 1; min-height: 0; }
.db-detail-ctl { display: none; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid #5f73a8; }
.db-pm { font: inherit; width: 52px; height: 52px; font-size: 28px; line-height: 1; border-radius: 50%; cursor: pointer; flex: none; color: #fff; }
.db-pm.minus { background: #5a1f1c; border: 2px solid #ff9a8a; } .db-pm.plus { background: #1f5a2c; border: 2px solid #8fe0a0; }
.db-pm:disabled { opacity: .35; cursor: not-allowed; }
.db-pm-n { font-size: 15px; font-weight: bold; color: var(--gold); text-align: center; line-height: 1.2; }
.db-left { position: absolute; left: 236px; top: 64px; width: 330px; bottom: 34px; display: flex; flex-direction: column;
  background: rgba(6,10,24,.55); border: 2px solid #8fa3d6; border-radius: 12px; overflow: hidden; }
.db-right { position: absolute; left: 576px; right: 12px; top: 64px; bottom: 34px; display: flex; flex-direction: column;
  background: rgba(6,10,24,.55); border: 2px solid #8fa3d6; border-radius: 12px; overflow: hidden; }
.db-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid #5f73a8; }
.db-panel-title { font-size: 18px; color: var(--gold); font-weight: bold; white-space: nowrap; }
.db-clear { font-size: 14px; padding: 4px 10px; }
.db-deck { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: thin; }
.db-row { display: flex; align-items: center; gap: 8px; height: 50px; margin-bottom: 4px; padding: 0 8px 0 4px; border-radius: 8px; cursor: pointer;
  background: #1b2647; border-left: 6px solid #8fa3d6; }
.db-row.attr-fire { border-left-color: var(--p2); } .db-row.attr-water { border-left-color: #3f8fd9; }
.db-row.attr-wind { border-left-color: #4cae6a; } .db-row.attr-earth { border-left-color: #b8893c; }
.db-row.attr-light { border-left-color: #e3bd72; } .db-row.attr-dark { border-left-color: #8e5be0; } .db-row.attr-none { border-left-color: #aab6c8; }
.db-row-img { width: 32px; height: 45px; flex: none; border-radius: 2px; }
.db-row-mid { flex: 1; min-width: 0; }
.db-row-name { font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-row-sub { font-size: 12px; color: #aab6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-row-n { font-size: 18px; font-weight: bold; color: var(--gold); width: 28px; text-align: right; }
.db-row.sel { background: #2b3d73; box-shadow: 0 0 0 2px var(--gold); }
.db-row-pm { font: inherit; width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; border-radius: 50%; flex: none; cursor: pointer; color: #fff; }
.db-row-pm.minus { background: #5a1f1c; border: 2px solid #ff9a8a; } .db-row-pm.plus { background: #1f5a2c; border: 2px solid #8fe0a0; }
.db-row-pm:disabled { opacity: .35; cursor: not-allowed; }
.db-tile.sel canvas { box-shadow: 0 0 0 4px #fff, 0 2px 5px rgba(0,0,0,.55); }
.db-row-minus { width: 30px; height: 30px; line-height: 28px; text-align: center; font-size: 18px; border-radius: 50%; background: #5a1f1c; border: 2px solid #ff9a8a; color: #ffe9e4; flex: none; }
.db-filter { padding: 6px 10px 6px; border-bottom: 1px solid #5f73a8; }
.db-filter-top { display: flex; align-items: center; gap: 12px; }
.db-search { flex: 1; font-size: 17px; }
.db-segs { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.db-segs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.db-seg-label { white-space: nowrap; }
.db-segs-filter { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.db-sort { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 8px; border: 1px dashed #6fd0c4; border-radius: 18px; }
.db-chip.sort { background: #123d44; border-color: #6fd0c4; border-radius: 6px; }
.db-chip.sort.on { background: #6fd0c4; color: #06242a; border-color: #d6fff8; }
.db-tile-lab { position: absolute; left: 50%; transform: translateX(-50%); top: 4px; max-width: 92px; white-space: nowrap; font-size: 14px; font-weight: bold; color: #06242a; background: #6fd0c4; border: 2px solid #d6fff8; border-radius: 8px; padding: 0 7px; z-index: 1; }
.db-seg { display: flex; align-items: center; gap: 5px; }
.db-seg-label { font-size: 14px; color: #c9d3ee; margin-right: 2px; }
.db-chip { font: inherit; font-size: 15px; padding: 4px 11px; color: var(--text); background: #22335f; border: 2px solid #8fa3d6; border-radius: 16px; cursor: pointer; }
.db-chip.on { background: var(--gold); color: #241a10; border-color: #fff0c8; font-weight: bold; }
.db-pool { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; align-content: start;
  touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: thin; }
.db-tile { position: relative; cursor: pointer; text-align: center; }
.db-tile canvas { width: 96px; height: 134px; margin: 0 auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.55); }
.db-tile.in canvas { box-shadow: 0 0 0 3px var(--gold), 0 2px 5px rgba(0,0,0,.55); }
.db-tile.maxed canvas { filter: brightness(.5) saturate(.6); }
.db-tile-no { font-size: 12px; color: #c9d3ee; margin-top: 2px; }
.db-tile-n { position: absolute; right: 0; top: -4px; background: var(--gold); color: #241a10; font-size: 17px; font-weight: bold; padding: 0 7px; border-radius: 8px; border: 2px solid #fff0c8; display: none; }
.db-empty { grid-column: 1 / -1; padding: 30px 14px; text-align: center; color: #aab6d8; font-size: 16px; line-height: 1.6; }
.db-foot { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.db-hint { color: #aab6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-note { color: #ffe39a; font-weight: bold; white-space: nowrap; margin-left: 12px; }
.gal-meta .tag.bad { background: #8f2219; border-color: #ff9a8a; color: #ffe9e4; font-weight: bold; }
.gal-new { opacity: 1; cursor: pointer; }

.db-chip { white-space: nowrap; flex: none; }
.db-sort { flex: none; white-space: nowrap; }
.db-chip.sort { font-size: 14px; padding: 4px 8px; }
.db-seg { flex-wrap: nowrap; }
.db-tile-n { top: auto; bottom: 0; right: 2px; font-size: 15px; }

.db-tile-ctl { display: none; position: absolute; left: 0; right: 0; top: 56px; justify-content: space-between; padding: 0 4px; z-index: 2; }
.db-tile.sel .db-tile-ctl { display: flex; }
.db-tile-ctl .db-pm { width: 40px; height: 40px; font-size: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.7); }
.db-tile.maxed.sel canvas { filter: none; }

/* 放置の監視のカウントダウン */
.idle-badge { position: absolute; left: 640px; top: 6px; transform: translateX(-50%); z-index: 60; padding: 6px 18px; border-radius: 18px; font-size: 20px; font-weight: bold;
  background: rgba(120,70,0,.92); color: #fff2cf; border: 2px solid #ffd27a; pointer-events: none; white-space: nowrap; }
.idle-badge.hot { background: rgba(150,25,20,.95); border-color: #ff9a8a; color: #fff; }

/* 引っぱって更新・端からのスワイプで戻る、を起こさせない */
html, body { overscroll-behavior: none; }
.idle-badge.theirs { background: rgba(20,70,110,.93); border-color: #8fd0ff; color: #eaf6ff; }
.idle-badge.theirs.hot { background: rgba(20,90,60,.95); border-color: #8fe0a0; }
.db-row-imgwrap { position: relative; width: 32px; height: 45px; flex: none; }
.db-thumb { position: absolute; left: -7px; top: -7px; width: 24px; height: 24px; padding: 0; font-size: 14px; line-height: 20px; text-align: center; border-radius: 50%; cursor: pointer;
  background: rgba(10,16,38,.85); color: #8c97b8; border: 2px solid #6d7aa3; z-index: 2; }
.db-thumb.on { background: var(--gold); color: #6a3d00; border-color: #fff0c8; box-shadow: 0 0 6px rgba(255,220,120,.9); }

/* シャッフルの演出（裏向きの束が左右に出入りする） */
@keyframes shufA { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-55%) rotate(-7deg); } }
@keyframes shufB { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(55%) rotate(7deg); } }
@keyframes shufC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14%); } }

/* 「戻る」を押した時の確認（ステージの外。画面全体に重ねる） */
#leave-guard { position: fixed; inset: 0; z-index: 9999; background: rgba(3,6,16,.78); display: flex; align-items: center; justify-content: center; }
.leave-box { background: #14204a; border: 3px solid var(--gold); border-radius: 14px; padding: 4vh 4vw; max-width: 80vw; text-align: center; color: var(--text); }
.leave-msg { font-size: max(16px, 3.2vh); line-height: 1.5; margin-bottom: 3vh; }
.leave-btns { display: flex; gap: 3vw; justify-content: center; }
.leave-btns .btn { font-size: max(16px, 3.4vh); padding: 1.6vh 4vw; min-width: 0; }

/* 前回の途中の対戦（あるときだけ） */
.top-resume { display: flex; align-items: center; justify-content: center; gap: 14px; width: 940px; margin: 0 auto 10px; padding: 8px 16px; box-sizing: border-box;
  border: 2px solid var(--gold); border-radius: 12px; background: rgba(60,45,10,.55); }
.top-resume-text { flex: 1; text-align: left; font-size: 18px; color: #fff2cf; }
.top-resume .btn { font-size: 18px; padding: 6px 18px; min-width: 0; }
.top-resume .btn.danger { background: #8f2219; border-color: #ff9a8a; color: #ffe9e4; }

/* オンライン対戦: ロビー・接続の知らせ */
.screen-online { display: flex; align-items: center; justify-content: center; }
.online-box { width: 760px; text-align: center; padding: 34px 30px; border: 2px solid var(--line); border-radius: 16px; background: rgba(6,10,24,.55); }
.online-title { font-size: 34px; color: var(--gold); margin-bottom: 18px; }
.online-status { font-size: 22px; line-height: 1.6; min-height: 70px; }
.online-status.bad { color: #ffb86b; }
.online-dots { font-size: 22px; letter-spacing: 8px; color: var(--gold); margin: 14px 0 22px; animation: onlinePulse 1.2s ease-in-out infinite; }
@keyframes onlinePulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.online-cancel { font-size: 22px; padding: 10px 32px; }
.net-note { position: absolute; left: 640px; top: 48px; transform: translateX(-50%); z-index: 60; padding: 6px 18px; border-radius: 16px; font-size: 17px; font-weight: bold; white-space: nowrap; pointer-events: none;
  background: rgba(60,45,10,.95); color: #fff2cf; border: 2px solid #ffd27a; }
.net-note.bad { background: rgba(150,25,20,.95); border-color: #ff9a8a; color: #fff; }
.top-resume.online { border-color: #8fd0ff; background: rgba(20,60,100,.55); }

/* ブラウザの自動ダークモード（強制的に暗くする機能）を使わせない。この画面は、もともと暗い配色で作ってあるため、二重に暗くなって、ダイスなどが黒くつぶれる */
:root { color-scheme: only light; }
* { forced-color-adjust: none; scrollbar-color: #6d7aa3 rgba(6,10,24,.55); }

/* トップ画面の最下部の注意書き */
.top-disclaimer { position: absolute; left: 60px; right: 60px; bottom: 6px; text-align: center; font-size: 11px; line-height: 1.4; color: rgba(190, 198, 222, .55); pointer-events: none; }


/* ===== トップ画面の並び（左: 対戦 / 右: ニックネーム・デッキ編集・チュートリアル・オンラインの状況）===== */
.top-mid { align-items: stretch; gap: 40px; }
.top-mid .top-group.play { justify-content: space-between; }
.top-mid .top-group.play .menu-item { flex: 1; font-size: 25px; padding: 8px 20px; }
.top-right { display: flex; flex-direction: column; gap: 10px; width: 470px; }
.top-right .top-group { gap: 6px; padding: 8px 16px 10px; }
.top-right .menu-item { font-size: 24px; padding: 9px 20px; }
.top-codebox { display: flex; flex-direction: column; gap: 3px; }
.top-code { display: flex; align-items: stretch; gap: 10px; }
.top-code .menu-item { flex: 1; width: auto; font-size: 25px; padding: 8px 14px; }
.top-code-input { width: 138px; flex: none; font-size: 26px; letter-spacing: 6px; }
.top-code-hint { margin-top: 0; font-size: 13px; text-align: left; min-height: 16px; }
.top-nick { display: grid; grid-template-columns: 112px 1fr; align-items: center; column-gap: 8px; row-gap: 2px; text-align: left; }
.top-nick-label { font-size: 17px; color: #d6dcf0; }
.top-nick-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 20px; color: var(--text); background: #0d1630; border: 2px solid #8fa3d6; border-radius: 8px; padding: 6px 10px; -webkit-user-select: text; user-select: text; }
.top-nick-input:focus { outline: none; border-color: var(--gold); }
.top-nick-input.ok { border-color: #7fe09a; }
.top-nick-input.bad { border-color: #ff9a8a; background: #2a1118; }
.top-nick-hint { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; color: #aab6d8; min-height: 16px; }
.top-nick-hint.warn { color: #ffb86b; }
.top-nick-hint.ok { color: #9fe8c9; }
.top-stats { width: 100%; box-sizing: border-box; padding: 8px 16px 8px; border: 2px solid #8fa3d6; border-radius: 14px; background: rgba(6,10,24,.45); text-align: left; }
.top-stat-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.top-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 2px; border-bottom: 1px solid rgba(143,163,214,.25); }
.top-stat-label { font-size: 15px; color: #d6dcf0; }
.top-stat-value { font-size: 19px; font-weight: bold; color: var(--gold); font-variant-numeric: tabular-nums; }
.top-stat-note { font-size: 12px; color: #aab6d8; min-height: 14px; margin-top: 2px; }

/* タリスポッドを使った時の演出: ダイスの上にアイコンが現れて光る（+1は、そのあと出る）。使い終わったゲージの印は、光が散る */
.die-talis { position: absolute; left: 50%; top: -74px; width: 64px; height: 64px; margin-left: -32px; pointer-events: none; animation: talis-use .8s ease-out both; }
.die-talis img { display: block; width: 100%; height: 100%; }
.die-talis::before { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid rgba(140,210,255,.95); box-shadow: 0 0 18px 6px rgba(90,170,255,.8); animation: talis-ring .8s ease-out both; }
@keyframes talis-use { 0% { transform: scale(.2); opacity: 0; filter: brightness(2.4) drop-shadow(0 0 4px #fff); } 30% { transform: scale(1.6); opacity: 1; filter: brightness(2) drop-shadow(0 0 22px #9fd8ff) drop-shadow(0 0 40px #4aa8ff); } 65% { transform: scale(1); filter: brightness(1.3) drop-shadow(0 0 14px #7cc4ff); } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 10px #7cc4ff); } }
@keyframes talis-ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.gauge-talis.spent img { animation: talis-spent .9s ease-out both; }
@keyframes talis-spent { 0% { filter: brightness(2.6) drop-shadow(0 0 16px #bfe6ff); opacity: 1; transform: scale(1.35); } 100% { filter: grayscale(1) brightness(.62) contrast(1.05); opacity: .8; transform: scale(1); } }