:root {
            --bg: #15212b;
            --panel: #243443;
            --panel-2: #2e4354;
            --board: #1d2d39;
            --board-line: #405668;
            --text: #f5fbff;
            --muted: #a8bdca;
            --gold: #ffd166;
            --green: #58d68d;
            --red: #ff6b6b;
            --blue: #4dabf7;
            --cell: min(10.8vw, 58px);
        }

        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin: 0;
            color: var(--text);
            font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            background:
                linear-gradient(rgba(18, 32, 42, .7), rgba(16, 24, 32, .78)),
                url("./assets/images/orchard-backdrop.svg") center / cover fixed,
                linear-gradient(145deg, #12202a 0%, #192d38 48%, #101820 100%);
            min-height: 100dvh;
            overflow: hidden;
            overscroll-behavior: none;
            -webkit-tap-highlight-color: transparent;
        }

        button {
            font: inherit;
            color: inherit;
            border: 0;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .app {
            width: min(100vw, 1180px);
            min-height: 100dvh;
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(280px, 360px) minmax(320px, 560px) minmax(240px, 300px);
            gap: 16px;
            align-items: center;
            padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
        }

        .topbar {
            display: none;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .icon-action {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: 8px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.12);
            font-weight: 900;
            box-shadow: 0 8px 18px rgba(0,0,0,.22);
        }

        .icon-action.active {
            color: #17222d;
            background: var(--gold);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .brand-mark {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: linear-gradient(135deg, #ffd166, #ef476f);
            box-shadow: 0 10px 26px rgba(0,0,0,.28);
            font-size: 25px;
        }

        .brand-mark img {
            width: 100%;
            height: 100%;
            display: block;
        }

        h1 {
            margin: 0;
            font-size: clamp(22px, 4vw, 36px);
            line-height: 1;
            letter-spacing: 0;
        }

        .level-pill {
            padding: 6px 12px;
            border: 2px solid rgba(255,255,255,.8);
            border-radius: 999px;
            color: #19202a;
            background: var(--gold);
            font-weight: 800;
            box-shadow: 0 6px 16px rgba(0,0,0,.25);
            white-space: nowrap;
        }

        .panel {
            background: rgba(36, 52, 67, .86);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 8px;
            box-shadow: 0 20px 50px rgba(0,0,0,.3);
        }

        .left-panel, .right-panel {
            padding: 16px;
        }

        .left-panel .brand { margin-bottom: 18px; }

        .level-title {
            margin-bottom: 12px;
            padding: 9px 10px;
            border-radius: 8px;
            color: #17222d;
            background: linear-gradient(90deg, #ffd166, #58d68d);
            font-weight: 900;
            text-align: center;
        }

        .left-panel::after {
            content: "";
            display: block;
            height: 86px;
            margin-top: 14px;
            background: url("./assets/images/fruit-basket.svg") center / contain no-repeat;
            opacity: .9;
            pointer-events: none;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .stat {
            min-height: 74px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(0,0,0,.18);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
        }

        .stat-title {
            color: var(--muted);
            font-size: 12px;
        }

        .stat-value {
            font-size: clamp(20px, 4vw, 30px);
            font-weight: 900;
            line-height: 1;
        }

        .progress {
            height: 12px;
            margin: 14px 0 4px;
            border-radius: 999px;
            background: rgba(0,0,0,.3);
            overflow: hidden;
        }

        .combo-track {
            margin-top: 12px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(0,0,0,.2);
        }

        .combo-copy {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
        }

        #comboText {
            color: var(--gold);
            font-size: 20px;
            font-weight: 900;
        }

        .combo-bar {
            height: 8px;
            margin-top: 8px;
            border-radius: 999px;
            background: rgba(0,0,0,.35);
            overflow: hidden;
        }

        #streakFill {
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #4dabf7, #ffd166);
            transition: width .25s ease;
        }

        .progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #58d68d, #ffd166, #ff6b6b);
            transition: width .3s ease;
        }

        .goals {
            display: grid;
            gap: 8px;
            margin-top: 14px;
        }

        .goal-row {
            min-height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 9px 10px;
            border-radius: 8px;
            background: rgba(0,0,0,.2);
        }

        .goal-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .goal-icon { font-size: 22px; width: 28px; text-align: center; }
        .goal-label { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .goal-value { font-size: 18px; font-weight: 900; white-space: nowrap; }

        .board-shell {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .message {
            min-height: 34px;
            width: min(100%, calc(var(--cell) * 8 + 34px));
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 7px 12px;
            border-radius: 8px;
            color: #20313c;
            background: rgba(255, 209, 102, .95);
            font-weight: 800;
            box-shadow: 0 10px 26px rgba(0,0,0,.22);
            transition: opacity .2s ease, transform .2s ease;
        }

        .message.dim { opacity: .76; transform: scale(.98); }

        .grid {
            width: min(calc(var(--cell) * 8 + 18px), 94vw, 58dvh);
            aspect-ratio: 1 / 1;
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 1fr);
            gap: 3px;
            padding: 8px;
            border: 5px solid var(--board-line);
            border-radius: 12px;
            background: var(--board);
            box-shadow: 0 26px 60px rgba(0,0,0,.45), inset 0 0 22px rgba(0,0,0,.45);
            position: relative;
            overflow: hidden;
            touch-action: none;
            user-select: none;
        }

        .grid.board-shake {
            animation: boardShake .22s linear;
        }

        @keyframes boardShake {
            0%, 100% { transform: translate3d(0, 0, 0); }
            20% { transform: translate3d(-5px, 2px, 0); }
            40% { transform: translate3d(4px, -2px, 0); }
            60% { transform: translate3d(-3px, 1px, 0); }
            80% { transform: translate3d(2px, 0, 0); }
        }

        .cell {
            min-width: 0;
            min-height: 0;
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
            box-shadow: inset 0 2px 4px rgba(255,255,255,.05), inset 0 -3px 6px rgba(0,0,0,.22);
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden;
        }

        .cell::before {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 7px;
            border: 2px solid transparent;
            pointer-events: none;
        }

        .cell.jelly::before {
            border-color: rgba(77, 171, 247, .65);
            background: rgba(77, 171, 247, .13);
            box-shadow: 0 0 12px rgba(77, 171, 247, .35);
        }

        .cell.crate {
            background: linear-gradient(180deg, rgba(169, 113, 66, .46), rgba(80, 49, 26, .62));
            box-shadow: inset 0 0 0 2px rgba(255, 209, 102, .2), inset 0 -6px 10px rgba(0,0,0,.28);
        }

        .cell.crate::before {
            border-color: rgba(255, 209, 102, .28);
            background:
                linear-gradient(45deg, transparent 43%, rgba(255, 209, 102, .28) 45%, rgba(255, 209, 102, .28) 55%, transparent 57%),
                linear-gradient(-45deg, transparent 43%, rgba(255, 209, 102, .22) 45%, rgba(255, 209, 102, .22) 55%, transparent 57%);
        }

        .cell.ice {
            background:
                linear-gradient(145deg, rgba(186, 230, 255, .48), rgba(77, 171, 247, .24)),
                linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.12));
            box-shadow: inset 0 0 0 2px rgba(229, 246, 255, .28), inset 0 -5px 10px rgba(0,0,0,.18);
        }

        .cell.ice::after {
            content: "";
            position: absolute;
            inset: 4px;
            border-radius: 7px;
            z-index: 3;
            pointer-events: none;
            background:
                linear-gradient(135deg, rgba(255,255,255,.62), transparent 32%),
                linear-gradient(-35deg, transparent 50%, rgba(255,255,255,.34) 52%, transparent 64%),
                rgba(158, 222, 255, .22);
            border: 2px solid rgba(229, 246, 255, .7);
            box-shadow: inset 0 0 16px rgba(255,255,255,.35), 0 0 12px rgba(77,171,247,.32);
        }

        .cell.ice-break::after {
            animation: iceCrack .22s ease-out forwards;
        }

        @keyframes iceCrack {
            to { transform: scale(1.18) rotate(4deg); opacity: 0; }
        }

        .cell.hint::before {
            border-color: var(--gold);
            animation: hintPulse .8s ease-in-out infinite alternate;
        }

        .cell.hit-ring::before {
            border-color: rgba(255, 209, 102, .95);
            background: radial-gradient(circle, rgba(255, 209, 102, .26), transparent 68%);
            animation: hitRing .32s ease-out forwards;
        }

        .cell.blocker-hit::before {
            border-color: rgba(255, 255, 255, .78);
            animation: blockerHit .26s ease-out forwards;
        }

        .cell.special-bloom::before {
            border-color: rgba(255, 107, 203, .95);
            background: conic-gradient(from 20deg, rgba(255, 209, 102, .45), rgba(88, 214, 141, .35), rgba(77, 171, 247, .45), rgba(255, 107, 203, .45), rgba(255, 209, 102, .45));
            animation: specialBloom .52s ease-out forwards;
        }

        @keyframes hintPulse {
            from { transform: scale(.9); opacity: .55; }
            to { transform: scale(1.05); opacity: 1; }
        }

        @keyframes hitRing {
            from { transform: scale(.7); opacity: .95; }
            to { transform: scale(1.22); opacity: 0; }
        }

        @keyframes blockerHit {
            0% { transform: scale(.92) rotate(0deg); opacity: 1; }
            60% { transform: scale(1.14) rotate(4deg); opacity: .8; }
            100% { transform: scale(1.28) rotate(-3deg); opacity: 0; }
        }

        @keyframes specialBloom {
            0% { transform: scale(.55) rotate(0deg); opacity: .95; }
            70% { transform: scale(1.28) rotate(120deg); opacity: .7; }
            100% { transform: scale(1.48) rotate(180deg); opacity: 0; }
        }

        .piece {
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            position: relative;
            z-index: 2;
            font-size: clamp(25px, 8.2vw, 45px);
            line-height: 1;
            cursor: grab;
            transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
            will-change: transform, opacity;
            text-shadow: 0 3px 8px rgba(0,0,0,.45);
        }

        .piece:active { cursor: grabbing; }
        .piece.crate-piece {
            cursor: not-allowed;
            filter: saturate(.9);
        }
        .piece.ice-piece {
            cursor: not-allowed;
            filter: saturate(.8) brightness(1.16);
        }
        .cell.selected .piece { transform: scale(.84); filter: saturate(1.2); }
        .piece.line-h::after, .piece.line-v::after, .piece.bomb::after, .piece.rainbow::after {
            position: absolute;
            right: 2px;
            bottom: 1px;
            display: grid;
            place-items: center;
            min-width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(20, 30, 38, .86);
            color: white;
            font-size: 12px;
            font-weight: 900;
        }
        .piece.line-h::after { content: "↔"; }
        .piece.line-v::after { content: "↕"; }
        .piece.bomb::after { content: "✹"; color: var(--gold); }
        .piece.rainbow::after { content: "★"; color: #ff6bcb; }
        .piece.special { animation: specialBreath 1s ease-in-out infinite alternate; }
        @keyframes specialBreath {
            from { transform: scale(.96); }
            to { transform: scale(1.08); text-shadow: 0 0 16px rgba(255,255,255,.8); }
        }

        .piece.drop { animation: dropIn .22s cubic-bezier(.2,.8,.2,1); }
        @keyframes dropIn {
            from { transform: translateY(-90%); opacity: .2; }
            to { transform: translateY(0); opacity: 1; }
        }

        .piece.pop { animation: pop .28s ease forwards; }
        @keyframes pop {
            0% { transform: scale(1); opacity: 1; }
            55% { transform: scale(1.28); opacity: .94; }
            100% { transform: scale(0); opacity: 0; }
        }

        .piece.invalid { animation: shake .22s linear; }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-7px); }
            75% { transform: translateX(7px); }
        }

        .float {
            position: absolute;
            z-index: 20;
            color: var(--green);
            font-size: clamp(16px, 5vw, 28px);
            font-weight: 900;
            text-shadow: 0 3px 8px rgba(0,0,0,.8);
            pointer-events: none;
            animation: floatUp .85s ease-out forwards;
            white-space: nowrap;
        }
        .float.big { color: var(--gold); font-size: clamp(20px, 6vw, 38px); }
        @keyframes floatUp {
            from { transform: translateY(10px) scale(.65); opacity: 0; }
            18% { opacity: 1; }
            to { transform: translateY(-58px) scale(1); opacity: 0; }
        }

        .particle {
            position: absolute;
            z-index: 18;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gold);
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: particleBurst .48s ease-out forwards;
        }

        .particle.ice { background: #b8ebff; box-shadow: 0 0 8px rgba(184, 235, 255, .85); }
        .particle.crate { background: #d38c52; box-shadow: 0 0 6px rgba(255, 209, 102, .5); }
        .particle.special { background: #ff6bcb; box-shadow: 0 0 10px rgba(255, 107, 203, .75); }

        @keyframes particleBurst {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(.45); }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
        }

        .boosters {
            display: grid;
            gap: 10px;
        }

        .booster {
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(0,0,0,.22);
            transition: transform .12s ease, background .12s ease;
        }
        .booster:active { transform: scale(.97); }
        .booster.active { outline: 2px solid var(--gold); background: rgba(255, 209, 102, .18); }
        .booster[disabled] { opacity: .45; cursor: not-allowed; }

        .booster-main {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .booster-icon {
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            border-radius: 8px;
            background: var(--panel-2);
            font-size: 20px;
        }

        .booster-icon img {
            width: 26px;
            height: 26px;
            display: block;
        }

        .booster-name {
            font-weight: 800;
            line-height: 1.1;
        }

        .booster-desc {
            color: var(--muted);
            font-size: 12px;
            margin-top: 2px;
        }

        .count {
            min-width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: var(--gold);
            color: #17222d;
            font-weight: 900;
        }

        .actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 14px;
        }

        .side-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }

        .mini-action {
            min-height: 38px;
            padding: 0 10px;
            border-radius: 8px;
            color: var(--text);
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.1);
            font-size: 13px;
            font-weight: 800;
        }

        .mini-action:active { transform: scale(.97); }

        .action {
            min-height: 44px;
            border-radius: 8px;
            background: var(--blue);
            color: white;
            font-weight: 900;
            box-shadow: 0 10px 22px rgba(0,0,0,.22);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }

        .action img {
            width: 21px;
            height: 21px;
            display: block;
        }
        .action.secondary { background: var(--panel-2); }
        .action:active { transform: scale(.97); }

        .modal {
            position: fixed;
            inset: 0;
            display: none;
            place-items: center;
            padding: 18px;
            background: rgba(8, 14, 18, .82);
            backdrop-filter: blur(6px);
            z-index: 99;
        }

        .modal.open { display: grid; }

        .dialog {
            width: min(92vw, 420px);
            padding: 24px;
            text-align: center;
            border-radius: 10px;
            background: #263847;
            border: 2px solid var(--gold);
            box-shadow: 0 24px 70px rgba(0,0,0,.52);
        }

        .dialog h2 {
            margin: 0 0 10px;
            font-size: 30px;
        }

        .dialog p {
            margin: 0 0 18px;
            color: var(--muted);
            line-height: 1.6;
        }

        .stars {
            font-size: 34px;
            letter-spacing: 0;
            margin: 8px 0 18px;
        }

        .dialog button {
            min-width: 150px;
            min-height: 48px;
            padding: 0 24px;
            border-radius: 999px;
            background: var(--green);
            color: #11221a;
            font-weight: 900;
        }

        @media (max-width: 980px) {
            body { overflow-y: auto; }
            .app {
                min-height: 100dvh;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                justify-items: center;
                align-content: start;
                padding: max(8px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom));
                gap: 8px;
            }
            .topbar {
                display: flex;
                max-width: 620px;
            }
            .left-panel {
                width: min(100%, 620px);
                padding: 8px;
                order: 1;
            }
            .left-panel .brand { display: none; }
            .left-panel::after { display: none; }
            .right-panel {
                width: min(100%, 620px);
                padding: 8px;
                order: 3;
            }
            .board-shell { order: 2; width: 100%; }
            .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .stat { min-height: 48px; padding: 7px 6px; }
            .stat-title { font-size: 11px; }
            .stat-value { font-size: clamp(16px, 4.2vw, 22px); }
            .level-title { display: none; }
            .combo-track { display: none; }
            .progress { height: 9px; margin: 8px 0 0; }
            .goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .goal-row { min-height: 34px; padding: 5px 7px; }
            .goal-label { display: none; }
            .boosters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .booster { min-height: 44px; padding: 7px; }
            .booster-desc { display: none; }
            .booster-name { font-size: 12px; }
            .booster-icon { width: 30px; height: 30px; }
            .actions { margin-top: 8px; }
            .side-actions { display: none; }
            .grid { width: min(96vw, 64dvh, 560px); }
        }

        @media (max-width: 520px) {
            .brand-mark { width: 34px; height: 34px; font-size: 21px; }
            h1 { font-size: 22px; }
            .level-pill { font-size: 13px; padding: 5px 10px; }
            .stats { gap: 6px; }
            .stat { min-height: 44px; }
            .goals { gap: 6px; }
            .goal-icon { font-size: 19px; width: 22px; }
            .goal-value { font-size: 15px; }
            .message { min-height: 30px; font-size: 13px; }
            .grid { gap: 2px; padding: 6px; border-width: 4px; border-radius: 10px; }
            .cell { border-radius: 7px; }
            .piece { font-size: clamp(25px, 9vw, 39px); }
            .left-panel, .right-panel { width: 100%; }
            .booster { justify-content: center; gap: 6px; }
            .booster-main > span:last-child { display: none; }
            .count { min-width: 28px; height: 28px; }
            .action { min-height: 40px; }
        }

        @media (max-height: 720px) and (min-width: 981px) {
            .app { align-items: start; padding-top: 12px; }
            .grid { width: min(calc(var(--cell) * 8 + 18px), 80dvh); }
        }