/* style.css - Giao diện responsive cho PA Việt Nam hosting */

body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            display: flex; flex-direction: column; align-items: center; 
            background: linear-gradient(135deg, #2c3e50, #1a252f); 
            margin: 0; padding-top: 20px; overflow-x: hidden;
            min-height: 100vh;
        }
        
        .game-info { 
            margin-bottom: 20px; text-align: center; font-size: 18px; font-weight: bold; 
            padding: 12px 30px; border-radius: 30px; 
            background: rgba(255, 255, 255, 0.95); 
            box-shadow: 0 4px 15px rgba(0,0,0,0.4); 
            min-width: 200px; letter-spacing: 0.5px;
        }
        .turn-red { color: #c62828; }
        .turn-black { color: #212121; }
        .win-msg { color: #2e7d32; font-size: 22px; animation: blink 1.5s infinite; }

        @keyframes blink { 50% { opacity: 0.3; } }

        .board-container { 
            position: relative; width: 450px; height: 500px; 
            background-color: #e6c280; 
            border: 14px solid #4a3123; border-radius: 8px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.2);
            /* SVG NỀN ĐÃ CẬP NHẬT: Đủ 10 hàng và Thêm các dấu vị trí Pháo/Tốt */
            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22450%22%20height%3D%22500%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Crect%20width%3D%22450%22%20height%3D%22500%22%20fill%3D%22%23e6c280%22/%3E%0A%3Cg%20stroke%3D%22%235c3a21%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22square%22%3E%0A%3Cpath%20d%3D%22M25%2025%20L425%2025%20L425%20475%20L25%20475%20Z%22%20stroke-width%3D%223%22/%3E%0A%3Cpath%20d%3D%22M25%2025%20L25%20225%20M75%2025%20L75%20225%20M125%2025%20L125%20225%20M175%2025%20L175%20225%20M225%2025%20L225%20225%20M275%2025%20L275%20225%20M325%2025%20L325%20225%20M375%2025%20L375%20225%20M425%2025%20L425%20225%22/%3E%0A%3Cpath%20d%3D%22M25%20275%20L25%20475%20M75%20275%20L75%20475%20M125%20275%20L125%20475%20M175%20275%20L175%20475%20M225%20275%20L225%20475%20M275%20275%20L275%20475%20M325%20275%20L325%20475%20M375%20275%20L375%20475%20M425%20275%20L425%20475%22/%3E%0A%3Cpath%20d%3D%22M25%2025%20L425%2025%20M25%2075%20L425%2075%20M25%20125%20L425%20125%20M25%20175%20L425%20175%20M25%20225%20L425%20225%20M25%20275%20L425%20275%20M25%20325%20L425%20325%20M25%20375%20L425%20375%20M25%20425%20L425%20425%20M25%20475%20L425%20475%22/%3E%0A%3Cpath%20d%3D%22M175%2025%20L275%20125%20M275%2025%20L175%20125%20M175%20375%20L275%20475%20M275%20375%20L175%20475%22/%3E%0A%3C/g%3E%0A%3Cg%20stroke%3D%22%235c3a21%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%20stroke-linecap%3D%22square%22%3E%0A%3Cpath%20d%3D%22M63%20121%20L71%20121%20M71%20113%20L71%20121M63%20129%20L71%20129%20M71%20129%20L71%20137M79%20121%20L87%20121%20M79%20113%20L79%20121M79%20129%20L87%20129%20M79%20129%20L79%20137M363%20121%20L371%20121%20M371%20113%20L371%20121M363%20129%20L371%20129%20M371%20129%20L371%20137M379%20121%20L387%20121%20M379%20113%20L379%20121M379%20129%20L387%20129%20M379%20129%20L379%20137M63%20371%20L71%20371%20M71%20363%20L71%20371M63%20379%20L71%20379%20M71%20379%20L71%20387M79%20371%20L87%20371%20M79%20363%20L79%20371M79%20379%20L87%20379%20M79%20379%20L79%20387M363%20371%20L371%20371%20M371%20363%20L371%20371M363%20379%20L371%20379%20M371%20379%20L371%20387M379%20371%20L387%20371%20M379%20363%20L379%20371M379%20379%20L387%20379%20M379%20379%20L379%20387M29%20171%20L37%20171%20M29%20163%20L29%20171M29%20179%20L37%20179%20M29%20179%20L29%20187M113%20171%20L121%20171%20M121%20163%20L121%20171M113%20179%20L121%20179%20M121%20179%20L121%20187M129%20171%20L137%20171%20M129%20163%20L129%20171M129%20179%20L137%20179%20M129%20179%20L129%20187M213%20171%20L221%20171%20M221%20163%20L221%20171M213%20179%20L221%20179%20M221%20179%20L221%20187M229%20171%20L237%20171%20M229%20163%20L229%20171M229%20179%20L237%20179%20M229%20179%20L229%20187M313%20171%20L321%20171%20M321%20163%20L321%20171M313%20179%20L321%20179%20M321%20179%20L321%20187M329%20171%20L337%20171%20M329%20163%20L329%20171M329%20179%20L337%20179%20M329%20179%20L329%20187M413%20171%20L421%20171%20M421%20163%20L421%20171M413%20179%20L421%20179%20M421%20179%20L421%20187M29%20321%20L37%20321%20M29%20313%20L29%20321M29%20329%20L37%20329%20M29%20329%20L29%20337M113%20321%20L121%20321%20M121%20313%20L121%20321M113%20329%20L121%20329%20M121%20329%20L121%20337M129%20321%20L137%20321%20M129%20313%20L129%20321M129%20329%20L137%20329%20M129%20329%20L129%20337M213%20321%20L221%20321%20M221%20313%20L221%20321M213%20329%20L221%20329%20M221%20329%20L221%20337M229%20321%20L237%20321%20M229%20313%20L229%20321M229%20329%20L237%20329%20M229%20329%20L229%20337M313%20321%20L321%20321%20M321%20313%20L321%20321M313%20329%20L321%20329%20M321%20329%20L321%20337M329%20321%20L337%20321%20M329%20313%20L329%20321M329%20329%20L337%20329%20M329%20329%20L329%20337M413%20321%20L421%20321%20M421%20313%20L421%20321M413%20329%20L421%20329%20M421%20329%20L421%20337%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
            transform: scale(min(1, calc(100vw / 500))); transform-origin: top center; touch-action: none; 
        }

        /* Hệ thống đánh số 1-9 */
        .board-numbers {
            position: absolute; width: 450px; height: 25px;
            display: flex; font-family: Arial, sans-serif; font-weight: bold;
            color: #5c3a21; font-size: 16px; z-index: 2; opacity: 0.8;
            pointer-events: none;
        }
        .board-numbers span { width: 50px; text-align: center; line-height: 25px; }
        .top-numbers { top: 0; left: 0; }
        .bottom-numbers { bottom: 0; left: 0; color: #c62828;}

        .river-text {
            position: absolute; top: 225px; left: 25px; width: 400px; height: 50px;
            display: flex; justify-content: center; align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 25px; font-weight: 800; color: #4a3123; opacity: 0.78;
            letter-spacing: 0.5px; text-transform: uppercase; text-align: center;
            user-select: none; pointer-events: none; z-index: 1;
        }

        .click-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; pointer-events: auto; touch-action: none; }
        .click-cell { width: 50px; height: 50px; cursor: pointer; }

        .piece { 
            position: absolute; width: 42px; height: 42px; border-radius: 50%; 
            background: radial-gradient(circle at 12px 12px, #ffffff, #e8dcc4);
            border: 1px solid #8b7355; 
            display: flex; justify-content: center; align-items: center; 
            font-weight: bold; font-size: 24px; 
            box-shadow: 2px 4px 6px rgba(0,0,0,0.5), inset -2px -3px 5px rgba(0,0,0,0.15); 
            user-select: none; z-index: 5; transition: top 0.2s, left 0.2s; 
            cursor: pointer; pointer-events: none; transform: translate(4px, 4px);
        }
        
        .red { color: #c62828; text-shadow: 1px 1px 0px rgba(255,255,255,0.7); }
        .black { color: #111; text-shadow: 1px 1px 0px rgba(255,255,255,0.7); }
        
        .selected-marker { 
            position: absolute; width: 48px; height: 48px; 
            background-color: rgba(76, 175, 80, 0.4); 
            border: 2px solid #4CAF50; border-radius: 50%; 
            z-index: 4; pointer-events: none; box-shadow: 0 0 10px #4CAF50;
        }

        .toolbar { 
            margin-top: 25px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
            transform-origin: top center; transform: scale(min(1, calc(100vw / 500)));
            width: 100%; max-width: 480px; padding: 0 10px;
        }
        button { 
            padding: 12px 18px; font-size: 15px; font-weight: bold; cursor: pointer; 
            border: none; border-radius: 25px; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: all 0.2s ease; 
            letter-spacing: 0.5px;
        }
        button:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        
        .btn-reset { background: linear-gradient(135deg, #d32f2f, #b71c1c); color: white; }
        .btn-reset:hover { background: linear-gradient(135deg, #b71c1c, #961313); }
        
        .btn-undo { background: linear-gradient(135deg, #546e7a, #37474f); color: white; }
        .btn-undo:hover { background: linear-gradient(135deg, #37474f, #263238); }
        
        .btn-puzzle { background: linear-gradient(135deg, #f39c12, #d35400); color: white; }
        .btn-puzzle:hover { background: linear-gradient(135deg, #d35400, #a04000); }

        button:disabled { background: #90a4ae; cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none;}

        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px);
            display: none; justify-content: center; align-items: center; z-index: 1000;
        }
        .modal-content {
            background: #fff; padding: 25px; border-radius: 15px; width: 90%; max-width: 380px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.7); text-align: center;
            max-height: 80vh; display: flex; flex-direction: column;
        }
        .modal-content h3 { margin-top: 0; color: #2c3e50; font-size: 24px; border-bottom: 2px solid #e6c280; padding-bottom: 10px; flex-shrink: 0;}
        .puzzle-list { 
            display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; 
            overflow-y: auto; padding-right: 5px; flex-grow: 1;
        }
        .puzzle-list::-webkit-scrollbar { width: 6px; }
        .puzzle-list::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 10px; }
        
        .puzzle-btn { 
            background: #ecf0f1; color: #2c3e50; padding: 14px; border-radius: 8px; 
            font-size: 16px; border: 1px solid #bdc3c7; font-weight: bold; text-align: left; flex-shrink: 0;
        }
        .puzzle-btn:hover { background: #d35400; color: white; border-color: #d35400;}
        .btn-close { background: #7f8c8d; color: white; width: 100%; font-size: 16px; flex-shrink: 0;}


        /* ===== Giao diện tối ưu điện thoại + phong cách sang trọng ===== */
        :root {
            --board-scale: 1;
            --gold: #f1d27a;
            --gold-deep: #9b6a21;
            --wood-dark: #3a2418;
            --glass: rgba(255, 255, 255, 0.13);
        }

        body {
            padding: clamp(10px, 2.5vw, 22px) 12px 28px;
            min-height: 100svh;
            background:
                radial-gradient(circle at 50% -10%, rgba(241, 210, 122, 0.26), transparent 32%),
                radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.08), transparent 24%),
                linear-gradient(135deg, #111820 0%, #1f2c38 45%, #0b1016 100%);
            color: #fff;
        }

        .game-info {
            margin: 0 auto 12px;
            color: #f8ecd0;
            background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
            border: 1px solid rgba(241, 210, 122, 0.52);
            box-shadow: 0 12px 28px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            min-width: min(320px, calc(100vw - 32px));
        }

        .board-shell {
            width: 478px;
            height: 528px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin: 0 auto;
            position: relative;
            transition: width 0.18s ease, height 0.18s ease;
        }

        .board-container {
            flex: 0 0 auto;
            border-color: #4a2e1f;
            border-radius: 16px;
            box-shadow:
                0 22px 55px rgba(0,0,0,0.62),
                0 0 0 3px rgba(241, 210, 122, 0.24),
                inset 0 0 24px rgba(82, 44, 15, 0.26);
            transform: scale(var(--board-scale)) !important;
            transform-origin: top center !important;
            overflow: visible;
        }

        .board-container::before {
            content: '';
            position: absolute;
            inset: -11px;
            border-radius: 18px;
            border: 1px solid rgba(255, 230, 160, 0.42);
            pointer-events: none;
            z-index: 0;
        }

        .river-text {
            font-size: clamp(18px, 5vw, 25px);
            font-weight: 900;
            color: #3c2416;
            opacity: 0.88;
            text-shadow: 0 1px 0 rgba(255, 240, 190, 0.72);
            letter-spacing: 0.8px;
        }

        .piece {
            border: 2px solid rgba(105, 77, 45, 0.74);
            background: radial-gradient(circle at 32% 26%, #fffdf6 0%, #efe1be 58%, #c8ad78 100%);
            box-shadow: 0 6px 12px rgba(0,0,0,0.42), inset -3px -4px 8px rgba(71,45,22,0.18), inset 2px 2px 5px rgba(255,255,255,0.88);
        }

        .selected-marker {
            background: radial-gradient(circle, rgba(255, 231, 130, 0.62), rgba(255, 167, 38, 0.25));
            border: 2px solid #f8d66d;
            box-shadow: 0 0 18px rgba(248, 214, 109, 0.95);
        }

        .toolbar {
            margin-top: 16px;
            width: min(478px, calc(100vw - 24px));
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            transform: none !important;
            padding: 0;
            max-width: none;
        }

        button {
            min-height: 46px;
            border-radius: 14px;
            letter-spacing: 0.2px;
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: 0 10px 20px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
        }

        .btn-puzzle { background: linear-gradient(135deg, #f3c969, #a96b1e); }
        .btn-reset { background: linear-gradient(135deg, #b63f35, #6f1515); }
        .btn-undo { background: linear-gradient(135deg, #607d8b, #27343b); }
        .btn-ai { background: linear-gradient(135deg, #2e7d32, #145a32); color: white; }
        .btn-ai:hover { background: linear-gradient(135deg, #256b2b, #104726); }
        .btn-replay { background: linear-gradient(135deg, #0f8db3, #07506b); color: white; }
        .btn-replay:hover { background: linear-gradient(135deg, #0b7899, #053e54); }
        .btn-sound { background: linear-gradient(135deg, #5b4a8c, #2f245b); color: white; }
        .btn-sound:hover { background: linear-gradient(135deg, #4b3d75, #251b49); }
        .mode-active { box-shadow: 0 0 0 2px rgba(255, 225, 150, 0.75), 0 10px 20px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.22); }
        .control-panel {
            width: min(478px, calc(100vw - 24px));
            margin-top: 10px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: stretch;
        }
        .difficulty-panel {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(241,210,122,0.18);
            border-radius: 16px;
            padding: 8px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .difficulty-btn {
            min-height: 40px;
            font-size: 13px;
            padding: 8px 10px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
            color: #fff6de;
            border: 1px solid rgba(255,255,255,0.08);
        }
        .difficulty-btn.active {
            background: linear-gradient(135deg, #d8a449, #7d4f18);
            color: #fff;
            box-shadow: 0 0 0 2px rgba(255, 225, 150, 0.65), 0 8px 16px rgba(0,0,0,0.22);
        }

        .modal-content {
            background: linear-gradient(145deg, #fff9ea, #f2dfb4);
            border: 1px solid rgba(130, 82, 22, 0.35);
            box-shadow: 0 25px 70px rgba(0,0,0,0.72);
        }

        .modal-content h3 { color: #3d2816; }
        .modal-content h3,
        .modal-subtitle,
        .puzzle-btn,
        .puzzle-name,
        .puzzle-order,
        button {
            font-family: 'Segoe UI', Tahoma, Arial, 'Noto Sans', sans-serif;
            text-transform: none;
            letter-spacing: 0;
            font-variant-ligatures: none;
        }
        .puzzle-btn {
            border-radius: 12px;
            background: rgba(255,255,255,0.62);
            border: 1px solid rgba(94, 61, 22, 0.22);
        }
        .puzzle-btn:hover { background: linear-gradient(135deg, #d8952e, #8d5415); color: white; }

        .win-overlay {
            position: absolute;
            inset: -14px;
            z-index: 40;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 18px;
            background: radial-gradient(circle at 50% 42%, rgba(255, 224, 142, 0.45), rgba(0,0,0,0.54) 68%);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            animation: winFade 0.32s ease-out both;
        }

        .win-card {
            position: relative;
            z-index: 2;
            width: min(82%, 330px);
            padding: 22px 18px 18px;
            border-radius: 22px;
            text-align: center;
            color: #fff8de;
            background: linear-gradient(145deg, rgba(58, 35, 18, 0.94), rgba(117, 72, 22, 0.9));
            border: 1px solid rgba(255, 225, 150, 0.78);
            box-shadow: 0 18px 45px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.2);
            animation: winPop 0.62s cubic-bezier(.18, 1.35, .25, 1) both;
        }

        .win-crown { font-size: 42px; margin-bottom: 4px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.35)); }
        .win-title { font-size: 18px; opacity: 0.88; margin-bottom: 6px; }
        .win-name { font-size: clamp(24px, 7vw, 34px); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
        .win-note { margin-top: 10px; font-size: 13px; opacity: 0.82; }
        .win-close {
            margin-top: 14px;
            min-height: 38px;
            padding: 8px 18px;
            border-radius: 999px;
            color: #3b260f;
            background: linear-gradient(135deg, #ffe9a3, #c98b2c);
            box-shadow: 0 8px 16px rgba(0,0,0,0.26);
        }

        .confetti {
            position: absolute;
            top: -22px;
            width: 8px;
            height: 15px;
            border-radius: 3px;
            opacity: 0.95;
            animation: confettiFall 1.95s linear infinite;
        }

        .glow-ring {
            position: absolute;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 2px solid rgba(255, 224, 142, 0.58);
            animation: glowRing 1.6s ease-out infinite;
        }

        .win-msg { animation: statusWin 1.4s ease-in-out infinite; }

        @keyframes winFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes winPop { from { transform: translateY(18px) scale(0.82); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
        @keyframes confettiFall {
            0% { transform: translateY(-30px) rotate(0deg); }
            100% { transform: translateY(620px) rotate(540deg); }
        }
        @keyframes glowRing {
            0% { transform: scale(0.4); opacity: 0.75; }
            100% { transform: scale(3.6); opacity: 0; }
        }
        @keyframes statusWin {
            0%, 100% { text-shadow: 0 0 0 rgba(255,218,120,0); transform: scale(1); }
            50% { text-shadow: 0 0 18px rgba(255,218,120,0.9); transform: scale(1.04); }
        }

        @media (max-width: 520px) {
            body { padding-left: 10px; padding-right: 10px; }
            .game-info { font-size: 15px; padding: 10px 16px; margin-bottom: 10px; }
            .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
            .control-panel { grid-template-columns: 1fr; }
            .difficulty-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            button { min-height: 44px; font-size: 14px; }
            .modal-content { width: calc(100vw - 28px); padding: 18px; }
            .modal-content h3 { font-size: 20px; }
            .puzzle-btn { padding: 12px; font-size: 14px; text-align: center; }
        }



        /* ===== Gợi ý nước đi + cảnh báo chiếu ===== */
        .move-marker {
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,213,79,0.9));
            border: 2px solid rgba(126, 81, 18, 0.65);
            box-shadow: 0 0 14px rgba(255, 213, 79, 0.95), inset 0 1px 2px rgba(255,255,255,0.9);
            z-index: 4;
            pointer-events: none;
            transform: translate(16px, 16px) scale(0.82);
            animation: moveHintPop 0.22s ease-out both, moveHintPulse 1.25s ease-in-out infinite;
        }

        .move-marker.capture {
            width: 44px;
            height: 44px;
            background: radial-gradient(circle, rgba(255,112,67,0.16), rgba(255,193,7,0.10));
            border: 3px solid rgba(255, 112, 67, 0.95);
            box-shadow: 0 0 18px rgba(255, 112, 67, 0.78), inset 0 0 12px rgba(255, 214, 128, 0.26);
            transform: translate(3px, 3px) scale(0.88);
        }

        .check-alert {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 8px;
            padding: 3px 9px;
            border-radius: 999px;
            color: #fff4d5;
            background: linear-gradient(135deg, rgba(198,40,40,0.95), rgba(129,0,0,0.95));
            box-shadow: 0 0 14px rgba(255, 91, 91, 0.55);
            font-size: 13px;
            animation: checkBlink 1s ease-in-out infinite;
        }

        @keyframes moveHintPop {
            from { opacity: 0; transform: translate(16px, 16px) scale(0.2); }
            to { opacity: 1; transform: translate(16px, 16px) scale(0.82); }
        }
        @keyframes moveHintPulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.25); }
        }
        @keyframes checkBlink {
            0%, 100% { transform: translateY(0); opacity: 0.92; }
            50% { transform: translateY(-1px); opacity: 1; }
        }

    

        .app-header {
            width: min(478px, calc(100vw - 24px));
            margin: 0 auto 14px;
            text-align: center;
            color: #fff4d9;
        }
        .brand-title {
            font-size: clamp(24px, 7vw, 34px);
            font-weight: 900;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            text-shadow: 0 6px 22px rgba(0,0,0,0.35);
        }
        .brand-subtitle {
            font-size: 13px;
            line-height: 1.45;
            color: rgba(255, 243, 214, 0.82);
            max-width: 430px;
            margin: 0 auto;
        }
        .top-stack {
            width: min(478px, calc(100vw - 24px));
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 6px;
        }
        .puzzle-meta {
            position: relative;
            overflow: hidden;
            border-radius: 18px;
            padding: 12px 16px;
            background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
            border: 1px solid rgba(241, 210, 122, 0.45);
            color: #fff3cf;
            box-shadow: 0 12px 24px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.16);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .puzzle-meta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, rgba(255,255,255,0.12), transparent 40%, rgba(255,255,255,0.08));
            pointer-events: none;
        }
        .puzzle-meta-label {
            font-size: 11px;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            opacity: 0.72;
            margin-bottom: 4px;
        }
        .puzzle-meta-title {
            font-size: clamp(16px, 4vw, 20px);
            font-weight: 800;
            line-height: 1.25;
        }
        .puzzle-meta-desc {
            margin-top: 4px;
            font-size: 12px;
            color: rgba(255, 243, 214, 0.82);
        }

        .board-container.check-state::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 18px;
            border: 2px solid rgba(255, 100, 100, 0.72);
            box-shadow: 0 0 30px rgba(255, 77, 77, 0.38), inset 0 0 12px rgba(255, 77, 77, 0.12);
            animation: boardDanger 1s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }
        @keyframes boardDanger {
            0%,100% { opacity: 0.55; }
            50% { opacity: 1; }
        }

        .piece.selected-piece {
            box-shadow: 0 0 0 2px rgba(255, 217, 102, 0.92), 0 10px 20px rgba(0,0,0,0.48), 0 0 18px rgba(255, 217, 102, 0.85), inset -3px -4px 8px rgba(71,45,22,0.18), inset 2px 2px 5px rgba(255,255,255,0.88);
            transform: translate(4px, 4px) scale(1.05);
        }

        .move-marker.capture::before {
            content: '×';
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(255, 112, 67, 0.95);
            font-size: 24px;
            font-weight: 900;
        }

        .toast-stack {
            position: fixed;
            top: max(12px, env(safe-area-inset-top));
            right: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 2000;
            pointer-events: none;
        }
        .toast {
            min-width: min(300px, calc(100vw - 28px));
            max-width: 360px;
            padding: 12px 14px;
            border-radius: 16px;
            color: #fffaf0;
            box-shadow: 0 14px 34px rgba(0,0,0,0.35);
            border: 1px solid rgba(255,255,255,0.24);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            animation: toastIn 0.28s ease-out both, toastOut 0.3s ease-in 2.85s forwards;
        }
        .toast strong { display: block; margin-bottom: 2px; font-size: 14px; }
        .toast small { color: rgba(255,250,240,0.86); font-size: 12px; }
        .toast.info { background: linear-gradient(135deg, rgba(180,121,35,0.96), rgba(109,69,18,0.94)); }
        .toast.check { background: linear-gradient(135deg, rgba(198,40,40,0.98), rgba(107,0,0,0.96)); }
        .toast.mate { background: linear-gradient(135deg, rgba(68,36,8,0.98), rgba(209,145,46,0.96)); }
        @keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes toastOut { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }

        .modal-content h3 { margin-bottom: 4px; }
        .modal-subtitle {
            color: rgba(61,40,22,0.75);
            font-size: 13px;
            margin-bottom: 16px;
        }
        .puzzle-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 18px;
            padding-right: 2px;
        }
        .puzzle-btn {
            position: relative;
            min-height: 72px;
            padding: 12px 42px 12px 14px;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }
        .puzzle-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,0.16); }
        .puzzle-btn.active {
            background: linear-gradient(135deg, #d8952e, #8d5415);
            color: #fff;
            border-color: rgba(116, 68, 15, 0.6);
            box-shadow: 0 12px 24px rgba(97, 55, 11, 0.28);
        }
        .puzzle-order {
            font-size: 11px;
            letter-spacing: 1.1px;
            text-transform: uppercase;
            opacity: 0.76;
        }
        .puzzle-name {
            font-size: 15px;
            line-height: 1.2;
            font-weight: 800;
        }
        .puzzle-arrow {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            opacity: 0.7;
        }

        @media (max-width: 520px) {
            .app-header { margin-bottom: 10px; }
            .brand-title { font-size: 22px; }
            .brand-subtitle { font-size: 12px; }
            .puzzle-meta { padding: 10px 12px; border-radius: 16px; }
            .puzzle-list { grid-template-columns: 1fr; }
            .puzzle-btn { min-height: 62px; padding: 11px 38px 11px 12px; }
            .puzzle-name { font-size: 14px; }
            .toast-stack { left: 10px; right: 10px; }
            .toast { min-width: auto; max-width: none; }
        }

    
        .click-cell, .piece, button {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
.engine-status {
    width: min(478px, calc(100vw - 24px));
    margin: 10px auto 0;
    padding: 10px 14px;
    border-radius: 14px;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    color: #ffe7b3;
    border: 1px solid rgba(241, 210, 122, 0.32);
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.engine-status.ok {
    color: #bfffc4;
    border-color: rgba(46, 204, 113, 0.6);
}
.engine-status.bad {
    color: #ffd1d1;
    border-color: rgba(255, 99, 99, 0.65);
}
@media (max-width: 520px) {
    .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}