:root {
                --dark: #181412;
                --panel: #26201d;
                --panel2: #2e2622;
                --line: #4a3d36;
                --gold: #ffbe0b;
                --green: #06d6a0;
                --red: #ef476f;
                --blue: #118ab2;
                --purple: #c77dff;
        }

        * {
                box-sizing: border-box;
                user-select: none;
                -webkit-user-select: none;
                font-family: 'Kanit', 'Segoe UI', system-ui, sans-serif;
                -webkit-tap-highlight-color: transparent;
        }

        body {
                margin: 0;
                background: radial-gradient(circle at 50% 0%, #2a1f1a, #0d0b0a 70%);
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                height: 100dvh;
                overflow: hidden;
                color: #fff;
        }

        button {
                font-family: inherit;
        }

        #app {
                width: 100%;
                max-width: 430px;
                height: 100%;
                max-height: 900px;
                background: var(--dark);
                display: flex;
                flex-direction: column;
                position: relative;
                overflow: hidden;
                border: 4px solid #3a2e28;
                border-radius: 22px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, .9);
        }

        @media (max-width:440px) {
                #app {
                        border: none;
                        border-radius: 0;
                        max-height: none;
                }
        }

        #app.shake {
                animation: appShake .5s;
        }

        @keyframes appShake {

                0%,
                100% {
                        transform: none
                }

                20% {
                        transform: translate(-6px, 3px)
                }

                40% {
                        transform: translate(6px, -3px)
                }

                60% {
                        transform: translate(-4px, 2px)
                }

                80% {
                        transform: translate(4px, -1px)
                }
        }

        /* HUD */
        #hud {
                background: linear-gradient(180deg, #2b211c, #1c1613);
                padding: 8px 10px;
                display: flex;
                align-items: center;
                gap: 6px;
                border-bottom: 3px solid #4a382e;
                z-index: 20;
        }

        .hud-pill {
                display: flex;
                align-items: center;
                gap: 4px;
                background: rgba(0, 0, 0, .45);
                padding: 4px 10px;
                border-radius: 20px;
                border: 1.5px solid rgba(255, 255, 255, .15);
                font-weight: 800;
                font-size: 13px;
                white-space: nowrap;
                transition: transform .15s;
        }

        .hud-pill.bump {
                transform: scale(1.15);
        }

        .xp-wrap {
                flex: 1;
                background: #111;
                height: 10px;
                border-radius: 6px;
                overflow: hidden;
                border: 1px solid #444;
                min-width: 30px;
        }

        .xp-fill {
                height: 100%;
                background: linear-gradient(90deg, #ff9f1c, #ffbf69);
                width: 0;
                transition: width .3s;
        }

        .icon-btn {
                background: rgba(0, 0, 0, .45);
                border: 1.5px solid rgba(255, 255, 255, .15);
                border-radius: 50%;
                width: 30px;
                height: 30px;
                color: #fff;
                cursor: pointer;
                font-size: 14px;
                flex-shrink: 0;
        }

        #trend-bar {
                background: linear-gradient(90deg, #3a0ca3, #f72585);
                padding: 5px 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 8px;
                font-size: 12px;
                font-weight: 600;
                z-index: 15;
        }

        #ui-trend {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
        }

        .trend-btn {
                background: var(--gold);
                color: #000;
                border: none;
                padding: 4px 10px;
                border-radius: 12px;
                font-weight: 800;
                font-size: 11px;
                cursor: pointer;
                flex-shrink: 0;
        }

        #event-bar {
                display: none;
                background: repeating-linear-gradient(45deg, #ff006e 0 14px, #d90062 14px 28px);
                background-size: 40px 40px;
                animation: stripes 1s linear infinite;
                padding: 5px 10px;
                font-size: 12px;
                font-weight: 800;
                justify-content: space-between;
                gap: 8px;
                z-index: 15;
        }

        #event-bar.show {
                display: flex;
        }

        #evt-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
        }

        #evt-time {
                background: #000;
                color: var(--gold);
                border-radius: 8px;
                padding: 0 6px;
                flex-shrink: 0;
        }

        @keyframes stripes {
                to {
                        background-position: 40px 0;
                }
        }

        #viewport {
                flex: 1;
                position: relative;
                overflow: hidden;
        }

        .scene {
                display: none !important;
                width: 100%;
                height: 100%;
                position: absolute;
                inset: 0;
                flex-direction: column;
                overflow: hidden;
                z-index: 1;
        }

        .scene.active {
                display: flex !important;
                z-index: 5;
                animation: sceneIn .25s ease-out;
        }

        @keyframes sceneIn {
                from {
                        opacity: 0;
                        transform: translateY(8px);
                }

                to {
                        opacity: 1;
                        transform: none;
                }
        }

        /* ===== SHOP ===== */
        #shop-canvas {
                flex: 1;
                position: relative;
                overflow: hidden;
                transition: background .4s;
        }

        .floor-oak {
                background-color: #b5835a;
                background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 48px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 96px);
        }

        .floor-checker {
                background-color: #eee;
                background-image: conic-gradient(#2b2b2b 25%, #eee 0 50%, #2b2b2b 0 75%, #eee 0);
                background-size: 40px 40px;
        }

        .floor-terrazzo {
                background-color: #e9e2d6;
                background-image: radial-gradient(#e76f51 2px, transparent 3px), radial-gradient(#2a9d8f 2px, transparent 3px), radial-gradient(#264653 1.5px, transparent 2.5px);
                background-size: 37px 41px, 29px 33px, 23px 19px;
                background-position: 0 0, 11px 17px, 5px 9px;
        }

        .floor-carpet {
                background-color: #7b1e2a;
                background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255, 215, 140, .13) 0 4px, transparent 4px 18px);
        }

        .floor-neon {
                background-color: #14101f;
                background-image: linear-gradient(rgba(247, 37, 133, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 201, 240, .3) 1px, transparent 1px);
                background-size: 32px 32px;
        }

        .shade {
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 50% 45%, rgba(255, 230, 190, .16), rgba(0, 0, 0, .42));
                pointer-events: none;
                z-index: 1;
        }

        .top-wall {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 12%;
                min-height: 48px;
                border-bottom: 6px solid #1a1310;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
        }

        .wall-plain {
                background: #2d231e;
        }

        .wall-brick {
                background-color: #8a4430;
                background-image: linear-gradient(#5a2a1e 2px, transparent 2px), linear-gradient(90deg, #5a2a1e 2px, transparent 2px);
                background-size: 100% 14px, 28px 14px;
        }

        .wall-wood {
                background: repeating-linear-gradient(90deg, #5a3a25 0 18px, #3d2618 18px 20px);
        }

        .wall-flower {
                background-color: #e9a23b;
                background-image: radial-gradient(circle, #c1440e 5px, transparent 6px), radial-gradient(circle, #6b3e26 3px, transparent 4px);
                background-size: 26px 26px;
                background-position: 0 0, 13px 13px;
        }

        .wall-neon {
                background: linear-gradient(180deg, #240046, #3c096c);
                box-shadow: inset 0 -6px 18px #c77dff;
        }

        .neon-sign {
                color: #ff2a85;
                font-weight: 800;
                font-size: 13px;
                letter-spacing: 2px;
                text-shadow: 0 0 6px #ff2a85, 0 0 14px #ff2a85;
                border: 2px solid #ff2a85;
                box-shadow: 0 0 8px #ff2a85, inset 0 0 6px #ff2a85;
                padding: 1px 8px;
                border-radius: 6px;
                background: rgba(0, 0, 0, .4);
                animation: neonFlick 4s infinite;
        }

        @keyframes neonFlick {

                0%,
                92%,
                100% {
                        opacity: 1
                }

                93% {
                        opacity: .4
                }

                95% {
                        opacity: 1
                }

                96% {
                        opacity: .5
                }
        }

        #live-badge {
                position: absolute;
                right: 30%;
                top: 4px;
                background: #e63946;
                font-size: 9px;
                font-weight: 800;
                padding: 1px 6px;
                border-radius: 6px;
                animation: popBounce .5s infinite alternate;
                display: none;
        }

        .entrance-door {
                width: 26%;
                height: 12px;
                background: #5bc0be;
                border: 3px solid #1c2541;
                border-radius: 4px;
                position: absolute;
                top: calc(12% - 6px);
                left: 50%;
                transform: translateX(-50%);
                z-index: 3;
        }

        .door-mat {
                position: absolute;
                top: calc(12% + 10px);
                left: 50%;
                transform: translateX(-50%);
                width: 70px;
                height: 24px;
                background: #7f1d1d;
                border: 2px dashed #fca5a5;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 9px;
                font-weight: 800;
                color: #fecaca;
                z-index: 2;
        }

        .vintage-rug {
                position: absolute;
                top: 22%;
                bottom: 26%;
                left: 50%;
                transform: translateX(-50%);
                width: 15%;
                border-radius: 12px;
                background: repeating-linear-gradient(0deg, #9e2a2b 0 10px, #540b0e 10px 20px);
                border: 3px dotted #fff3b0;
                opacity: .8;
                z-index: 2;
                pointer-events: none;
        }

        #racks-layer,
        #customers-layer,
        #decor-layer {
                position: absolute;
                inset: 0;
        }

        #racks-layer {
                z-index: 4;
        }

        #decor-layer {
                z-index: 3;
                pointer-events: none;
        }

        #customers-layer {
                z-index: 10;
                pointer-events: none;
        }

        .rack-obj {
                position: absolute;
                width: 38%;
                height: 15%;
                min-height: 62px;
                cursor: pointer;
                border-radius: 10px;
                background: linear-gradient(180deg, rgba(40, 28, 22, .6), rgba(20, 14, 11, .8));
                border: 2px solid #8a6a4f;
                box-shadow: 0 8px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
                transition: transform .15s;
        }

        .rack-obj:active {
                transform: scale(.97);
        }

        .rack-obj.locked {
                background: rgba(0, 0, 0, .28);
                border: 2px dashed rgba(255, 255, 255, .35);
                box-shadow: none;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                color: #ddd;
                font-size: 10px;
                text-align: center;
        }

        .rack-pole {
                position: absolute;
                left: 6%;
                right: 6%;
                top: 9px;
                height: 5px;
                border-radius: 3px;
                background: linear-gradient(180deg, #f1f1f1, #8d99ae 60%, #4a4e69);
                box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
        }

        .rack-shirts-row {
                position: absolute;
                left: 6%;
                right: 6%;
                top: 6px;
                bottom: 14px;
                display: flex;
                justify-content: space-around;
                align-items: flex-start;
        }

        .mini-shirt-wrap {
                width: 23%;
                max-width: 36px;
                position: relative;
                transform-origin: 50% 0;
                animation: sway 2.4s ease-in-out infinite alternate;
                padding-top: 5px;
        }

        .mini-shirt-wrap:nth-child(2n) {
                animation-delay: -1.1s;
        }

        .mini-shirt-wrap::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 7px;
                height: 7px;
                border: 1.5px solid #ddd;
                border-bottom: none;
                border-radius: 6px 6px 0 0;
                transform: translateX(-50%);
        }

        .mini-shirt-wrap svg {
                display: block;
                width: 100%;
                height: auto;
                aspect-ratio: 1;
        }

        .mini-shirt-wrap.t3 svg {
                filter: drop-shadow(0 0 3px #c77dff);
        }

        .mini-shirt-wrap.t4 svg {
                filter: drop-shadow(0 0 4px #ffbe0b);
        }

        @keyframes sway {
                0% {
                        transform: rotate(-4deg)
                }

                100% {
                        transform: rotate(4deg)
                }
        }

        .rack-empty {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                color: #ccc;
                padding-top: 8px;
        }

        .rack-info {
                position: absolute;
                bottom: 1px;
                left: 6px;
                right: 6px;
                display: flex;
                justify-content: space-between;
                font-size: 9px;
                color: #e9d8a6;
                font-weight: 600;
        }

        .counter-area {
                position: absolute;
                bottom: 3%;
                right: 3%;
                width: 34%;
                height: 13%;
                min-height: 50px;
                background: linear-gradient(135deg, #5c3a21, #3b2313);
                border: 3px solid #221309;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
                padding-right: 10px;
                z-index: 4;
                box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
        }

        .owner-sprite {
                position: absolute;
                bottom: calc(3% + 46px);
                right: 12%;
                width: 44px;
                height: 44px;
                z-index: 4;
                animation: bob 1.2s ease-in-out infinite alternate;
        }

        .customer-sprite {
                position: absolute;
                width: 46px;
                height: 46px;
                transition: top 1.25s ease-in-out, left 1.25s ease-in-out, opacity .5s;
                cursor: pointer;
                pointer-events: auto;
        }

        .customer-sprite.walking .body {
                animation: bob .3s ease-in-out infinite alternate;
        }

        .customer-sprite.waiting .body {
                animation: bob 1s ease-in-out infinite alternate;
        }

        @keyframes bob {
                from {
                        transform: translateY(0)
                }

                to {
                        transform: translateY(-3px)
                }
        }

        .cust-tag {
                position: absolute;
                bottom: -2px;
                right: -6px;
                font-size: 15px;
                filter: drop-shadow(0 1px 1px #000);
        }

        .chat-pop {
                position: absolute;
                top: -28px;
                left: 50%;
                transform: translateX(-50%);
                background: var(--gold);
                color: #000;
                font-weight: 800;
                font-size: 11px;
                padding: 2px 8px;
                border-radius: 14px;
                border: 2px solid #000;
                white-space: nowrap;
                animation: popBounce .6s infinite alternate;
        }

        @keyframes popBounce {
                from {
                        transform: translateX(-50%) scale(1)
                }

                to {
                        transform: translateX(-50%) scale(1.12)
                }
        }

        .cust-bubble {
                position: absolute;
                top: -26px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 18px;
                background: #fff;
                border-radius: 12px;
                padding: 0 4px;
                border: 2px solid #000;
                animation: bubbleIn .3s;
        }

        @keyframes bubbleIn {
                from {
                        transform: translateX(-50%) scale(0)
                }
        }

        .wait-bar {
                position: absolute;
                bottom: -8px;
                left: 4px;
                right: 4px;
                height: 4px;
                background: rgba(0, 0, 0, .5);
                border-radius: 2px;
                overflow: hidden;
        }

        .wait-bar i {
                display: block;
                height: 100%;
                background: var(--green);
                width: 100%;
        }

        .decor-item {
                position: absolute;
                font-size: 30px;
                line-height: 1;
                filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5));
        }

        .dc-guitar,
        .dc-tv {
                font-size: 24px;
                z-index: 3;
        }

        .dc-tv span {
                display: inline-block;
                animation: tvGlow 1.5s infinite alternate;
        }

        @keyframes tvGlow {
                to {
                        filter: drop-shadow(0 0 8px #4cc9f0);
                }
        }

        .dc-cat span {
                display: inline-block;
                animation: catWalk 6s ease-in-out infinite;
        }

        @keyframes catWalk {

                0%,
                100% {
                        transform: translateX(0) scaleX(1)
                }

                45% {
                        transform: translateX(30px) scaleX(1)
                }

                50% {
                        transform: translateX(30px) scaleX(-1)
                }

                95% {
                        transform: translateX(0) scaleX(-1)
                }
        }

        .dc-disco {
                transform: translateX(-50%);
                z-index: 6;
                animation: discoSwing 3s ease-in-out infinite alternate;
                transform-origin: 50% -200px;
        }

        .dc-disco::before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 100%;
                width: 1px;
                height: 300px;
                background: #bbb;
        }

        @keyframes discoSwing {
                from {
                        transform: translateX(-50%) rotate(-3deg)
                }

                to {
                        transform: translateX(-50%) rotate(3deg)
                }
        }

        #disco-lights {
                position: absolute;
                inset: 0;
                z-index: 6;
                pointer-events: none;
                display: none;
                mix-blend-mode: screen;
                background: radial-gradient(circle at 20% 30%, rgba(255, 0, 110, .3) 0 14px, transparent 16px), radial-gradient(circle at 70% 60%, rgba(76, 201, 240, .3) 0 12px, transparent 14px), radial-gradient(circle at 40% 80%, rgba(255, 190, 11, .3) 0 12px, transparent 14px), radial-gradient(circle at 85% 25%, rgba(6, 214, 160, .3) 0 10px, transparent 12px);
                animation: discoMove 5s linear infinite;
        }

        @keyframes discoMove {
                0% {
                        transform: translate(0, 0)
                }

                25% {
                        transform: translate(20px, 10px)
                }

                50% {
                        transform: translate(-10px, 25px)
                }

                75% {
                        transform: translate(-20px, -5px)
                }

                100% {
                        transform: translate(0, 0)
                }
        }

        .neon-open {
                font-size: 11px;
                font-weight: 800;
                color: #4cc9f0;
                border: 2px solid #4cc9f0;
                border-radius: 6px;
                padding: 0 4px;
                text-shadow: 0 0 6px #4cc9f0;
                box-shadow: 0 0 8px #4cc9f0;
                background: rgba(0, 0, 0, .5);
                animation: neonFlick 3s infinite;
        }

        .manq {
                width: 40px;
                position: relative;
        }

        .manq-shirt {
                width: 40px;
                height: 40px;
        }

        .manq-stand {
                width: 4px;
                height: 10px;
                background: #333;
                margin: -4px auto 0;
                border-bottom: 4px solid #222;
        }

        .dc-record .note {
                position: absolute;
                font-size: 14px;
                left: 20px;
                top: -6px;
                animation: noteUp 2s infinite;
        }

        @keyframes noteUp {
                from {
                        transform: translateY(0);
                        opacity: 1
                }

                to {
                        transform: translateY(-24px) translateX(8px);
                        opacity: 0
                }
        }

        .dc-arcade span {
                display: inline-block;
                animation: arcadeBlink 1s steps(2) infinite;
        }

        @keyframes arcadeBlink {
                50% {
                        filter: drop-shadow(0 0 8px #f72585);
                }
        }

        #weather-layer {
                position: absolute;
                inset: 0;
                z-index: 8;
                pointer-events: none;
        }

        #weather-layer.rain {
                background: linear-gradient(rgba(20, 30, 60, .35), rgba(20, 30, 60, .35)), repeating-linear-gradient(105deg, rgba(200, 220, 255, .35) 0 1px, transparent 1px 13px);
                background-size: 100% 100%, 80px 80px;
                animation: rainFall .4s linear infinite;
        }

        @keyframes rainFall {
                to {
                        background-position: 0 0, -20px 80px;
                }
        }

        #weather-layer.market {
                box-shadow: inset 0 0 40px rgba(255, 190, 11, .5);
        }

        #shop-dock {
                background: #1c1613;
                border-top: 3px solid #3a2e28;
                padding: 6px 10px 8px;
        }

        .dock-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 11px;
                color: #c9ada7;
                margin-bottom: 4px;
                gap: 6px;
        }

        .chip-btn {
                background: #3a2e28;
                color: #fff;
                border: 1.5px solid #6b5546;
                border-radius: 12px;
                padding: 2px 10px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
        }

        .dock-row {
                display: flex;
                gap: 8px;
                align-items: center;
                height: 60px;
        }

        .dock-scroll {
                flex: 1;
                display: flex;
                gap: 6px;
                overflow-x: auto;
                align-items: center;
                height: 100%;
                scrollbar-width: none;
        }

        .dock-item {
                min-width: 52px;
                height: 56px;
                background: #2d241f;
                border-radius: 10px;
                border: 2px solid #55443a;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                padding: 2px;
                transition: transform .12s;
        }

        .dock-item:active {
                transform: scale(.92);
        }

        .dock-item.t2 {
                border-color: #0096c7;
        }

        .dock-item.t3 {
                border-color: var(--purple);
                box-shadow: 0 0 8px rgba(199, 125, 255, .5);
        }

        .dock-item.t4 {
                border-color: var(--gold);
                box-shadow: 0 0 10px rgba(255, 190, 11, .6);
        }

        .dock-svg {
                width: 32px;
                height: 32px;
        }

        .dock-item span {
                font-size: 9px;
                font-weight: 800;
                color: var(--gold);
        }

        .btn-hang-all {
                background: var(--green);
                color: #000;
                border: none;
                border-radius: 12px;
                padding: 8px 10px;
                font-weight: 800;
                font-size: 11px;
                cursor: pointer;
                flex-shrink: 0;
                box-shadow: 0 3px 0 #04936e;
                line-height: 1.2;
        }

        /* ===== WAREHOUSE ===== */
        #warehouse-scene {
                background: radial-gradient(circle at top, #2b2d42, #14151f);
                padding: 12px;
                overflow-y: auto;
                gap: 10px;
        }

        .wh-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 8px;
        }

        .wh-title {
                font-weight: 800;
                font-size: 16px;
        }

        .wh-sub {
                font-size: 11px;
                color: #aab;
        }

        .wh-sale {
                display: none;
                background: var(--red);
                font-weight: 800;
                font-size: 12px;
                padding: 4px 10px;
                border-radius: 10px;
                animation: popScale .5s infinite alternate;
        }

        @keyframes popScale {
                to {
                        transform: scale(1.1);
                }
        }

        .sack-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
        }

        .sack-visual-card {
                background: linear-gradient(135deg, #32354a, #212333);
                border: 2.5px solid #5c6280;
                border-radius: 18px;
                padding: 12px;
                display: flex;
                align-items: center;
                gap: 12px;
                flex-shrink: 0;
        }

        .sack-visual-card.blue-tier {
                border-color: #0096c7;
        }

        .sack-visual-card.jp-tier {
                border-color: #c1121f;
                background: linear-gradient(135deg, #3d2a33, #1f1520);
        }

        .sack-visual-card.gold-tier {
                background: linear-gradient(135deg, #4f3915, #261b08);
                border-color: var(--gold);
                box-shadow: 0 0 18px rgba(255, 190, 11, .25);
        }

        .sack-visual-card.locked {
                opacity: .55;
        }

        .sack-art {
                width: 84px;
                height: 84px;
                flex-shrink: 0;
                animation: sackIdle 2.4s ease-in-out infinite;
                transform-origin: 50% 90%;
        }

        @keyframes sackIdle {

                0%,
                100% {
                        transform: scale(1, 1)
                }

                50% {
                        transform: scale(1.04, .97)
                }
        }

        .sack-meta {
                flex: 1;
                min-width: 0;
        }

        .sack-title {
                font-size: 15px;
                font-weight: 800;
        }

        .sack-sub {
                font-size: 11px;
                color: #bbb;
                margin-bottom: 4px;
        }

        .odds-row {
                display: flex;
                gap: 4px;
                margin-bottom: 8px;
                flex-wrap: wrap;
        }

        .odds-pill {
                font-size: 10px;
                padding: 1px 6px;
                border-radius: 8px;
                font-weight: 600;
                background: rgba(0, 0, 0, .45);
                border: 1px solid;
        }

        .btn-main {
                width: 100%;
                background: linear-gradient(90deg, #ff9f1c, #f77f00);
                color: #000;
                border: none;
                padding: 10px;
                border-radius: 10px;
                font-weight: 800;
                font-size: 14px;
                cursor: pointer;
                box-shadow: 0 4px 0 #b55900;
                transition: transform .1s;
        }

        .btn-main:active {
                transform: translateY(2px);
                box-shadow: none;
        }

        .btn-main:disabled {
                filter: grayscale(1);
                opacity: .6;
                cursor: not-allowed;
        }

        .btn-main s {
                opacity: .6;
                font-size: 11px;
        }

        /* ===== LAUNDRY ===== */
        #laundry-scene {
                background: linear-gradient(180deg, #bde0fe, #e9d8a6);
                color: #1d3557;
                padding: 10px;
                gap: 10px;
                overflow-y: auto;
        }

        .sky-box {
                position: relative;
                flex-shrink: 0;
                border-radius: 16px;
                padding: 8px 10px 8px;
                background: linear-gradient(180deg, #4cc9f0, #a0e7ff);
                border: 3px solid #0077b6;
                overflow: hidden;
                transition: background .5s;
        }

        .sky-box.rain {
                background: linear-gradient(180deg, #5c677d, #8d99ae);
        }

        .sky-box.rain::after {
                content: '';
                position: absolute;
                inset: 0;
                background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 12px);
                background-size: 60px 60px;
                animation: rainFall .4s linear infinite;
                pointer-events: none;
        }

        .sun {
                position: absolute;
                top: -18px;
                right: -14px;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                background: radial-gradient(circle, #fff3b0, #ffbe0b 60%, #fb8500);
                box-shadow: 0 0 30px #ffbe0b;
                animation: sunPulse 3s ease-in-out infinite;
                transition: opacity .5s;
        }

        .sky-box.sunny .sun {
                box-shadow: 0 0 60px 20px #ffbe0b;
        }

        .sky-box.rain .sun {
                opacity: .1;
        }

        @keyframes sunPulse {
                50% {
                        transform: scale(1.08);
                }
        }

        .cloud {
                position: absolute;
                top: 26px;
                left: -50px;
                font-size: 28px;
                animation: cloudMove 20s linear infinite;
                opacity: .9;
        }

        @keyframes cloudMove {
                to {
                        left: 110%;
                }
        }

        .sky-head {
                position: relative;
                z-index: 2;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
                font-weight: 800;
                color: #03045e;
                gap: 6px;
        }

        .btn-fan {
                background: #fff;
                border: 2px solid #0077b6;
                color: #0077b6;
                border-radius: 10px;
                font-size: 11px;
                font-weight: 800;
                padding: 3px 8px;
                cursor: pointer;
        }

        .clothesline {
                position: relative;
                height: 92px;
                margin-top: 4px;
        }

        .line-rope {
                position: absolute;
                left: 0;
                right: 0;
                top: 10px;
                height: 3px;
                background: #6b4f3a;
                border-radius: 2px;
        }

        .wet-row {
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: space-around;
                align-items: flex-start;
                padding-top: 4px;
        }

        .wet-shirt-item {
                width: 15%;
                max-width: 56px;
                position: relative;
                transform-origin: 50% 6px;
                animation: windBlow 1.4s ease-in-out infinite alternate;
        }

        .wet-shirt-item:nth-child(2n) {
                animation-delay: -.7s;
        }

        .wet-shirt-item::after {
                content: '💧';
                position: absolute;
                top: 58%;
                left: 42%;
                font-size: 10px;
                animation: drip 1s infinite;
        }

        @keyframes windBlow {
                0% {
                        transform: rotate(-6deg)
                }

                100% {
                        transform: rotate(8deg)
                }
        }

        @keyframes drip {
                0% {
                        transform: translateY(0);
                        opacity: 1
                }

                100% {
                        transform: translateY(14px);
                        opacity: 0
                }
        }

        .pin {
                position: absolute;
                top: 2px;
                left: 50%;
                width: 6px;
                height: 11px;
                background: #e76f51;
                border: 1px solid #111;
                border-radius: 2px;
                transform: translateX(-50%);
                z-index: 2;
        }

        .wet-svg {
                aspect-ratio: 1;
                margin-top: 4px;
        }

        .dry-bar {
                height: 5px;
                background: rgba(0, 0, 0, .25);
                border-radius: 3px;
                overflow: hidden;
                margin-top: 1px;
        }

        .dry-bar i {
                display: block;
                height: 100%;
                width: 0;
                background: linear-gradient(90deg, #ffbe0b, #06d6a0);
                transition: width .25s linear;
        }

        .rope-empty,
        .more-wet {
                font-size: 11px;
                color: #03045e;
                margin-top: 30px;
                font-weight: 600;
        }

        .wash-basin-box {
                flex: 1;
                min-height: 340px;
                background: #fffdf7;
                border-radius: 20px;
                border: 4px solid #0077b6;
                padding: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
        }

        #wash-active-state {
                width: 100%;
                flex-direction: column;
                align-items: center;
                gap: 2px;
        }

        .wash-head {
                width: 100%;
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                font-weight: 800;
                color: #0077b6;
        }

        #combo-badge {
                color: #f72585;
        }

        .basin {
                position: relative;
                width: 220px;
                height: 150px;
                cursor: pointer;
                touch-action: manipulation;
        }

        .basin::before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 104px;
                border-radius: 50%/42%;
                background: linear-gradient(180deg, #48cae4, #0077b6);
                border: 4px solid #023e8a;
                box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .25), 0 8px 10px rgba(0, 0, 0, .2);
        }

        .basin-water {
                position: absolute;
                left: 16px;
                right: 16px;
                top: 52px;
                height: 54px;
                border-radius: 50%;
                background: radial-gradient(ellipse at 50% 40%, #caf0f8, #90e0ef 60%, #48cae4);
                border: 3px solid #0096c7;
                overflow: hidden;
        }

        .basin-water::after {
                content: '';
                position: absolute;
                inset: -20%;
                background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 8px, rgba(255, 255, 255, .35) 9px 10px);
                animation: ripple 2s linear infinite;
        }

        @keyframes ripple {
                from {
                        transform: scale(.9)
                }

                to {
                        transform: scale(1.15)
                }
        }

        #wash-shirt-holder {
                position: absolute;
                left: 50%;
                top: 0;
                width: 116px;
                height: 116px;
                transform: translateX(-50%);
                z-index: 2;
                transition: transform .4s cubic-bezier(.5, -.3, .6, 1), opacity .4s;
        }

        #wash-shirt-holder.fly-rope {
                transform: translate(-50%, -240px) scale(.3) rotate(12deg);
                opacity: 0;
        }

        #wash-shirt-holder.slide-in {
                animation: slideIn .45s cubic-bezier(.2, 1.4, .4, 1);
        }

        @keyframes slideIn {
                from {
                        transform: translate(-50%, 40px) scale(.6);
                        opacity: 0
                }

                to {
                        transform: translate(-50%, 0) scale(1);
                        opacity: 1
                }
        }

        #wash-svg-target {
                width: 100%;
                height: 100%;
        }

        .scrub-anim #wash-svg-target {
                animation: shakeScrub .45s ease-in-out;
        }

        @keyframes shakeScrub {

                0%,
                100% {
                        transform: rotate(0) scale(1)
                }

                25% {
                        transform: rotate(-10deg) scale(1.08)
                }

                50% {
                        transform: rotate(10deg) scale(1.08)
                }

                75% {
                        transform: rotate(-6deg) scale(1.04)
                }
        }

        .dirt {
                transition: opacity .45s;
        }

        .cleaning .dirt {
                opacity: 0;
        }

        .bubble-layer {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 3;
        }

        .soap-bubble {
                position: absolute;
                font-size: 24px;
                animation: popUp .8s ease-out forwards;
        }

        @keyframes popUp {
                0% {
                        transform: scale(.3);
                        opacity: 1
                }

                100% {
                        transform: scale(1.3) translateY(-50px);
                        opacity: 0
                }
        }

        #wash-result-banner {
                font-size: 12px;
                font-weight: 800;
                min-height: 18px;
                text-align: center;
        }

        .timing-bar {
                width: 92%;
                height: 24px;
                background: #1d3557;
                border-radius: 12px;
                position: relative;
                overflow: hidden;
                margin: 6px 0;
                border: 2px solid #000;
        }

        .tz {
                position: absolute;
                top: 0;
                height: 100%;
        }

        .tz.good {
                background: #2a9d8f;
        }

        .tz.perfect {
                background: var(--green);
                box-shadow: 0 0 10px var(--green);
        }

        .timing-cursor {
                position: absolute;
                left: 0;
                top: 0;
                width: 10px;
                height: 100%;
                background: var(--gold);
                border: 1.5px solid #000;
                border-radius: 3px;
        }

        .wash-btns {
                display: flex;
                gap: 8px;
                width: 100%;
        }

        .pulse-btn {
                animation: pulseHighlight .8s infinite alternate;
        }

        @keyframes pulseHighlight {
                from {
                        box-shadow: 0 0 6px var(--gold)
                }

                to {
                        box-shadow: 0 0 16px #f72585
                }
        }

        /* ===== DECOR / UPGRADE ===== */
        #decor-scene,
        #upgrade-scene {
                background: #1f1a17;
                padding: 12px;
                overflow-y: auto;
                gap: 10px;
        }

        .panel-head {
                background: linear-gradient(135deg, #3a0ca3, #7209b7);
                border-radius: 16px;
                padding: 10px 12px;
                flex-shrink: 0;
        }

        .panel-head b {
                color: var(--gold);
                font-size: 22px;
        }

        .perks {
                font-size: 11px;
                color: #e0c3fc;
                margin-top: 2px;
        }

        .tabs {
                display: flex;
                gap: 6px;
                flex-shrink: 0;
        }

        .tab {
                flex: 1;
                background: #2e2622;
                color: #bbb;
                border: 2px solid var(--line);
                border-radius: 12px;
                padding: 7px 4px;
                font-weight: 800;
                font-size: 12px;
                cursor: pointer;
        }

        .tab.active {
                background: var(--gold);
                color: #000;
                border-color: var(--gold);
        }

        .decor-grid,
        .upg-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
        }

        .dc-card,
        .upg-tile {
                background: var(--panel2);
                border: 2px solid var(--line);
                border-radius: 14px;
                padding: 10px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
        }

        .dc-card.placed {
                border-color: var(--green);
                box-shadow: 0 0 10px rgba(6, 214, 160, .3);
        }

        .dc-prev {
                width: 56px;
                height: 56px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                background: #1a1512;
                border: 2px solid #000;
                overflow: hidden;
        }

        .dc-name,
        .upg-name {
                font-size: 12px;
                font-weight: 800;
        }

        .dc-style,
        .upg-txt {
                font-size: 11px;
                color: var(--gold);
        }

        .small-btn {
                width: 100%;
                border: none;
                border-radius: 10px;
                padding: 7px;
                font-weight: 800;
                font-size: 12px;
                cursor: pointer;
                background: var(--gold);
                color: #000;
                margin-top: auto;
        }

        .small-btn.ghost {
                background: #555;
                color: #fff;
        }

        .small-btn.ok {
                background: var(--green);
        }

        .small-btn:disabled {
                opacity: .55;
                cursor: default;
        }

        .sec-title {
                font-weight: 800;
                font-size: 14px;
                color: var(--gold);
                margin-top: 4px;
                flex-shrink: 0;
        }

        .quest-row {
                background: var(--panel2);
                border: 2px solid var(--line);
                border-radius: 14px;
                padding: 8px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                flex-shrink: 0;
        }

        .quest-row.done {
                border-color: var(--green);
        }

        .q-bar {
                height: 5px;
                background: #111;
                border-radius: 3px;
                overflow: hidden;
                margin-top: 3px;
        }

        .q-bar i {
                display: block;
                height: 100%;
                background: var(--green);
        }

        .museum-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
                flex-shrink: 0;
        }

        .mus-card {
                background: var(--panel2);
                border: 2px solid var(--line);
                border-radius: 12px;
                padding: 6px;
                text-align: center;
                font-size: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
        }

        .mus-card.got {
                border-color: var(--gold);
                box-shadow: 0 0 10px rgba(255, 190, 11, .3);
        }

        .mus-card .ms {
                width: 52px;
                height: 52px;
        }

        .mus-card.no .ms {
                filter: brightness(0) opacity(.45);
        }

        .mus-card button {
                border: none;
                border-radius: 8px;
                background: var(--gold);
                font-weight: 800;
                font-size: 10px;
                padding: 3px 6px;
                cursor: pointer;
        }

        .seg.repair {
                background: #3a2e28;
                color: var(--gold);
                border-color: var(--gold);
        }

        .rv-front.t5 {
                --tc: #ff4d6d;
                box-shadow: inset 0 0 24px rgba(255, 77, 109, .9)
        }

        .t5 .rv-glow {
                opacity: .75;
                background: conic-gradient(#ff4d6d, #7209b7, #4cc9f0, #ffbe0b, #ff4d6d);
                animation: spin 1.6s linear infinite;
        }

        .mini-shirt-wrap.t5 svg {
                filter: drop-shadow(0 0 5px #ff4d6d);
        }

        .dock-item.t5 {
                border-color: #ff4d6d;
                box-shadow: 0 0 12px rgba(255, 77, 109, .7);
        }

        .extra-row {
                background: var(--panel2);
                border: 2px solid var(--line);
                border-radius: 14px;
                padding: 8px 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
        }

        .extra-row.on {
                border-color: var(--green);
        }

        .extra-row .ico {
                font-size: 26px;
        }

        .extra-row .txt {
                flex: 1;
                min-width: 0;
                font-size: 11px;
                color: #bbb;
        }

        .extra-row .txt b {
                display: block;
                color: #fff;
                font-size: 13px;
        }

        .extra-row .small-btn {
                width: auto;
                padding: 6px 10px;
                margin: 0;
        }

        .prestige-box {
                background: linear-gradient(135deg, #7209b7, #f72585);
                border-radius: 16px;
                padding: 12px;
                text-align: center;
                flex-shrink: 0;
        }

        .auc-sec {
                background: rgba(0, 0, 0, .3);
                border: 2px dashed #ff4d6d;
                border-radius: 16px;
                padding: 10px;
                flex-shrink: 0;
        }

        .auc-list {
                display: flex;
                gap: 6px;
                overflow-x: auto;
                margin-top: 6px;
        }

        .auc-item {
                min-width: 70px;
                background: #2a2320;
                border-radius: 10px;
                padding: 4px;
                text-align: center;
                font-size: 10px;
                cursor: pointer;
                border: 2px solid #555;
        }

        .auc-bid {
                font-size: 30px;
                font-weight: 800;
                color: var(--gold);
                display: inline-block;
        }

        .auc-log {
                height: 84px;
                overflow: hidden;
                font-size: 12px;
                color: #ddd;
                display: flex;
                flex-direction: column-reverse;
                gap: 2px;
                margin: 6px 0;
        }

        .stats-box {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
                flex-shrink: 0;
        }

        .stat {
                background: var(--panel2);
                border-radius: 12px;
                padding: 8px;
                font-size: 11px;
                color: #bbb;
        }

        .stat b {
                display: block;
                color: #fff;
                font-size: 15px;
        }

        /* NAV */
        #nav {
                display: flex;
                background: #14100e;
                border-top: 3px solid #3a2e28;
                height: 64px;
                z-index: 20;
                flex-shrink: 0;
        }

        .nav-item {
                flex: 1;
                background: none;
                border: none;
                color: #7f726d;
                font-size: 10px;
                font-weight: 800;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;
        }

        .nav-item.active {
                color: var(--gold);
                background: rgba(255, 190, 11, .08);
        }

        .nav-item .ico {
                font-size: 21px;
                margin-bottom: 1px;
                transition: transform .2s;
        }

        .nav-item.active .ico {
                transform: translateY(-2px) scale(1.12);
        }

        .nav-badge {
                position: absolute;
                top: 5px;
                right: calc(50% - 22px);
                background: var(--red);
                color: #fff;
                font-size: 10px;
                font-weight: 800;
                padding: 0 5px;
                border-radius: 10px;
                display: none;
        }

        /* MODALS */
        .modal {
                display: none;
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, .88);
                z-index: 60;
                align-items: center;
                justify-content: center;
                padding: 12px;
        }

        .modal.show {
                display: flex;
                animation: fadeIn .2s;
        }

        @keyframes fadeIn {
                from {
                        opacity: 0;
                }
        }

        .card-modal {
                background: linear-gradient(180deg, #2b231f, #1a1512);
                width: 100%;
                max-width: 380px;
                border-radius: 22px;
                border: 3px solid var(--gold);
                padding: 14px;
                text-align: center;
                box-shadow: 0 20px 50px rgba(0, 0, 0, .9);
                animation: modalPop .3s cubic-bezier(.2, 1.4, .4, 1);
        }

        @keyframes modalPop {
                from {
                        transform: scale(.8);
                        opacity: 0;
                }
        }

        .tier-badge {
                display: inline-block;
                padding: 2px 10px;
                border-radius: 20px;
                font-size: 11px;
                font-weight: 800;
                color: #fff;
        }

        .t-0 {
                background: #6c757d
        }

        .t-1 {
                background: #2a9d8f
        }

        .t-2 {
                background: #0096c7
        }

        .t-3 {
                background: #9d4edd
        }

        .t-4 {
                background: linear-gradient(90deg, #ffbe0b, #fb5607, #ff006e)
        }

        .t-5 {
                background: linear-gradient(90deg, #ff4d6d, #7209b7, #4cc9f0);
                box-shadow: 0 0 8px #ff4d6d
        }

        .chips {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                justify-content: center;
                margin: 3px 0;
        }

        .chip {
                font-size: 10px;
                font-weight: 600;
                background: rgba(255, 255, 255, .1);
                border: 1px solid rgba(255, 255, 255, .2);
                border-radius: 8px;
                padding: 1px 6px;
        }

        .chip.gold {
                color: var(--gold);
                border-color: var(--gold);
        }

        .chip.hot {
                color: #ff7b9c;
                border-color: #ff7b9c;
        }

        /* sack open */
        #modal-sack {
                background: radial-gradient(circle at 50% 40%, #3b2f2a, #0b0807 75%);
                flex-direction: column;
        }

        .sack-stage {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                width: 100%;
        }

        .sack-hint {
                font-weight: 800;
                font-size: 15px;
                color: var(--gold);
                text-align: center;
                animation: popScale .7s infinite alternate;
        }

        .sack-big {
                position: relative;
                width: 260px;
                height: 260px;
                touch-action: none;
                cursor: none;
        }

        .sack-big.drop {
                animation: sackDrop .6s cubic-bezier(.3, 1.5, .5, 1);
        }

        @keyframes sackDrop {
                from {
                        transform: translateY(-300px) rotate(-10deg);
                }
        }

        .sack-big.wiggle {
                animation: wiggle .18s;
        }

        @keyframes wiggle {
                50% {
                        transform: rotate(2deg) scale(1.02);
                }
        }

        .sack-half {
                position: absolute;
                inset: 0;
                transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .7s;
        }

        .sack-half.top {
                clip-path: inset(0 0 45% 0);
        }

        .sack-half.bot {
                clip-path: inset(55% 0 0 0);
        }

        .sack-big.burst .sack-half.top {
                transform: translateY(-130px) rotate(-14deg);
                opacity: 0;
        }

        .sack-big.burst .sack-half.bot {
                transform: translateY(70px) scale(1.08);
                opacity: 0;
        }

        .cut-svg {
                position: absolute;
                inset: 0;
                pointer-events: none;
        }

        .cut-guide {
                stroke: #fff;
                stroke-width: .8;
                stroke-dasharray: 2 2;
                opacity: .8;
                animation: dashMove 1s linear infinite;
        }

        @keyframes dashMove {
                to {
                        stroke-dashoffset: -8;
                }
        }

        .cut-seg {
                stroke: #1a0f08;
                stroke-width: 2.6;
                stroke-linecap: round;
                opacity: 0;
                transition: opacity .1s;
        }

        .cut-seg.on {
                opacity: 1;
        }

        .knife {
                position: absolute;
                font-size: 42px;
                pointer-events: none;
                transform: translate(-25%, -80%) rotate(-25deg);
                opacity: 0;
                transition: opacity .2s;
                filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6));
        }

        .cut-progress {
                width: 220px;
                height: 10px;
                background: #000;
                border-radius: 6px;
                overflow: hidden;
                border: 1px solid #555;
        }

        #cut-fill {
                height: 100%;
                width: 0;
                background: linear-gradient(90deg, #ef476f, #ffbe0b);
                transition: width .1s;
        }

        .ghost-btn {
                background: transparent;
                border: 2px solid #777;
                color: #ddd;
                border-radius: 12px;
                padding: 7px 16px;
                font-weight: 800;
                cursor: pointer;
                font-size: 12px;
        }

        .reveal-stage {
                width: 100%;
                max-width: 400px;
                display: flex;
                flex-direction: column;
                gap: 8px;
        }

        .rv-head {
                display: flex;
                justify-content: space-between;
                font-weight: 800;
                font-size: 13px;
                color: var(--gold);
        }

        .reveal-grid {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 7px;
                perspective: 800px;
        }

        .rv-card {
                aspect-ratio: 3/4;
                position: relative;
                cursor: pointer;
                animation: flyIn .55s cubic-bezier(.2, 1.3, .4, 1) backwards;
        }

        @keyframes flyIn {
                0% {
                        transform: translateY(-160px) scale(.2) rotate(var(--r));
                        opacity: 0;
                }

                100% {
                        transform: none;
                        opacity: 1;
                }
        }

        .rv-shake {
                position: absolute;
                inset: 0;
        }

        .rv-card.charging .rv-shake {
                animation: charge .5s;
        }

        @keyframes charge {

                0%,
                100% {
                        transform: none
                }

                20% {
                        transform: translateX(-3px) rotate(-3deg)
                }

                40% {
                        transform: translateX(3px) rotate(3deg)
                }

                60% {
                        transform: translateX(-3px) rotate(-2deg) scale(1.06)
                }

                80% {
                        transform: translateX(3px) rotate(2deg) scale(1.1)
                }
        }

        .rv-card.charging.c3 .rv-back {
                box-shadow: 0 0 22px #c77dff;
        }

        .rv-card.charging.c4 .rv-back {
                box-shadow: 0 0 28px #ffbe0b;
        }

        .rv-inner {
                position: absolute;
                inset: 0;
                transform-style: preserve-3d;
                transition: transform .6s cubic-bezier(.34, 1.4, .5, 1);
        }

        .rv-card.flipped .rv-inner {
                transform: rotateY(180deg);
        }

        .rv-face {
                position: absolute;
                inset: 0;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
        }

        .rv-back {
                background-color: #6b5440;
                background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 5px);
                border: 2px solid #3a2a1c;
                transition: box-shadow .2s;
        }

        .rv-back svg {
                filter: saturate(.4) brightness(.85);
        }

        .rv-front {
                transform: rotateY(180deg);
                background: radial-gradient(circle at 50% 40%, #3a302b, #1d1714);
                border: 2px solid var(--tc, #555);
        }

        .rv-front.t0 {
                --tc: #6c757d
        }

        .rv-front.t1 {
                --tc: #2a9d8f
        }

        .rv-front.t2 {
                --tc: #0096c7;
                box-shadow: inset 0 0 12px rgba(0, 150, 199, .5)
        }

        .rv-front.t3 {
                --tc: #c77dff;
                box-shadow: inset 0 0 18px rgba(199, 125, 255, .7)
        }

        .rv-front.t4 {
                --tc: #ffbe0b;
                box-shadow: inset 0 0 20px rgba(255, 190, 11, .8)
        }

        .rv-glow {
                position: absolute;
                inset: -60%;
                opacity: 0;
        }

        .t3 .rv-glow {
                opacity: .45;
                background: conic-gradient(transparent, #c77dff, transparent 30%, #c77dff 50%, transparent 70%);
                animation: spin 4s linear infinite;
        }

        .t4 .rv-glow {
                opacity: .6;
                background: conic-gradient(#ffbe0b, #ff006e, #3a86ff, #06d6a0, #ffbe0b);
                animation: spin 2.5s linear infinite;
        }

        @keyframes spin {
                to {
                        transform: rotate(360deg);
                }
        }

        .rv-shirt {
                position: relative;
                width: 82%;
                aspect-ratio: 1;
                z-index: 1;
        }

        .rv-price {
                position: relative;
                z-index: 1;
                font-size: 10px;
                font-weight: 800;
                background: rgba(0, 0, 0, .6);
                padding: 0 5px;
                border-radius: 6px;
        }

        .rv-card.sel {
                outline: 3px solid #fff;
                outline-offset: 2px;
                border-radius: 10px;
        }

        .rv-card.trash .rv-front {
                filter: grayscale(.85) brightness(.55);
        }

        .rv-mark {
                position: absolute;
                top: -7px;
                right: -7px;
                font-size: 12px;
                background: #000;
                border-radius: 50%;
                width: 22px;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 3;
                border: 2px solid #fff;
        }

        .rv-mark:empty {
                display: none;
        }

        .rv-detail {
                background: rgba(0, 0, 0, .45);
                border: 2px solid #4a3d36;
                border-radius: 14px;
                padding: 8px;
                min-height: 118px;
        }

        .rv-hint {
                color: #bbb;
                font-size: 12px;
                text-align: center;
                padding-top: 36px;
        }

        .rvd-top {
                display: flex;
                gap: 10px;
                align-items: center;
                text-align: left;
        }

        .rvd-shirt {
                width: 72px;
                height: 72px;
                flex-shrink: 0;
        }

        .rvd-name {
                font-weight: 800;
                font-size: 14px;
        }

        .rvd-info .chips {
                justify-content: flex-start;
        }

        .rvd-price {
                font-size: 12px;
                color: #ccc;
        }

        .rvd-price b {
                color: var(--green);
                font-size: 14px;
        }

        .rvd-btns {
                display: flex;
                gap: 6px;
                margin-top: 6px;
        }

        .seg {
                flex: 1;
                padding: 7px;
                border-radius: 10px;
                border: 2px solid #555;
                background: #2a2320;
                color: #ccc;
                font-weight: 800;
                font-size: 12px;
                cursor: pointer;
        }

        .seg.on.keep {
                background: var(--green);
                color: #000;
                border-color: var(--green);
        }

        .seg.on.trash {
                background: var(--red);
                color: #fff;
                border-color: var(--red);
        }

        .rv-btns {
                display: flex;
                gap: 8px;
        }

        /* bargain */
        .bargain-card {
                padding: 12px;
        }

        .bg-top {
                display: flex;
                gap: 10px;
                align-items: center;
                text-align: left;
        }

        .bg-avatar {
                width: 64px;
                height: 64px;
                position: relative;
                flex-shrink: 0;
                background: rgba(255, 255, 255, .08);
                border-radius: 50%;
        }

        .bg-mood {
                position: absolute;
                right: -6px;
                bottom: -4px;
                font-size: 22px;
        }

        .bg-info {
                flex: 1;
                min-width: 0;
        }

        .bg-type {
                font-size: 12px;
                color: var(--gold);
                font-weight: 800;
        }

        .bg-quote {
                font-size: 13px;
                font-weight: 600;
                background: #fff;
                color: #111;
                border-radius: 12px;
                padding: 5px 9px;
                margin: 3px 0;
                position: relative;
                animation: fadeIn .25s;
        }

        .bg-meters {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
        }

        .meter {
                flex: 1;
                height: 8px;
                background: #333;
                border-radius: 4px;
                overflow: hidden;
        }

        .meter i {
                display: block;
                height: 100%;
                transition: width .3s, background .3s;
        }

        .bg-mid {
                display: flex;
                gap: 10px;
                align-items: center;
                margin: 8px 0;
                background: rgba(0, 0, 0, .35);
                border-radius: 14px;
                padding: 8px;
        }

        .bg-shirt {
                width: 96px;
                height: 96px;
                flex-shrink: 0;
                display: flex;
        }

        .bg-shirt .bg-sh {
                flex: 1;
        }

        .bg-shirt.two .bg-sh {
                margin: 0 -6px;
        }

        .bg-detail {
                flex: 1;
                min-width: 0;
                text-align: left;
        }

        #bg-shirt-title {
                font-weight: 800;
                font-size: 13px;
        }

        .bg-detail .chips {
                justify-content: flex-start;
        }

        .price-row {
                display: flex;
                gap: 10px;
                margin-top: 4px;
        }

        .price-row small {
                display: block;
                font-size: 10px;
                color: #aaa;
        }

        .price-row b {
                font-size: 14px;
                color: #ccc;
        }

        .price-row b.offer {
                font-size: 20px;
                color: var(--green);
                display: inline-block;
        }

        .bump {
                animation: numBump .35s;
        }

        @keyframes numBump {
                50% {
                        transform: scale(1.3);
                }
        }

        .bg-actions {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 6px;
        }

        .bact {
                border: none;
                border-radius: 12px;
                padding: 8px 4px;
                font-weight: 800;
                font-size: 12px;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1px;
                transition: transform .1s;
        }

        .bact:active {
                transform: scale(.94);
        }

        .bact:disabled {
                opacity: .35;
                cursor: default;
        }

        .bact span {
                font-size: 9px;
                font-weight: 400;
                opacity: .9;
        }

        .bact.sell {
                background: var(--green);
                color: #000
        }

        .bact.ask {
                background: var(--blue);
                color: #fff
        }

        .bact.hype {
                background: #f77f00;
                color: #000
        }

        .bact.tag {
                background: #e9c46a;
                color: #000
        }

        .bact.gift {
                background: #f72585;
                color: #fff
        }

        .bact.bundle {
                background: #7209b7;
                color: #fff
        }

        .link-btn {
                background: none;
                border: none;
                color: #aaa;
                font-size: 12px;
                margin-top: 8px;
                cursor: pointer;
                text-decoration: underline;
        }

        /* FX */
        #toast {
                position: absolute;
                top: 96px;
                left: 50%;
                transform: translateX(-50%);
                background: #000;
                color: var(--gold);
                border: 2px solid var(--gold);
                padding: 7px 14px;
                border-radius: 24px;
                font-size: 12px;
                font-weight: 800;
                z-index: 100;
                opacity: 0;
                pointer-events: none;
                transition: .22s;
                max-width: 92%;
                text-align: center;
        }

        #toast.show {
                opacity: 1;
                transform: translateX(-50%) translateY(6px);
        }

        #fx {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 95;
                overflow: hidden;
        }

        .particle {
                position: absolute;
                font-size: 18px;
                transform: translate(-50%, -50%);
                animation: part .9s ease-out forwards;
        }

        @keyframes part {
                to {
                        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4) rotate(var(--rot));
                        opacity: 0;
                }
        }

        .float-txt {
                position: absolute;
                font-weight: 800;
                font-size: 20px;
                transform: translate(-50%, -50%);
                text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, .6);
                animation: floatUp 1.3s ease-out forwards;
                white-space: nowrap;
        }

        @keyframes floatUp {
                0% {
                        transform: translate(-50%, -20%) scale(.6);
                        opacity: 0
                }

                15% {
                        transform: translate(-50%, -50%) scale(1.15);
                        opacity: 1
                }

                100% {
                        transform: translate(-50%, -170%) scale(1);
                        opacity: 0
                }
        }

        .confetti {
                position: absolute;
                top: -14px;
                width: 8px;
                height: 12px;
                animation: confFall linear forwards;
        }

        @keyframes confFall {
                to {
                        transform: translate(var(--dx), 960px) rotate(var(--rot));
                }
        }

        #flash {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 96;
                opacity: 0;
        }

        #flash.go {
                animation: flashA .5s ease-out;
        }

        @keyframes flashA {
                0% {
                        opacity: .85
                }

                100% {
                        opacity: 0
                }
        }

        #evt-pop {
                position: absolute;
                inset: 0;
                z-index: 97;
                display: none;
                align-items: center;
                justify-content: center;
                pointer-events: none;
        }

        #evt-pop.show {
                display: flex;
        }

        .evt-card {
                background: linear-gradient(135deg, #ff006e, #3a0ca3);
                border: 3px solid var(--gold);
                border-radius: 20px;
                padding: 16px 24px;
                text-align: center;
                animation: evtIn 2.6s ease forwards;
                box-shadow: 0 0 40px rgba(255, 0, 110, .6);
                max-width: 85%;
        }

        @keyframes evtIn {
                0% {
                        transform: scale(.3) rotate(-10deg);
                        opacity: 0
                }

                12% {
                        transform: scale(1.08) rotate(2deg);
                        opacity: 1
                }

                20% {
                        transform: scale(1) rotate(0)
                }

                85% {
                        opacity: 1;
                        transform: scale(1)
                }

                100% {
                        opacity: 0;
                        transform: scale(.9) translateY(-30px)
                }
        }

        .evt-kicker {
                color: var(--gold);
                font-weight: 800;
                font-size: 12px;
        }

        .evt-icon {
                font-size: 46px;
        }

        .evt-name {
                font-weight: 800;
                font-size: 18px;
        }

        .evt-desc {
                font-size: 12px;
                color: #ffd6e8;
        }
/* ===== เฟส 1: ธีมใหม่ / กองกระสอบ / คลี่ทีละตัว / สะสม ===== */
.nav-item { font-size:9px; } .nav-item .ico { font-size:19px; }
.shop-title { position:absolute; top:2px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#ffbe0b,#fb5607); color:#000; font-size:9px; font-weight:800; padding:0 8px; border-radius:8px; white-space:nowrap; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,.5); display:none; }
.floor-marble { background-color:#eae7e1; background-image:linear-gradient(115deg,transparent 40%,rgba(120,110,100,.25) 41%,transparent 43%),linear-gradient(35deg,transparent 60%,rgba(120,110,100,.18) 61%,transparent 62%),linear-gradient(#d6d1c8 1px,transparent 1px),linear-gradient(90deg,#d6d1c8 1px,transparent 1px); background-size:120px 120px,90px 90px,60px 60px,60px 60px; }
.floor-grass { background-color:#2d6a4f; background-image:repeating-linear-gradient(0deg,#2d6a4f 0 30px,#40916c 30px 60px),linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.5) 49.5% 50.5%,transparent 50.5%); }
.wall-camo { background-color:#606c38; background-image:radial-gradient(ellipse 18px 10px at 20% 40%,#283618 98%,transparent),radial-gradient(ellipse 22px 9px at 70% 60%,#dda15e 98%,transparent),radial-gradient(ellipse 14px 8px at 45% 25%,#3a3d2e 98%,transparent); background-size:70px 40px; }
.wall-gold { background:linear-gradient(135deg,#b8860b,#ffd700 30%,#b8860b 50%,#ffe55c 70%,#b8860b); box-shadow:inset 0 -6px 16px rgba(0,0,0,.4); }
.rug-classic { background:repeating-linear-gradient(0deg,#9e2a2b 0 10px,#540b0e 10px 20px); }
.rug-persian { background:radial-gradient(circle,#e9c46a 0 10%,#9b2226 11% 30%,#005f73 31% 40%,#9b2226 41%); border-color:#e9c46a; }
.rug-smiley { background:radial-gradient(circle at 50% 50%,#111 0 3px,transparent 4px) 0 0/30px 30px,#ffd60a; border-color:#111; }
.rug-leopard { background:radial-gradient(ellipse 6px 4px,#3d2914 90%,transparent) 0 0/22px 18px,radial-gradient(ellipse 4px 3px,#3d2914 90%,transparent) 11px 9px/22px 18px,#d4a373; border-color:#3d2914; }
.rug-rainbow { background:linear-gradient(180deg,#ef476f,#f78c6b,#ffd166,#06d6a0,#118ab2,#7209b7); border-color:#fff; }
#light-layer { position:absolute; inset:0; z-index:7; pointer-events:none; }
.light-warm { background:radial-gradient(circle at 50% 40%,rgba(255,170,60,.18),rgba(80,30,0,.25)); }
.light-neon { background:linear-gradient(135deg,rgba(247,37,133,.22),rgba(76,201,240,.22)); animation:neonShift 4s ease-in-out infinite alternate; }
@keyframes neonShift { to { filter:hue-rotate(60deg); } }
.light-sunset { background:linear-gradient(180deg,rgba(255,94,98,.22),rgba(255,153,102,.12),rgba(110,40,140,.25)); }
.light-spot { background:radial-gradient(circle at 21% 30%,rgba(255,255,220,.25) 0 40px,transparent 70px),radial-gradient(circle at 79% 30%,rgba(255,255,220,.25) 0 40px,transparent 70px),radial-gradient(circle at 21% 66%,rgba(255,255,220,.22) 0 40px,transparent 70px),radial-gradient(circle at 79% 66%,rgba(255,255,220,.22) 0 40px,transparent 70px),rgba(0,0,0,.18); }
.dc-fan span { display:inline-block; animation:spin 1.5s linear infinite; }
.dc-lamp span { display:inline-block; filter:drop-shadow(0 0 10px #ffd60a); animation:discoSwing 3s ease-in-out infinite alternate; }
.dc-dog span { display:inline-block; animation:catWalk 8s ease-in-out infinite; }
.dc-poster,.dc-trophy { font-size:22px; }
.sack-visual-card.mil-tier { border-color:#606c38; background:linear-gradient(135deg,#3a3d2e,#1f1f1a); }
.sack-visual-card.jer-tier { border-color:#0077b6; background:linear-gradient(135deg,#1d3557,#14213d); }

/* กองกระสอบ */
.pile-wrap { width:100%; max-width:400px; display:flex; flex-direction:column; gap:8px; }
.pile-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:6px; background:radial-gradient(ellipse at 50% 100%,#3b2f2a,#120d0b); border-radius:16px; border:2px solid #4a3d36; }
.pile-sack { position:relative; cursor:pointer; transform:rotate(var(--rot)) scale(var(--sc)); animation:pileDrop .5s cubic-bezier(.3,1.5,.5,1) backwards; transition:filter .15s; }
@keyframes pileDrop { from { transform:translateY(-200px) rotate(var(--rot)); opacity:0; } }
.pile-sack.sel { filter:drop-shadow(0 0 8px #ffbe0b) brightness(1.15); z-index:2; }
.pile-sack:active .pile-svg { transform:scale(.92); }
.pile-svg { aspect-ratio:1; transition:transform .1s; }
.pile-kg { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; background:rgba(0,0,0,.7); border-radius:6px; padding:0 4px; white-space:nowrap; }
.pile-lit { position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:8px; font-weight:800; border-radius:6px; padding:0 4px; white-space:nowrap; color:#fff; }
.peek { width:46px; height:46px; border-radius:10px; border:3px dashed #fff; flex-shrink:0; box-shadow:inset 0 0 12px rgba(0,0,0,.6); }

/* คลี่ทีละตัว */
.rv-strip { display:flex; gap:4px; justify-content:center; }
.strip-dot { width:28px; height:28px; border-radius:8px; background:#2a2320; border:2px solid #555; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#888; cursor:pointer; padding:1px; }
.strip-dot.cur { border-color:#fff; transform:scale(1.15); }
.strip-dot.t2 { border-color:#0096c7; } .strip-dot.t3 { border-color:var(--purple); } .strip-dot.t4 { border-color:var(--gold); } .strip-dot.t5 { border-color:#ff4d6d; }
.single-stage { display:flex; justify-content:center; padding:6px 0; perspective:900px; }
.rv-card.big { width:170px; animation:singleIn .45s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes singleIn { from { transform:translateX(120px) rotate(15deg) scale(.6); opacity:0; } }
.rv-card.big .rv-price { font-size:13px; }
.rv-tap { position:absolute; bottom:8px; font-size:12px; font-weight:800; color:var(--gold); animation:popScale .6s infinite alternate; }
.rv-card.charging.c5 .rv-back { box-shadow:0 0 34px #ff4d6d; }
.rv-card.big.charging .rv-shake { animation:charge .5s, chargeGlow .5s; }
@keyframes chargeGlow { to { filter:brightness(1.6); } }
.reveal-grid { display:grid; }

/* หน้าสะสม */
#collect-scene { background:#1f1a17; padding:12px; overflow-y:auto; gap:10px; }
.ach-row { background:var(--panel2); border:2px solid var(--line); border-radius:14px; padding:8px 10px; display:flex; align-items:center; gap:8px; opacity:.75; flex-shrink:0; }
.ach-row.done { opacity:1; border-color:var(--gold); } .ach-row.using { box-shadow:0 0 12px rgba(255,190,11,.5); }
.ach-ico { font-size:26px; } .ach-txt { flex:1; min-width:0; font-size:11px; color:#bbb; } .ach-txt b { display:block; color:#fff; font-size:13px; } .ach-txt small { font-size:10px; }
.ach-row .small-btn { width:auto; padding:6px 10px; margin:0; }
.book-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; flex-shrink:0; }
.book-card { background:var(--panel2); border:2px solid var(--line); border-radius:12px; padding:4px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.book-card .ms { width:46px; height:46px; } .book-card.no .ms { filter:brightness(0) opacity(.4); }
.book-card.t3 { border-color:var(--purple); } .book-card.t4 { border-color:var(--gold); } .book-card.t5 { border-color:#ff4d6d; }
.bk-name { font-size:9px; line-height:1.15; min-height:20px; }
.top-wall .neon-sign { margin-top:10px; }

/* ===== เฟส 2: ล็อกอิน ===== */
.auth-card { display:flex; flex-direction:column; gap:8px; }
.au-input { width:100%; padding:11px 12px; border-radius:12px; border:2px solid #4a3d36; background:#120e0c; color:#fff; font-size:15px; font-family:inherit; user-select:text; -webkit-user-select:text; }
.au-input:focus { outline:none; border-color:var(--gold); }
.au-err { min-height:18px; font-size:12px; color:#ff8fa3; }

/* ===== เฟส 3: เพื่อน / ตลาด / อันดับ ===== */
#social-scene { background:#1f1a17; padding:12px; overflow-y:auto; gap:10px; }
.add-friend { display:flex; gap:6px; }
.add-friend .au-input { padding:8px 10px; font-size:13px; }
.extra-row .small-btn + .small-btn { margin-left:4px; }
.lb-row { display:flex; align-items:center; gap:8px; background:var(--panel2); border:2px solid var(--line); border-radius:12px; padding:6px 10px; flex-shrink:0; }
.lb-row.me { border-color:var(--gold); box-shadow:0 0 10px rgba(255,190,11,.3); }
.lb-row .txt { flex:1; min-width:0; font-size:10px; color:#bbb; } .lb-row .txt b { display:block; color:#fff; font-size:13px; }
.lb-rank { font-size:18px; font-weight:800; width:34px; text-align:center; } .lb-money { font-weight:800; color:var(--green); font-size:13px; }
.mk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; flex-shrink:0; }
.mk-card { background:var(--panel2); border:2px solid var(--line); border-radius:12px; padding:6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.mk-card .ms { width:50px; height:50px; } .mk-card .small-btn { padding:5px; font-size:11px; }
.mk-card.t3 { border-color:var(--purple); } .mk-card.t4 { border-color:var(--gold); } .mk-card.t5 { border-color:#ff4d6d; }
.visit-card { max-height:92%; overflow-y:auto; display:flex; flex-direction:column; gap:8px; text-align:left; }
.visit-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.visit-canvas { position:relative; width:100%; height:300px; border-radius:14px; overflow:hidden; border:3px solid #3a2e28; flex-shrink:0; }
.visit-canvas .rack-obj { cursor:default; min-height:0; }
.visit-canvas .decor-item { font-size:22px; }
.visit-museum { display:flex; gap:4px; flex-wrap:wrap; } .visit-museum .ms { width:40px; height:40px; }

/* ===== เศรษฐกิจ ===== */
#social-scene .tabs .tab { font-size:11px; padding:7px 2px; }
.order-card { display:flex; gap:8px; align-items:center; background:var(--panel2); border:2px solid var(--line); border-radius:12px; padding:8px; margin-top:6px; }
.order-card .txt { flex:1; min-width:0; font-size:11px; color:#ddd; } .order-card .txt b { display:block; font-size:13px; color:#fff; }
.order-card .small-btn { width:auto; padding:6px 10px; margin-top:4px; }
.mk-filters { display:flex; gap:6px; }
.mk-filter { flex:1; min-width:0; background:#120e0c; color:#fff; border:2px solid #4a3d36; border-radius:10px; padding:6px; font-family:inherit; font-size:12px; }
.chart-box { background:var(--panel2); border:2px solid var(--line); border-radius:14px; padding:10px; position:relative; flex-shrink:0; }
.chart-title { font-weight:800; font-size:13px; color:#fff; } .chart-sub { font-size:10px; color:#aaa; margin-bottom:4px; }
.price-chart { position:relative; min-height:150px; }
.ch-svg { display:block; touch-action:none; }
.ch-grid { stroke:rgba(255,255,255,.08); stroke-width:1; } .ch-axis { fill:#8a807a; font-size:9px; }
.ch-line { fill:none; stroke:#ffbe0b; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ch-dot { fill:#ffbe0b; stroke:#2e2622; stroke-width:2; } .ch-cross { stroke:rgba(255,255,255,.35); stroke-width:1; }
.ch-tip { display:none; position:absolute; top:4px; transform:translateX(-50%); background:#000; border:1px solid #555; border-radius:8px; padding:2px 8px; font-size:11px; color:#ddd; white-space:nowrap; pointer-events:none; }
.ch-tip b { color:#fff; }
.price-row { cursor:pointer; } .idx-val { font-weight:800; font-size:13px; color:#fff; }

/* ===== บทสอน / รายวัน / ตั๋ว ===== */
#tut-hole { position:absolute; display:none; z-index:98; border-radius:14px; pointer-events:none; box-shadow:0 0 0 9999px rgba(0,0,0,.55); border:3px solid var(--gold); animation:tutPulse 1.2s ease-in-out infinite; transition:all .25s; }
@keyframes tutPulse { 50% { border-color:#fff; box-shadow:0 0 0 9999px rgba(0,0,0,.55), 0 0 18px var(--gold); } }
#tut-card { position:absolute; display:none; left:12px; z-index:99; box-sizing:border-box; transition:top .25s, left .25s; background:linear-gradient(135deg,#3a0ca3,#7209b7); border:2px solid var(--gold); border-radius:16px; padding:10px 12px; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.6); }
.tut-step { font-size:10px; color:var(--gold); font-weight:800; margin-bottom:2px; }
.tut-btns { display:flex; justify-content:space-between; align-items:center; margin-top:6px; } .tut-btns .link-btn { margin:0; }
.login-row { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.login-day { background:var(--panel2); border:2px solid var(--line); border-radius:10px; padding:4px 2px; text-align:center; font-size:9px; line-height:1.2; min-height:58px; }
.login-day small { display:block; color:#aaa; font-size:9px; } .login-day.done { opacity:.55; border-color:var(--green); }
.login-day.today { border-color:var(--gold); box-shadow:0 0 10px rgba(255,190,11,.5); animation:popScale .7s infinite alternate; }
.ticket-btn { margin-top:6px; background:linear-gradient(90deg,#06d6a0,#118ab2); color:#000; box-shadow:0 4px 0 #0a5872; }
#hud .icon-btn { width:28px; height:28px; font-size:13px; }

/* ===== อัตราดรอป ===== */
.odds-row { cursor:pointer; }
.odds-more { color:#fff !important; border-color:#fff6 !important; background:rgba(255,255,255,.08); }
.odds-card { max-width:520px; max-height:calc(100% - 10px); display:flex; flex-direction:column; gap:8px; text-align:left; }
.odds-head b { display:block; font-size:17px; color:var(--gold); } .odds-head small { color:#bbb; font-size:11px; }
.odds-top { display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px; background:rgba(255,190,11,.08); border:2px solid #ffbe0b66; }
.odds-top .ms { width:76px; height:76px; flex-shrink:0; }
.odds-top small { display:block; color:var(--gold); font-weight:800; font-size:11px; } .odds-top b { display:block; font-size:14px; margin-bottom:2px; }
.odds-num { font-size:11px; color:#ddd; margin-top:2px; }
.odds-tools input { width:100%; box-sizing:border-box; background:#0f0c0b; color:#fff; border:1.5px solid #4a382e; border-radius:10px; padding:7px 10px; font-family:inherit; }
.odds-tiers { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; } .odds-tiers .chip { cursor:pointer; border:none; font-family:inherit; }
.odds-list { overflow-y:auto; flex:1; min-height:120px; display:flex; flex-direction:column; gap:4px; padding-right:2px; }
.odds-row-item { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px; background:rgba(255,255,255,.04); border-left:4px solid #666; }
.odds-row-item.t1 { border-color:#2a9d8f; } .odds-row-item.t2 { border-color:#00b4d8; } .odds-row-item.t3 { border-color:#c77dff; } .odds-row-item.t4 { border-color:#ffbe0b; } .odds-row-item.t5 { border-color:#ff4d6d; }
.odds-row-item .rank { font-size:10px; color:#888; width:26px; } .odds-row-item .ms { width:36px; height:36px; flex-shrink:0; }
.odds-row-item .nm { flex:1; min-width:0; } .odds-row-item .nm b { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.odds-row-item small { display:block; font-size:10px; color:#aaa; } .odds-row-item .pc { text-align:right; } .odds-row-item .pc b { font-size:12px; color:var(--gold); }
.odds-row-item.got .ms { filter:none; } .odds-row-item:not(.got) .ms { opacity:.75; }
.book-sec summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
.book-sec summary::-webkit-details-marker { display:none; }
.book-sec summary::before { content:"▸"; transition:transform .2s; } .book-sec[open] summary::before { transform:rotate(90deg); }
.book-sec summary > .q-bar { flex:1; max-width:120px; margin-left:auto; }

/* =========================================================================
   RESPONSIVE: มือถือแนวตั้ง (ค่าเริ่มต้น) • มือถือแนวนอน • แท็บเล็ต/iPad/จอพับ • คอม • จอคู่
   ========================================================================= */
/* รอยบาก/แถบ home ของ iPhone เวลาเปิดเป็นแอป */
#hud { padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
#nav { padding-bottom: env(safe-area-inset-bottom); height: calc(64px + env(safe-area-inset-bottom)); }
.hud-pill { min-width: 0; }
#money-pill { margin-left: auto; }

/* จอเล็กมาก: Galaxy Z Flip (หน้าจอนอก), iPhone SE/mini */
@media (max-width: 360px) {
    #hud { gap: 4px; padding-left: 6px; padding-right: 6px; }
    .hud-pill { padding: 3px 7px; font-size: 12px; }
    #hud .icon-btn { width: 26px; height: 26px; font-size: 12px; }
    .nav-item { font-size: 8px; } .nav-item .ico { font-size: 17px; }
    .book-grid { grid-template-columns: repeat(3, 1fr); }
    .card-modal { padding: 10px; border-radius: 16px; }
}
@media (max-width: 300px) {
    .xp-wrap, #hud .hud-pill[title="ความชิคร้าน"] { display: none; }
    .nav-item { font-size: 0; } .nav-item .ico { font-size: 18px; margin: 0; }
    #trend-bar { font-size: 10px; }
}
/* จอเตี้ย (แนวตั้งแต่สั้น / จอพับครึ่ง) */
@media (orientation: portrait) and (max-height: 640px) {
    #nav { height: calc(54px + env(safe-area-inset-bottom)); }
    .nav-item .ico { font-size: 18px; }
}
/* จอกลางแนวตั้ง (มือถือจอใหญ่ / จอพับด้านใน / แท็บเล็ตเล็ก) ใช้ความกว้างเต็ม */
@media (min-width: 441px) and (max-width: 767px) and (orientation: portrait) {
    #app { max-width: 100%; max-height: none; border: none; border-radius: 0; }
    .upg-grid { grid-template-columns: repeat(3, 1fr); }
    .book-grid { grid-template-columns: repeat(5, 1fr); }
    .card-modal { max-width: 440px; }
}

/* ---------- เลย์เอาต์จอกว้าง: เมนูข้าง (คอม, แท็บเล็ต, iPad, Z Fold กาง, มือถือแนวนอน) ---------- */
@media (min-width: 768px) and (min-height: 560px), (orientation: landscape) and (max-height: 559px) and (min-width: 520px) {
    #app {
        max-width: 1600px; max-height: none;
        display: grid;
        grid-template-columns: 1fr var(--side, 96px);
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "hud nav" "trend nav" "event nav" "view nav";
    }
    #nav { grid-area: nav; flex-direction: column; justify-content: center; gap: 4px; height: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
        border-top: none; border-left: 3px solid #3a2e28; background: linear-gradient(180deg, #1c1613, #110d0b); overflow-y: auto; }
    .nav-item { flex: 0 0 auto; height: var(--nav-h, 74px); border-radius: 14px; margin: 0 8px; font-size: 11px; }
    .nav-item .ico { font-size: 24px; margin-bottom: 3px; }
    .nav-item.active { box-shadow: inset -3px 0 0 var(--gold); }
    .nav-badge { right: 10px; top: 6px; }
    #hud { grid-area: hud; } #trend-bar { grid-area: trend; } #event-bar { grid-area: event; }
    #viewport { grid-area: view; min-height: 0; }

    /* เนื้อหาหน้าอื่นๆ อยู่ตรงกลาง ไม่ยืดเต็มจอ */
    #viewport > .scene:not(#shop-scene) { padding-left: max(14px, calc((100% - 980px) / 2)); padding-right: max(14px, calc((100% - 980px) / 2)); }
    .sack-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
    .upg-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .book-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .museum-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    #laundry-scene.active { display: grid !important; grid-template-columns: 1fr 1fr; align-content: start; align-items: start; }
    .card-modal { max-width: 460px; }
    .odds-card { max-width: 640px; }

    /* หน้าร้าน: พื้นร้านกว้างขึ้นแต่ไม่เกินสัดส่วน ตัวละครใหญ่ขึ้นตามจอ */
    #shop-scene { align-items: center; background: radial-gradient(circle at 50% 30%, #2c211b, #120e0c); }
    #shop-canvas { width: 100%; max-width: min(1100px, calc((100dvh - 230px) * 1.45)); border-left: 4px solid #2a1f1a; border-right: 4px solid #2a1f1a; }
    #shop-dock { width: 100%; max-width: min(1100px, calc((100dvh - 230px) * 1.45)); }
    .customer-sprite, .owner-sprite { scale: 1.3; }
    .mini-shirt-wrap { max-width: 52px; }
    .rack-info { font-size: 11px; }
}
/* คอมจอใหญ่ */
@media (min-width: 1200px) and (min-height: 700px) {
    #app { --side: 112px; --nav-h: 82px; height: calc(100% - 32px); border-radius: 22px; }
    .customer-sprite, .owner-sprite { scale: 1.5; }
    .hud-pill { font-size: 15px; padding: 5px 14px; }
    #hud .icon-btn { width: 34px; height: 34px; font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1199px), (orientation: landscape) and (max-height: 559px) {
    #app { border: none; border-radius: 0; }
}
/* มือถือแนวนอน: ทุกอย่างกระชับ */
@media (orientation: landscape) and (max-height: 559px) and (min-width: 520px) {
    #app { --side: 70px; --nav-h: 46px; }
    .nav-item { font-size: 9px; margin: 0 4px; } .nav-item .ico { font-size: 18px; margin: 0; }
    #hud { padding-top: 4px; padding-bottom: 4px; }
    #trend-bar, #event-bar { font-size: 11px; padding-top: 2px; padding-bottom: 2px; }
    #shop-canvas, #shop-dock { max-width: none; }
    #laundry-scene.active { grid-template-columns: 1fr 1fr; }
    .customer-sprite, .owner-sprite { scale: 1; }
    .modal { padding: 6px; } .card-modal { max-height: calc(100dvh - 12px); overflow-y: auto; }
}

/* ---------- จอคู่ / จอพับ (Surface Duo, Galaxy Fold แบบกางครึ่ง): ไม่ให้ของตกร่องบานพับ ---------- */
@media (horizontal-viewport-segments: 2) {
    body { justify-content: flex-start; }
    #app { max-width: none; width: 100vw; --hinge: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); }
    #viewport > .scene:not(#shop-scene) { padding-left: 14px; padding-right: 14px; }
    #warehouse-scene.active, #upgrade-scene.active, #collect-scene.active, #social-scene.active, #decor-scene.active {
        display: grid !important; grid-template-columns: 1fr 1fr; column-gap: calc(var(--hinge) + 28px); align-content: start; }
    #shop-canvas, #shop-dock { max-width: calc(env(viewport-segment-width 0 0) - var(--side, 96px)); align-self: flex-start; }
    .modal { justify-content: flex-start; padding-left: calc(env(viewport-segment-left 1 0) + 12px); }
}
@media (vertical-viewport-segments: 2) {
    /* พับแบบโน้ตบุ๊ก: ฉากเกมจอบน ปุ่มเมนูจอล่าง */
    #app { display: flex; height: 100dvh; max-height: none; max-width: none; border: none; border-radius: 0; }
    #viewport { flex: 0 0 auto; height: calc(env(viewport-segment-bottom 0 0) - env(viewport-segment-top 0 0) - 110px); }
    #nav { margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)); flex: 1; height: auto; }
    .nav-item .ico { font-size: 30px; } .nav-item { font-size: 13px; }
}
@media (min-width: 768px) and (min-height: 560px) { .xp-wrap { max-width: 420px; } #money-pill { margin-left: auto; } }
@media (min-width: 1200px) and (min-height: 700px) { .mini-shirt-wrap { max-width: 66px; } }
#odds-body { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; }
.odds-card { overflow:hidden; }
.modal .card-modal { max-height: calc(100% - 8px); overflow-y: auto; }
.modal .odds-card { overflow: hidden; }
@media (max-width: 360px) { .odds-top .ms { width:52px; height:52px; } .odds-top b { font-size:12px; } .odds-row-item .ms { width:28px; height:28px; } .odds-row-item .rank { display:none; } }
@media (orientation: landscape) and (max-height: 559px) and (min-width: 520px) {
    .rack-obj, .counter-area, .top-wall { min-height: 0; }
    .rack-obj { height: 16.5%; }
    .rack-pole { top: 4px; } .rack-shirts-row { top: 1px; bottom: 10px; } .mini-shirt-wrap { max-width: 26px; padding-top: 3px; }
    .rack-info { font-size: 8px; } .rack-empty, .rack-obj.locked { font-size: 8px; }
    #shop-dock { padding: 3px 10px 4px; } .dock-head { margin-bottom: 2px; font-size: 10px; } .dock-row { height: 42px; }
    .btn-hang-all { padding: 4px 10px; font-size: 10px; }
    .owner-sprite { width: 34px; height: 34px; bottom: calc(3% + 30px); }
    .customer-sprite { scale: .8; }
}

/* ===== ซีซั่น ===== */
.sack-visual-card.season-tier { background:linear-gradient(135deg,#3c096c,#240046); border-color:#ffd60a; box-shadow:0 0 18px rgba(255,214,10,.25); }
.season-hero { display:flex; gap:12px; align-items:center; padding:14px; border-radius:18px; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.25), transparent 40%), linear-gradient(135deg, var(--c1), var(--c2)); border:2px solid rgba(255,255,255,.25); flex-shrink:0; }
.season-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); animation:shine 4s infinite; }
@keyframes shine { from { transform:translateX(-100%) } to { transform:translateX(100%) } }
.sh-ico { font-size:44px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.sh-txt { display:flex; flex-direction:column; gap:1px; text-shadow:0 1px 3px rgba(0,0,0,.5); } .sh-txt small { font-size:10px; opacity:.85; } .sh-txt b { font-size:19px; }
.sh-txt span { font-size:11px; opacity:.9; } .sh-txt em { font-style:normal; font-size:11px; font-weight:800; background:rgba(0,0,0,.35); border-radius:10px; padding:1px 8px; align-self:flex-start; margin-top:3px; }
.season-rewards { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; flex-shrink:0; }
.sr { text-align:center; border-radius:14px; padding:6px 4px; background:var(--panel2); border:2px solid #8d99ae; } .sr.gold { border-color:#ffd60a; background:linear-gradient(180deg,rgba(255,214,10,.15),transparent); }
.sr .ms { width:54px; height:54px; margin:auto; } .sr b { display:block; font-size:11px; } .sr small { font-size:9px; color:#bbb; line-height:1.3; display:block; }
.season-me { font-size:12px; color:#ddd; background:rgba(255,255,255,.05); border-radius:10px; padding:6px 10px; } .season-me b { color:var(--gold); }
.lb-row.top { border-color:#ffd60a66; background:linear-gradient(90deg,rgba(255,214,10,.12),var(--panel2) 60%); } .lb-row.top10 { border-color:#8d99ae66; }

/* ===== ตู้กาชา ===== */
.gacha-sec { display:flex; gap:12px; align-items:center; border-color:#c77dff !important; background:linear-gradient(135deg,rgba(199,125,255,.12),transparent); }
.gacha-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.gacha-odds { font-size:10px; color:#ccc; line-height:1.5; }
.btn-main.gold { background:linear-gradient(180deg,#ffd60a,#f7a400); color:#000; }
.gacha-machine { width:74px; flex-shrink:0; }
.gm-dome { position:relative; width:74px; height:70px; border-radius:50% 50% 12px 12px; background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.7), rgba(255,255,255,.12) 30%, rgba(255,255,255,.05)); border:3px solid #e0aaff; overflow:hidden; }
.gm-dome i { position:absolute; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, var(--c) 45%); left:calc(6px + var(--i) * 10px); bottom:calc(4px + (var(--i) * 7px) % 22px); animation:gmBob 1.6s ease-in-out infinite; animation-delay:calc(var(--i) * -.27s); }
@keyframes gmBob { 50% { transform:translateY(-4px) } }
.gm-base { height:30px; background:linear-gradient(180deg,#c1121f,#780000); border-radius:6px 6px 10px 10px; margin-top:-2px; display:flex; align-items:center; justify-content:center; }
.gm-base span { font-size:10px; font-weight:900; color:#ffd60a; letter-spacing:1px; }
.gacha-card { max-width:520px; display:flex; flex-direction:column; gap:10px; }
.gacha-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } .gacha-grid.one { grid-template-columns:1fr; max-width:180px; margin:auto; }
.g-cap { position:relative; aspect-ratio:3/4; }
.g-ball { position:absolute; inset:15% 10%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #adb5bd 50%); animation:gBall .55s var(--d) both, gOpen .25s calc(var(--d) + .55s) forwards; }
.g-ball.t3 { background:radial-gradient(circle at 35% 30%, #fff, #c77dff 50%); } .g-ball.t4 { background:radial-gradient(circle at 35% 30%, #fff, #ffbe0b 50%); box-shadow:0 0 18px #ffbe0b; } .g-ball.t5 { background:radial-gradient(circle at 35% 30%, #fff, #ff4d6d 50%); box-shadow:0 0 22px #ff4d6d; }
@keyframes gBall { from { transform:translateY(-120%) scale(.6); opacity:0 } 70% { transform:translateY(6%) } }
@keyframes gOpen { to { transform:scale(1.5); opacity:0 } }
.g-prize { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:12px; background:var(--panel2); border:2px solid var(--line); padding:4px; text-align:center;
  opacity:0; animation:gPrize .3s calc(var(--d) + .6s) forwards; }
.g-prize.t3 { border-color:#c77dff; } .g-prize.t4 { border-color:#ffbe0b; box-shadow:0 0 14px rgba(255,190,11,.5); } .g-prize.t5 { border-color:#ff4d6d; box-shadow:0 0 18px rgba(255,77,109,.6); }
@keyframes gPrize { from { opacity:0; transform:scale(.6) } to { opacity:1; transform:none } }
.g-prize .ms { width:70%; aspect-ratio:1; } .g-prize b { font-size:9px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.g-prize .tier-badge { font-size:7px; padding:0 4px; } .gp-ico { font-size:28px; }
.gacha-grid.one .g-prize b { font-size:12px; }
@media (max-width:360px) { .gacha-grid { grid-template-columns:repeat(4,1fr); } .gacha-machine { display:none; } }

/* ===== ภารกิจรายสัปดาห์ ===== */
.week-chest { display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px; background:linear-gradient(135deg,#3a0ca3,#7209b7); border:2px solid #c77dff; }
.week-chest.ready { animation:tutPulse 1.2s infinite; border-color:var(--gold); } .week-chest.opened { opacity:.6; }
.wc-ico { font-size:30px; }

/* ===== ตั้งค่า ===== */
.settings-box { display:flex; flex-direction:column; gap:6px; }
.set-row { display:flex; align-items:center; gap:10px; background:var(--panel2); border:2px solid var(--line); border-radius:12px; padding:8px 10px; }
.set-row .ico { font-size:20px; } .set-row .txt { flex:1; display:flex; flex-direction:column; } .set-row .txt b { font-size:13px; } .set-row .txt span { font-size:10px; color:#aaa; }
.switch { width:46px; height:26px; border-radius:20px; border:none; background:#555; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.switch i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; }
.switch.on { background:var(--green); } .switch.on i { left:23px; }
.week-chest .small-btn { width:auto; flex-shrink:0; padding:7px 14px; } .week-chest > div { min-width:0; }

/* ===== ระดับจอกศักดิ์สิทธิ์ (tier 6) ===== */
.t-6 { background:linear-gradient(90deg,#00f5d4,#fee440,#f15bb5,#9b5de5); color:#000 !important; background-size:300% 100%; animation:holo 3s linear infinite; }
@keyframes holo { to { background-position:300% 0 } }
.rv-front.t6 { background:radial-gradient(circle,#2b2d42,#000); border-color:#00f5d4 !important; box-shadow:0 0 30px #00f5d4, 0 0 60px #f15bb5; }
.mini-shirt-wrap.t6 svg { filter:drop-shadow(0 0 5px #00f5d4); }
.dock-item.t6, .book-card.t6, .mk-card.t6, .strip-dot.t6, .odds-row-item.t6, .g-prize.t6 { border-color:#00f5d4 !important; box-shadow:0 0 14px rgba(0,245,212,.55); }
.pile-lit.t-6 { box-shadow:0 0 12px #00f5d4; }

/* ===== พรีวิวเสื้อ ===== */
.pv-tap { cursor:zoom-in; }
[data-pv] { -webkit-touch-callout:none; user-select:none; }
.pv-card { position:relative; max-width:400px; display:flex; flex-direction:column; gap:8px; text-align:left; border-color:var(--tc) !important; }
.pv-x { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:15px; cursor:pointer; z-index:2; }
.pv-art { position:relative; width:min(230px, 60vw); aspect-ratio:1; margin:4px auto 0; animation:pvIn .35s cubic-bezier(.2,1.4,.4,1); }
.pv-art svg { position:relative; filter:drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.pv-art.unknown svg { filter:brightness(0) drop-shadow(0 0 2px rgba(255,255,255,.4)); opacity:.8; }
.pv-glow { position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle, var(--tc), transparent 65%); opacity:.35; animation:pvGlow 2.5s ease-in-out infinite; }
.pv-card.t6 .pv-glow { background:conic-gradient(#00f5d4,#fee440,#f15bb5,#9b5de5,#00f5d4); filter:blur(18px); animation:spin 4s linear infinite; opacity:.5; }
@keyframes pvIn { from { transform:scale(.6) rotate(-6deg); opacity:0 } }
@keyframes pvGlow { 50% { transform:scale(1.1); opacity:.55 } }
@keyframes spin { to { transform:rotate(360deg) } }
.pv-head { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.pv-name { font-size:17px; font-weight:800; text-align:center; line-height:1.3; }
.pv-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pv-grid > div { background:rgba(255,255,255,.05); border-radius:10px; padding:6px 8px; } .pv-grid small { display:block; font-size:10px; color:#aaa; } .pv-grid b { font-size:13px; }
.pv-srcs { display:flex; flex-direction:column; gap:4px; }
.pv-src { display:flex; align-items:center; gap:6px; font-size:12px; background:rgba(255,255,255,.04); border-radius:8px; padding:5px 8px; }
.pv-src span { flex:1; min-width:0; } .pv-src b { color:var(--gold); } .pv-src small { color:#999; font-size:10px; }
.pv-found { text-align:center; font-size:12px; color:var(--green); }
#modal-preview { z-index:75; }

/* ===== กันจอซูมบนมือถือ ===== */
/* manipulation = ปิดซูมจากการแตะ 2 ครั้ง แต่ยังเลื่อนจอได้ปกติ (ใช้ได้ทั้ง iOS และ Android) */
html, body, button, a, input, select, label, [onclick], .scene, .modal { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* iPhone จะซูมเข้าเองเมื่อแตะช่องพิมพ์ที่ตัวอักษรเล็กกว่า 16px */
@media (hover: none) and (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }