@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
        
        :root {
            /* --- Brand Colors --- */
            --main-color: #1A48EE;
            --secondary-color: #008AFF;
            --tertiary-color: #2c20E6;
            --secondary-background: #f9f9f9;
            --main-background: #e5f3ff;
            --tertiary-background: #e6e5ea;
            --color-white: #ffffff;
            --color-error-dark: #c53030;
            --color-green: #16a34a;
            --color-green-dark: #047857;
            --color-light-green: #D1FAE5;
            --color-contrast-green: #065F46;
            --border-color: #e2e8f0;
            --color-gray: #4a5568;
            --color-light-gray: #ccc;
            --color-very-light-gray: #e0e0e0;

            /* --- Slate tokens --- */
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-300: #cbd5e1;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;

            /* --- Functional Overrides --- */
            --blue-50: var(--main-background);
            --blue-400: var(--secondary-color);
            --blue-500: var(--main-color);
            --blue-600: var(--main-color);
            --blue-700: var(--tertiary-color);

            /* --- Card Colors --- */
            --rose-100: #ffe4e6;
            --rose-200: #fecdd3;
            --rose-700: #be123c;
            --indigo-50: #eef2ff;
            --indigo-100: #e0e7ff;
            --indigo-200: #c7d2fe;
            --indigo-700: #4338ca;
            --red-600: #dc2626;
            --orange-500: #f97316;
            
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

            --stack-offset: 35px;
        }

        @media (max-width: 640px) {
            :root { --stack-offset: 28px; }
        }

        * { box-sizing: border-box; touch-action: manipulation; }

        html, body {
            overflow-x: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--main-background);
            color: var(--slate-800);
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-end { justify-content: flex-end; }
        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-4 { gap: 1rem; }
        .w-full { width: 100%; }
        .hidden { display: none !important; }

        @media (min-width: 768px) {
            .md-flex-row { flex-direction: row; }
            .md-justify-end { justify-content: flex-end; }
        }

        @media (min-width: 1024px) {
            .lg-flex-row { flex-direction: row; }
            .lg-justify-between { justify-content: space-between; }
        }

        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
        .uppercase { text-transform: uppercase; }
        .tracking-wider { letter-spacing: 0.05em; }

        .game-header-area {
            margin-bottom: 1.5rem;
        }

        .dashboard {
            display: flex;
            gap: 0.75rem;
            background: white;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            width: 100%;
            justify-content: space-around;
            margin-right: 0.5rem;
        }
        @media (min-width: 768px) { .dashboard { width: auto; justify-content: flex-start; gap: 1rem; padding: 0.5rem 1rem; margin-bottom: 1rem;} }
        .divider { width: 1px; background: var(--border-color); }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.625rem 0.875rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
            box-shadow: var(--shadow-sm);
            white-space: nowrap;
        }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-white { background: white; border-color: var(--slate-300); color: var(--slate-700); }
        .btn-indigo { background: var(--indigo-50); border-color: var(--indigo-200); color: var(--indigo-700); }
        .btn-slate { background: var(--slate-800); color: white; }
        .btn-primary { background: var(--main-color); color: white; }

        .btn:focus-visible, .app-container .card:focus-visible, .empty-slot:focus-visible {
            outline: 3px solid var(--main-color);
            outline-offset: 2px;
        }

        .game-grid {
            display: grid;
            /* Use minmax(0, 1fr) to force all columns to stay equal regardless of content shrinking */
            grid-template-columns: repeat(8, minmax(0, 1fr)); 
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) { .game-grid { gap: 1rem; } }

        .section-label {
            grid-column: span 4;
            margin-bottom: 0.25rem;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--slate-700); 
            text-transform: uppercase;
            letter-spacing: 0.05em;
            /* Ensure text doesn't force column expansion */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .board-bg {
            flex: 1;
            background: rgba(26, 72, 238, 0.05);
            border-radius: 0.75rem;
            padding: 0.5rem;
            border: 1px solid var(--border-color);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        @media (min-width: 768px) { .board-bg { padding: 1.5rem; } }

        .scroll-wrapper { min-width: 660px; position: relative; }
        @media (min-width: 768px) { .scroll-wrapper { min-width: auto; } }

        .card-container { position: relative; width: 100%; aspect-ratio: 3/4; max-width: 140px; min-width: 0; }

        .app-container .card {
            position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 0.4rem;
            border-width: 1px; border-style: solid; display: flex; flex-direction: column;
            justify-content: space-between; padding: 0.4rem !important; cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12); outline: none; margin: 0 !important;
            background-image: none !important; opacity: 1 !important; background-clip: padding-box;
        }

        .card.is-red { background-color: var(--rose-100) !important; border-color: var(--rose-200); color: var(--rose-700); }
        .card.is-black { background-color: white !important; border-color: var(--slate-300); color: var(--slate-800); }
        .card.selected { box-shadow: 0 0 0 4px var(--main-color) !important; transform: translateY(-4px); z-index: 100 !important; }

        .empty-slot {
            width: 100%; aspect-ratio: 3/4; border-radius: 0.4rem;
            border: 2px dashed var(--secondary-color); background-color: var(--slate-200) !important; 
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 0.5rem; outline: none;
        }
        .empty-slot.active { border-color: var(--main-color); background-color: var(--main-background); }

        .card-rank { font-weight: 800; font-size: 0.8rem; line-height: 1; opacity: 1 !important; }
        @media (min-width: 768px) { .card-rank { font-size: 0.95rem; } }
        .card-label-small { font-size: 0.65rem; font-weight: 700; tracking-wider: 0.05em; line-height: 1.1; opacity: 1 !important; }
        .card-title-bottom { font-size: 0.65rem; font-weight: 700; tracking-wider: 0.05em; text-transform: uppercase; line-height: 1; opacity: 1 !important; }
        
        /* Overlap Prevention Logic */
        .app-container .center-absolute { opacity: 1 !important; color: inherit; }
        .app-container .center-absolute svg { width: 32px; height: 32px; transition: all 0.2s; }
        
        @media (max-width: 640px) {
            .app-container .center-absolute svg { 
                width: 20px !important; 
                height: 20px !important; 
                /* Shifted down to provide clear space for top-right text */
                transform: translateY(15%); 
            }
            .card-color-text { font-size: 0.5rem; }
            .card-label-small { font-size: 0.55rem; }
        }

        .instructions {
            margin-top: 2rem; background: white; border-radius: 0.75rem;
            padding: 1.5rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
        }
        /* Responsive Handbook Stacking */
        .handbook-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            font-size: 0.875rem;
            color: var(--slate-700);
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        @media (min-width: 768px) {
            .handbook-grid { grid-template-columns: 1fr 1fr; }
        }

        .list-disc { list-style-type: disc; padding-left: 1.5rem; }
        .list-disc li { margin-bottom: 0.5rem; }

        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
        }
        .center-absolute { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
        
        /* Modal Enhancements */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(15, 23, 42, 0.75);
            display: flex; align-items: center; justify-content: center; z-index: 1000;
            backdrop-filter: blur(8px); padding: 1rem;
        }
        .modal-content {
            background: white; border-radius: 1rem; box-shadow: var(--shadow-lg);
            max-width: 28rem; width: 100%; padding: 2rem; text-align: center;
            border: 1px solid var(--border-color);
        }

        .ad-container { margin: 1.5rem 0; text-align: center; }
        .seo-article { background: #fff; padding: 1.5rem; border-radius: 0.75rem; margin-top: 2rem; border: 1px solid var(--border-color); }