/* Shared responsive layer. Existing typing and duel layouts keep their identity. */
html{scroll-padding-top:20px}body{min-width:0}body>header{position:relative;gap:20px}body>header>.brand{white-space:nowrap;flex-shrink:0}body>header>nav{min-width:0}body>header>nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}main>*{min-width:0}input,select,textarea{max-width:100%}img{max-width:100%;height:auto}button,.btn,summary{touch-action:manipulation}button,.btn{min-height:44px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #f2a1ba;outline-offset:4px}.spj-menu-toggle{display:none}.spj-menu-icon{width:19px;display:grid;gap:4px}.spj-menu-icon i{display:block;height:2px;width:19px;border-radius:2px;background:currentColor}.spj-menu-open .spj-menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}.spj-menu-open .spj-menu-icon i:nth-child(2){opacity:0}.spj-menu-open .spj-menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
footer.spj-footer{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;padding:35px 24px 24px;align-items:start;font-size:14px}.spj-footer p{max-width:320px;font-size:14px;margin:12px 0 0}.spj-footer strong{display:block;color:#f3f5fb;font-size:14px;margin-bottom:9px}.spj-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.spj-footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:7px 0;color:#b9c6dc;line-height:1.4}.spj-footer-links a:hover{color:#f3a7bc;text-decoration:underline}.spj-footer-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #2b374c;color:#aebbd1;font-size:14px}.spj-footer>.spj-feedback-link{grid-column:1/-1;margin:0;padding:10px 0;justify-self:start;min-height:44px;font-size:14px}.spj-footer-languages{display:flex;gap:16px}.spj-footer-languages a{min-height:44px;display:inline-flex;align-items:center}.spj-footer-languages [aria-current=page]{color:#f0a0b9}
.info-page{max-width:1100px}.info-heading{max-width:780px;margin:15px 0 38px}.info-heading h1{font-size:clamp(32px,5vw,52px);line-height:1.12;margin:15px 0 20px}.info-heading p{font-size:18px;line-height:1.75}.info-label{display:inline-block;border:1px solid #755066;border-radius:30px;padding:6px 12px;color:#edabc1;font-size:13px;letter-spacing:.6px}.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.info-card{padding:25px;border:1px solid #39465f;background:#151f32;border-radius:16px}.info-card h2{font-size:22px}.info-card p{font-size:16px;margin:0}.info-card a,.info-copy a,.contact-card a,.faq-list a{color:#f0a0b9;text-decoration:underline;text-underline-offset:3px}.info-copy{max-width:790px;font-size:16px;line-height:1.85}.info-copy h2{margin:32px 0 12px;font-size:25px;scroll-margin-top:25px}.info-copy h3{margin:24px 0 12px;font-size:20px}.info-copy p,.info-copy li{color:#b9c6dc}.info-copy li{margin:8px 0}.info-copy ul{padding-left:24px}.info-copy code{font-size:14px;overflow-wrap:anywhere}.info-summary{border-left:3px solid #d66d90;padding:18px 22px;background:#1b2438;border-radius:0 12px 12px 0;margin:24px 0;color:#d9e3f5}.info-summary p:last-child{margin-bottom:0}.info-toc{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.info-toc a{font-size:14px;line-height:1.5;padding:10px 14px;background:#202c42;border:1px solid #41506a;border-radius:9px}.info-cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.info-date{font-size:14px!important;color:#a6b5cd}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}.contact-card{padding:28px;background:#151f32;border:1px solid #3c4962;border-radius:18px;min-width:0}.contact-card h2{font-size:23px}.contact-card label{display:block;font-size:15px;color:#e6eaf4;margin:0 0 7px}.contact-card input,.contact-card select,.contact-card textarea{display:block;width:100%;margin:0 0 20px;padding:13px;border:1px solid #4b5973;border-radius:10px;background:#0d1525;color:#f3f5fb;font:16px/1.5 system-ui,sans-serif;box-sizing:border-box}.contact-card textarea{min-height:160px}.contact-card :focus-visible{outline:2px solid #f0a0b9;outline-offset:3px}.contact-card p,.contact-card li{font-size:16px}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-note{font-size:14px!important;line-height:1.7}.contact-status{margin:16px 0 0;font-size:15px;color:#f6adc4;overflow-wrap:anywhere}.contact-status:empty{display:none}.contact-status[data-ok=true]{color:#b6d9f6}.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.faq-list{max-width:850px}.faq-list details{border:1px solid #3b4963;border-radius:13px;background:#151f32;margin:12px 0;padding:0 20px}.faq-list summary{padding:19px 0;cursor:pointer;font-size:17px;font-weight:650;line-height:1.45;color:#f3f5fb}.faq-list details p{font-size:16px;line-height:1.8;margin:0 0 22px}.faq-list details[open]{border-color:#9a536f}
@media(max-width:1100px){body>header{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px}body>header>.brand{font-size:23px}body>header[data-mobile-ready]>nav{display:grid;grid-template-columns:1fr 1fr;width:100%;flex-basis:100%;max-height:65dvh;overflow:auto;gap:6px;margin-top:5px;padding:14px 0 2px;border-top:1px solid #39455d}body>header[data-mobile-ready]>nav[hidden]{display:none!important}body>header[data-mobile-ready]>nav a{justify-content:flex-start;padding:12px 14px;background:#172238;border:1px solid #2d3d57;border-radius:10px;font-size:15px;min-height:48px;line-height:1.4}body>header[data-mobile-ready]>nav a[aria-current]{border-color:#af647e;background:#492c41;color:#fff}.spj-menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 13px;background:#1a263b;border-color:#46536d;font-size:15px}.spj-footer{max-width:100%}}
@media(max-width:760px){main,.duel-main,.race-main{padding:24px 16px 40px}.hero{gap:22px}.hero>*,.cards>*,.learn-grid>*,.mode-picker>*,.lobby-layout>*,.race-lobby>*,.profile-grid>*,.account-layout>*{min-width:0}.intro h1,.account-intro h1{font-size:34px;overflow-wrap:anywhere}.section-head{gap:10px}.tiny,.notice,.card p,.metric span,.rank-explanation p,.connection,.race-connection,.motion-button,.back-link,.battle-log,.race-log{font-size:14px}.panel,.card,.lobby-panel,.race-entry{padding:20px}.metrics:not(.compact-metrics){grid-template-columns:repeat(2,minmax(0,1fr))}.compact-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric strong{font-size:24px}.metric span{line-height:1.4;display:block;margin-top:5px}.input-row #input{font-size:22px;min-height:54px}.keyboard{max-width:100%;overflow:hidden}.keyrow{gap:2px}.key{min-width:0;font-size:12px}.mini-keys{gap:5px}.mini-keys span{padding:7px 0;flex:1;text-align:center;font-size:15px}.demo-text{font-size:21px}.demo-top{font-size:14px;gap:12px;flex-wrap:wrap}.toolbar{gap:12px}.toolbar select,input.field,.duel-field,select{font-size:16px}.toolbar label{font-size:15px}.actions .btn{min-height:48px}.strip{padding:20px}.table-scroll,.history,.word-review{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-scroll:focus-visible,.history:focus-visible,.word-review:focus-visible{outline:2px solid #f0a0b9;outline-offset:3px}.user-badge{font-size:12px}.tabs button,.ranking-toolbar .tabs button{font-size:14px;min-height:44px}.duel-heading h1,.race-heading h1{font-size:36px}.race-heading{display:block}.race-heading-side{margin-top:16px;align-items:flex-start;flex-direction:row;flex-wrap:wrap}.room-actions,.race-room-actions{display:flex;flex-wrap:wrap;width:100%;gap:8px}.room-actions button,.race-room-actions button{flex:1;min-height:44px;font-size:14px;padding:10px}.room-bar,.race-room-bar{align-items:flex-start;gap:14px}.room-bar>div,.race-room-bar>div{min-width:0;max-width:100%}.match-controls,.race-controls{flex-wrap:wrap;gap:12px;align-items:flex-start}.match-controls button,.race-controls button{white-space:normal;min-height:48px;font-size:14px}.match-controls>span,.race-controls>span{font-size:14px;line-height:1.6}.target-word,.race-word{overflow-wrap:anywhere;font-size:32px}.next-words,.race-next{overflow-wrap:anywhere}.combat-meta,.typing-footer{font-size:14px;line-height:1.5;flex-wrap:wrap}.rule-grid p,.race-rule-grid p{font-size:15px}.result-stats,.race-result-stats{grid-template-columns:1fr}.result-stats p,.race-result-stats p{overflow-wrap:anywhere}.info-heading{margin:10px 0 28px}.info-heading p{font-size:17px}.info-grid,.contact-layout{grid-template-columns:1fr}.info-card,.contact-card{padding:22px}.info-copy{font-size:16px}.info-copy h2{font-size:24px}.info-toc{gap:8px}.info-toc a{font-size:14px}.contact-row{grid-template-columns:1fr;gap:0}footer.spj-footer{grid-template-columns:1fr 1fr;padding:28px 20px;gap:22px}footer.spj-footer>div:first-child{grid-column:1/-1}.spj-footer-bottom{align-items:flex-start;flex-direction:column}.spj-footer-links a{font-size:14px}}
@media(max-width:420px){body>header{padding:14px 16px}body>header>.brand{font-size:21px}.brand-icon{width:32px;height:32px}.hero h1{font-size:34px}.hero .actions{flex-direction:column}.hero .actions .btn{width:100%}.panel,.card{padding:17px}.demo-text{font-size:19px}.clock{width:59px;font-size:20px}.input-row #restart{width:44px;flex-shrink:0}.compact-metrics .metric strong{font-size:22px}.compact-metrics .metric span{font-size:13px}.join-row,.join-race-row{flex-wrap:wrap}.join-row input,.join-race-row input{width:100%;flex-basis:100%}.join-row button,.join-race-row button{width:100%;margin:0;min-height:46px}.rule-grid,.race-rule-grid{gap:16px}.scoreboards{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:8px;padding:14px 10px}.player-title strong{font-size:13px}.hp-meta{font-size:12px;line-height:1.35}.match-clock strong{font-size:21px}.match-clock span{font-size:12px;line-height:1.2;display:block}.battle-stage{height:330px}.fighter{width:112px}.race-hud{grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr);gap:6px}.pilot-card{min-width:0;padding:9px}.pilot-name{font-size:13px}.distance strong{font-size:22px}.energy-label{font-size:11px;flex-wrap:wrap}.race-timer>span{font-size:11px}.race-timer>strong{font-size:22px}.pilot-card .distance span{font-size:12px}.stage-caption{font-size:12px;padding:0 12px;line-height:1.4}.info-cta{flex-direction:column}.info-cta .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.spj-menu-icon i{transition:none}html{scroll-behavior:auto}}