/* チペニオン カード対戦のスタイル。
   - 対戦中は .reaction-window.card-game-mode で画面いっぱいに広げる
   - 対戦盤(.cg-board)は360×640でページスクロールなしに収める
   - 画像が無くても種類別グラデーションのプレースホルダーで遊べる */

/* ==== TYPEリンク窓の全画面化 ==== */
.reaction-window.card-game-mode {
    inset: 8px !important;
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
}
.reaction-window.card-game-mode .reaction-window-header,
.reaction-window.card-game-mode .type-link-status,
.reaction-window.card-game-mode .reaction-tabs { display: none; }
.reaction-window.card-game-mode .reaction-window-body { padding: 0; overflow: hidden; }
@media (max-width: 700px) {
    .reaction-window.card-game-mode {
        inset: 0 !important;
        width: 100%;
        height: 100dvh;
        border: 0;
    }
}
/* 中画面時は通常のTYPEリンク窓のまま(cg-miniを表示) */
.reaction-window.mobile-mid.card-game-mode {
    inset: auto 0 0 0 !important;
    width: 100%;
    height: 52dvh;
}
.reaction-window.mobile-mid.card-game-mode .reaction-window-header { display: flex; }
.reaction-window.mobile-mid.card-game-mode .reaction-window-body { padding: 10px; overflow: auto; }

/* ==== 基本 ==== */
.cg-root {
    --cg-accent: var(--accent, #1971c2);
    --cg-line: var(--line, #d0d0cd);
    --cg-surface: var(--surface, #ffffff);
    --cg-surface-2: var(--surface-2, #f2f2ef);
    --cg-text: inherit;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    overflow: hidden;
    position: relative;
}
.cg-root button { cursor: pointer; border: 1px solid var(--cg-line); background: var(--cg-surface); color: inherit; }
.cg-root button:disabled { opacity: .4; cursor: not-allowed; }
.cg-primary { border-color: var(--cg-accent) !important; background: var(--cg-accent) !important; color: #fff !important; font-weight: 700; }
.cg-note { color: var(--muted, #777); font-size: .72rem; line-height: 1.5; margin: 6px 0; }
.cg-error { color: #c92626; font-size: .74rem; margin: 6px 0; }
.cg-scroll { overflow: auto; }

/* ==== ヘッダー(44px) ==== */
.cg-header {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 12px;
    padding-top: env(safe-area-inset-top);
    box-sizing: content-box;
    border-bottom: 1px solid var(--cg-line);
    background: var(--cg-surface-2);
}
.cg-header strong { font-size: .9rem; }
.cg-header small { color: var(--muted, #777); font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-conn { margin-left: auto; }
.cg-header-buttons { display: flex; gap: 2px; }
.cg-header-buttons button { width: 34px; height: 34px; border: 0; background: transparent; font-size: .95rem; }
.cg-header-buttons button:hover { background: var(--hover, rgb(0 0 0 / 6%)); }

/* ==== ロビー・作成・待機 ==== */
.cg-lobby, .cg-create, .cg-waiting, .cg-connecting, .cg-result {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px;
}
.cg-lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cg-lobby h3, .cg-create h3, .cg-waiting h3, .cg-result h3 { margin: 0 0 8px; font-size: 1rem; display: flex; flex-direction: column; }
.cg-lobby h3 small, .cg-waiting h3 small { color: var(--muted, #777); font-size: .66rem; font-weight: 400; }
.cg-field { display: block; margin: 8px 0; font-size: .72rem; color: var(--muted, #777); }
.cg-field input, .cg-field select {
    display: block; width: 100%; box-sizing: border-box; margin-top: 3px;
    height: 34px; padding: 0 8px; border: 1px solid var(--cg-line); background: var(--cg-surface); color: inherit; font-size: 14px;
}
.cg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cg-room-list { display: grid; gap: 6px; margin-top: 8px; }
.cg-room { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; text-align: left; }
.cg-room:hover { background: var(--hover, rgb(0 0 0 / 5%)); }
.cg-room small { color: var(--muted, #777); font-size: .66rem; }
.cg-dialog-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.cg-dialog-actions button { min-height: 36px; padding: 6px 14px; }
.cg-seat-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 5px; }
.cg-seat-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--cg-line); background: var(--cg-surface-2); }
.cg-seat-list li.ready { border-color: #2f9e44; }
.cg-seat-list li.me { box-shadow: inset 3px 0 var(--cg-accent); }
.cg-seat-list li small { margin-left: auto; color: var(--muted, #777); }
.cg-seat-no { font-size: .68rem; color: var(--muted, #777); }
.cg-seat-empty { color: var(--muted, #777); justify-content: center; border-style: dashed !important; }
.cg-mismatch { border: 1px solid #c92626; background: rgb(201 38 38 / 8%); padding: 9px 11px; font-size: .72rem; }
.cg-mismatch p { margin: 4px 0 0; }
.cg-connecting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.cg-spinner { width: 34px; height: 34px; border: 3px solid var(--cg-line); border-top-color: var(--cg-accent); border-radius: 50%; animation: cg-spin 1s linear infinite; }
@keyframes cg-spin { to { transform: rotate(360deg); } }

/* ==== 対戦盤(360×640基準・スクロールなし) ==== */
.cg-board {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: 46px 34px 42px minmax(110px, 150px) 55px minmax(100px, 130px) 50px;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}
.cg-opponents { display: flex; gap: 4px; padding: 4px 6px; overflow: hidden; }
.cg-opponent {
    flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 2px 7px; border: 1px solid var(--cg-line); background: var(--cg-surface-2); line-height: 1.15;
}
.cg-opponent strong { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-opponent small { font-size: .58rem; color: var(--muted, #777); }
.cg-opponent.active { border-color: var(--cg-accent); animation: cg-glow 2.4s ease-in-out infinite; }
.cg-opponent.disconnected { opacity: .55; border-style: dashed; }
.cg-opponent.resigned { opacity: .4; }
@keyframes cg-glow {
    0%, 100% { box-shadow: 0 0 0 rgb(25 113 194 / 0%); }
    50% { box-shadow: 0 0 10px rgb(25 113 194 / 55%); }
}
.cg-turnbar {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 0 10px; border-block: 1px solid var(--cg-line); background: var(--cg-surface-2); font-size: .7rem;
}
.cg-turnbar.mine { background: var(--cg-accent); color: #fff; }

/* 基本サプライ: 7山を横1列 */
.cg-supply-base { display: flex; gap: 3px; padding: 4px 6px; overflow: hidden; }
.cg-pile {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1px 2px; line-height: 1.1; position: relative; border: 1px solid var(--cg-line);
}
.cg-pile-cost { font-size: .58rem; color: var(--muted, #777); }
.cg-pile-name { font-size: .6rem; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cg-pile-count { font-size: .66rem; font-weight: 700; }
.cg-pile.cg-empty-pile { opacity: .45; }
.cg-pile.cg-type-treasure { background: linear-gradient(180deg, #fdf3d8, #f8e3ae); color: #5a4300; }
.cg-pile.cg-type-victory { background: linear-gradient(180deg, #ddf3de, #b9e4bd); color: #1c4a20; }
.cg-pile.cg-type-curse { background: linear-gradient(180deg, #e8def2, #cdb9e0); color: #432b58; }
.cg-buyable { outline: 2px solid var(--cg-accent); outline-offset: -2px; }
.cg-pickable { outline: 2px solid #e8590c; outline-offset: -2px; }

/* 王国サプライ: 広い画面5×2、狭い画面4+3+3相当の折り返し */
.cg-supply-kingdom {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
    padding: 4px 6px; min-height: 0; overflow: hidden; align-content: stretch;
}
@media (max-width: 379px) {
    .cg-supply-kingdom { grid-template-columns: repeat(4, 1fr); }
}

/* 使用中・選択領域 */
.cg-play-area {
    display: flex; align-items: center; gap: 5px; padding: 3px 8px;
    border-block: 1px solid var(--cg-line); background: var(--cg-surface-2); overflow-x: auto; overflow-y: hidden;
}
.cg-choice-prompt { font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.cg-choice-button { min-height: 34px; padding: 4px 12px; flex-shrink: 0; font-size: .72rem; }
.cg-revealed { font-size: .66rem; color: var(--muted, #777); flex-shrink: 0; }

/* ==== カード ==== */
.cg-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    border: 1px solid var(--cg-line); background: var(--cg-surface); user-select: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.cg-card-art { flex: 1; min-height: 0; position: relative; overflow: hidden; display: grid; place-items: center; }
.cg-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-card-fallback { font-size: 1.5rem; opacity: .55; }
.cg-type-action .cg-card-art { background: linear-gradient(160deg, #dbe8f5, #b9cfe8); }
.cg-type-attack .cg-card-art { background: linear-gradient(160deg, #f5dbdb, #e8b9b9); }
.cg-type-reaction .cg-card-art { background: linear-gradient(160deg, #dbf0f5, #b9dde8); }
.cg-type-treasure .cg-card-art { background: linear-gradient(160deg, #fdf3d8, #f3d98e); }
.cg-type-victory .cg-card-art { background: linear-gradient(160deg, #ddf3de, #a9dcae); }
.cg-type-curse .cg-card-art { background: linear-gradient(160deg, #e8def2, #c4abd9); }
.cg-card-cost {
    position: absolute; top: 2px; left: 2px; min-width: 15px; height: 15px;
    display: grid; place-items: center; border-radius: 50%;
    background: rgb(0 0 0 / 62%); color: #ffd43b; font-size: .6rem; font-weight: 700;
}
.cg-card-count {
    position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
    display: grid; place-items: center; border-radius: 8px;
    background: rgb(255 255 255 / 85%); color: #333; font-size: .6rem; font-weight: 700;
}
.cg-card-count.cg-empty { background: #c92626; color: #fff; }
.cg-card-name {
    flex: 0 0 auto; padding: 1px 2px; font-size: .58rem; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--cg-surface);
}
.cg-card-check {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgb(25 113 194 / 25%); color: #fff; font-size: 1.4rem; font-weight: 700; text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}
.cg-card.cg-selected { transform: translateY(-12px); box-shadow: 0 6px 14px rgb(0 0 0 / 30%); border-color: var(--cg-accent); z-index: 2; }
.cg-card.cg-dimmed { opacity: .45; }
.cg-card-small .cg-card-name { font-size: .55rem; }

/* ==== 手札(扇状の重ね表示) ==== */
.cg-hand { display: flex; align-items: stretch; min-height: 0; padding: 6px 4px 2px; overflow: hidden; }
.cg-hand-cards { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: stretch; padding-top: 12px; }
.cg-hand-cards .cg-card { width: 74px; flex: 0 1 74px; margin-left: -18px; }
.cg-hand-cards .cg-card:first-child { margin-left: 0; }
/* 8枚以上は重なりを自動で深くする */
.cg-hand-cards:has(.cg-card:nth-child(8)) .cg-card { margin-left: -34px; }
.cg-hand-cards:has(.cg-card:nth-child(10)) .cg-card { margin-left: -44px; }
.cg-hand-page { flex: 0 0 26px; font-size: 1rem; }
.cg-hand-choice { background: rgb(232 89 12 / 7%); }

/* ==== 操作バー ==== */
.cg-actionbar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cg-line); background: var(--cg-surface-2);
}
.cg-actionbar button { min-height: 38px; padding: 4px 16px; font-size: .78rem; }
.cg-actionbar-info { font-size: .72rem; color: var(--muted, #777); }

/* ==== オーバーレイ ==== */
.cg-overlay {
    position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
    background: rgb(0 0 0 / 45%); padding: 14px;
}
.cg-dialog {
    width: min(340px, 100%); max-height: 100%; overflow: auto; position: relative;
    background: var(--cg-surface); border: 1px solid var(--cg-line); padding: 13px; box-shadow: 0 10px 28px rgb(0 0 0 / 30%);
}
.cg-dialog h4 { margin: 0 0 8px; font-size: .9rem; display: flex; justify-content: space-between; align-items: center; }
.cg-close { width: 30px; height: 30px; border: 0; background: transparent; font-size: 1rem; }
.cg-toggle { display: flex; align-items: center; gap: 8px; margin: 9px 0; font-size: .76rem; }
.cg-leave { margin-top: 12px; width: 100%; min-height: 36px; border-color: #c92626; color: #c92626; }
.cg-detail { display: flex; gap: 12px; max-width: min(430px, 100%); max-height: 100%; background: var(--cg-surface); border: 1px solid var(--cg-line); padding: 12px; }
.cg-detail .cg-card { width: 150px; height: 225px; flex: 0 0 150px; cursor: default; }
.cg-detail-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cg-detail-info p { font-size: .76rem; line-height: 1.55; margin: 6px 0; overflow: auto; }
.cg-detail-info small { color: var(--muted, #777); }
@media (max-width: 420px) {
    .cg-detail { flex-direction: column; align-items: center; }
}
.cg-log, .cg-chat { list-style: none; margin: 0; padding: 0; font-size: .7rem; display: grid; gap: 3px; max-height: 50vh; overflow: auto; }
.cg-chat li strong { color: var(--cg-accent); margin-right: 4px; }
.cg-chat-input { display: flex; gap: 5px; margin-top: 8px; }
.cg-chat-input input { flex: 1; height: 34px; padding: 0 8px; border: 1px solid var(--cg-line); background: var(--cg-surface); color: inherit; font-size: 14px; }

/* ==== 結果 ==== */
.cg-ranking { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.cg-ranking li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cg-line); background: var(--cg-surface-2); }
.cg-ranking li.winner { border-color: #c9a227; background: linear-gradient(180deg, var(--cg-surface-2), rgb(201 162 39 / 15%)); }
.cg-ranking li.me { box-shadow: inset 3px 0 var(--cg-accent); }
.cg-rank { font-weight: 700; }
.cg-ranking small { margin-left: auto; color: var(--muted, #777); }

/* ==== 通知トースト(ゆったり演出) ==== */
.cg-toasts {
    position: absolute; top: 25%; left: 0; right: 0; z-index: 25;
    display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.cg-toast {
    padding: 10px 22px; border-radius: 4px; background: rgb(20 24 34 / 88%); color: #fff;
    font-size: .95rem; font-weight: 700; letter-spacing: .04em;
    animation: cg-toast-in .55s ease both;
    display: flex; align-items: center; gap: 8px; max-width: 88%;
}
.cg-toast-card { font-size: .72rem; font-weight: 400; padding: 2px 8px; background: rgb(255 255 255 / 16%); border-radius: 3px; }
.cg-toast-my-turn { background: rgb(25 113 194 / 92%); font-size: 1.1rem; }
.cg-toast-opp-turn { background: rgb(60 66 80 / 88%); }
.cg-toast-attack { background: rgb(190 45 45 / 90%); }
.cg-toast-block { background: rgb(28 122 138 / 90%); }
.cg-toast-game-start, .cg-toast-game-end { background: rgb(120 78 190 / 92%); font-size: 1.1rem; }
.cg-toast-leader-change { background: rgb(200 128 28 / 92%); }
.cg-toast-minimal { animation: cg-toast-fade .3s ease both; }
@keyframes cg-toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cg-toast-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .cg-toast { animation: cg-toast-fade .2s ease both; }
    .cg-opponent.active { animation: none; box-shadow: 0 0 0 2px var(--cg-accent); }
    .cg-card { transition: none; }
}

/* ==== 切断バナー ==== */
.cg-disconnect-banner {
    position: absolute; bottom: 190px; left: 8px; right: 8px; z-index: 20;
    padding: 7px 11px; border: 1px solid #e8590c; background: rgb(232 89 12 / 12%); font-size: .7rem;
}
.cg-disconnect-banner p { margin: 2px 0; }

/* ==== 中画面ミニ表示 ==== */
.cg-mini { padding: 6px 4px; }
.cg-mini strong { font-size: .82rem; }
.cg-mini p { margin: 4px 0; font-size: .74rem; }
.cg-mini-actions { display: flex; gap: 6px; margin-top: 8px; }
.cg-mini-actions button { min-height: 36px; padding: 5px 14px; }

/* ==== PC・横長レイアウト(700px以上) ==== */
@media (min-width: 700px) {
    /* 左:相手一覧 / 中央:サプライ+使用中 / 下:手札と操作バー */
    .cg-board {
        grid-template-columns: 170px minmax(0, 1fr);
        grid-template-rows: 34px 52px minmax(0, 1fr) 62px minmax(120px, 165px) 52px;
    }
    .cg-turnbar { grid-area: 1 / 1 / 2 / 3; }
    .cg-opponents { grid-area: 2 / 1 / 5 / 2; flex-direction: column; justify-content: flex-start; padding: 8px; gap: 6px; overflow: auto; border-right: 1px solid var(--cg-line); }
    .cg-opponent { flex: 0 0 auto; padding: 7px 9px; }
    .cg-opponent strong { font-size: .78rem; }
    .cg-opponent small { font-size: .66rem; }
    .cg-supply-base { grid-area: 2 / 2 / 3 / 3; padding: 6px 10px; }
    .cg-supply-kingdom { grid-area: 3 / 2 / 4 / 3; padding: 6px 10px; gap: 8px; }
    .cg-play-area { grid-area: 4 / 2 / 5 / 3; border: 0; border-top: 1px solid var(--cg-line); }
    .cg-hand { grid-area: 5 / 1 / 6 / 3; }
    .cg-actionbar { grid-area: 6 / 1 / 7 / 3; }
    .cg-hand-cards .cg-card { width: 96px; flex-basis: 96px; margin-left: -10px; }
    .cg-pile-name { font-size: .68rem; }
    .cg-card-name { font-size: .66rem; }
}

/* 高さが低い画面では王国カード名を省略しない範囲で圧縮 */
@media (max-height: 600px) {
    .cg-board { grid-template-rows: 40px 30px 38px minmax(90px, 1fr) 44px minmax(84px, 110px) 44px; }
    .cg-hand-cards .cg-card { width: 64px; flex-basis: 64px; }
}

/* ==== 2026-08-09 polish: 星環都市テーブル ==== */
.cg-root {
    --cg-accent: #b8893e;
    --cg-gold: #d7b86c;
    --cg-cyan: #6bc3c5;
    --cg-night: #0b1720;
    --cg-night-2: #122631;
    font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
}
.cg-root button { border-radius: 3px; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.cg-root button:not(:disabled):active { transform: translateY(1px); }
.cg-root button:focus-visible, .cg-root input:focus-visible, .cg-root select:focus-visible {
    outline: 2px solid var(--cg-cyan); outline-offset: 2px;
}
.cg-primary {
    border-color: #e3c77d !important;
    background: linear-gradient(180deg, #a87632, #76501f) !important;
    color: #fff8df !important;
    box-shadow: inset 0 1px rgb(255 255 255 / 20%), 0 2px 7px rgb(0 0 0 / 18%);
}
.cg-lobby, .cg-create, .cg-waiting, .cg-connecting, .cg-result {
    color: #eaf1ef;
    background:
        radial-gradient(circle at 85% 10%, rgb(87 173 176 / 16%), transparent 34%),
        linear-gradient(135deg, transparent 0 49.5%, rgb(255 255 255 / 3%) 49.5% 50.5%, transparent 50.5%) 0 0 / 28px 28px,
        linear-gradient(155deg, #152d39, #09141d 74%);
    scrollbar-color: #59737b #0c1921;
}
.cg-lobby { padding: 10px 12px 14px; }
.cg-lobby-hero {
    position: relative; min-height: 152px; display: flex; align-items: center; overflow: hidden;
    margin: -10px -12px 12px; padding: 18px 210px 18px 20px;
    border-bottom: 1px solid rgb(215 184 108 / 65%);
    background:
        linear-gradient(90deg, rgb(7 18 26 / 96%) 0 48%, rgb(7 18 26 / 50%) 76%, rgb(7 18 26 / 86%)),
        radial-gradient(circle at 72% 42%, rgb(107 195 197 / 24%), transparent 34%);
    box-shadow: inset 0 -16px 30px rgb(0 0 0 / 28%);
}
.cg-lobby-hero::before, .cg-lobby-hero::after {
    content: ""; position: absolute; pointer-events: none;
}
.cg-lobby-hero::before { inset: 8px; border: 1px solid rgb(215 184 108 / 22%); }
.cg-lobby-hero::after { left: 20px; bottom: 13px; width: 74px; height: 2px; background: var(--cg-gold); box-shadow: 82px 0 rgb(107 195 197 / 70%); }
.cg-brand-copy { position: relative; z-index: 2; min-width: 0; }
.cg-kicker { display: block; color: var(--cg-gold); font: 700 .58rem Georgia, serif; letter-spacing: .22em; }
.cg-brand-copy h3 { margin: 4px 0 9px; color: #fff8df; font: 800 1.45rem Georgia, "Yu Mincho", serif; letter-spacing: .06em; text-shadow: 0 2px 12px rgb(0 0 0 / 70%); }
.cg-brand-copy h3 small { margin-top: 4px; color: #abc2c5; font: 500 .63rem "Yu Gothic UI", sans-serif; letter-spacing: .02em; }
.cg-feature-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.cg-feature-badges span { padding: 3px 6px; border: 1px solid rgb(107 195 197 / 38%); background: rgb(5 20 27 / 65%); color: #cae5e4; font-size: .57rem; }
.cg-card-fan { position: absolute; z-index: 1; top: 13px; right: 24px; width: 178px; height: 132px; }
.cg-card-fan img {
    position: absolute; top: 5px; left: 56px; width: 72px; height: 108px; object-fit: cover;
    border: 1px solid #e0c27a; border-radius: 4px; box-shadow: 0 10px 20px rgb(0 0 0 / 52%);
}
.cg-card-fan img:first-child { transform: translate(-42px, 9px) rotate(-14deg); }
.cg-card-fan img:nth-child(2) { z-index: 2; transform: translateY(-2px); }
.cg-card-fan img:last-child { transform: translate(42px, 9px) rotate(14deg); }
.cg-lobby-head { margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid rgb(215 184 108 / 28%); }
.cg-lobby-head>strong { color: #fff1c9; font: 700 .78rem Georgia, "Yu Mincho", serif; letter-spacing: .05em; }
.cg-lobby-status {
    display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 12px;
    border: 1px solid rgb(215 184 108 / 28%); background: rgb(3 15 22 / 52%);
    box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 5px 14px rgb(0 0 0 / 15%);
}
.cg-lobby-stat { display: flex; align-items: baseline; justify-content: center; gap: 7px; min-width: 0; padding: 8px 10px; }
.cg-lobby-stat + .cg-lobby-stat { border-left: 1px solid rgb(215 184 108 / 20%); }
.cg-lobby-stat strong { color: #ffe09a; font: 700 1.15rem Georgia, serif; }
.cg-lobby-stat span { color: #9db3b7; font-size: .61rem; letter-spacing: .04em; }
.cg-lobby-tools { display: flex; gap: 6px; }
.cg-lobby-tools button { min-height: 29px; padding: 4px 10px; }
.cg-lobby .cg-field, .cg-create .cg-field, .cg-waiting .cg-field { color: #b8cbcd; }
.cg-lobby .cg-field input, .cg-create .cg-field input, .cg-create .cg-field select, .cg-waiting .cg-field input {
    border-color: #49616a; background: rgb(4 17 24 / 76%); color: #f2f6f4; box-shadow: inset 0 1px 4px rgb(0 0 0 / 35%);
}
.cg-lobby .cg-field input::placeholder, .cg-create .cg-field input::placeholder { color: #748b91; }
.cg-room-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 10px; }
.cg-room {
    position: relative; min-height: 112px; padding: 11px 12px 10px 15px; border-color: #425b64 !important; color: #edf5f3 !important;
    background: linear-gradient(145deg, rgb(21 48 58 / 94%), rgb(8 23 31 / 96%)) !important;
    box-shadow: inset 3px 0 var(--cg-gold), 0 5px 12px rgb(0 0 0 / 18%);
}
.cg-room:hover { border-color: var(--cg-gold) !important; background: linear-gradient(145deg, #1d4653, #0c242e) !important; }
.cg-room small { color: #9eb5b8; }
.cg-room-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-room-head strong { overflow: hidden; color: #fff5d7; font: 700 .78rem Georgia, "Yu Mincho", serif; text-overflow: ellipsis; white-space: nowrap; }
.cg-room-seats { flex: none; padding: 2px 7px; border: 1px solid rgb(107 195 197 / 40%); color: #cce7e5; background: rgb(4 19 26 / 62%); font: 700 .6rem Georgia, serif; }
.cg-room-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cg-room-meta span { padding: 2px 6px; border: 1px solid rgb(215 184 108 / 23%); color: #bfcfd0; background: rgb(3 14 20 / 42%); font-size: .55rem; }
.cg-room-players { display: block; overflow: hidden; margin-top: 7px; padding-right: 64px; text-overflow: ellipsis; white-space: nowrap; }
.cg-room-enter { position: absolute; right: 11px; bottom: 9px; color: #e2c573; font-size: .58rem; letter-spacing: .04em; }
.cg-empty-lobby {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px;
    min-height: 92px; padding: 13px 14px; border: 1px dashed #4d6870;
    background: linear-gradient(120deg, rgb(20 48 58 / 65%), rgb(5 20 27 / 46%));
}
.cg-empty-emblem { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--cg-gold); color: #f5d681; background: rgb(5 19 26 / 72%); font: 700 1.15rem Georgia, serif; transform: rotate(45deg); }
.cg-empty-emblem::first-letter { transform: rotate(-45deg); }
.cg-empty-lobby div { min-width: 0; }
.cg-empty-lobby strong, .cg-empty-lobby small { display: block; }
.cg-empty-lobby strong { color: #fff3d0; font: 700 .76rem Georgia, "Yu Mincho", serif; }
.cg-empty-lobby small { margin-top: 4px; color: #9fb4b8; font-size: .58rem; }
.cg-lobby-guide { margin-top: 14px; padding: 12px 13px; border-top: 1px solid rgb(215 184 108 / 31%); border-bottom: 1px solid rgb(215 184 108 / 18%); background: rgb(4 18 25 / 35%); }
.cg-lobby-guide header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cg-lobby-guide header strong { color: #e9f0ed; font: 700 .72rem Georgia, "Yu Mincho", serif; }
.cg-guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cg-guide-step, .cg-guide-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid rgb(73 101 109 / 70%); background: rgb(12 38 47 / 64%); }
.cg-guide-steps b { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgb(215 184 108 / 64%); color: #f4d17b; font: 700 .7rem Georgia, serif; }
.cg-guide-steps span, .cg-guide-steps strong, .cg-guide-steps small { display: block; min-width: 0; }
.cg-guide-steps strong { color: #eaf1ef; font-size: .63rem; }
.cg-guide-steps small { margin-top: 2px; color: #91a8ac; font-size: .52rem; line-height: 1.35; }
.cg-lobby>.cg-note { min-height: 70px; display: grid; place-items: center; padding: 14px; border: 1px dashed #49616a; color: #91a9ad; text-align: center; }
.cg-section-heading { display: flex; align-items: center; gap: 11px; margin: -2px 0 13px; padding-bottom: 11px; border-bottom: 1px solid rgb(215 184 108 / 34%); }
.cg-section-heading h3 { margin: 2px 0 1px; color: #fff6da; font: 800 1.05rem Georgia, "Yu Mincho", serif; }
.cg-section-heading small { color: #a9bec1; font-size: .62rem; }
.cg-section-emblem { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--cg-gold); color: var(--cg-gold); background: rgb(4 18 25 / 68%); font: 700 1.25rem Georgia, serif; transform: rotate(45deg); }
.cg-section-emblem i { display: block; font-style: normal; transform: rotate(-45deg); }
.cg-create { max-width: none; }
.cg-create>.cg-field, .cg-create>.cg-field-row, .cg-create>.cg-note, .cg-create>.cg-error, .cg-create>.cg-dialog-actions { width: min(660px, 100%); margin-inline: auto; }
.cg-create>.cg-field-row { margin-block: 0; }
.cg-create>.cg-dialog-actions { padding-top: 8px; border-top: 1px solid rgb(215 184 108 / 24%); }
.cg-seat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cg-seat-list li { min-height: 48px; border-color: #415961; background: rgb(5 21 28 / 72%); color: #edf4f2; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%); }
.cg-seat-list li::before { content: "♟"; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #557079; color: var(--cg-gold); background: #0a2029; }
.cg-seat-list li.ready { border-color: #57a96b; box-shadow: inset 3px 0 #57a96b, 0 0 12px rgb(87 169 107 / 12%); }
.cg-seat-list li.me { box-shadow: inset 3px 0 var(--cg-cyan); }
.cg-seat-list li small, .cg-seat-no { color: #9fb4b8; }
.cg-seat-empty { color: #7d9499 !important; }
.cg-seat-empty::before { content: "+" !important; color: #6f8990 !important; border-style: dashed !important; }
.cg-dialog { color: var(--text, #222); border-radius: 4px; }

/* 対戦盤はカード絵を主役にし、UIを実物のテーブルに寄せる。 */
.cg-phase-playing, .cg-phase-starting, .cg-phase-reconnecting, .cg-phase-result {
    --cg-line: #425b64; --cg-surface: #f5f1e7; --cg-surface-2: #162b35;
    color: #edf4f2; background: var(--cg-night);
}
.cg-header { border-bottom-color: #a98747; background: linear-gradient(180deg, #1e3a45, #10252f); box-shadow: 0 3px 14px rgb(0 0 0 / 28%); }
.cg-header strong { color: #fff1c7; font-family: Georgia, "Yu Mincho", serif; letter-spacing: .08em; }
.cg-header small { color: #a9c0c2; }
.cg-header-buttons button { color: #eaf1ef; }
.cg-board {
    background:
        radial-gradient(ellipse at 58% 32%, rgb(85 167 169 / 12%), transparent 36%),
        linear-gradient(45deg, transparent 49.5%, rgb(255 255 255 / 2.5%) 49.5% 50.5%, transparent 50.5%) 0 0 / 22px 22px,
        linear-gradient(160deg, #102a35, #07151d 75%);
}
.cg-opponents { background: rgb(3 15 21 / 38%); }
.cg-opponent { border-color: #405a63; background: linear-gradient(145deg, #183640, #0d252e); box-shadow: inset 3px 0 #57727a; }
.cg-opponent small { color: #a8bec1; }
.cg-opponent.active { border-color: var(--cg-gold); box-shadow: inset 3px 0 var(--cg-gold), 0 0 13px rgb(215 184 108 / 24%); }
.cg-turnbar { border-color: #4b656d; background: linear-gradient(180deg, #1d3b45, #112a34); color: #dfe9e7; box-shadow: 0 3px 10px rgb(0 0 0 / 18%); }
.cg-turnbar span:nth-child(2) { color: #ffe39a; font-weight: 800; letter-spacing: .08em; }
.cg-turnbar.mine { background: linear-gradient(180deg, #98702f, #6f4d20); color: #fff8e6; }
.cg-supply-base { border-bottom: 1px solid rgb(215 184 108 / 22%); background: rgb(3 16 22 / 34%); }
.cg-pile { border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%), 0 3px 8px rgb(0 0 0 / 24%); }
.cg-supply-kingdom { perspective: 800px; }
.cg-card { border-color: #97805a; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 10px rgb(0 0 0 / 30%); }
.cg-card:not(.cg-dimmed):hover { transform: translateY(-3px); border-color: #f0d48a; box-shadow: 0 8px 18px rgb(0 0 0 / 40%); }
.cg-card-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%), inset 0 -18px 22px rgb(0 0 0 / 10%); }
.cg-card-name { padding: 2px 3px; border-top: 1px solid #bca77c; background: linear-gradient(180deg, #fffaf0, #e9deca); color: #243038; font-family: Georgia, "Yu Mincho", serif; font-weight: 700; }
.cg-card-cost { top: 3px; left: 3px; min-width: 18px; height: 18px; border: 1px solid #f1d376; background: radial-gradient(circle at 35% 30%, #af8136, #4a3214); }
.cg-card-count { top: 3px; right: 3px; border: 1px solid rgb(0 0 0 / 28%); }
.cg-buyable { outline-color: #f2d277; filter: drop-shadow(0 0 4px rgb(242 210 119 / 42%)); }
.cg-pickable { outline-color: #61d2d0; filter: drop-shadow(0 0 5px rgb(97 210 208 / 44%)); }
.cg-play-area { border-color: #49636b; background: linear-gradient(180deg, rgb(30 60 69 / 88%), rgb(12 34 43 / 90%)); }
.cg-hand { border-top: 1px solid rgb(215 184 108 / 30%); background: radial-gradient(ellipse at 50% 100%, rgb(137 102 48 / 18%), transparent 62%), rgb(4 17 24 / 54%); }
.cg-hand-cards .cg-card { transform-origin: 50% 115%; }
.cg-hand-cards .cg-card:nth-child(odd) { transform: rotate(-1.3deg); }
.cg-hand-cards .cg-card:nth-child(even) { transform: rotate(1.3deg); }
.cg-hand-cards .cg-card.cg-selected { transform: translateY(-12px) rotate(0); border-color: #f2d277; box-shadow: 0 8px 18px rgb(0 0 0 / 48%), 0 0 0 2px rgb(242 210 119 / 40%); }
.cg-actionbar { border-top-color: #a47f3c; background: linear-gradient(180deg, #1c3640, #0d222b); box-shadow: 0 -4px 14px rgb(0 0 0 / 25%); }
.cg-actionbar button { border-color: #60777d; background: #132d37; color: #edf4f2; }
.cg-actionbar-info { color: #afc2c4; }
.cg-ranking li { border-color: #496068; background: rgb(5 21 28 / 72%); color: #eef4f2; }
.cg-ranking li.winner { border-color: var(--cg-gold); background: linear-gradient(135deg, rgb(124 87 31 / 55%), rgb(10 31 39 / 78%)); box-shadow: 0 0 18px rgb(215 184 108 / 16%); }

@media (max-width: 560px) {
    .cg-lobby-hero { min-height: 138px; padding: 15px 142px 15px 15px; }
    .cg-card-fan { right: -6px; transform: scale(.78); transform-origin: right center; }
    .cg-brand-copy h3 { font-size: 1.2rem; }
    .cg-feature-badges span:nth-child(n+3) { display: none; }
    .cg-lobby-stat { display: grid; gap: 1px; padding: 7px 4px; text-align: center; }
    .cg-lobby-stat strong { font-size: 1rem; }
    .cg-lobby-stat span { font-size: .51rem; }
    .cg-empty-lobby { grid-template-columns: auto 1fr; gap: 11px; }
    .cg-empty-lobby .cg-primary { grid-column: 1 / -1; width: 100%; }
    .cg-guide-steps { grid-template-columns: 1fr; }
    .cg-guide-steps li { min-height: 48px; }
    .cg-seat-list { grid-template-columns: 1fr; }
    .cg-field input, .cg-field select, .cg-chat-input input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .cg-root button, .cg-card { transition: none; }
    .cg-card-fan img { box-shadow: none; }
}