:root {
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --accent-primary: #2563eb;
            --accent-soft: #eff6ff;
            --accent-border: #bfdbfe;
            --success-color: #10b981;
            --success-bg: #ecfdf5;
            --board-light: #f0d9b5;
            --board-dark: #b58863;
            --board-highlight: #fef08a;
            --board-guide: #3b82f6;
            --radius-lg: 16px;
            --radius-md: 12px;
            --radius-sm: 8px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

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

        [hidden] { display: none !important; }

        body {
            background-color: var(--bg-main);
            color: var(--text-primary);
            font-family: var(--font-family);
            line-height: 1.35;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            user-select: none;
        }

        /* HEADER */
        header {
            width: 100%;
            max-width: 480px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid #e2e8f0;
            z-index: 10;
            flex-shrink: 0;
        }

        .logo-area {
            flex: 1 1 160px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #global-menu-btn, #global-menu-close { min-width:44px; min-height:44px; flex-shrink:0; border:1px solid #cbd5e1; border-radius:10px; background:white; color:#1e293b; font:inherit; font-size:1.5rem; cursor:pointer; }
        #global-menu { position:fixed; inset:0 auto 0 0; margin:0; width:min(340px, 92vw); max-width:92vw; max-height:100dvh; height:100dvh; border:0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y:auto; color:#1e293b; background:#f8fafc; }
        #global-menu::backdrop { background:rgb(15 23 42 / .4); }
        .nav-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
        .nav-top h2 { font-size:1.25rem; }
        #global-menu nav { display:grid; gap:12px; margin-top:20px; }
        #global-menu nav button, #global-menu nav a, .lesson-cards button { display:block; min-height:48px; padding:12px; border:1px solid #cbd5e1; border-radius:12px; background:white; color:#1e293b; text-align:left; font:inherit; text-decoration:none; cursor:pointer; overflow-wrap:anywhere; }
        .nav-link-note { display:block; font-size:.8em; color:#64748b; }
        #basics2-top { width:100%; padding-bottom:24px; }
        #basics2-top h1 { font-size:1.5rem; margin:12px 0; }
        #basics2-top h2 { font-size:1.15rem; margin:24px 0 12px; }
        #lesson-title { font-size:1.15rem; line-height:1.4; margin:0 0 12px; overflow-wrap:anywhere; }
        .lesson-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; margin-bottom:16px; }
        #basics2-opera { grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }
        .lesson-cards button { position:relative; padding-right:2.75em; }
        .lesson-check { position:absolute; right:.8em; top:50%; transform:translateY(-50%); color:#166534; font-weight:700; }
        [data-course] { margin-bottom:12px; }
        .lesson-course-progress { margin:0 0 10px; color:#475569; font-size:.9em; overflow-wrap:anywhere; }
        .values-guide { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
        .values-guide .guide-character { position:static; }
        .values-guide .speech-bubble { min-width:0; flex:1; padding:12px; }
        #values-feedback p { margin:0; }
        #values-feedback p + p { margin-top:1em; }
        .values-choices { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
        #lesson-next-btn { min-height:44px; font-size:1rem; }
        .piece-points-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:8px; }
        .piece-points-grid > div { display:flex; flex-direction:column; align-items:center; padding:8px; border:1px solid #cbd5e1; border-radius:12px; background:white; overflow-wrap:anywhere; }
        .piece-points-grid img { width:56px; height:56px; }
        button:focus-visible, a:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }

        .logo-icon {
            width: 30px;
            height: 30px;
            flex-shrink: 0;
            object-fit: contain;
        }

        .logo-text {
            font-size: 0.98rem;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .progress-badge {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--accent-primary);
            background: var(--accent-soft);
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid var(--accent-border);
        }

        /* MAIN CONTAINER */
        main {
            width: 100%;
            max-width: 480px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 8px 12px 12px 12px;
            gap: 6px;
            overflow: hidden;
        }

        /* PIECE SELECTOR (SWIPABLE/SCROLLABLE) */
        .piece-selector-wrapper {
            width: 100%;
            flex-shrink: 0;
        }
        .step-progress { display:flex; gap:4px; width:100%; }
        .step-dot { flex:1; height:5px; border-radius:9px; background:#e2e8f0; }
        .step-dot.done, .step-dot.current { background:var(--accent-primary); }
        .finish-screen { display:none; width:100%; flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }
        #finish-screen.visible { display:flex !important; visibility:visible; }
        .finish-screen h1 { font-size:2rem; }
        .finish-screen p { color:var(--text-secondary); }
        .finish-screen .btn { flex:none; width:100%; min-height:52px; font-size:1rem; }
        .finish-king { flex:0 0 64px; width:64px; height:64px; aspect-ratio:1; display:grid; place-items:center; font-size:3rem; line-height:1; white-space:nowrap; }
        .game-view { display:none; width:100%; flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:4px 0 12px; overflow-y:auto; overscroll-behavior-y:contain; }
        .game-view.visible { display:flex; }
        .board-wrapper, .game-board-wrapper { width:min(92vw, 480px); aspect-ratio:1; }
        .board-wrapper { touch-action:pan-y; }
        .game-board-wrapper { position:relative; display:grid; place-items:center; flex:0 0 auto; box-sizing:border-box; background:#fff; padding:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); border:1px solid #e2e8f0; overflow:hidden; }
        .game-board { display:grid; place-items:center; width:100%; aspect-ratio:1; touch-action:pan-y; }
        #game-board .board-b72b1 { box-sizing:content-box; border:2px solid #404040; }
        #game-board .notation-322f9 { font-size:clamp(8px,2.4vw,14px); }
        #chessboard .selected-square::before, #game-board .square-55d63.selected-square::before, #mate-board .square-55d63.selected-square::before, #tactics-board .square-55d63.selected-square::before { content:''; position:absolute; inset:0; background:rgba(141,110,99,.65); pointer-events:none; }
        #chessboard .move-hint-dot, #game-board .move-hint-dot, #mate-board .move-hint-dot, #tactics-board .move-hint-dot { position:absolute; z-index:3; top:50%;left:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(78,52,46,.45);pointer-events:none; }
        #chessboard .move-hint-ring, #game-board .move-hint-ring, #mate-board .move-hint-ring, #tactics-board .move-hint-ring { position:absolute;z-index:3;inset:4%;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(78,52,46,.45);pointer-events:none; }
        .game-controls { display:flex; gap:8px; width:min(92vw,600px); }
        .game-controls .btn { min-height:42px; }
        .game-thinking { display:inline-flex; align-items:center; gap:5px; }
        .game-thinking::after { content:'…'; animation:think 1s steps(4,end) infinite; width:1em; overflow:hidden; }
        @keyframes think { to { width:0; } }
        .game-status { min-height:1.2em; color:var(--text-secondary); font-size:.75rem; text-align:right; }
        .game-attribution { color:var(--text-muted); font-size:.72rem; line-height:1.2; text-align:center; margin:0; }
        .game-attribution a { color:var(--text-secondary); text-underline-offset:2px; }
        /* 幅のある画面では盤面の横に説明と操作を置く。中間幅以下は従来の縦配置。 */
        @media (min-width:900px) {
            header { max-width:1040px; }
            main { max-width:1040px; }
            main:has(.board-container:not([hidden])):not(:has(.game-view.visible)) {
                display:grid;
                grid-template-columns:minmax(0, 480px) minmax(0, 1fr);
                grid-template-rows:auto 1fr;
                align-content:center;
                align-items:start;
                column-gap:32px;
                row-gap:14px;
                padding-top:20px;
            }
            .piece-selector-wrapper { grid-column:2; grid-row:1; }
            .board-container { grid-column:1; grid-row:1 / 3; align-self:center; margin-top:0; }
            .board-wrapper { width:min(100%, 480px, calc(100dvh - 112px)); }
            .guide-card { grid-column:2; grid-row:2; margin-top:0; }

            .game-view.visible {
                display:grid;
                grid-template-columns:minmax(0, 480px) minmax(0, 1fr);
                grid-template-rows:auto auto auto;
                align-content:center;
                align-items:start;
                column-gap:32px;
                row-gap:8px;
                padding:16px 0;
                overflow-y:auto;
            }
            .game-board-wrapper { grid-column:1; grid-row:2; width:min(100%, 480px, calc(100dvh - 164px)); }
            .game-controls, .game-attribution { grid-column:2; width:100%; }
            .game-controls { grid-row:2; align-self:start; }
            .game-attribution { grid-row:2; align-self:start; margin-top:54px; text-align:left; }
        }

        .selector-header {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-muted);
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
            padding: 0 2px;
        }

        .piece-tabs {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 2px;
            -webkit-overflow-scrolling: touch;
        }

        .piece-tabs::-webkit-scrollbar {
            display: none;
        }

        .tab-btn {
            flex: 0 0 68px;
            scroll-snap-align: start;
            background: var(--bg-card);
            border: 1.5px solid #e2e8f0;
            border-radius: var(--radius-md);
            padding: 6px 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .tab-btn.active {
            border-color: var(--accent-primary);
            background: var(--accent-soft);
            box-shadow: 0 2px 6px rgba(37,99,235,0.15);
            transform: translateY(-1px);
        }

        .tab-btn .tab-icon {
            font-size: 1.5rem;
            line-height: 1;
        }

        .tab-btn .tab-label {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        /* CHESS BOARD AREA */
        .board-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            margin-top:clamp(8px,4vh,28px);
        }

        .board-wrapper {
            width:min(92vw, 480px, max(220px, calc(100dvh - 260px)));
            background: #ffffff;
            padding: 0;
            box-sizing: border-box;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            border: 1px solid #e2e8f0;
            position: relative;
        }
        .practice-hint-btn { grid-column: 1 / -1; width: 100%; min-height: 44px; }
        .practice-annotations { position:absolute; inset:0; pointer-events:none; z-index:5; }
        .mate-escape-cross { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; color:#b91c1c; font-weight:800; font-size:clamp(14px,3.5vw,24px); line-height:1; text-shadow:0 0 3px white,0 0 3px white; pointer-events:none; }
        :is(#mate-in-one,#tactics-puzzles):not([hidden]) { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; padding:4px 0 24px; }
        :is(#mate-in-one,#tactics-puzzles) .mate-side { width:min(92vw,480px); }
        :is(#mate-in-one,#tactics-puzzles) .mate-board-wrapper { position:relative; display:grid; place-items:center; width:min(92vw,480px); aspect-ratio:1; background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
        :is(#mate-board,#tactics-board) { display:grid; place-items:center; width:100%; aspect-ratio:1; touch-action:pan-y pinch-zoom; }
        :is(#mate-in-one,#tactics-puzzles) .mate-actions { display:flex; flex-wrap:wrap; gap:8px; }
        :is(#mate-actions,#mate-result,#tactics-actions,#tactics-result)[hidden] { display:none; }
        :is(#mate-in-one,#tactics-puzzles) .mate-actions .btn { min-height:44px; }
        :is(#mate-actions,#tactics-actions) { flex-wrap:wrap; }
        :is(#mate-actions,#tactics-actions) .btn { flex:0 1 auto; width:auto; padding-inline:8px; }
        :is(#mate-actions,#tactics-actions) .puzzle-quit { font-size:clamp(12px,3.5vw,14px); white-space:nowrap; }
        :is(#mate-actions,#tactics-actions) .practice-next-action { flex:0 0 auto; margin-left:auto; min-width:132px; padding-inline:12px; font-size:1rem; }
        @media (max-width:639px) { :is(#mate-actions,#tactics-actions) .practice-next-action { min-width:68px; padding-inline:8px; } }
        :is(#mate-in-one,#tactics-puzzles) .mate-guide { display:flex; align-items:flex-start; gap:10px; width:100%; margin-bottom:10px; }
        :is(#mate-in-one,#tactics-puzzles) .mate-guide-text { min-width:0; flex:1; }
        :is(#mate-in-one,#tactics-puzzles) .mate-guide .guide-character { width:var(--character-size); }
        :is(#mate-result,#tactics-result) { text-align:left; }
        #tactics-result-message p + p { margin-top:8px; }
        :is(#mate-board,#tactics-board) [data-square] { position:relative; }
        :is(#mate-board,#tactics-board) :is(.mate-hint-from,.mate-hint-to,.tactics-hint-from,.tactics-hint-to) { box-shadow:inset 0 0 0 3px #2563eb; }
        :is(#mate-board,#tactics-board) .dragging-source img { visibility:hidden; }
        :is(.mate-arrow,.tactics-arrow) { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:8; }
        :is(.mate-arrow,.tactics-arrow) .hint-line { stroke:#2563eb; stroke-width:5; opacity:.8; }
        :is(.mate-arrow,.tactics-arrow) .hint-tip { fill:#2563eb; }
        @media (min-width:900px) { :is(#mate-in-one,#tactics-puzzles):not([hidden]) { display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); column-gap:24px; align-items:start; } :is(#mate-in-one,#tactics-puzzles)>h1 { grid-column:1 / -1; } :is(#mate-in-one,#tactics-puzzles) .mate-board-wrapper { grid-column:1; } :is(#mate-in-one,#tactics-puzzles) .mate-side { grid-column:2; width:100%; } }
        #game-board [data-square] { position:relative; }
        #game-board .mate-escape-cross { position:absolute; }
        .practice-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
        .practice-line .hint-line { stroke:var(--arrow-color,#2563eb); stroke-width:5; opacity:.8; }
        .practice-line .hint-tip { fill:var(--arrow-color,#2563eb); }
        .practice-line .check-line { stroke:#b45309; stroke-width:3; opacity:.75; }
        #chessboard .practice-hint-square { outline:3px solid #2563eb; outline-offset:-3px; }
        #chessboard .practice-checked-king { outline:3px solid #b45309; outline-offset:-3px; }
        .practice-check-label { position:absolute; transform:translate(-50%,-100%); padding:1px 4px; border-radius:3px; color:#fff; background:#92400e; font-size:11px; font-weight:700; white-space:nowrap; }
        .practice-mate-cross { position:absolute; transform:translate(-50%,-50%); color:#9a3412; font-size:24px; font-weight:700; line-height:1; }
        .promotion-chooser { position:absolute; z-index:20; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.48); border-radius:inherit; }
        .promotion-panel { width:min(92%,330px); padding:12px; background:white; border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.28); }
        .promotion-panel p { margin-bottom:10px; text-align:center; font-size:.82rem; font-weight:700; color:var(--text-primary); }
        .promotion-options { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
        .promotion-options button { aspect-ratio:1; display:grid; place-items:center; background:var(--accent-soft); border:2px solid var(--accent-border); border-radius:8px; cursor:pointer; touch-action:manipulation; }
        .promotion-options button:hover, .promotion-options button:focus-visible { border-color:var(--accent-primary); }
        .promotion-options img { width:90%; height:90%; object-fit:contain; pointer-events:none; }

        .chessboard {
            width: 100%;
            aspect-ratio: 1;
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 1fr);
            border-radius: var(--radius-sm);
            overflow: hidden;
            touch-action: pan-y;
        }

        .square {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: clamp(1.5rem, 7vw, 2.1rem);
            position: relative;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }

        .square.light { background-color: var(--board-light); color:#b58863; }
        .square.dark { background-color: var(--board-dark); color:#f0d9b5; }

        .piece {
            z-index: 2;
            line-height: 1;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
            transition: transform 0.15s ease;
        }
        .piece-image { width:88%; height:88%; object-fit:contain; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); pointer-events:none; }
        .square.dragging-source .piece-image { visibility:hidden; }
        .practice-drag-piece { position:fixed; z-index:1000; left:0; top:0; width:var(--drag-piece-size); height:var(--drag-piece-size); object-fit:contain; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 4px rgba(0,0,0,.28)); will-change:transform; }
        .square-coordinate { position:absolute; z-index:4; font:600 clamp(7px,1.8vw,10px)/1 sans-serif; pointer-events:none; }
        .square-coordinate.rank { top:2px;left:3px; }
        .square-coordinate.file { bottom:2px;right:3px; }

        .square.selected-square { isolation:isolate; }

        .square.pulse-highlight .piece {
            animation: mobilePulse 1.2s infinite alternate;
        }
        .square.pulse-highlight::after {
            content: '';
            position: absolute;
            inset: 3px;
            border: 2px solid var(--accent-primary);
            border-radius: 4px;
            pointer-events: none;
            z-index: 3;
        }

        @keyframes mobilePulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.18); filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.5)); }
        }

        @keyframes pulseDot {
            0% { transform: scale(0.85); }
            100% { transform: scale(1.25); }
        }

        /* CARD GUIDE & ACTIONS */
        .guide-card {
            width: 100%;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            box-shadow: var(--shadow-sm);
            border: 1.5px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex-shrink: 0;
            margin-top:0;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .guide-card.completed {
            border-color: var(--success-color);
            background: var(--success-bg);
        }
        .guide-card.completed .card-title { font-size: 1.35rem; color: #047857; }

        .card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-title-group {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .card-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-primary);
        }

        .card-en-name {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .card-badge {
            font-size: 0.65rem;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 6px;
            background: #f1f5f9;
            color: var(--text-secondary);
        }

        .card-desc {
            font-size: 0.78rem;
            color: var(--text-secondary);
            line-height: 1.35;
        }

        .card-actions {
            display: flex;
            gap: 8px;
            margin-top: 2px;
        }

        .btn {
            text-decoration: none;
            flex: 1;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
            font-size: 0.8rem;
            font-weight: 700;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            transition: opacity 0.2s ease, transform 0.1s ease;
        }

        .btn:active {
            opacity: 0.8;
            transform: scale(0.98);
        }

        .btn-primary {
            background: var(--accent-primary);
            color: white;
            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
        }

        .btn-secondary {
            background: #f1f5f9;
            color: var(--text-secondary);
            border: 1px solid #cbd5e1;
        }

        /* CONFETTI CANVAS */
        #confetti-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 999;
        }

        /* P0-1: keep the board, guide, and controls in the page flow. */
        body {
            min-height: 100dvh;
            height: auto;
            overflow-x: auto;
            overflow-y: auto;
        }

        main {
            /* Match the single-column board width; keep both guide images in one size slot. */
            --character-size: calc(min(100vw - 24px, 456px) * .21);
            max-width: 480px;
            flex: none;
            justify-content: flex-start;
            gap: 10px;
            padding: 8px 12px calc(20px + env(safe-area-inset-bottom));
            overflow: visible;
        }

        .piece-selector-wrapper { display: none; }
        .board-container { margin-top: 0; }
        .board-wrapper, .game-board-wrapper {
            width: min(100%, 480px);
            flex: 0 0 auto;
        }
        .guide-card { margin-top: 0; display: grid; grid-template-columns: var(--character-size) minmax(0, 1fr); column-gap: 10px; row-gap: 10px; align-items: start; }
        .guide-content { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
        .guide-character { width: var(--character-size); height: auto; aspect-ratio: 3 / 4; object-fit: contain; object-position: center top; display: block; flex: 0 0 auto; }
        .card-en-name, .card-badge { display: none; }
        .card-desc { font-size: 16px; line-height: 1.45; }
        .board-next-btn { position: static; min-height: 44px; padding: 10px 12px; font-size: 1rem; box-shadow: none; }
        .card-actions { grid-column: 1 / -1; margin-top: 0; }
        .card-actions .btn, .game-controls .btn { min-height: 44px; font-size: 14px; }
        .game-view, .game-view.visible { min-height: 0; flex: none; overflow: visible; padding: 0; gap: 8px; }
        .game-side, .game-controls { width: 100%; }
        .game-side { display: flex; flex-direction: column; gap: 10px; }
        .game-guide { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; background: var(--bg-card); border: 1.5px solid #e2e8f0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
        .game-guide .game-status { text-align: left; font-size: 16px; line-height: 1.45; min-width: 0; }
        .game-guide-text { min-width: 0; flex: 1; }
        .game-guide-text[hidden] { display:none; }
        #game-guidance, #game-hint-text { margin: 4px 0 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
        #game-hint-detail[hidden], #game-error-actions[hidden] { display: none; }
        .game-support, .practice-actions, .game-hint-actions, #game-error-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .opera-controls { display:flex; gap:8px; width:100%; }
        .opera-controls[hidden] { display:none; }
        .opera-controls .btn { min-width:0; min-height:44px; flex:1 1 0; padding:8px 0; font-size:1rem; }
        #game-view:has(.opera-controls:not([hidden])) #game-status:empty { display:none; }
        #game-view:has(.opera-controls:not([hidden])) #game-guidance { margin-top:0; }
        #game-guidance { white-space:pre-line; }
        .game-support .btn, .practice-actions .btn, .game-hint-actions .btn { min-height: 44px; }
        .game-support > .btn, .practice-actions > .btn, .game-support .game-controls .btn { flex: 0 1 auto; width:auto; padding:8px 12px; }
        .game-support .game-controls { width:auto; flex:0 1 auto; }
        #game-undo-btn[hidden] { display:none; }
        .speech-bubble { position:relative; background:#fffcf7; border:1px solid #ded6ca; border-radius:14px; padding:12px; overflow-wrap:anywhere; min-width:0; }
        .speech-bubble::before { content:''; position:absolute; left:-6px; top:18px; width:10px; height:10px; background:#fffcf7; border-left:1px solid #ded6ca; border-bottom:1px solid #ded6ca; transform:rotate(45deg); }
        .game-guide { background:transparent; border:0; box-shadow:none; padding:0; }
        .game-castle-layer .hint-line { stroke:#988047; opacity:.65; }
        .game-castle-layer .hint-tip { fill:#988047; }
        .promotion-panel .speech-bubble::before { display:none; }
        .game-hint-actions { margin-top: 8px; }
        #chessboard .square.game-last-square, :is(#game-board,#mate-board,#tactics-board) .square-55d63.game-last-square { background-image:linear-gradient(rgba(255,145,55,.32),rgba(255,145,55,.32)); box-shadow:inset 0 0 0 2px rgba(181,91,24,.48); }
        #game-board .square-55d63.game-hint-from::after { content:''; position:absolute; inset:6%; border:3px solid #2563eb; border-radius:4px; pointer-events:none; z-index:5; }
        #game-board .square-55d63.game-hint-to::after { content:''; position:absolute; inset:6%; border:3px solid #2563eb; border-radius:4px; pointer-events:none; z-index:5; }
        #game-board .square-55d63.practice-hint-square { background-image:linear-gradient(rgba(37,99,235,.32),rgba(37,99,235,.32)); }
        :is(#game-board,#mate-board,#tactics-board) .square-55d63.game-check-king::after { content:''; position:absolute; inset:4%; border:4px solid #d84a42; border-radius:5px; pointer-events:none; z-index:6; }
        #game-board .square-55d63.game-attack-square::after { content:''; position:absolute; inset:6%; border:3px solid #dc2626; border-radius:4px; pointer-events:none; z-index:5; }
        .game-arrow-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:8; }
        .game-attribution { margin: 0; }
        #game-result-actions[hidden], #game-menu[hidden], #game-menu-controls[hidden], #game-hint-btn[hidden] { display:none; }
        #game-menu { display:flex; flex-direction:column; gap:8px; width:100%; }
        #game-result-actions { display:flex; width:auto; max-width:100%; margin-left:auto; }
        #game-result-actions .btn { flex:0 1 auto; width:auto; min-width:0; padding:8px 12px; }
        @media (max-width: 639px) {
            #lesson-course-progress { display:none; }
            #game-result-actions .btn { padding-inline:8px; }
        }
        @media (max-width: 280px) {
            main { --character-size: 48px; }
            .guide-card { grid-template-columns: var(--character-size) minmax(0, 1fr); }
        }
        .result-blog { margin-top:8px; padding-top:12px; border-top:1px solid var(--accent-border); }
        .result-blog a { display:inline-flex; align-items:center; min-height:44px; color:#2563eb; }
        .result-blog p { font-size:.875rem; margin:0; overflow-wrap:anywhere; }
        #game-result-actions .btn, #game-menu .btn { min-height:44px; font-size:16px; }
        .game-controls { flex-wrap:wrap; }
        #game-end-confirm { width:min(92vw,420px); max-height:90dvh; margin:auto; padding:20px; border:1px solid #cbd5e1; border-radius:12px; overflow:auto; }
        #game-end-confirm::backdrop { background:rgba(15,23,42,.48); }
        #game-end-title { font-size:16px; margin:0 0 16px; }
        .confirm-actions { display:flex; flex-wrap:wrap; gap:8px; }
        .confirm-actions .btn { min-height:44px; font-size:16px; }
        .promotion-chooser { position:fixed; inset:0; border-radius:0; padding:12px; overflow:auto; }
        .promotion-panel { width:min(100%,380px); max-height:calc(100dvh - 24px); overflow:auto; }
        .promotion-panel p { font-size:16px; }
        .promotion-options button { aspect-ratio:auto; min-height:100px; padding:4px 0; font-size:14px; }
        .promotion-options img { width:48px; height:48px; }
        .promotion-options small { font-size:11px; }
        .promotion-panel > .btn { margin-top:12px; width:100%; min-height:44px; font-size:16px; }
        #game-board .game-ep-target::before, #game-board .game-special-square::before { content:''; position:absolute; inset:5%; border:2px solid #986634; pointer-events:none; z-index:5; }
        .game-ep-label { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:12px; white-space:nowrap; color:#fff; background:#72502d; border-radius:3px; padding:0 3px; z-index:7; pointer-events:none; }
        .game-board-wrapper { margin: 0 auto; }

        @media (min-width: 900px) {
            main { --character-size: clamp(96px, calc(48px + 5.625vw), 115.2px); }
            header, main { max-width: 1040px; }
            main:has(.board-container:not([hidden])):not(:has(.game-view.visible)) {
                display: grid;
                grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
                grid-template-rows: auto;
                align-content: start;
                column-gap: 24px;
                row-gap: 0;
                padding-top: 20px;
            }
            .board-container { grid-column: 1; grid-row: 1; align-self: start; }
            .guide-card { grid-column: 2; grid-row: 1; }
            .game-view.visible { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; column-gap: 24px; row-gap: 8px; padding: 12px 0; }
            .game-board-wrapper { grid-column: 1; grid-row: 2; width: 100%; }
            .game-side { grid-column: 2; grid-row: 1 / 4; }
            .game-guide { min-height: 86px; }
        }

        @media (min-width: 640px) and (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
            header, main { max-width: none; }
            main:has(.board-container:not([hidden])):not(:has(.game-view.visible)) {
                display: grid;
                grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
                align-items: start;
                column-gap: 12px;
            }
            .board-container { grid-column: 1; grid-row: 1; }
            .board-wrapper, .game-board-wrapper { width: min(100%, 480px, max(240px, calc(100dvh - 96px))); }
            .guide-card { grid-column: 2; grid-row: 1; }
            .game-view.visible { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 1fr); grid-template-rows: max-content max-content 1fr; column-gap: 12px; align-items: start; align-content:start; }
            .game-board-wrapper { grid-column: 1; grid-row: 2; }
            .game-side { grid-column: 2; grid-row: 1 / 4; }
            .game-controls { flex-wrap: wrap; }
        }

        @media (max-height: 500px) and (orientation: landscape) {
            main { --character-size: clamp(54px, calc((100dvh - 96px) * .192), 66px); }
        }

        /* P0-5: scroll on non-movable squares; retain browser pinch zoom. */
        .board-wrapper, .chessboard, .game-board-wrapper, .game-board { touch-action: pan-y pinch-zoom; }
        #game-board .dragging-source img { visibility: hidden; }
        :focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
        #chessboard:focus-visible .keyboard-square, #game-board:focus-visible .keyboard-square { outline: 3px solid #1e3a8a; outline-offset: -4px; }
        #chessboard .selected-square::after, #game-board .selected-square::after, #tactics-board .selected-square::after { content:''; position:absolute; inset:3%; border:3px solid #72502d; pointer-events:none; }
        .btn { white-space: normal; overflow-wrap: anywhere; }
        .card-actions { flex-wrap: wrap; }
        header { flex-wrap: wrap; gap: 8px; }
        .logo-area { min-width: 0; }
        .logo-text { overflow-wrap: anywhere; }
        .card-desc, .game-guide .game-status, #game-end-title, .promotion-panel p { font-size: 1rem; }
        #game-guidance, #game-hint-text { font-size: 1rem; }
        .card-actions .btn, .game-controls .btn, .promotion-options button { font-size: .875rem; }
        #game-result-actions .btn, #game-menu .btn, .confirm-actions .btn, .promotion-panel > .btn { font-size: 1rem; }
        .promotion-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
        .promotion-options small { font-size: .75rem; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        }

        /* Optional developer panel lives in the existing scrollable game side. */
        .beginner-ai-panel { min-width:0; padding:14px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; color:#1e293b; font-size:14px; }
        .beginner-ai-panel h2 { margin:0 0 8px; font-size:18px; }
        .beginner-ai-panel p { line-height:1.5; }
        .beginner-ai-panel details { border-top:1px solid #e2e8f0; padding:10px 0; }
        .beginner-ai-panel summary { cursor:pointer; font-weight:700; min-height:32px; }
        .ai-setting { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:10px 0; }
        .ai-setting label { font-weight:600; overflow-wrap:anywhere; }
        .ai-setting output { font-variant-numeric:tabular-nums; }
        .ai-setting p { grid-column:1 / -1; margin:0; color:#475569; font-size:13px; }
        .ai-setting input[type=range] { grid-column:1 / -1; width:100%; min-width:0; height:32px; accent-color:#72502d; }
        .ai-setting input[type=checkbox] { width:24px; height:24px; accent-color:#72502d; }
        .ai-setting .ai-setting-toggle { grid-column:1 / -1; display:flex; align-items:center; gap:8px; width:max-content; min-height:32px; cursor:pointer; }
        .ai-setting-disabled input[type=range] { opacity:.45; cursor:not-allowed; }
        .ai-panel-actions { display:flex; flex-wrap:wrap; gap:8px; }
        .ai-panel-actions label, .ai-panel-actions input, .ai-panel-actions select { width:100%; }
        .ai-panel-actions input, .ai-panel-actions select { min-width:0; min-height:40px; border:1px solid #94a3b8; border-radius:6px; padding:6px; font:inherit; }
        .ai-panel-actions .btn { min-height:44px; flex:1 1 140px; font-size:14px; }
        .ai-panel-status { color:#475569; }
        .beginner-ai-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.7 sans-serif; margin:8px 0; }
        .beginner-ai-panel textarea { width:100%; min-height:200px; }
        @media (min-width:900px), (min-width:640px) and (max-height:500px) and (orientation:landscape) {
            .game-view.visible:has(#beginner-ai-panel) .game-side { min-height:0; max-height:min(560px, calc(100dvh - 100px)); overflow-y:auto; overscroll-behavior:contain; padding-right:4px; }
        }

/* Shared basics lists and compact navigation. */
.logo-area { border:0; background:transparent; color:inherit; font:inherit; text-align:left; min-height:44px; cursor:pointer; padding:2px 4px; }
.basics-top { width:100%; padding-bottom:24px; }
.basics-top h1 { font-size:1.5rem; margin:12px 0; }
.basics-top h2 { font-size:1.15rem; margin:24px 0 12px; }
#about-page { width:100%; max-width:680px; flex-shrink:0; align-self:center; padding:12px 4px 32px; line-height:1.7; overflow-wrap:anywhere; }
#analytics-accept, #analytics-decline { min-height:44px; padding:8px 14px; cursor:pointer; }
#about-page > section { padding:clamp(16px, 3vw, 24px); background:var(--bg-card); border:1px solid #e2e8f0; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
#about-page section + section { margin-top:12px; }
#about-page :is(h1, h2) { font-size:1.3rem; line-height:1.45; margin:0 0 12px; }
#about-page :is(h1, h2)::before { content:"●"; color:var(--accent-primary); margin-right:.45em; }
#about-page p { color:var(--text-secondary); }
#about-page p + p { margin-top:14px; }
#about-page .about-analytics-details summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }
#about-page .about-analytics-details summary::-webkit-details-marker { display:none; }
#about-page .about-analytics-details summary h2 { margin:0; }
#about-page .about-analytics-details summary::after { content:"∨"; flex:none; color:var(--accent-primary); font-size:1.3rem; line-height:1; }
#about-page .about-analytics-details[open] summary::after { content:"∧"; }
#about-page .about-analytics-details summary:focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; }
#about-page .about-analytics-details > p { margin-top:14px; }
#about-page .about-analytics-links a::after { content:" ↗"; }
#about-page .about-marker { background:linear-gradient(transparent 55%, #fff2aa 55%, #fff2aa 89%, transparent 89%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
#about-page a { color:var(--accent-primary); text-underline-offset:2px; }
#about-page .about-blog-link::after { content:" ↗"; }
.entry-heading { font-size:1.1rem; margin:0 0 2px; }
.entry-summary { margin:0 0 8px; font-size:.9rem; }
.seo-entry-intro { max-width:48rem; margin:4px 0 0; color:var(--text-secondary); font-size:.9rem; line-height:1.5; overflow-wrap:anywhere; }
:is(#mate-in-one,#tactics-puzzles) > .seo-entry-intro { width:100%; }
#home-lessons { width:100%; margin-top:16px; padding:16px; border:1px solid #e2e8f0; border-radius:var(--radius-md); background:var(--bg-card); box-shadow:var(--shadow-sm); }
#home-lessons h2 { margin-bottom:4px; font-size:1.05rem; }
#home-lessons p { color:var(--text-secondary); font-size:.9rem; }
#home-lessons ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:6px 16px; margin:12px 0 0; padding-left:1.25em; }
#home-lessons li { padding:2px 0; }
#home-lessons a { color:var(--accent-primary); text-underline-offset:3px; }
body:not([data-page="home"]) #home-lessons, body:not([data-page="game"]) #game-view > .seo-entry-intro { display:none; }
@media (min-width:900px) {
    main:has(.board-container:not([hidden])):not(:has(.game-view.visible)) #home-lessons { grid-column:1 / -1; grid-row:2; }
    :is(#mate-in-one,#tactics-puzzles,#game-view) > .seo-entry-intro { grid-column:1 / -1; }
}
@media (min-width:640px) and (max-width:899px) and (max-height:500px) and (orientation:landscape) {
    :is(#mate-in-one,#tactics-puzzles):not([hidden]) { display:grid; grid-template-columns:minmax(0,55%) minmax(0,1fr); column-gap:12px; align-items:start; }
    :is(#mate-in-one,#tactics-puzzles) .mate-board-wrapper { grid-column:1; width:min(100%,calc(100dvh - 96px)); }
    :is(#mate-in-one,#tactics-puzzles) .mate-side { grid-column:2; width:100%; }
    :is(#mate-in-one,#tactics-puzzles) > .seo-entry-intro { grid-column:1 / -1; }
    #game-view > .seo-entry-intro { grid-column:1 / -1; }
    #game-view .game-board-wrapper { width:min(100%,480px,calc(100dvh - 128px)); }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.list-guide { display:flex; align-items:center; gap:12px; margin:12px 0 16px; }
.list-guide .guide-character { position:static; width:min(var(--character-size),96px); height:auto; aspect-ratio:3/4; flex-shrink:0; object-fit:contain; }
@media (min-width:640px) { :is(#basics1-top,#basics2-top) .list-guide .guide-character { width:var(--character-size); } }
.list-guide .speech-bubble { min-width:0; padding:12px; }
.rules-guide { align-items:flex-start; }
.rules-guide p+p { margin-top:12px; }

/* Progression actions follow other controls in DOM and stay at the right of the last flex row. */
.practice-actions { grid-column:1 / -1; }
#board-next-btn { width:auto; margin-top:0; min-height:44px; font-size:1rem; padding:8px 10px; }
#basic-rules-message { white-space:pre-wrap; font-size:1rem; line-height:1.5; }
#game-guidance { white-space:pre-line; }
#game-guidance.draw-guidance { white-space:pre-wrap; }
.game-view.visible.lesson-without-board { display:flex; flex-direction:column; align-items:stretch; width:min(100%, 760px); margin-inline:auto; }
.game-view.lesson-without-board .game-board-wrapper { display:none; }
body > footer.site-footer { position:static; align-self:stretch; width:auto; margin-top:auto; padding:12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 16px; font-size:.75rem; line-height:1.5; color:#64748b; }
.site-footer a { color:#475569; text-underline-offset:2px; }
.site-footer a:hover, .site-footer a:focus-visible { color:#1e40af; text-decoration:underline; }
.site-footer .game-attribution { font-size:inherit; line-height:inherit; text-align:right; }
.values-actions { display:flex; justify-content:space-between; gap:16px; margin-top:16px; flex-wrap:wrap; }
.values-actions .btn { min-height:44px; width:auto; flex:0 1 auto; font-size:1rem; }
.values-actions .btn:last-child { margin-left:auto; }
.practice-next-action { flex:0 1 auto; width:auto; margin-left:auto; min-width:min(132px, 100%); max-width:100%; min-height:44px; }
@media (max-width:639px) {
    main { --character-size: calc(min(100vw - 24px, 456px) * .245); }
    :is(.practice-actions,.game-support,.values-actions) { gap:4px; }
    :is(.practice-actions,.game-support) > .btn:not(.practice-next-action) { padding-inline:6px; }
    :is(.practice-actions,.game-support,.values-actions) > .practice-next-action { flex:0 0 auto; min-width:68px; padding-inline:8px; white-space:nowrap; }
}
#basic-rules .values-actions { justify-content:flex-start; gap:8px; }
#basics2-tips { grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }
#basic-rules .values-actions .btn:last-child { margin-left:auto; }
@media(max-width:639px) { #basic-rules .values-actions { gap:4px; } #basic-rules .values-actions .btn { padding-inline:6px; font-size:.875rem; } }
#last-action:empty { display:none; }
#basics1-start-btn { margin-bottom:12px; }
@media(min-width:900px), (min-width:640px) and (max-height:500px) and (orientation:landscape) {
 .game-view.visible { grid-template-rows:auto; }
 .game-view.visible:has(.game-level-control:not([hidden])) { grid-template-rows:max-content auto; }
 .game-board-wrapper { grid-row:1; }
 .game-side { grid-row:1; }
}
.game-level-control { width:100%; max-width:480px; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 auto; }
.game-level-control label { font-size:1rem; }
.game-level-control select { max-width:100%; min-width:0; min-height:44px; padding:6px 10px; border:1px solid #94a3b8; border-radius:6px; background:#fff; color:var(--text-primary); font:inherit; }
.game-level-control select:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
@media(min-width:900px), (min-width:640px) and (max-height:500px) and (orientation:landscape) {
 .game-level-control { grid-column:1; grid-row:1; }
 .game-view.visible:has(.game-level-control:not([hidden])) .game-board-wrapper { grid-row:2; }
 .game-view.visible:has(.game-level-control:not([hidden])) .game-side { grid-row:1 / 3; }
}
@media(min-width:640px) and (max-width:899px) and (max-height:500px) and (orientation:landscape) {
 .game-level-control { width:min(100%, 480px, max(240px, calc(100dvh - 96px))); }
}

@media(max-width:639px) {
 #guide-card.pawn-intro #card-desc { font-size:clamp(12px,3.6vw,14px); }
}

/* Keep multiline guidance readable when later lessons include deliberate line breaks. */
#card-desc { white-space:pre-line; }

/* Keep the shared navigation beside the two-column boards only when both fit. */
@media (min-width:1160px) {
    body { padding-left:296px; overflow-x:hidden; }
    #home-lessons { display:none; }
    #global-menu-btn, #global-menu-close { display:none; }
    #global-menu { position:fixed; inset:0 auto 0 0; width:288px; max-width:none; height:100dvh; max-height:100dvh; border-right:1px solid #cbd5e1; box-shadow:2px 0 8px rgb(15 23 42 / .06); }
    #global-menu nav a { white-space:nowrap; overflow-wrap:normal; }
    #global-menu .nav-link-note { white-space:normal; }
    header, main { width:100%; max-width:1040px; }
}