/* ==========================================================================
   DouShouQi.com — 棋盤 / 棋子 / 對局介面
   ========================================================================== */

/* ─────────────────────── 對局頁版面 ───────────────────────
   原則：棋盤越大越好。

   桌機：棋盤高度吃滿整個視窗（扣掉導覽列），寬度由高度 × 7/9 反推。
         雙方資訊列不放在棋盤上下，而是放到右側欄的頂端與底端 ——
         對手在上、自己在下，位置跟棋盤方位一致，棋盤也不必為它們讓出高度。
   手機：棋盤左右貼齊螢幕邊緣，資訊列與操作列緊貼在棋盤上下。              */

.game-page { padding: 14px 0 40px; }

.game-layout {
    --board-h: calc(100vh - var(--header-h) - 28px);
    --game-w: max(360px, min(920px, calc(var(--board-h) * 0.7778), calc(100vw - 420px)));
    display: grid;
    grid-template-columns: var(--game-w) minmax(300px, 380px);
    grid-template-areas:
        "board top"
        "board tools"
        "board side"
        "board bottom";
    grid-template-rows: auto auto 1fr auto;
    justify-content: center;
    align-items: start;
    gap: 12px 24px;
}
@supports (height: 100dvh) {
    .game-layout { --board-h: calc(100dvh - var(--header-h) - 28px); }
}

/* 桌機上 .game-main 只是語意容器，讓裡面的棋盤與資訊列直接參與外層格線 */
.game-main { display: contents; }
.game-main > .board-wrap { grid-area: board; width: 100%; max-width: none; margin: 0; }
#top-player { grid-area: top; }
#bottom-player { grid-area: bottom; align-self: end; }

.game-side {
    grid-area: side;
    display: grid;
    gap: 12px;
    min-width: 0;
    align-self: stretch;
    align-content: start;
}

/* ─────────────────────── 兩欄獨立的版面（線上對戰／觀戰） ───────────────────────
   左欄：棋盤 + 戰績；右欄：對手、操作、聊天與棋譜、自己。
   兩欄各自是一個直向容器，高度互不影響 —— 右邊的棋譜再長，也不會把左邊的戰績往下推。
   （單人對戰與教學沒有戰績面板，仍用上面那套格線。） */
.game-layout.split {
    grid-template-areas: none;
    grid-template-rows: none;
    align-items: start;
}
.split .game-left,
.split .game-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.split .game-left > .board-wrap { width: 100%; max-width: none; margin: 0; }
/* 右欄至少跟棋盤一樣高，「自己」的資訊列靠底，內容不多時剛好對齊棋盤下緣 */
.split .game-right { min-height: calc(var(--game-w) * 9 / 7 - 8.6px); }
.split #bottom-player { margin-top: auto; align-self: stretch; }
.split .game-side { align-self: auto; }

/* ─────────────────────── 本房戰績（線上對戰／觀戰） ───────────────────────
   放在棋盤正下方，跟棋盤同寬。樣式沿用右欄卡片（.side-card）。 */
.score-card { grid-area: score; }
.score-card[hidden] { display: none; }
.score-card .side-head i { color: var(--gold-deep); margin-right: 4px; }
.score-table { display: grid; }
.score-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 64px);
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 12px;
}
.score-row + .score-row { border-top: 2px solid var(--border-soft); border-radius: 0; }
.score-row.score-head + .score-row { border-top: 0; }
.score-head {
    padding-top: 0; padding-bottom: 6px;
    font-size: .76rem; font-weight: 800; color: var(--text-mute);
    border-bottom: 2px solid var(--border-soft); border-radius: 0;
}
.score-head span:not(:first-child), .score-num { text-align: center; }
.score-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.score-name img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-3); }
.score-name b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-name em {
    font-style: normal; font-size: .68rem; font-weight: 800; flex-shrink: 0;
    padding: 1px 8px; border-radius: 999px;
    background: var(--gold-dim); color: var(--gold-deep);
}
.score-num { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }
.score-num.win { color: var(--success); }
.score-num.loss { color: var(--danger); }
.score-row.me { background: linear-gradient(90deg, #fff8ea, transparent 70%); }

/* 教學頁：沒有玩家資訊列，右欄是「課程說明 → 上一課／下一課 → 課程列表」 */
.lesson-card { grid-area: lesson; }
.game-layout.lesson-first {
    grid-template-areas: "board lesson" "board tools" "board side";
    grid-template-rows: auto auto 1fr;
}

/* ─────────────────────── 操作列 ─────────────────────── */

.game-toolbar {
    grid-area: tools;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px;
    background: var(--surface);
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .16s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.tool-btn i { font-size: 1rem; color: var(--text-dim); }
.tool-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); }
.tool-btn:active:not(:disabled) { transform: scale(.97); }
.tool-btn:disabled { opacity: .4; cursor: not-allowed; }
.tool-btn.primary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-deep));
    border-color: rgba(224, 125, 8, .45);
    color: var(--gold-ink);
    box-shadow: 0 4px 14px rgba(247, 152, 36, .28);
}
.tool-btn.primary i { color: var(--gold-ink); }
.tool-btn.danger { color: #b8341f; border-color: rgba(224, 75, 52, .35); background: var(--danger-dim); }
.tool-btn.danger i { color: #b8341f; }

/* ─────────────────────── 玩家資訊列 ─────────────────────── */

.player-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 7px 12px;
    border-radius: 16px;
    background: var(--surface);
    border: 2px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.player-bar.active {
    border-color: var(--gold);
    box-shadow: var(--glow-gold);
    background: linear-gradient(90deg, #fff8ea, var(--surface) 55%);
}
.player-bar > img,
.pb-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    flex-shrink: 0;
    border: 3px solid var(--border);
    display: grid; place-items: center;
    color: var(--gold-deep);
    font-size: .95rem;
}
.player-bar.side-red > img, .player-bar.side-red .pb-avatar { border-color: var(--red); }
.player-bar.side-blue > img, .player-bar.side-blue .pb-avatar { border-color: var(--blue); }

.pb-info { flex: 1; min-width: 0; }
.pb-name {
    display: flex; align-items: center; gap: 7px;
    font-weight: 800; font-size: .96rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* 留 3px 給陣營圓點的外圈，不然會被 overflow 裁掉 */
    padding: 3px; margin: -3px;
}
.pb-rating { color: var(--gold-deep); font-size: .8rem; font-weight: 800; }
.pb-sub { font-size: .78rem; color: var(--text-mute); display: flex; align-items: center; gap: 6px; min-height: 22px; }
.pb-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--text-dim); }

.clock {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    font-size: 1.15rem;
    padding: 5px 12px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text-dim);
    min-width: 76px;
    text-align: center;
}
.player-bar.active .clock { color: var(--text); background: #fff; border-color: var(--gold); }
.clock.low { color: #fff; background: var(--danger); border-color: var(--danger); animation: clockPulse .9s infinite; }
@keyframes clockPulse { 50% { transform: scale(1.06); } }

/* 陣亡棋子列。尺寸一定要寫死：這裡放的是沒有固有尺寸的 SVG / 圖檔，
   少了限制就會撐滿整個頁面。 */
.captured-row { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.captured-row svg,
.captured-row img { width: 24px; height: 24px; flex: 0 0 24px; opacity: .92; }
.player-bar svg { max-width: 38px; max-height: 38px; }

.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: bounce 1.1s infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } }

/* ─────────────────────── 棋盤 ─────────────────────── */

.board-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #fffaf0, #f7ead2 60%, #f0ddbb);
    border: 3px solid #ffffff;
    box-shadow: var(--shadow-lg);
}
.board-wrap::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    background-image: var(--board-texture, none);
    background-size: cover;
    opacity: .35;
    pointer-events: none;
}

.board {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cell-1);
    box-shadow: inset 0 0 0 2px var(--cell-line);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.board-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(9, 1fr);
}

/* 棋盤格：奶油畫紙。奶油色雙色格 + 一層很淡的紙紋（CSS 內嵌的雜訊，不需要圖檔），
   格線又細又淡，讓棋子跟水域當主角。 */
.board-wrap {
    --cell-1: #fffaf0;
    --cell-2: #fbf1dd;
    --cell-line: rgba(170, 135, 80, .13);
    --cell-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cell {
    position: relative;
    border-right: 1px solid var(--cell-line);
    border-bottom: 1px solid var(--cell-line);
    background-color: var(--cell-1);
    background-image: var(--cell-paper);
    background-size: 160px;
}
.cell:nth-child(odd) { background-color: var(--cell-2); }
.cell:nth-child(7n) { border-right: 0; }
.cell:nth-child(n+57) { border-bottom: 0; }

/* 水域。匯入正式貼圖後 art.css 會設定 --water-tile 並把 --water-ripple 歸零 */
.cell.water {
    background-color: #8fd8ee;
    background-image: var(--water-tile, linear-gradient(180deg, #a9e4f6, #79cbe8));
    background-size: var(--water-tile-size, 100% 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    border-color: rgba(90, 175, 205, .35);
}
.cell.water::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 11px);
    opacity: var(--water-ripple, .6);
    animation: waterDrift 9s linear infinite;
}
@keyframes waterDrift { to { background-position: 60px 0; } }
.cell.water-top    { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.cell.water-bottom { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

/* 陷阱 */
.cell.trap { display: grid; place-items: center; }
.cell.trap::before {
    content: '';
    position: absolute; inset: 10%;
    border-radius: 12px;
    border: 3px dashed currentColor;
    opacity: .45;
}
.cell.trap svg { width: 52%; height: 52%; opacity: .5; position: relative; }
/* 只染底色、保留紙紋 */
.cell.trap-red  { color: var(--red); background-color: color-mix(in srgb, var(--red) 15%, var(--cell-1)); }
.cell.trap-blue { color: var(--blue); background-color: color-mix(in srgb, var(--blue) 15%, var(--cell-1)); }

/* 獸穴 */
.cell.den { display: grid; place-items: center; }
.cell.den::before {
    content: '';
    position: absolute; inset: 7%;
    border-radius: 16px;
    border: 3px solid currentColor;
    opacity: .55;
}
.cell.den svg { width: 64%; height: 64%; position: relative; opacity: .9; }
.cell.den-red  { color: var(--red); background-color: color-mix(in srgb, var(--red) 26%, var(--cell-1)); }
.cell.den-blue { color: var(--blue); background-color: color-mix(in srgb, var(--blue) 26%, var(--cell-1)); }

/* 匯入的獸穴 / 陷阱圖檔 */
.cell.den .terrain-img { width: 92%; height: 92%; object-fit: contain; position: relative; }
.cell.trap .terrain-img { width: 68%; height: 68%; object-fit: contain; position: relative; opacity: .72; }
.cell.trap:has(.terrain-img)::before,
.cell.den:has(.terrain-img)::before { display: none; }

/* 座標：放在格子角落，棋子是圓的所以蓋不到 */
/* 內縮 7px：棋盤圓角是 18px，角落那格的標示要離邊夠遠才不會被圓角切到 */
.board-coords { position: absolute; inset: 0; pointer-events: none; z-index: 1; --coord-inset: 7px; }
.coord-label {
    position: absolute;
    font-size: clamp(.54rem, calc(var(--game-w, 420px) / 60), .8rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(120, 95, 55, .5);
}

/* ─────────────────────── 棋子 ─────────────────────── */

.pieces-layer { position: absolute; inset: 0; }

.piece {
    position: absolute;
    top: 0; left: 0;
    width: calc(100% / 7);
    height: calc(100% / 9);
    display: grid;
    place-items: center;
    cursor: default;
    transition: transform .26s var(--ease);
    will-change: transform;
    z-index: 2;
}
.piece.selectable { cursor: pointer; }
.piece.moving { z-index: 6; }

.piece-token {
    position: relative;
    width: 88%;
    height: 88%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .16s var(--bounce), filter .16s var(--ease);
    filter: var(--piece-shadow, drop-shadow(0 3px 4px rgba(90, 70, 40, .3)));
}
.piece-token svg,
.piece-token .piece-img { width: 100%; height: 100%; object-fit: contain; }

@media (hover: hover) {
    .piece.selectable:hover .piece-token { transform: scale(1.08); }
}
.piece.selected { z-index: 5; }
.piece.selected .piece-token {
    transform: scale(1.14);
    filter: drop-shadow(0 0 7px var(--gold)) drop-shadow(0 0 2px var(--gold-deep)) drop-shadow(0 4px 6px rgba(90, 70, 40, .35));
}

/* 站在敵方陷阱上：轉圈的虛線提醒它現在只有 0 階 */
.piece.trapped .piece-token::after {
    content: '';
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    border: 3px dashed var(--danger);
    animation: spin 6s linear infinite;
    z-index: 1;          /* 在棋子圖上面、階級數字（z-index: 2）下面 */
    pointer-events: none;
}

.piece.captured-anim { animation: capturePop .32s var(--ease) forwards; pointer-events: none; z-index: 1; }
@keyframes capturePop {
    0%   { opacity: 1; }
    100% { opacity: 0; transform: var(--pos) scale(.2) rotate(20deg); }
}
.piece.jumping { transition: transform .42s cubic-bezier(.34, 1.4, .5, 1); }

/* 階級數字 */
.rank-pip {
    position: absolute;
    right: -4%;
    bottom: -4%;
    min-width: 36%;
    height: 36%;
    padding: 0 2px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: clamp(9px, calc(var(--game-w, 420px) / 44), 17px);
    font-weight: 900;
    line-height: 1;
    background: #ffffff;
    border: 2px solid currentColor;
    box-shadow: 0 1px 3px rgba(90, 70, 40, .35);
    /* 永遠在最上層：陷阱的旋轉虛線圈（.piece-token::after）不能蓋到階級數字 */
    z-index: 2;
}
.piece.side-red .rank-pip  { color: var(--red); }
.piece.side-blue .rank-pip { color: var(--blue); }

/* ─────────────────────── 落點提示 ─────────────────────── */

.markers-layer { position: absolute; inset: 0; pointer-events: none; }

.marker {
    position: absolute;
    top: 0; left: 0;
    width: calc(100% / 7);
    height: calc(100% / 9);
    display: grid;
    place-items: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 3;
}
.marker::before {
    content: '';
    width: 32%;
    height: 32%;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(224, 125, 8, .45);
    animation: markerIn .18s var(--bounce);
}
@keyframes markerIn { from { transform: scale(0); } }
.marker.capture::before {
    width: 90%; height: 90%;
    background: rgba(224, 75, 52, .12);
    border: 4px solid var(--danger);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8);
    /* 「可以吃」的紅圈疊在棋子上面（要能點），所以在右下角挖一個洞，把階級數字露出來。
       洞的位置與大小對應 .rank-pip：圓心在紅圈的 85% / 85%，半徑約 21%。 */
    -webkit-mask-image: radial-gradient(circle at 85% 85%, transparent 0 21%, #000 22%);
            mask-image: radial-gradient(circle at 85% 85%, transparent 0 21%, #000 22%);
}
.marker.den-win::before {
    width: 90%; height: 90%;
    background: rgba(247, 152, 36, .3);
    border: 4px solid var(--gold);
    animation: winGlow 1s ease-in-out infinite;
}
@keyframes winGlow { 50% { box-shadow: 0 0 22px var(--gold); transform: scale(1.05); } }

.highlight-last {
    position: absolute;
    top: 0; left: 0;
    width: calc(100% / 7);
    height: calc(100% / 9);
    z-index: 1;
    pointer-events: none;
}
.highlight-last::before {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 12px;
    background: rgba(247, 152, 36, .22);
    border: 2px solid rgba(247, 152, 36, .5);
}

.hint-arrow { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

/* 對局結束 */
.board-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    border-radius: var(--radius);
    animation: fadeIn .3s var(--ease);
    padding: 20px;
    text-align: center;
    color: var(--text);
}
.board-overlay .result-icon { font-size: 3.2rem; line-height: 1.1; margin-bottom: 8px; animation: popIn .4s var(--bounce); }
@keyframes popIn { from { transform: scale(0); } }
.board-overlay h3 { font-size: 1.6rem; margin-bottom: 6px; }
.board-overlay p { color: var(--text-dim); margin-bottom: 18px; }
.board-overlay .ov-rematch { margin-top: -10px; color: var(--gold-ink); font-weight: 700; }
.board-overlay .ov-rematch:empty { display: none; }
.board-overlay .result-actions { display: grid; gap: 10px; justify-items: center; }
.board-overlay .result-actions .btn { min-width: 200px; }
.board-overlay .rating-delta { font-size: 1.6rem; font-weight: 900; margin-bottom: 8px; }

/* ─────────────────────── 側欄 ─────────────────────── */

.side-card {
    background: var(--surface);
    border: 2px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    min-width: 0;
}
.side-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 10px;
}
.side-note { font-size: .76rem; color: var(--text-mute); font-weight: 600; text-transform: none; letter-spacing: 0; }

.move-list {
    max-height: max(160px, calc(var(--board-h, 600px) - 420px));
    overflow-y: auto;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
.move-list:empty::after { content: '—'; color: var(--text-mute); }
.move-row { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 6px; padding: 4px 6px; border-radius: 8px; }
.move-row:nth-child(odd) { background: var(--surface-2); }
.move-row .mv-no { color: var(--text-mute); font-weight: 700; }
.move-row span { padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.move-row span.current { background: var(--gold); color: var(--gold-ink); }
.move-row .mv-red { color: var(--red-ink); }
.move-row .mv-blue { color: var(--blue-ink); }


.quick-chat { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.quick-chat::-webkit-scrollbar { display: none; }
.quick-chat button {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: .8rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
}
.quick-chat button:hover { background: var(--surface-3); color: var(--text); }

/* 陣營圓點、房間／玩家列表卡片、聊天訊息的樣式在 style.css —— 好友、訊息、後台等
   沒有載入這份 board.css 的頁面也會用到。 */

/* ─────────────────────── 難度選擇 ─────────────────────── */

.level-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.level-card {
    padding: 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 2px solid var(--border);
    cursor: pointer;
    text-align: left;
    transition: all .18s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.level-card:hover { border-color: var(--border-strong); }
.level-card.active {
    border-color: var(--gold);
    background: linear-gradient(135deg, #fff8ea, #ffeed3);
    box-shadow: var(--glow-gold);
}
.level-card b { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 2px; }
.level-card b i { color: var(--gold-deep); }
.level-card small { color: var(--text-mute); font-size: .8rem; display: block; }
.level-card .lv-dots { display: inline-flex; gap: 3px; margin-left: auto; }
.level-card .lv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); }
.level-card .lv-dots i.on { background: var(--gold); }

/* ─────────────────────── 大廳 ─────────────────────── */

.room-code-box {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff8ea, #ffeed3);
    border: 3px dashed var(--gold);
    text-align: left;
}
.room-code { font-size: 1.8rem; font-weight: 900; letter-spacing: .2em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }


.rank-badge .badge-img { width: 20px; height: 20px; }
.animal-tile .badge-img { width: 50px; height: 50px; margin: 0 auto 8px; }

/* ─────────────────────── 平板與手機 ───────────────────────
   單欄：對手 → 棋盤 → 自己 → 操作列 → 其他                              */

@media (max-width: 1024px) {
    .game-page { padding: 10px 0 32px; }
    .game-layout {
        --game-w: min(100vw, 640px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "tools" "score" "side";
        grid-template-rows: auto;
        gap: 8px;
    }
    .game-layout.lesson-first { grid-template-areas: "lesson" "main" "tools"; grid-template-rows: auto; }

    /* 兩欄版面在窄螢幕攤平成一欄：對手 → 棋盤 → 自己 → 操作 → 戰績 → 聊天與棋譜 */
    .game-layout.split { grid-template-areas: "top" "board" "bottom" "tools" "score" "side"; grid-template-rows: auto; }
    .split .game-left, .split .game-right { display: contents; }
    .split .game-left > .board-wrap { grid-area: board; }
    .split #top-player { grid-area: top; }
    .split #bottom-player { grid-area: bottom; margin-top: 0; }
    .split .game-right { min-height: 0; }
    .split .game-left > .board-wrap, .split .player-bar { width: min(100%, 640px); margin-left: auto; margin-right: auto; }

    .game-main { display: grid; grid-area: main; gap: 6px; }
    .game-main > .board-wrap { grid-area: auto; }
    #top-player, #bottom-player { grid-area: auto; }
    .game-main, .game-toolbar, .game-side, .lesson-card, .score-card { width: min(100%, 640px); margin-left: auto; margin-right: auto; }
    .score-row { grid-template-columns: minmax(0, 1fr) repeat(3, 46px); padding: 8px 6px; }
    .score-num { font-size: 1.1rem; }
    /* 窄螢幕把頭像收起來，名字才不會被截成「Guest…」 */
    .score-name img { display: none; }
    .game-side { margin-top: 6px; }

    /* 操作列：一排圖示按鈕，緊貼棋盤下方、拇指搆得到 */
    .game-toolbar {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 2px;
        padding: 4px;
        border-radius: 18px;
    }
    .tool-btn {
        flex-direction: column;
        gap: 3px;
        min-height: 54px;
        padding: 6px 2px;
        border: 0;
        background: transparent;
        font-size: .72rem;
        border-radius: 14px;
    }
    .tool-btn i { font-size: 1.15rem; }
    .tool-btn.primary { grid-column: auto; box-shadow: none; }
    .tool-btn.danger { background: transparent; }
    .tool-btn:hover:not(:disabled) { transform: none; }
}

/* 手機：棋盤滿版，左右不留空隙 */
@media (max-width: 620px) {
    .game-page { padding-top: 6px; }
    .game-page > .container { padding-left: 0; padding-right: 0; }
    #lobby-view, #waiting-view, #spectate-lobby { padding: 8px 14px 0; }

    .game-layout { gap: 6px; }
    .game-main { gap: 5px; }
    .game-main > .board-wrap,
    .split .game-left > .board-wrap {
        padding: 4px 0;
        border-radius: 0;
        border-left: 0; border-right: 0;
        border-width: 2px 0;
        box-shadow: none;
    }
    .game-main > .board-wrap::before,
    .split .game-left > .board-wrap::before { border-radius: 0; }
    .board { border-radius: 0; box-shadow: none; }
    /* 手機版棋盤沒有圓角、格子又小：標示貼回角落，才不會被棋子蓋住 */
    .board-coords { --coord-inset: 3px; }
    .cell.water-top    { border-top-left-radius: 10px; border-top-right-radius: 10px; }
    .cell.water-bottom { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

    /* 棋盤以外的東西左右留 8px，視覺上跟棋盤對齊但不貼邊 */
    .game-main > .player-bar, .split .player-bar, .game-toolbar, .game-side, .lesson-card, .score-card {
        width: auto; margin-left: 8px; margin-right: 8px;
    }
    .player-bar { min-height: 46px; padding: 5px 10px; border-radius: 14px; gap: 9px; }
    .player-bar > img, .pb-avatar { width: 32px; height: 32px; border-width: 2px; font-size: .85rem; }
    .pb-name { font-size: .92rem; }
    .pb-sub { min-height: 0; }
    .pb-sub:empty { display: none; }
    .captured-row svg, .captured-row img { width: 20px; height: 20px; flex-basis: 20px; }
    .clock { font-size: 1rem; min-width: 64px; padding: 4px 9px; }
    .chat-box { height: 200px; }
    .move-list { max-height: 150px; }
    .board-overlay { border-radius: 0; }
    .board-overlay .result-actions .btn { min-width: 170px; }
}

/* ─────────────────────── 匯入的插圖 ─────────────────────── */

/* 對局結果插圖（取代 emoji） */
.board-overlay .result-art {
    width: min(46%, 220px);
    height: auto;
    margin: 0 auto 10px;
    animation: popIn .45s var(--bounce);
    filter: drop-shadow(0 8px 18px rgba(90, 70, 40, .22));
}

/* AI 對手頭像：圖本身就是完整的圓形徽章，不需要再套邊框 */
.player-bar > img.pb-art {
    width: 46px; height: 46px;
    border: 0; border-radius: 0; background: none;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(90, 70, 40, .22));
}
.level-card .lv-art { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 620px) {
    .player-bar > img.pb-art { width: 38px; height: 38px; }
}