:root{--bg-main:#FDF8F0;--bg-game:#F5EDE0;--surface:#FFF;--primary:#2563EB;--gold:#F59E0B;--success:#22C55E;--danger:#EF4444;--epic:#7C3AED;--text-p:#2D2520;--text-s:#6B6560;--text-m:#A09890;--border:#E8DFD0;--shadow:0 1px 3px rgba(45,37,32,.06);--shadow-md:0 4px 6px -1px rgba(45,37,32,.07);--shadow-lg:0 10px 15px -3px rgba(45,37,32,.08);--shadow-xl:0 20px 25px -5px rgba(45,37,32,.1)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg-main);color:var(--text-p);overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4,h5,h6,button,.font-heading{font-family:'Poppins',sans-serif}
.font-mono{font-family:'JetBrains Mono',monospace}
#particle-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-atmosphere{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 20% 0%,rgba(37,99,235,.05) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(245,158,11,.04) 0%,transparent 40%),radial-gradient(ellipse at 50% 100%,rgba(180,140,100,.06) 0%,transparent 50%),linear-gradient(180deg,#F5EDE0 0%,#FDF8F0 30%,#FDF8F0 100%)}
#app{position:relative;z-index:1}
.page-section{display:none;animation:fadeIn .4s ease}
.page-section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card-hover{transition:transform .25s ease,box-shadow .25s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .6s ease}
.shimmer:hover::after{left:100%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:float 3s ease-in-out infinite}
.float-d{animation:float 3s ease-in-out 1s infinite}
.float-d2{animation:float 3s ease-in-out 2s infinite}
.banner-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.banner-slide.active{opacity:1}
.progress-fill{transition:width .8s ease}
.live-dot{width:8px;height:8px;background:#EF4444;border-radius:50%;animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.rainbow-text{background:linear-gradient(90deg,#EF4444,#F59E0B,#22C55E,#3B82F6,#7C3AED,#EF4444);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbowShift 3s linear infinite}
@keyframes rainbowShift{to{background-position:200% center}}

/* ===== PORTAL NAVIGATION ===== */
.portal-card{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;transition:all .3s ease;border:2px solid transparent}
.portal-card:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(255,255,255,.3)}
.portal-card:hover .portal-arrow{transform:translateX(4px);opacity:1}
.portal-card:hover .portal-deco-1{transform:translate(-20%,-20%) scale(1.3)}
.portal-card:hover .portal-deco-2{transform:translate(30%,30%) scale(1.2)}
.portal-bg{position:absolute;inset:0;z-index:0}
.portal-deco{position:absolute;border-radius:50%;filter:blur(40px);opacity:.4;transition:transform .6s ease}
.portal-deco-1{width:200px;height:200px;top:-40px;right:-40px;background:rgba(255,255,255,.5)}
.portal-deco-2{width:150px;height:150px;bottom:-30px;left:-30px;background:rgba(255,255,255,.3)}
.portal-content{position:relative;z-index:1;display:flex;align-items:center;gap:20px;padding:28px 24px}
.portal-icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.portal-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(0);opacity:0;transition:all .3s ease;color:rgba(255,255,255,.7);font-size:18px;z-index:1}
.portal-status{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:rgba(255,255,255,.8)}
.portal-status-dot{width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:livePulse 2s infinite}

/* ===== GACHA MACHINE OVERHAUL ===== */
.gm-container{position:relative;width:300px;height:480px;margin:0 auto}
.gm-glow{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:280px;height:70px;border-radius:50%;filter:blur(15px);transition:background .5s}
.gm-glow.glow-blue{background:radial-gradient(ellipse,rgba(37,99,235,.35) 0%,transparent 70%)}
.gm-glow.glow-purple{background:radial-gradient(ellipse,rgba(124,58,237,.35) 0%,transparent 70%)}
.gm-glow.glow-gold{background:radial-gradient(ellipse,rgba(245,158,11,.4) 0%,transparent 70%)}
.gm-glow.glow-red{background:radial-gradient(ellipse,rgba(239,68,68,.3) 0%,transparent 70%)}
.gm-topcap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:250px;height:28px;background:linear-gradient(180deg,#1E3A8A 0%,#1E40AF 60%,#2563EB 100%);border-radius:18px 18px 0 0;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 -1px 0 #1E3A8A}
.gm-topcap::after{content:'';position:absolute;bottom:4px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);border-radius:1px}
.gm-dome{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:210px;height:210px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.2);box-shadow:inset 0 0 40px rgba(37,99,235,.08),0 4px 20px rgba(0,0,0,.1);background:radial-gradient(ellipse at 40% 35%,rgba(147,197,253,.18) 0%,rgba(96,165,250,.06) 50%,rgba(37,99,235,.12) 100%)}
.gm-dome-highlight{position:absolute;top:8%;left:10%;width:55%;height:35%;background:linear-gradient(145deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.05) 100%);border-radius:50%;filter:blur(2px);pointer-events:none}
.gm-dome-shadow{position:absolute;bottom:0;right:5%;width:50%;height:40%;background:linear-gradient(to top,rgba(0,0,0,.08),transparent);border-radius:50%;pointer-events:none}
.gm-dome-reflect{position:absolute;top:42%;left:-15%;width:130%;height:2px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.22) 30%,rgba(255,255,255,.22) 70%,transparent 95%);transform:rotate(-12deg);pointer-events:none}
.gm-shelf{position:absolute;left:8%;right:8%;height:1.5px;background:rgba(255,255,255,.1);border-radius:50%;pointer-events:none}
.gm-shelf-1{top:36%}.gm-shelf-2{top:60%}.gm-shelf-3{top:84%}
.gm-cap{position:absolute;width:28px;height:28px;border-radius:50%;box-shadow:inset -3px -3px 6px rgba(0,0,0,.2),inset 3px 3px 6px rgba(255,255,255,.3);transition:transform .3s}
.gm-cap::after{content:'';position:absolute;top:46%;left:8%;width:84%;height:1.5px;background:rgba(0,0,0,.12);border-radius:1px}
.cap-w{background:radial-gradient(circle at 35% 35%,#FFF,#E2E8F0)}
.cap-b{background:radial-gradient(circle at 35% 35%,#93C5FD,#2563EB)}
.cap-p{background:radial-gradient(circle at 35% 35%,#C4B5FD,#7C3AED)}
.cap-g{background:radial-gradient(circle at 35% 35%,#FDE68A,#F59E0B)}
.cap-r{background:conic-gradient(#EF4444,#F59E0B,#22C55E,#3B82F6,#7C3AED,#EF4444)}
.gm-neck{position:absolute;top:218px;left:50%;transform:translateX(-50%);width:200px;height:16px;background:linear-gradient(180deg,#2563EB,#1E40AF);clip-path:polygon(8% 0%,92% 0%,100% 100%,0% 100%)}
.gm-body{position:absolute;top:228px;left:50%;transform:translateX(-50%);width:250px;height:190px;background:linear-gradient(180deg,#1E40AF 0%,#1D4ED8 25%,#2563EB 55%,#1E40AF 85%,#172554 100%);border-radius:6px 6px 10px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25),6px 6px 20px rgba(0,0,0,.25),-2px 0 10px rgba(0,0,0,.1);position:relative}
.gm-body::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 24px,rgba(255,255,255,.02) 24px,rgba(255,255,255,.02) 25px);border-radius:inherit;pointer-events:none}
.gm-nameplate{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:190px;height:26px;background:linear-gradient(180deg,#0F172A,#1E293B);border-radius:4px;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.gm-name-text{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.8);text-transform:uppercase}
.gm-leds{position:absolute;top:52px;left:16px;right:16px;display:flex;justify-content:space-between}
.gm-led{width:7px;height:7px;border-radius:50%;background:#FBBF24;box-shadow:0 0 6px rgba(251,191,36,.7);transition:all .15s}
.gm-led.off{background:#334155;box-shadow:none}
.gm-active .gm-led{animation:ledBlink .25s ease-in-out infinite alternate}
.gm-active .gm-led:nth-child(2n){animation-delay:.1s}
.gm-active .gm-led:nth-child(3n){animation-delay:.2s}
@keyframes ledBlink{from{opacity:1;box-shadow:0 0 8px rgba(251,191,36,.9)}to{opacity:.3;box-shadow:0 0 2px rgba(251,191,36,.3)}}
.gm-tokenslot{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);width:32px;height:5px;background:#0F172A;border-radius:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.gm-tokenslot.glow{box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 12px rgba(37,99,235,.6)}
.gm-handle-mount{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:18px;height:44px;background:linear-gradient(90deg,#334155,#475569,#334155);border-radius:3px;border:1.5px solid #1E293B}
.gm-handle-assembly{position:absolute;right:-44px;top:calc(228px + 95px - 6px);transform-origin:left center;z-index:2}
.gm-handle-arm{width:32px;height:8px;background:linear-gradient(180deg,#94A3B8,#64748B,#475569);border-radius:3px;margin-left:12px}
.gm-handle-grip{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FCD34D,#F59E0B,#B45309);border:2px solid #92400E;box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3);margin-left:44px;margin-top:-14px;cursor:grab}
.gm-handle-grip:active{cursor:grabbing}
.gm-chute{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:190px;height:34px;background:linear-gradient(180deg,#0F172A,#1E293B);border-radius:0 0 12px 12px;box-shadow:inset 0 8px 20px rgba(0,0,0,.5),inset 0 -2px 0 rgba(255,255,255,.03)}
.gm-chute-inner{position:absolute;top:4px;left:8px;right:8px;height:3px;background:rgba(255,255,255,.04);border-radius:2px}
.gm-feet{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:230px;display:flex;justify-content:space-between}
.gm-foot{width:35px;height:10px;background:linear-gradient(180deg,#1E293B,#0F172A);border-radius:0 0 5px 5px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.gm-active{animation:machineShake .06s ease-in-out 8}
@keyframes machineShake{0%,100%{transform:translateX(0) translateY(0)}25%{transform:translateX(-3px) translateY(-2px)}50%{transform:translateX(2px) translateY(0)}75%{transform:translateX(-2px) translateY(2px)}}
.gm-active .gm-body{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25),6px 6px 20px rgba(0,0,0,.25),0 0 40px rgba(37,99,235,.3)}

/* ===== SLOT HEAT MAP ===== */
.slot-cell{width:48px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;user-select:none;border:1.5px solid transparent}
.slot-heat-0{background:#ECFDF5;color:#059669;border-color:#A7F3D0}
.slot-heat-1{background:#F0FDF4;color:#047857;border-color:#86EFAC}
.slot-heat-2{background:#FEFCE8;color:#A16207;border-color:#FDE047}
.slot-heat-3{background:#FFF7ED;color:#C2410C;border-color:#FDBA74}
.slot-heat-4{background:#FFF1F2;color:#BE123C;border-color:#FCA5A5}
.slot-cell.slot-heat-0:hover{background:#D1FAE5;border-color:#6EE7B7;transform:scale(1.1)}
.slot-cell.slot-heat-1:hover{background:#DCFCE7;border-color:#4ADE80;transform:scale(1.1)}
.slot-cell.slot-heat-2:hover{background:#FEF9C3;border-color:#FACC15;transform:scale(1.1)}
.slot-cell.slot-heat-3:hover{background:#FFEDD5;border-color:#FB923C;transform:scale(1.1)}
.slot-cell.slot-heat-4:hover{background:#FFE4E6;border-color:#FB7185;transform:scale(1.1)}
.slot-selected{background:#2563EB!important;color:#fff!important;border-color:#1D4ED8!important;transform:scale(1.1)!important;box-shadow:0 0 10px rgba(37,99,235,.3)}
.slot-reserved{background:#FEF9C3;color:#A16207;border:1.5px solid #FDE047;cursor:not-allowed}
.slot-sold{background:#FEE2E2;color:#DC2626;border:1.5px solid #FCA5A5;cursor:not-allowed;opacity:.55}
@keyframes slotSold{0%{transform:scale(1)}25%{transform:scale(1.25);background:#FCA5A5;z-index:2}100%{transform:scale(1)}}
.slot-just-sold{animation:slotSold .5s ease}

/* ===== COLLECTION ROOM ===== */
.room-bg{background:linear-gradient(180deg,#2D2520 0%,#3D3530 30%,#4A403A 100%);position:relative;overflow:hidden}
.room-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(245,158,11,.06) 0%,transparent 60%);pointer-events:none}
.shelf-row{position:relative;padding:20px 0 0}
.shelf-surface{height:14px;background:linear-gradient(180deg,#8B7355,#6B5B45,#5A4A38);border-radius:2px;box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);position:relative;z-index:2}
.shelf-surface::after{content:'';position:absolute;top:3px;left:5%;right:5%;height:1px;background:rgba(255,255,255,.08);border-radius:1px}
.shelf-items{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 16px;margin-bottom:-7px;position:relative;z-index:1}
.room-item{width:90px;perspective:600px;cursor:pointer;transition:transform .2s}
.room-item-inner{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s ease,box-shadow .15s ease;transform-style:preserve-3d}
.room-item:hover .room-item-inner{box-shadow:0 8px 24px rgba(0,0,0,.4)}
.room-item.spotlight .room-item-inner{box-shadow:0 4px 12px rgba(0,0,0,.3),0 0 20px rgba(245,158,11,.2)}
.room-item.spotlight::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:60px;height:20px;background:radial-gradient(ellipse,rgba(245,158,11,.15) 0%,transparent 70%);pointer-events:none}
.room-silhouette{width:90px;height:126px;border-radius:8px;background:rgba(255,255,255,.03);border:1.5px dashed rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.room-silhouette i{font-size:20px;color:rgba(255,255,255,.1)}
.room-silhouette span{font-size:9px;color:rgba(255,255,255,.08)}
.set-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:4px}
.set-progress{height:4px;background:rgba(255,255,255,.06);border-radius:2px;flex:1;margin-left:12px;max-width:200px;overflow:hidden}
.set-progress-fill{height:100%;border-radius:2px;transition:width .8s ease}
.room-ambient{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);opacity:.08;pointer-events:none}

/* ===== BACK BUTTON ===== */
.back-btn{display:none;animation:fadeIn .3s ease}
.back-btn.visible{display:inline-flex}

/* ===== TOAST ===== */
.toast{animation:toastIn .3s ease,toastOut .3s ease 2.7s forwards}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

/* ===== REWARD CARD ===== */
.reward-card-container{perspective:1000px;width:200px;height:280px}
.reward-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s ease}
.reward-card.flipped{transform:rotateY(180deg)}
.reward-card-front,.reward-card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;overflow:hidden}
.reward-card-back{transform:rotateY(180deg)}
.confetti{position:fixed;width:8px;height:8px;z-index:10001;pointer-events:none;border-radius:2px}

/* ===== GACHA OVERLAY ===== */
.gacha-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9000;display:none;align-items:center;justify-content:center;flex-direction:column}
.gacha-overlay.active{display:flex}

/* ===== MOBILE NAV ===== */
.mobile-nav-item{transition:all .2s}
.mobile-nav-item.active{color:var(--primary)}
.mobile-nav-item.active .mn-dot{opacity:1;transform:scale(1)}
.mn-dot{width:4px;height:4px;background:var(--primary);border-radius:50%;opacity:0;transform:scale(0);transition:all .2s}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#D4C8B8;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#A09890}

/* ===== COLLECTION DROPDOWN ===== */
.collection-item{transition:all .2s}.collection-item:hover{background:var(--bg-game)}.collection-item.active-c{background:var(--bg-game);border-color:var(--primary)}.collection-item.disabled{opacity:.5;cursor:not-allowed}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== AI TOOLKIT ===== */
.tool-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tool-card:hover{transform:translateY(-2px)}
.scan-spinner{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scanner-frame-overlay{position:absolute;inset:10%;border:2px solid rgba(255,255,255,.6);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.3)}
.quality-circle svg circle:last-child{transition:stroke-dashoffset .8s ease}
.grade-card{transition:transform .2s ease}
.grade-card:hover{transform:translateY(-2px)}
.history-filter-btn{transition:all .2s ease}

/* ===== QUICK ACTIONS FAB ===== */
.fab-container{position:fixed;bottom:80px;right:16px;z-index:40;display:none;flex-direction:column-reverse;align-items:flex-end;gap:12px}
.fab-main{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#6D28D9,#8B5CF6);color:#fff;border:none;box-shadow:0 4px 12px rgba(109,40,217,.35);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .2s ease}
.fab-main:hover{transform:scale(1.08);box-shadow:0 6px 16px rgba(109,40,217,.45)}
.fab-main:active{transform:scale(.95)}
.fab-main.open{transform:rotate(45deg)}
.fab-menu{display:flex;flex-direction:column-reverse;gap:10px;opacity:0;pointer-events:none;transition:all .2s ease;transform:translateY(10px)}
.fab-menu.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.fab-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;transition:all .2s ease;white-space:nowrap}
.fab-item:hover{transform:translateX(-4px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.fab-item-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0}
.fab-item-label{font-size:13px;font-weight:600;color:var(--text-p)}

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn{position:fixed;bottom:80px;left:16px;z-index:40;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;color:var(--text-s);cursor:pointer;opacity:0;pointer-events:none;transition:all .2s ease}
.scroll-top-btn.visible{opacity:1;pointer-events:auto}
.scroll-top-btn:hover{background:var(--bg-game);color:var(--primary)}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-m);margin-bottom:12px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-s);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb-sep{color:var(--text-m);font-size:10px}
.breadcrumb-current{color:var(--text-p);font-weight:600}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:40px 20px}
.empty-state-icon{width:80px;height:80px;border-radius:50%;background:var(--bg-game);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;color:var(--text-m)}
.empty-state-title{font-size:16px;font-weight:700;color:var(--text-p);margin-bottom:8px}
.empty-state-desc{font-size:13px;color:var(--text-s);margin-bottom:20px;line-height:1.5}
.empty-state-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--primary);color:#fff;font-weight:600;font-size:13px;border-radius:10px;border:none;cursor:pointer;transition:all .2s}
.empty-state-cta:hover{background:var(--primary-dark);transform:translateY(-1px)}

/* ===== SKELETON LOADER ===== */
.skeleton{background:linear-gradient(90deg,var(--bg-game) 25%,var(--warm-200) 50%,var(--bg-game) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:12px;margin-bottom:8px}
.skeleton-title{height:18px;width:60%;margin-bottom:12px}
.skeleton-card{height:120px;margin-bottom:12px}

@media(max-width:767px){.fab-container{display:flex}.scroll-top-btn{bottom:80px;left:12px;width:36px;height:36px}.slot-cell{width:40px;height:34px;font-size:10px}.gm-container{transform:scale(.75);transform-origin:top center}.gm-active{animation:machineShakeMobile .06s ease-in-out 8}.room-item{width:72px}.room-silhouette{width:72px;height:100px}}
@keyframes machineShakeMobile{0%,100%{transform:scale(.75) translateX(0) translateY(0)}25%{transform:scale(.75) translateX(-3px) translateY(-2px)}50%{transform:scale(.75) translateX(2px) translateY(0)}75%{transform:scale(.75) translateX(-2px) translateY(2px)}}