:root {
  --ink: #151722;
  --muted: #727584;
  --paper: #f5f1e8;
  --card: #fffdf8;
  --accent: #ff5f4d;
  --accent2: #7b61ff;
  --good: #19875f;
  --bad: #b33a3a;
  --line: rgba(21, 23, 34, 0.12);
  --shadow: 0 18px 50px rgba(21, 23, 34, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
body { min-height: 100svh; overflow-x: hidden; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid rgba(123,97,255,.5); outline-offset: 3px; }

.app-shell { width: min(100%, 520px); min-height: 100svh; margin: 0 auto; position: relative; background: var(--paper); overflow: hidden; }
.screen { display: none; min-height: 100svh; padding: max(18px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.screen.active { display: flex; flex-direction: column; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.brand-row, .game-header { display: flex; align-items: center; justify-content: space-between; }
.series-pill, .difficulty-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.45); font-weight: 900; cursor: pointer; }

.hero-prism { width: 170px; height: 170px; margin: 16px auto 2px; position: relative; display: grid; place-items: center; }
.prism-core { width: 86px; height: 86px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--card); transform: rotate(45deg); font-size: 32px; font-weight: 950; box-shadow: var(--shadow); }
.prism-core span { display:block; transform: rotate(-45deg); }
.ray { position: absolute; width: 54px; height: 2px; background: var(--ink); opacity: .35; transform-origin: 0 50%; left: 50%; top: 50%; }
.ray-1{transform:rotate(-82deg) translateX(53px)} .ray-2{transform:rotate(-28deg) translateX(53px)} .ray-3{transform:rotate(20deg) translateX(53px)}
.ray-4{transform:rotate(78deg) translateX(53px)} .ray-5{transform:rotate(143deg) translateX(53px)} .ray-6{transform:rotate(205deg) translateX(53px)}

.eyebrow { margin: 8px 0; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .18em; color: var(--muted); }
h1 { margin: 0; text-align: center; font-size: clamp(44px, 14vw, 70px); line-height: .92; letter-spacing: -.08em; font-weight: 950; }
.tagline { margin: 18px 0 0; text-align: center; font-size: 19px; line-height: 1.45; }
.tagline strong { font-size: 24px; }
.home-copy { margin: 18px auto 22px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.8; }
.home-copy strong { color: var(--ink); }

.primary-button, .secondary-button { width: 100%; min-height: 62px; border-radius: 18px; cursor: pointer; font-weight: 900; border: 0; }
.primary-button { background: var(--ink); color: white; box-shadow: 0 10px 0 rgba(21,23,34,.12); }
.primary-button:active { transform: translateY(2px); box-shadow: 0 7px 0 rgba(21,23,34,.12); }
.primary-button span, .primary-button small { display: block; }
.primary-button small { margin-top: 3px; opacity: .65; font-size: 12px; font-weight: 700; }
.secondary-button { background: transparent; border: 1px solid var(--ink); margin-top: 10px; }
.text-button { align-self: center; background: none; border: 0; margin: 14px auto; color: var(--muted); text-decoration: underline; cursor: pointer; }
.record-card { margin-top: auto; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(255,255,255,.45); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.record-card > div { padding: 12px 6px; text-align: center; border-right: 1px solid var(--line); }
.record-card > div:last-child { border-right: 0; }
.record-card span { display:block; font-size: 12px; color: var(--muted); font-weight: 800; }
.record-card strong { display:block; margin-top: 3px; font-size: 15px; }

.game-header { min-height: 48px; }
.round-block, .score-block { display: flex; align-items: baseline; gap: 7px; }
.round-block span, .score-block span { font-size: 12px; letter-spacing: .13em; color: var(--muted); font-weight: 900; }
.round-block strong, .score-block strong { font-size: 17px; }
.difficulty-row { margin: 12px 0 8px; display: flex; align-items: center; gap: 9px; }
.difficulty-row > span:last-child { font-size: 12px; color: var(--muted); font-weight: 700; }
.difficulty-badge { color: white; background: var(--ink); border: 0; min-height: 26px; }
.timer-wrap { height: 25px; position: relative; margin-bottom: 8px; border-radius: 999px; background: rgba(21,23,34,.08); overflow: hidden; }
.timer-bar { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); transform-origin: left; }
.timer-text { position: relative; z-index: 1; height: 100%; display: grid; place-items:center; color: white; text-shadow: 0 1px 3px rgba(21,23,34,.4); font-size: 12px; font-weight: 950; font-variant-numeric: tabular-nums; }

.event-card { margin: 8px 0 12px; min-height: 145px; display: flex; flex-direction: column; justify-content: center; padding: 22px 20px; background: var(--ink); color: white; border-radius: 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.event-card::after { content:""; position:absolute; width:160px;height:160px;border:1px solid rgba(255,255,255,.12);transform:rotate(45deg);right:-82px;top:-80px; }
.event-label { margin:0 0 7px; color:rgba(255,255,255,.55); font-size:12px; font-weight:900; letter-spacing:.1em; }
.event-card h2 { margin:0; font-size: clamp(24px, 7.8vw, 34px); line-height:1.22; letter-spacing:-.045em; }
.event-anchor { margin:12px 0 0; color:rgba(255,255,255,.62); font-size:12px; line-height:1.5; }

.view-meter { display:flex; align-items:center; justify-content:space-between; margin: 0 2px 10px; }
.view-count { display:flex; align-items:baseline; gap:6px; }
.view-count strong { font-size:30px; line-height:1; }
.view-count span { font-size:12px; font-weight:900; letter-spacing:.1em; color:var(--muted); }
.combo-copy { text-align:right; }
.combo-copy span { display:block; font-size:12px; color:var(--muted); }
.combo-copy strong { display:block; font-size:15px; }

.options-grid { display:grid; grid-template-columns: 1fr 1fr; gap:9px; }
.option-card { min-height: 85px; padding: 11px 11px 10px; text-align:left; border:1px solid var(--line); border-radius:17px; background:var(--card); box-shadow:0 5px 15px rgba(21,23,34,.05); cursor:pointer; position:relative; overflow:hidden; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.option-card:active { transform: scale(.975); }
.option-card .option-text { display:block; font-size:13px; line-height:1.35; font-weight:800; }
.option-card .lens-label { display:block; min-height:16px; margin-top:6px; font-size:12px; font-weight:900; letter-spacing:.03em; color:transparent; }
.option-card.good-picked { border-color: rgba(25,135,95,.45); background: rgba(25,135,95,.1); animation: goodPop .26s ease-out; }
.option-card.good-picked .lens-label { color: var(--good); }
.option-card.bad-picked { border-color: rgba(179,58,58,.4); background: rgba(179,58,58,.08); animation: badShake .3s ease-out; }
.option-card.bad-picked .lens-label { color: var(--bad); }
.option-card:disabled { cursor:default; opacity:.9; }
@keyframes goodPop { 45%{transform:scale(1.045)} }
@keyframes badShake { 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }
.micro-note { margin:10px 0 0; text-align:center; color:var(--muted); font-size:12px; }

.round-result-burst { margin: 48px auto 6px; font-size: clamp(46px, 14vw, 72px); font-weight: 950; letter-spacing:-.07em; transform: rotate(-3deg); }
.result-event { margin: 8px 0 10px; font-size: 24px; text-align:center; line-height:1.3; }
.result-copy { margin:0 auto 20px; max-width:360px; text-align:center; color:var(--muted); line-height:1.7; font-size:13px; }
.lens-summary { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:15px; }
.lens-summary > p, .panel-title { margin:0 0 10px; font-size:12px; color:var(--muted); font-weight:900; }
.lens-tags { display:flex; flex-wrap:wrap; gap:7px; }
.lens-tag { padding:7px 9px; border-radius:999px; background:rgba(123,97,255,.1); font-size:12px; font-weight:850; }
.missed-box { margin:10px 0 16px; border-left:3px solid var(--accent); padding:8px 10px; }
.missed-box span { font-size:12px; color:var(--muted); font-weight:900; }
.missed-box p { margin:3px 0 0; font-size:12px; line-height:1.5; }
.round-reflex-note { margin:14px 2px 18px; padding:13px 14px; border:1px dashed rgba(21,23,34,.2); border-radius:15px; }
.round-reflex-note span { display:block; font-size:12px; color:var(--muted); font-weight:900; letter-spacing:.08em; }
.round-reflex-note p { margin:4px 0 0; font-size:12px; line-height:1.55; }
.hidden { display:none !important; }
#screen-round .primary-button { margin-top:auto; }

#screen-result { text-align:center; }
.rank-seal { width:144px;height:144px;margin:14px auto 18px;border:2px solid var(--ink);border-radius:50%;display:grid;place-content:center;box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 9px var(--ink); transform:rotate(-4deg); }
.rank-seal span{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.12em}.rank-seal strong{font-size:23px;line-height:1.05;margin-top:4px;}
.result-title { margin:0 0 18px; font-size:28px; line-height:1.25; letter-spacing:-.045em; }
.result-title span { font-size:22px; color:var(--accent2); }
.result-score-card { display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden; }
.result-score-card div{padding:14px 5px;border-right:1px solid var(--line)}.result-score-card div:last-child{border-right:0}.result-score-card span{display:block;font-size:12px;color:var(--muted);font-weight:900}.result-score-card strong{display:block;margin-top:4px;font-size:19px}
.growth-panel { margin:12px 0; text-align:left; padding:16px; border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.45); }
.panel-title.secondary { margin-top:14px; }
.growth-list { display:flex; gap:7px; flex-wrap:wrap; }
.growth-chip { border-radius:10px; padding:8px 10px; background:var(--card); font-size:12px; font-weight:850; }
.meaning-ladder { margin:12px 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:left; }
.meaning-ladder div{padding:10px;border:1px solid var(--line);border-radius:12px}.meaning-ladder span{display:block;font-size:12px;font-weight:900}.meaning-ladder small{display:block;margin-top:2px;color:var(--muted);font-size:12px;}

.sheet-dialog { width:min(calc(100% - 20px),500px); max-height:82svh; margin:auto auto 0; border:0; border-radius:26px 26px 0 0; padding:0; background:var(--paper); color:var(--ink); box-shadow:0 -20px 60px rgba(21,23,34,.2); }
.sheet-dialog::backdrop{background:rgba(21,23,34,.55);backdrop-filter:blur(3px)}
.sheet-head { position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;background:var(--paper); }
.sheet-head strong { font-size:19px; }
.sheet-body { padding:8px 18px max(24px,env(safe-area-inset-bottom)); overflow:auto; }
.howto-list { list-style:none;padding:0;margin:0 0 15px;counter-reset:step; }
.howto-list li{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}.howto-list li::before{counter-increment:step;content:counter(step);width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:900}.howto-list b,.howto-list span{grid-column:2}.howto-list b{grid-row:1}.howto-list span{grid-row:2;color:var(--muted);font-size:12px;margin-top:-8px}
.rule-card{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:11px;border-radius:14px;margin-top:8px}.rule-card>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:white;font-weight:950}.rule-card p{margin:0;font-size:12px;line-height:1.55}.rule-card.good{background:rgba(25,135,95,.08)}.rule-card.good>span{background:var(--good)}.rule-card.bad{background:rgba(179,58,58,.07)}.rule-card.bad>span{background:var(--bad)}
.dictionary-item { padding:14px 0; border-bottom:1px solid var(--line); }
.dictionary-item:last-child{border-bottom:0}.dictionary-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dictionary-item strong{font-size:14px}.dictionary-item code{font-family:inherit;font-size:12px;font-weight:900;color:var(--muted);background:rgba(21,23,34,.06);padding:4px 7px;border-radius:999px}.dictionary-item p{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}.dictionary-item em{display:block;margin-top:5px;font-size:12px;font-style:normal;font-weight:750;color:var(--ink)}

@media (max-height: 760px) {
  .hero-prism { width:130px;height:130px;margin-top:5px }.prism-core{width:70px;height:70px}.home-copy{margin:10px auto 14px}.tagline{margin-top:9px}.event-card{min-height:125px;padding:16px}.option-card{min-height:76px}.round-result-burst{margin-top:25px}
}
@media (min-width: 700px) { body { background:#e8e2d6; } .app-shell { box-shadow:0 0 80px rgba(21,23,34,.14); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }