/* BASE DESIGN FRAMEWORK ENGINE */
        :root {
            --board-color: #a16f65;
            --carpet-color: #678ba2;
            --active-highlight: #ffda66;
            --board-shadow: 0 0 0.625vw #000000f0;
            --text-main: #2b262d;
            --squircle: shape(from 0 7.5vw, curve to 7.5vw 0 with 0 0 / 0 0, hline to calc(100% - 7.5vw), curve to 100% 7.5vw with 100% 0 / 100% 0, vline to calc(100% - 7.5vw), curve to calc(100% - 7.5vw) 100% with 100% 100% / 100% 100%, hline to 7.5vw, curve to 0 calc(100% - 7.5vw) with 0 100% / 0 100%, close);
            --key-squircle: shape(from 0 2vw, curve to 2vw 0 with 0 0 / 0 0, hline to calc(100% - 2vw), curve to 100% 2vw with 100% 0 / 100% 0, vline to calc(100% - 2vw), curve to calc(100% - 2vw) 100% with 100% 100% / 100% 100%, hline to 2vw, curve to 0 calc(100% - 2vw) with 0 100% / 0 100%, close);
        }

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

        body {
            background-color: var(--carpet-color);
            font-family: system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
            transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        body::-webkit-scrollbar { display: none; }

        /* ORNAMENTS ENGINE DECOR ELEMENTS */
        .circles-group {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            transition: opacity 0.3s ease;
            overflow: hidden;
        }
        .circles-hidden .circles-group {
            opacity: 0 !important;
        }

        .bg-circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.55;
        }
        .c-pink-lg   { width: 56.25vw;  height: 56.25vw;  background-color: #ffdfdf; top: -12.5vw;   left: -18.75vw; }
        .c-blue-lg   { width: 68.75vw;  height: 68.75vw;  background-color: #dbf3ff; bottom: -15.625vw; right: -9.375vw; }
        .c-green-md  { width: 31.25vw;  height: 31.25vw;  background-color: #e2fcdb; top: 43.75vw;   left: -9.375vw; }
        .c-purple-md { width: 37.5vw;   height: 37.5vw;   background-color: #f3e2ff; top: -6.25vw;    right: 6.25vw; }
        .c-pink-sm   { width: 12.5vw;   height: 12.5vw;   background-color: #ffe6e6; bottom: 37.5vw;  left: 25vw; }
        .c-blue-sm   { width: 9.375vw;  height: 9.375vw;  background-color: #e3f6ff; top: 28.125vw;   right: 21.875vw; }
        .c-purple-sm { width: 15.625vw; height: 15.625vw; background-color: #f7ebff; bottom: 18.75vw; left: 50vw; }
        .c-green-sm  { width: 7.8125vw; height: 7.8125vw; background-color: #ebfae8; top: 12.5vw;    left: 40vw; }

        /* MULTI-VIEW VIEWPORT ENGINE LAYERING */
        .home-page {
            position: absolute;
            inset: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            z-index: 2;
            pointer-events: none;
        }
        .home-page::-webkit-scrollbar { display: none; }

        .clue-over {
            flex: 0 0 87.5vw;
            height: 100%;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            pointer-events: none;
        }

        .main-view {
            flex: 0 0 100vw;
            height: 100%;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            pointer-events: auto;
            background: var(--carpet-color);
            box-shadow: -0.3125vw -0.3125vw 0.9375vw #00000099;
            position: relative;
            transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding-top: 10vw;
            width: -webkit-fill-available;
        }

        /* STRUCTURAL VISUAL GESTURE EDGE HANDLE ACCENT */
        .main-view::before {
            content: '';
            position: absolute;
            left: -1.25vw;
            top: 50%;
            transform: translateY(-50%);
            width: 2.1875vw;
            height: 9.375vw;
            background: rgb(255 218 102);
            border-radius: 6.25vw;
            z-index: 12;
            pointer-events: none;
            box-shadow: -0.3125vw -0.3125vw 0.9375vw #00000099;
        }

        .lead-view {
            flex: 0 0 100vw;
            height: 100%;
            z-index: 2;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            pointer-events: auto;
            background: var(--carpet-color);
            position: relative;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 3.125vw;
            padding: 10vw 3.125vw 6.25vw;
            z-index: 2;
        }

        /* GRID STRUCTURAL COMPONENT HOUSING */
        .crossword-container {
            position: relative;
            width: 93.75vw;
            height: 93.75vw;
            padding: 0.625vw;
            z-index: 1;
            margin: auto 0 0;
        }
        .crossword-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--board-color);
            box-shadow: var(--board-shadow);
            z-index: -1;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }
        .crossword-container.skeleton-mode::after {
            background-color: transparent !important;
            box-shadow: none !important;
        }

        .crossword-grid {
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(15, 1fr);
            gap: 0.625vw;
            width: 100%;
            height: 100%;
        }

        .cell {
            position: relative;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s ease, opacity 0.5s ease;
        }
        .cell.block { background-color: transparent; }

        .cell-number {
            position: absolute;
            top: -0.3125vw;
            left: 0.3125vw;
            font-weight: 500;
            font-size: 2.1875vw;
            color: #000000;
            font-family: system-ui;
            z-index: 2;
        }

        .cell-letter {
            font-size: 4.375vw;
            font-weight: 500;
            color: #89484b;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
            text-transform: lowercase;
            font-family: "Delius", cursive;
        }

        /* CELL HIGHLIGHT DECORATION RULES */
        .cell.active {
            z-index: 10;
            transform: scale(2);
            animation: safeWobble 0.35s ease-in-out forwards;
            background-color: var(--active-highlight) !important;
            box-shadow: 0.3125vw 0.625vw 1.5625vw rgb(0 0 0 / 70%) !important;
        }
        .cell.active .cell-number {
            font-weight: 500;
            font-size: 1.875vw;
            top: 0.3125vw;
        }
        .cell.active.unnumbered {
            background-color: #ffffff !important;
        }


        /* LOWER GAMEPLAY PANEL COMPONENT LAYER */
        .clue-view {
            position: absolute;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            overflow-y: auto;
        }

        /* CARD COMPONENT BOX SHADOW STRUCTURING */
        .clue-card {
            position: relative;
            width: -webkit-fill-available;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3.125vw;
            padding-bottom: 5vw;
            margin: 18.75vw 15.625vw auto 3.125vw;
            height: fit-content;
        }

        .clue-card::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
            top: 0;
            left: 0;
            border-radius: 3.125vw;
            z-index: -1;
        }

        .clue-card::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }

        /* METRIC HEADER DECK SYSTEM */
        .circle-button-array {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.5vw;
            z-index: 16;
            margin: 3.125vw 3.125vw 0;
            position: relative;
            width: -webkit-fill-available;
        }

        .meta-circle {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 50%);
            border: none;
            flex-shrink: 0;
            width: 10vw;
            height: 10vw;
        }

        .meta-circle .material-symbols-outlined {
            font-size: 7.5vw;
            color: #ffffff;
        }

        #metaCellIndex {
            background: #9c27b0;
            color: #ffffff;
            font-weight: 600;
            font-size: 4.375vw;
            text-shadow: 0.15625vw 0.15625vw 0.625vw rgba(0, 0, 0, 0.4);
            line-height: 1;
        }
        
        .badge-mystery { background: #ff9800; margin: 0 auto 0 0; }
        .badge-mystery.depleted { opacity: 0.9; pointer-events: none; filter: grayscale(1) blur(0.3125vw); box-shadow: unset; }
        .badge-hint { background: #4caf50; margin: 0 0 0 auto; }
        
        .badge-timepiece { background: #00bcd4; transition: opacity 0.3s ease, transform 0.2s ease; }
        .badge-timepiece:active { transform: scale(0.9); }
        .badge-timepiece.depleted { opacity: 0.9; pointer-events: none; filter: grayscale(1) blur(0.3125vw); box-shadow: unset; }

        /* TIMER BOX LAYOUT DIMENSIONS */
        .clock-circle {
            position: absolute;
            top: -14.0625vw;
            left: 50%;
            transform: translateX(-50%);
            width: 28.125vw;
            height: 28.125vw;
            background: var(--carpet-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 15;
            transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .clock-text {
            font-size: 6.875vw;
            font-weight: 400;
            color: #ffffff;
            text-shadow: 0.15625vw 0.15625vw 1.5625vw #00000070;
            z-index: 5;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 2.5vw solid var(--carpet-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25.625vw;
            height: 25.625vw;
            transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: #ffffff6b;
            box-shadow: inset 0 0 2.5vw rgb(255 255 255 / 60%);
        }

        /* REFINEMENT 14 & 15: DIFFICULTY FLIGHT BADGE SIBLINGS */
        .difficulty-mode {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10.9375vw;
            height: 10.9375vw;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--carpet-color);
            z-index: 12;
            border: 1.25vw solid var(--carpet-color);
        }

        .difficulty-mode-inner {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            color: #835252;
            background: #ffffff6b;
            box-shadow: inset 0 0 2.5vw rgb(255 255 255 / 60%);
        }
        .difficulty-mode-inner .material-symbols-outlined {
            font-size: 6.875vw;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 0.3125vw;
        }



        /* COMPACT SQUIRCLED DIRECTIONAL CAPSULES */
        .capsule-container {
            position: relative;
            display: flex;
            width: 56.25vw;
            background-color: #00000024;
            transition: background-color 0.3s;
            margin: 0 3.125vw;
            z-index: 2;
            clip-path: var(--squircle);
            border: 1.5625vw solid #0000;
            height: fit-content;
            align-items: center;
            justify-content: center;
        }
        .capsule-slider {
            position: absolute;
            left: 0;
            width: 50%;
            height: 100%;
            z-index: 1;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .capsule-container.select-right .capsule-slider { left: 50%; }
        .capsule-item {
            flex: 1;
            text-align: center;
            font-size: 3.75vw;
            font-weight: 800;
            color: #ffffff99;
            z-index: 2;
            transition: color 0.3s;
            height: 10vw;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.15625vw;
        }
        .capsule-item.active { color: var(--carpet-color); }
        .capsule-container:active .capsule-slider::before { box-shadow: 0 0.15625vw 0.3125vw rgba(0,0,0,0.28); }
        #targetCapsule { width: -webkit-fill-available; }

        /* REFINEMENT 10, 11, 12, 13: QUOTA STATUS BAR RESTRUCTURE */
        .quota-status-bar {
            font-size: 3.75vw;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.1);
            margin: 0 3.125vw;
            text-align: center;
            width: -webkit-fill-available;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .split-left {
            text-align: right;
            width: 50%;
            position: relative;
            overflow: auto;
            text-overflow: ellipsis;
            white-space: pre;
            height: 4.6875vw;
            line-height: 4.6875vw;
            display: inline-block;
        }
        .split-right {
            text-align: left;
            width: 50%;
            position: relative;
            padding: 0 1.25vw;
            border-left: 0.625vw solid #ffffff;
            overflow: auto;
            text-overflow: ellipsis;
            white-space: pre;
            height: 4.6875vw;
            margin: 0 1.5625vw;
            line-height: 4.6875vw;
            display: inline-block;
        }

        /* REFINEMENT 5, 6, 8: INTEGRATED CLUE BOX CONTAINER ENGINE */
        .clue-box {
            background-color: #00000024;
            width: -webkit-fill-available;
            height: fit-content;
            clip-path: var(--squircle);
            display: flex;
            flex-flow: column;
            margin: 0 3.125vw;
            position: relative;
            gap: 3.125vw;
        }

        /* REFINEMENT 7: SCORE PRESENTATION HOOK */
        .score-display {
            font-size: 9.375vw;
            font-weight: 800;
            color: #ffffff;
            text-shadow: 0.15625vw 0.15625vw 0.5vw rgba(0,0,0,0.2);
            margin: 3.125vw 3.125vw 0;
            display: flex;
            height: 12.5vw;
            line-height: 10.9375vw;
            justify-content: center;
            align-items: center;
            width: -webkit-fill-available;
            gap: 3.125vw;
        }

        .horizontal-divider {
            width: -webkit-fill-available;
            min-height: 0.625vw;
            position: relative;
            margin: 0 3.125vw;
            background: linear-gradient(90deg, #0000, #ffffff87, #0000);
        }

        /* REFINEMENT 9: CAROUSEL TRACK CONSTRAINTS */
        .clue-display-container {
            width: -webkit-fill-available;
            background: #ffffff3b;
            clip-path: var(--squircle);
            box-shadow: inset 0 0 1.5625vw rgba(255, 255, 255, 0.4);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: 0 3.125vw 3.125vw;
            position: relative;
        }

        .clue-quota-carousel { width: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
        .clue-quota-carousel.locked { overflow-x: hidden !important; pointer-events: none; }
        .clue-quota-carousel::-webkit-scrollbar { display: none; }
        
        .clue-quota-node {
            flex: 0 0 100%;
            scroll-snap-align: center;
            text-align: center;
            font-size: 4.2vw;
            font-weight: 600;
            color: var(--text-main);
            padding: 4vw 3.125vw;
            min-height: 18.75vw;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: filter 0.3s ease;
        }
        .clue-quota-node.blurred { filter: blur(1.5625vw); }

        /* REFINEMENT 1 & 2 & 17: METRIC DATA STRIPS DESIGN SYSTEM */
        .data-metric-strip {
            width: -webkit-fill-available;
            margin: 0 3.125vw;
            height: 14.0625vw;
            background: #ffffff3b;
            clip-path: var(--squircle);
            box-shadow: inset 0 0 1.5625vw rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0 0 4.6875vw;
            font-size: 3.75vw;
            font-weight: 700;
            color: #ffffff;
        }
        .data-metric-strip span:first-child {
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.2);
        }
        .data-metric-strip span:last-child {
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.5);
            width: 9.375vw;
            height: 9.375vw;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 2.34375vw 0 0;
            padding: 0;
        }

        /* SETTINGS ICON CONTROLLER LINK SWITCH */
        .settings-btn {
            position: absolute;
            top: 4.6875vw;
            right: 4.6875vw;
            width: 9.375vw;
            height: 9.375vw;
            background-color: #ffffff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0.625vw 1.25vw rgba(0,0,0,0.1);
            z-index: 10;
            border: none;
        }
        .settings-btn svg { width: 5vw; height: 5vw; fill: #333333; }

        /* ADVANCED HARDWARE FOOTER TYPING CONTROLLER SYSTEM */
        .footer {
            width: 100%;
            height: auto;
            position: relative;
            scroll-snap-type: x mandatory;
            display: flex;
            z-index: 15;
            margin: auto 0 0;
            align-items: center;
            justify-content: flex-start;
            overflow: auto hidden;
        }
        .footer::-webkit-scrollbar { display: none; }

        .keyboard-box, .player-box {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
            scroll-snap-align: center;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 3.125vw 0;
        }

        /* QWERTY VIRTUAL KEYBOARD LAYOUT GRID */
        .keyboard-matrix {
            display: flex;
            flex-direction: column;
            gap: 1.5vw;
            width: -webkit-fill-available;
            margin: 0 3.125vw;
        }
        .keyboard-row {
            display: flex;
            justify-content: center;
            gap: 1.2vw;
            width: 100%;
        }
        .key-btn {
            position: relative;
            flex: 1;
            height: 11vw;
            max-width: 9vw;
            color: #ffffff;
            font-size: 4.5vw;
            font-weight: 800;
            border: none;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }
        .key-btn::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 15%);
            border-radius: 3.125vw;
            z-index: -1;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .key-btn::after {
            content: "";
            position: absolute;
            inset: 0;
            background: #ffffff4d;
            clip-path: var(--squircle);
            z-index: -1;
            box-shadow: inset 0 0 1vw rgb(255 255 255 / 40%);
        }
        .key-btn:active::after { background: #ffffff99; }
        
        .key-btn.wide-key {
            max-width: 15vw;
            flex: 1.6;
        }
        .key-btn .material-symbols-outlined {
            font-size: 7.8125vw;
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.2);
            color: #676767;
        }

        /* PLAYER ENGAGEMENT HUD HUD MODULES */
        .player-row {
            display: flex;
            justify-content: space-around;
            gap: 4vw;
            width: -webkit-fill-available;
            margin: 0 3.125vw;
            position: relative;
            min-height: 37.5vw;
            align-items: center;
        }
        .player-row::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
            top: 0;
            left: 0;
            border-radius: 3.125vw;
            z-index: -1;
        }
        .player-row::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }
        .player-profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 25vw;
        }
        .player-avatar {
            width: 18.75vw;
            height: 18.75vw;
            background: #ffffff6b;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: -0.15625vw 0.3125vw 0.625vw rgba(0,0,0,0.30), inset 0 0 2.5vw rgb(255 255 255 / 60%);
            font-size: 8vw;
            position: relative;
        }
        .player-score-tag {
            position: absolute;
            bottom: 0;
            right: -1vw;
            background: var(--active-highlight);
            color: #2b262d;
            font-weight: 800;
            font-size: 3vw;
            padding: 0.5vw 1.5vw;
            border-radius: 2vw;
            box-shadow: 0 0.625vw 1.5625vw rgba(0,0,0,0.2);
        }
        .player-name {
            margin-top: 1.5vw;
            font-size: 3.5vw;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.2);
        }

        /* FLYING CHAR ARCS & GLISSANDO FX OVERLAYS */
        .flying-char-node {
            position: fixed;
            font-size: 6vw;
            font-weight: 900;
            color: var(--active-highlight);
            text-shadow: 0 0 2vw #000, 0 0 1vw #fff;
            z-index: 9999;
            pointer-events: none;
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
        }

        @keyframes glissandoWash {
            0% { background-color: rgba(255,255,255,0); }
            50% { background-color: rgba(255,255,255,0.8); box-shadow: 0 0 4vw #fff; }
            100% { background-color: rgba(255,255,255,0); }
        }
        .glissando-active { animation: glissandoWash 0.6s ease-in-out; }

        @keyframes cellImpact {
            0% { transform: scale(1); }
            50% { transform: scale(1.25); background-color: var(--active-highlight); }
            100% { transform: scale(1); }
        }
        .bounce-impact { animation: cellImpact 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards; }


        /* MODAL OVERLAY SETTINGS PAGE SYSTEM */
        .sheet-backdrop {
            display: none;
        }

        .modal-overlay {
            height: 0;
            z-index: 1000;
            display: flex;
            flex-flow: column;
            position: absolute;
            bottom: 0;
            left: 0;
            align-items: center;
            transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            background: var(--carpet-color);
            justify-content: center;
            overflow: hidden;
            pointer-events: none;
        }
        .modal-overlay.active {
            height: 100%;
            pointer-events: auto;
        }

        .bottom-sheet {
            height: calc(100% - 6.125vw);
            margin: 3.125vw;
            width: -webkit-fill-available;
            position: absolute;
            display: flex;
            flex-flow: column;
            z-index: 2;
        }
        .bottom-sheet::before {
            content: "";
            position: absolute;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
            top: 0;
            left: 0;
            border-radius: 3.125vw;
            z-index: -1;
        }
        .bottom-sheet::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }
        .bottom-sheet-tools {
            width: -webkit-fill-available;
            position: absolute;
            display: flex;
            flex-flow: column;
            overflow: hidden auto;
            gap: 3.125vw;
            height: 100%;
            clip-path: var(--squircle);
            padding: 3.125vw 0;
        }
        .bottom-sheet-tools::-webkit-scrollbar {
            display: none;
        }

        .sheet-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 14.0625vw;
            position: relative;
            gap: 3.125vw;
            margin: 0 3.125vw;
        }
        .sheet-row::before {
            content: "";
            position: absolute;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 15%);
            border-radius: 3.125vw;
            z-index: -1;
        }
        .sheet-row::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }
        .sheet-row-column-view {
            min-height: fit-content;
            flex-flow: column;
            align-items: stretch;
        }
        .sheet-label {
            font-size: 3.75vw;
            font-weight: 600;
            color: #333333;
            padding: 0 4.6875vw;
        }
        .sheet-label-top {
            height: 9.375vw;
            line-height: 9.375vw;
            margin: 3.125vw 0 0;
            display: flex;
        }

        .switch-input { display: none; }
        .switch-label {
            position: relative;
            width: 15.625vw;
            border-radius: 9.375vw;
            transition: background-color 0.25s;
            height: fit-content;
            display: flex;
            background-color: #00000024;
            margin: 0 2.34375vw;
            border: 1.25vw solid #0000;
        }
        .switch-label::after {
            content: '';
            position: relative;
            aspect-ratio: 1/1;
            height: 6.875vw;
            background-color: #ffffff;
            border-radius: 50%;
            transition: margin 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2), transform 0.18s ease, box-shadow 0.18s ease;
            box-shadow: 0 0 0.9375vw rgb(0 0 0 / 50%);
            margin: 0;
        }
        .switch-input:checked + .switch-label { background-color: var(--carpet-color); }
        .switch-input:checked + .switch-label::after { margin: 0 0 0 50%; }
        .switch-label:active::after { transform: scale(0.9); }

        .slider-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1vw;
            width: -webkit-fill-available;
        }
        .slider-val-readout {
            font-weight: inherit;
            color: inherit;
            font-size: inherit;
            text-align: right;
            margin: 0 0 0 0.9375vw;
        }
        .premium-slider {
            -webkit-appearance: none;
            height: 2.5vw;
            border-radius: 1.25vw;
            background: #00000024;
            outline: none;
            width: -webkit-fill-available;
            margin: 0 3.125vw 3.75vw;
        }
        .premium-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 6.25vw;
            height: 6.25vw;
            background: #fff;
            border-radius: 50%;
            border: 0.9375vw solid var(--carpet-color);
        }
        .hue-slider { background: linear-gradient(to right, #a16f65, #65a18d, #658ea1, #8a65a1, #a16f65); }

        .cta-button {
            color: #fff;
            font-size: 3.75vw;
            justify-content: center;
            min-height: 14.0625vw;
            margin: 3.125vw;
            display: flex;
            width: -webkit-fill-available;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .cta-button::before {
            content: "";
            position: absolute;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
            border-radius: 3.125vw;
            z-index: -1;
        }
        .cta-button::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            background: var(--carpet-color);
            clip-path: var(--squircle);
            pointer-events: none;
            z-index: -1;
        }
        .cta-button:active { transform: scale(0.985) translateY(0.3125vw); }
        .cta-button-text {
            z-index: 1;
            font-size: 4.375vw;
            font-weight: 400;
        }


        .modal-overlay.trick-active .bottom-sheet {
            display: none;
        }
        .trick-or-treat-card {
            display: none;
            position: absolute;
            width: -webkit-fill-available;
            height: calc(100% - 6.125vw);
            margin: 3.125vw;
            z-index: 3;
            flex-flow: column;
            gap: 3.125vw;
            align-items: center;
        }
        .modal-overlay.trick-active .trick-or-treat-card {
            display: flex;
        }

        .modal-overlay.setup-active .bottom-sheet,
        .modal-overlay.setup-active .trick-or-treat-card,
        .modal-overlay.trick-active .game-setup-card {
            display: none;
        }
        .game-setup-card {
            display: none;
            position: absolute;
            width: -webkit-fill-available;
            height: calc(100% - 6.125vw);
            margin: 3.125vw;
            z-index: 4;
            flex-flow: column;
            gap: 3.125vw;
            align-items: center;
        }
        .modal-overlay.setup-active .game-setup-card {
            display: flex;
        }
        .game-setup-card::before {
            content: "";
            position: absolute;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
            top: 0;
            left: 0;
            border-radius: 3.125vw;
            z-index: -1;
        }
        .game-setup-card::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }
        .game-setup-tools {
            width: -webkit-fill-available;
            display: flex;
            flex-flow: column;
            gap: 3.125vw;
            overflow: hidden auto;
            height: 100%;
            clip-path: var(--squircle);
            padding: 3.125vw 0;
        }
        .puzzle-select {
            width: -webkit-fill-available;
            margin: 0 3.125vw 3.125vw;
            min-height: 14.0625vw;
            border: none;
            outline: none;
            background: #ffffff80;
            clip-path: var(--squircle);
            color: var(--text-main);
            font-size: 4.0625vw;
            font-weight: 800;
            padding: 0 4.6875vw;
            appearance: none;
        }
        .trick-or-treat-card::before {
            content: "";
            position: absolute;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
            top: 0;
            left: 0;
            border-radius: 3.125vw;
            z-index: -1;
        }
        .trick-or-treat-card::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }
        .trick-or-treat-tools {
            width: -webkit-fill-available;
            display: flex;
            flex-flow: column;
            gap: 3.125vw;
            overflow: hidden auto;
            height: 100%;
            clip-path: var(--squircle);
            padding: 3.125vw 0;
        }
        .trick-token-box {
            background-color: #00000024;
            width: -webkit-fill-available;
            height: fit-content;
            clip-path: var(--squircle);
            display: flex;
            flex-flow: column;
            margin: 0 3.125vw;
            position: relative;
            gap: 3.125vw;
        }
        .trick-token-title {
            font-size: 8.75vw;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0.15625vw 0.15625vw 0.5vw rgba(0,0,0,0.2);
            margin: 3.125vw 3.125vw 0;
            display: flex;
            min-height: 12.5vw;
            justify-content: center;
            align-items: center;
            width: -webkit-fill-available;
        }
        .trick-explainer-node {
            width: -webkit-fill-available;
            background: #ffffff3b;
            clip-path: var(--squircle);
            box-shadow: inset 0 0 1.5625vw rgba(255,255,255,0.4);
            margin: 0 3.125vw 3.125vw;
            padding: 4.6875vw;
            font-size: 4.0625vw;
            line-height: 1.35;
            font-weight: 600;
            color: var(--text-main);
            text-align: center;
        }

        /* TOAST NOTIFICATION ENGINE ENGINE */
        .toast-pipeline-hub {
            position: fixed;
            bottom: 4.6875vw;
            left: 50%;
            transform: translate(-50%, 25vw);
            height: 12.5vw;
            width: auto;
            min-width: 46.875vw;
            max-width: 87.5vw;
            background: rgba(0, 0, 0, 0.85);
            color: #ffffff;
            font-size: 3.75vw;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 6.25vw;
            z-index: 100;
            pointer-events: none;
            clip-path: var(--squircle);
            box-shadow: 0 0.9375vw 2.5vw rgba(0,0,0,0.3);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
            text-align: center;
            white-space: nowrap;
        }
        .toast-pipeline-hub.active { transform: translate(-50%, 0); }

        @keyframes safeWobble {
            0% { transform: scale(2) rotate(0deg); }
            30% { transform: scale(2.15) rotate(-3deg); }
            65% { transform: scale(1.95) rotate(2.5deg); }
            100% { transform: scale(2) rotate(0deg); }
        }
    

        /* PHASE 2 POLISH + GAME MODEL PATCHES */
        .key-btn:active::before, .key-btn.key-sink::before {
            transform: translateY(0.625vw) scale(0.985);
            box-shadow: -0.078125vw 0.078125vw 0.3125vw rgb(0 0 0 / 12%);
        }
        .cell.highlighted-track {
            background-color: var(--active-highlight) !important;
        }
        .cell.cursor-track {
            background-color: var(--active-highlight) !important;
            z-index: 8;
        }
        .cell.backspace-flash {
            background-color: rgb(102 236 255 / 35%) !important;
        }
        .cell.trick-star .cell-letter {
            color: var(--carpet-color);
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.2);
        }
        .trick-star .material-symbols-outlined {
            font-size: 6.25vw;
        }
        .active.trick-star .material-symbols-outlined {
            font-size: 5vw;
        }
        .cell.trick-star-fading .cell-letter {
            animation: starFadeAway 0.9s ease forwards;
        }
        @keyframes starFadeAway {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.25) rotate(24deg); }
        }
        .wrong-shake {
            animation: shake 0.5s;
        }
        .falling-letter {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            color: #ff5252;
            font-size: 6.25vw;
            font-weight: 900;
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.4);
            transition: transform 0.85s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.7s ease;
        }
        @keyframes shake {
            0% { transform: translate(0.3125vw, 0.3125vw) rotate(0deg); }
            20% { transform: translate(-0.9375vw, 0) rotate(1deg); }
            30% { transform: translate(0.9375vw, 0.625vw) rotate(0deg); }
            40% { transform: translate(0.3125vw, -0.3125vw) rotate(1deg); }
            50% { transform: translate(-0.3125vw, 0.625vw) rotate(-1deg); }
            60% { transform: translate(-0.9375vw, 0.3125vw) rotate(0deg); }
            70% { transform: translate(0.9375vw, 0.3125vw) rotate(-1deg); }
            80% { transform: translate(-0.3125vw, -0.3125vw) rotate(1deg); }
            90% { transform: translate(0.3125vw, 0.625vw) rotate(0deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        .lead-panel-title {
            font-size: 6.25vw;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.2);
            margin: 0 3.125vw;
        }
        .lead-card {
            position: relative;
            width: -webkit-fill-available;
            margin: 0 3.125vw;
            min-height: 18.75vw;
            display: flex;
            flex-direction: column;
            gap: 2.34375vw;
            color: var(--text-main);
        }
        .lead-card::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
            top: 0;
            left: 0;
            border-radius: 3.125vw;
            z-index: -1;
        }
        .lead-card-inner {
            display: flex;
            flex-direction: column;
            gap: 2.34375vw;
            margin: 4.6875vw;
        }
        .lead-row {
            display: flex;
            justify-content: space-between;
            gap: 3.125vw;
            font-size: 3.75vw;
            font-weight: 700;
            border-bottom: 0.3125vw solid #ffffff7a;
            padding-bottom: 1.5625vw;
        }
        .lead-row:last-child { border-bottom: none; padding-bottom: 0; }
        .lead-small {
            font-size: 3.125vw;
            font-weight: 600;
            line-height: 4.6875vw;
            color: #2b262dcc;
            max-height: 56.25vw;
            overflow: hidden auto;
            display: flex;
            flex-flow: column;
            gap: 1.5625vw;
        }
        .lead-small::-webkit-scrollbar { display: none; }
        .cheat-word-row,
        .score-detail-row {
            width: -webkit-fill-available;
            display: flex;
            flex-flow: column;
            gap: 1.5625vw;
            background: #ffffff5c;
            clip-path: var(--squircle);
            padding: 2.1875vw 3.125vw;
            color: var(--text-main);
        }
        .cheat-word-row span,
        .score-detail-row strong {
            font-size: 3.4375vw;
            font-weight: 900;
            color: var(--carpet-color);
        }
        .cheat-word-row strong {
            font-size: 4.375vw;
            letter-spacing: 0.3125vw;
        }
        .cheat-word-row em,
        .score-detail-row span,
        .score-detail-row small {
            font-size: 3.125vw;
            font-style: normal;
            font-weight: 700;
            line-height: 4.375vw;
            color: #2b262dcc;
        }
        .score-detail-row span,
        .score-detail-row small {
            min-height: 11.25vw;
            background: #ffffff8f;
            clip-path: var(--squircle);
            display: flex;
            align-items: center;
            width: fit-content;
            padding: 0 3.125vw;
        }
        .score-cell-capsules {
            display: flex;
            flex-flow: row wrap;
            gap: 1.5625vw;
        }
        .score-detail-row strong + .score-cell-capsules {
            margin-top: 0;
        }
        .penalty-chip-row {
            display: flex;
            gap: 1.5625vw;
            overflow-x: auto;
            width: -webkit-fill-available;
        }
        .penalty-chip-row::-webkit-scrollbar { display: none; }
        .penalty-chip {
            flex: 0 0 auto;
            background: #ffffff80;
            color: var(--text-main);
            font-size: 3.125vw;
            font-weight: 800;
            padding: 1.5625vw 2.34375vw;
            clip-path: var(--squircle);
        }

    

.capsule-slider::before {
            content: "";
            position: absolute;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
            border-radius: 3.125vw;
            z-index: -1;
            box-shadow: 0 0 0.9375vw rgb(0 0 0 / 20%);
        }


.capsule-slider::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            background: #fff;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
        }


.lead-card::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: #ffffff6b;
            clip-path: var(--squircle);
            z-index: -1;
            pointer-events: none;
            box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
        }

/* Double Crossed precision pass */
.cell.locked {
	background-color: #ffffff;
}
.cell.solved {
	background-color: #ffffff !important;
}
.cell.solved .cell-letter {
	color: #7487bf !important;
}
.cell.quota-denied {
	filter: grayscale(1) blur(0.9375vw);
}
.clue-quota-node {
	scroll-snap-stop: always;
	position: relative;
	gap: 2.34375vw;
}
.no-access-icon {
	color: #ffffff;
	font-size: 8.125vw;
	text-shadow: 0.15625vw 0.15625vw 1.5625vw #00000070;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 6;
}
.no-access-icon.hidden {
	display: none;
}
.cta-button-danger::after {
	background: #b54545;
}
.lead-view {
	gap: 3.125vw;
	padding: 0;
	z-index: 2;
}
.lead-accordion {
	position: relative;
	width: -webkit-fill-available;
	margin: 0 3.125vw;
	color: var(--text-main);
	transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.lead-accordion:last-child {
	margin-bottom: 3.125vw;
}
.lead-accordion::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
	top: 0;
	left: 0;
	border-radius: 3.125vw;
	z-index: -1;
}
.lead-accordion::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #ffffff6b;
	clip-path: var(--squircle);
	z-index: -1;
	pointer-events: none;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
}
.lead-accordion-head {
	min-height: 14.0625vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 3.125vw;
	font-size: 3.75vw;
	font-weight: 800;
}
.lead-accordion-head span:last-child {
	color: var(--text-main);
	background: rgba(255,255,255,0.5);
	width: 9.375vw;
	height: 9.375vw;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lead-accordion-body {
	display: none;
	margin: 0 3.125vw 3.125vw;
}
.lead-accordion.open .lead-accordion-body {
	display: flex;
	flex-flow: column;
	gap: 3.125vw;
}
.lead-total-pill {
	width: -webkit-fill-available;
	min-height: 12.5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.34375vw;
	background: #00000024;
	clip-path: var(--squircle);
	font-size: 4.375vw;
	font-weight: 800;
	color: #ffffff;
}
.lead-empty {
	background: #ffffff5c;
	clip-path: var(--squircle);
	padding: 3.125vw;
}


/* Double Crossed current refinement pass */
.cell-number {
	top: -0.3125vw;
	font-weight: 500;
}
.cell-letter {
	font-size: 4.375vw;
	font-weight: 500;
	color: #89484b;
	font-variant: normal;
}
.score-detail-row span,
.score-detail-row small {
	min-height: 11.25vw;
	background: #ffffff8f;
	width: fit-content;
}
.cheat-word-row,
.score-detail-row {
	gap: 1.5625vw;
}


/* Double Crossed smooth clue-card refinement */
.delius-regular {
	font-family: "Delius", cursive;
	font-weight: 400;
	font-style: normal;
}
.difficulty-mode-inner .material-symbols-outlined {
	font-size: 6.875vw;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 0.3125vw;
}
.capsule-item {
	font-weight: 800;
	letter-spacing: 0.15625vw;
}