:root {
            --bg-deep: #2a0c14;
            --bg-mid: #4a1824;
            --bg-glow: #8a2436;
            --bg-spot: #3a1018;
            --felt: #6b2030;
            --felt-dark: #3a1018;
            --wood: #5a1c28;
            --wood-light: #7a2838;
            --wood-edge: #b04458;
            --gold: #f0c94a;
            --gold-soft: #e8d5a3;
            --cream: #fffefb;
            --tile-side: #8a3040;
            --tile-side-dark: #5a1c28;
            --tile-side-deep: #3a1018;
            --text-muted: #e8c0c8;
            --danger: #e74c5c;
            --hand-top: #7a2838;
            --hand-mid: #5a1c28;
            --hand-bot: #3a1018;
            --hand-border: #b04458;
        }

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

        html, body {
            height: 100%;
        }

        body {
            background: var(--bg-deep);
            background-image:
                radial-gradient(ellipse at 50% -10%, var(--bg-glow) 0%, transparent 55%),
                radial-gradient(circle at 80% 90%, var(--bg-spot) 0%, transparent 40%),
                linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
            min-height: 100dvh;
            min-height: 100svh;
            display: flex;
            justify-content: center;
            align-items: stretch;
            font-family: 'Segoe UI', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
            padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
            touch-action: manipulation;
            margin: 0;
            color: var(--gold-soft);
        }

        #app {
            background: transparent;
            width: 100%;
            max-width: 480px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 0;
            height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            height: calc(100svh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }

        /* ===== TELA INICIAL ===== */
        #start-screen {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 6px 16px;
            gap: 14px;
            -webkit-overflow-scrolling: touch;
        }
        #start-screen.hidden { display: none; }
        #start-screen > * { flex-shrink: 0; }

        .start-hero {
            text-align: center;
            padding-top: 6px;
        }
        .start-hero h1 {
            font-size: clamp(26px, 8vw, 36px);
            font-weight: 800;
            color: var(--gold);
            letter-spacing: 0.4px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(240, 201, 74, 0.28);
        }
        .start-hero p {
            margin-top: 6px;
            font-size: 14px;
            color: var(--text-muted);
            font-weight: 600;
        }
        .start-hero .levels-count {
            display: inline-block;
            margin-top: 10px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid var(--wood-edge);
            color: var(--gold-soft);
            font-size: 13px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 999px;
        }

        .start-stats {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
        }
        .stat-card {
            background: linear-gradient(180deg, var(--hand-top), var(--hand-bot));
            border: 1.5px solid var(--hand-border);
            border-radius: 14px;
            padding: 10px 8px;
            text-align: center;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .stat-card .label {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 600;
        }
        .stat-card .value {
            font-size: 20px;
            color: var(--gold);
            font-weight: 800;
            margin-top: 2px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #9b6fd4, #6b3fa0);
            border: 1px solid #c4a0f0;
            color: #fff;
            font-size: 17px;
            font-weight: 700;
            padding: 13px 28px;
            border-radius: 60px;
            cursor: pointer;
            box-shadow: 0 6px 22px rgba(107, 63, 160, 0.45);
            transition: all 0.2s;
            touch-action: manipulation;
            min-width: 180px;
            min-height: 48px;
        }
        .btn-primary:active { transform: scale(0.96); }
        .btn-secondary {
            background: transparent;
            border: 1.5px solid var(--wood-edge);
            color: var(--gold-soft);
            font-size: 14px;
            font-weight: 700;
            padding: 10px 22px;
            border-radius: 60px;
            cursor: pointer;
            min-height: 44px;
        }
        .btn-secondary:active { transform: scale(0.96); }

        .section-title {
            width: 100%;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.4px;
            text-transform: uppercase;
            padding-left: 4px;
        }

        #tileset-row {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .tileset-card {
            border: 2px solid var(--wood-edge);
            border-radius: 14px;
            padding: 8px 6px 7px;
            background: linear-gradient(145deg, var(--wood-light), var(--wood));
            cursor: pointer;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
            color: var(--gold-soft);
        }
        .tileset-card:active { transform: scale(0.97); }
        .tileset-card.active {
            border-color: var(--gold);
            box-shadow: 0 0 0 2px rgba(240, 201, 74, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        .tileset-preview {
            display: flex;
            justify-content: center;
            gap: 3px;
            margin-bottom: 4px;
        }
        .tileset-mini {
            width: 28px;
            height: 32px;
            border-radius: 5px;
            background: linear-gradient(180deg, #fff, #f4eadc);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            line-height: 1;
            overflow: hidden;
            box-shadow: 1px 2px 0 0 rgba(0, 0, 0, 0.25);
        }
        .tileset-card .name {
            font-size: 12px;
            font-weight: 700;
            color: var(--gold-soft);
        }

        #level-grid {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
        }
        .level-btn {
            aspect-ratio: 1;
            border-radius: 14px;
            border: 2px solid var(--wood-edge);
            background: linear-gradient(145deg, var(--wood-light), var(--wood));
            color: var(--gold);
            font-size: clamp(16px, 5vw, 20px);
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
            position: relative;
        }
        .level-btn:active { transform: scale(0.94); }
        .level-btn.current {
            box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(240, 201, 74, 0.35);
        }
        .level-btn.locked {
            opacity: 0.42;
            cursor: not-allowed;
            color: var(--text-muted);
        }
        .level-btn.cleared::after {
            content: '✓';
            position: absolute;
            bottom: 3px;
            right: 5px;
            font-size: 11px;
            color: #8dffb0;
        }

        .play-card {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 14px 18px;
            border-radius: 18px;
            border: 1.5px solid var(--hand-border);
            background: linear-gradient(180deg, var(--hand-top), var(--hand-bot));
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.28);
            text-align: center;
        }
        .play-kicker {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .play-level {
            font-size: clamp(28px, 8vw, 36px);
            font-weight: 800;
            color: var(--gold);
            line-height: 1.1;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        }
        .play-world {
            font-size: 14px;
            font-weight: 700;
            color: var(--gold-soft);
            margin-bottom: 6px;
        }

        .progress-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            padding: 0 2px;
        }
        .progress-bar {
            height: 8px;
            border-radius: 99px;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid var(--wood-edge);
            overflow: hidden;
        }
        .progress-bar > span {
            display: block;
            height: 100%;
            width: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--gold), #fff4c4);
            box-shadow: 0 0 10px rgba(240, 201, 74, 0.45);
            transition: width 0.4s ease;
        }

        /* ===== JOGO ===== */
        #game-screen {
            width: 100%;
            height: 100%;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-height: 0;
            overflow: hidden;
        }
        #game-screen.show { display: flex; }

        header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2px;
            flex-shrink: 0;
        }

        .header-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--wood-light), var(--wood));
            border: 2px solid var(--wood-edge);
            color: var(--gold-soft);
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
            transition: 0.15s;
            flex-shrink: 0;
        }
        .header-btn:active { transform: scale(0.92); }

        .header-title {
            font-size: clamp(18px, 5.2vw, 22px);
            font-weight: 800;
            color: var(--gold);
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(240, 201, 74, 0.25);
            text-align: center;
        }
        .header-title span { color: #fff4c4; }
        .header-sub {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 0;
            text-shadow: none;
            margin-top: 1px;
        }

        #hud {
            width: 100%;
            display: grid;
            grid-template-columns: 1.35fr 0.85fr 0.85fr;
            gap: 6px;
            flex-shrink: 0;
        }
        .hud-card {
            background: linear-gradient(180deg, var(--hand-top), var(--hand-bot));
            border: 1.5px solid var(--hand-border);
            border-radius: 12px;
            padding: 6px 6px 5px;
            text-align: center;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
            min-height: 48px;
        }
        .hud-card .label {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }
        .hud-card .value {
            font-size: clamp(16px, 4.8vw, 22px);
            font-weight: 800;
            color: var(--gold);
            line-height: 1.15;
            margin-top: 1px;
            font-variant-numeric: tabular-nums;
        }
        .hud-card.score-pop .value { animation: scorePop 0.35s ease; }
        .hud-card.combo-hot {
            border-color: var(--gold);
            box-shadow: 0 0 0 1px rgba(240, 201, 74, 0.35), inset 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .hud-card.combo-hot .value {
            color: #ffd56a;
            animation: comboPulse 0.7s ease-in-out infinite;
        }
        @keyframes scorePop {
            0% { transform: scale(1); }
            40% { transform: scale(1.18); }
            100% { transform: scale(1); }
        }
        @keyframes comboPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }

        #board-progress {
            width: 100%;
            height: 6px;
            border-radius: 99px;
            background: rgba(0, 0, 0, 0.38);
            border: 1px solid var(--hand-border);
            overflow: hidden;
            flex-shrink: 0;
        }
        #board-progress > span {
            display: block;
            height: 100%;
            width: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--gold), #fff4c4);
            transition: width 0.35s ease;
        }

        #hand-area {
            width: 100%;
            background: linear-gradient(180deg, var(--hand-top) 0%, var(--hand-mid) 40%, var(--hand-bot) 100%);
            border-radius: 16px;
            padding: 10px 10px 9px;
            border: 2px solid var(--hand-border);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 84px;
            box-shadow:
                inset 0 4px 14px rgba(0, 0, 0, 0.55),
                0 6px 18px rgba(0, 0, 0, 0.35);
            gap: 8px;
            position: relative;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        @keyframes handFlash {
            0% { border-color: var(--gold); transform: scale(1.02); }
            100% { border-color: var(--hand-border); transform: scale(1); }
        }
        .hand-match-flash { animation: handFlash 0.4s ease-out; }

        .hand-slot, .hand-tile {
            width: clamp(52px, 15vw, 70px);
            height: clamp(68px, 19.5vw, 90px);
            border-radius: 10px;
        }
        .hand-slot {
            background: rgba(0, 0, 0, 0.22);
            border: 1.5px dashed rgba(255, 255, 255, 0.28);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hand-tile {
            --wash: #fff8ee;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            background: linear-gradient(165deg, #ffffff 0%, var(--wash) 100%);
            border: 1.5px solid #f0e8dc;
            color: #111;
            box-shadow:
                3px 0 0 0 var(--tile-side),
                0 4px 0 0 var(--tile-side-dark),
                3px 4px 0 0 var(--tile-side-deep),
                4px 7px 12px rgba(0, 0, 0, 0.4);
        }
        .hand-tile .tile-label {
            font-size: clamp(18px, 5vw, 26px);
            z-index: 2;
            font-weight: 800;
            line-height: 1.05;
            text-align: center;
        }

        #board-wrapper {
            position: relative;
            width: 100%;
            flex: 1 1 auto;
            min-height: 0;
            background:
                radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08), transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.05), transparent 45%),
                linear-gradient(165deg, var(--felt) 0%, var(--felt-dark) 100%);
            border-radius: 22px;
            padding: 18px 20px 16px 10px;
            box-shadow:
                inset 0 0 40px rgba(0, 0, 0, 0.4),
                0 10px 28px rgba(0, 0, 0, 0.4);
            border: 2px solid var(--hand-border);
            display: flex;
            justify-content: center;
            align-items: stretch;
            touch-action: manipulation;
            overflow: visible;
        }
        #board-wrapper:has(#gameover-overlay.show) {
            overflow: hidden;
        }

        #board {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .tile {
            --tx: 0px;
            --ty: 0px;
            --side-r: 3px;
            --side-b: 4px;
            --drop-x: 4px;
            --drop-y: 7px;
            --drop-blur: 10px;
            --drop-a: 0.42;
            --wash: #fff8ee;

            position: absolute;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            background: linear-gradient(165deg, #ffffff 0%, var(--wash) 100%);
            border: 1.5px solid #f0e8dc;
            cursor: pointer;
            transform: translate(var(--tx), var(--ty));
            transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s, opacity 0.3s ease;
            user-select: none;
            -webkit-user-select: none;
            will-change: transform, opacity;
            touch-action: manipulation;
            color: #111;
            box-shadow:
                var(--side-r) 0 0 0 var(--tile-side),
                0 var(--side-b) 0 0 var(--tile-side-dark),
                var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),
                var(--drop-x) var(--drop-y) var(--drop-blur) rgba(0, 0, 0, var(--drop-a));
        }
        .tile .tile-label {
            position: relative;
            z-index: 2;
            line-height: 1.05;
            text-align: center;
            font-weight: 800;
            font-size: clamp(18px, 5.6vw, 30px);
        }
        .tile.selected {
            z-index: 1000 !important;
            transform: translate(var(--tx), calc(var(--ty) - 8px)) scale(1.06) !important;
            box-shadow:
                0 0 0 3px var(--gold),
                var(--side-r) 0 0 0 var(--tile-side),
                0 var(--side-b) 0 0 var(--tile-side-dark),
                var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),
                8px 14px 22px rgba(240, 201, 74, 0.35) !important;
        }
        .tile.removed {
            opacity: 0;
            pointer-events: none;
            transform: translate(var(--tx), var(--ty)) scale(0.6);
            transition: opacity 0.35s, transform 0.4s cubic-bezier(.5,0,.5,1);
        }
        .tile.shake { animation: shake 0.35s ease; }
        @keyframes shake {
            0%, 100% { transform: translate(var(--tx), var(--ty)); }
            20% { transform: translate(calc(var(--tx) - 8px), var(--ty)); }
            40% { transform: translate(calc(var(--tx) + 8px), var(--ty)); }
            60% { transform: translate(calc(var(--tx) - 5px), var(--ty)); }
            80% { transform: translate(calc(var(--tx) + 5px), var(--ty)); }
        }
        .tile.hint {
            animation: hintBlink 0.8s ease-in-out 3;
            box-shadow:
                0 0 0 3px #c084fc,
                var(--side-r) 0 0 0 var(--tile-side),
                0 var(--side-b) 0 0 var(--tile-side-dark),
                var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),
                0 0 20px rgba(192, 132, 252, 0.65) !important;
        }
        @keyframes hintBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        #message-area {
            width: 100%;
            text-align: center;
            min-height: 20px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
            flex-shrink: 0;
        }

        #action-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 22px;
            padding: 4px 0 2px;
            flex-shrink: 0;
        }
        .action-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--wood-light), var(--wood));
            border: 2px solid var(--wood-edge);
            color: var(--gold-soft);
            font-size: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.15s;
            position: relative;
            box-shadow:
                0 6px 16px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }
        .action-btn:active { transform: scale(0.9); }
        .action-btn .badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--danger);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        }
        .action-label {
            position: absolute;
            bottom: -16px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: var(--text-muted);
            white-space: nowrap;
            font-weight: 600;
        }

        #gameover-overlay {
            position: absolute;
            inset: 0;
            background: rgba(12, 8, 20, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 22px;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 24px 18px;
            z-index: 2000;
            color: #f8f0ff;
            text-align: center;
            animation: fadeIn 0.45s ease;
        }
        #gameover-overlay.show { display: flex; }
        @keyframes fadeIn {
            0% { opacity: 0; transform: scale(0.96); }
            100% { opacity: 1; transform: scale(1); }
        }
        #gameover-overlay h2 {
            font-size: clamp(24px, 7vw, 32px);
            font-weight: 800;
            text-shadow: 0 4px 20px #000;
            color: var(--gold);
        }
        #gameover-reason {
            font-size: 14px;
            color: var(--text-muted);
            max-width: 280px;
            line-height: 1.35;
        }
        .final-score { font-size: 16px; opacity: 0.92; color: var(--text-muted); }
        .final-score strong { color: var(--gold); font-size: 20px; }
        .overlay-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            max-width: 240px;
            margin-top: 8px;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transform: translateY(8px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        #gameover-overlay.buttons-ready .overlay-actions,
        #gameover-overlay.is-defeat .overlay-actions {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        #gameover-overlay.victory-pending {
            display: none !important;
        }

        .confetti-container {
            position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden;
        }
        .confetti-piece {
            position: absolute; width: 10px; height: 10px; opacity: 0;
            animation: confettiFall 2.5s ease-out forwards;
        }
        @keyframes confettiFall {
            0% { opacity: 1; transform: translateY(-20px) rotate(0deg) scale(1); }
            100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.5); }
        }

        .match-particles { position: fixed; pointer-events: none; z-index: 9998; }
        .particle {
            position: absolute; border-radius: 50%; background: var(--gold);
            animation: particleFly 0.8s ease-out forwards;
        }
        @keyframes particleFly {
            0% { transform: translate(0,0) scale(1); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
        }

        #toast-layer {
            position: fixed;
            top: max(14px, env(safe-area-inset-top));
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
            width: min(92vw, 360px);
        }
        .toast {
            background: linear-gradient(135deg, rgba(18, 10, 16, 0.96), rgba(48, 22, 28, 0.96));
            border: 1.5px solid var(--gold);
            color: var(--gold);
            font-weight: 800;
            text-align: center;
            padding: 11px 16px 10px;
            border-radius: 16px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
            animation: toastIn 0.32s ease, toastOut 0.4s ease 1.85s forwards;
        }
        .toast small {
            display: block;
            margin-top: 2px;
            color: var(--gold-soft);
            font-weight: 600;
            font-size: 12px;
        }
        @keyframes toastIn {
            0% { opacity: 0; transform: translateY(-12px) scale(0.94); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes toastOut {
            to { opacity: 0; transform: translateY(-8px) scale(0.96); }
        }

        .praise-word {
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            font-size: clamp(26px, 8vw, 40px);
            font-weight: 900;
            color: var(--gold);
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            text-shadow: 0 4px 18px #000, 0 0 24px rgba(240, 201, 74, 0.55);
            pointer-events: none;
            z-index: 1500;
            animation: praisePop 0.95s ease forwards;
            white-space: nowrap;
        }
        .praise-word.epic { color: #fff4c4; font-size: clamp(28px, 9vw, 44px); }
        @keyframes praisePop {
            0% { opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
            22% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
            70% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -72%) scale(0.94); }
        }

        .score-floater {
            position: absolute;
            left: 50%;
            top: 6px;
            transform: translateX(-50%);
            color: #8dffb0;
            font-weight: 900;
            font-size: 22px;
            pointer-events: none;
            z-index: 6;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
            animation: floatUp 0.85s ease forwards;
        }
        .score-floater.big { font-size: 26px; color: #fff4c4; }
        @keyframes floatUp {
            0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); }
            20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
            100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
        }

        .live-score-hint {
            font-size: 12px;
            color: var(--text-muted);
        }
        .live-score-hint strong { color: var(--gold); }

        @media (max-height: 700px) {
            #hand-area { min-height: 72px; padding: 10px 8px 8px; }
            .hand-slot, .hand-tile { width: 48px; height: 62px; }
            .action-btn { width: 48px; height: 48px; font-size: 18px; }
            .header-btn { width: 40px; height: 40px; }
            #action-bar { gap: 18px; }
            .hud-card { min-height: 42px; padding: 4px 4px 3px; }
            .hud-card .value { font-size: 16px; }
        }

        @media (max-width: 360px) {
            #level-grid { gap: 6px; }
            .start-stats { grid-template-columns: 1fr 1fr 1fr; }
        }
    
/* =========================================================
   NeuroBrincadeiras — Mahjong / identidade de produto
   ========================================================= */
:root {
  --nb-navy:#111957; --nb-blue:#0A68FF; --nb-teal:#0FAF95; --nb-jade:#08735E;
  --nb-jade-dark:#064E40; --nb-coral:#FF6B6B; --nb-pink:#F53D8B; --nb-purple:#7547DC;
  --nb-yellow:#FFC51A; --nb-cream:#FFF9EF; --nb-paper:#FFFFFF; --nb-text:#14214A;
  --nb-muted:#68708B; --nb-border:#DDE8ED; --nb-shadow:0 18px 54px rgba(20,49,77,.13);
  --nb-font:Inter,Aptos,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
}
html { color-scheme: light; }
body {
  min-height:100vh; height:auto; display:block; padding:0; margin:0; color:var(--nb-text); font-family:var(--nb-font);
  background:
    radial-gradient(circle at 5% 6%, rgba(245,61,139,.16), transparent 18rem),
    radial-gradient(circle at 95% 5%, rgba(255,197,26,.22), transparent 20rem),
    radial-gradient(circle at 8% 88%, rgba(15,175,149,.15), transparent 22rem),
    linear-gradient(180deg,#EEF9F7 0%,#F7FBFC 40%,#FFF9F0 100%);
  touch-action:manipulation;
}
body::before { content:""; position:fixed; inset:auto 0 0; height:120px; z-index:-1; opacity:.8; background:linear-gradient(90deg,#0B7E68,#12B89B,#45A5D8,#8B62E8,#F35B8F); clip-path:ellipse(80% 100% at 50% 100%); }
button,input,select { font:inherit; }
.skip-link { position:fixed; left:12px; top:12px; z-index:99999; transform:translateY(-160%); padding:10px 14px; border-radius:12px; background:#111957; color:white; text-decoration:none; font-weight:800; }
.skip-link:focus { transform:none; }

.game-opening { position:fixed; inset:0; z-index:100000; background:#fff; display:grid; place-items:center; overflow:hidden; }
.game-opening picture,.game-opening img { width:100%; height:100%; display:block; }
.game-opening img { object-fit:contain; animation:openingZoom 1.2s ease both; }
.game-opening.is-leaving { animation:openingFade .22s ease forwards; pointer-events:none; }
@keyframes openingZoom { from{transform:scale(1.02);opacity:.88} to{transform:scale(1);opacity:1} }
@keyframes openingFade { to{opacity:0;visibility:hidden} }

.brand-header { width:min(1240px,calc(100% - 28px)); min-height:82px; margin:14px auto 0; padding:10px 16px; border:1px solid rgba(212,230,232,.95); border-radius:28px; display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.94); backdrop-filter:blur(18px); box-shadow:0 10px 30px rgba(30,71,90,.09); }
.brand-lockup { display:flex; align-items:center; flex:0 0 auto; }
.brand-lockup img { width:64px; height:64px; object-fit:contain; }
.game-brand-title { padding-left:14px; border-left:1px solid #DFE9ED; display:grid; gap:2px; }
.game-brand-title strong { color:var(--nb-navy); font-size:1.6rem; line-height:1; letter-spacing:-.04em; }
.game-brand-title span { color:var(--nb-jade); font-size:.77rem; font-weight:800; }
.brand-spacer { flex:1; }
.brand-claim { max-width:215px; padding:10px 14px; border-radius:24px 24px 8px 24px; background:linear-gradient(145deg,#EFFAF7,#F4F1FF); color:var(--nb-jade-dark); font-size:.82rem; font-weight:750; text-align:center; line-height:1.2; }
.brand-claim strong { color:var(--nb-navy); }
.round-btn { width:48px; height:48px; min-width:48px; border:1px solid #D6E6E9; border-radius:50%; background:#fff; color:var(--nb-blue); font-weight:900; font-size:1.2rem; cursor:pointer; box-shadow:0 6px 18px rgba(36,70,90,.08); }

#app { width:min(1240px,calc(100% - 28px)); max-width:none; height:auto; min-height:calc(100dvh - 118px); margin:12px auto 36px; display:block; }
#start-screen { width:100%; height:auto; min-height:calc(100dvh - 132px); padding:0; overflow:visible; display:grid; place-items:center; }
.config-card { width:min(1100px,100%); padding:clamp(22px,3vw,34px); border:1px solid #D8E7E9; border-radius:32px; background:rgba(255,255,255,.96); box-shadow:var(--nb-shadow); }
.config-heading { text-align:center; }
.config-kicker,.panel-kicker,.modal-kicker,.result-kicker { color:var(--nb-teal); font-size:.68rem; font-weight:950; letter-spacing:.14em; }
.config-heading h1 { margin:6px 0 4px; color:var(--nb-navy); font-size:clamp(2.6rem,5vw,4.1rem); line-height:.95; letter-spacing:-.055em; }
.config-heading p { margin:0; color:var(--nb-muted); font-size:.96rem; }
.journey-summary { max-width:760px; margin:20px auto 0; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.journey-badge { padding:8px 12px; border-radius:999px; background:#EAF8F4; color:var(--nb-jade); font-size:.76rem; font-weight:900; white-space:nowrap; }
.progress-wrap { gap:6px; }
.progress-label { color:var(--nb-muted); font-size:.7rem; }
.progress-bar { height:8px; background:#E7F0F0; border:0; }
.progress-bar>span { background:linear-gradient(90deg,var(--nb-teal),var(--nb-blue),var(--nb-purple)); box-shadow:none; }
.config-grid { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.level-panel,.visual-panel { padding:20px; border:1px solid #DDE9EB; border-radius:24px; background:linear-gradient(180deg,#FFFFFF,#FAFDFD); box-shadow:0 10px 28px rgba(30,75,90,.06); }
.panel-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.panel-title-row h2 { margin:3px 0 0; color:var(--nb-navy); font-size:1.25rem; }
.world-chip,.optional-chip { padding:6px 9px; border-radius:999px; background:#FFF5DB; color:#8A6500; font-size:.65rem; font-weight:850; }
.optional-chip { background:#F3F6F8; color:var(--nb-muted); }
.level-selector { margin-top:16px; min-height:114px; padding:12px; border:2px solid rgba(15,175,149,.35); border-radius:22px; display:grid; grid-template-columns:52px 1fr 52px; gap:10px; align-items:center; background:linear-gradient(145deg,#EEFBF7,#F3F8FF); }
.level-nav { width:48px; height:48px; border:0; border-radius:15px; background:#fff; color:var(--nb-jade); font-size:2rem; cursor:pointer; box-shadow:0 6px 18px rgba(21,70,75,.09); }
.level-center { text-align:center; display:grid; gap:4px; }
.level-center>span { color:var(--nb-muted); font-size:.7rem; font-weight:800; }
.level-center>strong { color:var(--nb-navy); font-size:1.8rem; }
.level-center b { color:var(--nb-jade); }
.start-stats { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:stretch; }
.stat-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:78px; padding:14px 10px; border:1px solid #E0EAEC; border-radius:15px; background:#fff; box-shadow:none; text-align:center; }
.stat-card .label { display:block; width:100%; margin:0; color:var(--nb-muted); font-size:.64rem; line-height:1.25; }
.stat-card .value { display:block; width:100%; margin:0; color:var(--nb-navy); font-size:1.15rem; line-height:1.1; }
#tileset-row { margin-top:16px; grid-template-columns:repeat(2,1fr); gap:10px; }
.tileset-card { min-height:94px; padding:10px; border:1.5px solid #DFE8E9; border-radius:18px; background:#fff; color:var(--nb-text); box-shadow:0 6px 16px rgba(25,69,79,.05); }
.tileset-card.active { border-color:var(--nb-teal); box-shadow:inset 0 0 0 1px var(--nb-teal),0 8px 20px rgba(15,175,149,.09); background:#F1FBF8; }
.tileset-card .name { color:var(--nb-jade-dark); font-size:.75rem; }
.tileset-mini { border:1px solid #EFE6D8; box-shadow:1px 2px 0 rgba(49,60,61,.16); }
.config-actions { max-width:640px; margin:24px auto 0; display:grid; justify-items:center; gap:9px; }
.btn-primary { border:0; min-height:54px; padding:0 24px; border-radius:18px; background:linear-gradient(135deg,#0EAA8F,#0787D8 60%,#6657DF); color:#fff; font-size:1rem; font-weight:900; box-shadow:0 13px 28px rgba(9,135,173,.22); }
.hero-play { width:100%; min-height:64px; font-size:1.12rem; letter-spacing:.02em; }
.btn-secondary { min-height:48px; padding:0 18px; border-radius:16px; border:1.5px solid #CFE0E3; background:#fff; color:var(--nb-jade); font-weight:850; }
.text-link { border:0; background:transparent; color:var(--nb-blue); font-weight:850; text-decoration:underline; cursor:pointer; }
#configHelpBtn.text-link,
.config-actions .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 8px;
  line-height: 1.2;
}
#configHelpBtn.text-link:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}
.config-actions p { margin:0; color:var(--nb-muted); font-size:.68rem; text-align:center; }

#game-screen { width:100%; height:auto; min-height:0; display:none; gap:10px; overflow:visible; }
#game-screen.show { display:flex; }
.session-header { width:100%; min-height:64px; padding:8px 10px; border:1px solid #DDE8EA; border-radius:20px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px rgba(25,65,77,.06); }
.header-btn { width:44px; height:44px; background:#fff; border:1px solid #D7E3E5; color:var(--nb-jade); box-shadow:0 5px 14px rgba(30,67,80,.07); }
.header-title { color:var(--nb-navy); text-shadow:none; }
.header-title span { color:var(--nb-jade); }
.header-sub { color:var(--nb-muted); }
.session-actions { display:flex; gap:7px; }
#hud { width:100%; grid-template-columns:repeat(3,1fr); gap:10px; }
.hud-card { min-height:72px; padding:10px 12px; border:1px solid #DCE7E8; border-radius:18px; background:#fff; box-shadow:0 7px 20px rgba(25,68,77,.05); }
.hud-card:nth-child(1){background:linear-gradient(180deg,#EFF8FF,#FFF)}
.hud-card:nth-child(2){background:linear-gradient(180deg,#FFF4E5,#FFF)}
.hud-card:nth-child(3){background:linear-gradient(180deg,#EEFAF5,#FFF)}
.hud-card .label { color:var(--nb-muted); font-size:.7rem; }
.hud-card .value { color:var(--nb-navy); font-size:1.5rem; }
#board-progress { height:7px; background:#E6EEEE; border:0; }
#board-progress>span { background:linear-gradient(90deg,var(--nb-teal),var(--nb-blue)); }
.play-area { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; }
.board-column { min-width:0; }
#board-wrapper { width:100%; min-height:650px; aspect-ratio:1.18; padding:24px 28px 22px 16px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
#board { min-height:100%; }
.tile { border-color:#F1E8DC; box-shadow:var(--side-r) 0 0 0 var(--tile-side),0 var(--side-b) 0 0 var(--tile-side-dark),var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),4px 7px 12px rgba(0,0,0,.25); }
.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; z-index: 100000 !important; }
.tile.selected { box-shadow:0 0 0 3px var(--nb-yellow),var(--side-r) 0 0 0 var(--tile-side),0 var(--side-b) 0 0 var(--tile-side-dark),var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),8px 14px 22px rgba(255,197,26,.3)!important; }
.tile.hint { box-shadow:0 0 0 3px var(--nb-purple),var(--side-r) 0 0 0 var(--tile-side),0 var(--side-b) 0 0 var(--tile-side-dark),var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),0 0 22px rgba(117,71,220,.55)!important; }
.control-column { position:sticky; top:12px; display:grid; gap:10px; }
.hand-card { padding:14px; border:1px solid #DCE7E8; border-radius:22px; background:#fff; box-shadow:0 8px 22px rgba(25,65,77,.06); }
.control-heading { margin-bottom:10px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.control-heading strong { color:var(--nb-navy); font-size:.9rem; }
.control-heading span { color:var(--nb-muted); font-size:.64rem; }
#hand-area { min-height:116px; padding:12px 10px; border:1px solid rgba(7,115,94,.25); border-radius:18px; background:linear-gradient(145deg,var(--hand-top),var(--hand-bot)); box-shadow:inset 0 3px 12px rgba(0,0,0,.22); }
#message-area { min-height:48px; padding:11px 12px; border:1px solid #DDE8E9; border-radius:16px; display:grid; place-items:center; background:#F8FCFB; color:var(--nb-jade-dark); text-shadow:none; font-size:.76rem; }
#action-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0; }
.action-btn { width:auto; height:74px; border-radius:18px; border:1px solid #D8E5E6; display:grid; place-items:center; gap:1px; background:#fff; color:var(--nb-jade); box-shadow:0 8px 20px rgba(25,65,77,.06); }
.action-icon { font-size:1.35rem; line-height:1; }
.action-name { font-size:.66rem; font-weight:850; }
.action-btn .badge { top:6px; right:7px; width:22px; height:22px; border:2px solid #fff; background:var(--nb-coral); font-size:.63rem; }
.action-label { display:none; }
.micro-tip { padding:11px 12px; border-radius:14px; background:#FFF9E8; color:#7B650E; font-size:.67rem; line-height:1.4; }

#gameover-overlay { background:rgba(6,38,34,.84); backdrop-filter:blur(12px); color:white; gap:12px; }
#gameover-overlay h2 { color:white; text-shadow:none; font-size:clamp(2rem,5vw,3rem); }
#gameover-reason { color:#E8F6F2; max-width:420px; }
.result-kicker { color:#B8F7E5; }
.result-summary { width:min(420px,100%); display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.final-score { padding:12px; border-radius:16px; background:rgba(255,255,255,.11); color:#E8F6F2; }
.final-score strong { display:block; margin-top:2px; color:white; font-size:1.35rem; }
.result-brand { width:min(440px,100%); padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.13); font-size:.82rem; font-weight:850; }
.overlay-actions { max-width:360px; }
.overlay-actions .btn-primary,.overlay-actions .btn-secondary { width:100%; }
.btn-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }

.modal-overlay { position:fixed; inset:0; z-index:50000; padding:18px; display:grid; place-items:center; background:rgba(11,28,48,.56); backdrop-filter:blur(8px); }
.modal-overlay.is-hidden { display:none; }
.modal-card { position:relative; width:min(540px,100%); padding:28px; border-radius:28px; background:#fff; box-shadow:0 28px 90px rgba(15,39,61,.22); text-align:center; }
.modal-close { position:absolute; top:12px; right:12px; width:42px; height:42px; border:0; border-radius:50%; background:#F1F6F6; color:var(--nb-jade); font-size:1.5rem; cursor:pointer; }
.modal-card h2 { margin:6px 0 16px; color:var(--nb-navy); font-size:1.8rem; }
.howto-steps { margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px; text-align:left; }
.howto-steps li { padding:12px; border:1px solid #E0E9EA; border-radius:16px; display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; background:#FAFDFC; }
.howto-steps li>span { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#E9F8F3; color:var(--nb-jade); font-weight:950; }
.howto-steps strong { display:block; color:var(--nb-navy); font-size:.86rem; }
.howto-steps small { display:block; margin-top:2px; color:var(--nb-muted); font-size:.72rem; line-height:1.35; }
.modal-primary,.modal-secondary { width:100%; }
.pause-card p { margin:0 0 18px; color:var(--nb-muted); }
.pause-card { display:grid; gap:9px; }
.noscript-note { width:min(900px,calc(100% - 24px)); margin:20px auto; padding:12px; border-radius:14px; background:#FFF4CD; color:#765E00; text-align:center; }

button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid rgba(10,104,255,.35); outline-offset:3px; }
@media (hover:hover){ .btn-primary:hover,.action-btn:hover,.header-btn:hover,.round-btn:hover,.level-nav:hover,.tileset-card:hover{ transform:translateY(-1px); } }

@media (max-width:980px){
  .brand-claim{display:none}.config-grid{grid-template-columns:1fr}.play-area{grid-template-columns:1fr}.control-column{position:static}.board-column,#board-wrapper{width:min(100%,820px);margin-inline:auto}.control-column{width:min(100%,820px);margin-inline:auto}.action-btn{height:68px}
}
@media (max-width:700px){
  .brand-header{width:calc(100% - 16px);min-height:66px;margin:8px auto 0;padding:7px 9px;border-radius:22px}.brand-lockup img{width:48px;height:48px}.game-brand-title{padding-left:10px}.game-brand-title strong{font-size:1.15rem}.game-brand-title span{display:none}.round-btn{width:42px;height:42px;min-width:42px}.brand-spacer{flex:1}
  #app{width:calc(100% - 16px);margin:8px auto 24px}.config-card{padding:18px 12px;border-radius:24px}.journey-summary{grid-template-columns:1fr}.journey-badge{justify-self:center}.level-panel,.visual-panel{padding:14px;border-radius:20px}.panel-title-row{align-items:center}.world-chip{max-width:48%;text-align:right}.start-stats{gap:8px}.stat-card{gap:6px;min-height:68px;padding:10px 6px}.stat-card .label{font-size:.62rem}.stat-card .value{font-size:1rem}#tileset-row{grid-template-columns:1fr 1fr}.hero-play{min-height:58px}
  #game-screen{gap:7px}.session-header{min-height:56px;padding:5px 6px;border-radius:16px}.header-btn{width:40px;height:40px}.header-title{font-size:1rem}.header-sub{font-size:.58rem}#hud{gap:5px}.hud-card{min-height:58px;padding:7px 4px;border-radius:13px}.hud-card .label{font-size:.56rem}.hud-card .value{font-size:1.05rem}#board-wrapper{min-height:0;aspect-ratio:1.05;padding:14px 17px 12px 8px;border-radius:20px}.tile .tile-label{font-size:clamp(15px,5vw,25px)}.hand-card{padding:10px;border-radius:18px}#hand-area{min-height:92px}.hand-slot,.hand-tile{width:clamp(48px,15vw,64px);height:clamp(62px,19vw,82px)}#action-bar{gap:5px}.action-btn{height:58px;border-radius:14px}.action-icon{font-size:1.15rem}.action-name{font-size:.58rem}.micro-tip{display:none}.modal-overlay{align-items:end;padding:8px}.modal-card{padding:26px 14px 16px;border-radius:24px 24px 18px 18px}.game-opening img{object-position:center}
}
@media (max-width:390px){ #tileset-row{grid-template-columns:1fr}.tileset-card{min-height:76px}.tileset-preview{margin-bottom:3px}.config-heading h1{font-size:2.7rem}.level-selector{grid-template-columns:44px 1fr 44px}.level-nav{width:42px;height:42px}.level-center>strong{font-size:1.45rem}.result-summary{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.game-opening img{animation:none} }
.level-nav:disabled{opacity:.32;cursor:not-allowed;transform:none!important}

/* --- Mahjong Premium Final overrides --- */
.game-opening::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,248,251,.06),rgba(255,255,255,.12));
  pointer-events:none;
}
.opening-petals{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:2;
  pointer-events:none;
}
.opening-petal{
  position:absolute;
  top:-12%;
  width:clamp(10px,1.6vw,20px);
  aspect-ratio:1.05;
  background:radial-gradient(circle at 45% 35%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,0) 19%), linear-gradient(135deg,#ffdbe9 0%,#f7b3cb 55%,#ec86b0 100%);
  border-radius:70% 30% 70% 30% / 65% 35% 65% 35%;
  box-shadow:inset -1px -2px 2px rgba(194,67,120,.18), 0 4px 10px rgba(180,87,126,.12);
  opacity:.82;
  animation:petalFall var(--dur,8s) linear var(--delay,0s) infinite;
  transform:translate3d(0,0,0) rotate(0deg);
}
.opening-petal::after{
  content:"";
  position:absolute;
  inset:12% 14% 16% 22%;
  border-radius:70% 30% 70% 30% / 65% 35% 65% 35%;
  background:linear-gradient(135deg,rgba(255,255,255,.48),rgba(255,255,255,0));
}
@keyframes petalFall{
  0%{ transform:translate3d(0,-12vh,0) rotate(0deg) scale(var(--scale,1)); opacity:0; }
  8%{ opacity:.9; }
  100%{ transform:translate3d(var(--drift,90px),112vh,0) rotate(var(--spin,540deg)) scale(var(--scale,1)); opacity:.15; }
}

.play-area{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:14px;
  align-items:start;
}
.board-column{min-width:0; display:grid; gap:12px;}
.hand-card-inline{padding:12px 14px; background:linear-gradient(180deg,#16553f,#0f3c2d); border:1px solid rgba(231,198,152,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.control-column{position:sticky; top:12px; display:grid; gap:10px; align-content:start;}
#message-area{min-height:56px;}
#board-wrapper{position:relative; width:100%; min-height:660px; aspect-ratio:1.18; padding:24px 26px 18px 12px; border:0; border-radius:0; overflow:visible; background:transparent; box-shadow:none;}
#board-wrapper::before,#board-wrapper::after{content:none !important; display:none !important;}
#board{position:relative; z-index:2; min-height:100%;}
#hand-area{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; min-height:106px;}
.hand-slot,.hand-tile{width:clamp(56px,13vw,76px); height:clamp(72px,17vw,98px);}
.hand-slot{border:1.5px dashed rgba(240,216,180,.45); background:rgba(9,48,37,.45); border-radius:14px;}

.tile--svg,
.hand-tile.tile--svg{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:transparent !important;
}
.tile--svg{border-radius:12px; overflow:visible;}
.tile--svg.selected{
  box-shadow:0 0 0 3px var(--nb-yellow), 0 14px 24px rgba(255,197,26,.28) !important;
}
.tile--svg.hint{
  box-shadow:0 0 0 3px var(--nb-purple), 0 0 20px rgba(117,71,220,.45) !important;
}
.tile-art{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  image-rendering:auto;
  filter:saturate(1.28) contrast(1.12) drop-shadow(0 5px 8px rgba(73,39,20,.18));
}
.tileset-preview{gap:8px;}
.tileset-mini{
  overflow:hidden;
  display:grid;
  place-items:center;
}
.tileset-mini--svg{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0;
}
.tileset-mini-art{width:100%; height:100%; display:block; object-fit:contain; pointer-events:none;}
.tileset-mini-label{line-height:1; font-weight:800; font-size:1.2rem;}
.hand-tile .tile-art{width:100%; height:100%;}

@media (max-width: 1024px){
  .play-area{grid-template-columns:1fr;}
  .control-column{position:static; width:min(100%,860px); margin-inline:auto;}
  .board-column,#board-wrapper{width:min(100%,860px); margin-inline:auto;}
}
@media (max-width: 640px){
  .hand-card-inline{padding:10px 12px;}
  #board-wrapper{aspect-ratio:1.04; min-height:0; padding:14px 16px 14px 8px; border-radius:22px;}
  #hand-area{min-height:94px; gap:8px; padding:10px 8px;}
  .hand-slot,.hand-tile{width:clamp(48px,15vw,66px); height:clamp(62px,18.5vw,84px);}
  .control-heading strong{font-size:.86rem;}
  .control-heading span{font-size:.62rem;}
}


/* ===== V5 Classic scenic gameplay override ===== */
body{background:linear-gradient(180deg,#f8efe6 0%,#f3e3d0 100%);}
.brand-header{max-width:1360px;margin:10px auto 0;padding:10px 18px;border:none;background:transparent;box-shadow:none;position:relative;z-index:5;}
.brand-lockup img{width:76px;height:76px;object-fit:contain;}
.game-brand-title strong{font-size:2rem;color:#11473a;font-weight:900;}
.game-brand-title span{color:#1f5e4b;font-weight:700;}
.brand-claim{background:rgba(255,248,240,.78);border:1px solid rgba(29,93,74,.10);padding:10px 18px;border-radius:999px;color:#1d5d4a;box-shadow:0 10px 26px rgba(82,45,19,.08);backdrop-filter: blur(8px);}
.round-btn{background:rgba(255,248,240,.78);border-color:rgba(29,93,74,.14);color:#1d5d4a;box-shadow:0 10px 26px rgba(82,45,19,.08);}
#game-screen{display:none;position:relative;max-width:1360px;margin:0 auto 28px;padding:18px 18px 24px;background:transparent;border:none;box-shadow:none;overflow:visible;}
#game-screen::before{content:"";position:absolute;inset:0;border-radius:38px;background:url("background-garden.jpg") center/cover no-repeat;background-image:image-set(url("background-garden.webp") type("image/webp"),url("background-garden.jpg") type("image/jpeg"));filter:saturate(1.03);z-index:0;pointer-events:none;}
#game-screen::after{content:"";position:absolute;inset:0;border-radius:38px;background:linear-gradient(180deg,rgba(255,251,246,.18),rgba(99,57,29,.08));border:1px solid rgba(255,245,233,.75);box-shadow:0 24px 70px rgba(73,39,20,.18), inset 0 0 0 1px rgba(255,255,255,.28);z-index:0;pointer-events:none;}
#game-screen>*{position:relative;z-index:1;}
.session-header{background:transparent;border:none;box-shadow:none;padding:8px 8px 6px;gap:16px;align-items:center;min-height:auto;}
.header-btn{width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,#4f2f1d,#2d1a10);color:#fff7ec;border:2px solid rgba(255,237,200,.6);box-shadow:0 10px 24px rgba(53,28,13,.32);font-size:1.5rem;}
.header-title{font-size:2rem;line-height:1.02;color:#0f4a39;text-shadow:0 2px 14px rgba(255,255,255,.35);}
.header-sub{font-size:.9rem;color:#1b5d4a;font-weight:700;margin-top:4px;}
#hud{max-width:620px;margin:0 auto 12px;gap:14px;grid-template-columns:repeat(3,minmax(120px,1fr));}
.hud-card{min-height:76px;background:linear-gradient(180deg,rgba(23,74,59,.96),rgba(17,58,46,.94));border:1px solid rgba(255,241,214,.35);border-radius:18px;box-shadow:0 14px 30px rgba(49,27,15,.18);color:#fff8ed;padding:12px 10px;}
.hud-card .label{color:#f7ebd6;font-size:.78rem;letter-spacing:.03em;text-transform:none;font-weight:800;}
.hud-card .value{color:#fff;font-size:1.75rem;}
#scoreCard .value::before{content:"★ ";font-size:1rem;color:#ffd36b;vertical-align:middle;}
#comboCard .value::before{content:"⟲ ";font-size:1rem;color:#ffd36b;vertical-align:middle;}
#board-progress{display:none;}
.play-area{display:flex;flex-direction:column;align-items:center;gap:14px;}
.board-column{width:min(980px,100%);display:flex;flex-direction:column;gap:12px;}
.hand-card{background:transparent;border:none;box-shadow:none;padding:0;}
.hand-card-inline{padding:0;}
.hand-card .control-heading{justify-content:center;gap:10px;margin-bottom:10px;text-align:center;}
.hand-card .control-heading strong{font-size:1.15rem;color:#fff5e5;text-shadow:0 2px 10px rgba(33,18,8,.45);}
.hand-card .control-heading span{display:none;}
#hand-area{justify-content:center;gap:10px;min-height:112px;padding:18px 18px;background:linear-gradient(180deg,#156e4d,#0e5a40);border:2px solid rgba(233,202,154,.95);border-radius:24px;box-shadow:0 18px 44px rgba(46,26,14,.24), inset 0 1px 0 rgba(255,255,255,.15);}
.hand-slot,.hand-tile{width:84px;height:106px;border-radius:16px;}
.hand-slot{background:rgba(11,63,45,.65);border:2px dashed rgba(241,229,188,.52);}
#board-wrapper{position:relative;min-height:0;width:100%;padding:14px 12px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;}
#board-wrapper::before,#board-wrapper::after{content:none !important;display:none !important;}
#board{position:relative;z-index:2;width:min(920px,100%);aspect-ratio:1.35 / 1;height:auto;max-width:920px;margin:0 auto;touch-action:manipulation;}
.tile{border-radius:12px;background:linear-gradient(165deg,#fff7ed 0%,#f9ebdc 55%,#efd6be 100%);border:0;box-shadow:var(--side-r) 0 0 0 var(--tile-side),0 var(--side-b) 0 0 var(--tile-side-dark),var(--side-r) var(--side-b) 0 0 var(--tile-side-deep),var(--drop-x) var(--drop-y) var(--drop-blur) rgba(0,0,0,var(--drop-a));}
.tile::before,.tile::after{content:none !important; display:none !important;}
.tile .tile-label{font-size:clamp(24px,4.4vw,42px);font-weight:900;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.45),0 2px 6px rgba(70,35,15,.18);filter:saturate(1.15) contrast(1.08);}
.tile.selected{transform:translate(var(--tx),calc(var(--ty) - 6px)) scale(1.05)!important;}
.control-column{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;margin-top:0;}
#message-area{background:transparent;border:none;box-shadow:none;min-height:24px;padding:0;}
#main-msg{display:inline-block;font-weight:800;color:#fff7eb;text-shadow:0 2px 10px rgba(20,40,30,.55);background:transparent;padding:0;border-radius:0;border:none;box-shadow:none;}
#action-bar{width:auto;display:flex;justify-content:center;gap:18px;padding:0;background:transparent;border:none;box-shadow:none;}
.action-btn{width:154px;height:84px;background:linear-gradient(180deg,#5a341d,#2e1a10);border:2px solid rgba(241,221,188,.65);border-radius:20px;box-shadow:0 16px 30px rgba(52,29,15,.28);padding:8px 10px;color:#fff7ef;position:relative;}
.action-btn:hover{transform:translateY(-2px);}
.action-icon{font-size:1.65rem;color:#ffd56f;}
.action-name{font-size:1.1rem;font-weight:800;color:#fff7ef;}
.badge{top:8px;right:10px;background:#ff6a56;border:2px solid #fff3e5;color:#fff;font-weight:800;}
.micro-tip{margin-top:0;max-width:480px;background:rgba(255,243,223,.85);border:1px solid rgba(225,190,132,.75);border-radius:14px;padding:10px 14px;font-weight:700;color:#805124;box-shadow:0 10px 22px rgba(79,43,20,.10);}
#gameover-overlay{backdrop-filter:blur(8px);background:rgba(255,247,238,.86);border:1px solid rgba(236,204,157,.85);}
/* tighten board geometry */
@media (min-width: 721px){
  .session-header{padding:4px 4px 8px;}
}
@media (max-width: 1024px){
  .brand-header{padding:8px 14px;}
  .game-brand-title strong{font-size:1.7rem;}
  #game-screen{padding:14px;}
  #board-wrapper{min-height:0;padding:12px 8px 10px;}
  #board{width:min(760px,100%);max-width:760px;}
  .hand-slot,.hand-tile{width:72px;height:92px;}
  .action-btn{width:140px;height:78px;}
}
@media (max-width: 720px){
  .brand-header{gap:10px;align-items:center;}
  .brand-lockup img{width:58px;height:58px;}
  .game-brand-title strong{font-size:1.35rem;}
  .game-brand-title span,.brand-claim{display:none;}
  #game-screen{padding:10px 10px 14px;}
  #game-screen::before,#game-screen::after{border-radius:26px;}
  .session-header{padding:2px 2px 6px;}
  .header-btn{width:42px;height:42px;font-size:1.15rem;}
  .header-title{font-size:1.35rem;}
  .header-sub{font-size:.76rem;}
  #hud{max-width:none;gap:8px;grid-template-columns:repeat(3,1fr);}
  .hud-card{min-height:62px;padding:8px 6px;border-radius:15px;}
  .hud-card .label{font-size:.66rem;}
  .hud-card .value{font-size:1.2rem;}
  .board-column{gap:10px;}
  .hand-card .control-heading strong{font-size:1rem;}
  #hand-area{padding:12px 10px;gap:8px;min-height:90px;border-radius:18px;}
  .hand-slot,.hand-tile{width:56px;height:72px;border-radius:12px;}
  #board-wrapper{min-height:0;padding:8px 4px 10px;border-radius:0;background:transparent;border:0;box-shadow:none;}
  #board{width:100%;max-width:100%;aspect-ratio:1.2 / 1;}
  .tile{border-radius:10px;}
  .tile .tile-label{font-size:clamp(16px,5vw,24px);}
  #action-bar{width:100%;gap:8px;}
  .action-btn{flex:1;min-width:0;height:68px;padding:6px 4px;border-radius:16px;}
  .action-icon{font-size:1.25rem;}
  .action-name{font-size:.88rem;}
  .micro-tip{display:none;}
  #main-msg{font-size:.82rem;padding:0;}
}

/* ===== UI compacta: mais espaço para o tabuleiro ===== */
.brand-claim,
.game-brand-title span,
.micro-tip,
.action-name,
.control-heading,
.header-title,
.header-sub{display:none !important;}

.visually-hidden,
.sr-only,
.sr-feedback{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

#game-screen{
  display:none;
  gap:8px;
  padding:10px 12px 14px !important;
  max-width:1400px;
}
#game-screen.show{
  display:flex;
  flex-direction:column;
  min-height:calc(100dvh - 96px);
}

.session-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:0 !important;
  padding:4px 2px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.header-btn{
  width:42px !important;
  height:42px !important;
  flex:0 0 auto;
}
.session-actions{display:flex;gap:6px;}

.session-compact,
#hud.session-compact{
  display:flex !important;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 8px;
  max-width:none !important;
  margin:0 !important;
  grid-template-columns:none !important;
}
.stat-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:34px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(17,58,46,.88);
  border:1px solid rgba(255,241,214,.35);
  color:#fff8ed;
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 6px 14px rgba(49,27,15,.14);
}
.stat-chip strong,
.stat-chip .value{
  color:#fff;
  font-size:.95rem;
  font-weight:900;
}
#scoreCard .value::before,
#comboCard .value::before{content:none !important;}
#scoreCard.stat-chip.score-pop,
#comboCard.stat-chip.combo-hot{
  box-shadow:0 0 0 2px #ffd36b, 0 8px 18px rgba(49,27,15,.18);
}

.play-area{
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column !important;
  align-items:center;
  gap:4px !important;
  min-height:0;
  overflow:hidden;
}
.board-column{
  width:min(1100px,100%);
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:6px !important;
  min-height:0;
  overflow:hidden;
}

.hand-card,
.hand-card-inline{
  width:auto !important;
  max-width:100%;
  margin:0 auto;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  flex:0 0 auto;
  position:relative;
  z-index:5;
}
#hand-area{
  width:max-content;
  max-width:min(100%,420px);
  min-height:0 !important;
  margin:0 auto;
  padding:6px 10px !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  border-radius:16px !important;
}
.hand-slot,
.hand-tile{
  width:clamp(42px,10vw,54px) !important;
  height:clamp(54px,13vw,70px) !important;
  border-radius:12px !important;
  flex:0 0 auto;
}

#board-wrapper{
  flex:1 1 auto;
  width:100%;
  min-height:0 !important;
  padding:0 !important;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  position:relative;
  z-index:1;
}
#board{
  width:min(980px,100%) !important;
  max-width:100% !important;
  max-height:100% !important;
  height:auto !important;
  margin:0 auto !important;
  aspect-ratio:auto !important;
}

.control-column{
  width:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  position:static !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
#action-bar{
  width:auto !important;
  display:flex !important;
  justify-content:center;
  gap:14px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.action-btn{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center;
  position:relative;
}
.action-icon{font-size:1.45rem !important; line-height:1;}
.action-btn .badge{
  top:2px !important;
  right:2px !important;
  width:20px !important;
  height:20px !important;
  font-size:.62rem !important;
}

@media (max-width:720px){
  #game-screen{padding:8px 8px 12px !important; min-height:calc(100dvh - 78px);}
  .header-btn{width:38px !important;height:38px !important;}
  .stat-chip{min-height:30px;padding:3px 8px;font-size:.72rem;}
  .stat-chip strong,.stat-chip .value{font-size:.84rem;}
  #hand-area{padding:6px 8px !important;gap:5px !important;}
  .hand-slot,.hand-tile{width:46px !important;height:60px !important;}
  #board{aspect-ratio:auto !important;}
  .action-btn{width:50px !important;height:50px !important;min-width:50px !important;}
  .action-icon{font-size:1.28rem !important;}
}



/* ===== Barra única + fileiras coladas + sem furar peça de cima ===== */
.session-header{display:none !important;}
.brand-header{
  width:min(1400px,calc(100% - 20px)) !important;
  min-height:58px !important;
  margin:8px auto 0 !important;
  padding:6px 10px !important;
  gap:10px !important;
  align-items:center !important;
}
.brand-header .game-brand-title strong{font-size:1.35rem !important;}
.brand-header .brand-spacer{flex:0 0 4px !important;width:4px !important;}
.brand-header #hud.session-compact{
  display:none !important;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
  max-width:none !important;
  margin:0 !important;
  grid-template-columns:none !important;
}
body.is-playing .brand-header #hud.session-compact{display:flex !important;}
body.is-playing .brand-header .brand-spacer{display:none !important;}
.brand-header .top-icon{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  flex:0 0 auto;
  background:linear-gradient(180deg,#4f2f1d,#2d1a10) !important;
  color:#fff7ec !important;
  border:2px solid rgba(255,237,200,.6) !important;
  box-shadow:0 8px 18px rgba(53,28,13,.28) !important;
}
#game-screen.show{min-height:calc(100dvh - 78px) !important;padding:6px 10px 12px !important;gap:6px !important;}
#board{
  width:min(1040px,100%) !important;
  max-width:1040px !important;
  aspect-ratio:auto !important;
}
.tile{border:0 !important; overflow:hidden;}
.tile-art{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
}
#scoreCard .value::before,
#comboCard .value::before{content:none !important;}
@media (max-width:720px){
  .brand-header{min-height:52px !important;padding:4px 8px !important;}
  .brand-header .top-icon{width:36px !important;height:36px !important;}
  #board{aspect-ratio:auto !important;}
}

/* ===== Contraste WCAG + modos Livre/Jornada ===== */
:root{
  --mj-ink:#123F34;
  --mj-ink-soft:#46554F;
  --mj-ivory:#FFF9F2;
  --mj-paper:#FFFdf8;
  --mj-border:#B7C7C1;
}

.mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-width:420px;
  margin:18px auto 0;
  padding:4px;
  border:1.5px solid var(--mj-border);
  border-radius:16px;
  background:#F3FAF7;
}
.mode-tab{
  min-height:52px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--mj-ink-soft);
  font-weight:850;
  font-size:.95rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  line-height:1.15;
}
.mode-tab.is-active{
  background:#fff;
  color:var(--mj-ink);
  box-shadow:0 4px 14px rgba(18,63,52,.12);
  border:1px solid #C9D9D3;
}
.mode-tab.is-locked{
  opacity:.58;
  color:var(--mj-ink-soft);
}
.mode-tab.is-locked.is-active{
  opacity:.72;
}
.mode-lock-badge{
  display:inline-flex;
  align-items:center;
  padding:1px 7px;
  border-radius:999px;
  background:#FFF3D6;
  color:#7A4E00;
  border:1px solid #E2C37A;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.01em;
}
.mode-lock-badge[hidden]{display:none !important;}
.journey-summary.compact{
  margin:14px 0 0;
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
.journey-summary.compact .journey-badge{
  justify-self:start;
  color:var(--mj-ink);
  background:#E7F5EF;
}
.journey-summary.compact .journey-badge strong{color:var(--mj-ink);}
.level-lock-hint{
  display:inline-block;
  margin-top:4px;
  color:#7A4E00;
  background:#FFF3D6;
  border:1px solid #E2C37A;
  border-radius:999px;
  padding:3px 10px;
  font-size:.68rem;
  font-weight:800;
}
.level-selector.is-at-lock{
  border-color:#D4B56A;
  background:linear-gradient(145deg,#FFF8E8,#F7FBFA);
}
.tile-count-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.tile-count-btn{
  min-height:56px;
  border:1.5px solid var(--mj-border);
  border-radius:14px;
  background:#fff;
  color:var(--mj-ink);
  font-weight:900;
  font-size:1.05rem;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(18,63,52,.06);
}
.tile-count-btn.is-active{
  border-color:#0F8F78;
  background:#E8F8F3;
  box-shadow:inset 0 0 0 1px #0F8F78,0 6px 16px rgba(15,143,120,.12);
}
.config-heading h1{color:var(--mj-ink);}
.config-heading p,
.progress-label,
.stat-card .label,
.level-center>span,
.panel-kicker,
.config-kicker,
.modal-kicker{color:var(--mj-ink-soft) !important;}
.panel-title-row h2,
.level-center>strong,
.stat-card .value,
.modal-card h2,
.howto-steps strong{color:var(--mj-ink) !important;}
.btn-secondary,
.overlay-actions .btn-secondary,
.modal-secondary,
a.btn-secondary{
  background:#fff !important;
  color:var(--mj-ink) !important;
  border:2px solid #6F857C !important;
  font-weight:850 !important;
}
.btn-secondary:hover,
.overlay-actions .btn-secondary:hover,
a.btn-secondary:hover{
  background:#F3FAF7 !important;
}
.text-link{color:#0A4FBF !important;}
.round-btn{
  background:#fff !important;
  color:var(--mj-ink) !important;
  border:1.5px solid var(--mj-border) !important;
}

/* Modal vitória/derrota — card compacto (só texto/botões) */
#board-wrapper:has(#gameover-overlay.show)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1990;
  background:rgba(18,40,34,.35);
  border-radius:inherit;
  pointer-events:none;
}
#gameover-overlay{
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(300px,calc(100% - 28px)) !important;
  max-width:300px !important;
  height:auto !important;
  max-height:none !important;
  background:#FFF9F2 !important;
  backdrop-filter:none !important;
  border:1.5px solid #E2D2BC !important;
  color:var(--mj-ink) !important;
  box-shadow:0 18px 40px rgba(40,28,16,.28) !important;
  border-radius:18px !important;
  padding:14px 14px 12px !important;
  gap:8px !important;
  justify-content:flex-start !important;
}
#gameover-overlay.show{
  animation:resultCardIn .28s ease;
}
@keyframes resultCardIn{
  from{opacity:0; transform:translate(-50%,-46%) scale(.96);}
  to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
#gameover-overlay h2,
#result-title{
  color:var(--mj-ink) !important;
  text-shadow:none !important;
  font-weight:950;
  font-size:clamp(1.25rem,4.2vw,1.55rem) !important;
  margin:0 !important;
  line-height:1.15;
}
#gameover-reason{
  color:var(--mj-ink-soft) !important;
  font-weight:650;
  font-size:.86rem !important;
  line-height:1.35;
  max-width:100% !important;
  margin:0 !important;
}
.result-kicker{
  display:none !important;
}
.result-summary{
  width:100% !important;
  max-width:100% !important;
  gap:6px !important;
  margin:0 !important;
}
.result-summary .final-score,
.final-score{
  background:#FFF !important;
  border:1px solid #D7E0DB !important;
  color:var(--mj-ink-soft) !important;
  opacity:1 !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  font-size:.78rem !important;
}
.final-score strong{
  color:var(--mj-ink) !important;
  font-size:1.1rem !important;
}
.overlay-actions{
  max-width:100% !important;
  width:100% !important;
  margin-top:4px !important;
  gap:6px !important;
}
.overlay-actions .btn-primary,
.overlay-actions .btn-secondary{
  min-height:42px !important;
  width:100%;
  font-size:.92rem !important;
}
#main-msg{
  color:#FFF9F2 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  text-shadow:0 2px 10px rgba(12,40,32,.55) !important;
}
.toast{
  background:linear-gradient(135deg,#123F34,#1A5244) !important;
  border-color:#C9A24A !important;
  color:#FFF9F2 !important;
}
.toast small{color:#E7F0EC !important;}
.praise-word{
  color:#FFF8E8 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  text-shadow:0 2px 12px rgba(12,40,32,.65),0 0 18px rgba(240,201,74,.35) !important;
}
.praise-word.epic{color:#FFE9A8 !important;}
.stat-chip{
  background:linear-gradient(180deg,#1B5A48,#123F34) !important;
  color:#FFF9F2 !important;
  border:1px solid rgba(255,241,214,.4);
}
.stat-chip strong,
.stat-chip .value{color:#FFF !important;}
.brand-header .game-brand-title strong{color:var(--mj-ink) !important;}
.modal-card{
  background:#FFFDF8 !important;
  color:var(--mj-ink);
}
.modal-card p,
.howto-steps small,
.pause-card p{color:var(--mj-ink-soft) !important;}
.level-nav{
  color:var(--mj-ink) !important;
  border:1.5px solid var(--mj-border) !important;
}
.level-nav:disabled{
  opacity:.4;
  color:var(--mj-ink-soft) !important;
}

@media (max-width:700px){
  .tile-count-grid{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;}
  .tile-count-btn{min-height:48px; font-size:.92rem; border-radius:12px;}
  .mode-switch{max-width:100%;}
}

/* Organizador acima do tabuleiro, sem sobrepor peças + sem scroll */
html.is-playing,
body.is-playing{
  height:100% !important;
  max-height:100dvh !important;
  max-height:100svh !important;
  overflow:hidden !important;
}
body.is-playing{
  display:flex !important;
  flex-direction:column !important;
}
body.is-playing .brand-header{
  flex:0 0 auto !important;
  margin-top:4px !important;
  margin-bottom:0 !important;
}
body.is-playing #app{
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:4px auto 0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
body.is-playing #game-screen.show{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  gap:2px !important;
  padding:2px 8px 6px !important;
  min-height:0 !important;
  height:100% !important;
  margin:0 auto !important;
  overflow:hidden !important;
}
body.is-playing .play-area{
  flex:1 1 auto !important;
  gap:2px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
body.is-playing .board-column{
  gap:6px !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}
body.is-playing .hand-card-inline{
  margin:6px auto 2px !important;
  z-index:6 !important;
}
body.is-playing #board-wrapper{
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  z-index:1 !important;
  flex:1 1 auto !important;
  width:100% !important;
}
body.is-playing #board{
  width:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  /* altura em px via fitBoardToViewport — preenche o wrapper */
}
body.is-playing .control-column{
  gap:2px !important;
  flex:0 0 auto !important;
}
body.is-playing #message-area{
  min-height:0 !important;
  padding:0 8px !important;
  font-size:.7rem !important;
}

@media (max-width:720px){
  body.is-playing .brand-header{min-height:48px !important; margin-top:2px !important;}
  body.is-playing #app{width:calc(100% - 8px) !important; margin:2px auto 0 !important;}
  body.is-playing #game-screen.show{padding:2px 2px 4px !important;}
  body.is-playing .board-column{gap:4px !important; width:100% !important;}
  body.is-playing #hand-area{padding:4px 8px !important; gap:4px !important;}
  body.is-playing .hand-slot,
  body.is-playing .hand-tile{
    width:clamp(38px,11vw,48px) !important;
    height:clamp(50px,14.5vw,62px) !important;
  }
  body.is-playing .action-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }
  body.is-playing #board-wrapper,
  body.is-playing #board{
    width:100% !important;
  }
}

@media (max-height:740px){
  body.is-playing .board-column{gap:4px !important;}
  body.is-playing #message-area{display:none !important;}
  body.is-playing .hand-slot,
  body.is-playing .hand-tile{
    width:40px !important;
    height:52px !important;
  }
}

@media (max-height:640px){
  body.is-playing .action-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }
}

body.is-playing #game-screen::before,
body.is-playing #game-screen::after{
  content:none;
  display:none;
}
body.is-playing::before{
  content:"";
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  min-height:100dvh;
  max-height:none;
  opacity:1;
  clip-path:none;
  z-index:0;
  pointer-events:none;
  background-color:#f3e3d0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-image:url("background-garden.jpg");
  background-image:image-set(
    url("background-garden.webp") type("image/webp"),
    url("background-garden.jpg") type("image/jpeg")
  );
}
body.is-playing > #app{
  position:relative;
  z-index:1;
}
@media (max-width:700px){
  body.is-playing::before{
    background-image:url("background-garden-960.webp");
  }
}
body:not(.is-playing){
  background:transparent;
}
body:not(.is-playing)::before{
  content:"";
  position:fixed;
  inset:0;
  width:auto;
  height:auto;
  max-height:none;
  opacity:1;
  clip-path:none;
  z-index:0;
  pointer-events:none;
  background-color:#f3e3d0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-image:url("background-garden.jpg");
  background-image:image-set(
    url("background-garden.webp") type("image/webp"),
    url("background-garden.jpg") type("image/jpeg")
  );
}
@media (max-width:700px){
  body:not(.is-playing)::before{
    background-image:url("background-garden-960.webp");
  }
}
body:not(.is-playing) > .brand-header,
body:not(.is-playing) > #app{
  position:relative;
  z-index:1;
}

/* Modal de Modo Livre bloqueado — mais ar entre texto e botão */
#freeLockModal.modal-overlay{
  align-items:center;
  padding:18px;
}
#freeLockModal .modal-card{
  width:min(340px,100%);
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:36px 28px 28px;
  border-radius:28px;
}
#freeLockModal h2{
  margin:8px 0 10px;
}
#freeLockCopy{
  margin:0 0 28px;
  line-height:1.5;
}
#freeLockModal .modal-primary{
  margin-top:8px;
}

/* ===== Sem top menu (brand-header removido) ===== */
.brand-header,
#topBar.brand-header{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
}
#app{
  margin-top:12px !important;
  min-height:calc(100dvh - 24px);
}
#start-screen{
  min-height:calc(100dvh - 36px);
}
body.is-playing #app{
  margin:0 auto !important;
}
body.is-playing #game-screen.show{
  min-height:100% !important;
  padding-top:4px !important;
}
#game-screen #hud.session-compact,
#hud.session-compact{
  display:none !important;
  flex:0 0 auto;
  width:100%;
  max-width:min(720px,100%);
  margin:0 auto 4px !important;
  justify-content:center;
  gap:6px 8px;
}
body.is-playing #game-screen.show #hud.session-compact:not([hidden]),
body.is-playing #hud.session-compact:not([hidden]){
  display:flex !important;
}
@media (max-width:720px){
  #app{margin-top:8px !important;}
  body.is-playing #game-screen.show{padding-top:2px !important;}
}