:root { color-scheme: light; --paper:#fff; --ink:#111214; --muted:#70747a; --line:#d2d3d5; --red:#c9001b; --red-dark:#8f0013; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:#f4f4f3; font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.site { min-height:100vh; background:#f7f7f6; }
.site[hidden],.game-shell[hidden] { display:none; }
.site-header { display:grid; grid-template-columns:1fr auto auto; min-height:76px; align-items:center; gap:28px; border-bottom:1px solid var(--line); padding:0 max(24px,calc((100vw - 1180px)/2)); background:#fff; }
.site-brand,.game-brand { position:relative; display:inline-flex; width:max-content; align-items:center; border:0; padding:0; color:inherit; background:transparent; text-align:left; }
.brand-logo { display:block; width:230px; height:52px; object-fit:cover; transition:transform 220ms cubic-bezier(.2,.8,.2,1),filter 220ms ease; transform-origin:left center; }
.site-brand::after,.game-brand::after { position:absolute; right:0; bottom:5px; left:0; height:2px; background:var(--red); content:""; transform:scaleX(0); transform-origin:left; transition:transform 220ms ease; }
.site-brand:hover .brand-logo,.game-brand:hover .brand-logo { filter:drop-shadow(0 5px 8px rgba(201,0,27,.2)); transform:translateY(-2px) scale(1.025); }
.site-brand:hover::after,.game-brand:hover::after { transform:scaleX(1); }
.site-nav { display:flex; align-self:stretch; }
.site-tab { border:0; border-left:1px solid #eee; padding:0 20px; color:#676a70; background:#fff; font-size:.78rem; font-weight:900; }
.site-tab.is-active { color:var(--red); box-shadow:inset 0 -4px var(--red); }
.launch-button { min-height:42px; border:0; padding:0 20px; color:#fff; background:var(--ink); font-size:.78rem; font-weight:950; }
.site-main { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:42px 0 70px; }
.site-ad { width:min(860px,calc(100% - 48px)); margin:0 auto 54px; border-top:1px solid var(--line); padding-top:9px; }
.site-ad[hidden] { display:none; }
.site-ad>span { display:block; margin-bottom:5px; color:#94979b; font-size:.58rem; font-weight:850; letter-spacing:.08em; text-align:center; }
.site-ad .adsbygoogle { display:block; min-height:90px; overflow:hidden; }
.ad-preview { display:none; }
.site-ad.is-preview .adsbygoogle { display:none; }
.site-ad.is-preview .ad-preview { display:grid; min-height:112px; place-content:center; border:1px dashed #b8babd; background:#fafafa; text-align:center; }
.site-ad.is-preview .ad-preview b,.site-ad.is-preview .ad-preview small { display:block; }
.site-ad.is-preview .ad-preview b { color:#71757b; font-size:.74rem; letter-spacing:.12em; }
.site-ad.is-preview .ad-preview small { margin-top:5px; color:#a0a3a7; font-size:.58rem; font-weight:800; }
.site-view { display:none; }
.site-view.is-active { display:block; }
.site-hero { position:relative; display:grid; min-height:480px; align-items:center; overflow:hidden; border:1px solid var(--line); padding:54px 6vw; background:linear-gradient(108deg,#fff 0 62%,#f0f0ef 62%); }
.site-hero::after { position:absolute; right:25%; top:-80px; width:34px; height:700px; background:var(--red); content:""; transform:rotate(17deg); }
.site-kicker { margin:0 0 12px; color:var(--red); font-size:.75rem; font-weight:950; }
.idle-logo { position:relative; overflow:hidden; }
.idle-logo::after { position:absolute; z-index:3; top:20%; bottom:20%; left:-24%; width:16%; background:linear-gradient(90deg,transparent,rgba(201,0,27,.78),rgba(255,255,255,.92),transparent); content:""; opacity:0; transform:skewX(-18deg); animation:logoIdleSweep 4.2s ease-in-out infinite; pointer-events:none; }
.idle-logo::before { position:absolute; z-index:3; inset:16% 2%; border-top:1px solid transparent; border-bottom:1px solid transparent; content:""; animation:logoIdleFrame 4.2s ease-in-out infinite; pointer-events:none; }
.idle-logo-hero { position:relative; z-index:1; width:min(72vw,880px); }
.brand-logo-hero { display:block; width:100%; aspect-ratio:5/1; object-fit:cover; transition:transform 260ms cubic-bezier(.2,.8,.2,1),filter 260ms ease; transform-origin:left center; }
.brand-logo-hero:hover { filter:drop-shadow(0 12px 14px rgba(201,0,27,.2)); transform:translateY(-5px) scale(1.02); }
.site-lead { position:relative; z-index:1; margin:18px 0 28px; color:#55595f; font-size:1rem; font-weight:700; }
.site-pitch { position:relative; z-index:1; display:grid; gap:6px; margin-top:24px; }
.site-pitch strong { font-size:clamp(1.15rem,2vw,1.55rem); }
.site-pitch p { margin:0; color:var(--muted); font-size:.88rem; font-weight:700; }
.hero-start { position:relative; z-index:1; display:grid; width:min(280px,100%); border:0; border-left:6px solid var(--red); padding:13px 18px; color:#fff; background:var(--ink); text-align:left; }
.site-hero .hero-start { margin-top:clamp(54px,8vh,86px); }
.hero-start span { color:#bfc2c6; font-size:.68rem; font-weight:850; }
.hero-start b { margin-top:2px; font-size:1rem; }
.content-view { min-height:560px; }
.content-heading { display:flex; align-items:flex-end; justify-content:space-between; border-bottom:5px solid var(--ink); padding-bottom:18px; }
.content-heading p { margin:0; color:var(--red); font-size:.75rem; font-weight:950; }
.content-heading h2 { font-size:clamp(3rem,7vw,6rem); }
.news-list { background:#fff; }
.news-list article { display:grid; grid-template-columns:110px 90px 1fr; gap:18px; align-items:center; border-bottom:1px solid var(--line); padding:24px; }
.news-list time { color:var(--muted); font-size:.85rem; }
.news-list article>span { color:var(--red); font-size:.7rem; font-weight:950; }
.news-list h3 { margin:0; font-size:1rem; }
.news-list p { grid-column:3; margin:0; color:var(--muted); font-size:.85rem; }
.site-ranking-head,.site-rank-list li { display:grid; grid-template-columns:100px 1fr 140px; align-items:center; }
.site-ranking-head { padding:14px 20px; color:#fff; background:var(--ink); font-size:.7rem; font-weight:900; }
.site-rank-list { margin:0; padding:0; list-style:none; }
.site-rank-list li { border-bottom:1px solid var(--line); padding:18px 20px; background:#fff; }
.site-rank-list b { color:var(--red); }
.site-rank-list strong:last-child { text-align:right; }
.mypage-login { display:grid; min-height:420px; grid-template-columns:1fr minmax(300px,420px); gap:70px; align-items:center; padding:54px max(32px,7vw); background:#fff; }
.mypage-login[hidden],.profile-panel[hidden] { display:none; }
.login-copy span { color:var(--red); font-size:.72rem; font-weight:950; }
.login-copy h3 { margin:8px 0 14px; font-size:clamp(2.2rem,5vw,4.5rem); line-height:.95; }
.login-copy p { margin:0; color:var(--muted); font-size:.88rem; }
.profile-panel { display:grid; grid-template-columns:1fr 1.5fr; gap:28px; align-items:center; padding:34px; background:#fff; }
.profile-id { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.profile-id small,.profile-id strong { display:block; margin:0; }
.profile-id strong { font-size:1.6rem; }
.profile-edit { min-height:34px; border:1px solid var(--line); padding:0 11px; color:var(--ink); background:#fff; font-size:.66rem; font-weight:950; }
.profile-edit:hover,.profile-edit:focus-visible { border-color:var(--red); color:var(--red); outline:0; }
.profile-stats { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); }
.profile-stats div { border-right:1px solid var(--line); padding:18px; }
.profile-stats div:last-child { border-right:0; }
.profile-stats span { display:block; color:var(--muted); font-size:.7rem; font-weight:900; }
.profile-stats b { display:block; margin-top:7px; font-size:1.7rem; }
.profile-detail-stats { grid-column:1/-1; display:grid; grid-template-columns:repeat(5,1fr); border-top:4px solid var(--ink); background:#f5f5f4; }
.profile-detail-stats div { padding:18px 22px; border-right:1px solid var(--line); }
.profile-detail-stats div:last-child { border-right:0; }
.profile-detail-stats span { color:var(--muted); font-size:.7rem; font-weight:900; }
.profile-detail-stats b { display:block; margin-top:5px; font-size:1.35rem; }
.profile-panel .hero-start { grid-column:1/-1; }
.profile-panel[data-rank="D"] { border-top:5px solid #666b72; }
.profile-panel[data-rank="C"] { border-top:5px solid #a45d28; }
.profile-panel[data-rank="B"] { border-top:5px solid #087e9d; }
.profile-panel[data-rank="A"] { border-top:5px solid #087653; }
.profile-panel[data-rank="AA"] { border-top:5px solid #613e9d; }
.profile-panel[data-rank="S"] { border-top:5px solid #b67700; }
.profile-panel[data-rank="SS"] { border-top:5px solid #f062bd; background:linear-gradient(110deg,#fff8f9,#fffdf0,#f5fff8,#f5fbff,#fcf7ff); }
.profile-panel[data-rank="UNRANKED"] { border-top:5px solid var(--ink); }
.name-dialog { width:min(360px,calc(100% - 30px)); border:0; padding:0; background:transparent; }
.name-dialog::backdrop { background:rgba(17,18,20,.58); }
.name-form { display:grid; gap:13px; border-top:5px solid var(--red); padding:24px; background:#fff; }
.name-form p { margin:0; color:var(--muted); font-size:.7rem; font-weight:950; }
.name-form input { min-height:46px; border:1px solid var(--line); padding:0 12px; font:inherit; font-weight:850; }
.name-form>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.name-form span { min-height:1.4em; color:var(--red); font-size:.72rem; }
.game-shell { position:fixed; z-index:50; inset:16px; width:auto; height:auto; min-height:620px; overflow:hidden; border:1px solid #8f9194; background:var(--paper); box-shadow:0 30px 80px rgba(0,0,0,.2),0 3px 10px rgba(0,0,0,.16); }
.game-shell::before { position:absolute; z-index:20; inset:0; border:7px solid var(--ink); content:""; pointer-events:none; }
.game-bar { position:absolute; z-index:10; top:7px; right:7px; left:7px; display:flex; height:64px; align-items:center; justify-content:space-between; border-bottom:1px solid #bbbcc0; padding:0 22px; background:#fff; }
.game-shell.is-intro .game-bar { display:none; }
.game-shell.is-intro .intro-view { inset:7px; }
.game-brand strong { font-size:.85rem; }
.exit-button { border:1px solid var(--line); padding:9px 14px; color:var(--ink); background:#fff; font-size:.7rem; font-weight:950; }
.exit-button:disabled,.game-brand:disabled { opacity:.35; cursor:not-allowed; }
.brand { display:inline-flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-logo-game { width:190px; height:46px; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:1rem; font-weight:950; }
.brand small { margin-top:1px; color:var(--muted); font-size:.68rem; text-transform:uppercase; }
.nav-tabs,.ranking-tabs { display:flex; gap:0; }
.tab,.rank-tab { min-height:34px; border:0; border-left:1px solid var(--line); padding:0 16px; color:#6b6e73; background:transparent; font-size:.72rem; font-weight:900; }
.tab.is-active,.rank-tab.is-active { color:#fff; background:var(--ink); }
.view { display:none; position:absolute; inset:72px 7px 7px; overflow:auto; background:var(--paper); }
.view.is-active { display:block; }
.intro-view { background:#fff; }
.intro-view.is-active { display:grid; place-items:center; }
.intro-logo { width:min(82vw,920px); text-align:center; animation:introIn 700ms ease both; }
.brand-logo-intro { display:block; width:100%; height:auto; }
.intro-logo i { display:block; width:180px; height:5px; margin:-8% auto 0; background:var(--red); animation:introLine 1400ms ease both; }
@keyframes introIn { from { opacity:0; transform:scale(.94); } }
@keyframes introLine { from { width:0; } }
@keyframes logoIdleSweep { 0%,68% { left:-24%; opacity:0; } 72% { opacity:.9; } 86% { left:108%; opacity:.9; } 90%,100% { left:108%; opacity:0; } }
@keyframes logoIdleFrame { 0%,68%,92%,100% { border-color:transparent; opacity:0; } 74%,86% { border-color:rgba(201,0,27,.4); opacity:1; } }
.title-screen { position:relative; display:grid; height:100%; min-height:520px; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); align-items:center; overflow:hidden; background:linear-gradient(107deg,transparent 0 59%,rgba(17,18,20,.08) 59% 59.3%,transparent 59.3%),linear-gradient(107deg,transparent 0 72%,var(--red) 72% 75%,transparent 75%),#fafafa; }
.title-screen::after { position:absolute; right:-140px; bottom:-260px; width:560px; height:560px; border:64px solid rgba(17,18,20,.06); border-radius:50%; content:""; pointer-events:none; }
.title-copy { padding:44px 30px 44px 6vw; }
.idle-logo-title { width:min(100%,650px); margin-top:8px; }
.brand-logo-title { display:block; width:100%; height:auto; transition:transform 260ms cubic-bezier(.2,.8,.2,1),filter 260ms ease; transform-origin:left center; }
.brand-logo-title:hover { filter:drop-shadow(0 10px 12px rgba(201,0,27,.22)); transform:translateY(-5px) scale(1.025); }
.mode-board { position:relative; z-index:2; display:grid; gap:8px; padding:44px 5vw 44px 10px; }
.eyebrow,label span,.score-card span,.stat-grid span,.meter-row span { color:var(--red); font-size:.72rem; font-weight:950; text-transform:uppercase; }
.eyebrow { margin:0 0 10px; }
h1,h2,p { margin-top:0; }
h1,h2 { margin-bottom:0; line-height:.92; }
h1 { font-size:clamp(4.6rem,10vw,8.8rem); font-weight:950; text-transform:uppercase; }
h2 { font-size:clamp(2rem,4.3vw,4.2rem); font-weight:950; }
.lead { margin:20px 0 0; color:#4a4d52; font-size:.92rem; font-weight:900; }
.mode-card { position:relative; display:grid; gap:3px; min-height:106px; overflow:hidden; border:1px solid #c4c5c7; border-left:6px solid var(--ink); padding:16px 20px; color:var(--ink); background:rgba(255,255,255,.96); text-align:left; transition:transform 120ms ease,border-color 120ms ease,background 120ms ease; }
.mode-card::after { position:absolute; right:18px; top:50%; content:">"; transform:translateY(-50%); font-size:1.5rem; font-weight:300; }
.mode-card:hover,.mode-card:focus-visible { z-index:2; border-color:var(--red); color:#fff; background:var(--ink); transform:translateX(-8px); outline:none; }
.mode-card.is-primary { border-left-color:var(--red); }
.mode-card span,.mode-card small { color:var(--muted); font-size:.67rem; font-weight:850; }
.mode-card:hover span,.mode-card:hover small,.mode-card:focus-visible span,.mode-card:focus-visible small { color:#cacdd2; }
.mode-card strong { font-size:1.65rem; font-weight:950; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.playfield { position:relative; display:grid; min-height:100%; place-items:center; overflow:hidden; background:#fafafa; }
.playfield::before { position:absolute; inset:0; background:linear-gradient(108deg,transparent 0 68%,rgba(17,18,20,.045) 68% 68.3%,transparent 68.3%),linear-gradient(108deg,transparent 0 78%,rgba(201,0,27,.95) 78% 80%,transparent 80%); content:""; pointer-events:none; }
.play-hud { position:absolute; z-index:2; top:28px; right:34px; left:34px; display:flex; align-items:center; justify-content:space-between; color:#777b81; font-size:.72rem; font-weight:900; }
.play-hud strong { color:var(--ink); font-size:.88rem; }
.play-progress { position:absolute; z-index:2; top:58px; right:34px; left:34px; height:3px; overflow:hidden; background:#dededf; }
.play-progress i { display:block; width:0; height:100%; background:var(--red); transition:width 240ms ease; }
.ready-panel { position:relative; z-index:3; display:grid; justify-items:center; gap:18px; }
.ready-panel[hidden] { display:none; }
.ready-panel span { color:#777b81; font-size:.75rem; font-weight:900; }
.ready-button { min-width:240px; min-height:78px; border:1px solid var(--ink); border-left:7px solid var(--red); color:#fff; background:var(--ink); font-size:2rem; font-weight:950; transition:transform 140ms ease,background 140ms ease; }
.ready-button:hover,.ready-button:focus-visible { background:#24262a; transform:translateY(-3px); outline:0; }
.ready-button:disabled { color:#a8abb0; transform:none; cursor:default; }
.question-stage { position:relative; z-index:2; width:min(940px,calc(100% - 64px)); padding:80px 30px; text-align:center; }
.question-stage[hidden] { display:none; }
.question-stage .ja-phrase { min-height:1.2em; margin:0 0 17px; font-size:clamp(2.5rem,6.5vw,6.5rem); font-weight:950; line-height:1.12; }
.question-stage .kana-phrase { min-height:1.4em; margin:0 0 34px; color:#5e6268; font-size:clamp(1rem,1.7vw,1.35rem); font-weight:700; }
.question-stage .romaji-track { min-height:1.7em; border:0; padding:0; background:transparent; font-size:clamp(1.25rem,2.7vw,2.2rem); font-weight:700; }
.question-stage.is-entering { animation:questionIn 320ms cubic-bezier(.2,.8,.2,1) both; }
.question-stage.is-cleared { animation:questionOut 180ms ease both; }
.playfield.is-miss { animation:playMiss 110ms linear 3; box-shadow:inset 0 0 0 7px rgba(201,0,27,.9); }
.typing-capture { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.restart-hint { position:absolute; z-index:2; right:34px; bottom:25px; margin:0; color:#919499; font-size:.68rem; font-weight:900; }
.countdown { position:absolute; z-index:8; inset:0; display:grid; place-items:center; color:#fff; background:rgba(250,250,250,.36); backdrop-filter:blur(2px); }
.countdown[hidden] { display:none; }
.countdown-band { display:grid; width:100%; min-height:190px; place-items:center; border-top:5px solid var(--red); border-bottom:5px solid var(--red); background:rgba(17,18,20,.94); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.countdown strong { font-size:clamp(5rem,14vw,10rem); line-height:1; }
.countdown strong.is-pulsing { animation:countPulse 650ms cubic-bezier(.2,.8,.2,1) both; }
.countdown.is-finish { background:rgba(255,255,255,.58); backdrop-filter:blur(5px); }
.countdown.is-finish .countdown-band { border-color:var(--ink); color:var(--ink); background:#fff; animation:finishBandIn 620ms cubic-bezier(.16,1,.3,1) both; }
.countdown.is-finish strong { font-size:clamp(4rem,12vw,8.5rem); animation:finishWordIn 620ms 90ms cubic-bezier(.16,1,.3,1) both; }
@keyframes countPulse { from { opacity:0; transform:scale(1.35); } 35% { opacity:1; } to { opacity:.2; transform:scale(.72); } }
@keyframes questionIn { from { opacity:0; transform:translateY(28px) scale(.985); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes questionOut { to { opacity:0; transform:translateY(-22px) scale(1.015); filter:blur(4px); } }
@keyframes playMiss { 25% { transform:translateX(-8px); background:#ffecef; } 75% { transform:translateX(8px); background:#ffecef; } }
.auth-box { border:1px solid var(--line); background:#f4f4f3; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.auth-tabs button { min-height:45px; border:0; color:var(--muted); background:#fff; font-size:.75rem; font-weight:950; }
.auth-tabs button.is-active { color:#fff; background:var(--ink); }
.login-panel { display:grid; gap:12px; border-top:5px solid var(--ink); padding:22px 26px 18px; background:#f4f4f3; }
.login-panel label { display:grid; gap:6px; color:var(--muted); font-size:.7rem; font-weight:900; }
.login-panel label[hidden] { display:none; }
.login-panel input { min-height:48px; border:1px solid var(--line); padding:0 14px; background:#fff; }
.login-panel .primary-btn { min-height:48px; margin-top:4px; }
.auth-message { min-height:1.4em; margin:0; color:var(--red); font-size:.72rem; }
.auth-message.is-success { color:#087653; }
.logout-btn { justify-self:start; }
.match-layout { display:grid; min-height:100%; grid-template-columns:minmax(0,1fr) 286px; background:#f3f3f2; }
.match-stage { padding:26px 30px; background:#fafafa; }
.stage-top,.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.round-pill { min-width:95px; border:1px solid var(--line); padding:8px 12px; text-align:center; background:#fff; }
.round-pill span { display:block; color:var(--muted); font-size:.63rem; font-weight:900; }
.round-pill strong { display:block; color:var(--red); font-size:1.9rem; line-height:1; }
.target-lane { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:20px 0 18px; }
.target-lane span { height:5px; background:var(--line); }
.target-lane span:first-child { background:var(--red); }
.question-card { border:1px solid #c6c7c9; border-top:5px solid var(--ink); padding:24px 28px; background:#fff; }
.question-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; font-weight:900; text-transform:uppercase; }
.ja-phrase { min-height:1.3em; margin:24px 0 8px; font-size:clamp(2rem,4vw,3.6rem); font-weight:950; line-height:1.15; text-align:center; }
.kana-phrase { min-height:1.4em; margin-bottom:16px; color:var(--red-dark); font-size:1rem; font-weight:850; text-align:center; }
.romaji-track { min-height:52px; border-top:1px solid var(--line); padding:13px 8px 0; overflow-wrap:anywhere; font-family:"SFMono-Regular",Consolas,monospace; font-size:clamp(1rem,1.8vw,1.25rem); line-height:1.5; text-align:center; }
.romaji-track .done { color:var(--red); }
.romaji-track .next { color:#fff; background:var(--ink); }
.romaji-track .rest { color:#a1a4a8; }
.input-wrap { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:10px; margin-top:15px; border:1px solid var(--line); padding:9px 11px; background:#fff; }
.input-wrap input,.player-input,.signup-card input { width:100%; min-height:40px; border:1px solid #cccdd0; color:var(--ink); background:#fafafa; padding:0 12px; outline:none; }
.input-wrap input:focus,.player-input:focus,.signup-card input:focus { border-color:var(--red); box-shadow:0 0 0 2px rgba(201,0,27,.1); }
.input-wrap.is-error { border-color:var(--red); animation:shake 90ms linear 2; }
@keyframes shake { 50% { transform:translateX(5px); } }
.input-help { margin:7px 0 0; color:var(--muted); font-size:.78rem; text-align:center; }
.controls { display:grid; grid-template-columns:auto auto auto minmax(130px,1fr); gap:7px; margin-top:13px; }
.primary-btn,.ghost-btn { min-height:41px; border:1px solid transparent; padding:0 17px; font-weight:950; text-transform:uppercase; }
.primary-btn { color:#fff; background:var(--red); }
.primary-btn:hover { background:var(--red-dark); }
.ghost-btn { border-color:#c7c8ca; color:var(--ink); background:#fff; }
.score-panel { display:grid; align-content:start; gap:10px; border-left:1px solid #c2c3c5; padding:20px; background:#e7e7e5; }
.score-card,.stat-grid div,.match-log { border:1px solid var(--line); background:#fff; }
.score-card { border-top:5px solid var(--red); padding:16px; }
.score-card strong { display:block; margin-top:3px; font-size:4rem; line-height:.95; }
.score-card small,.match-log { color:var(--muted); }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.stat-grid div { padding:9px; }
.stat-grid b { display:block; margin-top:2px; font-size:1.1rem; }
.meter-list { display:grid; gap:8px; padding:10px 0; }
.meter-row { display:grid; grid-template-columns:63px minmax(0,1fr) 40px; align-items:center; gap:7px; }
.meter { height:7px; overflow:hidden; background:#cacbcd; }
.meter i { display:block; width:0; height:100%; background:var(--red); transition:width 120ms ease; }
.meter-row b { font-size:.82rem; text-align:right; }
.match-log { min-height:52px; margin:0; padding:10px; font-size:.78rem; line-height:1.5; }
.ranking-board,.locked-panel { min-height:100%; padding:32px 38px; background:#f7f7f6; }
.ranking-tabs { border:1px solid var(--line); background:#fff; }
.rank-list { display:grid; gap:5px; margin:22px 0 0; padding:0; list-style:none; }
.rank-item { display:grid; grid-template-columns:48px minmax(0,1fr) repeat(4,minmax(62px,88px)); gap:10px; align-items:center; border:1px solid var(--line); padding:10px 13px; background:#fff; }
.rank-item .place { color:var(--red); font-weight:950; }
.rank-item .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:950; }
.rank-item span:not(.place):not(.name) { color:var(--muted); font-size:.8rem; text-align:right; }
.locked-panel { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:center; }
.locked-panel p { max-width:560px; color:var(--muted); line-height:1.7; }
.signup-card { display:grid; gap:13px; border:1px solid var(--line); border-top:5px solid var(--ink); padding:18px; background:#fff; }
.signup-card label { display:grid; gap:7px; }
.signup-card p { margin:0; color:var(--muted); font-size:.8rem; }
.online-app { position:relative; height:100%; min-height:100%; background:#f5f5f4; }
.online-panel { position:relative; min-height:100%; padding:30px 38px; }
.online-panel[hidden] { display:none; }
.online-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; border-bottom:5px solid var(--ink); padding-bottom:16px; }
.online-heading h2 { font-size:clamp(3.4rem,7vw,6.2rem); }
.network-status { display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--muted); font-size:.68rem; font-weight:950; }
.network-status i { width:8px; height:8px; background:#15945f; box-shadow:0 0 0 4px rgba(21,148,95,.12); }
.online-auth { display:grid; min-height:350px; grid-template-columns:1fr auto; align-items:center; gap:40px; background:#fff; padding:42px; }
.online-auth[hidden],.online-lobby-body[hidden] { display:none; }
.online-auth span { color:var(--red); font-size:.7rem; font-weight:950; }
.online-auth h3 { margin:8px 0 12px; font-size:clamp(2rem,5vw,4.2rem); }
.online-auth p { margin:0; color:var(--muted); }
.online-lobby-body { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(420px,1.3fr); gap:20px; padding-top:22px; }
.online-player-card { display:grid; grid-template-columns:1fr 1fr; align-content:start; border-top:6px solid var(--red); padding:26px; color:#fff; background:var(--ink); }
.online-player-card div { padding:12px 0; }
.online-player-card span { display:block; color:#aeb1b5; font-size:.66rem; font-weight:900; }
.online-player-card strong { display:block; margin-top:4px; font-size:1.45rem; }
.online-player-card>b { grid-column:1/-1; align-self:end; margin-top:45px; color:var(--red); font-size:5.5rem; line-height:.85; }
.online-player-card>b[hidden] { display:none; }
.online-player-card .online-stats { grid-column:1/-1; border-top:1px solid #3d4044; padding-top:16px; }
.online-player-card .online-stats strong { font-size:.78rem; }
.online-player-card[data-rank="C"] { border-top-color:#a45d28; }.online-player-card[data-rank="B"] { border-top-color:#087e9d; }.online-player-card[data-rank="A"] { border-top-color:#087653; }.online-player-card[data-rank="AA"] { border-top-color:#8a64cd; }.online-player-card[data-rank="S"] { border-top-color:#e0a500; }.online-player-card[data-rank="SS"] { border-top-color:#f062bd; background:linear-gradient(125deg,#251519,#211d14,#16251c,#17242a,#211a29); }
.online-player-card[data-rank="C"]>b { color:#dfa36e; }.online-player-card[data-rank="B"]>b { color:#5bc6df; }.online-player-card[data-rank="A"]>b { color:#58c99b; }.online-player-card[data-rank="AA"]>b { color:#b899ed; }.online-player-card[data-rank="S"]>b { color:#ffd658; }.online-player-card[data-rank="SS"]>b { color:#fff; }
.online-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.online-action { display:grid; align-content:center; gap:4px; min-height:150px; border:1px solid var(--line); border-left:6px solid var(--ink); padding:20px; color:var(--ink); background:#fff; text-align:left; transition:transform 140ms ease,border-color 140ms ease; }
.online-action:hover,.online-action:focus-visible { border-color:var(--red); transform:translateY(-4px); outline:0; }
.online-action.is-primary { border-left-color:var(--red); }
.online-action span,.online-action small { color:var(--muted); font-size:.67rem; font-weight:900; }
.online-action strong { font-size:1.35rem; }
.online-join { grid-column:1/-1; display:grid; gap:8px; border:1px solid var(--line); padding:17px 20px; background:#fff; }
.online-join label { color:var(--muted); font-size:.68rem; font-weight:950; }
.online-join>div { display:grid; grid-template-columns:1fr auto; gap:8px; }
.online-join input { min-width:0; min-height:43px; border:1px solid var(--line); padding:0 13px; font-size:1rem; font-weight:900; letter-spacing:0; }
.online-matching { display:grid; place-content:center; justify-items:center; text-align:center; }
.online-matching h2 { font-size:clamp(2.3rem,5vw,4.1rem); }
.online-matching>p:last-of-type { color:var(--muted); }
.online-matching.is-waiting .matching-versus { display:none !important; }
.online-ready-panel { position:absolute; z-index:5; inset:0; overflow:hidden; background:#fafafa; }
.online-ready-panel::before { position:absolute; z-index:0; inset:50% 0 auto; height:190px; border-top:5px solid var(--red); border-bottom:5px solid var(--red); background:rgba(17,18,20,.97); content:""; transform:translateY(-50%); }
.online-ready-panel>* { position:relative; z-index:1; }
.online-ready-panel>span { position:absolute; top:calc(50% - 78px); right:0; left:0; text-align:center; }
.online-ready-panel>.ready-button { position:absolute; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); }
.online-ready-panel>.ready-button:hover,.online-ready-panel>.ready-button:focus-visible { transform:translate(-50%,calc(-50% - 3px)); }
.online-ready-panel>p { position:absolute; top:calc(50% + 48px); right:0; left:0; margin:0; text-align:center; }
.online-ready-panel span { color:#b9bdc2; }
.online-ready-panel p { margin:14px 0 0; color:#b9bdc2; font-size:.7rem; font-weight:950; }
.online-ready-panel .ready-status { display:flex; justify-content:center; gap:8px; }.ready-status b { min-width:112px; padding:5px 8px; border:1px solid rgba(255,255,255,.26); color:#9fa3a8; font-size:.62rem; font-weight:950; }.ready-status b.is-ready { border-color:var(--red); color:#fff; background:var(--red); box-shadow:0 0 18px rgba(201,0,27,.45); animation:readyStatusOn 320ms cubic-bezier(.16,1,.3,1) both; }
@keyframes readyStatusOn { from { opacity:0; transform:scale(.78); } to { opacity:1; transform:none; } }
.online-ready-panel .ready-button:disabled { color:#94979b; border-color:#cfd1d2; background:#e5e6e6; cursor:not-allowed; transform:translate(-50%,-50%); }
.online-battle.is-ready-entering .online-ready-panel::before { animation:readyBandIn 700ms cubic-bezier(.16,1,.3,1) both; }
.online-battle.is-ready-entering .online-ready-panel>* { animation:readyContentIn 500ms 260ms cubic-bezier(.16,1,.3,1) both; }
.online-battle.is-ready-view > :not(.online-ready-panel) { visibility:hidden; }
.online-battle.is-standby-view > :not(.online-countdown) { visibility:hidden; }
@keyframes readyBandIn { from { transform:translate(-100%, -50%) skewX(-18deg); } to { transform:translateY(-50%); } }
@keyframes readyContentIn { from { opacity:0; } to { opacity:1; } }
.matching-pulse { display:flex; gap:9px; margin:30px 0; }
.matching-pulse i { width:13px; height:13px; background:var(--ink); animation:matchingPulse 900ms ease-in-out infinite; }
.matching-pulse i:nth-child(2) { animation-delay:150ms; }
.matching-pulse i:nth-child(3) { animation-delay:300ms; }
.room-code { margin:0 0 14px; border-bottom:4px solid var(--red); font-size:2.8rem; letter-spacing:0; }
.matching-versus { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr); gap:0; width:min(100%,760px); align-items:stretch; margin:18px 0; overflow:hidden; padding:18px 0; }
.matching-versus::before { position:absolute; z-index:0; inset:50% 0 auto; height:3px; background:var(--red); content:""; transform:scaleX(0); transform-origin:center; }.matching-versus.is-revealing::before { animation:matchLine 720ms 130ms cubic-bezier(.16,1,.3,1) both; }
.match-player { position:relative; z-index:1; display:grid; min-width:0; height:185px; box-sizing:border-box; gap:5px; align-content:center; border-top:5px solid var(--ink); padding:20px 18px; color:#fff; text-align:center; background:var(--ink); box-shadow:0 15px 28px rgba(17,18,20,.2); }.match-player.is-you { border-color:var(--red); }.match-player.is-rival { text-align:center; }
.match-player>span,.match-rating>span { color:#b9bdc2; font-size:.64rem; font-weight:950; }.match-player>strong { min-width:0; overflow:hidden; font-size:clamp(1.1rem,1.85vw,1.8rem); line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }.match-player p { margin:3px 0 0; color:#e4e6e8; font-size:.7rem; font-weight:850; }
.match-rating { display:grid; grid-template-columns:1fr auto; align-items:end; width:min(100%,230px); margin:0 auto; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); text-align:left; }.match-rating>span { grid-column:1/-1; padding:5px 8px 0; }.match-rating>b { padding:3px 8px 7px; color:#fff; font-size:1.45rem; line-height:1; }.match-rating>strong { display:grid; min-width:48px; min-height:42px; place-items:center; padding:0 8px; color:#fff; background:#666b72; font-size:1.3rem; line-height:1; }
.match-player[data-rank="D"] .match-rating>strong { background:#666b72; }.match-player[data-rank="C"] .match-rating>strong { background:#a45d28; }.match-player[data-rank="B"] .match-rating>strong { background:#087e9d; }.match-player[data-rank="A"] .match-rating>strong { background:#087653; }.match-player[data-rank="AA"] .match-rating>strong { background:#8a64cd; }.match-player[data-rank="S"] .match-rating>strong { background:#e0a500; }.match-player[data-rank="SS"] .match-rating>strong { color:var(--ink); background:linear-gradient(135deg,#ff506c,#ffd84a,#55db87,#47bbed,#9a77ee,#f062bd); }
.match-player[data-rank="D"] { border-color:#666b72; background:#36393d; }.match-player[data-rank="C"] { border-color:#a45d28; background:#56341e; }.match-player[data-rank="B"] { border-color:#087e9d; background:#124655; }.match-player[data-rank="A"] { border-color:#087653; background:#17483b; }.match-player[data-rank="AA"] { border-color:#8a64cd; background:#40315e; }.match-player[data-rank="S"] { border-color:#e0a500; background:#5b4813; }.match-player[data-rank="SS"] { border-color:#fff; background:linear-gradient(125deg,#7d2335,#77601d,#1d6747,#225d72,#513b7a,#7d234f); }
.match-versus-mark { position:relative; z-index:2; align-self:center; display:grid; width:82px; height:82px; place-items:center; color:#fff; background:var(--red); font-size:1.35rem; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:0 0 0 8px #f5f5f4; }
.matching-versus.is-revealing .match-player.is-you { animation:matchSlideLeft 580ms cubic-bezier(.16,1,.3,1) both; }.matching-versus.is-revealing .match-player.is-rival { animation:matchSlideRight 580ms cubic-bezier(.16,1,.3,1) both; }.matching-versus.is-revealing .match-versus-mark { animation:matchVs 560ms 220ms cubic-bezier(.2,1.4,.3,1) both; }
@keyframes matchSlideLeft { from { opacity:0; transform:translateX(-110px) skewX(-8deg); } to { opacity:1; transform:none; } } @keyframes matchSlideRight { from { opacity:0; transform:translateX(110px) skewX(8deg); } to { opacity:1; transform:none; } } @keyframes matchVs { from { opacity:0; transform:scale(.15) rotate(-40deg); } to { opacity:1; transform:none; } } @keyframes matchLine { to { transform:scaleX(1); } }
@keyframes matchingPulse { 0%,100% { opacity:.18; transform:scale(.72); } 50% { opacity:1; transform:scale(1); } }
.online-battle { position:absolute; inset:0; display:grid; min-height:0; box-sizing:border-box; grid-template-rows:auto auto auto minmax(0,1fr); align-content:start; gap:12px; overflow:hidden; background:#fafafa; }
.online-battle::before { position:absolute; inset:0; background:linear-gradient(108deg,transparent 0 68%,rgba(17,18,20,.045) 68% 68.3%,transparent 68.3%),linear-gradient(108deg,transparent 0 78%,rgba(201,0,27,.95) 78% 80%,transparent 80%); content:""; pointer-events:none; }
.online-battle>* { position:relative; z-index:1; }
.online-battle>.online-ready-panel { position:absolute; z-index:5; }
.battle-status { display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid var(--ink); padding-bottom:9px; color:var(--muted); font-size:.7rem; font-weight:950; }
.battle-status strong { color:var(--ink); font-size:.9rem; }
.battle-racers { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.racer { display:grid; grid-template-columns:minmax(125px,auto) 1fr 48px; align-items:center; gap:14px; border:1px solid var(--line); border-left:5px solid var(--ink); padding:10px 14px; background:#fff; }
.racer.is-player { border-left-color:var(--red); }
.racer[data-rank="D"] { border-left-color:#666b72; background:#f4f5f6; }.racer[data-rank="C"] { border-left-color:#a45d28; background:#fff6ee; }.racer[data-rank="B"] { border-left-color:#087e9d; background:#eefaff; }.racer[data-rank="A"] { border-left-color:#087653; background:#effbf6; }.racer[data-rank="AA"] { border-left-color:#8a64cd; background:#f7f2ff; }.racer[data-rank="S"] { border-left-color:#e0a500; background:#fff9df; }.racer[data-rank="SS"] { border-left-color:#f062bd; background:linear-gradient(110deg,#fff7f8,#fffbed,#f3fff7,#f4fbff,#fcf6ff); }
.racer[data-rank="D"] { --racer-rank:#666b72; --racer-surface:#e8ebed; }.racer[data-rank="C"] { --racer-rank:#a45d28; --racer-surface:#ffe8d4; }.racer[data-rank="B"] { --racer-rank:#087e9d; --racer-surface:#d9f4fb; }.racer[data-rank="A"] { --racer-rank:#087653; --racer-surface:#daf4e8; }.racer[data-rank="AA"] { --racer-rank:#8a64cd; --racer-surface:#eadfff; }.racer[data-rank="S"] { --racer-rank:#e0a500; --racer-surface:#fff0ad; }.racer[data-rank="SS"] { --racer-rank:#f062bd; --racer-surface:#fbe4f6; }
.racer[data-rank]:not([data-rank="UNRANKED"]) { border-top:2px solid var(--racer-rank); background:linear-gradient(90deg,var(--racer-surface),#fff 72%); }.racer[data-rank]:not([data-rank="UNRANKED"]) .racer-progress i { background:var(--racer-rank); }
.racer>div:first-child { position:relative; padding-right:40px; }
.racer span,.racer small { display:block; color:var(--muted); font-size:.61rem; font-weight:900; }
.racer strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.battle-rank { position:absolute; top:1px; right:0; min-width:30px; padding:2px 4px; color:#fff; background:#666b72; font-size:.62rem; font-style:normal; font-weight:950; line-height:1.1; text-align:center; }
.racer[data-rank="D"] .battle-rank { background:#666b72; }.racer[data-rank="C"] .battle-rank { background:#a45d28; }.racer[data-rank="B"] .battle-rank { background:#087e9d; }.racer[data-rank="A"] .battle-rank { background:#087653; }.racer[data-rank="AA"] .battle-rank { background:#8a64cd; }.racer[data-rank="S"] .battle-rank { background:#e0a500; }.racer[data-rank="SS"] .battle-rank { color:var(--ink); background:linear-gradient(135deg,#ff506c,#ffd84a,#55db87,#47bbed,#9a77ee,#f062bd); }
.racer>b { text-align:right; }
.racer-progress { height:7px; overflow:hidden; background:#dddede; }
.racer-progress i { display:block; width:0; height:100%; background:var(--ink); transition:width 120ms linear; }
.racer.is-player .racer-progress i { background:var(--red); }
.rival-position { align-self:end; justify-self:center; width:min(680px,calc(100% - 64px)); box-sizing:border-box; border:1px solid var(--line); padding:10px 16px 12px; background:#f0f0ef; }
.rival-position header { display:flex; justify-content:space-between; color:var(--muted); font-size:.62rem; font-weight:950; }
.rival-position p { margin:5px 0; overflow:hidden; color:#4d5055; font-size:.85rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.rival-romaji { min-height:1.3em; overflow:hidden; font-family:"SFMono-Regular",Consolas,monospace; color:#9a9da2; font-size:.76rem; white-space:nowrap; }
.rival-romaji .done { color:var(--red); }
.online-question-stage { align-self:center; justify-self:center; width:min(1200px,calc(100% - 64px)); padding:52px 30px; }
.online-question-stage .ja-phrase { margin:0 0 17px; font-size:clamp(2rem,3.8vw,4rem); white-space:nowrap; }
.online-question-stage .kana-phrase { margin:0 0 34px; }
.online-question-stage .romaji-track { border:0; padding:0; font-size:clamp(1.25rem,2.7vw,2.2rem); }
.online-question-stage.is-miss { animation:onlineMiss 100ms linear 3; }
.online-countdown { position:absolute; z-index:6; inset:0; color:#fff; background:rgba(250,250,250,.36); backdrop-filter:blur(2px); }
.online-countdown[hidden] { display:none; }
.online-countdown-band { position:absolute; top:50%; right:0; left:0; display:grid; min-height:190px; place-items:center; border-top:5px solid var(--red); border-bottom:5px solid var(--red); background:rgba(17,18,20,.94); box-shadow:0 20px 50px rgba(0,0,0,.2); transform:translateY(-50%); }
.online-countdown strong { font-size:clamp(4rem,12vw,8rem); line-height:1; }
.online-countdown.is-standby strong { font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:0; }
.online-countdown strong.is-pulsing { animation:countPulse 560ms cubic-bezier(.2,.8,.2,1) both; }
.online-countdown.is-finish .online-countdown-band { border-color:var(--ink); color:var(--ink); background:#fff; animation:onlineFinishBandIn 620ms cubic-bezier(.16,1,.3,1) both; }
@keyframes onlineMiss { 25% { transform:translateX(-7px); color:var(--red); } 75% { transform:translateX(7px); color:var(--red); } }
.online-result { display:grid; align-content:center; width:min(860px,100%); margin:0 auto; }
.online-result>h2 { font-size:clamp(4rem,10vw,8rem); }
.online-result.is-revealing>.eyebrow,.online-result.is-revealing>h2 { animation:onlineResultTitleIn 430ms cubic-bezier(.16,1,.3,1) both; }
.online-result.is-revealing .versus-result { animation:onlineResultPanelIn 460ms 150ms cubic-bezier(.16,1,.3,1) both; }
.online-result.is-revealing .rating-change { animation:onlineResultPanelIn 430ms 300ms cubic-bezier(.16,1,.3,1) both; }
.online-result.is-revealing .online-result-stats { animation:onlineResultPanelIn 430ms 440ms cubic-bezier(.16,1,.3,1) both; }
.online-result.is-revealing .rating-note,.online-result.is-revealing .result-actions { animation:onlineResultPanelIn 360ms 560ms cubic-bezier(.16,1,.3,1) both; }
@keyframes onlineResultTitleIn { from { opacity:0; transform:translateY(-20px) scale(1.04); } to { opacity:1; transform:none; } }
@keyframes onlineResultPanelIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes onlineFinishBandIn { from { opacity:0; } to { opacity:1; } }
.versus-result { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin:20px 0 14px; border-top:5px solid var(--ink); border-bottom:1px solid var(--line); background:#fff; }
.versus-result>div { padding:18px 22px; }
.versus-result>div:last-child { text-align:right; }
.versus-result span { display:block; color:var(--muted); font-size:.68rem; font-weight:900; }
.versus-result strong { display:block; font-size:2.3rem; }
.versus-result>b { color:var(--red); }
.rating-change { display:grid; grid-template-columns:150px 1fr; align-items:center; border:1px solid var(--line); padding:15px 20px; background:#fff; }
.rating-change>span { color:var(--muted); font-size:.68rem; font-weight:950; }
.rating-change>div { display:flex; align-items:baseline; justify-content:flex-end; gap:13px; }
.rating-change b { color:var(--muted); font-size:1.25rem; }
.rating-change strong { font-size:2.2rem; }
.rating-change em { display:grid; min-width:48px; min-height:34px; place-items:center; padding:0 7px; color:#fff; background:#666b72; font-size:1.1rem; font-style:normal; font-weight:950; }
.rating-change small { min-width:58px; color:#087653; font-weight:950; text-align:right; }
.rating-change small.is-down { color:var(--red); }
.rating-change[data-rank="C"] { border-left:5px solid #a45d28; }.rating-change[data-rank="B"] { border-left:5px solid #087e9d; }.rating-change[data-rank="A"] { border-left:5px solid #087653; }.rating-change[data-rank="AA"] { border-left:5px solid #613e9d; }.rating-change[data-rank="S"] { border-left:5px solid #b67700; }.rating-change[data-rank="SS"] { border-left:5px solid #f062bd; background:linear-gradient(110deg,#fff7f8,#fffbed,#f3fff7,#f4fbff,#fcf6ff); }
.rating-change[data-rank="D"] em { background:#666b72; }.rating-change[data-rank="C"] em { background:#a45d28; }.rating-change[data-rank="B"] em { background:#087e9d; }.rating-change[data-rank="A"] em { background:#087653; }.rating-change[data-rank="AA"] em { background:#8a64cd; }.rating-change[data-rank="S"] em { background:#e0a500; }.rating-change[data-rank="SS"] em { color:var(--ink); background:linear-gradient(135deg,#ff506c,#ffd84a,#55db87,#47bbed,#9a77ee,#f062bd); }
.online-result-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:10px 0; border:1px solid var(--line); background:#fff; }
.online-result-stats div { padding:12px 15px; border-right:1px solid var(--line); }
.online-result-stats div:last-child { border-right:0; }
.online-result-stats span { display:block; color:var(--muted); font-size:.63rem; font-weight:900; }
.online-result-stats b { display:block; margin-top:3px; }
.online-result-notice { margin:0 0 12px; color:var(--red); font-size:.72rem; font-weight:950; text-align:center; }
.report-player { justify-self:center; margin-top:12px; border:0; padding:4px 0; color:var(--muted); background:transparent; font-size:.64rem; font-weight:950; text-decoration:underline; text-underline-offset:3px; }
.report-player:hover,.report-player:focus-visible { color:var(--red); outline:0; }
.report-dialog { width:min(390px,calc(100% - 28px)); border:0; padding:0; color:var(--ink); background:transparent; }.report-dialog::backdrop { background:rgba(17,18,20,.58); }
.report-form { display:grid; gap:18px; border-top:6px solid var(--red); padding:26px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.3); }.report-form>p { margin:0; color:var(--red); font-size:.68rem; font-weight:950; }.report-form>strong { font-size:1.1rem; line-height:1.5; }.report-form label { display:grid; gap:7px; color:var(--muted); font-size:.68rem; font-weight:950; }.report-form select { min-height:43px; border:1px solid var(--line); padding:0 10px; color:var(--ink); background:#fff; font:inherit; font-size:.9rem; }.report-form>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rating-note { margin:0 0 16px; color:var(--muted); font-size:.72rem; }
.result-dialog { width:min(410px,calc(100% - 28px)); border:0; padding:0; color:var(--ink); background:transparent; }
.result-dialog::backdrop { background:rgba(17,18,20,.58); }
.result-card { --rank:#666b72; --rank-bg:#f3f4f5; border:1px solid #999; border-top:7px solid var(--rank); padding:28px; background:var(--rank-bg); box-shadow:0 24px 70px rgba(0,0,0,.3); transition:background 180ms ease,border-color 180ms ease; }
.result-dialog[data-rank="C"] .result-card { --rank:#a45d28; --rank-bg:#fff6ee; }
.result-dialog[data-rank="B"] .result-card { --rank:#087e9d; --rank-bg:#eefaff; }
.result-dialog[data-rank="A"] .result-card { --rank:#087653; --rank-bg:#effbf6; }
.result-dialog[data-rank="AA"] .result-card { --rank:#613e9d; --rank-bg:#f7f2ff; }
.result-dialog[data-rank="S"] .result-card { --rank:#b67700; --rank-bg:#fff9df; }
.result-dialog[data-rank="SS"] .result-card { --rank:#111214; --rank-bg:linear-gradient(125deg,#fff1f4 0%,#fff9dc 21%,#edfff3 42%,#eaf8ff 63%,#f2efff 82%,#fff0fa 100%); }
.result-card h2 { margin:0; font-size:4.7rem; line-height:1; }
.result-score-label,.result-stats-label { display:block; margin:14px 0 4px; color:var(--rank); font-size:.65rem; font-weight:950; letter-spacing:0; }
.result-stats-label { margin:0 0 6px; }
.result-rating { display:grid; grid-template-columns:96px 1fr; align-items:stretch; margin:18px 0 15px; border:1px solid var(--rank); background:rgba(255,255,255,.78); }
.result-rating>strong { display:grid; min-height:82px; place-items:center; color:#fff; background:var(--rank); font-size:2.75rem; line-height:1; }
.result-dialog[data-rank="SS"] .result-rating>strong { color:var(--ink); background:linear-gradient(135deg,#ff506c,#ffd84a,#55db87,#47bbed,#9a77ee,#f062bd); }
.result-rating>div { display:grid; align-content:center; padding:12px 16px; }
.result-rating span { grid-column:1/-1; color:var(--red); font-size:.68rem; font-weight:950; }
.result-rating b { font-size:2rem; line-height:1; }
.result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:15px 0; }
.result-stats div { border:1px solid var(--line); padding:9px; background:#f7f7f6; }
.result-stats span { display:block; color:var(--red); font-size:.65rem; font-weight:950; }
.result-stats b { display:block; margin-top:3px; }
.result-save { min-height:1.5em; margin:0 0 16px; color:var(--muted); font-size:.82rem; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.result-dialog[open] .result-card { animation:resultCardIn 320ms cubic-bezier(.2,.8,.2,1) both; }
.result-dialog[open] .result-score-label,.result-dialog[open] .result-card h2 { animation:resultScoreIn 420ms 120ms cubic-bezier(.16,1,.3,1) both; }
.result-dialog[open] .result-rating { position:relative; overflow:hidden; animation:resultRankIn 430ms 310ms cubic-bezier(.16,1,.3,1) both; }
.result-dialog[open] .result-rating::after { position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%); content:""; transform:translateX(-130%); animation:resultSweep 620ms 660ms ease-out both; pointer-events:none; }
.result-dialog[open] .result-stats-label,.result-dialog[open] .result-stats { animation:resultStatsIn 360ms 570ms ease-out both; }
.result-dialog[open] .result-save,.result-dialog[open] .result-actions { animation:resultStatsIn 320ms 720ms ease-out both; }
@keyframes resultCardIn { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes resultScoreIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes resultRankIn { from { opacity:0; transform:scaleX(.82); } to { opacity:1; transform:none; } }
@keyframes resultStatsIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes resultSweep { to { transform:translateX(130%); } }
@keyframes finishBandIn { from { opacity:0; transform:scaleY(.15); } to { opacity:1; transform:none; } }
@keyframes finishWordIn { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  .result-dialog[open] .result-card,.result-dialog[open] .result-score-label,.result-dialog[open] .result-card h2,.result-dialog[open] .result-rating,.result-dialog[open] .result-stats-label,.result-dialog[open] .result-stats,.result-dialog[open] .result-save,.result-dialog[open] .result-actions,.result-dialog[open] .result-rating::after,.countdown.is-finish .countdown-band,.countdown.is-finish strong,.idle-logo::before,.idle-logo::after { animation:none; }
}
@media (max-width:850px) {
  .site-header { grid-template-columns:1fr auto; gap:10px; padding:12px 18px; }
  .site-nav { grid-column:1/-1; grid-row:2; overflow:auto; }
  .site-tab { flex:1; min-height:42px; padding:0 12px; }
  .site-main { width:min(100% - 28px,1180px); padding-top:22px; }
  .site-hero { min-height:520px; padding:36px 28px; }
  .news-list article { grid-template-columns:100px 70px 1fr; }
  .profile-panel { grid-template-columns:1fr; }
  .mypage-login { grid-template-columns:1fr; gap:30px; min-height:0; padding:34px 28px; }
  .profile-panel .hero-start { grid-column:auto; }
  .game-shell { inset:0; min-height:640px; border:0; box-shadow:none; }
  .game-shell::before { border-width:4px; }
  .game-bar { top:4px; right:4px; left:4px; height:66px; padding:0 14px; }
  .view { inset:71px 4px 4px; }
  .title-screen { grid-template-columns:1fr; align-content:center; }
  .title-copy { padding:30px 24px 14px; }
  .idle-logo-title { width:min(86vw,560px); }
  .mode-board { width:min(520px,100%); padding:8px 24px 30px; }
  .mode-card { min-height:82px; }
  h1 { font-size:clamp(4rem,15vw,7rem); }
  .match-layout { grid-template-columns:1fr; }
  .score-panel { grid-template-columns:1.1fr 1fr; border-top:1px solid #c2c3c5; border-left:0; }
  .meter-list,.match-log { display:none; }
  .locked-panel { grid-template-columns:1fr; align-content:start; }
  .question-stage { width:min(100% - 28px,940px); padding-inline:8px; }
  .online-panel { padding:24px; }
  .online-lobby-body { grid-template-columns:1fr; }
  .online-player-card { min-height:190px; }
  .online-player-card>b { margin-top:20px; }
  .battle-racers { grid-template-columns:1fr; }
  .online-question-stage { width:min(100% - 28px,760px); padding:36px 12px; }
  .online-question-stage .ja-phrase { font-size:clamp(2rem,7vw,3.8rem); white-space:normal; }
}
@media (max-width:560px) {
  .brand-logo { width:164px; height:42px; }
  .launch-button { padding:0 12px; }
  .site-nav { width:100%; }
  .site-tab { padding:0 6px; font-size:.68rem; }
  .site-main { width:min(100% - 20px,1180px); }
  .site-hero { min-height:500px; padding:28px 18px; }
  .idle-logo-hero { width:100%; }
  .site-hero::after { right:12%; }
  .news-list article { grid-template-columns:1fr 70px; gap:8px; padding:18px 14px; }
  .news-list h3,.news-list p { grid-column:1/-1; }
  .site-ranking-head,.site-rank-list li { grid-template-columns:60px 1fr 80px; }
  .profile-panel { padding:20px; }
  .profile-stats { grid-template-columns:1fr; }
  .profile-stats div { border-right:0; border-bottom:1px solid var(--line); }
  .profile-detail-stats { grid-template-columns:1fr; }
  .profile-detail-stats div { border-right:0; border-bottom:1px solid var(--line); }
  .game-bar { padding:0 10px; }
  .brand-logo-game { width:145px; height:38px; }
  .title-copy,.mode-board { padding-inline:18px; }
  h1 { font-size:clamp(3.5rem,17vw,5.5rem); }
  .lead { font-size:.76rem; }
  .mode-card { min-height:78px; padding:11px 15px; }
  .mode-card strong { font-size:1.35rem; }
  .match-stage,.score-panel,.ranking-board,.locked-panel { padding:16px; }
  .question-card { padding:18px 12px; }
  .ja-phrase { font-size:clamp(1.6rem,8vw,2.6rem); }
  .controls { grid-template-columns:1fr 1fr 1fr; }
  .player-input { grid-column:1/-1; }
  .score-panel { grid-template-columns:1fr 1fr; padding-top:10px; }
  .score-card strong { font-size:3rem; }
  .rank-item { grid-template-columns:38px minmax(0,1fr) 60px; }
  .rank-item .hide-mobile { display:none; }
  .result-stats { grid-template-columns:1fr 1fr; }
  .result-rating { grid-template-columns:82px 1fr; }
  .result-rating>strong { min-height:76px; font-size:2.35rem; }
  .play-hud { top:20px; right:18px; left:18px; }
  .play-progress { top:49px; right:18px; left:18px; }
  .restart-hint { right:18px; bottom:18px; }
  .online-panel { padding:16px 14px; }
  .online-heading { align-items:flex-start; }
  .online-heading h2 { font-size:3rem; }
  .network-status { margin-top:8px; }
  .online-auth { grid-template-columns:1fr; gap:24px; min-height:360px; padding:26px 20px; }
  .online-actions { grid-template-columns:1fr; }
  .online-action { min-height:112px; }
  .online-join { grid-column:auto; }
  .online-player-card>b { font-size:4rem; }
  .racer { grid-template-columns:110px 1fr 40px; gap:8px; padding:8px 10px; }
  .rival-position { padding-inline:10px; }
  .online-question-stage { padding-inline:4px; }
  .online-question-stage .ja-phrase { font-size:clamp(1.7rem,9vw,2.8rem); }
  .versus-result>div { padding:14px 10px; }
  .versus-result strong { font-size:1.7rem; }
  .rating-change { grid-template-columns:1fr; gap:8px; }
  .rating-change>div { justify-content:flex-start; }
  .online-result-stats { grid-template-columns:1fr 1fr; }
  .online-result-stats div:nth-child(2) { border-right:0; }
  .online-result-stats div { border-bottom:1px solid var(--line); }
}