:root {
  --navy: #09172c;
  --navy-2: #10294a;
  --panel: rgba(13, 35, 63, .92);
  --ink: #eff8ff;
  --muted: #a8bed1;
  --cyan: #5ae9e1;
  --blue: #4c8dff;
  --gold: #ffc94b;
  --orange: #ff8b42;
  --pink: #f65b97;
  --green: #5ce0a1;
  --danger: #ff5c6c;
  --line: rgba(166, 215, 255, .18);
  --shadow: 0 18px 50px rgba(0, 8, 22, .38);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 12%, rgba(42, 117, 178, .26), transparent 33%),
    radial-gradient(circle at 10% 80%, rgba(94, 48, 141, .2), transparent 38%),
    linear-gradient(145deg, #071225 0%, #0a1f38 54%, #071426 100%);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; }
button, [role="button"] { touch-action: manipulation; }
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.hidden { display: none !important; }
.app { min-height: 100vh; overflow: hidden; position: relative; isolation: isolate; }
.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .14;
  background-image: linear-gradient(rgba(107, 196, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 196, 255, .12) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(62deg) translateY(54%);
  transform-origin: bottom;
}
.stars { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: white; box-shadow: 0 0 9px #9eefff; animation: twinkle 3s infinite alternate; }
.stars i:nth-child(1) { left: 8%; top: 20%; }.stars i:nth-child(2) { left: 22%; top: 67%; animation-delay: -.5s; }.stars i:nth-child(3) { left: 42%; top: 12%; animation-delay: -1.2s; }.stars i:nth-child(4) { left: 61%; top: 72%; animation-delay: -.8s; }.stars i:nth-child(5) { left: 75%; top: 20%; animation-delay: -1.7s; }.stars i:nth-child(6) { left: 91%; top: 54%; animation-delay: -.3s; }.stars i:nth-child(7) { left: 53%; top: 43%; animation-delay: -2s; }.stars i:nth-child(8) { left: 13%; top: 43%; animation-delay: -2.4s; }

.topbar {
  width: min(1320px, calc(100% - 34px));
  min-height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; width: max-content; align-items: center; gap: 11px; padding: 7px 4px; color: white; border: 0; background: transparent; text-align: left; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(90,233,225,.5); border-radius: 13px; background: linear-gradient(145deg, #173b5d, #0c243f); box-shadow: inset 0 0 18px rgba(90,233,225,.13); font-size: 23px; }
.brand b { display: block; font-size: 19px; line-height: 1; letter-spacing: .04em; }
.brand small { display: block; margin-top: 6px; color: var(--cyan); font: 700 9px/1 system-ui, sans-serif; letter-spacing: .2em; }
.record-bar { display: flex; height: 50px; border: 1px solid var(--line); border-radius: 15px; background: rgba(4, 18, 35, .48); overflow: hidden; }
.record-bar span { min-width: 100px; padding: 8px 17px; text-align: center; border-right: 1px solid var(--line); }
.record-bar span:last-child { border: 0; }
.record-bar small { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.record-bar b { display: block; margin-top: 2px; color: white; font-size: 15px; }
.record-bar em { color: var(--gold); font-style: normal; }
.top-actions { justify-self: end; display: flex; gap: 8px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(16, 42, 72, .72); box-shadow: inset 0 0 10px rgba(125,200,255,.06); font-weight: 900; cursor: pointer; transition: .18s ease; }
.icon-button:hover { transform: translateY(-2px); border-color: var(--cyan); background: #163e64; }

.screen { width: min(1220px, calc(100% - 38px)); margin: 0 auto; min-height: calc(100vh - 76px); }
.home-screen { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 5%; padding: 52px 0 118px; position: relative; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: var(--cyan); font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: .21em; }
.eyebrow i { width: 26px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero-copy { position: relative; z-index: 3; }
.hero-copy h1 { margin: 0; color: white; font-size: clamp(40px, 5.3vw, 73px); line-height: 1.05; letter-spacing: -.045em; text-shadow: 0 7px 28px rgba(0,0,0,.32); }
.hero-copy h1 span { color: transparent; background: linear-gradient(95deg, #ffdb71 8%, #ff9a4b 62%, #ff6a91); -webkit-background-clip: text; background-clip: text; }
.lead { margin: 23px 0 27px; color: #c9d9e8; font-size: 15px; line-height: 1.9; font-weight: 600; }
.mode-buttons { display: flex; gap: 12px; align-items: stretch; }
.primary-button, .duo-button { border: 0; border-radius: 17px; color: #09172c; min-height: 68px; padding: 9px 17px; display: flex; align-items: center; gap: 13px; cursor: pointer; box-shadow: 0 12px 34px rgba(24, 224, 209, .2), inset 0 1px rgba(255,255,255,.6); transition: transform .18s ease, filter .18s ease; }
.primary-button { background: linear-gradient(135deg, #66f0d7, #41bedc); }
.duo-button { color: white; border: 1px solid rgba(255,201,75,.5); background: linear-gradient(145deg, rgba(255,176,58,.22), rgba(236,78,120,.22)); box-shadow: inset 0 0 20px rgba(255,185,75,.08); }
.primary-button:hover, .duo-button:hover { transform: translateY(-3px); filter: brightness(1.08); }
.button-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 12px; background: rgba(5,27,47,.15); font-size: 22px; font-weight: 1000; }
.primary-button > span:nth-child(2), .duo-button > span:nth-child(2) { text-align: left; }
.primary-button b, .duo-button b { display: block; font-size: 16px; }
.primary-button small, .duo-button small { display: block; margin-top: 3px; opacity: .72; font-size: 10px; font-weight: 700; }
.primary-button > i, .duo-button > i { margin-left: auto; font-style: normal; font-size: 30px; }
.save-note { margin: 14px 2px 0; color: #768fa7; font-size: 10px; }

.hero-stage { min-height: 525px; position: relative; display: grid; place-items: center; perspective: 900px; }
.time-ring { width: 410px; height: 410px; position: absolute; border: 1px solid rgba(90,233,225,.28); border-radius: 50%; box-shadow: inset 0 0 60px rgba(56,133,195,.12), 0 0 65px rgba(44,131,190,.14); animation: spin 24s linear infinite; }
.time-ring::before, .time-ring::after { content: ""; position: absolute; inset: 35px; border: 1px dashed rgba(255,201,75,.28); border-radius: 50%; }
.time-ring::after { inset: 77px; border-style: solid; border-color: rgba(90,233,225,.15); }
.time-ring i { position: absolute; left: 50%; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 15px var(--gold); }
.time-ring i:nth-child(2) { top: 50%; left: auto; right: -7px; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.time-ring i:nth-child(3) { top: auto; bottom: -7px; background: var(--pink); box-shadow: 0 0 15px var(--pink); }
.show-card { width: 196px; height: 278px; padding: 20px 15px 15px; position: absolute; display: flex; flex-direction: column; align-items: center; border: 2px solid rgba(255,255,255,.38); border-radius: 20px; background: linear-gradient(160deg, rgba(35,88,126,.98), rgba(7,27,52,.98)); box-shadow: 0 24px 45px rgba(0,0,0,.42), inset 0 0 32px rgba(117,221,255,.1); overflow: hidden; }
.show-card::before { content: ""; width: 230px; height: 85px; position: absolute; top: -40px; background: radial-gradient(ellipse, rgba(90,233,225,.35), transparent 65%); }
.show-card small { z-index: 1; color: var(--cyan); font: 800 9px system-ui, sans-serif; letter-spacing: .2em; }
.show-card span { display: grid; place-items: center; width: 122px; height: 122px; margin: 17px 0 10px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: radial-gradient(circle, rgba(90,233,225,.17), rgba(0,10,25,.35)); font-size: 66px; }
.show-card b { color: white; font-size: 21px; }
.show-card em { margin-top: 7px; color: var(--gold); font-style: normal; font-size: 11px; font-weight: 700; }
.card-center { z-index: 3; transform: translateY(-13px); border-color: rgba(255,213,91,.68); background: linear-gradient(160deg, #274c71, #0c243d); }
.card-left { z-index: 1; transform: translate(-168px, 15px) rotateY(18deg) rotateZ(-7deg) scale(.88); opacity: .8; }
.card-right { z-index: 1; transform: translate(168px, 15px) rotateY(-18deg) rotateZ(7deg) scale(.88); opacity: .8; }
.versus-flare { z-index: 5; margin-top: 250px; display: grid; place-items: center; width: 55px; height: 55px; border: 2px solid white; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--pink)); color: white; box-shadow: 0 0 32px rgba(255,100,105,.6); font: italic 1000 19px system-ui, sans-serif; }
.hero-ribbon { width: 310px; padding: 13px 24px; position: absolute; bottom: 8px; z-index: 4; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(7,24,44,.92); box-shadow: var(--shadow); text-align: center; }
.hero-ribbon small, .hero-ribbon b, .hero-ribbon span { display: block; }
.hero-ribbon small { color: var(--cyan); font: 800 8px system-ui, sans-serif; letter-spacing: .2em; }
.hero-ribbon b { margin: 4px; font-size: 16px; }.hero-ribbon em { color: var(--gold); font-style: normal; }.hero-ribbon span { color: var(--muted); font-size: 10px; }
.feature-row { position: absolute; left: 0; right: 0; bottom: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feature-row article { display: flex; align-items: center; gap: 12px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(10,31,54,.7); }
.feature-row article > span { font-size: 24px; }.feature-row b, .feature-row small { display: block; }.feature-row b { font-size: 12px; }.feature-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }

/* Battle */
.battle-screen { padding: 23px 0 42px; position: relative; }
.battle-header { min-height: 55px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.match-label small, .match-label b { display: block; }.match-label small { color: var(--cyan); font: 800 8px system-ui,sans-serif; letter-spacing: .2em; }.match-label b { margin-top: 3px; font-size: 18px; }
.turn-banner { display: flex; align-items: center; gap: 13px; padding: 7px 20px; border-radius: 99px; color: #082135; background: linear-gradient(90deg, var(--cyan), #96f3c6); box-shadow: 0 0 24px rgba(90,233,225,.18); font-size: 12px; }
.turn-banner span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
.round-counter { justify-self: end; text-align: right; }.round-counter small { display: block; color: var(--muted); font: 700 8px system-ui; letter-spacing: .15em; }.round-counter b { font-size: 15px; }.round-counter em { color: var(--gold); font-style: normal; }
.fighters { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 10px 0 14px; }
.fighter { min-width: 0; padding: 11px 15px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(20,58,91,.85), rgba(8,25,47,.88)); transition: transform .2s ease, border-color .2s ease; }
.fighter.active { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 8px 24px rgba(40,226,218,.12); }
.fighter.hit { animation: hit .4s ease; }.fighter.attack { animation: attack .42s ease; }
.fighter-name { display: flex; align-items: center; gap: 10px; }.fighter-name > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(90,233,225,.13); font-size: 22px; }.fighter-name small,.fighter-name b { display:block; }.fighter-name small { color: var(--muted); font:700 7px system-ui; letter-spacing:.14em; }.fighter-name b { margin-top: 3px; font-size: 14px; }
.rival-fighter .fighter-name { flex-direction: row-reverse; text-align: right; }.rival-fighter .fighter-name > span { background: rgba(246,91,151,.13); }
.hp-line { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 8px; }.hp-line > span { color: white; font-size: 10px; font-weight: 800; }.hp-line > i { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.4); }.hp-line > i b { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .45s ease; }.rival-fighter .hp-line > i b { background: linear-gradient(90deg, var(--orange), var(--pink)); }
.streak { margin-top: 4px; color: var(--muted); text-align: right; font-size: 9px; }.player-fighter .streak { text-align:left; }.streak b { color: var(--gold); }
.arena-core { display: flex; align-items: center; gap: 5px; color: white; font: italic 1000 14px system-ui; }.arena-core i { width: 11px; height: 1px; background: var(--line); }
.quiz-arena { min-height: 515px; display: grid; grid-template-columns: 285px 1fr; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 25px; background: radial-gradient(circle at 18% 28%, rgba(42,145,185,.16), transparent 32%), linear-gradient(145deg, rgba(14,45,75,.94), rgba(6,23,44,.96)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); position: relative; overflow: hidden; }
.quiz-arena::before { content:""; position:absolute; inset:0; opacity:.17; background: repeating-linear-gradient(90deg, transparent 0 65px, rgba(130,210,255,.08) 66px), repeating-linear-gradient(0deg, transparent 0 65px, rgba(130,210,255,.06) 66px); }
.figure-card { align-self: center; width: 255px; min-height: 380px; padding: 18px; position: relative; z-index: 1; justify-self: center; overflow: hidden; border: 2px solid rgba(255,213,99,.7); border-radius: 22px; background: linear-gradient(160deg, #285478, #0a233d 65%, #142747); box-shadow: 0 22px 45px rgba(0,0,0,.38), inset 0 0 30px rgba(87,220,230,.08); text-align: center; }
.figure-card.reveal { animation: reveal .45s ease; }.card-shine { position:absolute; inset:-70% -80%; transform:rotate(25deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); animation:shine 4s infinite; }
.figure-top { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }.figure-top span { padding:5px 9px; border-radius:99px; color:#06192c; background:var(--cyan); font-size:9px; font-weight:900; }.figure-top small { color:var(--gold); font-size:9px; font-weight:800; }
.figure-portrait { width:165px; height:165px; margin:23px auto 13px; display:grid; place-items:center; position:relative; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:radial-gradient(circle, rgba(90,233,225,.2), rgba(2,16,32,.45) 67%); box-shadow:0 0 32px rgba(90,233,225,.12); font-size:82px; }
.figure-portrait::before,.figure-portrait::after { content:""; position:absolute; inset:-11px; border:1px dashed rgba(255,201,75,.32); border-radius:50%; }.figure-portrait::after { inset:12px; border-style:solid; border-color:rgba(90,233,225,.14); }
.figure-card p { margin:0 0 4px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.06em; }.figure-card h2 { margin:0; font-size:23px; }.power-badge { width:76px; margin:19px auto 0; padding:5px; border:1px solid rgba(255,201,75,.3); border-radius:10px; background:rgba(255,201,75,.08); }.power-badge small,.power-badge b { display:block; }.power-badge small { color:var(--gold); font-size:7px; }.power-badge b { font-size:16px; }
.question-zone { z-index:1; align-self:center; position:relative; min-height:440px; display:flex; flex-direction:column; justify-content:center; }
.question-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.question-meta > span { padding:5px 10px; border-radius:8px; color:var(--cyan); background:rgba(90,233,225,.1); font-size:9px; font-weight:800; }.question-meta small { color:var(--muted); font-size:9px; }.question-meta small b { color:var(--gold); }
.question-zone > h2 { min-height:62px; margin:0 0 19px; font-size:clamp(18px,2.1vw,28px); line-height:1.45; letter-spacing:-.02em; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.answer-button { min-height:72px; padding:12px 14px; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; border:1px solid rgba(145,205,246,.22); border-radius:14px; color:white; background:linear-gradient(145deg, rgba(27,72,108,.86), rgba(12,39,67,.9)); text-align:left; font-weight:800; font-size:13px; cursor:pointer; transition:.17s ease; }
.answer-button:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--cyan); background:#1b5377; }.answer-button > span { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--cyan); background:rgba(90,233,225,.11); font:900 11px system-ui; }.answer-button.correct { border-color:var(--green); background:rgba(33,142,101,.55); }.answer-button.wrong { border-color:var(--danger); background:rgba(152,42,61,.55); }.answer-button.removed { opacity:.12; pointer-events:none; }.answer-button:disabled { cursor:default; }
.hint-button { align-self:flex-start; margin-top:13px; padding:8px 12px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,201,75,.25); border-radius:10px; color:var(--gold); background:rgba(255,201,75,.07); cursor:pointer; }.hint-button:hover { background:rgba(255,201,75,.14); }.hint-button b { font-size:10px; }.hint-button small { color:var(--muted); font-size:8px; }.key-hint { margin:10px 2px 0; color:#66829a; font-size:8px; }
.feedback { position:absolute; inset:0; z-index:4; display:grid; grid-template-columns:55px 1fr; grid-template-rows:1fr auto; gap:15px; padding:22px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:linear-gradient(145deg, rgba(11,41,67,.985), rgba(6,22,41,.99)); box-shadow:0 15px 35px rgba(0,0,0,.35); animation:feedbackIn .32s ease; }
.judge-orb { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#062136; background:var(--green); box-shadow:0 0 23px rgba(92,224,161,.35); font-size:27px; font-weight:1000; }.judge-orb.wrong { color:white; background:var(--danger); box-shadow:0 0 23px rgba(255,92,108,.3); }
.feedback-copy > small { color:var(--cyan); font:800 8px system-ui; letter-spacing:.2em; }.feedback-copy h3 { margin:3px 0 8px; font-size:24px; }.feedback-copy > p { margin:0; color:#ccdeea; font-size:12px; line-height:1.7; }
.fact-box { margin-top:14px; padding:10px; display:flex; gap:10px; align-items:flex-start; border:1px solid rgba(255,201,75,.18); border-radius:10px; background:rgba(255,201,75,.06); }.fact-box > span { font-size:19px; }.fact-box b,.fact-box small { display:block; }.fact-box b { color:var(--gold); font-size:9px; }.fact-box small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.55; }
.next-button { grid-column:1/-1; justify-self:end; min-width:174px; padding:12px 16px; border:0; border-radius:11px; display:flex; align-items:center; justify-content:center; gap:15px; color:#082137; background:linear-gradient(135deg,var(--cyan),#83edc0); font-size:11px; font-weight:900; cursor:pointer; }.next-button i { font-size:20px; font-style:normal; }
.pass-overlay { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:20px; border-radius:25px; background:rgba(3,13,28,.92); backdrop-filter:blur(8px); }.pass-card { width:min(410px,100%); padding:37px; border:1px solid rgba(90,233,225,.35); border-radius:23px; background:radial-gradient(circle at 50% 0,rgba(90,233,225,.16),transparent 42%),#0c2745; box-shadow:var(--shadow); text-align:center; }.pass-icon { display:grid; place-items:center; width:76px;height:76px;margin:0 auto 17px;border:1px solid rgba(90,233,225,.3);border-radius:50%;background:rgba(90,233,225,.1);font-size:40px;}.pass-card p{color:var(--cyan);font:800 8px system-ui;letter-spacing:.22em;}.pass-card h2{margin:6px 0;font-size:26px;}.pass-card small{color:var(--muted);font-size:11px;}.pass-card button{width:100%;margin-top:23px;padding:14px;border:0;border-radius:12px;color:#082137;background:linear-gradient(135deg,var(--cyan),#75ecc3);font-weight:900;cursor:pointer;}.pass-card button i{margin-left:14px;font-size:20px;font-style:normal;}

/* Reward + result */
.reward-screen,.result-screen { position:relative; display:flex; min-height:calc(100vh - 76px); padding:55px 0; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.reward-screen h2,.result-screen h2 { margin:0; font-size:clamp(30px,4vw,48px); }.reward-screen h2 span{color:var(--gold)}.reward-screen>p:not(.eyebrow),.result-screen>p:not(.eyebrow){margin:12px 0 27px;color:var(--muted);font-size:13px;}
.reward-burst { position:absolute; top:45%; left:50%; width:1px;height:1px; }.reward-burst i { position:absolute; width:320px; height:1px; left:-160px; background:linear-gradient(90deg,transparent,rgba(255,201,75,.17),transparent); }.reward-burst i:nth-child(2){transform:rotate(45deg)}.reward-burst i:nth-child(3){transform:rotate(90deg)}.reward-burst i:nth-child(4){transform:rotate(135deg)}
.reward-cards { width:min(900px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:15px; position:relative; z-index:1; }.reward-card { min-height:260px;padding:23px 17px;border:1px solid var(--line);border-radius:20px;color:white;background:linear-gradient(155deg,rgba(28,77,110,.95),rgba(8,27,50,.96));box-shadow:var(--shadow);cursor:pointer;transition:.2s ease;}.reward-card:hover{transform:translateY(-7px);border-color:var(--gold);}.reward-card>span{display:grid;place-items:center;width:85px;height:85px;margin:0 auto 17px;border:1px solid rgba(255,201,75,.28);border-radius:50%;background:rgba(255,201,75,.08);font-size:45px;}.reward-card small,.reward-card b,.reward-card p{display:block}.reward-card small{color:var(--cyan);font:800 8px system-ui;letter-spacing:.18em}.reward-card b{margin-top:5px;font-size:19px}.reward-card p{color:var(--muted);font-size:11px;line-height:1.6}.reward-card em{display:inline-block;padding:5px 10px;border-radius:99px;color:var(--gold);background:rgba(255,201,75,.08);font-style:normal;font-size:9px;font-weight:900;}
.result-crown { display:grid;place-items:center;width:90px;height:90px;margin-bottom:15px;border:2px solid rgba(255,201,75,.45);border-radius:50%;color:var(--gold);background:rgba(255,201,75,.08);box-shadow:0 0 40px rgba(255,201,75,.13);font-size:47px;}.result-crown.lose{color:var(--cyan);border-color:rgba(90,233,225,.4);background:rgba(90,233,225,.07)}
.result-stats { width:min(700px,100%); display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;background:rgba(8,28,50,.85);overflow:hidden;}.result-stats article{padding:17px;border-right:1px solid var(--line)}.result-stats article:last-child{border:0}.result-stats small,.result-stats b{display:block}.result-stats small{color:var(--muted);font-size:9px}.result-stats b{margin-top:5px;color:var(--gold);font-size:24px}.result-stats em{font-style:normal}
.result-discovery{min-height:55px;margin:20px 0;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.discovery-pill{padding:6px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(16,49,78,.75);font-size:10px}.result-actions{display:flex;gap:11px}.secondary-button{min-height:52px;padding:10px 22px;border:1px solid var(--line);border-radius:14px;color:white;background:rgba(18,49,78,.75);font-weight:800;cursor:pointer}.primary-button.compact{min-height:54px;padding:8px 18px}.primary-button.compact .button-icon{display:none}.centered{margin:22px auto 0}.result-actions .primary-button{min-width:190px}

/* overlays */
.overlay { position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;background:rgba(2,11,24,.88);backdrop-filter:blur(8px);overflow-y:auto; }
.overlay-card { width:min(900px,100%);max-height:min(800px,calc(100vh - 40px));padding:30px;position:relative;overflow:auto;border:1px solid rgba(138,206,247,.25);border-radius:24px;background:linear-gradient(150deg,#123a60,#081c35 70%);box-shadow:0 28px 70px rgba(0,0,0,.5); }
.close-button { position:absolute;right:18px;top:18px;width:37px;height:37px;border:1px solid var(--line);border-radius:10px;color:white;background:rgba(5,22,41,.6);font-size:22px;cursor:pointer; }
.overlay-card h2 { margin:0 0 21px;font-size:30px; }.guide-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.guide-grid article { min-height:128px;padding:17px;display:grid;grid-template-columns:33px 1fr;align-content:start;column-gap:12px;border:1px solid var(--line);border-radius:14px;background:rgba(5,25,46,.48);text-align:left; }.guide-grid article>span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#082137;background:var(--cyan);font-weight:1000}.guide-grid b{font-size:13px}.guide-grid p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.6}.guide-tip{margin-top:12px;padding:13px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,201,75,.2);border-radius:13px;background:rgba(255,201,75,.06);text-align:left}.guide-tip>span{font-size:25px}.guide-tip b,.guide-tip small{display:block}.guide-tip b{color:var(--gold);font-size:11px}.guide-tip small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.5}
.book-card{width:min(1060px,100%)}.book-heading{display:flex;align-items:flex-start;justify-content:space-between}.book-heading h2{margin-bottom:12px}.book-heading>span{margin-right:42px;padding:8px 13px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:10px}.book-heading>span b{color:var(--gold);font-size:18px}.book-filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px}.filter-button{flex:0 0 auto;padding:7px 11px;border:1px solid var(--line);border-radius:99px;color:var(--muted);background:rgba(5,25,45,.5);font-size:9px;font-weight:800;cursor:pointer}.filter-button.active{color:#062136;border-color:var(--cyan);background:var(--cyan)}.book-progress{margin:10px 0 15px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.book-progress i{height:6px;border-radius:99px;background:rgba(0,0,0,.3);overflow:hidden}.book-progress i b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .4s}.book-progress span{color:var(--muted);font-size:9px}.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.book-entry{min-height:177px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(6,27,49,.62);text-align:center}.book-entry.locked{opacity:.44;filter:saturate(.2)}.book-entry>span{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 8px;border:1px solid rgba(90,233,225,.18);border-radius:50%;background:rgba(90,233,225,.07);font-size:31px}.book-entry small,.book-entry b,.book-entry em{display:block}.book-entry small{color:var(--cyan);font-size:7px;font-weight:800;letter-spacing:.08em}.book-entry b{margin-top:3px;font-size:12px}.book-entry em{margin-top:2px;color:var(--muted);font-style:normal;font-size:8px}.book-entry p{margin:7px 0 0;color:#b7cbd9;font-size:8px;line-height:1.45}.book-entry.locked p{display:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:100;max-width:calc(100% - 30px);padding:10px 17px;border:1px solid rgba(90,233,225,.3);border-radius:99px;color:white;background:rgba(6,27,47,.94);box-shadow:var(--shadow);font-size:10px;font-weight:800;opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.effects{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}.spark{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--gold);animation:spark .75s ease-out forwards}

@keyframes twinkle{to{opacity:.2;transform:scale(.4)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{0%,55%{transform:translateX(-55%) rotate(25deg)}80%,100%{transform:translateX(55%) rotate(25deg)}}
@keyframes reveal{0%{transform:rotateY(75deg) scale(.92);opacity:.4}100%{transform:none;opacity:1}}
@keyframes hit{0%,100%{transform:translateX(0)}30%{transform:translateX(-10px);filter:brightness(1.6)}60%{transform:translateX(7px)}}
@keyframes attack{45%{transform:translateX(14px) scale(1.03)}}
@keyframes feedbackIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes spark{to{transform:translate(var(--x),var(--y)) rotate(250deg);opacity:0}}

@media (max-width: 900px) {
  .topbar{width:calc(100% - 22px);grid-template-columns:1fr auto}.record-bar{display:none}.home-screen{grid-template-columns:1fr;padding-top:35px;text-align:center}.eyebrow{justify-content:center}.lead br{display:none}.mode-buttons{justify-content:center}.hero-stage{min-height:470px;margin-top:15px}.feature-row{position:relative;grid-column:1;bottom:auto;margin-top:20px}.quiz-arena{grid-template-columns:220px 1fr;padding:18px;gap:18px}.figure-card{width:210px;min-height:330px}.figure-portrait{width:135px;height:135px;font-size:68px}.book-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width: 650px) {
  .topbar{min-height:64px}.brand-mark{width:36px;height:36px}.brand b{font-size:15px}.brand small{font-size:7px}.icon-button{width:35px;height:35px}.screen{width:calc(100% - 22px);min-height:calc(100vh - 64px)}.home-screen{padding:27px 0 35px}.hero-copy h1{font-size:39px}.lead{font-size:12px;line-height:1.7}.mode-buttons{flex-direction:column}.primary-button,.duo-button{width:100%;min-height:62px}.save-note{text-align:center}.hero-stage{min-height:380px;transform:scale(.83);margin:-15px -11% -30px;width:122%}.feature-row{grid-template-columns:1fr}.feature-row article{padding:11px 14px}.battle-screen{padding-top:12px}.battle-header{grid-template-columns:1fr auto}.turn-banner{grid-row:2;grid-column:1/-1;justify-self:center;margin:8px 0}.round-counter{grid-column:2}.fighters{gap:7px;margin:4px 0 9px}.fighter{padding:8px}.fighter-name>span{width:29px;height:29px;font-size:17px}.fighter-name small{display:none}.fighter-name b{font-size:11px}.arena-core i{display:none}.hp-line{display:block}.hp-line>span{display:block;margin-bottom:3px}.streak{font-size:8px}.quiz-arena{min-height:auto;grid-template-columns:92px 1fr;gap:11px;padding:12px;border-radius:18px}.figure-card{width:92px;min-height:236px;padding:8px;border-radius:13px;align-self:start}.figure-top{display:block}.figure-top span{display:block;font-size:7px;padding:4px}.figure-top small{display:block;margin-top:4px}.figure-portrait{width:70px;height:70px;margin:13px auto 10px;font-size:38px}.figure-portrait::before{inset:-5px}.figure-portrait::after{display:none}.figure-card p{font-size:7px}.figure-card h2{font-size:12px}.power-badge{width:58px;margin-top:12px}.power-badge b{font-size:13px}.question-zone{min-height:430px;justify-content:flex-start;padding-top:4px}.question-meta{display:block}.question-meta>span{display:inline-block}.question-meta small{display:block;margin-top:8px}.question-zone>h2{min-height:auto;margin-bottom:12px;font-size:16px;line-height:1.45}.answers{grid-template-columns:1fr;gap:7px}.answer-button{min-height:53px;padding:8px;grid-template-columns:27px 1fr;font-size:11px}.answer-button>span{width:25px;height:25px}.hint-button{margin-top:9px;padding:7px}.hint-button small{display:none}.key-hint{display:none}.feedback{position:fixed;left:11px;right:11px;top:auto;bottom:11px;grid-template-columns:43px 1fr;padding:15px;max-height:calc(100vh - 90px);overflow:auto}.judge-orb{width:41px;height:41px;font-size:21px}.feedback-copy h3{font-size:20px}.feedback-copy>p{font-size:10px}.fact-box{margin-top:9px}.next-button{width:100%;justify-self:stretch}.reward-cards{grid-template-columns:1fr}.reward-screen,.result-screen{padding:30px 0}.reward-card{min-height:0;padding:15px;display:grid;grid-template-columns:62px 1fr;column-gap:13px;text-align:left}.reward-card>span{grid-row:1/5;width:60px;height:60px;margin:0;font-size:31px}.reward-card b{font-size:15px}.reward-card p{margin:5px 0}.result-stats{grid-template-columns:1fr 1fr}.result-stats article:nth-child(2){border-right:0}.result-stats article:nth-child(-n+2){border-bottom:1px solid var(--line)}.result-actions{width:100%;flex-direction:column}.result-actions button{width:100%}.overlay{padding:8px}.overlay-card{max-height:calc(100vh - 16px);padding:21px 15px}.overlay-card h2{font-size:23px}.guide-grid{grid-template-columns:1fr}.guide-grid article{min-height:0}.book-heading{display:block}.book-heading>span{display:inline-block;margin:0 0 10px}.book-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-height: 650px) and (min-width: 651px) {
  .battle-screen{padding-top:8px}.battle-header{min-height:42px}.fighters{margin:4px 0 7px}.quiz-arena{min-height:430px;padding:15px}.figure-card{min-height:330px}.figure-portrait{width:135px;height:135px;margin-top:14px}.question-zone{min-height:380px}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }