:root {
  color-scheme: dark;
  --bg: #050813;
  --panel: rgba(12, 20, 39, .78);
  --panel-strong: rgba(11, 17, 33, .95);
  --line: rgba(152, 191, 255, .13);
  --cyan: #67f4ff;
  --blue: #4d7cff;
  --violet: #ae79ff;
  --mint: #7cf4bb;
  --red: #ff677d;
  --gold: #ffd278;
  --text: #f4f7ff;
  --muted: #90a0bd;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; overscroll-behavior: none;
  background: var(--bg); color: var(--text); touch-action: manipulation;
  -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none;
}

body { min-height: 100dvh; }
body.playing { overflow: hidden; position: fixed; inset: 0; }
button { font: inherit; color: inherit; }
button, [role="button"] { touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .76; }
.app-shell { position: relative; z-index: 1; width: min(100%, 760px); min-height: 100dvh; margin: 0 auto; }

.screen {
  width: 100%; min-height: 100dvh;
  padding: calc(18px + var(--safe-top)) calc(20px + var(--safe-right)) calc(25px + var(--safe-bottom)) calc(20px + var(--safe-left));
  animation: rise-in .32s cubic-bezier(.2,.75,.2,1) both;
}

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 12px; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.meta-line { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.icon-btn, .back-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px;
  border: 1px solid var(--line); background: rgba(18, 28, 52, .68); cursor: pointer;
}
.icon-btn:active, .back-btn:active { transform: scale(.94); }
.back-btn { font-size: 22px; }

.logo-hero { position: relative; width: min(78vw, 342px); margin: 0 auto; isolation: isolate; }
.logo-hero::before {
  content: ""; position: absolute; inset: 16% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(77,124,255,.2), rgba(103,244,255,.08) 45%, transparent 73%);
  filter: blur(21px); animation: breathe 4s ease-in-out infinite;
}
.logo-hero img, .brand-small img { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
.logo-hero::after {
  content: ""; position: absolute; top: 20%; bottom: 19%; width: 32%; left: -10%; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(103,244,255,.1) 50%, transparent 65%);
  animation: logo-scan 6s ease-in-out infinite;
}
.hero-copy { margin: -12px 0 20px; text-align: center; }
.hero-copy h1 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .19em; }
.hero-copy p { margin: 7px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; }

.stat-strip, .triple-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 17px 0 20px; }
.stat-chip, .metric-card {
  min-width: 0; padding: 11px 8px; border: 1px solid var(--line); border-radius: 16px; text-align: center;
  background: linear-gradient(145deg, rgba(19,29,51,.84),rgba(9,14,28,.8));
}
.stat-chip strong, .metric-card strong { display: block; color: white; font-size: 16px; letter-spacing: .02em; }
.stat-chip span, .metric-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .05em; }

.mode-list { display: grid; gap: 10px; }
.mode-card {
  position: relative; width: 100%; min-height: 79px; padding: 15px 15px 15px 17px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 19px;
  background: linear-gradient(125deg, rgba(19,29,50,.9),rgba(9,14,26,.83)); cursor: pointer;
  transition: transform .16s ease, border-color .2s ease;
}
.mode-card:active, .action-btn:active, .choice:active, .menu-button:active { transform: scale(.978); }
.mode-card.primary { min-height: 95px; border-color: rgba(103,244,255,.38); background: linear-gradient(110deg,rgba(29,68,104,.72),rgba(43,34,96,.7)); }
.mode-card.primary::after { content:""; position:absolute; inset:auto -10% 0; height:1px; background:linear-gradient(90deg, transparent,var(--cyan),transparent); }
.mode-title { display: block; font-size: 16px; font-weight: 850; letter-spacing: .035em; }
.mode-card.primary .mode-title { font-size: 20px; }
.mode-desc { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.mode-badge { flex: 0 0 auto; padding: 7px 9px; border-radius: 11px; background: rgba(103,244,255,.11); color: var(--cyan); font-size: 10px; font-weight: 800; }
.footer-note { margin: 18px 0 0; text-align:center; color: rgba(166,181,206,.78); font-size: 10px; letter-spacing:.12em; }

.page-title { margin: 25px 0 5px; font-size: 29px; letter-spacing: -.02em; }
.page-desc { margin: 0 0 19px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.category-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:11px; }
.category-card {
  min-height: 112px; padding: 15px 13px; text-align:left; border:1px solid var(--line); border-radius:19px;
  background: linear-gradient(150deg,rgba(22,31,55,.92),rgba(8,13,26,.87)); cursor:pointer;
}
.category-card .cat-icon { display:block; font-size: 23px; }
.category-card strong { display:block; margin-top:10px; font-size: 14px; letter-spacing:.07em; }
.category-card small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }

.setting-group, .insight-card, .history-card, .info-card {
  margin: 13px 0; padding: 16px; border: 1px solid var(--line); border-radius:20px;
  background: linear-gradient(150deg,rgba(18,27,47,.87),rgba(9,14,26,.87));
}
.group-title { margin: 0 0 12px; font-size:11px; font-weight:850; letter-spacing:.13em; color:var(--cyan); }
.setting-row { min-height:52px; display:flex; justify-content:space-between; align-items:center; gap:11px; }
.setting-row + .setting-row { border-top:1px solid rgba(159,186,235,.08); }
.setting-label { font-size:13px; }
.setting-help { display:block; margin-top:4px; font-size:10px; color:var(--muted); line-height:1.4; }
.toggle {
  position:relative; flex:0 0 auto; width:48px; height:28px; border:1px solid rgba(146,164,202,.28);
  border-radius:20px; background:#172036; cursor:pointer;
}
.toggle::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#a1abc2; transition:transform .18s, background .18s; }
.toggle.on { background:rgba(65,189,190,.29); border-color:rgba(103,244,255,.55); }
.toggle.on::after { transform:translateX(19px); background:var(--cyan); }
.mini-action { padding:9px 11px; border-radius:11px; border:1px solid rgba(103,244,255,.26); background:rgba(103,244,255,.09); color:var(--cyan); font-size:11px; font-weight:800; }
.danger-btn { width:100%; margin-top:11px; padding:13px; border:1px solid rgba(255,103,125,.3); border-radius:14px; color:#ff8294; background:rgba(255,103,125,.07); }

.game-screen {
  position:relative; height:100dvh; min-height:100dvh; max-height:100dvh; overflow:hidden;
  padding:calc(13px + var(--safe-top)) calc(15px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(15px + var(--safe-left));
  display:flex; flex-direction:column; animation:none;
}
.game-topbar { min-height:50px; display:flex; justify-content:space-between; align-items:center; gap:9px; }
.session-meta { min-width:0; }
.session-mode { display:block; color:var(--muted); font-size:10px; letter-spacing:.11em; }
.session-score { display:block; margin-top:3px; font-size:22px; font-weight:900; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.timer-ring { position:relative; flex:0 0 auto; width:49px; height:49px; display:grid; place-items:center; }
.timer-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.timer-ring circle { fill:none; stroke-width:3; }
.timer-ring .ring-bg { stroke:rgba(134,164,210,.18); }
.timer-ring .ring-fg { stroke:var(--cyan); stroke-linecap:round; stroke-dasharray:138; stroke-dashoffset:0; transition:stroke .2s; }
.timer-number { z-index:1; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.close-game { width:38px; height:38px; border:1px solid var(--line); border-radius:12px; background:rgba(15,24,44,.7); font-size:19px; }

.combo-row { min-height:28px; display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.combo-meter { font-size:11px; font-weight:850; letter-spacing:.08em; color:var(--muted); }
.combo-meter.active { color:var(--gold); }
.rush-label { color:var(--cyan); font-size:10px; font-weight:900; letter-spacing:.14em; opacity:0; transform:translateY(3px); transition:.2s; }
.rush-label.active { opacity:1; transform:none; }

.game-card {
  position:relative; flex:1 1 auto; min-height:0; margin:7px 0; padding:clamp(15px,4vw,24px); display:flex; flex-direction:column;
  border:1px solid rgba(142,179,236,.17); border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg,rgba(18,29,51,.94),rgba(8,13,26,.93));
  transition:border-color .2s, box-shadow .25s;
}
.game-card.rush { border-color:rgba(103,244,255,.56); box-shadow:0 0 30px rgba(77,124,255,.16),inset 0 0 27px rgba(103,244,255,.035); }
.round-head { min-height:45px; }
.round-category { font-size:10px; letter-spacing:.16em; font-weight:900; }
.round-category[data-group="THINK"] { color:var(--cyan); }
.round-category[data-group="READ"] { color:#91a6ff; }
.round-category[data-group="SPEAK"] { color:#ffca7e; }
.round-category[data-group="TOUCH"] { color:var(--mint); }
.round-category[data-group="MOTION"] { color:#fb86c6; }
.round-category[data-group="MEMORY"] { color:var(--violet); }
.round-title { margin-top:5px; color:var(--muted); font-size:12px; }
.round-rule { margin:8px 0 2px; text-align:center; color:#d8e4fa; font-size:12px; font-weight:750; line-height:1.55; }

.challenge-zone { position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
.prompt-wrap { width:100%; text-align:center; }
.prompt-main { font-size:clamp(32px,10vw,63px); font-weight:900; line-height:1.16; letter-spacing:.025em; word-break:break-word; }
.prompt-main.compact { font-size:clamp(20px,6.2vw,32px); line-height:1.55; letter-spacing:0; }
.prompt-main.letter-grid { font-size:clamp(23px,7vw,37px); line-height:1.65; letter-spacing:.15em; }
.prompt-sub { margin-top:11px; color:var(--muted); font-size:12px; line-height:1.6; }
.flash-note { color:var(--gold); font-size:11px; letter-spacing:.12em; }
.trace-label { position:absolute; right:0; bottom:0; color:rgba(145,161,191,.76); font-size:10px; letter-spacing:.14em; }

.answer-area { position:relative; flex:0 0 auto; margin-top:9px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.choice-grid.single { grid-template-columns:1fr; }
.choice {
  min-width:0; min-height:56px; padding:10px 8px; display:grid; place-items:center; text-align:center;
  border:1px solid rgba(160,187,232,.18); border-radius:16px; background:rgba(28,39,63,.82);
  font-size:15px; font-weight:850; line-height:1.3; cursor:pointer; transition:transform .12s, border-color .15s, background .15s;
}
.choice:hover { border-color:rgba(103,244,255,.44); }
.choice.accent { border-color:rgba(103,244,255,.42); background:rgba(41,110,123,.3); }
.choice.warning { border-color:rgba(255,103,125,.33); color:#ff9aaa; }
.choice.correct-flash { border-color:var(--mint); background:rgba(124,244,187,.2); }
.choice.wrong-flash { border-color:var(--red); background:rgba(255,103,125,.2); }
.choice.small-copy { font-size:12px; }
.voice-status { min-height:17px; margin-top:7px; text-align:center; color:var(--muted); font-size:10px; }
.voice-status.listening { color:var(--gold); }
.progress-track { position:relative; height:4px; margin-top:12px; overflow:hidden; border-radius:9px; background:rgba(140,169,218,.16); }
.progress-fill { width:100%; height:100%; transform-origin:left center; border-radius:9px; background:linear-gradient(90deg,var(--cyan),var(--blue)); }
.game-bottom { min-height:26px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.07em; }

.target-field { position:absolute; inset:5px; }
.tap-target {
  position:absolute; width:61px; height:61px; display:grid; place-items:center; border:1px solid rgba(103,244,255,.82);
  border-radius:50%; background:radial-gradient(circle,rgba(103,244,255,.36),rgba(77,124,255,.21));
  box-shadow:0 0 17px rgba(103,244,255,.28); color:white; font-size:20px; font-weight:900;
}
.tap-target.sequence { width:51px; height:51px; }
.tap-target.done { opacity:.34; border-color:var(--mint); background:rgba(124,244,187,.16); }
.tap-target.moving { transition:left .48s linear,top .48s linear; }
.gesture-pad {
  width:min(100%,245px); min-height:130px; display:grid; place-items:center; margin:auto; border:1px dashed rgba(103,244,255,.4);
  border-radius:25px; background:rgba(37,73,94,.14); color:var(--cyan); touch-action:none;
}
.gesture-arrow { font-size:60px; line-height:1; }
.mash-btn { width:min(66vw,172px); height:min(66vw,172px); max-height:160px; border:1px solid rgba(103,244,255,.65); border-radius:50%; background:radial-gradient(circle,rgba(103,244,255,.2),rgba(53,77,117,.16)); font-size:22px; font-weight:900; }
.memory-grid { display:grid; width:min(72vw,250px); grid-template-columns:repeat(3,1fr); gap:9px; margin:auto; }
.memory-cell { aspect-ratio:1; border:1px solid rgba(165,187,228,.2); border-radius:13px; background:rgba(32,43,67,.72); font-size:19px; }
.memory-cell.lit { border-color:var(--cyan); background:rgba(103,244,255,.31); box-shadow:0 0 13px rgba(103,244,255,.24); }
.memory-cell.good { border-color:var(--mint); background:rgba(124,244,187,.23); }
.balance-lane { position:relative; width:min(85%,255px); height:30px; overflow:hidden; border:1px solid rgba(157,180,221,.29); border-radius:20px; background:rgba(29,40,66,.82); }
.balance-zone { position:absolute; left:37%; width:26%; height:100%; background:rgba(124,244,187,.17); }
.balance-orb { position:absolute; top:3px; left:calc(50% - 11px); width:22px; height:22px; border-radius:50%; background:var(--cyan); box-shadow:0 0 11px rgba(103,244,255,.57); }

.feedback-overlay { position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; opacity:0; }
.feedback-overlay.visible { animation:feedback-pop .37s ease-out both; }
.feedback-icon { width:87px; height:87px; display:grid; place-items:center; border-radius:50%; font-size:50px; font-weight:900; }
.feedback-overlay.ok .feedback-icon { border:2px solid rgba(124,244,187,.7); color:var(--mint); background:rgba(22,59,49,.8); }
.feedback-overlay.ng .feedback-icon { border:2px solid rgba(255,103,125,.7); color:var(--red); background:rgba(69,25,39,.84); }

.result-screen { padding-bottom:calc(32px + var(--safe-bottom)); }
.result-kicker { margin-top:19px; text-align:center; color:var(--cyan); font-size:11px; letter-spacing:.19em; }
.result-score { margin:4px 0 0; text-align:center; font-size:clamp(56px,18vw,84px); font-weight:950; letter-spacing:-.04em; line-height:1.04; }
.result-rank { width:max-content; margin:5px auto 15px; padding:6px 13px; border:1px solid rgba(103,244,255,.28); border-radius:50px; color:var(--cyan); font-size:12px; font-weight:850; letter-spacing:.13em; }
.new-record { margin:0 0 10px; text-align:center; color:var(--gold); font-size:12px; font-weight:850; letter-spacing:.1em; }
.analysis-list { display:grid; gap:11px; margin-top:10px; }
.analysis-row { display:grid; grid-template-columns:minmax(67px,1fr) 2.4fr 35px; align-items:center; gap:9px; }
.analysis-label { color:#dce5f8; font-size:11px; }
.analysis-track { height:7px; overflow:hidden; border-radius:10px; background:rgba(135,155,194,.16); }
.analysis-value { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.analysis-rank { text-align:right; color:var(--cyan); font-size:14px; font-weight:900; }
.action-stack { display:grid; gap:10px; margin-top:17px; }
.action-btn { min-height:55px; border:1px solid var(--line); border-radius:16px; background:rgba(19,28,48,.9); font-size:14px; font-weight:850; cursor:pointer; }
.action-btn.primary { border-color:rgba(103,244,255,.5); background:linear-gradient(105deg,rgba(43,113,141,.72),rgba(84,55,143,.7)); }
.result-note { margin-top:11px; text-align:center; color:var(--muted); font-size:10px; }

.history-list { display:grid; gap:9px; }
.history-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:11px 0; }
.history-row + .history-row { border-top:1px solid rgba(156,179,220,.09); }
.history-row strong { display:block; font-size:13px; }
.history-row small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.history-score { font-size:17px; font-weight:900; color:var(--cyan); }
.profile-radar { display:block; width:min(100%,270px); margin:5px auto 3px; }
.empty-state { padding:20px 0; text-align:center; color:var(--muted); font-size:12px; line-height:1.8; }
.strength-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.strength-pill { padding:12px 9px; border:1px solid var(--line); border-radius:13px; }
.strength-pill span { display:block; color:var(--muted); font-size:10px; }
.strength-pill strong { display:block; margin-top:5px; font-size:13px; }

.modal-backdrop { position:fixed; inset:0; z-index:8; display:grid; place-items:center; padding:25px; background:rgba(2,5,12,.78); }
.modal-card { width:min(100%,360px); padding:20px; border:1px solid rgba(152,187,233,.24); border-radius:23px; background:var(--panel-strong); }
.modal-card h2 { margin:0 0 9px; font-size:19px; }
.modal-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:17px; }
.modal-actions button { min-height:46px; }
.pause-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(5,8,19,.9); text-align:center; }

@keyframes rise-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes breathe { 0%,100% { opacity:.64; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes logo-scan { 0%,58% { transform:translateX(0); opacity:0; } 63% { opacity:1; } 84% { transform:translateX(420%); opacity:0; } 100% { opacity:0; } }
@keyframes feedback-pop { 0% { opacity:0; transform:scale(.72); } 34% { opacity:1; transform:scale(1.02); } 82% { opacity:1; } 100% { opacity:0; transform:scale(1.08); } }
@keyframes pulse-border { 50% { box-shadow:0 0 28px rgba(103,244,255,.27); } }

@media (max-width:360px) {
  .screen { padding-left:calc(13px + var(--safe-left)); padding-right:calc(13px + var(--safe-right)); }
  .game-screen { padding-left:calc(10px + var(--safe-left)); padding-right:calc(10px + var(--safe-right)); }
  .logo-hero { width:min(76vw,280px); }
  .hero-copy { margin-top:-7px; }
  .stat-strip { gap:6px; }
  .stat-chip strong { font-size:14px; }
  .mode-card { min-height:72px; padding:12px; }
  .mode-card.primary { min-height:85px; }
  .choice { min-height:49px; font-size:13px; }
  .analysis-row { grid-template-columns:62px 1fr 31px; gap:7px; }
}

@media (max-height:700px) {
  .logo-hero { width:min(67vw,250px); }
  .hero-copy { margin-top:-7px; margin-bottom:11px; }
  .stat-strip { margin-top:10px; margin-bottom:12px; }
  .mode-list { gap:7px; }
  .mode-card { min-height:66px; padding-top:10px; padding-bottom:10px; }
  .mode-card.primary { min-height:76px; }
  .game-card { padding:13px; }
  .round-head { min-height:38px; }
  .choice { min-height:47px; }
}

@media (min-width:650px) { .screen { max-width:600px; margin:0 auto; } .game-screen { max-width:580px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }