:root{--touch-target-min: 44px;--touch-target-comfortable: 48px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--grid-cell-size: calc((100vw - 24px)/4) ;--grid-cell-height: calc(var(--grid-cell-size) * 1.25);--card-width: 85px;--card-width-small: 70px;--character-scale: .6;--color-primary: #3F51B5;--color-primary-dark: #000000;--color-accent: #FF4081;--color-attack: #510000;--color-move: #7c7c7c;--color-defend: #004A0A;--color-background: #0a0a0a;--color-background-dark: #0a0a12;--color-surface: #1a1a1f;--color-surface-light: #2a2a35;--color-card: #12121a;--color-text: #ffffff;--color-text-secondary: #a0a0b0;--color-text-muted: #7f8c8d;--color-error: #ff4444;--color-error-light: #ff6b6b;--color-success: #4CAF50;--color-warning: #FFC107;--color-theme: #e0e0e0;--color-theme-light: #f5f5f5;--color-theme-dark: #bdbdbd;--color-gold: #e0e0e0;--color-gold-dark: #bdbdbd;--color-health: #4CAF50;--color-health-medium: #FFC107;--color-health-low: #f44336;--color-energy: #2196F3;--color-rank-grandmaster: #ff6b6b;--color-rank-master: #9b59b6;--color-rank-diamond: #00d4ff;--color-rank-platinum: #1abc9c;--color-rank-gold: #f1c40f;--color-rank-silver: #95a5a6;--color-rank-bronze: #cd6133;--color-rank-unranked: #7f8c8d;--gradient-theme: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);--gradient-theme-hover: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);--gradient-gold: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);--gradient-surface: linear-gradient(180deg, #2a2a35 0%, #1a1a25 100%);--gradient-surface-hover: linear-gradient(180deg, #3a3a45 0%, #2a2a35 100%);--gradient-overlay: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(20,20,30,.9) 100%);--gradient-glass: linear-gradient(180deg, rgba(20,20,30,.95) 0%, rgba(10,10,15,.98) 100%);--gradient-health-high: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);--gradient-health-medium: linear-gradient(180deg, #FFC107 0%, #FF9800 100%);--gradient-health-low: linear-gradient(180deg, #f44336 0%, #c62828 100%);--gradient-energy: linear-gradient(180deg, #2196F3 0%, #1565C0 100%);--shadow-sm: 0 2px 8px rgba(0,0,0,.2);--shadow-md: 0 4px 20px rgba(0,0,0,.3);--shadow-lg: 0 10px 40px rgba(0,0,0,.4);--shadow-xl: 0 20px 60px rgba(0,0,0,.5);--shadow-theme: 0 0 20px rgba(255,255,255,.15);--shadow-theme-lg: 0 10px 30px rgba(255,255,255,.2);--shadow-gold: 0 0 20px rgba(255,255,255,.15);--shadow-gold-lg: 0 10px 30px rgba(255,255,255,.2);--shadow-inset: inset 0 2px 4px rgba(255,255,255,.2);--border-subtle: 2px solid rgba(255,255,255,.1);--border-gold: 2px solid var(--color-gold);--border-muted: 2px solid var(--color-move);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-round: 50%;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.1rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.75rem;--font-size-4xl: 2rem;--font-size-5xl: 2.5rem;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--transition-slower: .5s ease-out;--z-base: 0;--z-card: 10;--z-dropdown: 100;--z-modal: 1000;--z-tooltip: 2000}@media(min-width:600px){:root{--grid-cell-size: 100px;--grid-cell-height: 125px;--card-width: 100px;--card-width-small: 80px;--character-scale: .8}}@media(min-width:900px){:root{--grid-cell-size: 160px;--grid-cell-height: 200px;--card-width: 140px;--card-width-small: 100px;--character-scale: 1}}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{font-family:var(--font-family, "Segoe UI", system-ui, -apple-system, sans-serif);line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;min-width:320px}a{color:inherit;text-decoration:none}img,picture,video,canvas{display:block;max-width:100%}svg{flex-shrink:0}input,button,textarea,select{font:inherit}button{background:none;border:none;padding:0;cursor:pointer;color:inherit}ul,ol{list-style:none}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{isolation:isolate}.game-screen{overscroll-behavior:none;touch-action:manipulation}.full-height{height:100vh;height:100dvh}body.no-scroll{overflow:hidden!important;position:fixed;width:100%;height:100%}button,.btn,[role=button],.clickable{min-height:var(--touch-target-min);min-width:var(--touch-target-min)}button:active:not(:disabled),.btn:active:not(:disabled),[role=button]:active:not(:disabled){transform:scale(.97);opacity:.9}@media(hover:none)and (pointer:coarse){button:hover,.btn:hover,.card:hover,.character-card:hover{transform:none;box-shadow:inherit}}.horizontal-scroll{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:.5rem;padding:.5rem;scrollbar-width:none;-ms-overflow-style:none}.horizontal-scroll::-webkit-scrollbar{display:none}.horizontal-scroll>*{scroll-snap-align:center;flex-shrink:0}.bottom-drawer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(0deg,#000000f2,#000000d9);border-top:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;z-index:var(--z-dropdown);padding:.5rem;padding-bottom:calc(.5rem + var(--safe-area-bottom));transform:translateY(0);transition:transform .3s ease}.bottom-drawer.collapsed{transform:translateY(calc(100% - 60px))}.bottom-drawer-handle{width:40px;height:4px;background:#ffffff4d;border-radius:2px;margin:0 auto .5rem}.bottom-drawer-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:.5rem}.drawer-tab{padding:.5rem 1rem;border-radius:20px;background:#ffffff1a;color:var(--color-text-secondary);font-size:.8rem;border:none;cursor:pointer;transition:all .2s ease}.bottom-drawer-content{display:flex;justify-content:center;gap:.5rem;padding:.5rem 0;overflow-x:auto;scroll-snap-type:x mandatory}.fixed-bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem;padding-bottom:calc(1rem + var(--safe-area-bottom));background:linear-gradient(transparent,#000000e6);z-index:var(--z-dropdown);pointer-events:none}.fixed-bottom-nav>*{pointer-events:auto}.safe-top{padding-top:var(--safe-area-top)}.safe-bottom{padding-bottom:var(--safe-area-bottom)}.safe-left{padding-left:var(--safe-area-left)}.safe-right{padding-right:var(--safe-area-right)}.safe-all{padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right)}.desktop-only{display:none!important}@media(min-width:900px){.desktop-only{display:flex!important}.desktop-only.block{display:block!important}.desktop-only.grid{display:grid!important}.mobile-only{display:none!important}}.mobile-only{display:flex!important}.mobile-only.block{display:block!important}.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1rem}@media(min-width:600px){h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}}@media(min-width:900px){h1{font-size:2.5rem}h2{font-size:1.75rem}h3{font-size:1.5rem}}.expandable{overflow:hidden;transition:max-height .3s ease,opacity .3s ease}.expandable.collapsed{max-height:0;opacity:0}.expandable.expanded{max-height:500px;opacity:1}.expand-indicator{transition:transform .3s ease}.expanded .expand-indicator{transform:rotate(180deg)}@media(orientation:portrait){.landscape-only{display:none!important}}@media(orientation:landscape){.portrait-only{display:none!important}@media(max-height:500px){.landscape-compact{padding:.5rem}.landscape-row{flex-direction:row!important}}}.skeleton{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a,#ffffff0d 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.horizontal-scroll{scroll-behavior:auto}}.audio-settings{position:fixed;top:1rem;right:1rem;z-index:1000}.header-right .audio-settings{position:relative;top:auto;right:auto}.audio-toggle-btn{width:48px;height:48px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.15);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;box-shadow:none}.audio-toggle-btn:hover{background:#ffd70026;border-color:var(--color-gold);color:var(--color-gold);transform:scale(1.05) rotate(45deg);box-shadow:0 0 20px #ffd70033}.audio-toggle-btn svg{width:24px;height:24px}.audio-panel{position:absolute;top:64px;right:0;width:260px;background:#14141ef2;border:2px solid rgba(255,255,255,.15);border-radius:12px;padding:0;box-shadow:0 10px 40px #00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.audio-panel-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}.audio-panel-header span{font-size:.85rem;font-weight:700;color:var(--color-gold);text-transform:uppercase;letter-spacing:1px}.close-btn{background:none;border:none;color:var(--color-text-secondary);font-size:1.5rem;cursor:pointer;line-height:1;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--color-text)}.volume-sliders{padding:1rem;display:flex;flex-direction:column;gap:1rem}.volume-row{display:flex;align-items:center;gap:.75rem}.volume-row label{font-size:.85rem;color:var(--color-text);width:55px;flex-shrink:0}.volume-row input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:3px;cursor:pointer}.volume-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-gold);cursor:pointer;transition:transform .2s}.volume-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-gold);cursor:pointer;border:none}.volume-value{font-size:.75rem;color:var(--color-text-secondary);width:36px;text-align:right;flex-shrink:0}.settings-divider{height:1px;background:#ffffff1a;margin:0}.leave-game-btn{width:100%;padding:.875rem 1rem;display:flex;align-items:center;gap:.75rem;background:transparent;border:none;color:#ff6b6b;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left}.leave-game-btn:hover{background:#ff6b6b26}.leave-icon{width:18px;height:18px;flex-shrink:0}.confirm-section{padding:1rem}.confirm-text{font-size:.9rem;color:var(--color-text);margin:0 0 1rem;text-align:center;line-height:1.4}.confirm-buttons{display:flex;gap:.5rem}.confirm-btn{flex:1;padding:.625rem .75rem;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.confirm-btn.cancel{background:#ffffff1a;color:var(--color-text);border:1px solid rgba(255,255,255,.2)}.confirm-btn.cancel:hover{background:#fff3}.confirm-btn.forfeit{background:linear-gradient(180deg,#ff6b6b,#c0392b);color:#fff}.confirm-btn.forfeit:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b66}@media(max-width:600px){.audio-settings{top:.5rem;right:.5rem}.audio-toggle-btn{width:44px;height:44px}.audio-toggle-btn svg{width:22px;height:22px}.audio-panel{width:240px;top:52px}.volume-row label{width:50px;font-size:.8rem}.volume-value{width:32px;font-size:.7rem}}.profile-page{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;padding-top:calc(55px + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));position:relative}.profile-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:calc(55px + var(--safe-area-top));padding-top:var(--safe-area-top);padding-left:.75rem;padding-right:.75rem;background:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 70%,transparent 100%);z-index:var(--z-sticky)}.profile-header .page-title{position:absolute;left:50%;transform:translate(-50%);font-size:1rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:2px;margin:0}.profile-content{background:linear-gradient(180deg,#000c,#14141ee6);border-radius:16px;border:2px solid rgba(255,255,255,.1);box-shadow:0 15px 40px #00000080;padding:1.25rem;max-width:380px;width:100%}.user-card{text-align:center;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.avatar-container{margin-bottom:.75rem}.avatar-placeholder{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--color-gold) 0%,#b8860b 100%);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#0a0a12;margin:0 auto;border:3px solid rgba(255,215,0,.5);box-shadow:0 6px 20px #ffd7004d}.user-card .username{font-size:1.25rem;color:var(--color-text);margin:0 0 .2rem}.user-card .email{color:var(--color-text-secondary);margin:0;font-size:.8rem}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1.25rem}.stat-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem;text-align:center;transition:all .2s ease}.stat-card:active{transform:scale(.98);border-color:#fff3}.stat-card.wins{border-color:#4caf504d;background:#4caf501a}.stat-card.losses{border-color:#f443364d;background:#f443361a}.stat-card.total{border-color:#2196f34d;background:#2196f31a}.stat-card.winrate{border-color:#ffd7004d;background:#ffd7001a}.stat-icon{font-size:1.1rem;margin-bottom:.2rem}.stat-value{font-size:1.25rem;font-weight:700;color:var(--color-text);margin-bottom:.1rem}.stat-label{font-size:.6rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.winrate-section{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.875rem;margin-bottom:1.25rem}.winrate-section h3{margin:0 0 .6rem;color:var(--color-text);font-size:.75rem;text-transform:uppercase;letter-spacing:1px}.winrate-bar{display:flex;height:26px;border-radius:13px;overflow:hidden;background:#0000004d}.winrate-fill{display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;transition:width .5s ease}.winrate-fill.wins{background:linear-gradient(90deg,#4caf50,#66bb6a)}.winrate-fill.losses{background:linear-gradient(90deg,#e53935,#f44336)}.winrate-legend{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.65rem}.legend-wins{color:#4caf50}.legend-losses{color:#f44336}.quick-actions{margin-bottom:1.25rem}.quick-actions h3{margin:0 0 .6rem;color:var(--color-text);font-size:.75rem;text-transform:uppercase;letter-spacing:1px}.action-buttons{display:flex;flex-direction:column;gap:.4rem}.action-btn{display:flex;align-items:center;gap:.6rem;padding:.75rem .875rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--color-text);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-comfortable)}.action-btn:active{background:#ffffff1a;border-color:#fff3;transform:scale(.98)}.action-btn.play{background:linear-gradient(135deg,#ffd70026,#ffd7000d);border-color:#ffd7004d}.action-btn.play:active{border-color:var(--color-gold)}.action-btn.ranked{background:linear-gradient(135deg,#9c27b026,#9c27b00d);border-color:#9c27b04d}.action-btn.ranked:active{border-color:#9c27b0}.action-icon{font-size:1rem}.bottom-buttons{display:flex;gap:.6rem}.back-home-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem;background:transparent;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:var(--color-text-secondary);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-comfortable)}.back-home-btn:active{background:#ffffff0d;border-color:#fff6;color:var(--color-text)}.logout-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem;background:transparent;border:2px solid rgba(255,107,107,.3);border-radius:8px;color:#ff6b6b;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-comfortable)}.logout-btn:active{background:#ff6b6b26;border-color:#ff6b6b}@media(min-width:600px){.profile-page{padding-top:calc(60px + var(--safe-area-top))}.profile-header{height:calc(60px + var(--safe-area-top));padding-left:1rem;padding-right:1rem}.profile-header .page-title{font-size:1.1rem;letter-spacing:2.5px}.profile-content{padding:1.5rem;max-width:420px;border-radius:18px}.avatar-placeholder{width:75px;height:75px;font-size:2.25rem}.user-card .username{font-size:1.35rem}.stats-grid{gap:.6rem}.stat-card{padding:.875rem}.stat-value{font-size:1.35rem}.stat-label{font-size:.65rem}}@media(min-width:900px){.profile-page{padding-top:calc(70px + var(--safe-area-top))}.profile-header{height:calc(70px + var(--safe-area-top));padding-left:1.5rem;padding-right:1.5rem}.profile-header .page-title{font-size:1.25rem;letter-spacing:3px}.profile-content{padding:2rem;max-width:450px;border-radius:20px;box-shadow:0 20px 60px #00000080}.user-card{margin-bottom:1.5rem;padding-bottom:1.5rem}.avatar-placeholder{width:80px;height:80px;font-size:2.5rem;box-shadow:0 8px 25px #ffd7004d}.user-card .username{font-size:1.5rem}.user-card .email{font-size:.85rem}.stats-grid{gap:.75rem;margin-bottom:1.5rem}.stat-card{padding:1rem;border-radius:12px}.stat-card:hover{transform:translateY(-2px);border-color:#fff3}.stat-icon{font-size:1.25rem}.stat-value{font-size:1.5rem}.stat-label{font-size:.7rem;letter-spacing:1px}.winrate-section{padding:1rem;margin-bottom:1.5rem;border-radius:12px}.winrate-section h3{font-size:.85rem;margin-bottom:.75rem}.winrate-bar{height:30px;border-radius:15px}.winrate-fill{font-size:.75rem}.winrate-legend{font-size:.7rem;margin-top:.5rem}.quick-actions{margin-bottom:1.5rem}.quick-actions h3{font-size:.85rem;margin-bottom:.75rem}.action-buttons{gap:.5rem}.action-btn{padding:.875rem 1rem;border-radius:10px;font-size:.9rem}.action-btn:hover{background:#ffffff1a;border-color:#fff3;transform:translate(3px)}.action-btn.play:hover{border-color:var(--color-gold)}.action-btn.ranked:hover{border-color:#9c27b0}.action-icon{font-size:1.1rem}.bottom-buttons{gap:.75rem}.back-home-btn,.logout-btn{padding:.875rem;border-radius:10px;font-size:.9rem}.back-home-btn:hover{background:#ffffff0d;border-color:#fff6;color:var(--color-text)}.logout-btn:hover{background:#ff6b6b1a;border-color:#ff6b6b}}@media(orientation:landscape)and (max-height:500px){.profile-page{padding-top:calc(45px + var(--safe-area-top));padding-bottom:calc(.5rem + var(--safe-area-bottom));justify-content:flex-start;overflow-y:auto}.profile-header{height:calc(45px + var(--safe-area-top))}.profile-header .page-title{font-size:.85rem}.profile-content{padding:.875rem;max-width:450px}.user-card{margin-bottom:.75rem;padding-bottom:.75rem}.avatar-placeholder{width:50px;height:50px;font-size:1.5rem}.user-card .username{font-size:1rem}.stats-grid{grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.75rem}.stat-card{padding:.5rem;border-radius:6px}.stat-icon{font-size:.9rem}.stat-value{font-size:1rem}.stat-label{font-size:.5rem}.winrate-section{padding:.6rem;margin-bottom:.75rem}.winrate-section h3{font-size:.65rem;margin-bottom:.4rem}.winrate-bar{height:20px}.quick-actions{margin-bottom:.75rem}.quick-actions h3{font-size:.65rem;margin-bottom:.4rem}.action-buttons{flex-direction:row;gap:.4rem}.action-btn{flex:1;padding:.5rem;font-size:.7rem;min-height:36px}.bottom-buttons{gap:.4rem}.back-home-btn,.logout-btn{padding:.5rem;font-size:.7rem;min-height:36px}}@media(prefers-reduced-motion:reduce){.stat-card,.action-btn,.back-home-btn,.logout-btn,.winrate-fill{transition:none}}.character{position:relative;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,transform .5s ease}.character-tiny{width:40px;height:60px}.character-small{width:80px;height:120px}.character-medium{width:120px;height:180px}.character-large{width:160px;height:240px}.character-animation{width:100%;height:100%}.character.facing-left{transform:scaleX(-1)}.character.moving{animation:characterBounce .3s ease-in-out infinite}@keyframes characterBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.character.facing-left.moving{animation:characterBounceMirrored .3s ease-in-out infinite}@keyframes characterBounceMirrored{0%,to{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-10px)}}.character.vanished{opacity:.3;filter:blur(2px)}.vanished-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:.5rem 1rem;background-color:#000c;border-radius:6px;border:2px solid var(--color-gold);z-index:10}.character.facing-left .vanished-overlay{transform:translate(-50%,-50%) scaleX(-1)}.vanished-overlay span{font-size:.75rem;font-weight:700;color:var(--color-gold);text-transform:uppercase;letter-spacing:1px}.waiting-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease}.waiting-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 3rem;background:#1a1a2ef2;border:2px solid rgba(255,215,0,.3);border-radius:16px;box-shadow:0 0 40px #00000080}.waiting-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--color-gold, #ffd700);border-radius:50%;animation:spin 1s linear infinite}.waiting-message{font-size:1.5rem;color:#fff;margin:0;text-align:center}.waiting-sub-message{font-size:1rem;color:#fff9;margin:0;text-align:center}.card{display:flex;flex-direction:column;width:var(--card-width);background:radial-gradient(ellipse 80% 80% at center,#27282d,#0f1016);border:2px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;box-shadow:0 3px 12px #0006;transform-origin:center bottom;flex-shrink:0}.card:active:not(.disabled){transform:scale(.97);border-color:var(--color-gold)}.card.selected{border-color:var(--color-gold);box-shadow:0 0 20px #ffd70066,inset 0 0 30px #ffd7000f}.card.disabled{opacity:.4;cursor:not-allowed;filter:grayscale(50%)}.card-small{width:calc(var(--card-width) * .75)}.card-medium{width:var(--card-width)}.card-large{width:calc(var(--card-width) * 1.2)}.card-header{padding:.4rem .35rem;background:#00000080;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}.card-name{font-size:.6rem;font-weight:700;color:var(--color-text);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card.selected .card-name{color:var(--color-gold)}.card-small .card-name{font-size:.5rem}.card-large .card-name{font-size:.7rem}.card-image-container{display:flex;align-items:center;justify-content:center;padding:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.05) 0%,transparent 70%);aspect-ratio:1;position:relative;overflow:hidden}.card-image{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}.card.selected .card-image{filter:drop-shadow(0 0 8px rgba(255,215,0,.4))}.card-image-container.has-background{background:none}.card-background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.card-foreground{position:relative;z-index:1;width:auto;height:auto;max-width:85%;max-height:85%;object-fit:contain}.card-footer{display:flex;justify-content:space-between;align-items:center;padding:.4rem;background:#00000080;gap:.35rem;border-top:1px solid rgba(255,255,255,.1)}.card-stats{display:flex;flex-direction:column;gap:.2rem;min-width:28px}.card-damage{display:inline-flex;align-items:center;justify-content:center;padding:.15rem .3rem;font-size:.55rem;font-weight:700;color:#fff;background:linear-gradient(180deg,#f44,#a00);border-radius:3px;box-shadow:0 1px 4px #f006}.card-energy{display:inline-flex;align-items:center;justify-content:center;padding:.15rem .3rem;font-size:.55rem;font-weight:700;color:#fff;background:linear-gradient(180deg,#42a5f5,#1565c0);border-radius:3px;box-shadow:0 1px 4px #2196f366}.card-energy.positive{background:linear-gradient(180deg,#66bb6a,#2e7d32);box-shadow:0 1px 4px #00c80066}.card-small .card-damage,.card-small .card-energy{font-size:.5rem;padding:.1rem .2rem}.card-large .card-damage,.card-large .card-energy{font-size:.65rem;padding:.2rem .35rem}.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;width:28px;height:28px;background:#0006;padding:2px;border-radius:3px;border:1px solid rgba(255,255,255,.15)}.card-small .pattern-grid{width:24px;height:24px}.card-large .pattern-grid{width:36px;height:36px;gap:2px;padding:3px}.pattern-cell{background:#1e1e28cc;border-radius:1px;transition:all .2s ease}.pattern-cell.active.attack{background:var(--color-attack);box-shadow:inset 0 0 4px #f009}.pattern-cell.active.move{background:var(--color-move);box-shadow:inset 0 0 4px #7c7c7c99}.pattern-cell.active.defend{background:var(--color-defend);box-shadow:inset 0 0 4px #0f09}@media(min-width:600px){.card{border-radius:10px;box-shadow:0 4px 15px #0006}.card-header{padding:.5rem .45rem}.card-name{font-size:.7rem;letter-spacing:.75px}.card-small .card-name{font-size:.55rem}.card-large .card-name{font-size:.8rem}.card-image-container{padding:0}.card-footer{padding:.5rem;gap:.4rem}.card-stats{min-width:35px;gap:.25rem}.card-damage,.card-energy{font-size:.65rem;padding:.18rem .35rem;border-radius:4px}.pattern-grid{width:36px;height:36px;gap:2px;padding:3px;border-radius:4px}.card-small .pattern-grid{width:28px;height:28px}.card-large .pattern-grid{width:48px;height:48px}}@media(min-width:900px){.card{border-radius:10px;box-shadow:0 4px 15px #0006}.card:hover:not(.disabled){transform:scale(1.05);border-color:var(--color-gold);box-shadow:0 8px 30px #ffd70040;z-index:10}.card.selected{box-shadow:0 0 25px #ffd70080,inset 0 0 40px #ffd70014}.card-header{padding:.6rem .5rem}.card-name{font-size:.75rem;letter-spacing:1px}.card-small .card-name{font-size:.6rem}.card-large .card-name{font-size:.85rem}.card-image-container{padding:0}.card-image{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}.card.selected .card-image{filter:drop-shadow(0 0 10px rgba(255,215,0,.5))}.card-foreground{width:auto;height:auto;max-width:90%;max-height:90%;object-fit:contain}.card-footer{padding:.6rem;gap:.5rem}.card-stats{min-width:40px;gap:.3rem}.card-damage,.card-energy{font-size:.7rem;padding:.2rem .4rem}.card-small .card-damage,.card-small .card-energy{font-size:.6rem;padding:.15rem .3rem}.pattern-grid{width:42px;height:42px;gap:2px;padding:3px}.card-small .pattern-grid{width:32px;height:32px}.card-large .pattern-grid{width:54px;height:54px}.pattern-cell{border-radius:2px}.pattern-cell.active.attack{box-shadow:inset 0 0 6px #f009}.pattern-cell.active.move{box-shadow:inset 0 0 6px #7c7c7c99}.pattern-cell.active.defend{box-shadow:inset 0 0 6px #0f09}}@media(orientation:landscape)and (max-height:500px){.card{border-radius:6px}.card-header{padding:.3rem .25rem}.card-name{font-size:.5rem}.card-image-container{padding:0}.card-footer{padding:.3rem;gap:.25rem}.card-stats{min-width:22px;gap:.15rem}.card-damage,.card-energy{font-size:.45rem;padding:.1rem .2rem;border-radius:2px}.pattern-grid{width:22px;height:22px;gap:1px;padding:1px;border-radius:2px}}@media(prefers-reduced-motion:reduce){.card,.pattern-cell,.status-bar-fill{transition:none}}.character-select-container{width:100%;min-height:100vh;min-height:100dvh;padding:1rem;padding-top:calc(1rem + var(--safe-area-top));padding-bottom:calc(6rem + var(--safe-area-bottom));display:flex;flex-direction:column;align-items:center;gap:1rem;box-sizing:border-box;overflow-x:hidden}.page-title{font-size:1.25rem;text-align:center;color:#fff;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.6);text-transform:uppercase;letter-spacing:2px;padding:.75rem 1.25rem;background:linear-gradient(180deg,#000000b3,#00000080);border-radius:10px;border:2px solid rgba(255,255,255,.15)}.characters-grid{display:flex;flex-direction:row;gap:.75rem;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.5rem .5rem 1rem;scrollbar-width:none;flex-wrap:nowrap}.characters-grid::-webkit-scrollbar{display:none}.character-card{display:flex;flex-direction:column;min-width:280px;max-width:300px;flex-shrink:0;padding:1rem;background:linear-gradient(180deg,#14141ee6,#0a0a0ff2);border:2px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #0000004d;overflow:hidden;scroll-snap-align:center}.character-card:active:not(.disabled){transform:scale(.98)}.character-card.selected{border-color:#ffffff80;box-shadow:0 0 20px #ffffff26,inset 0 0 30px #ffffff08}.character-card.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(50%)}.character-card-header{display:flex;align-items:center;gap:.75rem;width:100%}.character-preview{width:60px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(255,255,255,.05) 0%,transparent 70%);border-radius:8px}.character-avatar{width:60px;height:60px;border-radius:50%;border:3px solid rgba(255,255,255,.25);object-fit:cover;flex-shrink:0;box-shadow:0 0 15px #ffffff1a}.character-card.selected .character-avatar{border-color:#fff;box-shadow:0 0 20px #ffffff40}.character-info{flex:1;min-width:0}.character-name{font-size:1.1rem;color:#fff;margin:0 0 .25rem;text-transform:uppercase;letter-spacing:2px}.character-description{font-size:.75rem;color:var(--color-text-secondary);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.expand-indicator{width:24px;height:24px;flex-shrink:0;color:#fff6;transition:transform .3s ease,color .3s ease}.character-card.expanded .expand-indicator{transform:rotate(180deg);color:#fffc}.character-abilities{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,padding .3s ease;background:#0000004d;border-radius:8px;padding:0;margin-top:0}.character-card.expanded .character-abilities{max-height:400px;opacity:1;padding:.75rem;margin-top:.75rem}.character-abilities h3{font-size:.7rem;color:var(--color-text-secondary);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:1px;text-align:center}.character-abilities ul{list-style:none;padding:0;margin:0;display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}.character-abilities ul::-webkit-scrollbar{display:none}.character-abilities li{flex-shrink:0;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.75rem;color:var(--color-text);padding:.5rem;background:#ffffff0d;border-radius:6px;border-left:2px solid var(--color-attack);min-width:90px;text-align:center}.character-abilities li .ability-name{font-weight:700;font-size:.7rem}.character-abilities li .ability-stats{font-size:.65rem;color:var(--color-text-secondary);display:flex;gap:.5rem}.ability-stats .damage{color:#ff6b6b}.ability-stats .energy{color:var(--color-energy)}.selection-summary{display:flex;gap:.75rem;padding:.75rem 1rem;background:#00000080;border-radius:10px;border:1px solid rgba(255,255,255,.1);width:100%;max-width:400px;justify-content:center}.player-selection{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#ffffff0d;border-radius:8px;flex:1;max-width:160px}.player-selection span{font-weight:700;color:var(--color-text);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-selection.selected{border:2px solid rgba(255,255,255,.4);background:#ffffff1a}.summary-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3);flex-shrink:0}.not-selected{font-style:italic;color:var(--color-text-secondary)!important;font-weight:400!important;font-size:.75rem!important}.nav-buttons{position:fixed;bottom:0;left:0;right:0;display:flex;gap:1.5rem;justify-content:center;align-items:center;padding:1rem;padding-bottom:calc(1rem + var(--safe-area-bottom));background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 70%,transparent 100%);z-index:var(--z-dropdown)}.nav-btn{width:60px;height:60px;border-radius:50%;border:2px solid;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;padding:0;position:relative;overflow:hidden;min-width:var(--touch-target-comfortable);min-height:var(--touch-target-comfortable)}.nav-btn:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s ease}.nav-btn svg{width:28px;height:28px;transition:all .3s ease;position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.nav-btn.back{background:linear-gradient(145deg,#2a2a35,#1a1a22,#0f0f14);border-color:#444;color:#888;box-shadow:0 4px 15px #00000080,inset 0 1px #ffffff1a,inset 0 -2px #0000004d}.nav-btn.back:before{background:radial-gradient(circle at center,rgba(255,255,255,.1) 0%,transparent 70%)}.nav-btn.back:active:not(:disabled){transform:scale(.95);box-shadow:0 2px 10px #0006,inset 0 2px 4px #0000004d}.nav-btn.next{width:70px;height:70px;border-radius:50%;background-image:url(/images/gobutton.webp);background-size:contain;background-position:center;background-repeat:no-repeat;background-color:transparent!important;border:none!important;box-shadow:none!important}.nav-btn.next:hover,.nav-btn.next:focus{transform:none!important;filter:none!important;animation:none!important;background-image:url(/images/gobutton.webp)!important;background-color:transparent!important;background-size:contain!important}.nav-btn.next:hover *,.nav-btn.next:focus *{transform:none!important}.nav-btn:disabled svg{transform:none!important}.view-cards-btn{width:100%;padding:.6rem;margin-top:.5rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fffc;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px;min-height:var(--touch-target-min)}.view-cards-btn:active{background:#ffffff26;transform:scale(.98)}.cards-preview-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:1rem;padding-top:calc(1rem + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.cards-preview-content{background:linear-gradient(180deg,#1a1a22,#12121a);border-radius:16px;border:2px solid rgba(255,255,255,.1);padding:1rem;width:100%;max-width:100%;max-height:100%;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.cards-preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}.cards-preview-header h2{font-size:1.1rem;color:#fff;margin:0;display:flex;align-items:center;gap:.75rem}.cards-preview-header .preview-avatar{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}.close-preview-btn{background:#ffffff1a;border:none;color:#fff;width:var(--touch-target-min);height:var(--touch-target-min);border-radius:50%;font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.close-preview-btn:active{background:#fff3;transform:scale(.95)}.cards-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.preview-card-item{background:#ffffff0d;border-radius:10px;padding:.75rem;border:1px solid rgba(255,255,255,.1);text-align:center}.preview-card-item img{width:100%;max-width:80px;height:auto;margin-bottom:.5rem;border-radius:6px}.preview-card-item h4{color:#fff;margin:0 0 .3rem;font-size:.8rem}.preview-card-item .card-stats{display:flex;justify-content:center;gap:.75rem;font-size:.7rem}.preview-card-item .damage{color:#ff6b6b}.preview-card-item .energy{color:#64b5f6}.preview-card-wrapper{display:flex;justify-content:center}@media(min-width:600px){.character-select-container{padding:1.5rem;padding-top:calc(1.5rem + var(--safe-area-top));padding-bottom:calc(7rem + var(--safe-area-bottom));gap:1.5rem}.page-title{font-size:1.5rem;letter-spacing:3px;padding:1rem 1.5rem}.characters-grid{gap:1rem}.character-card{padding:1.25rem}.character-preview{width:80px;height:100px}.character-avatar{width:70px;height:70px}.character-name{font-size:1.25rem}.character-description{font-size:.8rem}.character-abilities li{min-width:100px;font-size:.8rem}.selection-summary{gap:1rem;padding:1rem 1.5rem}.player-selection{max-width:180px;padding:.6rem 1rem}.summary-avatar{width:40px;height:40px}.nav-buttons{gap:2rem}.nav-btn{width:70px;height:70px}.nav-btn.next{width:80px;height:80px}.nav-btn svg{width:32px;height:32px}.cards-preview-content{padding:1.5rem;max-width:600px}.cards-preview-grid{grid-template-columns:repeat(3,1fr);gap:1rem}.preview-card-item img{max-width:100px}}@media(min-width:900px){.character-select-container{padding:2rem;gap:2rem;justify-content:center;min-height:100vh}.page-title{font-size:2rem;letter-spacing:4px;padding:1rem 2rem;border-radius:12px}.characters-grid{flex-direction:row;max-width:1200px;gap:2rem;justify-content:center}.character-card{width:340px;padding:1.5rem;align-items:center;border-radius:16px;box-shadow:0 10px 40px #0000004d}.character-card:hover:not(.disabled){transform:translateY(-8px);border-color:#fff6;box-shadow:0 20px 60px #ffffff1a}.character-card.selected{box-shadow:0 0 30px #fff3,inset 0 0 60px #ffffff08}.expand-indicator{display:none}.character-card-header{flex-direction:column;text-align:center}.character-preview{width:180px;height:220px;margin-bottom:1rem;border-radius:50%}.character-avatar{width:100px;height:100px;margin-bottom:1rem;border-width:4px}.character-info{text-align:center}.character-name{font-size:1.75rem;letter-spacing:3px;margin-bottom:.5rem}.character-description{font-size:.9rem;margin-bottom:1.5rem;-webkit-line-clamp:unset}.character-abilities{max-height:none;opacity:1;padding:1rem;margin-top:0;width:100%}.character-abilities h3{font-size:.8rem;margin-bottom:.75rem;letter-spacing:2px}.character-abilities ul{flex-direction:column;overflow-x:visible;gap:.5rem}.character-abilities li{flex-direction:row;justify-content:space-between;min-width:auto;width:100%;text-align:left;padding:.5rem .75rem;border-left:3px solid var(--color-attack)}.character-abilities li .ability-name{font-size:.85rem}.character-abilities li .ability-stats{font-size:.75rem}.selection-summary{gap:3rem;padding:1.5rem 2rem;border-radius:12px;border-width:2px;max-width:500px}.player-selection{gap:1rem;padding:.75rem 1.5rem;border-radius:10px;min-width:200px;max-width:none}.player-selection span{font-size:1rem}.summary-avatar{width:50px;height:50px}.nav-buttons{position:static;background:none;padding:0;margin-top:1.5rem;gap:2rem}.nav-btn{width:80px;height:80px;border-radius:16px}.nav-btn svg{width:36px;height:36px}.nav-btn.back:hover:not(:disabled){border-color:#666;color:#fff;transform:translateY(-3px);box-shadow:0 8px 30px #000000b3,inset 0 1px #ffffff26,inset 0 -2px #0000004d}.nav-btn.back:hover:not(:disabled):before{opacity:1}.nav-btn.back:hover:not(:disabled) svg{transform:translate(-4px)}.nav-btn.back:active:not(:disabled){transform:translateY(0)}.nav-btn.next{width:90px;height:90px;border-radius:50%}.nav-btn.next:hover,.nav-btn.next:focus{transform:none!important;animation:none!important;filter:none!important}.nav-btn.next:active:not(:disabled){transform:scale(.95)}.view-cards-btn{padding:.75rem;font-size:.85rem}.view-cards-btn:hover{background:#ffffff1f;color:#fff;border-color:#ffffff40}.cards-preview-content{max-width:900px;padding:2rem;border-radius:20px;max-height:90vh}.cards-preview-header h2{font-size:1.5rem;gap:1rem}.cards-preview-header .preview-avatar{width:50px;height:50px;border-width:3px}.close-preview-btn{width:40px;height:40px;font-size:1.5rem}.close-preview-btn:hover{background:#fff3}.cards-preview-grid{grid-template-columns:repeat(4,1fr)}.preview-card-item{border-radius:12px;padding:1rem}.preview-card-item img{max-width:120px;margin-bottom:.75rem;border-radius:8px}.preview-card-item h4{font-size:1rem;margin-bottom:.5rem}.preview-card-item .card-stats{gap:1rem;font-size:.85rem}}@media(orientation:landscape)and (max-height:500px){.character-select-container{padding:.5rem;padding-left:calc(.5rem + var(--safe-area-left));padding-right:calc(.5rem + var(--safe-area-right));padding-bottom:calc(4rem + var(--safe-area-bottom));flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.5rem;overflow-y:auto}.page-title{width:100%;font-size:.9rem;padding:.4rem .75rem;margin-bottom:0}.characters-grid{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:.5rem;max-width:100%;padding:.5rem 0;flex-wrap:nowrap}.character-card{min-width:250px;max-width:280px;scroll-snap-align:center;padding:.75rem;flex-shrink:0}.character-card-header{gap:.5rem}.character-preview{width:50px;height:65px}.character-avatar{width:50px;height:50px}.character-name{font-size:.9rem}.character-description{font-size:.65rem;-webkit-line-clamp:1}.expand-indicator{width:20px;height:20px}.character-card.expanded .character-abilities{max-height:150px;padding:.5rem}.character-abilities li{min-width:75px;padding:.4rem;font-size:.65rem}.selection-summary{position:fixed;bottom:calc(3.5rem + var(--safe-area-bottom));left:50%;transform:translate(-50%);padding:.4rem .75rem;gap:.5rem;width:auto;max-width:none}.player-selection{padding:.3rem .5rem;gap:.3rem;max-width:none}.player-selection span{font-size:.7rem}.summary-avatar{width:28px;height:28px}.nav-buttons{padding:.5rem;padding-bottom:calc(.5rem + var(--safe-area-bottom));gap:1rem}.nav-btn{width:50px;height:50px}.nav-btn.next{width:55px;height:55px}.nav-btn svg{width:24px;height:24px}.cards-preview-content{padding:.75rem;max-height:calc(100vh - 2rem)}.cards-preview-header{margin-bottom:.5rem;padding-bottom:.5rem}.cards-preview-header h2{font-size:.9rem;gap:.5rem}.cards-preview-header .preview-avatar{width:30px;height:30px}.close-preview-btn{width:36px;height:36px;font-size:1rem}.cards-preview-grid{grid-template-columns:repeat(4,1fr);gap:.5rem}.preview-card-item{padding:.5rem}.preview-card-item img{max-width:60px;margin-bottom:.3rem}.preview-card-item h4{font-size:.7rem;margin-bottom:.2rem}.preview-card-item .card-stats{font-size:.6rem;gap:.5rem}}@media(prefers-reduced-motion:reduce){.character-card,.character-abilities,.nav-btn,.expand-indicator{transition:none}.nav-btn.next,.cards-preview-modal,.cards-preview-content{animation:none}}.status-bar{display:flex;align-items:center;gap:.5rem;min-width:100px}.status-player-name{font-size:.7rem;font-weight:700;color:var(--color-text);min-width:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-bar-container{flex:1;height:16px;background:#00000080;border:2px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden;position:relative}.status-bar-fill{height:100%;transition:width .5s ease-out;position:relative}.health-bar .health-high{background:linear-gradient(180deg,#4caf50,#2e7d32);box-shadow:inset 0 2px 4px #fff3}.health-bar .health-medium{background:linear-gradient(180deg,#ffc107,#ff9800);box-shadow:inset 0 2px 4px #fff3}.health-bar .health-low{background:linear-gradient(180deg,#f44336,#c62828);animation:lowHealthPulse 1s ease-in-out infinite;box-shadow:inset 0 2px 4px #fff3}@keyframes lowHealthPulse{0%,to{opacity:1}50%{opacity:.7}}.energy-bar .energy-fill{background:linear-gradient(180deg,#2196f3,#1565c0);box-shadow:inset 0 2px 4px #fff3}.status-bar-overlay{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 100%);pointer-events:none}.status-value{font-size:.65rem;font-weight:700;color:var(--color-text);min-width:40px;text-align:right}.player-hud{display:flex;flex-direction:row;align-items:center;gap:.5rem;padding:.5rem;background:linear-gradient(180deg,#14141ee6,#0a0a0ff2);border-radius:10px;border:2px solid rgba(255,255,255,.1);min-width:auto;box-shadow:0 3px 12px #0000004d;max-width:160px}.player-hud .player-avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--color-gold);object-fit:cover;box-shadow:0 0 10px #ffd70026;flex-shrink:0}.player-hud-header{display:none}.player-hud-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.player-hud .player-name{font-size:.7rem;font-weight:700;color:var(--color-gold);margin:0;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-hud .character-name{display:none}.player-hud .status-bar{min-width:auto;gap:.25rem}.player-hud .status-bar-container{height:10px;border-width:1px;border-radius:5px}.player-hud .status-value{font-size:.55rem;min-width:28px}.player-hud.current-player{border:2px solid var(--color-gold);box-shadow:0 0 15px #ffd70040,inset 0 0 20px #ffd70005}.player-hud.current-player .player-avatar{border-color:#fff;box-shadow:0 0 12px #ffffff4d}@media(min-width:600px){.status-bar{gap:.6rem;min-width:120px}.status-player-name{font-size:.8rem;min-width:50px}.status-bar-container{height:18px;border-radius:9px}.status-value{font-size:.7rem;min-width:45px}.player-hud{padding:.6rem;gap:.6rem;border-radius:11px;max-width:180px}.player-hud .player-avatar{width:42px;height:42px}.player-hud .player-name{font-size:.8rem;letter-spacing:.75px}.player-hud .status-bar-container{height:12px;border-radius:6px}.player-hud .status-value{font-size:.6rem;min-width:32px}}@media(min-width:900px){.status-bar{gap:.75rem;min-width:150px}.status-player-name{font-size:.875rem;min-width:60px}.status-bar-container{height:22px;border-radius:11px}.status-value{font-size:.8rem;min-width:55px}.player-hud{flex-direction:column;gap:.6rem;padding:1rem;border-radius:12px;min-width:240px;max-width:none;box-shadow:0 4px 20px #0000004d}.player-hud .player-avatar{width:56px;height:56px;border-width:3px;box-shadow:0 0 15px #ffd70033}.player-hud-header{display:flex;align-items:center;gap:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1);width:100%}.player-hud-info{gap:.25rem}.player-hud .player-name{font-size:1.1rem;letter-spacing:1px;margin-bottom:.25rem}.player-hud .character-name{display:block;font-size:.8rem;color:var(--color-text-secondary);margin:0;letter-spacing:1px}.player-hud .status-bar{min-width:auto;gap:.5rem;width:100%}.player-hud .status-bar-container{height:16px;border-width:2px;border-radius:8px}.player-hud .status-value{font-size:.7rem;min-width:45px}.player-hud.current-player{box-shadow:0 0 30px #ffd7004d,inset 0 0 40px #ffd70008}.player-hud.current-player .player-avatar{box-shadow:0 0 20px #fff6}}@media(orientation:landscape)and (max-height:500px){.status-bar{gap:.3rem;min-width:80px}.status-player-name{font-size:.6rem;min-width:30px}.status-bar-container{height:12px;border-radius:6px;border-width:1px}.status-value{font-size:.55rem;min-width:30px}.player-hud{padding:.35rem;gap:.35rem;border-radius:8px;max-width:130px}.player-hud .player-avatar{width:28px;height:28px;border-width:2px}.player-hud .player-name{font-size:.55rem;letter-spacing:.25px}.player-hud .status-bar-container{height:8px;border-radius:4px}.player-hud .status-value{font-size:.45rem;min-width:22px}}@media(prefers-reduced-motion:reduce){.status-bar-fill{transition:none}.health-bar .health-low{animation:none}}.card-select-container{width:100%;min-height:100vh;min-height:100dvh;padding:1rem;padding-bottom:calc(6rem + var(--safe-area-bottom));display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.card-select-header{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.75rem;background:#00000080;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.round-indicator{width:100%;text-align:center}.round-indicator .round-badge{display:inline-block;padding:.25rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:20px;font-size:.7rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:2px}.round-status{display:flex;gap:1rem;align-items:center;padding:.5rem .75rem;background:#0006;border-radius:8px;font-size:.75rem}.round-status .status-item{display:flex;align-items:center;gap:.3rem}.round-status .status-label{font-size:.65rem;color:var(--color-text-secondary);text-transform:uppercase}.card-select-header .page-title{font-size:1.1rem;color:#fff;margin:0;text-transform:uppercase;letter-spacing:2px;text-align:center}.player-info{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.2)}.player-info .player-avatar{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.4);object-fit:cover}.player-character-name{font-weight:700;color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:1px}.initiative-indicator{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;background:#0006;border-radius:6px;border:1px solid rgba(255,255,255,.2)}.initiative-indicator.first-strike{border-color:#fff6;background:#ffffff1a}.initiative-star{width:20px;height:20px}.initiative-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-secondary);font-weight:700}.initiative-indicator.first-strike .initiative-label{color:#fff}.card-select-main{display:flex;flex-direction:column;gap:1rem;flex:1}.available-cards-section{background:#0006;border-radius:12px;padding:1rem;border:1px solid rgba(255,255,255,.1);order:2}.section-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}.section-header h2{font-size:.9rem;color:var(--color-text);margin:0;text-transform:uppercase;letter-spacing:1px}.stats-display{display:flex;flex-direction:row;gap:.5rem;padding:.5rem .75rem;background:linear-gradient(135deg,#0009,#14141ecc);border-radius:10px;border:1px solid rgba(255,255,255,.1)}.health-display,.energy-display{display:flex;align-items:center;gap:.4rem;padding:.3rem .5rem;border-radius:6px;background:#0000004d}.health-display{border-left:3px solid #4CAF50}.energy-display{border-left:3px solid #2196F3}.stat-label{font-weight:700;font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}.health-display .stat-label{color:#4caf50}.energy-display .stat-label{color:#2196f3}.stats-display .status-bar-container{height:14px;min-width:60px;max-width:80px;border-radius:7px}.stats-display .status-value{font-size:.6rem;min-width:auto;color:#ffffffe6}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;justify-items:center}.cards-grid>div{width:100%;max-width:var(--card-width);display:flex;justify-content:center}.preview-section{display:flex;flex-direction:column;gap:.75rem;order:1}.battlefield-preview{display:block;background:#0006;border-radius:10px;padding:.75rem;border:1px solid rgba(255,255,255,.1);text-align:center}.battlefield-preview h3{font-size:.7rem;color:#ffffffb3;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:1px}.battlefield-grid{display:grid;grid-template-columns:repeat(4,45px);grid-template-rows:repeat(3,35px);gap:2px;width:fit-content;margin:0 auto .5rem;background:#ffffff0d;padding:3px;border-radius:6px}.battlefield-cell{width:45px;height:35px;background:#0000004d;border-radius:3px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);overflow:hidden}.battlefield-cell.my-position{background:#ffffff26;border-color:#ffffff4d}.battlefield-cell.opponent-position{background:#ff408126;border-color:#ff408166}.cell-character{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;justify-content:center}.cell-character .character{width:22px!important;height:26px!important}.position-label{font-size:.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}.position-label.you{color:#fffc}.position-label.enemy{color:#ff4081cc}.battlefield-hint{font-size:.6rem;color:var(--color-text-secondary);margin:0}.grid-preview{display:none;background:#00000080;border-radius:12px;padding:1rem;border:1px solid rgba(255,255,255,.1);text-align:center}.grid-preview h3{font-size:.75rem;color:var(--color-text-secondary);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:1px}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;width:120px;height:120px;margin:0 auto .75rem;background:#ffffff0d;padding:3px;border-radius:4px}.preview-cell{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:2px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.preview-cell .you-label{font-size:.45rem;color:#fff6;font-weight:700}.preview-cell.active.attack{background:var(--color-attack);box-shadow:0 0 10px #ff000080}.preview-cell.active.move{background:var(--color-move);box-shadow:0 0 10px #7c7c7c80}.preview-cell.active.defend{background:var(--color-defend);box-shadow:0 0 10px #00ff0080}.preview-info-container{height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center}.preview-info{display:flex;flex-direction:column;gap:.15rem;align-items:center}.preview-name{font-size:.9rem;font-weight:700;color:var(--color-text)}.preview-damage{font-size:.75rem;color:#ff6b6b}.preview-energy{font-size:.75rem;color:var(--color-energy)}.preview-hint{font-size:.7rem;color:var(--color-text-secondary);font-style:italic;margin:0}.selected-cards-section{background:#0006;border-radius:12px;padding:.75rem;border:1px solid rgba(255,255,255,.1);order:0}.selected-cards-section h3{font-size:.75rem;color:#fffc;margin:0 0 .75rem;text-transform:uppercase;letter-spacing:1px;text-align:center;font-weight:600}.selected-cards-slots{display:flex;gap:.5rem;justify-content:center}.card-slot{width:calc(var(--card-width) * .75);height:calc(var(--card-width) * .75 * 1.75);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.card-slot.empty{border:2px dashed rgba(255,255,255,.2);background:#0000004d}.card-slot.filled{border:2px solid rgba(255,255,255,.15);background:#0003}.card-slot .card{width:100%!important;height:100%!important;display:flex;flex-direction:column}.card-slot .card .card-image-container{flex:1;min-height:0}.card-slot .card .card-image{width:100%;height:100%;object-fit:contain}.slot-placeholder{display:flex;flex-direction:column;align-items:center;gap:.15rem}.slot-number{font-size:1.5rem;font-weight:700;color:#ffffff40;line-height:1}.slot-label{font-size:.45rem;text-transform:uppercase;letter-spacing:.5px;color:#fff3}.execution-order{text-align:center;font-size:.65rem;color:#fff6;margin:.5rem 0 0;letter-spacing:.5px}.nav-buttons{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem;padding-bottom:calc(1rem + var(--safe-area-bottom));background:linear-gradient(transparent,#000000f2);z-index:var(--z-dropdown)}.nav-btn{width:60px;height:60px;border-radius:50%;border:2px solid;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0;min-height:var(--touch-target-comfortable)}.nav-btn svg{width:28px;height:28px}.nav-btn.back{background:#000000b3;border-color:#ffffff4d;color:#888}.nav-btn.back:active:not(:disabled){transform:scale(.95)}.nav-btn.next{width:70px;height:70px;border-radius:50%;background-image:url(/images/gobutton.webp);background-size:contain;background-position:center;background-repeat:no-repeat;background-color:transparent!important;border:none!important;box-shadow:none!important}.nav-btn.next svg{display:none!important}@keyframes goButtonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.nav-btn.next:before{display:none}.nav-btn.next:hover,.nav-btn.next:focus{background-image:url(/images/gobutton.webp)!important;background-color:transparent!important;transform:none!important;filter:none!important}.nav-btn.next:active:not(:disabled){transform:scale(.92)}.go-btn-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.go-btn-hint{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:8px;font-size:.75rem;white-space:nowrap;z-index:100;animation:hintFadeIn .2s ease;border:1px solid rgba(255,255,255,.2)}.go-btn-hint:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#000000e6}@keyframes hintFadeIn{0%{opacity:0;transform:translate(-50%) translateY(5px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.nav-btn:disabled{opacity:.25;cursor:not-allowed;transform:none!important;animation:none!important;filter:grayscale(50%)}.spinner-icon{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(min-width:600px){.card-select-container{padding:1.5rem;gap:1.25rem}.card-select-header{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:1rem}.card-select-header .page-title{font-size:1.4rem}.player-info .player-avatar{width:48px;height:48px}.section-header{flex-direction:row;justify-content:space-between;align-items:center}.section-header h2{font-size:1rem}.stats-display{gap:.75rem;padding:.6rem 1rem}.health-display,.energy-display{gap:.5rem;padding:.4rem .6rem}.stat-label{font-size:.7rem}.stats-display .status-bar-container{min-width:70px;max-width:90px;height:16px}.stats-display .status-value{font-size:.65rem}.cards-grid{grid-template-columns:repeat(4,1fr);gap:.75rem}.battlefield-grid{grid-template-columns:repeat(4,55px);grid-template-rows:repeat(3,42px);gap:3px}.battlefield-cell{width:55px;height:42px}.cell-character .character{width:28px!important;height:32px!important}.position-label{font-size:.45rem}.preview-grid{width:150px;height:150px}.selected-cards-section{padding:1rem}.selected-cards-section h3{font-size:.8rem}.selected-cards-slots{gap:.75rem}.card-slot{width:calc(var(--card-width) * .75);height:calc(var(--card-width) * .75 * 1.75)}.slot-number{font-size:1.75rem}.nav-btn{width:70px;height:70px}.nav-btn svg{width:32px;height:32px}}@media(min-width:900px){.card-select-container{max-width:1400px;margin:0 auto;padding:2rem;gap:1.5rem}.card-select-header{padding:1rem 2rem;border-radius:12px;border-width:2px}.round-indicator .round-badge{padding:.4rem 1.5rem;font-size:.9rem;border-width:2px;letter-spacing:3px;animation:roundPulse 2s ease-in-out infinite}@keyframes roundPulse{0%,to{box-shadow:0 0 10px #ffffff1a}50%{box-shadow:0 0 20px #fff3}}.round-status{gap:2rem;padding:.75rem 1.25rem}.card-select-header .page-title{font-size:1.75rem;letter-spacing:3px}.player-info{gap:1rem;padding:.5rem 1.5rem;border-width:2px}.player-info .player-avatar{width:56px;height:56px;border-width:3px}.player-character-name{font-size:1.25rem;letter-spacing:2px}.initiative-indicator{gap:.5rem;padding:.5rem 1rem;border-width:2px}.initiative-star{width:28px;height:28px}.initiative-indicator.first-strike .initiative-star{animation:starPulse 1.5s ease-in-out infinite}@keyframes starPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.initiative-label{font-size:.75rem}.card-select-main{display:grid;grid-template-columns:1fr 380px;gap:2rem}.available-cards-section{order:0;padding:1.5rem;border-radius:16px;border-width:2px}.section-header{margin-bottom:1.5rem;padding-bottom:1rem}.section-header h2{font-size:1.1rem;letter-spacing:2px}.stats-display{gap:1rem;padding:.75rem 1.25rem;border-radius:12px}.health-display,.energy-display{gap:.6rem;padding:.5rem .75rem;border-radius:8px;border-left-width:4px}.stat-label{font-size:.8rem;letter-spacing:1px}.stats-display .status-bar-container{min-width:90px;max-width:120px;height:18px;border-radius:9px}.stats-display .status-value{font-size:.75rem}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.cards-grid>div{width:140px}.preview-section{order:0;gap:1.5rem}.battlefield-preview{padding:1.25rem;border-radius:14px}.battlefield-preview h3{font-size:.85rem;margin-bottom:.75rem}.battlefield-grid{grid-template-columns:repeat(4,65px);grid-template-rows:repeat(3,50px);gap:3px;padding:4px}.battlefield-cell{width:65px;height:50px}.cell-character .character{width:32px!important;height:38px!important}.position-label{font-size:.5rem}.battlefield-hint{font-size:.7rem}.grid-preview{display:block;padding:1.5rem;border-radius:16px;border-width:2px;min-height:320px}.grid-preview h3{font-size:.9rem;margin-bottom:1rem;letter-spacing:2px}.preview-grid{width:180px;height:180px;gap:3px;padding:4px;border-radius:6px;margin-bottom:1rem}.preview-cell{border-radius:3px}.preview-cell .you-label{font-size:.55rem}.preview-cell.active.attack,.preview-cell.active.move,.preview-cell.active.defend{box-shadow:0 0 15px currentColor}.preview-info-container{height:70px}.preview-name{font-size:1.1rem}.preview-damage,.preview-energy{font-size:.85rem}.preview-hint{font-size:.8rem}.selected-cards-section{order:0;padding:1.25rem;border-radius:14px}.selected-cards-section h3{font-size:.9rem;margin-bottom:1rem}.selected-cards-slots{gap:1rem}.card-slot{width:calc(var(--card-width) * .75);height:calc(var(--card-width) * .75 * 1.75)}.slot-number{font-size:2rem}.execution-order{font-size:.75rem;margin-top:1rem}.nav-buttons{position:static;padding:0;background:none;gap:2rem;justify-content:center}.nav-btn{width:80px;height:80px;border-radius:16px;border-width:3px}.nav-btn:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s ease}.nav-btn svg{width:36px;height:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.nav-btn.back{background:linear-gradient(145deg,#2a2a35,#1a1a22,#0f0f14);border-color:#444;box-shadow:0 4px 20px #0009,inset 0 1px #ffffff1a,inset 0 -2px #0000004d}.nav-btn.back:before{background:radial-gradient(circle at center,rgba(255,255,255,.1) 0%,transparent 70%)}.nav-btn.back:hover:not(:disabled){border-color:#666;color:#fff;transform:translateY(-3px)}.nav-btn.back:hover:not(:disabled):before{opacity:1}.nav-btn.back:hover:not(:disabled) svg{transform:translate(-4px)}.nav-btn.next{width:80px;height:80px;border-radius:50%;background-image:url(/images/gobutton.webp)!important;background-color:transparent!important}.nav-btn.next:before{display:none!important}.nav-btn.next:hover,.nav-btn.next:focus{transform:none!important;filter:none!important;background-image:url(/images/gobutton.webp)!important;background-color:transparent!important}}@media(orientation:landscape)and (max-height:500px){.card-select-container{padding:.5rem;gap:.5rem;padding-bottom:calc(4rem + var(--safe-area-bottom))}.card-select-header{flex-direction:row;padding:.5rem;gap:.5rem}.card-select-header .page-title{font-size:.9rem}.player-info .player-avatar{width:32px;height:32px}.card-select-main{flex-direction:row;gap:.75rem}.available-cards-section{flex:1;order:0}.stats-display{padding:.3rem .5rem;gap:.4rem}.health-display,.energy-display{padding:.2rem .4rem;gap:.3rem}.stat-label{font-size:.5rem}.stats-display .status-bar-container{min-width:45px;max-width:55px;height:10px}.stats-display .status-value{font-size:.45rem}.preview-section{width:200px;order:1}.selected-cards-section{order:2;width:200px}.cards-grid{grid-template-columns:repeat(4,1fr);gap:.25rem}.card-slot{width:calc(var(--card-width) * .7);height:calc(var(--card-width) * .7 * 1.75)}.preview-grid{width:100px;height:100px}.nav-buttons{padding:.5rem;padding-bottom:calc(.5rem + var(--safe-area-bottom))}.nav-btn{width:50px;height:50px}.nav-btn svg{width:24px;height:24px}}.game-board{position:relative;display:flex;flex-direction:column;align-items:center;padding:.5rem}.board-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:2px;border-radius:6px;background:#ffffff0d;width:calc(var(--grid-cell-size) * 4 + 10px)}.board-cell{width:var(--grid-cell-size);height:var(--grid-cell-height);background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;overflow:hidden}.board-cell:hover{background:#ffffff08}.board-cell.highlighted.highlight-attack{background:#ff000040;border-color:var(--color-attack);box-shadow:inset 0 0 30px #f006;animation:attackPulse .4s ease-in-out infinite}@keyframes attackPulse{0%,to{box-shadow:inset 0 0 30px #f006}50%{box-shadow:inset 0 0 40px #f009}}.board-cell.highlighted.highlight-move{background:#7c7c7c33;border-color:var(--color-move);box-shadow:inset 0 0 25px #7c7c7c4d}.board-cell.highlighted.highlight-defend{background:#00ff0026;border-color:var(--color-defend);box-shadow:inset 0 0 30px #00ff004d}.board-labels{display:flex;justify-content:space-between;width:100%;padding:.4rem 0;max-width:calc(var(--grid-cell-size) * 4 + 10px)}.player-label{font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:4px;color:var(--color-text);text-transform:uppercase;letter-spacing:1px;background:#0006}.player1-label{border-left:2px solid var(--color-primary)}.player2-label{border-right:2px solid var(--color-accent)}.character-float{position:absolute;top:2px;left:2px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10;transition:transform .5s cubic-bezier(.4,0,.2,1);transform-origin:center center}.character-float.transitioning{z-index:20}.character-float .character{transform:scale(var(--character-scale))}@media(min-width:600px){.game-board{padding:.75rem}.board-grid{gap:3px;padding:3px;border-radius:8px}.board-cell{border-radius:4px}.player-label{font-size:.75rem;padding:.35rem .75rem}@keyframes attackPulse{0%,to{box-shadow:inset 0 0 40px #f006}50%{box-shadow:inset 0 0 60px #f009}}.board-cell.highlighted.highlight-attack{box-shadow:inset 0 0 40px #f006,0 0 20px #ff00004d}}@media(min-width:900px){.game-board{padding:1rem}.board-grid{gap:4px;padding:4px}.board-labels{padding:.5rem 0}.player-label{font-size:.85rem;padding:.4rem 1rem;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:2px}.player1-label{border-left-width:3px}.player2-label{border-right-width:3px}@keyframes attackPulse{0%,to{box-shadow:inset 0 0 60px #f006,0 0 40px #ff000080}50%{box-shadow:inset 0 0 80px #f009,0 0 60px #ff0000b3}}.board-cell.highlighted.highlight-move{box-shadow:inset 0 0 40px #7c7c7c4d,0 0 30px #7c7c7c66}.board-cell.highlighted.highlight-defend{box-shadow:inset 0 0 50px #00ff004d,0 0 35px #0f06}}@media(orientation:landscape)and (max-height:500px){.game-board{padding:.25rem}.board-grid{gap:1px;padding:1px}.board-labels{padding:.25rem 0}.player-label{font-size:.6rem;padding:.2rem .5rem}.board-cell.highlighted.highlight-attack{animation:none;box-shadow:inset 0 0 20px #f006}}@media(prefers-reduced-motion:reduce){.character-float{transition:none}.board-cell.highlighted{animation:none}}.battle-page{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;background:url(/images/background1.webp) center center / cover no-repeat fixed;overflow:hidden;padding-top:var(--safe-area-top)}.battle-huds{display:flex;justify-content:space-between;align-items:center;padding:.5rem;gap:.5rem;background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,transparent 100%)}.battle-phase-info{text-align:center;flex-shrink:0;flex:1}.round-badge{display:inline-block;padding:.2rem .5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:12px;font-size:.65rem;color:#fff;text-transform:uppercase;letter-spacing:1px;margin-bottom:.25rem}.battle-phase-info h2{margin:0;font-size:.9rem;color:var(--color-text);text-transform:uppercase;letter-spacing:1px}.battlefield-container{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.5rem;min-height:0}.player-side,.side-cards{display:none}.battle-footer{padding:.5rem;padding-bottom:calc(.5rem + var(--safe-area-bottom));background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 100%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.battle-log-compact{display:flex;gap:.75rem;justify-content:center;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:0 .5rem;scrollbar-width:none}.battle-log-compact::-webkit-scrollbar{display:none}.battle-log-compact span{font-size:.7rem;color:var(--color-text-secondary);padding:.2rem .5rem;background:#0006;border-radius:4px;border-left:2px solid rgba(255,255,255,.2);white-space:nowrap;flex-shrink:0}.battle-log-compact span:last-child{color:var(--color-text);font-weight:700;border-left-color:#ffffff80;background:#ffffff1a}.battle-controls{display:flex;justify-content:center;gap:1rem}.start-btn,.play-again-btn,.menu-btn{padding:.75rem 1.5rem;font-size:.9rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;min-height:var(--touch-target-comfortable)}.start-btn{background:linear-gradient(180deg,#f5f5f5,#e0e0e0);color:#1a1a1a;animation:startPulse 2s ease-in-out infinite;box-shadow:0 0 20px #fff3}@keyframes startPulse{0%,to{box-shadow:0 0 20px #fff3;transform:scale(1)}50%{box-shadow:0 0 30px #ffffff4d;transform:scale(1.02)}}.start-btn:active{transform:scale(.98)}.play-again-btn{background:linear-gradient(180deg,#f5f5f5,#e0e0e0);color:#1a1a1a}.menu-btn{background:transparent;color:var(--color-text);border:2px solid var(--color-move)}.starting-text{font-size:1rem;color:#fffc;text-transform:uppercase;letter-spacing:2px;animation:startingPulse 1s ease-in-out infinite}@keyframes startingPulse{0%,to{opacity:.5}50%{opacity:1}}.battle-cards-drawer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(0deg,#000000f2,#000000d9);border-top:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;z-index:var(--z-dropdown);padding:.5rem;padding-bottom:calc(.5rem + var(--safe-area-bottom));transform:translateY(0);transition:transform .3s ease}.battle-cards-drawer.collapsed{transform:translateY(calc(100% - 50px))}.drawer-handle{width:40px;height:4px;background:#ffffff4d;border-radius:2px;margin:0 auto .5rem}.drawer-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:.5rem}.drawer-tab{padding:.4rem 1rem;border-radius:20px;background:#ffffff1a;color:var(--color-text-secondary);font-size:.75rem;font-weight:700;border:none;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.drawer-tab.active{background:#fff3;color:var(--color-text)}.drawer-cards{display:flex;justify-content:center;gap:.5rem;padding:.5rem 0}.result-overlay{position:fixed;inset:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:var(--z-modal);padding:1rem;padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);animation:resultFadeIn .5s ease}@keyframes resultFadeIn{0%{opacity:0}to{opacity:1}}.result-image{max-width:90%;max-height:40vh;object-fit:contain;animation:resultBounce .8s ease}@keyframes resultBounce{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.result-winner-text{font-size:1.5rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:3px;margin:1rem 0;text-shadow:0 0 20px rgba(255,215,0,.5);animation:winnerGlow 1s ease-in-out infinite;text-align:center}@keyframes winnerGlow{0%,to{text-shadow:0 0 20px rgba(255,215,0,.5)}50%{text-shadow:0 0 40px rgba(255,215,0,.8)}}.result-buttons{display:flex;gap:1.5rem;margin-top:1rem}.result-btn{background:transparent;border:none;cursor:pointer;transition:transform .3s ease;padding:.5rem;min-width:var(--touch-target-comfortable);min-height:var(--touch-target-comfortable)}.result-btn:active{transform:scale(.95)}.result-btn img{width:60px;height:60px;object-fit:contain}.player-hud.current-player{border:2px solid var(--color-gold);box-shadow:0 0 15px #ffd70066}.battle-cards-mobile{display:flex;justify-content:space-around;gap:1rem;padding:.5rem;background:#00000080;border-radius:10px;width:100%;max-width:400px}.battle-cards-mobile .player-cards{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:1}.battle-cards-mobile .player-cards h4{font-size:.65rem;color:#ffffffb3;margin:0;text-transform:uppercase;letter-spacing:.5px}.battle-cards-mobile .cards-list{display:flex;gap:.25rem}.battle-cards-mobile .mini-card{display:flex;align-items:center;justify-content:center;width:50px;height:28px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-size:.55rem;color:#fffc;text-transform:uppercase;transition:all .3s ease}.battle-cards-mobile .mini-card.current{background:#ffd7004d;border-color:var(--color-gold);color:#fff;box-shadow:0 0 8px #ffd70066}.battle-cards-mobile .mini-card.executed{opacity:.4;filter:grayscale(50%)}.battle-cards-mobile .mini-card span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:0 2px}@media(min-width:600px){.battle-huds{padding:.75rem 1rem}.round-badge{font-size:.75rem;padding:.25rem .75rem}.battle-phase-info h2{font-size:1.1rem}.battle-log-compact span{font-size:.8rem}.battle-cards-mobile{max-width:500px;gap:1.5rem;padding:.75rem}.battle-cards-mobile .player-cards h4{font-size:.75rem}.battle-cards-mobile .mini-card{width:60px;height:32px;font-size:.6rem}.result-image{max-height:45vh}.result-winner-text{font-size:1.75rem}.result-btn img{width:70px;height:70px}}@media(min-width:900px){.battle-huds{padding:1rem 2rem;gap:1rem}.round-badge{font-size:.8rem;padding:.3rem 1rem;margin-bottom:.5rem}.battle-phase-info h2{font-size:1.3rem;letter-spacing:2px}.battlefield-container{flex-direction:row;gap:2rem;padding:1rem}.player-side{display:flex;flex-direction:column;align-items:center;gap:1rem}.side-cards{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#00000080;border-radius:12px;border:2px solid rgba(255,255,255,.1)}.side-cards h4{font-size:.7rem;color:#fffc;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:1px;text-align:center;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.2)}.battle-cards-drawer{display:none}.battle-footer{padding:1rem 2rem;gap:.75rem}.battle-log-compact{gap:1.5rem;max-width:800px}.battle-log-compact span{font-size:.85rem;padding:.3rem .75rem;border-left-width:3px}.start-btn,.play-again-btn,.menu-btn{padding:1rem 2.5rem;font-size:1rem;border-radius:12px;letter-spacing:2px}.start-btn:hover{transform:scale(1.05);box-shadow:0 0 50px #ffffff4d}.play-again-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px #fff3}.menu-btn:hover{border-color:var(--color-text);background:#ffffff0d}.result-image{max-width:80%;max-height:50vh}.result-winner-text{font-size:2rem;letter-spacing:4px;margin:1.5rem 0}.result-buttons{gap:2rem}.result-btn:hover{transform:scale(1.1)}.result-btn img{width:80px;height:80px}}@media(orientation:landscape)and (max-height:500px){.battle-huds{position:absolute;top:0;left:0;right:0;padding:.25rem .5rem;z-index:10}.battlefield-container{padding-top:2.5rem}.battle-phase-info h2{font-size:.75rem}.round-badge{font-size:.55rem;padding:.15rem .4rem}.battle-cards-drawer{position:fixed;right:0;top:var(--safe-area-top);bottom:var(--safe-area-bottom);left:auto;width:100px;height:auto;border-radius:20px 0 0 20px;border-top:none;border-left:1px solid rgba(255,255,255,.1);flex-direction:column;padding:.5rem;padding-right:calc(.5rem + var(--safe-area-right))}.battle-cards-drawer.collapsed{transform:translate(calc(100% - 30px))}.drawer-handle{width:4px;height:40px;margin:auto .5rem auto 0}.drawer-tabs{flex-direction:column;gap:.5rem}.drawer-tab{font-size:.65rem;padding:.3rem .5rem}.drawer-cards{flex-direction:column;gap:.25rem}.battle-footer{padding:.25rem;padding-bottom:calc(.25rem + var(--safe-area-bottom))}.battle-cards-mobile{max-width:300px;gap:.5rem;padding:.35rem}.battle-cards-mobile .player-cards h4{font-size:.5rem}.battle-cards-mobile .cards-list{gap:.15rem}.battle-cards-mobile .mini-card{width:40px;height:22px;font-size:.45rem;border-radius:3px}.battle-log-compact span{font-size:.6rem;padding:.15rem .4rem}.start-btn,.play-again-btn,.menu-btn{padding:.5rem 1rem;font-size:.75rem}}.online-lobby-page{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;padding-top:calc(50px + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));position:relative}.lobby-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;padding-top:calc(.75rem + var(--safe-area-top));background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 70%,transparent 100%);z-index:100}.lobby-header .page-title{position:absolute;left:50%;transform:translate(-50%);font-size:1rem;color:#fff;text-transform:uppercase;letter-spacing:1.5px;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.5);white-space:nowrap}.lobby-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%}.error-message{display:flex;align-items:center;gap:.6rem;background:#dc262626;border:1px solid rgba(220,38,38,.4);color:#ef4444;padding:.75rem;border-radius:8px;margin-bottom:.875rem;width:100%;text-align:left;font-size:.8rem}.error-message svg{flex-shrink:0;width:16px;height:16px}.lobby-menu{background:linear-gradient(180deg,#000c,#14141ee6);border-radius:16px;border:2px solid rgba(255,255,255,.1);box-shadow:0 15px 40px #00000080;padding:1.25rem;width:100%;display:flex;flex-direction:column;gap:1.25rem}.lobby-btn.back-to-home{justify-content:center;opacity:.7}.lobby-btn.back-to-home:active{opacity:1}.menu-section{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem}.menu-section.competitive{border-color:#9c27b04d;background:linear-gradient(135deg,rgba(156,39,176,.1) 0%,transparent 100%)}.section-title{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 .75rem}.menu-section.competitive .section-title{color:#ba68c8}.section-icon{font-size:.9rem}.section-buttons,.btn-row{display:flex;flex-direction:column;gap:.5rem}.btn-row .lobby-btn{flex:1}.lobby-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem .875rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.75px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff0d;color:var(--color-text);cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-min)}.lobby-btn:active:not(:disabled){transform:scale(.98);background:#ffffff1a;border-color:#fff6}.lobby-btn:disabled{opacity:.5;cursor:not-allowed}.lobby-btn.large{padding:.875rem 1rem}.lobby-btn.primary{background:linear-gradient(135deg,#ffd70033,#ffd7001a);border-color:#ffd70066}.lobby-btn.primary:active:not(:disabled){background:linear-gradient(135deg,#ffd7004d,#ffd70026);border-color:var(--color-gold);box-shadow:0 4px 15px #ffd70033}.lobby-btn.secondary{background:transparent;border-color:#fff3}.lobby-btn.secondary:active:not(:disabled){background:#ffffff0d;border-color:#fff6}.lobby-btn.ranked{background:linear-gradient(135deg,#9c27b033,#9c27b01a);border-color:#9c27b066}.lobby-btn.ranked:active:not(:disabled){background:linear-gradient(135deg,#9c27b04d,#9c27b026);border-color:#9c27b0;box-shadow:0 4px 15px #9c27b033}.btn-icon{font-size:1rem}.btn-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.btn-title{font-size:.85rem;font-weight:600}.btn-desc{font-size:.65rem;font-weight:400;color:var(--color-text-secondary);text-transform:none;letter-spacing:0}.join-room{width:100%}.join-card{background:linear-gradient(180deg,#000c,#14141ee6);border:2px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 15px 40px #00000080;padding:1.5rem;text-align:center}.join-card h2{font-size:1.15rem;color:var(--color-text);margin:0 0 .4rem}.join-desc{color:var(--color-text-secondary);margin:0 0 1rem;font-size:.8rem}.room-code-input{width:100%;padding:.75rem;font-size:1.25rem;font-weight:700;text-align:center;letter-spacing:5px;text-transform:uppercase;background:#0006;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:var(--color-gold);outline:none;transition:all .2s ease;margin-bottom:1rem;min-height:var(--touch-target-comfortable)}.room-code-input:focus{border-color:var(--color-gold);box-shadow:0 0 12px #ffd70033}.room-code-input::placeholder{color:#fff3;letter-spacing:5px}.button-group{display:flex;gap:.6rem;padding:.6rem;background:#0f0f14e6;border-radius:12px;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 24px #00000080,inset 0 1px #ffffff0d}.button-group .lobby-btn{flex:1;justify-content:center}.button-group .lobby-btn.primary{background:linear-gradient(180deg,#f5f5f5,#e0e0e0);border-color:#fff3;color:#1a1a1a;box-shadow:0 3px 12px #ffffff1a}.button-group .lobby-btn.primary:active:not(:disabled){background:linear-gradient(180deg,#fff,#f0f0f0);border-color:#ffffff4d;box-shadow:0 5px 16px #ffffff26}.waiting-room{width:100%}.waiting-card{background:linear-gradient(180deg,#000c,#14141ee6);border:2px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 15px 40px #00000080;padding:1.5rem;text-align:center}.waiting-card h2{font-size:1.15rem;color:var(--color-text);margin:0 0 .4rem}.waiting-card>p{color:var(--color-text-secondary);margin:0 0 1rem;font-size:.85rem}.waiting-card .hint{font-size:.75rem;color:var(--color-text-secondary);margin:.875rem 0 1rem}.spinner-container{position:relative;width:55px;height:55px;margin:0 auto 1rem}.spinner{width:55px;height:55px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-gold);border-radius:50%;animation:spin 1s linear infinite}.spinner-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:radial-gradient(circle,rgba(255,215,0,.2) 0%,transparent 70%);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}.searching-dots{display:flex;justify-content:center;gap:.35rem;margin-bottom:1rem}.searching-dots span{width:7px;height:7px;background:var(--color-gold);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.searching-dots span:nth-child(1){animation-delay:-.32s}.searching-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1rem 1.25rem;background:#0000004d;border:2px solid rgba(255,215,0,.3);border-radius:10px;margin-bottom:.4rem}.room-code-display .label{font-size:.65rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px}.room-code-display .code{font-size:1.5rem;font-weight:700;color:var(--color-gold);letter-spacing:4px;text-shadow:0 0 10px rgba(255,215,0,.4)}.copy-btn{padding:.35rem .75rem;background:#ffd70033;border:1px solid rgba(255,215,0,.4);border-radius:6px;color:var(--color-gold);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.75px;cursor:pointer;transition:all .2s ease;min-height:32px}.copy-btn:active:not(:disabled){background:#ffd7004d;border-color:var(--color-gold)}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.copy-btn.copied{background:#22c55e4d;border-color:#22c55e99;color:#22c55e}@media(min-width:600px){.lobby-header{padding:1rem 1.25rem;padding-top:calc(1rem + var(--safe-area-top))}.lobby-header .page-title{font-size:1.15rem;letter-spacing:2px}.lobby-content{max-width:420px}.error-message{padding:.8rem .9rem;font-size:.85rem;border-radius:9px}.lobby-menu{padding:1.4rem;gap:1.4rem;border-radius:18px}.menu-section{padding:1.15rem;border-radius:11px}.section-title{font-size:.72rem;letter-spacing:1.75px;margin-bottom:.8rem}.btn-row{flex-direction:row}.lobby-btn{padding:.8rem .95rem;font-size:.88rem}.btn-title{font-size:.88rem}.btn-desc{font-size:.68rem}.join-card,.waiting-card{padding:1.75rem;border-radius:18px}.join-card h2,.waiting-card h2{font-size:1.25rem}.room-code-input{font-size:1.5rem;letter-spacing:6px;padding:.8rem}.room-code-display .code{font-size:1.75rem;letter-spacing:5px}.spinner-container,.spinner{width:65px;height:65px}}@media(min-width:900px){.online-lobby-page{padding:2rem;padding-top:calc(70px + var(--safe-area-top))}.lobby-header{padding:1rem 1.5rem;padding-top:calc(1rem + var(--safe-area-top))}.lobby-header .page-title{font-size:1.25rem;letter-spacing:3px}.lobby-content{max-width:450px;margin-top:0}.error-message{gap:.75rem;padding:.875rem 1rem;border-radius:10px;font-size:.9rem}.error-message svg{width:18px;height:18px}.lobby-menu{padding:1.5rem;gap:1.5rem;border-radius:20px;box-shadow:0 20px 60px #00000080}.lobby-btn.back-to-home:hover{opacity:1}.menu-section{padding:1.25rem;border-radius:12px}.section-title{font-size:.75rem;letter-spacing:2px;margin-bottom:.875rem}.section-icon{font-size:1rem}.section-buttons,.btn-row{gap:.625rem}.lobby-btn{gap:.625rem;padding:.875rem 1rem;font-size:.9rem;letter-spacing:1px;border-radius:10px}.lobby-btn:hover:not(:disabled){background:#ffffff1a;border-color:#fff6;transform:translateY(-2px)}.lobby-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#ffd7004d,#ffd70026);border-color:var(--color-gold);box-shadow:0 5px 20px #ffd70033}.lobby-btn.secondary:hover:not(:disabled){background:#ffffff0d;border-color:#fff6}.lobby-btn.ranked:hover:not(:disabled){background:linear-gradient(135deg,#9c27b04d,#9c27b026);border-color:#9c27b0;box-shadow:0 5px 20px #9c27b033}.lobby-btn.large{padding:1rem 1.25rem}.btn-icon{font-size:1.1rem}.btn-title{font-size:.9rem}.btn-desc{font-size:.7rem}.join-card,.waiting-card{padding:2rem;border-radius:20px;box-shadow:0 20px 60px #00000080}.join-card h2,.waiting-card h2{font-size:1.35rem;margin-bottom:.5rem}.join-desc{font-size:.85rem;margin-bottom:1.25rem}.waiting-card>p{font-size:.9rem;margin-bottom:1.25rem}.waiting-card .hint{font-size:.8rem;margin:1rem 0 1.25rem}.room-code-input{padding:.875rem 1rem;font-size:1.75rem;letter-spacing:8px;border-radius:10px;margin-bottom:1.25rem}.room-code-input::placeholder{letter-spacing:8px}.button-group{gap:.75rem;padding:.75rem;border-radius:16px}.button-group .lobby-btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#fff,#f0f0f0);border-color:#ffffff4d;box-shadow:0 6px 20px #ffffff26}.spinner-container{width:70px;height:70px;margin-bottom:1.25rem}.spinner{width:70px;height:70px}.spinner-glow{width:50px;height:50px}.searching-dots{gap:.4rem;margin-bottom:1.25rem}.searching-dots span{width:8px;height:8px}.room-code-display{gap:.4rem;padding:1.25rem 1.5rem;border-radius:12px;margin-bottom:.5rem}.room-code-display .label{font-size:.7rem}.room-code-display .code{font-size:2rem;letter-spacing:6px}.copy-btn{padding:.35rem .875rem;font-size:.7rem;letter-spacing:1px}.copy-btn:hover:not(:disabled){background:#ffd7004d;border-color:var(--color-gold)}}@media(orientation:landscape)and (max-height:500px){.online-lobby-page{padding:.5rem;padding-left:calc(.5rem + var(--safe-area-left));padding-right:calc(.5rem + var(--safe-area-right));padding-top:calc(40px + var(--safe-area-top));justify-content:flex-start;overflow-y:auto}.lobby-header{padding:.4rem .75rem;padding-top:calc(.4rem + var(--safe-area-top))}.lobby-header .page-title{font-size:.85rem}.lobby-content{max-width:400px}.lobby-menu{padding:.875rem;gap:.875rem;border-radius:12px}.menu-section{padding:.75rem;border-radius:8px}.section-title{font-size:.6rem;margin-bottom:.5rem}.btn-row{flex-direction:row}.lobby-btn{padding:.5rem .75rem;font-size:.75rem;border-radius:6px;min-height:36px}.btn-title{font-size:.75rem}.btn-desc{font-size:.55rem}.join-card,.waiting-card{padding:1rem;border-radius:12px}.join-card h2,.waiting-card h2{font-size:1rem;margin-bottom:.3rem}.join-desc{font-size:.7rem;margin-bottom:.75rem}.room-code-input{font-size:1.1rem;letter-spacing:4px;padding:.5rem;margin-bottom:.75rem;min-height:40px}.button-group{padding:.4rem;gap:.4rem;border-radius:8px}.spinner-container{width:40px;height:40px;margin-bottom:.75rem}.spinner{width:40px;height:40px;border-width:2px}.spinner-glow{width:28px;height:28px}.room-code-display{padding:.6rem .875rem;border-radius:8px;gap:.25rem}.room-code-display .label{font-size:.55rem}.room-code-display .code{font-size:1.1rem;letter-spacing:3px}.copy-btn{padding:.25rem .5rem;font-size:.55rem;min-height:26px}}@media(prefers-reduced-motion:reduce){.lobby-btn,.room-code-input,.copy-btn{transition:none}.spinner{animation:none;border-top-color:transparent;border-color:var(--color-gold)}.spinner-glow,.searching-dots span{animation:none}}.ranked-queue-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:1rem;padding-top:calc(1rem + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.ranked-queue-container .page-title{font-size:1.5rem;color:var(--color-gold, #ffd700);margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 15px rgba(255,215,0,.3);text-align:center}.error-message{background:#dc262633;border:1px solid rgba(220,38,38,.5);color:#ef4444;padding:.75rem 1rem;border-radius:8px;margin-bottom:1.25rem;max-width:100%;text-align:center;font-size:.85rem}.rank-display{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:1.25rem;background:#0000004d;border-radius:14px;width:100%;max-width:300px}.rank-badge{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.875rem 1.5rem;border:3px solid;border-radius:10px;background:#0006}.rank-title{font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}.elo-value{font-size:1.1rem;color:#fff}.rank-stats{display:flex;gap:1.5rem}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:1.25rem;font-weight:700;color:#fff}.stat-label{font-size:.65rem;color:#fff9;text-transform:uppercase;letter-spacing:.5px}.elo-peak{font-size:.75rem;color:#ffffff80}.queue-idle,.queue-searching,.queue-found{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;width:100%;max-width:350px}.queue-description{max-width:100%;color:#ffffffb3;line-height:1.5;font-size:.9rem}.queue-btn{padding:.875rem 2rem;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-comfortable)}.queue-btn:active{transform:scale(.98)}.queue-btn.primary{background:linear-gradient(135deg,#9b59b6,#8e44ad);border-color:#9b59b6}.queue-btn.primary:active{box-shadow:0 0 15px #9b59b666}.queue-btn.secondary{background:transparent;border-color:#ffffff4d}.queue-searching h2{font-size:1.25rem;color:#fff;margin:0}.search-time{font-size:1.75rem;font-weight:700;color:var(--color-gold, #ffd700);font-family:monospace}.elo-range{font-size:.8rem;color:#fff9;padding:.4rem .875rem;background:#0000004d;border-radius:6px}.queue-info{display:flex;gap:1rem;font-size:.75rem;color:#ffffff80}.estimated-wait{font-size:.75rem;color:#fff6}.queue-found{animation:pulse .5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.match-found-icon{font-size:3rem;animation:bounce .5s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.queue-found h2{font-size:1.5rem;color:var(--color-gold, #ffd700);margin:0}.queue-found p{color:#ffffffb3;font-size:.9rem}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#9b59b6;border-radius:50%;animation:spin 1s linear infinite}.back-btn{margin-top:1.5rem;padding:.6rem 1.25rem;font-size:.9rem;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#ffffffb3;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-min)}@media(min-width:600px){.ranked-queue-container .page-title{font-size:1.75rem;letter-spacing:2.5px;margin-bottom:1.5rem}.rank-display{padding:1.5rem 1.75rem;border-radius:16px;max-width:320px}.rank-badge{padding:1rem 1.75rem}.rank-title{font-size:1.35rem}.elo-value{font-size:1.2rem}.stat-value{font-size:1.35rem}.stat-label{font-size:.7rem}.queue-description{font-size:.95rem}.queue-btn{padding:1rem 2.25rem;font-size:1.05rem}.search-time{font-size:1.9rem}}@media(min-width:900px){.ranked-queue-container{padding:2rem}.ranked-queue-container .page-title{font-size:2.5rem;letter-spacing:3px;margin-bottom:2rem;text-shadow:0 0 20px rgba(255,215,0,.3)}.error-message{padding:1rem 1.5rem;margin-bottom:1.5rem;max-width:400px;font-size:.9rem}.rank-display{gap:1rem;margin-bottom:2rem;padding:1.5rem 2rem;min-width:300px}.rank-badge{gap:.25rem;padding:1rem 2rem;border-radius:12px}.rank-title{font-size:1.5rem;letter-spacing:2px}.elo-value{font-size:1.25rem}.rank-stats{gap:2rem}.stat-value{font-size:1.5rem}.stat-label{font-size:.75rem;letter-spacing:1px}.elo-peak{font-size:.85rem}.queue-idle,.queue-searching,.queue-found{gap:1.5rem;max-width:400px}.queue-description{line-height:1.6;font-size:1rem}.queue-btn{padding:1rem 2.5rem;font-size:1.1rem}.queue-btn:hover{background:#fff3;border-color:#ffffff80;transform:translateY(-2px)}.queue-btn.primary:hover{background:linear-gradient(135deg,#a569bd,#9b59b6);box-shadow:0 0 20px #9b59b666}.queue-searching h2{font-size:1.5rem}.search-time{font-size:2rem}.elo-range{font-size:.9rem;padding:.5rem 1rem}.queue-info{gap:1.5rem;font-size:.85rem}.estimated-wait{font-size:.85rem}.match-found-icon{font-size:4rem}.queue-found h2{font-size:2rem}.queue-found p{font-size:1rem}.spinner{width:50px;height:50px;border-width:4px}.back-btn{margin-top:2rem;padding:.75rem 1.5rem;font-size:1rem}.back-btn:hover{background:#ffffff1a;border-color:#ffffff80;color:#fff}}@media(orientation:landscape)and (max-height:500px){.ranked-queue-container{padding:.5rem;padding-left:calc(.5rem + var(--safe-area-left));padding-right:calc(.5rem + var(--safe-area-right));justify-content:flex-start;overflow-y:auto}.ranked-queue-container .page-title{font-size:1.1rem;margin-bottom:.75rem}.rank-display{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:.75rem;margin-bottom:1rem;max-width:450px}.rank-badge{padding:.5rem 1rem}.rank-title{font-size:1rem}.elo-value{font-size:.9rem}.rank-stats{gap:1rem}.stat-value{font-size:1rem}.stat-label{font-size:.55rem}.queue-idle,.queue-searching,.queue-found{gap:.75rem}.queue-description{font-size:.75rem;line-height:1.4}.queue-btn{padding:.5rem 1.5rem;font-size:.85rem;min-height:36px}.search-time{font-size:1.25rem}.match-found-icon{font-size:2rem}.queue-found h2{font-size:1.1rem}.spinner{width:30px;height:30px;border-width:2px}.back-btn{margin-top:.75rem;padding:.4rem 1rem;font-size:.75rem;min-height:32px}}@media(prefers-reduced-motion:reduce){.queue-btn,.back-btn{transition:none}.spinner{animation:none;border-top-color:transparent;border-color:#9b59b6}.queue-found,.match-found-icon{animation:none}}.match-history-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh;padding:1rem;padding-top:calc(1rem + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.match-history-container .page-title{font-size:1.5rem;color:var(--color-gold, #ffd700);margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 15px rgba(255,215,0,.3);text-align:center}.tab-navigation{display:flex;gap:.35rem;margin-bottom:1rem;background:#0000004d;padding:.4rem;border-radius:10px;width:100%;max-width:350px}.tab-btn{flex:1;padding:.6rem .75rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.75px;border:none;border-radius:7px;background:transparent;color:#fff9;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-min)}.tab-btn:active{background:#ffffff1a;color:#fffc}.tab-btn.active{background:#9b59b680;color:#fff}.history-filter{display:flex;gap:.4rem;margin-bottom:.875rem;flex-wrap:wrap;justify-content:center}.filter-btn{padding:.4rem .75rem;font-size:.75rem;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:transparent;color:#fff9;cursor:pointer;transition:all .2s ease;min-height:32px}.filter-btn:active{border-color:#fff6;color:#fffc}.filter-btn.active{background:#ffffff1a;border-color:#ffffff80;color:#fff}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem;color:#fff9;text-align:center}.empty-hint{font-size:.8rem;color:#fff6}.spinner{width:35px;height:35px;border:3px solid rgba(255,255,255,.1);border-top-color:#9b59b6;border-radius:50%;animation:spin 1s linear infinite}.match-list{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:100%}.match-card{display:flex;flex-direction:column;gap:.6rem;padding:.875rem 1rem;background:#0000004d;border-radius:10px;border-left:4px solid}.match-card.victory{border-color:#2ecc71}.match-card.defeat{border-color:#e74c3c}.match-result{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.result-badge{padding:.2rem .6rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.75px;border-radius:4px}.result-badge.win{background:#2ecc7133;color:#2ecc71}.result-badge.loss{background:#e74c3c33;color:#e74c3c}.match-type{font-size:.6rem;padding:.15rem .4rem;border-radius:3px;text-transform:uppercase;letter-spacing:.75px}.match-type.ranked{background:#9b59b64d;color:#9b59b6}.match-type.casual{background:#ffffff1a;color:#fff9}.match-players{display:flex;align-items:center;justify-content:center;gap:.75rem}.player-info{display:flex;flex-direction:column;align-items:center;gap:.05rem}.player-info .character-name{font-size:.8rem;font-weight:600;color:#fff}.player-info .player-name{font-size:.65rem;color:#ffffff80}.vs{font-size:.65rem;color:#fff6;text-transform:uppercase}.match-details{display:flex;justify-content:center;gap:1rem;font-size:.75rem}.match-details .detail{display:flex;flex-direction:column;align-items:center;gap:.05rem}.match-details .label{font-size:.55rem;color:#fff6;text-transform:uppercase;letter-spacing:.75px}.match-details .value{font-weight:600;color:#fff}.match-details .elo-change.positive .value{color:#2ecc71}.match-details .elo-change.negative .value{color:#e74c3c}.match-date{font-size:.6rem;color:#fff6;text-align:right}.pagination{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem}.page-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:1px solid rgba(255,255,255,.3);border-radius:7px;background:transparent;color:#fff;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-min);min-width:var(--touch-target-min)}.page-btn:active:not(:disabled){background:#ffffff1a;border-color:#ffffff80}.page-btn:disabled{opacity:.3;cursor:not-allowed}.page-info{font-size:.8rem;color:#ffffffb3}.my-rank-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;margin-bottom:1rem;background:#9b59b626;border:2px solid rgba(155,89,182,.3);border-radius:10px;width:100%;max-width:100%;text-align:center}.rank-position{font-size:1.75rem;font-weight:700;color:var(--color-gold, #ffd700)}.rank-info{display:flex;flex-direction:column;gap:.15rem;align-items:center}.rank-info .rank-title{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.75px}.rank-info .rank-elo{font-size:.8rem;color:#ffffffb3}.my-rank-card .rank-stats{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.8rem;color:#ffffffb3}.my-rank-card .percentile{font-size:.7rem;color:var(--color-gold, #ffd700)}.leaderboard-list{width:100%;max-width:100%;background:#0000004d;border-radius:10px;overflow:hidden}.leaderboard-header{display:none}.leaderboard-row{display:grid;grid-template-columns:45px 1fr 70px;gap:.4rem;padding:.75rem .875rem;border-bottom:1px solid rgba(255,255,255,.05);align-items:center}.leaderboard-row:last-child{border-bottom:none}.leaderboard-row.is-me{background:#9b59b626}.leaderboard-row .col-rank{font-weight:700;color:#fffc;text-align:center;font-size:.9rem}.leaderboard-row .medal{font-size:1.1rem}.leaderboard-row .col-player{display:flex;flex-direction:column;gap:.05rem;min-width:0}.leaderboard-row .player-name{font-weight:600;color:#fff;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-row .player-rank{font-size:.6rem;text-transform:uppercase;letter-spacing:.75px}.leaderboard-row .col-elo{display:flex;flex-direction:column;align-items:flex-end;gap:.05rem}.leaderboard-row .elo-value{font-weight:700;color:var(--color-gold, #ffd700);font-size:.85rem}.leaderboard-row .elo-peak{font-size:.55rem;color:#fff6}.leaderboard-row .col-record{display:none}.back-btn{margin-top:1.5rem;padding:.6rem 1.25rem;font-size:.9rem;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:7px;color:#ffffffb3;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-min)}.back-btn:active{background:#ffffff1a;border-color:#ffffff80;color:#fff}@media(min-width:600px){.match-history-container{padding:1.5rem;padding-top:calc(1.5rem + var(--safe-area-top))}.match-history-container .page-title{font-size:2rem;letter-spacing:2.5px;margin-bottom:1.25rem}.tab-navigation{gap:.4rem;padding:.45rem;border-radius:11px;max-width:400px}.tab-btn{padding:.65rem 1rem;font-size:.9rem;border-radius:8px}.history-filter{gap:.45rem;margin-bottom:1rem}.filter-btn{padding:.45rem .875rem;font-size:.8rem;border-radius:18px}.match-list{max-width:550px;gap:.7rem}.match-card{padding:.95rem 1.15rem;gap:.65rem;border-radius:11px}.result-badge{font-size:.7rem;padding:.22rem .7rem}.match-type{font-size:.65rem}.player-info .character-name{font-size:.82rem}.player-info .player-name{font-size:.68rem}.match-details{gap:1.25rem;font-size:.78rem}.match-details .label{font-size:.6rem}.my-rank-card{flex-direction:row;justify-content:space-between;max-width:550px;padding:1.15rem;border-radius:11px;text-align:left}.rank-info{align-items:flex-start}.my-rank-card .rank-stats{align-items:flex-end}.leaderboard-list{max-width:550px;border-radius:11px}.leaderboard-row{grid-template-columns:50px 1fr 80px 80px;padding:.8rem 1rem}.leaderboard-row .col-record{display:flex;flex-direction:column;align-items:center;gap:.05rem}.leaderboard-row .record{font-size:.8rem;color:#fffc}.leaderboard-row .win-rate{font-size:.65rem;color:#ffffff80}.pagination{gap:.875rem;margin-top:1.4rem}.page-btn{width:40px;height:40px;font-size:1.15rem}}@media(min-width:900px){.match-history-container{padding:2rem;padding-top:calc(2rem + var(--safe-area-top))}.match-history-container .page-title{font-size:2.5rem;letter-spacing:3px;margin-bottom:1.5rem;text-shadow:0 0 20px rgba(255,215,0,.3)}.tab-navigation{gap:.5rem;padding:.5rem;border-radius:12px;max-width:450px}.tab-btn{padding:.75rem 1.5rem;font-size:1rem;letter-spacing:1px}.tab-btn:hover{background:#ffffff1a;color:#fffc}.history-filter{gap:.5rem;margin-bottom:1rem}.filter-btn{padding:.5rem 1rem;font-size:.85rem;border-radius:20px}.filter-btn:hover{border-color:#fff6;color:#fffc}.loading-state,.empty-state{gap:1rem;padding:3rem}.empty-hint{font-size:.85rem}.spinner{width:40px;height:40px}.match-list{max-width:600px;gap:.75rem}.match-card{padding:1rem 1.25rem;gap:.75rem;border-radius:12px}.match-result{gap:.75rem}.result-badge{padding:.25rem .75rem;font-size:.75rem;letter-spacing:1px}.match-type{font-size:.7rem;padding:.2rem .5rem;letter-spacing:1px}.match-players{gap:1rem}.player-info .character-name{font-size:.85rem}.player-info .player-name{font-size:.7rem}.vs{font-size:.75rem}.match-details{gap:1.5rem;font-size:.8rem}.match-details .label{font-size:.65rem;letter-spacing:1px}.match-date{font-size:.7rem}.pagination{gap:1rem;margin-top:1.5rem}.page-btn{width:40px;height:40px;font-size:1.2rem;border-radius:8px}.page-btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff80}.page-info{font-size:.9rem}.my-rank-card{gap:1.5rem;padding:1rem 1.5rem;margin-bottom:1.5rem;border-radius:12px;max-width:600px}.rank-position{font-size:2rem}.rank-info .rank-title{font-size:1.1rem;letter-spacing:1px}.rank-info .rank-elo,.my-rank-card .rank-stats{font-size:.85rem}.my-rank-card .percentile{font-size:.75rem}.leaderboard-list{max-width:600px;border-radius:12px}.leaderboard-header{display:grid;grid-template-columns:60px 1fr 100px 100px;gap:.5rem;padding:.75rem 1rem;background:#0006;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#ffffff80}.leaderboard-row{grid-template-columns:60px 1fr 100px 100px;gap:.5rem;padding:.75rem 1rem}.leaderboard-row .col-rank{font-size:1rem}.leaderboard-row .medal{font-size:1.2rem}.leaderboard-row .player-name{font-size:.9rem}.leaderboard-row .player-rank{font-size:.7rem;letter-spacing:1px}.leaderboard-row .elo-value{font-size:.9rem}.leaderboard-row .elo-peak{font-size:.65rem}.leaderboard-row .record{font-size:.85rem}.leaderboard-row .win-rate{font-size:.7rem}.back-btn{margin-top:2rem;padding:.75rem 1.5rem;font-size:1rem;border-radius:8px}.back-btn:hover{background:#ffffff1a;border-color:#ffffff80;color:#fff}}@media(orientation:landscape)and (max-height:500px){.match-history-container{padding:.5rem;padding-left:calc(.5rem + var(--safe-area-left));padding-right:calc(.5rem + var(--safe-area-right));padding-top:calc(.5rem + var(--safe-area-top));align-items:flex-start}.match-history-container .page-title{font-size:1.1rem;margin-bottom:.6rem;letter-spacing:1.5px}.tab-navigation{margin-bottom:.6rem;padding:.3rem;border-radius:8px;max-width:320px}.tab-btn{padding:.4rem .6rem;font-size:.7rem;border-radius:6px;min-height:32px}.history-filter{margin-bottom:.5rem;gap:.3rem}.filter-btn{padding:.3rem .5rem;font-size:.65rem;min-height:28px}.match-list{gap:.4rem}.match-card{padding:.6rem .75rem;gap:.4rem;border-radius:8px;border-left-width:3px}.result-badge{font-size:.55rem;padding:.15rem .4rem}.match-type{font-size:.5rem}.player-info .character-name{font-size:.7rem}.player-info .player-name{font-size:.55rem}.match-details{gap:.75rem;font-size:.65rem}.match-details .label{font-size:.5rem}.my-rank-card{flex-direction:row;padding:.6rem .75rem;margin-bottom:.6rem;border-radius:8px;gap:.75rem}.rank-position{font-size:1.25rem}.rank-info{align-items:flex-start}.rank-info .rank-title{font-size:.8rem}.rank-info .rank-elo{font-size:.65rem}.my-rank-card .rank-stats{align-items:flex-end;font-size:.65rem}.leaderboard-list{border-radius:8px}.leaderboard-row{grid-template-columns:40px 1fr 60px 60px;padding:.5rem .6rem;gap:.3rem}.leaderboard-row .col-rank{font-size:.75rem}.leaderboard-row .medal{font-size:.9rem}.leaderboard-row .player-name{font-size:.7rem}.leaderboard-row .player-rank{font-size:.5rem}.leaderboard-row .elo-value{font-size:.7rem}.leaderboard-row .col-record{display:flex}.leaderboard-row .record{font-size:.65rem}.leaderboard-row .win-rate{font-size:.5rem}.pagination{margin-top:.75rem;gap:.5rem}.page-btn{width:32px;height:32px;font-size:.9rem;min-height:32px;min-width:32px}.page-info{font-size:.7rem}.back-btn{margin-top:.75rem;padding:.4rem .875rem;font-size:.75rem;min-height:32px}}@media(prefers-reduced-motion:reduce){.tab-btn,.filter-btn,.page-btn,.back-btn{transition:none}.spinner{animation:none;border-top-color:transparent;border-color:#9b59b6}}.how-to-play-container{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#0a0a12,#1a1a2e,#0a0a12);color:var(--color-text);display:flex;flex-direction:column}.htp-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;padding-top:calc(.75rem + var(--safe-area-top));background:#00000080;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.htp-title{font-size:1.1rem;font-weight:700;color:var(--color-gold);text-transform:uppercase;letter-spacing:1.5px;margin:0}.section-nav{display:flex;justify-content:flex-start;gap:.35rem;padding:.75rem;padding-left:calc(.75rem + var(--safe-area-left));padding-right:calc(.75rem + var(--safe-area-right));background:#0000004d;border-bottom:1px solid rgba(255,255,255,.05);overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}.section-nav::-webkit-scrollbar{display:none}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem .875rem;background:#ffffff0d;border:2px solid transparent;border-radius:10px;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0;scroll-snap-align:start;min-height:var(--touch-target-min)}.nav-btn:active{background:#ffffff1a;color:var(--color-text)}.nav-btn.active{background:#ffd70026;border-color:var(--color-gold);color:var(--color-gold)}.nav-icon{font-size:1.1rem}.nav-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.htp-content{flex:1;padding:1rem;padding-left:calc(1rem + var(--safe-area-left));padding-right:calc(1rem + var(--safe-area-right));max-width:100%;margin:0 auto;width:100%}.content-section{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.content-section h2{font-size:1.35rem;color:var(--color-gold);margin-bottom:.4rem;text-align:center}.section-desc,.intro-text{text-align:center;color:var(--color-text-secondary);max-width:100%;margin:0 auto 1.25rem;line-height:1.5;font-size:.85rem}.section-intro{text-align:center;margin-bottom:2rem}.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:2rem}.info-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;text-align:center;transition:all .2s ease}.info-card:active{transform:scale(.98);border-color:var(--color-gold)}.info-icon{font-size:1.75rem;margin-bottom:.6rem}.info-card h3{color:var(--color-text);margin-bottom:.35rem;font-size:.9rem}.info-card p{color:var(--color-text-secondary);font-size:.75rem;line-height:1.4}.info-card strong{color:var(--color-gold)}.game-flow{background:#ffffff08;border-radius:12px;padding:1.25rem;border:1px solid rgba(255,255,255,.1)}.game-flow h3{text-align:center;margin-bottom:1.25rem;color:var(--color-text);font-size:1rem}.flow-steps{display:flex;flex-direction:column;align-items:center;gap:.75rem}.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:150px}.step-number{width:40px;height:40px;background:linear-gradient(135deg,var(--color-gold) 0%,#b8860b 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:#000;margin-bottom:.5rem}.step-content h4{color:var(--color-text);margin-bottom:.15rem;font-size:.85rem}.step-content p{color:var(--color-text-secondary);font-size:.7rem}.flow-arrow{font-size:1rem;color:var(--color-gold);opacity:.5;transform:rotate(90deg)}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#ffffff1a;border-radius:4px;padding:2px;width:fit-content;margin:.4rem auto}.mini-cell{width:22px;height:22px;background:#0006;border-radius:2px;display:flex;align-items:center;justify-content:center;position:relative;font-size:.5rem}.mini-cell.highlight-attack{background:#f006;box-shadow:inset 0 0 8px #f009}.mini-cell.highlight-move{background:#6464ff66;box-shadow:inset 0 0 8px #6464ff99}.mini-cell.caster{background:#0096ff80;border:2px solid #00aaff}.mini-cell.target{background:#ff646480;border:2px solid #ff6666}.cell-marker{font-size:.4rem;font-weight:700}.caster-marker{color:#0af}.target-marker{color:#f66}.cell-damage{color:#f44;font-weight:700}.battlefield-demo{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem}.grid-explanation,.starting-positions{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem}.grid-explanation h3,.starting-positions h3{margin-bottom:.75rem;color:var(--color-text);font-size:.95rem}.labeled-grid{display:flex;flex-direction:column;gap:.35rem}.grid-labels-top{display:flex;gap:2px;padding-left:40px}.grid-labels-top span{width:32px;text-align:center;font-size:.55rem;color:var(--color-text-secondary)}.grid-with-rows{display:flex;gap:.35rem}.grid-labels-left{display:flex;flex-direction:column;gap:2px;justify-content:space-around}.grid-labels-left span{font-size:.55rem;color:var(--color-text-secondary);width:36px}.position-grid{display:grid;grid-template-columns:repeat(4,32px);gap:2px;background:#ffffff1a;padding:2px;border-radius:4px}.position-cell{width:32px;height:32px;background:#0006;border-radius:3px;display:flex;align-items:center;justify-content:center}.pos-number{color:var(--color-text-secondary);font-size:.65rem}.grid-note{margin-top:.75rem;font-size:.75rem;line-height:1.6;color:var(--color-text-secondary)}.p1-color{color:#0af;font-weight:700}.p2-color{color:#f66;font-weight:700}.movement-section{margin-top:1.5rem}.movement-section h3{margin-bottom:.35rem;color:var(--color-text);font-size:.95rem}.movement-section>p{color:var(--color-text-secondary);margin-bottom:1rem;font-size:.8rem}.movement-examples{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap;margin-bottom:.75rem}.movement-example{text-align:center}.movement-example h4{margin-bottom:.35rem;color:var(--color-text);font-size:.75rem}.movement-example p{color:var(--color-text-secondary);font-size:.65rem;margin-top:.35rem}.movement-note{text-align:center;color:#fa0;font-size:.75rem;margin-top:.75rem}.characters-showcase{display:flex;flex-direction:column;gap:1.5rem}.character-showcase{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}.char-header{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;text-align:center}.char-header.valka-bg{background:linear-gradient(180deg,rgba(255,100,50,.2) 0%,transparent 100%)}.char-header.ogen-bg{background:linear-gradient(180deg,rgba(100,200,255,.2) 0%,transparent 100%)}.char-header.kiara-bg{background:linear-gradient(180deg,rgba(255,150,200,.2) 0%,transparent 100%)}.char-avatar{width:60px;height:60px;border-radius:50%;border:2px solid var(--color-gold);object-fit:cover}.char-info h3{color:var(--color-gold);font-size:1.1rem;margin-bottom:.15rem}.char-style{display:inline-block;background:#ffd70033;color:var(--color-gold);padding:.2rem .6rem;border-radius:16px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.75px;margin-bottom:.35rem}.char-desc{color:var(--color-text-secondary);font-size:.75rem}.char-abilities{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:1rem}.ability-card{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem;cursor:pointer;transition:all .2s ease}.ability-card:active{border-color:var(--color-attack);transform:scale(.98)}.ability-header{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.5rem}.ability-name{color:var(--color-text);font-weight:700;font-size:.75rem}.ability-stats{color:var(--color-attack);font-size:.6rem;font-weight:700}.ability-desc{color:var(--color-text-secondary);font-size:.65rem;margin-top:.35rem;text-align:center}.universal-cards{margin-top:2rem}.universal-cards h3{text-align:center;margin-bottom:1rem;color:var(--color-text);font-size:1rem}.universal-grid{display:flex;flex-direction:column;gap:.75rem}.universal-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.2);border-radius:10px;padding:1rem;text-align:center}.universal-card.regen{border-color:#00c86480;background:#00c8641a}.universal-card.vanish{border-color:#9664ff80;background:#9664ff1a}.universal-card h4{color:var(--color-text);margin-bottom:.35rem;font-size:1rem}.card-cost{font-size:.9rem;font-weight:700;margin-bottom:.35rem}.regen .card-cost{color:#0c6}.vanish .card-cost{color:#96f}.universal-card p:last-child{color:var(--color-text-secondary);font-size:.75rem}.combat-demo{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.25rem;margin-bottom:2rem}.demo-controls{text-align:center;margin-bottom:1rem}.demo-controls h3{color:var(--color-gold);margin-bottom:.35rem;font-size:1rem}.demo-controls>p{color:var(--color-text-secondary);margin-bottom:.75rem;font-size:.8rem}.attack-selector{display:flex;flex-direction:column;align-items:center;gap:.5rem}.attack-selector label{color:var(--color-text);font-weight:700;font-size:.85rem}.attack-select{padding:.5rem .75rem;background:#00000080;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:var(--color-text);font-size:.85rem;cursor:pointer;min-height:var(--touch-target-min);width:100%;max-width:250px}.attack-select:focus{outline:none;border-color:var(--color-gold)}.attack-select optgroup{background:#1a1a2e;color:var(--color-gold)}.attack-select option{background:#1a1a2e;color:var(--color-text)}.demo-grid-container{display:flex;flex-direction:column;align-items:center;margin-bottom:.75rem}.interactive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:#ffffff1a;padding:3px;border-radius:6px}.interactive-cell{width:50px;height:50px;background:#0006;border:2px solid rgba(255,255,255,.1);border-radius:5px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s ease}.interactive-cell:active{border-color:#ffffff4d;background:#ffffff0d}.interactive-cell.highlight-attack{background:#ff00004d;border-color:var(--color-attack);box-shadow:inset 0 0 15px #f006}.interactive-cell.caster{background:#0096ff4d;border-color:#0af;box-shadow:0 0 10px #0096ff80}.cell-character{width:35px;height:35px}.mini-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover}.damage-zone{font-size:1rem;font-weight:700;color:#f44;text-shadow:0 0 8px rgba(255,0,0,.5)}.cell-number{position:absolute;bottom:1px;right:3px;font-size:.5rem;color:#ffffff4d}.demo-hint{color:var(--color-text-secondary);font-size:.75rem;margin-top:.4rem}.selected-attack-info{text-align:center;padding:.75rem;background:#ff00001a;border-radius:8px;margin-top:.75rem}.selected-attack-info h4{color:var(--color-attack);margin-bottom:.35rem;font-size:.9rem}.selected-attack-info .stat{color:var(--color-text);margin:0 .5rem;font-size:.8rem}.combat-rules h3{text-align:center;margin-bottom:1rem;color:var(--color-text);font-size:1rem}.rule-cards{display:flex;flex-direction:column;gap:.875rem}.rule-card{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem}.rule-card h4{color:var(--color-gold);margin-bottom:.75rem;text-align:center;font-size:.9rem}.rule-card>p{color:var(--color-text-secondary);font-size:.75rem;text-align:center;margin-top:.75rem}.turn-order-visual{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem;margin-bottom:.4rem}.turn-item{padding:.2rem .35rem;border-radius:3px;font-size:.55rem;font-weight:700}.turn-item.p1{background:#0096ff4d;color:#0af}.turn-item.p2{background:#ff64644d;color:#f66}.turn-arrow{color:var(--color-text-secondary);font-size:.55rem}.energy-visual{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}.energy-bar{flex:1;height:16px;background:#0006;border-radius:8px;overflow:hidden}.energy-fill{height:100%;background:linear-gradient(90deg,#0c6,#6f9);display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:#000;transition:width .3s ease}.energy-fill.warning{background:linear-gradient(90deg,#f60,#fa0)}.energy-label{font-size:.6rem;color:var(--color-text-secondary);width:90px}.vanish-visual{display:flex;align-items:center;justify-content:center;gap:.75rem}.vanish-state{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;border-radius:6px}.vanish-state.visible{background:#ffffff1a}.vanish-state.invisible{background:#9664ff33}.vanish-state span:first-child{font-size:1.5rem}.vanish-state span:last-child{font-size:.6rem;color:var(--color-text-secondary)}.vanish-arrow{color:#96f;font-weight:700;font-size:.65rem}.strategy-tips{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.strategy-card{background:#ffffff08;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;transition:all .2s ease}.strategy-card:active{transform:scale(.99)}.strategy-card.beginner{border-color:#64c8644d}.strategy-card.intermediate{border-color:#6496ff4d}.strategy-card.advanced{border-color:#ff96324d}.strategy-card.expert{border-color:#ff32644d}.strategy-header{margin-bottom:.75rem}.strategy-level{display:inline-block;padding:.2rem .6rem;border-radius:16px;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.75px;margin-bottom:.35rem}.beginner .strategy-level{background:#64c86433;color:#6c6}.intermediate .strategy-level{background:#6496ff33;color:#69f}.advanced .strategy-level{background:#ff963233;color:#f93}.expert .strategy-level{background:#ff326433;color:#f36}.strategy-card h3{color:var(--color-text);font-size:1rem}.strategy-card ul{list-style:none;padding:0}.strategy-card li{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05);color:var(--color-text-secondary);font-size:.8rem;line-height:1.4}.strategy-card li:last-child{border-bottom:none}.strategy-card li strong{color:var(--color-text)}.character-strategies{display:flex;flex-direction:column;gap:.75rem}.char-strat{background:#0003;border-radius:8px;padding:.75rem}.char-strat h4{color:var(--color-gold);margin-bottom:.35rem;font-size:.85rem}.char-strat p{color:var(--color-text-secondary);font-size:.75rem;line-height:1.4}.final-tip{text-align:center;background:linear-gradient(135deg,#ffd7001a,#ff96321a);border:2px solid var(--color-gold);border-radius:12px;padding:1.25rem}.final-tip h3{color:var(--color-gold);margin-bottom:.75rem;font-size:1rem}.golden-text{color:var(--color-text);font-size:.9rem;font-style:italic;line-height:1.5;max-width:100%;margin:0 auto}.htp-footer{padding:1rem;padding-bottom:calc(1rem + var(--safe-area-bottom));text-align:center;background:#0006;border-top:1px solid rgba(255,255,255,.1)}.play-now-btn{padding:.875rem 2rem;background:linear-gradient(135deg,var(--color-gold) 0%,#b8860b 100%);border:none;border-radius:10px;color:#000;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-comfortable)}.play-now-btn:active{transform:scale(.98);box-shadow:0 5px 20px #ffd70066}@media(min-width:600px){.htp-header{padding:.875rem 1.25rem;padding-top:calc(.875rem + var(--safe-area-top))}.htp-title{font-size:1.3rem;letter-spacing:2px}.section-nav{justify-content:center;gap:.4rem;padding:.875rem}.nav-btn{padding:.6rem 1.15rem;border-radius:11px}.nav-icon{font-size:1.3rem}.nav-label{font-size:.7rem;letter-spacing:.75px}.htp-content{padding:1.5rem;max-width:900px}.content-section h2{font-size:1.65rem;margin-bottom:.45rem}.section-desc,.intro-text{font-size:.9rem;max-width:600px;margin-bottom:1.5rem}.info-cards{grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.25rem}.info-card{padding:1.15rem;border-radius:14px}.info-icon{font-size:2rem;margin-bottom:.75rem}.info-card h3{font-size:.95rem}.info-card p{font-size:.8rem}.game-flow{padding:1.5rem;border-radius:14px}.game-flow h3{font-size:1.1rem;margin-bottom:1.5rem}.flow-steps{flex-direction:row;gap:.75rem;justify-content:center}.flow-arrow{transform:rotate(0);font-size:1.25rem}.step-number{width:45px;height:45px;font-size:1.25rem}.step-content h4{font-size:.9rem}.step-content p{font-size:.75rem}.battlefield-demo{flex-direction:row;gap:1.5rem}.grid-explanation,.starting-positions{flex:1;padding:1.25rem;border-radius:11px}.mini-cell{width:26px;height:26px;font-size:.55rem}.position-grid{grid-template-columns:repeat(4,38px)}.position-cell{width:38px;height:38px}.pos-number{font-size:.75rem}.grid-labels-top span,.grid-labels-left span{font-size:.65rem}.grid-labels-top{padding-left:45px}.grid-labels-top span{width:38px}.char-header{flex-direction:row;gap:1.25rem;padding:1.25rem;text-align:left}.char-avatar{width:72px;height:72px;border-width:3px}.char-info h3{font-size:1.3rem}.char-style{font-size:.68rem}.char-desc{font-size:.82rem}.char-abilities{gap:.875rem;padding:1.25rem}.ability-card{padding:.875rem}.ability-header{flex-direction:row;justify-content:space-between}.ability-name{font-size:.82rem}.ability-stats{font-size:.68rem}.universal-grid{flex-direction:row;justify-content:center;gap:1.25rem}.universal-card{min-width:180px;padding:1.25rem}.interactive-cell{width:65px;height:65px}.cell-character{width:42px;height:42px}.damage-zone{font-size:1.1rem}.rule-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rule-card{padding:1.15rem}.strategy-tips{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.strategy-card{padding:1.25rem}.final-tip{padding:1.5rem}.golden-text{font-size:1rem;max-width:550px}.play-now-btn{padding:1rem 2.5rem;font-size:1.05rem}}@media(min-width:900px){.htp-header{padding:1rem 1.5rem;padding-top:calc(1rem + var(--safe-area-top))}.htp-title{font-size:1.5rem;letter-spacing:3px}.section-nav{gap:.5rem;padding:1rem}.nav-btn{padding:.75rem 1.5rem;border-radius:12px}.nav-btn:hover{background:#ffffff1a;color:var(--color-text)}.nav-icon{font-size:1.5rem}.nav-label{font-size:.8rem;letter-spacing:1px}.htp-content{padding:2rem;max-width:1400px}.content-section h2{font-size:2rem;margin-bottom:.5rem}.section-desc,.intro-text{max-width:700px;margin-bottom:2rem;line-height:1.6;font-size:1rem}.section-intro{margin-bottom:3rem}.info-cards{gap:1.5rem;margin-bottom:3rem}.info-card{padding:1.5rem;border-radius:16px}.info-card:hover{transform:translateY(-5px);border-color:var(--color-gold);box-shadow:0 10px 30px #ffd7001a}.info-icon{font-size:2.5rem;margin-bottom:1rem}.info-card h3{font-size:1.1rem;margin-bottom:.5rem}.info-card p{font-size:.9rem;line-height:1.5}.game-flow{padding:2rem;border-radius:16px}.game-flow h3{font-size:1.3rem;margin-bottom:2rem}.flow-steps{gap:1rem}.step-number{width:50px;height:50px;font-size:1.5rem;margin-bottom:.75rem}.step-content h4{font-size:1rem;margin-bottom:.25rem}.step-content p{font-size:.8rem}.flow-arrow{font-size:1.5rem}.mini-cell{width:28px;height:28px;font-size:.6rem}.battlefield-demo{gap:2rem;margin-bottom:3rem}.grid-explanation,.starting-positions{padding:1.5rem;border-radius:12px}.grid-explanation h3,.starting-positions h3{font-size:1.1rem;margin-bottom:1rem}.position-grid{grid-template-columns:repeat(4,40px)}.position-cell{width:40px;height:40px}.pos-number{font-size:.8rem}.grid-labels-top span,.grid-labels-left span{font-size:.7rem}.grid-labels-top{padding-left:50px}.grid-labels-top span{width:40px}.grid-labels-left span{width:45px}.grid-note{font-size:.85rem;margin-top:1rem;line-height:1.8}.movement-section h3{font-size:1.1rem;margin-bottom:.5rem}.movement-section>p{font-size:.9rem;margin-bottom:1.5rem}.movement-examples{gap:2rem;margin-bottom:1rem}.movement-example h4{font-size:.9rem;margin-bottom:.5rem}.movement-example p{font-size:.8rem;margin-top:.5rem}.movement-note{font-size:.9rem;margin-top:1rem}.characters-showcase{gap:3rem}.character-showcase{border-radius:16px}.char-header{gap:1.5rem;padding:1.5rem}.char-avatar{width:80px;height:80px}.char-info h3{font-size:1.5rem;margin-bottom:.25rem}.char-style{padding:.25rem .75rem;font-size:.75rem;letter-spacing:1px;margin-bottom:.5rem}.char-desc{font-size:.9rem}.char-abilities{grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.5rem}.ability-card{padding:1rem;border-radius:12px}.ability-card:hover{border-color:var(--color-attack);transform:translateY(-3px);box-shadow:0 5px 20px #f003}.ability-header{margin-bottom:.75rem}.ability-name{font-size:.95rem}.ability-stats{font-size:.75rem}.ability-desc{font-size:.8rem;margin-top:.5rem}.universal-cards{margin-top:3rem}.universal-cards h3{font-size:1.2rem;margin-bottom:1.5rem}.universal-grid{gap:2rem}.universal-card{min-width:200px;padding:1.5rem 2rem;border-radius:12px}.universal-card h4{font-size:1.2rem;margin-bottom:.5rem}.card-cost{font-size:1.1rem;margin-bottom:.5rem}.universal-card p:last-child{font-size:.85rem}.combat-demo{padding:2rem;border-radius:16px;margin-bottom:3rem}.demo-controls h3{font-size:1.2rem;margin-bottom:.5rem}.demo-controls>p{font-size:.9rem;margin-bottom:1rem}.attack-selector{flex-direction:row;gap:1rem}.attack-selector label{font-size:1rem}.attack-select{padding:.5rem 1rem;font-size:1rem;max-width:300px}.interactive-grid{gap:4px;padding:4px;border-radius:8px}.interactive-cell{width:80px;height:80px;border-radius:6px}.interactive-cell:hover{border-color:#ffffff4d;background:#ffffff0d}.cell-character{width:50px;height:50px}.damage-zone{font-size:1.2rem}.cell-number{font-size:.65rem;bottom:2px;right:4px}.demo-hint{font-size:.85rem;margin-top:.5rem}.selected-attack-info{padding:1rem;margin-top:1rem}.selected-attack-info h4{font-size:1.1rem;margin-bottom:.5rem}.selected-attack-info .stat{margin:0 1rem;font-size:.9rem}.combat-rules h3{font-size:1.2rem;margin-bottom:1.5rem}.rule-cards{gap:1.5rem}.rule-card{padding:1.5rem;border-radius:12px}.rule-card h4{font-size:1.05rem;margin-bottom:1rem}.rule-card>p{font-size:.85rem;margin-top:1rem}.turn-order-visual{gap:.25rem;margin-bottom:.5rem}.turn-item{padding:.3rem .5rem;font-size:.7rem}.turn-arrow{font-size:.7rem}.energy-visual{gap:1rem;margin-bottom:.5rem}.energy-bar{height:20px;border-radius:10px}.energy-fill{font-size:.7rem}.energy-label{font-size:.75rem;width:120px}.vanish-visual{gap:1rem}.vanish-state{padding:.75rem 1rem;border-radius:8px}.vanish-state span:first-child{font-size:2rem}.vanish-state span:last-child{font-size:.75rem}.vanish-arrow{font-size:.8rem}.strategy-tips{gap:1.5rem;margin-bottom:3rem}.strategy-card{padding:1.5rem;border-radius:16px}.strategy-card:hover{transform:translateY(-5px)}.strategy-header{margin-bottom:1rem}.strategy-level{padding:.25rem .75rem;font-size:.7rem;letter-spacing:1px;margin-bottom:.5rem}.strategy-card h3{font-size:1.2rem}.strategy-card li{padding:.75rem 0;font-size:.9rem;line-height:1.5}.character-strategies{gap:1rem}.char-strat{padding:1rem}.char-strat h4{font-size:.95rem;margin-bottom:.5rem}.char-strat p{font-size:.85rem;line-height:1.5}.final-tip{padding:2rem;border-radius:16px}.final-tip h3{font-size:1.2rem;margin-bottom:1rem}.golden-text{font-size:1.1rem;line-height:1.6;max-width:600px}.htp-footer{padding:1.5rem;padding-bottom:calc(1.5rem + var(--safe-area-bottom))}.play-now-btn{padding:1rem 3rem;font-size:1.2rem;letter-spacing:2px;border-radius:12px}.play-now-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px #ffd70066}}@media(orientation:landscape)and (max-height:500px){.htp-header{padding:.4rem .75rem;padding-top:calc(.4rem + var(--safe-area-top));padding-left:calc(.75rem + var(--safe-area-left));padding-right:calc(.75rem + var(--safe-area-right))}.htp-title{font-size:.9rem;letter-spacing:1px}.section-nav{padding:.4rem;gap:.25rem}.nav-btn{padding:.35rem .6rem;border-radius:6px;min-height:32px}.nav-icon{font-size:.9rem}.nav-label{font-size:.5rem}.htp-content{padding:.75rem;padding-left:calc(.75rem + var(--safe-area-left));padding-right:calc(.75rem + var(--safe-area-right))}.content-section h2{font-size:1rem;margin-bottom:.25rem}.section-desc,.intro-text{font-size:.7rem;margin-bottom:.75rem;line-height:1.4}.section-intro{margin-bottom:1rem}.info-cards{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}.info-card{padding:.5rem;border-radius:8px}.info-icon{font-size:1.25rem;margin-bottom:.25rem}.info-card h3{font-size:.65rem;margin-bottom:.15rem}.info-card p{font-size:.55rem;line-height:1.3}.game-flow{padding:.75rem;border-radius:8px}.game-flow h3{font-size:.85rem;margin-bottom:.75rem}.flow-steps{flex-direction:row;gap:.4rem}.flow-step{max-width:100px}.step-number{width:28px;height:28px;font-size:.85rem;margin-bottom:.25rem}.step-content h4{font-size:.65rem;margin-bottom:.1rem}.step-content p{font-size:.5rem}.flow-arrow{transform:rotate(0);font-size:.85rem}.mini-cell{width:18px;height:18px;font-size:.4rem}.battlefield-demo{flex-direction:row;gap:.75rem;margin-bottom:1rem}.grid-explanation,.starting-positions{padding:.6rem;border-radius:6px}.grid-explanation h3,.starting-positions h3{font-size:.75rem;margin-bottom:.5rem}.position-grid{grid-template-columns:repeat(4,26px)}.position-cell{width:26px;height:26px}.pos-number{font-size:.5rem}.grid-labels-top span,.grid-labels-left span{font-size:.45rem}.grid-labels-top{padding-left:30px}.grid-labels-top span{width:26px}.grid-labels-left span{width:28px}.grid-note{font-size:.55rem;margin-top:.5rem;line-height:1.4}.char-header{flex-direction:row;padding:.6rem;gap:.6rem}.char-avatar{width:45px;height:45px}.char-info h3{font-size:.9rem}.char-style{font-size:.5rem;padding:.15rem .4rem}.char-desc{font-size:.6rem}.char-abilities{grid-template-columns:repeat(4,1fr);gap:.4rem;padding:.6rem}.ability-card{padding:.4rem;border-radius:6px}.ability-header{flex-direction:column;gap:.1rem;margin-bottom:.25rem}.ability-name{font-size:.55rem}.ability-stats{font-size:.45rem}.ability-desc{font-size:.5rem;margin-top:.2rem}.universal-grid{flex-direction:row;gap:.5rem}.universal-card{padding:.6rem;border-radius:6px;min-width:120px}.universal-card h4{font-size:.75rem;margin-bottom:.2rem}.card-cost{font-size:.65rem;margin-bottom:.2rem}.universal-card p:last-child{font-size:.55rem}.combat-demo{padding:.75rem;border-radius:8px;margin-bottom:1rem}.demo-controls h3{font-size:.85rem}.demo-controls>p{font-size:.6rem;margin-bottom:.5rem}.attack-selector{flex-direction:row;gap:.5rem}.attack-selector label{font-size:.65rem}.attack-select{font-size:.7rem;padding:.3rem .5rem;min-height:32px;max-width:180px}.interactive-grid{gap:2px;padding:2px}.interactive-cell{width:38px;height:38px;border-radius:3px}.cell-character{width:26px;height:26px}.damage-zone{font-size:.75rem}.cell-number{font-size:.4rem}.demo-hint{font-size:.55rem}.selected-attack-info{padding:.5rem;margin-top:.5rem}.selected-attack-info h4{font-size:.7rem}.selected-attack-info .stat{font-size:.6rem;margin:0 .3rem}.rule-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.rule-card{padding:.6rem;border-radius:6px}.rule-card h4{font-size:.7rem;margin-bottom:.4rem}.rule-card>p{font-size:.55rem;margin-top:.4rem}.turn-item{padding:.15rem .25rem;font-size:.45rem}.energy-bar{height:12px}.energy-fill{font-size:.45rem}.energy-label{font-size:.5rem;width:70px}.vanish-state span:first-child{font-size:1rem}.vanish-state span:last-child{font-size:.45rem}.strategy-tips{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}.strategy-card{padding:.6rem;border-radius:8px}.strategy-level{font-size:.45rem;padding:.15rem .4rem}.strategy-card h3{font-size:.8rem}.strategy-card li{padding:.3rem 0;font-size:.6rem;line-height:1.3}.char-strat{padding:.5rem;border-radius:5px}.char-strat h4{font-size:.65rem}.char-strat p{font-size:.55rem;line-height:1.3}.final-tip{padding:.75rem;border-radius:8px}.final-tip h3{font-size:.8rem;margin-bottom:.4rem}.golden-text{font-size:.7rem;line-height:1.4}.htp-footer{padding:.5rem;padding-bottom:calc(.5rem + var(--safe-area-bottom))}.play-now-btn{padding:.5rem 1.25rem;font-size:.8rem;border-radius:6px;min-height:36px}}@media(prefers-reduced-motion:reduce){.content-section{animation:none}.info-card,.ability-card,.strategy-card,.nav-btn,.play-now-btn,.interactive-cell,.energy-fill{transition:none}}.app-loading{width:100%;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;background-color:#0a0a12}.app-loading .loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--color-primary, #c9a227);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}html,body{margin:0;padding:0;min-height:100vh;min-height:100dvh;background-color:#0a0a12;background-image:url(/images/navigationmenubackground.webp);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;color:var(--color-text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.battle-container{background-image:url(/images/background1.webp);background-repeat:repeat;background-size:400px}#root{min-height:100vh;min-height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.home-page{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding-top:calc(55px + var(--safe-area-top));padding-bottom:var(--safe-area-bottom)}.home-header{position:fixed;top:0;left:0;right:0;height:calc(55px + var(--safe-area-top));padding-top:var(--safe-area-top);display:flex;justify-content:space-between;align-items:center;padding-left:.75rem;padding-right:.75rem;background:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 70%,transparent 100%);z-index:var(--z-sticky)}.header-left{flex:1;display:flex;align-items:center}.header-right{display:flex;align-items:center;gap:.5rem}.auth-buttons{display:flex;gap:.25rem}.header-btn{padding:.4rem .6rem;font-size:.65rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;min-height:var(--touch-target-min);display:flex;align-items:center;justify-content:center}.header-btn.login{background:transparent;border:2px solid var(--color-gold);color:var(--color-gold)}.header-btn.login:active{background:#ffd70033;transform:scale(.97)}.header-btn.register{background:linear-gradient(180deg,var(--color-gold) 0%,#b8960f 100%);border:2px solid transparent;color:var(--color-background)}.header-btn.register:active{transform:scale(.97)}.header-btn.logout{background:transparent;border:2px solid rgba(255,255,255,.3);color:var(--color-text-secondary);font-size:.6rem;padding:.35rem .5rem}.header-btn.logout:active{border-color:#ff6b6b;color:#ff6b6b;background:#ff6b6b26}.user-profile{display:flex;align-items:center;gap:.5rem}.profile-btn{display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem .3rem .3rem;background:#ffd7001a;border:2px solid rgba(255,215,0,.3);border-radius:20px;cursor:pointer;transition:all .2s ease;min-height:var(--touch-target-min)}.profile-btn:active{background:#ffd70033;border-color:var(--color-gold);transform:scale(.97)}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--color-gold) 0%,#b8860b 100%);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#0a0a12;flex-shrink:0}.profile-btn .username{color:var(--color-gold);font-weight:600;font-size:.7rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-container{text-align:center;padding:1.25rem;background:linear-gradient(180deg,#000c,#14141ee6);border-radius:16px;border:2px solid rgba(255,255,255,.1);box-shadow:0 15px 40px #00000080;width:calc(100% - 2rem);max-width:360px;margin:0 1rem}.home-container .logo{width:180px;margin:0 auto .75rem;display:block;filter:drop-shadow(0 3px 15px rgba(255,215,0,.3))}.home-container h1{font-size:2rem;margin:0 0 .3rem;color:var(--color-gold);text-shadow:0 0 8px rgba(255,215,0,.5),0 3px 15px rgba(0,0,0,.5);font-weight:900;letter-spacing:4px}.home-container p{color:var(--color-text-secondary);margin-bottom:1.25rem;font-size:.8rem;letter-spacing:1px;text-transform:uppercase}.menu{display:flex;flex-direction:column;gap:.75rem;width:100%}.menu-btn{padding:.875rem 1.25rem;font-size:.9rem;font-weight:700;color:var(--color-text);background:linear-gradient(180deg,#2a2a35,#1a1a25);border:2px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1.5px;min-height:var(--touch-target-comfortable);width:100%}.menu-btn:active{background:linear-gradient(180deg,#3a3a45,#2a2a35);border-color:var(--color-gold);transform:scale(.98)}.menu-btn.secondary{background:transparent;border-color:var(--color-move)}.menu-btn.secondary:active{border-color:var(--color-text)}.menu-btn.primary{background:linear-gradient(180deg,var(--color-gold) 0%,#b8960f 100%);color:var(--color-background);border-color:transparent}.menu-btn.primary:active{transform:scale(.98)}.menu-btn.disabled{background:linear-gradient(180deg,#3a3a45,#2a2a35);opacity:.6;position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem}.menu-btn.disabled:active{opacity:.8;border-color:var(--color-gold)}.menu-btn .login-hint{font-size:.55rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:.5px;opacity:.8}.menu p[data-testid=welcome]{color:var(--color-gold);font-weight:700;margin-bottom:.75rem;font-size:.85rem}.difficulty-title{color:var(--color-gold);font-size:1rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:1.5px}.menu-btn.difficulty-btn{position:relative;overflow:hidden}.menu-btn.difficulty-btn.easy{background:linear-gradient(180deg,#2d4a2d,#1a2d1a);border-color:#4caf50}.menu-btn.difficulty-btn.easy:active{border-color:#66bb6a}.menu-btn.difficulty-btn.medium{background:linear-gradient(180deg,#4a4a2d,#2d2d1a);border-color:#ffc107}.menu-btn.difficulty-btn.medium:active{border-color:#ffd54f}.menu-btn.difficulty-btn.hard{background:linear-gradient(180deg,#4a2d2d,#2d1a1a);border-color:#ff5722}.menu-btn.difficulty-btn.hard:active{border-color:#ff7043}.menu-btn.difficulty-btn.brutal{background:linear-gradient(180deg,#2d1a2d,#1a0a1a);border-color:#9c27b0}.menu-btn.difficulty-btn.brutal:active{border-color:#ba68c8}.menu-btn.difficulty-btn.brutal:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(156,39,176,.1),transparent);animation:brutal-shine 3s linear infinite}@keyframes brutal-shine{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}.auth-container{width:calc(100% - 2rem);max-width:360px;padding:1.5rem;margin:0 1rem;background:linear-gradient(180deg,#14141ef2,#0a0a0ffa);border-radius:14px;border:2px solid rgba(255,255,255,.1);box-shadow:0 15px 40px #00000080}.auth-container h1{text-align:center;margin-bottom:1.5rem;color:var(--color-gold);font-size:1.5rem;letter-spacing:2px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.4rem;color:var(--color-text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:1px}.form-group input{width:100%;padding:.75rem .875rem;font-size:1rem;color:var(--color-text);background-color:#0006;border:2px solid rgba(255,255,255,.1);border-radius:8px;transition:all .2s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 15px #ffd7001a}.submit-btn{width:100%;padding:.875rem;font-size:.9rem;font-weight:700;color:var(--color-background);background:linear-gradient(180deg,gold,#b8960f);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1.5px;margin-top:.5rem;min-height:var(--touch-target-comfortable)}.submit-btn:active:not(:disabled){transform:scale(.98)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.auth-link{text-align:center;margin-top:1rem;color:var(--color-text-secondary);font-size:.8rem}.auth-link a{color:var(--color-gold);text-decoration:none;font-weight:700}.auth-link a:active{text-decoration:underline}.error{color:#ff6b6b;background-color:#ff444426;padding:.75rem;border-radius:8px;margin-bottom:1rem;text-align:center;border:1px solid rgba(255,68,68,.3);font-size:.85rem}.btn-primary{padding:.875rem 1.75rem;font-size:.95rem;font-weight:700;color:var(--color-background);background:linear-gradient(180deg,var(--color-gold) 0%,#b8960f 100%);border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1.5px;min-height:var(--touch-target-comfortable)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:.875rem 1.75rem;font-size:.9rem;font-weight:700;color:var(--color-text);background:transparent;border:2px solid var(--color-move);border-radius:10px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px;min-height:var(--touch-target-comfortable)}.btn-secondary:active{border-color:var(--color-text);background:#ffffff0d}.back-btn-circular{width:var(--touch-target-min);height:var(--touch-target-min);border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.15);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.back-btn-circular:active{background:#ffd70033;border-color:var(--color-gold);color:var(--color-gold);transform:scale(.95)}.back-btn-circular svg{width:22px;height:22px}.page-container{width:100%;max-width:100%;min-height:100vh;min-height:100dvh;padding:1rem;padding-top:calc(1rem + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));display:flex;flex-direction:column;box-sizing:border-box}.page-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#00000080;border-radius:10px;margin-bottom:1rem;gap:.75rem}.page-title{font-size:1.1rem;color:var(--color-gold);margin:0;text-transform:uppercase;letter-spacing:2px}@media(min-width:600px){.home-page{padding-top:calc(65px + var(--safe-area-top))}.home-header{height:calc(65px + var(--safe-area-top));padding-left:1.25rem;padding-right:1.25rem}.header-right{gap:.75rem}.auth-buttons{gap:.5rem}.header-btn{padding:.5rem 1rem;font-size:.75rem;letter-spacing:1px}.header-btn.logout{padding:.45rem .8rem;font-size:.7rem}.profile-btn{padding:.35rem .9rem .35rem .35rem;gap:.5rem}.profile-avatar{width:32px;height:32px;font-size:.85rem}.profile-btn .username{font-size:.8rem;max-width:100px}.home-container{padding:1.75rem;max-width:400px;border-radius:18px}.home-container .logo{width:220px;margin-bottom:1rem}.home-container h1{font-size:2.5rem;letter-spacing:5px;margin-bottom:.4rem}.home-container p{font-size:.9rem;letter-spacing:1.5px;margin-bottom:1.5rem}.menu{gap:.875rem}.menu-btn{padding:1rem 1.5rem;font-size:1rem;letter-spacing:2px}.difficulty-title{font-size:1.1rem}.auth-container{padding:2rem;max-width:400px;border-radius:16px}.auth-container h1{font-size:1.75rem;margin-bottom:1.75rem;letter-spacing:2.5px}.form-group{margin-bottom:1.15rem}.form-group label{font-size:.8rem}.form-group input{padding:.85rem 1rem}.submit-btn{padding:1rem;font-size:1rem}.auth-link{font-size:.875rem;margin-top:1.15rem}.back-btn-circular{width:48px;height:48px}.back-btn-circular svg{width:26px;height:26px}.page-container{padding:1.5rem}.page-header{padding:1rem 1.5rem;margin-bottom:1.5rem}.page-title{font-size:1.35rem;letter-spacing:2.5px}}@media(min-width:900px){.home-page{padding-top:calc(70px + var(--safe-area-top))}.home-header{height:calc(70px + var(--safe-area-top));padding-left:1.5rem;padding-right:1.5rem}.header-btn{padding:.6rem 1.25rem;font-size:.85rem;border-radius:8px}.header-btn.login:hover{background:#ffd70026;transform:translateY(-2px);box-shadow:0 4px 15px #ffd70033}.header-btn.register:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ffd70066}.header-btn.logout{font-size:.75rem;padding:.5rem 1rem}.header-btn.logout:hover{border-color:#ff6b6b;color:#ff6b6b;background:#ff6b6b1a}.profile-btn{gap:.5rem;padding:.4rem 1rem .4rem .4rem;border-radius:25px}.profile-btn:hover{background:#ffd70033;border-color:var(--color-gold);transform:translateY(-2px)}.profile-avatar{width:32px;height:32px;font-size:.9rem}.profile-btn .username{font-size:.85rem;max-width:none}.home-container{padding:2rem;max-width:500px;min-width:400px;border-radius:20px;box-shadow:0 20px 60px #00000080}.home-container .logo{width:280px;margin-bottom:1rem;filter:drop-shadow(0 4px 20px rgba(255,215,0,.3))}.home-container h1{font-size:4rem;letter-spacing:8px;margin-bottom:.5rem;text-shadow:0 0 10px rgba(255,215,0,.5),0 4px 20px rgba(0,0,0,.5)}.home-container p{font-size:1.1rem;letter-spacing:2px;margin-bottom:2rem}.menu{gap:1rem;min-width:280px}.menu-btn{padding:1rem 2rem;font-size:1.1rem;letter-spacing:2px;border-radius:12px}.menu-btn:hover{background:linear-gradient(180deg,#3a3a45,#2a2a35);border-color:var(--color-gold);transform:translateY(-3px);box-shadow:0 10px 30px #ffd70033}.menu-btn.secondary:hover{border-color:var(--color-text)}.menu-btn.primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px #ffd70066}.menu-btn.disabled:hover{opacity:.8;border-color:var(--color-gold);cursor:pointer}.menu-btn .login-hint{font-size:.65rem;letter-spacing:1px}.difficulty-title{font-size:1.2rem;letter-spacing:2px}.menu-btn.difficulty-btn.easy:hover{border-color:#66bb6a;box-shadow:0 10px 30px #4caf504d}.menu-btn.difficulty-btn.medium:hover{border-color:#ffd54f;box-shadow:0 10px 30px #ffc1074d}.menu-btn.difficulty-btn.hard:hover{border-color:#ff7043;box-shadow:0 10px 30px #ff57224d}.menu-btn.difficulty-btn.brutal:hover{border-color:#ba68c8;box-shadow:0 10px 30px #9c27b04d}.auth-container{width:100%;max-width:420px;padding:2.5rem}.auth-container h1{font-size:2rem;margin-bottom:2rem;letter-spacing:3px}.form-group{margin-bottom:1.25rem}.form-group label{margin-bottom:.5rem;font-size:.875rem}.form-group input{padding:.875rem 1rem}.submit-btn{padding:1rem;font-size:1rem;letter-spacing:2px}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px #ffd7004d}.auth-link{margin-top:1.25rem;font-size:.9rem}.auth-link a:hover{text-decoration:underline}.btn-primary{padding:1rem 2.5rem;font-size:1.1rem;letter-spacing:2px}.btn-primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 30px #ffd70066}.btn-secondary{padding:1rem 2.5rem;font-size:1rem}.btn-secondary:hover{border-color:var(--color-text);background:#ffffff0d}.back-btn-circular:hover{background:#ffd70026;border-color:var(--color-gold);color:var(--color-gold);transform:scale(1.05);box-shadow:0 0 20px #ffd70033}.page-container{max-width:1400px;padding:2rem}.page-header{padding:1rem 2rem;border-radius:12px;margin-bottom:2rem}.page-title{font-size:1.75rem;letter-spacing:3px}}@media(orientation:landscape)and (max-height:500px){.home-page{padding-top:calc(45px + var(--safe-area-top));justify-content:flex-start;padding-bottom:calc(.5rem + var(--safe-area-bottom))}.home-header{height:calc(45px + var(--safe-area-top));padding-left:calc(.5rem + var(--safe-area-left));padding-right:calc(.5rem + var(--safe-area-right))}.header-btn{padding:.35rem .5rem;font-size:.6rem}.profile-avatar{width:24px;height:24px;font-size:.65rem}.profile-btn .username{font-size:.65rem}.home-container{padding:.75rem 1rem;max-width:450px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem}.home-container .logo{width:100px;margin:0}.home-container h1{font-size:1.5rem;letter-spacing:3px}.home-container p{font-size:.65rem;margin-bottom:.5rem}.menu{flex-direction:row;flex-wrap:wrap;gap:.5rem;justify-content:center}.menu-btn{padding:.5rem 1rem;font-size:.7rem;width:auto;flex:0 1 auto;min-height:36px}.auth-container{padding:1rem;flex-direction:row;flex-wrap:wrap;gap:.5rem;max-width:500px}.auth-container h1{width:100%;font-size:1.1rem;margin-bottom:.5rem}.form-group{flex:1;min-width:150px;margin-bottom:.5rem}.form-group label{font-size:.65rem;margin-bottom:.25rem}.form-group input{padding:.5rem .75rem;font-size:.9rem}.submit-btn{width:100%;padding:.6rem;font-size:.8rem;margin-top:.25rem;min-height:38px}.auth-link{width:100%;margin-top:.5rem;font-size:.7rem}}@media(prefers-reduced-motion:reduce){.header-btn,.menu-btn,.profile-btn,.back-btn-circular,.submit-btn,.btn-primary,.btn-secondary,.form-group input{transition:none}.menu-btn.difficulty-btn.brutal:before{animation:none}}