:root {
            --cell-border: #334155;
            --block-border: #ffffff;
            --grid-border: #ffffff;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #0f172a;
            color: #f8fafc;
            margin: 0;
            padding: 10px;
            min-height: 100vh;
            box-sizing: border-box;
            user-select: none;
            transition: background-color 0.2s, color 0.2s;
        }
        
        body.light-theme {
            --cell-border: #94a3b8;
            --block-border: #0f172a;
            --grid-border: #0f172a;
            background-color: #f1f5f9;
            color: #0f172a;
        }
        body.light-theme .meta-bar {
            background-color: #cbd5e1;
            color: #0f172a;
        }
        body.light-theme .cell {
            background-color: #e2e8f0;
        }
        body.light-theme .cell.clue {
            background-color: #ffffff;
            color: #475569;
        }
        body.light-theme .cell.user {
            color: #1d4ed8;
        }
        body.light-theme .paused-mask,
        body.light-theme .victory-mask {
            background-color: rgba(15, 23, 42, 0.98);
        }

        select, .btn-top, .btn-symbol, .btn-action, #btn-theme, #btn-audio, #btn-pause, #btn-toggle-symbols, #timer-display {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border: 1px solid #475569 !important;
        }
        select:active, .btn-top:active, .btn-symbol:active, .btn-action:active {
            background-color: #334155 !important;
        }

        header {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 420px;
            max-width: 100%;
            margin-bottom: 5px;
        }

        .title-container {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-size: 32px;
            line-height: 1;
            margin: 8px 0;
        }
        .title-space {
            width: 10px;
        }
        .horseshoe-title, .coin-title {
            display: inline-block;
            width: 32px;
            height: 32px;
            vertical-align: middle;
        }
        .horseshoe-title svg, .coin-title svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .horseshoe-title .hs-outer {
            fill: #ef4444;
            stroke: #ef4444;
            stroke-width: 8px;
            stroke-linejoin: round;
        }
        .horseshoe-title .hs-mid {
            fill: #000000;
            stroke: #000000;
            stroke-width: 4px;
            stroke-linejoin: round;
        }
        .horseshoe-title .hs-inner {
            fill: #facc15;
        }
        .horseshoe-title .hs-crease {
            fill: none;
            stroke: #7f1d1d;
            stroke-width: 2.5px;
            stroke-linecap: round;
        }
        .horseshoe-title .hs-nail {
            fill: #000000;
        }
        .coin-title .coin-outer {
            fill: #ef4444;
            stroke: #ef4444;
            stroke-width: 8px;
        }
        .coin-title .coin-mid {
            fill: #000000;
            stroke: #000000;
            stroke-width: 4px;
        }
        .coin-title .coin-inner {
            fill: #facc15;
        }
        .coin-title .coin-rim {
            fill: none;
            stroke: #7f1d1d;
            stroke-width: 3px;
        }
        .coin-title .coin-star {
            fill: none;
            stroke: #7f1d1d;
            stroke-width: 4px;
            stroke-linecap: round;
        }

        .title-letter {
            position: relative;
            font-family: "Georgia", Georgia, serif;
            font-size: 32px;
            font-weight: 900;
            display: inline-block;
            line-height: 1;
        }
        .title-letter::before, .title-letter::after {
            content: attr(data-char);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .title-letter.title-gold {
            color: #facc15;
        }
        .title-letter.title-gold::before {
            z-index: -1;
            color: #000000;
            -webkit-text-stroke: 3.5px #000000;
            -webkit-text-fill-color: #000000;
            left: 50%; top: 50%; transform: translate(-50%, -50%);
        }
        .title-letter.title-gold::after {
            z-index: -2;
            color: #ef4444;
            -webkit-text-stroke: 7.5px #ef4444;
            -webkit-text-fill-color: #ef4444;
            left: 50%; top: 50%; transform: translate(-50%, -50%);
        }

        .title-letter.title-fd {
            color: #ef4444;
        }
        .title-letter.title-fd::before {
            z-index: -1;
            color: #facc15;
            -webkit-text-stroke: 3.5px #facc15;
            -webkit-text-fill-color: #facc15;
            left: 50%; top: 50%; transform: translate(-50%, -50%);
        }
        .title-letter.title-fd::after {
            z-index: -2;
            color: #000000;
            -webkit-text-stroke: 7.5px #000000;
            -webkit-text-fill-color: #000000;
            left: 50%; top: 50%; transform: translate(-50%, -50%);
        }
        
        .top-bar {
            display: flex;
            width: 420px;
            max-width: 100%;
            gap: 4px;
            margin-bottom: 5px;
            justify-content: space-between;
            align-items: center;
        }
        .top-bar select, .top-bar .btn-top {
            flex: 1;
            font-size: 16px;
            padding: 6px 0;
            height: 36px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            min-width: 0;
        }
        #btn-hint {
            flex: 0 0 36px;
        }

        .btn-group-single {
            display: flex;
            flex: 0 0 72px;
        }
        .btn-group-single .btn-top {
            flex: 1;
        }
        .btn-group-single .btn-top:first-child {
            border-radius: 6px 0 0 6px;
            border-right: none;
        }
        .btn-group-single .btn-top:last-child {
            border-radius: 0 6px 6px 0;
        }

        #diff-select {
            flex: 0 0 100px;
            font-size: 14px;
            text-align: center;
        }

        .meta-bar {
            background-color: #1e293b;
            color: #f8fafc;
            padding: 6px 12px;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 420px;
            max-width: 100%;
            box-sizing: border-box;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 5px;
        }

        #timer-display, #score-display {
            font-size: 14px;
            font-weight: bold;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            box-sizing: border-box;
        }

        #score-display {
            color: #22c55e;
        }

        .game-area-wrapper {
            position: relative;
            width: 420px;
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .grid-container {
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            grid-template-rows: repeat(9, 1fr);
            width: 100%;
            aspect-ratio: 1 / 1;
            border: 3px solid var(--grid-border);
            background-color: #0f172a;
            box-sizing: border-box;
        }
        
        .paused-mask, .victory-mask {
            display: none;
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(15, 23, 42, 0.95);
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            z-index: 50;
            border-radius: 4px;
        }

        .paused-mask {
            color: #64748b;
            font-size: 24px;
            font-weight: bold;
            border: 3px solid #64748b;
        }

        .victory-mask {
            flex-direction: column;
            color: #f8fafc;
            border: 3px solid #22c55e;
            text-align: center;
            padding: 10px;
            overflow-y: auto;
            z-index: 500;
        }

        .victory-title {
            font-size: 28px;
            color: #22c55e;
            font-weight: 900;
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
        }

        .btn-replay {
            background-color: #22c55e;
            color: #0f172a;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            margin-top: 5px;
        }
        .btn-replay:active {
            background-color: #16a34a;
        }

        .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border: 1px solid var(--cell-border);
            cursor: pointer;
            box-sizing: border-box;
            font-weight: bold;
            background-color: #1e293b;
            height: 100%;
            width: 100%;
            overflow: hidden;
            font-size: 26px;
        }
        
        .cell.thick-right {
            border-right: 3px solid var(--block-border) !important;
        }
        .cell.thick-bottom {
            border-bottom: 3px solid var(--block-border) !important;
        }

        .candidate-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            width: 100%;
            height: 100%;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none;
            position: relative;
        }
        
        .cand {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #64748b;
            line-height: 1;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
        }

        .cand:not(.highlighted-cand) {
            opacity: 0.80 !important;
        }
        
        .cand.cand-seven {
            color: #ef4444 !important; 
            font-family: "Georgia", Georgia, serif !important;
            font-weight: 900 !important;
            font-size: 11px !important;
            -webkit-text-stroke: 0.5px #facc15 !important; 
            text-shadow: none !important;
        }

        .cand.cand-dollar {
            color: #facc15 !important; 
            font-family: "Georgia", Georgia, serif !important;
            font-weight: 900 !important;
            font-size: 11px !important;
            -webkit-text-stroke: 0.5px #ef4444 !important; 
            text-shadow: none !important;
        }

        .cand.cand-cherry {
            filter: drop-shadow(0.4px 0px 0px #fff) drop-shadow(-0.4px 0px 0px #fff) drop-shadow(0px 0.4px 0px #fff) drop-shadow(0px -0.4px 0px #fff);
        }

        .cherry-symbol {
            display: inline-block;
            font-size: 26px;
            filter: drop-shadow(0.8px 0px 0px #ffffff) 
                    drop-shadow(-0.8px 0px 0px #ffffff) 
                    drop-shadow(0px 0.8px 0px #ffffff) 
                    drop-shadow(0px -0.8px 0px #ffffff);
        }

        .cand-sym-text {
            display: inline-block;
            line-height: 1;
        }

        .cand.highlighted-cand {
            position: relative;
            background-color: #facc15 !important; 
            z-index: 3 !important; 
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            box-shadow: none !important;
            border: none !important;
            outline: none !important;
            filter: none !important;
        }

        .cand.highlighted-cand .cand-sym-text {
            color: #000000 !important;
            filter: drop-shadow(0.5px 0px 0px #000000) 
                    drop-shadow(-0.5px 0px 0px #000000) 
                    drop-shadow(0px 0.5px 0px #000000) 
                    drop-shadow(0px -0.5px 0px #000000) !important;
        }

        .cand.highlighted-cand.cand-text {
            font-family: "Georgia", Georgia, serif !important;
            font-size: 12px !important;
        }
        .cand.highlighted-cand.cand-text[data-val="7"] .cand-sym-text { color: #ef4444 !important; }
        .cand.highlighted-cand.cand-text[data-val="$"] .cand-sym-text { color: #facc15 !important; }

        .cell.seven::before, .cell.seven::after,
        .cell.dollar::before, .cell.dollar::after,
        .cell.styled-number::before, .cell.styled-number::after,
        .btn-symbol.seven-btn::before, .btn-symbol.seven-btn::after,
        .btn-symbol.dollar-btn::before, .btn-symbol.dollar-btn::after,
        .btn-symbol.styled-number-btn::before, .btn-symbol.styled-number-btn::after {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            pointer-events: none; margin: 0; padding: 0; box-sizing: border-box;
        }

        .cell.exploding {
            z-index: 105 !important;
        }

        .collision-emoji {
            display: inline-block;
            font-size: 26px;
            animation: explode 0.4s ease-out forwards;
            will-change: transform;
            position: relative;
            z-index: 110 !important;
        }

        .floating-score {
            position: absolute;
            font-size: 20px;
            font-weight: 900;
            pointer-events: none;
            z-index: 150 !important;
            animation: floatUpFade 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.275) forwards;
            text-shadow: 0 0 5px #000000, 0 0 10px #000000;
            will-change: transform;
        }

        @keyframes floatUpFade {
            0% { transform: translateY(0) scale(0.7); opacity: 0; }
            20% { opacity: 1; transform: translateY(-12px) scale(1.2); }
            100% { transform: translateY(-60px) scale(1); opacity: 0; }
        }

        @keyframes explode {
            0% { transform: scale(0.3) rotate(0deg); opacity: 0; }
            50% { transform: scale(1.5) rotate(45deg); opacity: 1; }
            100% { transform: scale(1.0) rotate(90deg); opacity: 1; }
        }

        .cell.power-selected { 
            border: 3px solid #f97316 !important; 
            box-shadow: 0 0 20px #f97316, inset 0 0 10px #f97316 !important; 
            z-index: 5;
        }
        
        .cell.clue { background-color: #0f172a; color: #94a3b8; font-size: 26px; }
        .cell.user { color: #38bdf8; font-size: 26px; }
        
        .cell.seven, .cell.styled-number { 
            position: relative;
            color: #ef4444 !important; 
            font-family: "Georgia", Georgia, serif !important; 
            font-size: 34px !important; 
            font-weight: 900 !important;
            z-index: 1;
        }

        .cell.seven::before, .cell.styled-number::before {
            content: attr(data-val);
            position: absolute;
            z-index: -1;
            color: #000000 !important; 
            -webkit-text-stroke: 2px #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }

        .cell.seven::after, .cell.styled-number::after {
            content: attr(data-val);
            position: absolute;
            z-index: -2;
            color: #facc15 !important; 
            -webkit-text-stroke: 4.5px #facc15 !important;
            -webkit-text-fill-color: #facc15 !important;
        }

        .cell.dollar { 
            position: relative;
            color: #facc15 !important; 
            font-family: "Georgia", Georgia, serif !important; 
            font-size: 34px !important; 
            font-weight: 900 !important;
            z-index: 1;
        }

        .cell.dollar::before {
            content: "$";
            position: absolute;
            z-index: -1;
            color: #000000 !important; 
            -webkit-text-stroke: 2px #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }

        .cell.dollar::after {
            content: "$";
            position: absolute;
            z-index: -2;
            color: #ef4444 !important; 
            -webkit-text-stroke: 4.5px #ef4444 !important;
            -webkit-text-fill-color: #ef4444 !important;
        }

        .cand.cand-styled-number {
            color: #ef4444 !important; 
            font-family: "Georgia", Georgia, serif !important;
            font-weight: 900 !important;
            font-size: 11px !important;
            -webkit-text-stroke: 0.5px #facc15 !important; 
            text-shadow: none !important;
        }
        
        .btn-symbol.active-symbol {
            background-color: #2563eb !important;
            border-color: #60a5fa !important;
            box-shadow: 0 0 12px #2563eb;
        }
        
        .btn-symbol.disabled-symbol {
            opacity: 0.25 !important;
            background-color: #0f172a !important;
            border-color: #1e293b !important;
        }
        
        .btn-action.active-mode {
            background-color: #16a34a !important;
            border-color: #4ade80 !important;
        }
        
        .btn-action.power-active {
            background-color: #ea580c !important;
            border-color: #fb923c !important;
        }
        
        .cell.highlighted-value { 
            border: 3px solid #facc15 !important;
            box-shadow: 0 0 15px #facc15, inset 0 0 12px rgba(250, 204, 21, 0.4) !important;
            z-index: 4;
        }
        
        .cell.error { 
            border: 3px solid #ef4444 !important; 
            box-shadow: 0 0 15px #ef4444, inset 0 0 12px rgba(239, 68, 68, 0.4) !important;
            z-index: 10;
        }

        .cell.hint-highlight {
            border: 3px solid #a855f7 !important;
            box-shadow: 0 0 15px #a855f7, inset 0 0 12px rgba(168, 85, 247, 0.4) !important;
            z-index: 8;
        }

        .cell.completed-cell {
            z-index: 15;
        }

        .cell.spin-animate {
            border: 3px solid #facc15 !important;
            box-shadow: 0 0 20px #facc15, inset 0 0 12px rgba(250, 204, 21, 0.5) !important;
            z-index: 25 !important;
            animation: spin360Cell 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            transform-origin: center;
            will-change: transform;
        }

        @keyframes spin360Cell {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .controls {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }
        
        .selector {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 5px;
            width: 100%;
        }
        
        .btn-symbol {
            aspect-ratio: 1 / 1;
            cursor: pointer;
            border-radius: 8px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
        }

        .btn-symbol.seven-btn {
            position: relative;
            color: #ef4444 !important;
            font-family: "Georgia", Georgia, serif !important;
            font-size: 24px !important;
            font-weight: 900 !important;
            z-index: 1;
        }
        .btn-symbol.seven-btn::before {
            content: "7";
            position: absolute; z-index: -1;
            color: #000000 !important;
            -webkit-text-stroke: 1.5px #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        .btn-symbol.seven-btn::after {
            content: "7";
            position: absolute; z-index: -2;
            color: #facc15 !important;
            -webkit-text-fill-color: #facc15 !important;
        }

        .btn-symbol.dollar-btn {
            position: relative;
            color: #facc15 !important;
            font-family: "Georgia", Georgia, serif !important;
            font-size: 24px !important;
            font-weight: 900 !important;
            z-index: 1;
        }
        .btn-symbol.dollar-btn::before {
            content: "$";
            position: absolute; z-index: -1;
            color: #000000 !important;
            -webkit-text-stroke: 1.5px #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        .btn-symbol.dollar-btn::after {
            content: "$";
            position: absolute; z-index: -2;
            color: #ef4444 !important;
            -webkit-text-stroke: 3.5px #ef4444 !important;
            -webkit-text-fill-color: #ef4444 !important;
        }

        .btn-symbol.styled-number-btn {
            position: relative;
            color: #ef4444 !important;
            font-family: "Georgia", Georgia, serif !important;
            font-size: 24px !important;
            font-weight: 900 !important;
            z-index: 1;
        }
        .btn-symbol.styled-number-btn::before {
            content: attr(data-val);
            position: absolute; z-index: -1;
            color: #000000 !important;
            -webkit-text-stroke: 1.5px #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        .btn-symbol.styled-number-btn::after {
            content: attr(data-val);
            position: absolute; z-index: -2;
            color: #facc15 !important;
            -webkit-text-stroke: 3.5px #facc15 !important;
            -webkit-text-fill-color: #facc15 !important;
        }
        
        .mode-bar {
            display: flex;
            gap: 6px;
            width: 100%;
            align-items: center;
        }
        
        .mode-bar .btn-action {
            flex: 1;
            height: 44px;
            padding: 0;
            font-size: 16px;
            font-weight: bold;
        }
        
        .action-bar {
            display: flex;
            gap: 6px;
            width: 100%;
        }
        
        .btn-action {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            cursor: pointer;
            font-weight: bold;
            border-radius: 8px;
            touch-action: manipulation;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .toast {
            position: fixed;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #1e293b;
            color: #f8fafc;
            padding: 14px 28px;
            border-radius: 8px;
            border: 2px solid #2563eb;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
            font-weight: bold;
            font-size: 15px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            text-align: center;
            max-width: 90%;
        }
        
        .toast.show { opacity: 1; }