:root{--bg:#f7f7f5;--fg:#1d1d1f;--muted:#6b6b70;--card:#fff;--line:#e4e4e0;--accent:#6d28d9;--ok:#1f9d55;--ng:#e0453a;--r:14px}
[hidden]{display:none!important}
@media (prefers-color-scheme:dark){:root{--bg:#121214;--fg:#f2f2f2;--muted:#9a9aa0;--card:#1c1c20;--line:#2c2c32;--accent:#a78bfa}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;-webkit-text-size-adjust:100%}
main{max-width:560px;margin:0 auto;padding:20px 16px 8px;min-height:calc(100vh - 48px)}
.screen{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.logo{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;margin:12px 0 4px;text-align:center}
.logo span{color:var(--accent);margin-left:.25em}
.tagline{text-align:center;color:var(--muted);margin:0 0 20px;font-size:.92rem}
h2{font-size:1.3rem;margin:8px 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px}
.center{text-align:center}.muted{color:var(--muted)}.tiny{font-size:.75rem;margin:10px 0 0}.big{font-size:1.15rem;font-weight:700}
.label{font-size:.85rem;color:var(--muted);margin:0 0 8px}
.row{display:flex;gap:8px;align-items:center}.row.center{justify-content:center}.gap{gap:10px;flex-wrap:wrap;margin:8px 0 16px}
input{flex:1;min-width:0;font:inherit;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.btn{display:inline-block;font:inherit;font-weight:700;border:0;border-radius:10px;padding:12px 18px;background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;text-align:center}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.line{background:#06c755}
.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:.85rem;padding:0 4px}
.sns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 12px}
.level{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 6px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center}
.level b{font-size:1.1rem}.level small{font-size:.68rem;color:var(--muted)}
.level:hover,.level:focus-visible{border-color:var(--accent);outline:none}
.level:disabled{opacity:.45;cursor:not-allowed}
.hud{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;margin-top:6px}
.hud b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.combo{color:var(--accent);font-weight:800}
.timebar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 28px}
#g-bar{height:100%;width:100%;background:var(--accent);transition:width .1s linear}
#g-bar.low{background:var(--ng)}
.question{font-size:clamp(1.3rem,5.5vw,1.9rem);font-weight:700;text-align:center;min-height:5.5em;display:flex;align-items:center;justify-content:center;line-height:1.5;padding:0 6px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{font:inherit;font-size:clamp(1.3rem,6vw,1.8rem);font-weight:800;padding:26px 6px;border-radius:var(--r);border:2px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;font-variant-numeric:tabular-nums;touch-action:manipulation}
.choice:active{transform:scale(.98)}
.choice .nb{white-space:nowrap;display:inline-block}
.choice[data-len="l"]{font-size:clamp(1rem,4.6vw,1.35rem);padding:22px 6px}
.choice[data-len="xl"]{font-size:clamp(.88rem,3.9vw,1.15rem);padding:20px 4px;line-height:1.5}
.choice.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--card))}
.choice.ng{border-color:var(--ng);background:color-mix(in srgb,var(--ng) 15%,var(--card))}
.feedback{text-align:center;min-height:1.6em;color:var(--muted);font-size:.9rem;margin-top:16px}
.score-big{font-size:3rem;font-weight:800;margin:4px 0;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;font:inherit;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.tabs button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tabs.small button{padding:6px;font-size:.85rem}
.ranking{list-style:none;padding:0;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ranking li{display:grid;grid-template-columns:2.4em 1fr auto;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.ranking li:last-child{border-bottom:0}
.ranking .no{font-weight:800;color:var(--muted)}.ranking li:nth-child(-n+3) .no{color:var(--accent)}
.ranking .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking .sc{font-weight:800;font-variant-numeric:tabular-nums}
.ranking .empty{display:block;text-align:center;color:var(--muted)}
.rules{padding-left:1.2em;line-height:1.9;margin:0}
kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;font-size:.85em}
details summary{cursor:pointer;font-weight:700}
#r-miss{padding-left:1.2em;line-height:1.7;font-size:.9rem}
.ad{margin:18px 0;text-align:center;min-height:0}
.ad:empty{display:none}
footer{text-align:center;font-size:.75rem;padding:12px;color:var(--muted)}
footer a{color:inherit}

.tier{display:inline-block;font-size:.68rem;font-weight:800;padding:1px 7px;border-radius:99px;vertical-align:middle;background:var(--line);color:var(--fg)}
.tier.big{font-size:.8rem;padding:2px 9px}
.tier[data-tier="2"]{background:#dbe7ff;color:#1d4ed8}
.tier[data-tier="3"]{background:#ffe2c7;color:#b45309}
.tier[data-tier="4"]{background:#1d1d1f;color:#fff}
@media (prefers-color-scheme:dark){.tier[data-tier="4"]{background:#e0453a}}

/* 成績 */
.legend { display: flex; align-items: center; gap: .35rem; margin: .4rem 0 .6rem; flex-wrap: wrap; }
.sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-left: .4rem; }
.sw.ok, .sbar .ok { background: var(--ok); }
.sw.ng, .sbar .ng { background: var(--ng); }
.sw.no, .sbar .no { background: var(--un, #cfd2d8); }
@media (prefers-color-scheme:dark){:root{--un:#4a4a52}}
.stat-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .4rem; }
.sbar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--un, #cfd2d8); }
.sbar span { display: block; height: 100%; }
.stat-nums { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .45rem 0 .2rem; }
.n-ok b { color: var(--ok); } .n-ng b { color: var(--ng); }
.stat { margin-bottom: 12px; } .legend .sw:first-child { margin-left: 0; }

/* 同じ名前の人を見分ける印 */
.ntag{font-size:.78em;font-weight:500;color:var(--muted);margin-left:2px;letter-spacing:.02em}
.ranking li.me{background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:8px}

/* ---- 広めるための機能 ---- */
/* 今日の10問ボタン */
.daily-btn{width:100%;font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;margin:0 0 12px;border:0;border-radius:var(--r);cursor:pointer;color:#fff;background:linear-gradient(135deg,#6d28d9,#8b5cf6)}
.daily-btn b{font-size:1.2rem}.daily-btn small{font-size:.78rem;opacity:.92}
.d-dots{display:flex;gap:6px;justify-content:center;margin:8px 0 18px}
.d-dots span{width:14px;height:14px;border-radius:50%;background:var(--line)}
.d-dots .ok{background:var(--accent)}.d-dots .ng{background:var(--ng)}.d-dots .now{outline:2px solid var(--accent);outline-offset:2px}
.d-fb{line-height:1.6}.d-fb .okc{color:var(--ok)}.d-fb .ngc{color:var(--ng)}
.btn.wide{display:block;width:100%;margin:6px 0 14px}
.d-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px;font-size:.9rem;line-height:1.5}
.d-list li{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.d-list li.ok b{color:var(--ok)}.d-list li.ng b{color:var(--ng)}
.d-list .ans{font-size:.82rem;color:var(--muted)}
.rate{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:6px;padding:1px 6px;margin-left:6px}
/* 結果の称号とシェア */
.r-lead{margin:0;color:var(--muted);font-size:.85rem}
.r-title{font-size:clamp(2rem,10vw,2.8rem);font-weight:900;margin:2px 0 4px;letter-spacing:.02em;line-height:1.2}
.r-title[data-grade="SS"]{color:#d29b00}.r-title[data-grade="S"]{color:var(--ng)}
.share-box{margin:0 0 16px}
.share-card{display:block;width:min(100%,360px);margin:0 auto 12px;border-radius:14px;box-shadow:0 6px 24px #0002}
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-btns .btn:first-child,.share-btns .challenge{grid-column:1/-1}
.btn.line-g{color:#06c755;border-color:#06c755}
.btn.challenge{background:#e0453a;color:#fff}
/* 挑戦状 */
.ch{border:2px solid #e0453a}
.ch p{margin:4px 0}.ch-head{font-weight:800;color:#e0453a}.ch-score{font-size:1.8rem;font-weight:900}
.ch .btn{margin:8px 0 2px;min-width:60%}
.vs .vs-head{font-size:1.6rem;font-weight:900;margin:0 0 4px}
.vs.win{border:2px solid var(--ok)}.vs.lose{border:2px solid var(--ng)}
/* お知らせ */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1d1d1f;color:#fff;padding:10px 16px;border-radius:10px;font-size:.88rem;opacity:0;pointer-events:none;transition:.25s;z-index:9;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* 配信モード：文字を大きく、自分の名前を隠す */
body.stream main{max-width:760px}
body.stream .question{font-size:clamp(1.6rem,6vw,2.6rem)}
body.stream .choice{font-size:clamp(1.5rem,6.5vw,2.4rem);min-height:6em}
body.stream .hud{font-size:1.2rem}body.stream .hud b{font-size:1.6rem}
body.stream #login-done,body.stream .ranking li.me .nm,body.stream .ch-name{filter:blur(6px)}

/* ISSEN ロゴ */
.logo-mark{width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.3em}
/* ダークモードの塗りボタンは文字を濃くして読みやすく */
@media (prefers-color-scheme:dark){.btn:not(.ghost):not(.challenge):not(.line){color:#151517}}
.logo span{margin-left:0}
/* 広告：「PR」と表示して広告だと分かるように（ステマ規制）。表は中央に、ダークモードでも白地で */
.ad:not(:empty)::before{content:"PR";display:block;font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.ad table{margin:0 auto;max-width:100%;background:#fff;text-align:left}
.ad table a{color:#1a56c4}

/* ===================== issen-brain：脳トレ5種類の画面 ===================== */
:root{--c-red:#e53935;--c-blue:#1e63e9;--c-green:#169a50;--c-yellow:#e2a900;--c-purple:#8e44ec;--c-pink:#f0509a}
@media (prefers-color-scheme:dark){:root{--c-blue:#4f8cff;--c-green:#2fbf6c;--c-yellow:#f5c400;--c-purple:#a970ff}}
.genres{grid-template-columns:repeat(2,1fr)}
.genres .level:last-child{grid-column:1/-1}
.genres .level b{font-size:1.05rem}
.tabs button{padding:10px 2px;font-size:.88rem}
.stage{min-height:300px;display:flex;flex-direction:column;justify-content:flex-start;gap:14px}
.countdown{font-size:3.2rem;font-weight:900;text-align:center;margin:18vh 0 0}
.prompt{text-align:center;font-weight:800;font-size:1.05rem;margin:0;color:var(--muted);min-height:1.5em}
.expr{font-size:clamp(1.7rem,8vw,2.6rem);font-weight:800;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25em;min-height:3.4em;font-variant-numeric:tabular-nums;line-height:1.3}
.expr .blank{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;color:var(--accent)}
.expr.ineq{gap:.4em}.expr.ineq .side{white-space:nowrap}
.choices{display:grid;gap:10px}
.choices.n2{grid-template-columns:repeat(2,1fr)}.choices.n3{grid-template-columns:repeat(3,1fr)}
.choices.n4{grid-template-columns:repeat(4,1fr)}.choices.n5{grid-template-columns:repeat(5,1fr)}.choices.n6{grid-template-columns:repeat(6,1fr)}
.choice{padding:20px 4px;white-space:nowrap}
.choice[data-len="l"]{font-size:clamp(1.05rem,4.8vw,1.4rem);padding:18px 4px}
.choice[data-len="xl"]{font-size:clamp(.95rem,4.2vw,1.2rem);padding:16px 2px}
.choices.signs .choice{font-size:2rem;padding:16px 4px}
/* ストループ */
.stroop-ask{font-size:1.4rem;color:var(--fg)}
.stroop-word{font-size:clamp(3.6rem,20vw,5.5rem);font-weight:900;text-align:center;line-height:1.3;min-height:1.4em;letter-spacing:.04em}
#screen-game [data-genre="stroop"] .choice,#screen-daily [data-genre="stroop"] .choice{font-weight:900;font-size:clamp(1.2rem,5.4vw,1.6rem)}
/* 数字タップ */
.tapgrid{display:grid;gap:10px;margin-top:4px}
.tapgrid.n2{grid-template-columns:repeat(2,1fr)}.tapgrid.n3{grid-template-columns:repeat(3,1fr)}.tapgrid.n4{grid-template-columns:repeat(4,1fr)}
.tap{position:relative;font:inherit;font-weight:800;font-size:clamp(1.25rem,6vw,1.8rem);padding:22px 2px;border-radius:var(--r);border:2px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;font-variant-numeric:tabular-nums;touch-action:manipulation;white-space:nowrap}
.tapgrid.n4 .tap{font-size:clamp(1rem,4.6vw,1.4rem);padding:18px 2px}
.tap.done{background:color-mix(in srgb,var(--ok) 14%,var(--card));border-color:var(--ok);color:var(--muted)}
.tap.ng{background:color-mix(in srgb,var(--ng) 16%,var(--card));border-color:var(--ng)}
.tap[data-no]::after{content:attr(data-no);position:absolute;top:4px;right:7px;font-size:.7rem;font-weight:800;color:var(--ok)}
.tap.hint[data-no]::after{color:var(--ng)}
/* あみだくじ */
.amida{display:flex;flex-direction:column;gap:6px}
.amida-svg{width:100%;height:min(40vh,320px);display:block}
.amida-svg line{stroke:var(--fg);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.amida-svg .path{fill:none;stroke-width:6;vector-effect:non-scaling-stroke;stroke-linejoin:round;opacity:.85}
.amida-svg .okp{stroke:var(--ok)}
.amida-labels{display:grid;text-align:center;font-weight:800;color:var(--muted)}
.amida-labels .mark{color:var(--accent);font-size:1.15rem}
.amida-labels.n3,.amida-picks.n3{grid-template-columns:repeat(3,1fr)}.amida-labels.n4{grid-template-columns:repeat(4,1fr)}
.amida-labels.n5{grid-template-columns:repeat(5,1fr)}.amida-labels.n6{grid-template-columns:repeat(6,1fr)}
.amida-picks{gap:6px}.amida-picks .choice{padding:12px 0;font-size:1.3rem}
/* 今日の10問は答えのあとに解説が出るので、少し詰める */
#d-stage{min-height:0}
body.stream .expr{font-size:clamp(2rem,9vw,3.2rem)}
body.stream .stroop-word{font-size:clamp(4rem,22vw,7rem)}