:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--color-bg-primary:#faeee7;--color-bg-secondary:#fffffe;--color-bg-tertiary:#f4e9e2;--color-bg-card:#fff;--color-bg-card-hover:#fff5f0;--color-accent-primary:#ff7544;--color-accent-primary-glow:#ff754440;--color-accent-gold:#ffb703;--color-accent-gold-glow:#ffb70340;--color-accent-cyan:#2ec4b6;--color-accent-cyan-glow:#2ec4b640;--color-accent-purple:#ff70a6;--gradient-hero:linear-gradient(135deg, #ff7544 0%, #ff9f1c 100%);--gradient-gold:linear-gradient(135deg, #ffb703 0%, #fb8500 100%);--gradient-cyber:linear-gradient(135deg, #2ec4b6 0%, #3a86ff 100%);--gradient-card:linear-gradient(145deg, #ff75440f 0%, #2ec4b60d 100%);--gradient-bg:radial-gradient(ellipse at 50% 0%, #ff75441f 0%, transparent 70%), radial-gradient(ellipse at 15% 85%, #2ec4b61a 0%, transparent 60%), radial-gradient(ellipse at 85% 85%, #ff70a614 0%, transparent 60%);--color-text-primary:#272343;--color-text-secondary:#5f6c7b;--color-text-muted:#94a1b2;--color-text-accent:#ff7544;--color-text-gold:#d97706;--color-chess-red:#e63946;--color-chess-red-glow:#e639464d;--color-chess-red-bg:#ffeef0;--color-chess-black:#1d3557;--color-chess-black-text:#fff;--color-chess-black-glow:#1d355733;--color-chess-board:#e9c46a;--color-chess-board-dark:#d4a373;--color-chess-board-line:#6c584c;--color-chess-board-bg:#faedcd;--color-chess-selected:#2ec4b699;--color-chess-legal:#2a9d8f99;--color-chess-last-move:#ffb70366;--color-chess-check:#e6394699;--color-success:#2a9d8f;--color-warning:#e9c46a;--color-error:#e63946;--color-info:#2ec4b6;--color-border:#ff754433;--color-border-hover:#ff754480;--color-border-cyan:#2ec4b64d;--font-family-primary:"Chakra Petch", "Noto Sans TC", sans-serif;--font-family-display:"Russo One", "Chakra Petch", "Noto Sans TC", sans-serif;--font-family-mono:"Chakra Petch", monospace;--font-family-chess:"Noto Serif TC", serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.75rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.15;--line-height-normal:1.5;--line-height-relaxed:1.7;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.25rem;--radius-full:9999px;--shadow-sm:0 4px 12px #2723430d;--shadow-md:0 8px 24px #27234314;--shadow-lg:0 16px 40px #2723431f;--shadow-glow-orange:0 4px 20px #ff754440;--shadow-glow-cyan:0 4px 20px #2ec4b640;--shadow-glow-gold:0 4px 20px #ffb70340;--glass-bg:#ffffffe0;--glass-border:#ff754433;--glass-blur:blur(12px);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-overlay:300;--z-modal:400;--z-toast:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glowPulse{0%,to{box-shadow:0 0 5px var(--color-accent-primary-glow)}50%{box-shadow:0 0 25px var(--color-accent-primary-glow), 0 0 50px var(--color-accent-primary-glow)}}@keyframes ripple{0%{opacity:.6;transform:scale(0)}to{opacity:0;transform:scale(4)}}@keyframes pieceSelect{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes checkFlash{0%,to{background-color:#0000}50%{background-color:var(--color-chess-check)}}@keyframes captureShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@keyframes float{0%,to{opacity:.6;transform:translateY(0)rotate(0)}25%{opacity:.8;transform:translateY(-20px)rotate(5deg)}50%{opacity:.5;transform:translateY(-10px)rotate(-3deg)}75%{opacity:.7;transform:translateY(-25px)rotate(2deg)}}@keyframes floatUp{0%{opacity:0;transform:translateY(100vh)scale(0)}10%{opacity:1}90%{opacity:.6}to{opacity:0;transform:translateY(-10vh)scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%)scale(.9)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(100%)scale(.9)}}@keyframes modalOverlayIn{0%{opacity:0}to{opacity:1}}@keyframes modalContentIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes gradientRotate{0%{--angle:0deg}to{--angle:360deg}}.animate-fade-in{animation:fadeIn var(--transition-normal) forwards}.animate-fade-in-up{animation:fadeInUp var(--transition-slow) forwards}.animate-fade-in-down{animation:fadeInDown var(--transition-slow) forwards}.animate-fade-in-scale{animation:fadeInScale var(--transition-slow) forwards}.animate-slide-in-left{animation:slideInLeft var(--transition-slow) forwards}.animate-slide-in-right{animation:slideInRight var(--transition-slow) forwards}.animate-pulse{animation:2s infinite pulse}.animate-glow{animation:2s infinite glowPulse}.animate-spin{animation:1s linear infinite spin}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.stagger-5{animation-delay:.5s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-family-primary);background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:var(--line-height-normal);min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";background:var(--gradient-bg);z-index:-2;pointer-events:none;position:fixed;inset:0}.crt-overlay{display:none}a{color:var(--color-accent-primary);transition:color var(--transition-fast);cursor:pointer;text-decoration:none}a:hover{color:var(--color-text-primary)}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#ff75444d}::-webkit-scrollbar-thumb:hover{background:var(--color-accent-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-display);letter-spacing:.02em;line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:.02em;transition:all var(--transition-fast);cursor:pointer;user-select:none;display:inline-flex;position:relative;overflow:hidden}.btn:active{transform:scale(.96)}.btn-primary{background:var(--gradient-hero);color:#fff;box-shadow:var(--shadow-sm), var(--shadow-glow-orange);border:none}.btn-primary:hover{box-shadow:var(--shadow-md), 0 6px 24px #ff754459;filter:brightness(1.05);transform:translateY(-2px)}.btn-secondary{background:var(--color-bg-card);border:1.5px solid var(--color-border);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.btn-secondary:hover{border-color:var(--color-accent-primary);background:var(--color-bg-card-hover);color:var(--color-accent-primary);box-shadow:var(--shadow-glow-orange);transform:translateY(-1px)}.btn-ghost{color:var(--color-text-secondary);background:0 0;border:1.5px solid #0000}.btn-ghost:hover{color:var(--color-text-primary);border-color:var(--color-border);background:#ff754414}.btn-cyan{background:var(--gradient-cyber);color:#fff;box-shadow:var(--shadow-glow-cyan)}.btn-cyan:hover{filter:brightness(1.08);transform:translateY(-2px)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}.card,.glass{background:var(--color-bg-card);border:1.5px solid var(--color-border);border-radius:var(--radius-xl);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);position:relative}.card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md), var(--shadow-glow-orange)}.badge{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.03em;border:1px solid #0000;padding:4px 10px;display:inline-flex}.badge-success{color:#137333;background:#e6f4ea;border-color:#ceead6}.badge-warning{color:#b06000;background:#fef7e0;border-color:#feefc3}.badge-error{color:#c5221f;background:#fce8e6;border-color:#fad2cf}.badge-info{color:#1a73e8;background:#e8f0fe;border-color:#d2e3fc}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-bg-secondary);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--font-size-base);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px var(--color-accent-primary-glow);outline:none}.divider{background:linear-gradient(90deg, transparent, var(--color-border), transparent);height:1px;margin:var(--space-4) 0}.toast-container{top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);gap:var(--space-3);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{pointer-events:all;padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg-secondary);border:1.5px solid var(--color-border);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-md);align-items:center;gap:var(--space-3);font-size:var(--font-size-sm);min-width:280px;display:flex}.toast-icon{justify-content:center;align-items:center;display:flex}.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-error)}.toast-warning{border-left:4px solid var(--color-warning)}.toast-info{border-left:4px solid var(--color-accent-cyan)}.modal-overlay{backdrop-filter:var(--glass-blur);z-index:var(--z-modal);background:#27234366;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-bg-secondary);border:1.5px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-6);width:90%;max-width:480px;box-shadow:var(--shadow-lg), var(--shadow-glow-orange)}.modal-title{font-size:var(--font-size-xl);margin-bottom:var(--space-4);color:var(--color-accent-primary)}.modal-actions{gap:var(--space-3);margin-top:var(--space-6);justify-content:flex-end;display:flex}.home{min-height:100vh;padding:calc(var(--space-6) + var(--safe-top)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.home-grid-bg{z-index:-1;pointer-events:none;background-image:linear-gradient(#f973160a 1px,#0000 1px),linear-gradient(90deg,#f973160a 1px,#0000 1px);background-size:40px 40px;position:fixed;inset:0}.home-header{width:100%;max-width:1100px;padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.home-logo{align-items:center;gap:var(--space-4);display:flex}.home-logo-img{border-radius:var(--radius-md);border:1px solid var(--color-accent-primary);width:48px;height:48px;box-shadow:var(--shadow-glow-orange);object-fit:cover}.home-header-actions{align-items:center;gap:var(--space-3);display:flex}.home-title{font-size:var(--font-size-2xl);color:var(--color-text-primary)}.accent-text{color:var(--color-accent-primary)}.home-subtitle{color:var(--color-text-muted);font-size:var(--font-size-xs);letter-spacing:.15em;margin-top:2px}.home-hero{text-align:center;padding:var(--space-8) 0 var(--space-4)}.hero-tagline{margin-bottom:var(--space-3)}.home-hero-title{font-size:var(--font-size-4xl);color:var(--color-text-primary);margin-bottom:var(--space-3)}.gradient-text{background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.home-hero-desc{color:var(--color-text-secondary);font-size:var(--font-size-base);max-width:620px;line-height:var(--line-height-relaxed);margin:0 auto}.home-filter-section{width:100%;max-width:1100px;margin-top:var(--space-4);gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);backdrop-filter:var(--glass-blur);flex-direction:column;display:flex}.home-filter-title{font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--color-text-primary);justify-content:space-between;align-items:center;display:flex}.home-filter-count{font-size:var(--font-size-xs);color:var(--color-accent-primary);border-radius:var(--radius-full);background:#ff75441a;padding:2px 10px}.home-filter-pills{gap:var(--space-2);flex-wrap:wrap;display:flex}.filter-pill{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);background:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border);transition:all var(--transition-fast);cursor:pointer}.filter-pill:hover{border-color:var(--color-accent-primary);color:var(--color-text-primary);transform:translateY(-1px)}.filter-pill.active{background:var(--gradient-hero);color:#fff;box-shadow:var(--shadow-sm), var(--shadow-glow-orange);border-color:#0000}.home-games{gap:var(--space-6);width:100%;max-width:1100px;padding:var(--space-4) 0 var(--space-6);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));display:grid}.badge-category{top:var(--space-3);left:var(--space-3);z-index:2;backdrop-filter:blur(4px);color:#38bdf8;background:#0f172abf;border:1px solid #38bdf84d;font-size:11px;position:absolute}.game-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);transition:all var(--transition-normal);flex-direction:column;display:flex;overflow:hidden}.game-card:hover{border-color:var(--color-accent-primary);box-shadow:var(--shadow-lg), var(--shadow-glow-orange);transform:translateY(-4px)}.game-card-banner{height:180px;position:relative;overflow:hidden}.game-card-img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal)}.game-card:hover .game-card-img{transform:scale(1.05)}.game-card-overlay{background:linear-gradient(to top, var(--color-bg-tertiary) 0%, transparent 80%);position:absolute;inset:0}.game-card-status{top:var(--space-3);right:var(--space-3);z-index:2;position:absolute}.game-card-content{padding:var(--space-5);flex-direction:column;flex:1;display:flex}.game-card-content h3{font-size:var(--font-size-lg);margin-bottom:var(--space-2)}.game-card-content p{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:var(--line-height-relaxed);margin-bottom:var(--space-4);flex:1}.game-card-tags{gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.tag{background:var(--color-bg-secondary);color:var(--color-text-secondary);font-size:var(--font-size-2xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);align-items:center;gap:var(--space-1);display:flex}.game-card-actions{gap:var(--space-3);display:flex}.game-card-actions .btn{flex:1}.home-lobby-container{gap:var(--space-6);width:100%;max-width:1100px;margin-bottom:var(--space-8);grid-template-columns:1.6fr 1fr;display:grid}.lobby-left,.lobby-right{background:var(--color-bg-card);border:1.5px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.lobby-header,.chat-header{margin-bottom:var(--space-3);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-2)}.lobby-title,.chat-title{font-size:var(--font-size-base);font-family:var(--font-family-display);color:var(--color-text-primary);align-items:center;gap:var(--space-2);display:flex}.lobby-subtitle{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.rooms-list-container{gap:var(--space-3);flex-direction:column;min-height:180px;max-height:280px;display:flex;overflow-y:auto}.empty-rooms,.empty-chat{padding:var(--space-8) 0;color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.room-row{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.room-row-info{align-items:center;gap:var(--space-3);display:flex}.room-game-badge{font-size:10px}.room-host{font-size:var(--font-size-xs);color:var(--color-text-primary)}.room-id{color:var(--color-text-muted);font-size:11px}.room-row-actions{align-items:center;gap:var(--space-3);display:flex}.room-players{color:var(--color-accent-primary);font-size:11px;font-weight:700;font-family:var(--font-family-mono)}.chat-messages{gap:var(--space-2);height:180px;margin-bottom:var(--space-3);font-size:var(--font-size-xs);flex-direction:column;display:flex;overflow-y:auto}.chat-msg-item{gap:var(--space-2);background:var(--color-bg-secondary);border-radius:var(--radius-md);align-items:baseline;padding:4px 8px;display:flex}.msg-author{color:var(--color-accent-primary);font-weight:700}.msg-text{color:var(--color-text-primary);word-break:break-word;flex:1}.msg-time{color:var(--color-text-muted);font-size:10px}.chat-input-form{gap:var(--space-2);display:flex}.chat-input{font-size:var(--font-size-xs);flex:1}.home-tech{width:100%;max-width:1100px;padding:var(--space-6) 0;border-top:1px solid var(--color-border)}.home-tech-title{font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:.15em;text-align:center;margin-bottom:var(--space-4)}.home-tech-grid{justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.tech-item{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--color-text-secondary);display:flex}.tech-icon{color:var(--color-accent-primary)}.home-footer{width:100%;max-width:1100px;padding:var(--space-6) 0 var(--space-4);border-top:1px solid var(--color-border);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-xs)}.home-footer-sub{margin-top:var(--space-1);font-size:var(--font-size-2xs);color:var(--color-text-muted)}@media (width<=768px){.home-hero-title{font-size:var(--font-size-2xl)}.home-games,.home-lobby-container{grid-template-columns:1fr}}.xiangqi-page{flex-direction:column;min-height:100vh;display:flex}.xiangqi-topbar{padding:calc(var(--space-3) + var(--safe-top)) calc(var(--space-6) + var(--safe-right)) var(--space-3) calc(var(--space-6) + var(--safe-left));background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);backdrop-filter:var(--glass-blur);z-index:var(--z-sticky);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.mode-badge{align-items:center;gap:var(--space-2);font-family:var(--font-family-display);font-size:var(--font-size-sm);color:var(--color-accent-gold);letter-spacing:.1em;display:inline-flex}.xiangqi-main{gap:var(--space-6);padding:var(--space-6) calc(var(--space-6) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-6) + var(--safe-left));flex:1;align-items:flex-start;width:100%;max-width:1440px;margin:0 auto;display:flex}.xiangqi-panel{gap:var(--space-4);flex-direction:column;flex-shrink:0;width:290px;display:flex}.player-info{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-bg-card);border:1px solid var(--color-border);display:flex}.player-avatar{border-radius:var(--radius-full);width:44px;height:44px;font-family:var(--font-family-chess);border:2px solid #0000;justify-content:center;align-items:center;font-size:1.25rem;font-weight:700;display:flex}.avatar-red{background:var(--color-chess-red-bg);color:var(--color-chess-red);border-color:var(--color-chess-red);box-shadow:0 0 10px #ef44444d}.avatar-black{color:#f1f5f9;background:#0f172a;border-color:#475569;box-shadow:0 0 10px #94a3b833}.player-details{flex-direction:column;flex:1;display:flex}.player-name{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);color:var(--color-text-secondary);letter-spacing:.05em}.player-timer{font-family:var(--font-family-mono);font-size:1.35rem;font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.player-turn-indicator{border-radius:var(--radius-full);background:var(--color-text-muted);width:10px;height:10px;transition:all var(--transition-fast)}.player-turn-indicator.active{background:var(--color-success);animation:1.5s infinite pulse;box-shadow:0 0 12px #22c55ecc}.move-history{border-radius:var(--radius-lg);padding:var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);flex-direction:column;flex:1;min-height:220px;max-height:420px;display:flex}.move-history-header{margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.move-history-title{font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:.1em}.move-list{gap:var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-mono);flex-wrap:wrap;flex:1;align-content:flex-start;display:flex;overflow-y:auto}.move-item{border-radius:var(--radius-sm);transition:background var(--transition-fast);background:#ffffff08;padding:3px 6px}.move-item:hover{background:var(--color-bg-tertiary)}.move-red{color:#f87171}.move-black{color:#38bdf8}.move-num{color:var(--color-text-muted);margin-right:4px}.xiangqi-board-container{flex:1;justify-content:center;align-items:center;width:100%;min-height:560px;display:flex;position:relative}.board-frame{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg), 0 0 40px #000c;background:#1e170d;border:2px solid #5c4033;justify-content:center;align-items:center;padding:12px;display:inline-flex;position:relative}#xiangqi-canvas{border-radius:var(--radius-lg);cursor:pointer;display:block}.ai-thinking{top:var(--space-4);align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border:1px solid var(--color-accent-cyan);border-radius:var(--radius-full);box-shadow:var(--shadow-glow-cyan);font-family:var(--font-family-display);font-size:var(--font-size-xs);color:var(--color-accent-cyan);z-index:10;background:#0e1420e6;display:flex;position:absolute;left:50%;transform:translate(-50%)}.game-over-overlay{backdrop-filter:blur(8px);border-radius:var(--radius-xl);z-index:20;background:#070a0fd9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.game-over-content{text-align:center;padding:var(--space-8);border-radius:var(--radius-xl);border:1px solid var(--color-accent-gold);box-shadow:var(--shadow-glow-gold)}.game-over-content h2{font-size:var(--font-size-3xl);color:var(--color-accent-gold);margin-bottom:var(--space-3)}.game-over-content p{color:var(--color-text-secondary);margin-bottom:var(--space-6);font-size:var(--font-size-base)}.game-over-actions{gap:var(--space-3);justify-content:center;display:flex}.action-title{font-size:var(--font-size-xs);color:var(--color-accent-gold);letter-spacing:.1em}.action-group{gap:var(--space-2);flex-direction:column;display:flex}.action-label{font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:.08em}.difficulty-selector,.side-selector{gap:var(--space-2);display:flex}.difficulty-selector .btn,.side-selector .btn{font-size:var(--font-size-xs);flex:1}.action-buttons{gap:var(--space-2);flex-direction:column;display:flex}.game-status{padding:var(--space-3);border-radius:var(--radius-md);text-align:center;background:var(--color-bg-secondary)}.status-text{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;color:var(--color-text-secondary)}.connection-options{gap:var(--space-3);flex-direction:column;display:flex}.divider-text{align-items:center;gap:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-xs);display:flex}.divider-text:before,.divider-text:after{content:"";background:var(--color-border);flex:1;height:1px}.join-room-form{gap:var(--space-2);display:flex}.join-room-form .input{text-align:center;font-size:var(--font-size-base);letter-spacing:.15em;flex:1}.room-info{gap:var(--space-3);flex-direction:column;display:flex}.room-id-display{align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);display:flex}.room-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.room-id-text{font-family:var(--font-family-mono);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);letter-spacing:.15em;color:var(--color-accent-primary);text-align:center;flex:1}.connection-status{align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--color-text-secondary);padding:var(--space-2);justify-content:center;display:flex}.game-mobile-tabs{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);padding:var(--space-1) var(--space-3);gap:var(--space-2);z-index:10;display:none}.mobile-tab-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);border-radius:var(--radius-md);color:var(--color-text-secondary);text-align:center;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;flex:1}.mobile-tab-btn.active{background:var(--gradient-hero);color:#fff;box-shadow:var(--shadow-sm)}@media (width<=1024px){.xiangqi-main{flex-direction:column;align-items:center}.xiangqi-panel{width:100%;max-width:520px}.xiangqi-panel-left{flex-flow:wrap;order:-1}.xiangqi-panel-left .player-info{flex:1}.xiangqi-panel-left .move-history{width:100%;max-height:160px}.xiangqi-board-container{width:100%;max-width:520px}}@media (width<=768px){.xiangqi-page{touch-action:manipulation;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.game-mobile-tabs{display:flex}.xiangqi-main{padding:var(--space-2);gap:var(--space-2);flex-direction:column;flex:1;display:flex;overflow:hidden}.xiangqi-page.show-mobile-setup .xiangqi-board-container{display:none!important}.xiangqi-page.show-mobile-setup .xiangqi-panel{width:100%;overflow-y:auto;display:flex!important}.xiangqi-page.show-mobile-game .xiangqi-panel{display:none!important}.xiangqi-page.show-mobile-game .xiangqi-board-container{flex:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex!important}.xiangqi-board-container{height:100%;max-width:100%!important}.board-frame{justify-content:center;align-items:center;width:100%;height:100%;max-height:calc(100dvh - 110px);display:flex}#xiangqi-canvas{object-fit:contain;max-width:100%;max-height:100%}}.tetris-page{flex-direction:column;min-height:100vh;display:flex}.tetris-topbar{padding:calc(var(--space-3) + var(--safe-top)) calc(var(--space-6) + var(--safe-right)) var(--space-3) calc(var(--space-6) + var(--safe-left));background:var(--color-bg-secondary);border-bottom:1.5px solid var(--color-border);z-index:var(--z-sticky);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.tetris-topbar-actions{gap:var(--space-2);display:flex}.tetris-main{gap:var(--space-6);padding:var(--space-6) calc(var(--space-6) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-6) + var(--safe-left));flex:1;align-items:flex-start;width:100%;max-width:1400px;margin:0 auto;display:flex}.tetris-stage-container{flex:1;justify-content:center;align-items:center;width:100%;min-height:440px;display:flex;position:relative}#tetris-canvas{border-radius:var(--radius-xl);border:2px solid var(--color-border);box-shadow:var(--shadow-md), var(--shadow-glow-orange);touch-action:manipulation}.mobile-touch-controller{gap:var(--space-2);width:100%;padding:var(--space-3) calc(var(--space-3) + var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) calc(var(--space-3) + var(--safe-left));border-radius:var(--radius-xl);background:var(--color-bg-card);border:1.5px solid var(--color-border);box-shadow:var(--shadow-md);flex-direction:column;display:none}.ctrl-mode-bar{gap:var(--space-2);margin-bottom:2px;display:flex}.ctrl-mode-btn{border-radius:var(--radius-full);border:1.5px solid var(--color-border);color:var(--color-text-secondary);flex:1;padding:4px 8px;font-size:11px}.ctrl-mode-btn.active{background:var(--gradient-hero);color:#fff;box-shadow:var(--shadow-glow-orange);border-color:#0000}.joystick-view{justify-content:space-between;align-items:center;gap:var(--space-4);width:100%;display:flex}.joystick-base{border-radius:var(--radius-full);border:2.5px solid var(--color-accent-primary);touch-action:none;width:115px;height:115px;box-shadow:var(--shadow-sm), inset 0 0 12px #ff754426;background:#fff8f5;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.joystick-knob{border-radius:var(--radius-full);background:var(--gradient-hero);width:46px;height:46px;box-shadow:var(--shadow-md), var(--shadow-glow-orange);pointer-events:none;transition:transform 40ms ease-out;position:absolute}.joy-guide{color:var(--color-text-muted);pointer-events:none;font-size:11px;font-weight:700;position:absolute}.joy-guide.top{top:6px}.joy-guide.bottom{bottom:6px}.joy-guide.left{left:8px}.joy-guide.right{right:8px}.joystick-actions{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.jaction-btn-harddrop{width:100%;min-height:44px;font-size:var(--font-size-sm);touch-action:manipulation;font-weight:700}.jaction-row{gap:var(--space-2);display:flex}.jaction-btn{min-height:42px;font-size:var(--font-size-xs);touch-action:manipulation;flex:1}.dpad-view{gap:var(--space-2);flex-direction:column;width:100%;display:flex}.touch-row{gap:var(--space-2);justify-content:center;display:flex}.touch-btn{min-height:42px;font-size:var(--font-size-xs);touch-action:manipulation;user-select:none;border-radius:var(--radius-md);font-family:var(--font-family-mono);padding:var(--space-2);flex:1}.touch-btn:active{background:var(--color-accent-primary);color:#fff;transform:scale(.95)}.touch-btn-harddrop{font-size:var(--font-size-sm);min-height:44px;font-weight:700}.tetris-sidebar{gap:var(--space-4);flex-direction:column;flex-shrink:0;width:320px;display:flex}.action-panel{border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-4);background:var(--color-bg-card);border:1.5px solid var(--color-border);flex-direction:column;display:flex}.match-stats{gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-bg-secondary);flex-direction:column;display:flex}.stat-row{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;display:flex}.stat-row strong{color:var(--color-accent-gold);font-family:var(--font-family-mono)}.controls-guide{padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-bg-card);border:1.5px solid var(--color-border)}.guide-title{font-size:var(--font-size-xs);color:var(--color-accent-cyan);letter-spacing:.1em;margin-bottom:var(--space-3)}.guide-grid{gap:var(--space-2);flex-direction:column;display:flex}.guide-item{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;display:flex}.guide-item span:first-child{font-family:var(--font-family-mono);color:var(--color-text-primary);border-radius:var(--radius-sm);background:#2723430d;padding:1px 5px}@media (width<=768px){.tetris-page{touch-action:manipulation;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.game-mobile-tabs{display:flex}.tetris-main{padding:var(--space-2);gap:var(--space-2);flex-direction:column;flex:1;display:flex;overflow:hidden}.tetris-page.show-mobile-setup .tetris-stage-container,.tetris-page.show-mobile-setup .mobile-touch-controller{display:none!important}.tetris-page.show-mobile-setup .tetris-sidebar{width:100%;overflow-y:auto;display:flex!important}.tetris-page.show-mobile-game .tetris-sidebar{display:none!important}.tetris-page.show-mobile-game .tetris-stage-container{flex:1;justify-content:center;align-items:center;width:100%;display:flex!important}.tetris-page.show-mobile-game .mobile-touch-controller{flex-shrink:0;display:flex!important}.tetris-stage-container{width:100%;min-height:auto}#tetris-canvas{object-fit:contain;max-width:100%;max-height:calc(100dvh - 270px)}.controls-guide{display:none}}.pwa-guide-page{flex-direction:column;min-height:100vh;display:flex}.pwa-topbar{padding:calc(var(--space-3) + var(--safe-top)) calc(var(--space-6) + var(--safe-right)) var(--space-3) calc(var(--space-6) + var(--safe-left));background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);z-index:var(--z-sticky);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.pwa-topbar-title{align-items:center;gap:var(--space-2);font-family:var(--font-family-display);color:var(--color-accent-gold);font-size:var(--font-size-base);display:flex}.pwa-content{width:100%;max-width:900px;padding:var(--space-6) calc(var(--space-6) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-6) + var(--safe-left));gap:var(--space-6);flex-direction:column;flex:1;margin:0 auto;display:flex}.pwa-hero{align-items:center;gap:var(--space-6);padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--color-border);background:var(--color-bg-card);display:flex}.pwa-app-logo{border-radius:var(--radius-lg);width:72px;height:72px;box-shadow:var(--shadow-glow-orange);object-fit:cover}.pwa-hero-text{flex:1}.pwa-hero-text h2{font-size:var(--font-size-xl);color:var(--color-text-primary);margin-bottom:var(--space-1)}.pwa-hero-text p{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.pwa-tabs{gap:var(--space-3);display:flex}.pwa-tabs .btn{font-size:var(--font-size-sm);flex:1}.tab-btn.active{background:var(--gradient-hero);color:#fff;box-shadow:var(--shadow-glow-orange);border-color:#0000}.guide-card{padding:var(--space-6);border-radius:var(--radius-xl);background:var(--color-bg-card);border:1px solid var(--color-border);display:none}.guide-card.active{animation:fadeIn var(--transition-normal) forwards;display:block}.guide-card-title{align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);color:var(--color-accent-gold);margin-bottom:var(--space-6);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);display:flex}.step-list{gap:var(--space-5);flex-direction:column;display:flex}.step-item{gap:var(--space-4);align-items:flex-start;display:flex}.step-num{border-radius:var(--radius-full);background:var(--gradient-hero);color:#fff;width:36px;height:36px;font-weight:700;font-family:var(--font-family-display);box-shadow:var(--shadow-glow-orange);flex-shrink:0;justify-content:center;align-items:center;display:flex}.step-body strong{font-size:var(--font-size-base);color:var(--color-text-primary);margin-bottom:var(--space-1);display:block}.step-body p{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-normal)}.step-body span{color:var(--color-accent-primary);font-weight:var(--font-weight-semibold)}.pwa-benefits-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.benefit-item{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg-card);border:1px solid var(--color-border);text-align:center}.benefit-icon{margin-bottom:var(--space-2);color:var(--color-accent-cyan);display:inline-flex}.benefit-item h4{font-size:var(--font-size-base);margin-bottom:var(--space-1)}.benefit-item p{font-size:var(--font-size-xs);color:var(--color-text-secondary)}@media (width<=768px){.pwa-hero{text-align:center;flex-direction:column}.pwa-tabs{flex-direction:column}}.poker-page{flex-direction:column;min-height:100vh;display:flex}.poker-topbar{padding:calc(var(--space-3) + var(--safe-top)) calc(var(--space-6) + var(--safe-right)) var(--space-3) calc(var(--space-6) + var(--safe-left));background:var(--color-bg-secondary);border-bottom:1.5px solid var(--color-border);z-index:var(--z-sticky);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.poker-main{padding:var(--space-4) calc(var(--space-6) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-6) + var(--safe-left));justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;flex:1;width:100%;max-width:1050px;margin:0 auto;display:flex}.poker-table-stage{width:100%;height:480px;box-shadow:var(--shadow-lg), inset 0 0 40px #00000059;background:radial-gradient(#2a9d8f 0%,#264653 100%);border:12px solid #e9c46a;border-radius:90px;justify-content:center;align-items:center;margin:60px 0;display:flex;position:relative}.table-center{align-items:center;gap:var(--space-2);z-index:5;flex-direction:column;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pot-badge{border-radius:var(--radius-full);font-family:var(--font-family-display);font-size:var(--font-size-sm);color:var(--color-accent-primary);box-shadow:var(--shadow-md);background:#fff;border:1.5px solid #ffb703;padding:5px 16px}.community-cards{gap:var(--space-2);display:flex}.card-slot{border-radius:var(--radius-md);width:50px;height:70px}.card-slot.empty{background:#ffffff1a;border:2px dashed #ffffff4d}.stage-name{color:#ffffffe6;font-size:11px;font-family:var(--font-family-display);letter-spacing:.15em;border-radius:var(--radius-full);background:#0000004d;padding:2px 10px}.poker-card{border-radius:var(--radius-md);width:50px;height:70px;box-shadow:var(--shadow-sm);font-family:var(--font-family-mono);user-select:none;background:#fff;border:1px solid #dcdcdc;flex-direction:column;justify-content:center;align-items:center;font-weight:700;animation:.2s ease-out popIn;display:flex}.poker-card.red{color:#e63946}.poker-card.black{color:#1d3557}.card-val{font-size:1.05rem;line-height:1}.card-suit{font-size:1.2rem;line-height:1}.card-back{color:#fff;background:linear-gradient(135deg,#ff7544 0%,#ff9f1c 100%);border:2px solid #fff;justify-content:center;align-items:center;font-size:1.4rem;display:flex}.player-seat{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all var(--transition-fast);z-index:10;background:#fffffff0;border:2.5px solid #0000;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;display:flex;position:absolute}.player-seat.turn-active{border-color:#ffb703;animation:1.2s infinite alternate turnPulse;transform:scale(1.06);box-shadow:0 0 24px #ffb703e6,inset 0 0 8px #ffb7034d}@keyframes turnPulse{0%{border-color:#ffb703;box-shadow:0 0 16px #ffb703b3}to{border-color:#ff7544;box-shadow:0 0 28px #ff7544}}.turn-tag{padding:1px 6px;font-size:10px;animation:1s infinite alternate pulse}.action-bubble{color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;white-space:nowrap;background:#272343;padding:3px 10px;font-size:11px;font-weight:700;transition:all .25s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:-32px;transform:translateY(8px)scale(.8)}.action-bubble.active{opacity:1;transform:translateY(0)scale(1)}.action-bubble.fold{background:#5f6c7b}.action-bubble.check{background:#4361ee}.action-bubble.call{background:#2ec4b6}.action-bubble.raise{background:#ff7544}.action-bubble.allin{box-shadow:var(--shadow-glow-red);background:#ff4d6d}.poker-avatar{border-radius:var(--radius-full);border:2px solid var(--color-border);width:42px;height:42px;box-shadow:var(--shadow-sm);background:#faeee7;justify-content:center;align-items:center;display:flex;overflow:hidden}.poker-avatar-img{object-fit:cover;width:100%;height:100%}.seat-info{flex-direction:column;align-items:center;display:flex}.seat-name{color:var(--color-text-primary);font-size:11px;font-weight:700}.seat-chips{color:var(--color-accent-primary);font-size:12px;font-weight:700;font-family:var(--font-family-mono)}.hole-cards{gap:4px;margin-top:2px;display:flex}.hole-cards .poker-card{width:38px;height:54px}.hole-cards .card-val{font-size:.85rem}.hole-cards .card-suit{font-size:.95rem}.status-folded{color:#5f6c7b;font-size:10px;font-weight:700}.status-allin{color:#ff4d6d;font-size:10px;font-weight:700}.seat-top-left{top:-55px;left:4%}.seat-top-center{top:-62px;left:50%;transform:translate(-50%)}.seat-top-right{top:-55px;right:4%}.seat-bottom{bottom:-62px;left:50%;transform:translate(-50%)}.winner-banner{backdrop-filter:blur(8px);z-index:30;background:#272343bf;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#winner-text{border-radius:var(--radius-2xl);font-size:var(--font-size-lg);font-family:var(--font-family-display);color:var(--color-accent-primary);box-shadow:var(--shadow-lg), var(--shadow-glow-orange);text-align:center;background:#fff;border:3px solid #ffb703;padding:16px 32px}.poker-action-bar{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);background:var(--color-bg-card);border:1.5px solid var(--color-border)}.poker-action-buttons{gap:var(--space-3);justify-content:center;display:flex}.action-btn{min-height:44px;font-size:var(--font-size-sm);flex:1;font-weight:700}.poker-log-box{background:var(--color-bg-card);border:1.5px solid var(--color-border);border-radius:var(--radius-xl);width:100%;padding:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.log-header{color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);padding-bottom:4px;font-size:11px;font-weight:700}.log-content{height:90px;font-size:12px;font-family:var(--font-family-mono);color:var(--color-text-primary);flex-direction:column;gap:3px;display:flex;overflow-y:auto}.log-entry{line-height:1.4}.log-entry.system{color:var(--color-accent-primary);font-weight:700}.log-entry.raise{color:#ff7544;font-weight:700}.log-entry.win{color:#2ec4b6;font-weight:700}.log-entry.fold{color:#5f6c7b}@media (width<=768px){.poker-page{touch-action:manipulation;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.game-mobile-tabs{display:flex}.poker-main{padding:var(--space-2);gap:var(--space-2);flex-direction:column;flex:1;display:flex;overflow:visible}.poker-page.show-mobile-setup .poker-table-stage,.poker-page.show-mobile-setup .poker-action-bar{display:none!important}.poker-page.show-mobile-setup .stakes-bar,.poker-page.show-mobile-setup .poker-log-box{width:100%;overflow-y:auto;display:flex!important}.poker-page.show-mobile-game .stakes-bar,.poker-page.show-mobile-game .poker-log-box{display:none!important}.poker-page.show-mobile-game .poker-table-stage{border-radius:40px;flex:1;width:100%;height:calc(100dvh - 210px);min-height:280px;margin:48px 0!important;display:flex!important}.poker-page.show-mobile-game .poker-action-bar{flex-shrink:0;display:flex!important}.seat-top-left{top:-45px;left:1%}.seat-top-right{top:-45px;right:1%}.seat-top-center{top:-52px;left:50%;transform:translate(-50%)}.seat-bottom{bottom:-52px;left:50%;transform:translate(-50%)}.poker-action-buttons{flex-wrap:nowrap;gap:4px}.action-btn{flex:1;min-width:auto;padding:8px 4px;font-size:11px}}.stakes-bar{border-radius:var(--radius-lg);background:var(--color-bg-secondary);border:1.5px solid var(--color-border);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;width:100%;padding:8px 16px;display:flex}.stakes-title{font-weight:700;font-size:var(--font-size-sm);color:var(--color-text-primary)}.stakes-options{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.stakes-btn{border-radius:var(--radius-md);padding:4px 10px;font-size:12px;transition:all .2s}.stakes-btn.active{box-shadow:var(--shadow-sm)}.magic-fighter-page{color:#f8fafc;touch-action:manipulation;user-select:none;background:linear-gradient(135deg,#0284c7 0%,#0d9488 40%,#38bdf8 100%);flex-direction:column;width:100%;height:100dvh;display:flex;overflow:hidden}.magic-fighter-page .topbar{backdrop-filter:blur(12px);justify-content:space-between;align-items:center;padding:10px 16px;display:flex;color:#f8fafc!important;background:#0f172abf!important;border-bottom:1.5px solid #38bdf880!important}.magic-fighter-page .topbar .topbar-left{align-items:center;gap:12px;display:flex}.magic-fighter-page .topbar .game-name{font-family:var(--font-family-display,sans-serif);text-shadow:0 2px 10px #0284c766;font-size:1.1rem;font-weight:700;color:#38bdf8!important}.magic-fighter-page .topbar .btn-ghost{color:#f8fafc!important}.magic-fighter-main{flex:1;gap:20px;width:100%;max-width:1280px;margin:0 auto;padding:16px;display:flex;overflow:hidden}.magic-panel-left{flex-direction:column;gap:16px;width:320px;display:flex;overflow-y:auto}.panel-card{-webkit-backdrop-filter:blur(16px);color:#f8fafc;background:#0f172ad1;border:1.5px solid #38bdf866;border-radius:20px;flex-direction:column;gap:16px;padding:20px;display:flex;box-shadow:0 12px 30px #0284c74d}.panel-subtitle{font-family:var(--font-family-display,sans-serif);color:#38bdf8;margin:0;font-size:1.2rem}.panel-desc{color:#cbd5e1;margin:0;font-size:.85rem;line-height:1.4}.hud-box{background:#0f172abf;border:1px solid #38bdf840;border-radius:14px;grid-template-columns:1fr 1fr;gap:10px;padding:12px;display:grid}.hud-item{flex-direction:column;gap:2px;display:flex}.hud-label{color:#94a3b8;text-transform:uppercase;font-size:.7rem;font-weight:600}.hud-value{color:#38bdf8;font-family:Chakra Petch,monospace;font-size:1.1rem;font-weight:700}.summon-shop-box{background:#0f172acc;border:1px solid #38bdf859;border-radius:14px;flex-direction:column;gap:10px;padding:12px;display:flex}.summon-btn-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.summon-btn{justify-content:center;align-items:center;padding:8px 6px;font-size:.75rem;font-weight:700;display:flex}.actions-box{flex-direction:column;gap:10px;display:flex}.magic-stage-container{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-wrapper-3d{aspect-ratio:1;border:3px solid #fffc;border-radius:24px;justify-content:center;align-items:center;width:100%;max-width:600px;display:flex;position:relative;overflow:hidden;box-shadow:0 16px 45px #0284c766,0 0 35px #38bdf84d;background:#7dd3fc!important}.canvas-wrapper-3d canvas{object-fit:cover;display:block;width:100%!important;height:100%!important}.quick-summon-bar{backdrop-filter:blur(12px);z-index:20;background:#0f172ad9;border:1px solid #38bdf880;border-radius:100px;gap:6px;padding:6px 10px;display:flex;position:absolute;bottom:20px;right:20px}.qsummon-btn{color:#f8fafc;border-radius:100px;padding:4px 10px;font-size:.75rem;font-weight:700}.game-over-overlay{backdrop-filter:blur(12px);z-index:50;background:#0f172ae0;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.game-over-content{text-align:center;color:#f8fafc;background:#1e293bf2;border:2px solid #38bdf8;border-radius:24px;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:320px;padding:32px 24px;display:flex;box-shadow:0 20px 50px #38bdf866}.game-over-content h2{color:#38bdf8;margin:0;font-size:1.5rem}.game-over-content p{color:#cbd5e1;margin:0;font-size:.95rem}.go-reward{color:#2ec4b6;background:#2ec4b626;border:1px solid #2ec4b64d;border-radius:100px;padding:6px 14px;font-family:Chakra Petch,monospace;font-size:1.1rem;font-weight:700}.game-over-actions{gap:10px;width:100%;display:flex}.game-over-actions .btn{flex:1}.mobile-3d-controller-bar{justify-content:space-between;align-items:center;width:100%;padding:12px 16px;display:none;position:relative}.joystick-touch-zone{touch-action:none;background:#ffffff1a;border:1px dashed #fff6;border-radius:16px;flex:1;justify-content:center;align-items:center;height:90px;display:flex;position:relative}.joystick-hint{color:#ffffffb3;pointer-events:none;font-size:.72rem}.mobile-fire-btn-3d{color:#fff;touch-action:manipulation;background:linear-gradient(135deg,#0284c7,#38bdf8);border:2px solid #fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:78px;height:78px;margin-left:16px;font-size:1.6rem;display:flex;box-shadow:0 8px 20px #0284c780}.mobile-fire-btn-3d span{font-size:.65rem;font-weight:700}.mobile-fire-btn-3d:active{transform:scale(.9)}@media (width<=768px){.magic-fighter-main{flex-direction:column;gap:8px;padding:8px}.magic-panel-left{width:100%}.mobile-hidden{display:none!important}.mobile-visible{display:flex!important}.mobile-3d-controller-bar{display:flex}.canvas-wrapper-3d{max-width:92vw;max-height:50vh}}.guide-page-container{color:#0f172a;flex-direction:column;gap:20px;width:100%;max-width:1100px;min-height:100vh;margin:0 auto;padding:24px 16px 40px;display:flex}.guide-header{border-bottom:2px solid #e2e8f0;flex-direction:column;gap:12px;padding-bottom:16px;display:flex}.guide-header-title h2{color:#ea580c;font-size:1.6rem;font-family:var(--font-family-display);margin:8px 0 4px;font-weight:700}.guide-header-title p{color:#475569;margin:0;font-size:.95rem;font-weight:500}.guide-tabs-bar{border-bottom:2px solid #ea580c33;flex-wrap:wrap;gap:10px;padding-bottom:6px;display:flex}.guide-tab-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:12px;padding:10px 20px;font-size:.95rem;font-weight:600;transition:all .2s}.guide-tab-btn:hover{color:#ea580c;background:#ffedd5;border-color:#fdba74}.guide-tab-btn.active{color:#fff;background:#ea580c;border-color:#ea580c;box-shadow:0 4px 14px #ea580c59}.guide-content-area{color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:32px;box-shadow:0 20px 45px #0f172a1a}.guide-article{flex-direction:column;gap:24px;display:none}.guide-article.active{display:flex}.guide-article h3{color:#ea580c;border-bottom:2px solid #f1f5f9;margin:0;padding-bottom:14px;font-size:1.45rem;font-weight:700}.guide-section{flex-direction:column;gap:10px;display:flex}.guide-section h4{color:#0284c7;margin:0;font-size:1.15rem;font-weight:700}.guide-section p{color:#1e293b;margin:0;font-size:.96rem;font-weight:500;line-height:1.7}.guide-section ul,.guide-section ol{color:#1e293b;margin:6px 0 0 22px;padding:0;font-size:.95rem;font-weight:500;line-height:1.7}.guide-section li{color:#1e293b;margin-bottom:8px}.guide-section li strong{color:#0f172a;font-weight:700}@media (width<=768px){.guide-page-container{padding:16px 12px 30px}.guide-content-area{padding:20px 16px}.guide-tab-btn{text-align:center;flex:1;padding:8px 12px;font-size:.88rem}}