@import"https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;700&display=swap";.hud-overlay{position:absolute;inset:0;pointer-events:none;z-index:100}.hud-top-center{position:absolute;top:8px;left:50%;transform:translate(-50%)}.rank-display{background:#000000b3;border:3px solid #ffd700;border-radius:8px;padding:8px 16px;text-align:center}.rank-title{font-size:10px;color:#aaa;margin-bottom:2px}.rank-name{font-size:24px;font-weight:700;color:gold;text-shadow:2px 2px 0 #000}.rank-progress{font-size:10px;color:#ff9800;margin-top:4px}.hud-stats-row{position:absolute;top:80px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 12px}.hud-fighter-stats{background:#0009;border:2px solid #fff;border-radius:8px;padding:8px 12px;min-width:120px}.hud-vs{font-size:20px;font-weight:700;color:#fff;text-shadow:2px 2px 0 #000;padding:8px}.hp-container{margin-bottom:8px}.hp-label{font-size:12px;color:#fff;margin-bottom:4px}.hp-hearts{display:flex;gap:4px}.hp-heart{font-size:20px;text-shadow:1px 1px 0 #000}.hp-heart--full{color:#f44}.hp-heart--empty{color:#666}.gauge-container{display:flex;align-items:center;gap:6px}.gauge-label{font-size:10px;color:gold;width:24px}.gauge-track{flex:1;height:12px;background:#333;border:2px solid #666;border-radius:4px;overflow:hidden}.gauge-bar{height:100%;background:linear-gradient(to bottom,#4caf50,#2e7d32);transition:width .1s ease-out}.gauge-bar--high{background:linear-gradient(to bottom,#ff9800,#e65100)}.gauge-bar--full{background:linear-gradient(to bottom,#f44,#c62828);animation:gauge-pulse .3s ease-in-out infinite alternate}.gauge-bar--charging{box-shadow:0 0 8px #ffffff80}@keyframes gauge-pulse{0%{opacity:1}to{opacity:.7}}.gauge-percent{font-size:10px;color:#fff;width:28px;text-align:right}.special-announcement{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}.special-text{font-size:32px;font-weight:700;text-shadow:3px 3px 0 #000,-1px -1px 0 #000;animation:special-appear .3s ease-out}.special-text--player{color:#4fc3f7}.special-text--opponent{color:#ff7043}.special-text--clash{color:gold;font-size:40px;animation:clash-shake .5s ease-out}@keyframes special-appear{0%{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes clash-shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.ton-button-container{display:flex;justify-content:center;align-items:center;padding:20px}.ton-button{min-width:200px;min-height:100px;padding:20px 40px;background-color:var(--retro-accent, #8b4513);border:4px solid var(--retro-fg, #f4e4c1);border-radius:8px;box-shadow:0 4px 0 var(--retro-dark, #1a0f08);font-family:"M PLUS 1",sans-serif;font-size:32px;font-weight:700;color:var(--retro-fg, #f4e4c1);cursor:pointer;user-select:none;transition:transform .1s ease,box-shadow .1s ease}.ton-button:hover{background-color:sienna;transform:translateY(-2px);box-shadow:0 6px 0 var(--retro-dark, #1a0f08)}.ton-button:active,.ton-button--pressed{transform:translateY(4px) scale(.95);box-shadow:0 1px 0 var(--retro-dark, #1a0f08);background-color:#6b3503}.ton-button-text{display:block;text-shadow:2px 2px 0 rgba(0,0,0,.3)}@media (max-width: 768px){.ton-button{min-width:150px;min-height:80px;font-size:28px}}:root{--retro-bg: #3d2817;--retro-fg: #f4e4c1;--retro-accent: #8b4513;--retro-dark: #1a0f08;--hp-green: #00ff00;--hp-yellow: #ffff00;--hp-red: #ff0000;--gauge-blue: #00ffff;--tipping-safe: #4caf50;--tipping-warning: #ff9800;--tipping-danger: #f44336;--spacing-xs: clamp(2px, 1vmin, 4px);--spacing-sm: clamp(4px, 1.5vmin, 8px);--spacing-md: clamp(8px, 2.5vmin, 16px);--spacing-lg: clamp(12px, 3.5vmin, 24px);--spacing-xl: clamp(16px, 5vmin, 32px);--border-width: 4px;--font-xs: clamp(10px, 2.5vmin, 12px);--font-sm: clamp(12px, 3.5vmin, 16px);--font-md: clamp(16px, 5vmin, 24px);--font-lg: clamp(20px, 6vmin, 32px);--font-xl: clamp(28px, 8vmin, 48px)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{font-family:PixelMplus,"M PLUS 1",monospace,sans-serif;background-color:var(--retro-bg);color:var(--retro-fg);image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;scroll-behavior:auto}#root{width:100%;height:100%}.retro-button{font-family:PixelMplus,"M PLUS 1",monospace,sans-serif;background-color:var(--retro-accent);border:var(--border-width) solid var(--retro-dark);color:var(--retro-bg);font-size:var(--font-md);font-weight:700;padding:var(--spacing-md) var(--spacing-xl);cursor:pointer;border-radius:0;box-shadow:var(--border-width) var(--border-width) 0 var(--retro-dark);transition:none;user-select:none;-webkit-user-select:none}.retro-button:hover:not(:disabled){background-color:var(--retro-fg)}.retro-button:active:not(:disabled){background-color:var(--retro-dark);color:var(--retro-fg);box-shadow:none;transform:translate(var(--border-width),var(--border-width))}.retro-button:disabled{background-color:var(--retro-dark);color:var(--retro-bg);opacity:.5;cursor:not-allowed}.retro-panel{background-color:var(--retro-bg);border:var(--border-width) solid var(--retro-fg);box-shadow:var(--border-width) var(--border-width) 0 var(--retro-dark);padding:var(--spacing-md)}.retro-title{font-size:var(--font-xl);font-weight:700;color:var(--retro-fg);text-shadow:var(--border-width) var(--border-width) 0 var(--retro-dark);letter-spacing:2px}.retro-subtitle{font-size:var(--font-lg);font-weight:700;color:var(--retro-accent)}.retro-text{font-size:var(--font-sm);color:var(--retro-fg);line-height:1.5}.retro-bar-container{background-color:var(--retro-dark);border:var(--border-width) solid var(--retro-fg);height:32px;position:relative;overflow:hidden}.retro-bar-fill{position:absolute;top:0;left:0;height:100%;transition:width .2s linear}.retro-bar-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--font-sm);font-weight:700;color:var(--retro-bg);text-shadow:1px 1px 0 var(--retro-fg),-1px -1px 0 var(--retro-fg),1px -1px 0 var(--retro-fg),-1px 1px 0 var(--retro-fg);z-index:1}.full-screen{width:100%;height:100%;position:relative}.full-screen.scrollable{overflow-y:auto;padding:var(--spacing-xl) var(--spacing-md);box-sizing:border-box}.center-content{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--spacing-lg)}.hud-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.hud-overlay>*{pointer-events:auto}.controls-overlay{position:absolute;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);pointer-events:auto;z-index:20}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.retro-button:focus-visible{outline:var(--border-width) dashed var(--retro-fg);outline-offset:var(--spacing-xs)}@media (prefers-contrast: high){:root{--retro-fg: #ffffff;--retro-bg: #000000;--retro-accent: #00ff00;--retro-dark: #ffffff}}@keyframes fadeInOut{0%,to{opacity:.3}50%{opacity:1}}@keyframes pulseGlow{0%,to{box-shadow:0 0 5px #d4af3780}50%{box-shadow:0 0 20px #d4af37cc}}.camera-preset-btn:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--retro-dark),0 0 10px #d4af3766}.camera-preset-btn:active{transform:translateY(0);box-shadow:1px 1px 0 var(--retro-dark)}@media (max-width: 480px){:root{--border-width: 2px}.retro-panel{width:90vw;max-width:100%}.center-content{gap:var(--spacing-md)}}@media (min-width: 481px) and (max-width: 768px){:root{--border-width: 3px}.retro-panel{width:80vw;max-width:400px}}@media (min-width: 769px){.retro-panel{min-width:300px;max-width:500px}}@media (max-height: 500px){.full-screen.scrollable{padding:var(--spacing-md) var(--spacing-sm)}.center-content{gap:var(--spacing-sm)}}