.language-selector{position:fixed;bottom:32px;right:32px;z-index:9999;font-family:system-ui,sans-serif;transform:none;will-change:auto;contain:layout}.language-btn{width:56px;height:56px;border-radius:50%;background:#075066;border:2px solid #0b5569;box-shadow:0 3px #0b5569,0 6px #042b33;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .16s cubic-bezier(.4,0,.2,1),background .12s cubic-bezier(.4,0,.2,1);color:#dff9f7;font-size:0;position:relative}.language-btn:hover{transform:translateY(-2px);background:#064356;box-shadow:0 3px #0b5569,0 6px #042b33,0 6px 20px #15d8c826}.language-btn:focus{outline:2px solid #3ef5e6;outline-offset:2px}.language-btn:active{transform:translateY(0);box-shadow:0 2px #0b5569}.language-btn:before{content:"";width:24px;height:24px;background:currentColor;mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3e%3c/svg%3e") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3e%3c/svg%3e") center/contain no-repeat}.language-menu{position:absolute;bottom:100%;right:0;margin-bottom:8px;background:#075066;border:2px solid #0b5569;border-radius:12px;box-shadow:0 3px #0b5569,0 6px #042b33;min-width:140px;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.95);transition:opacity .16s cubic-bezier(.4,0,.2,1),visibility .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1);transform-origin:bottom right}.language-menu[aria-hidden=false]{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.language-option{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:none;background:none;color:#dff9f7;border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;line-height:1.4;transition:background .12s cubic-bezier(.4,0,.2,1)}.language-option:hover{background:#064356}.language-option:focus{outline:2px solid #3ef5e6;outline-offset:-2px}.language-option[aria-selected=true]{background:#15d8c81a;color:#3ef5e6}.language-code{font-size:12px;font-weight:600;text-transform:uppercase;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#064356;border-radius:50%;flex-shrink:0}.language-option[aria-selected=true] .language-code{background:#15d8c8;color:#032f3b}.language-name{flex:1;text-align:left}@media (prefers-reduced-motion: reduce){.language-btn,.language-menu,.language-option{transition:none}.language-btn:hover,.language-btn:active{transform:none}}:root{--c-bg: #032f3b;--c-bg-alt: #064356;--c-surface: #075066;--c-surface-elevated: #08607a;--c-border: #0b5569;--c-border-subtle: rgba(21, 216, 200, .12);--c-accent: #15d8c8;--c-accent-glow: #3ef5e6;--c-accent-dim: rgba(21, 216, 200, .15);--c-text: #dff9f7;--c-text-2: #ffffffb3;--c-text-dim: #a9d1cd;--c-success: #34c759;--c-warning: #ff9500;--c-danger: #ff3b30;--radius-cartoon: 18px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-pill: 999px;--shadow-cartoon: 0 3px 0 #0b5569, 0 6px 0 #042b33;--shadow-glow: 0 0 20px rgba(21, 216, 200, .15);--shadow-glow-strong: 0 0 40px rgba(21, 216, 200, .25);--shadow-elevated: 0 8px 32px rgba(0, 0, 0, .3);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-8: 48px;--container-max: 880px;--btn-pad-y: 10px;--btn-pad-x: 16px;--motion-fast: .12s;--motion-med: .16s;--motion-slow: .22s;--motion-enter: .3s;--motion-exit: .2s;--motion-stagger: 50ms;--motion-curve: cubic-bezier(.2,.8,.2,1);--motion-spring: cubic-bezier(.34,1.56,.64,1);--motion-smooth: cubic-bezier(.4,0,.2,1);--motion-decel: cubic-bezier(0,0,.2,1);--motion-accel: cubic-bezier(.4,0,1,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulseGlow{0%,to{box-shadow:0 0 #15d8c800}50%{box-shadow:0 0 0 6px #15d8c826}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes borderFlow{0%{border-color:var(--c-border)}50%{border-color:var(--c-accent)}to{border-color:var(--c-border)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes revealMask{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.stagger-item{opacity:0;animation:fadeInUp var(--motion-enter) var(--motion-decel) forwards}.stagger-item:nth-child(1){animation-delay:calc(var(--motion-stagger) * 0)}.stagger-item:nth-child(2){animation-delay:calc(var(--motion-stagger) * 1)}.stagger-item:nth-child(3){animation-delay:calc(var(--motion-stagger) * 2)}.stagger-item:nth-child(4){animation-delay:calc(var(--motion-stagger) * 3)}.stagger-item:nth-child(5){animation-delay:calc(var(--motion-stagger) * 4)}.stagger-item:nth-child(6){animation-delay:calc(var(--motion-stagger) * 5)}.stagger-item:nth-child(7){animation-delay:calc(var(--motion-stagger) * 6)}.stagger-item:nth-child(8){animation-delay:calc(var(--motion-stagger) * 7)}.stagger-item:nth-child(9){animation-delay:calc(var(--motion-stagger) * 8)}.stagger-item:nth-child(10){animation-delay:calc(var(--motion-stagger) * 9)}.stagger-item:nth-child(11){animation-delay:calc(var(--motion-stagger) * 10)}.stagger-item:nth-child(12){animation-delay:calc(var(--motion-stagger) * 11)}.stagger-item:nth-child(13){animation-delay:calc(var(--motion-stagger) * 12)}.stagger-item:nth-child(14){animation-delay:calc(var(--motion-stagger) * 13)}.stagger-item:nth-child(15){animation-delay:calc(var(--motion-stagger) * 14)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,Segoe UI,sans-serif;color:var(--c-text);background:var(--c-bg)}*{scrollbar-width:thin;scrollbar-color:#15d8c8 rgba(255,255,255,.05)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff0a}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#15d8c8,#0b5569);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3ef5e6,#0b5569)}.app{position:relative;min-height:100dvh;isolation:isolate}#bg-canvas{position:fixed;inset:0;z-index:-1;display:block}header.navbar{position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;border:0;pointer-events:none;display:grid;place-items:center;padding-top:var(--sp-3);transition:background-color var(--motion-fast) var(--motion-curve);height:80px}header.navbar--scrolled{background:#032f3bf2;backdrop-filter:blur(10px);border-bottom:1px solid var(--c-border)}.nav{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:clamp(8px,2.8vw,18px);padding:6px 10px;border-radius:999px}.nav a{color:var(--c-text);text-decoration:none;padding:8px 12px;border-radius:10px;position:relative;line-height:1;white-space:nowrap}.nav a:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--c-accent);border-radius:3px;box-shadow:2px 2px #042b33;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-med) var(--motion-curve)}.nav a:hover:after,.nav a.is-active:after{transform:scaleX(1)}@media (prefers-reduced-motion: reduce){.nav a:after{transition:none}}.nav a:focus-visible{outline:2px solid var(--c-accent-glow);outline-offset:2px}a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--c-accent-glow);outline-offset:2px}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;z-index:1000;background:var(--c-accent);color:#00333a;padding:8px 12px;border:2px solid var(--c-border);border-radius:var(--radius-cartoon);box-shadow:var(--shadow-cartoon)}.main-layout{margin:0 auto;padding:80px clamp(1rem,4vw,2rem) var(--sp-6);min-height:100dvh}.main-layout:has(.game-layout-wrapper){padding-top:72px;padding-bottom:0;display:flex;flex-direction:column}} .card{background:var(--c-surface);border:2px solid var(--c-border);border-radius:var(--radius-cartoon);padding:var(--sp-5);box-shadow:0 2px 4px #0000004d,0 6px #042b33;transition:transform var(--motion-fast) var(--motion-curve),box-shadow var(--motion-med) var(--motion-curve)}@media (prefers-reduced-motion: reduce){.card,.btn{transition:none}}.card:hover{transform:translateY(-2px);box-shadow:0 6px 10px #00000059,0 10px #042b33}.card.no-hover:hover{transform:none!important;box-shadow:0 2px 4px #0000004d,0 6px #042b33!important}.btn{display:inline-block;padding:var(--btn-pad-y) var(--btn-pad-x);font-weight:600;border-radius:var(--radius-cartoon);border:2px solid var(--c-border);background:var(--c-accent);color:#00333a;box-shadow:var(--shadow-cartoon);transform:translateY(0);transition:transform var(--motion-fast) var(--motion-curve),box-shadow var(--motion-med) var(--motion-curve);will-change:transform;cursor:pointer;text-decoration:none}.btn:hover{transform:translateY(-2px);box-shadow:0 6px #0b5569,0 10px #042b33}.btn:active{transform:translateY(0);box-shadow:0 3px #0b5569}.btn:focus-visible{outline:2px solid var(--c-accent-glow);outline-offset:2px}.btn[disabled],.btn.is-disabled,button:disabled{cursor:not-allowed;opacity:.6;filter:grayscale(.1)}.btn--primary{background:var(--c-accent);color:#00333a}.btn--secondary{background:var(--c-bg-alt);color:var(--c-text);box-shadow:0 3px #0b5569}.btn--secondary:hover{box-shadow:0 6px #0b5569,0 10px #042b33}.btn--ghost{background:transparent;color:var(--c-text);box-shadow:none}.btn--danger{background:var(--c-danger);color:#fff}.btn--danger:hover{background:#ff6b6b;box-shadow:0 6px #a00,0 10px #600}.form-input{width:100%;padding:12px 16px;background:var(--c-bg-alt);border:2px solid var(--c-border);border-radius:var(--radius-cartoon);color:var(--c-text);font-family:inherit;font-size:1rem}.form-input::placeholder{color:var(--c-text-dim)}.form-input:focus{outline:2px solid var(--c-accent-glow);outline-offset:2px}h1{font-size:clamp(1.6rem,2.5vw,2rem);margin:0 0 var(--sp-4)}h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:var(--sp-5) 0 var(--sp-3)}h3{font-size:1.2rem;margin:var(--sp-4) 0 var(--sp-2)}p{color:var(--c-text-dim);line-height:1.6}.dim{color:var(--c-text-dim)}.text-center{text-align:center}.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
