:root{--bg:#f7f7f5;--fg:#1d1d1f;--muted:#6b6b70;--card:#fff;--line:#e4e4e0;--accent:#0f7a4f;--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:#3ccf8a}}
*{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,#0b5d3c,#16935f)}
.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-mahjong：麻雀の画面 ===================== */
.tier[data-tier="3"]{background:#1d1d1f;color:#fff}
@media (prefers-color-scheme:dark){.tier[data-tier="3"]{background:#e0453a}}
.sec-h{font-weight:800;margin:14px 0 8px;font-size:.95rem}.sec-h small{font-weight:500;color:var(--muted);font-size:.75rem;margin-left:6px}
.genres{grid-template-columns:repeat(3,1fr);gap:8px}
.genres .level{padding:16px 4px}.genres .level b{font-size:.98rem}.genres .level small{font-size:.64rem;text-align:center}
.practice-btn{width:100%;font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;margin:4px 0 4px;border:2px solid var(--accent);border-radius:var(--r);cursor:pointer;color:var(--fg);background:var(--card)}
.practice-btn b{font-size:1.1rem;color:var(--accent)}.practice-btn small{font-size:.74rem;color:var(--muted)}
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 6px}
.learn-btn{font:inherit;font-weight:700;font-size:.9rem;padding:12px 4px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.learn-btn b{font-size:1.5rem}
.tabs button{padding:10px 2px;font-size:.88rem}
.stage{min-height:300px;display:flex;flex-direction:column;justify-content:flex-start;gap:12px}
.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(--fg);min-height:1.5em}
.sub{text-align:center;margin:-8px 0 0}

/* 牌 */
.hai{display:block;width:100%;height:auto;aspect-ratio:3/4;user-select:none;-webkit-user-select:none}
.hai.mini{width:22px;display:inline-block;vertical-align:middle}
.hai-row{display:flex;gap:1px;align-items:flex-end;justify-content:center}
.hai-row>.hai{width:calc((100% - 13px)/14);max-width:40px}
.hai-row.tiny-row>.hai,.hai-row.tiny-row .hai{width:18px}
.hai-row .hai-group{display:inline-flex;gap:1px;margin-right:5px}
.hai-row .hai-group:last-child{margin-right:0}
.ex-row{justify-content:flex-start;flex-wrap:wrap;row-gap:6px;margin:8px 0}
.ex-row .hai{width:26px}.ex-row.small .hai{width:22px}
/* 手牌（問題） */
.hand{margin:4px 0}
.hand-win{display:flex;align-items:flex-start;justify-content:center;gap:0 6px;--tw:calc((100% - 6px * 4) / var(--n))}
.hand-win .part{display:flex;flex-wrap:wrap;gap:0;position:relative}
.hand-win .part .hai{width:min(34px,calc((min(560px,100vw) - 56px) / var(--n)))}
.hand-win small{position:absolute;left:0;right:0;top:100%;text-align:center;font-size:.64rem;font-weight:800;color:var(--muted);white-space:nowrap}
.hand-win .win-tile .hai{outline:2px solid #e0a100;outline-offset:1px;border-radius:4px}
.hand-win{margin-bottom:16px}
.sit{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:3px;font-size:.82rem;font-weight:800;padding:4px 10px;border-radius:99px;background:var(--line);color:var(--fg)}
.chip.oya{background:#e0453a;color:#fff}.chip.tsumo{background:#1d4f9c;color:#fff}.chip.ron{background:#c27c00;color:#fff}
.chip.riichi{background:#1d1d1f;color:#fff}.chip.fu{background:var(--accent);color:#fff}
.chip.dora .hai{width:20px}
.table-ask{font-size:clamp(1.5rem,7vw,2.1rem);font-weight:900;text-align:center;padding:26px 6px;line-height:1.4}
/* 選択肢 */
.choices{display:grid;gap:10px}
.choices.n2{grid-template-columns:repeat(2,1fr)}
.choice{padding:18px 4px;white-space:nowrap;font-size:clamp(1.1rem,5vw,1.45rem)}
.choice[data-len="l"]{font-size:clamp(.95rem,4.2vw,1.2rem)}
.choices.wait .choice{padding:10px 4px;display:flex;align-items:center;justify-content:center;min-height:74px}
.choices.wait .choice.one .hai{width:44px}
.choices.wait .choice.set .hai-row{flex-wrap:wrap;gap:2px}
.choices.wait .choice.set .hai{width:24px}
/* 何切る：牌をタップ */
.hand.nani{gap:1px;margin-top:10px}
.hai-btn{flex:1 1 0;min-width:0;max-width:44px;padding:0;border:0;background:none;cursor:pointer;border-radius:5px;touch-action:manipulation;transition:transform .08s}
.hai-btn:hover:not(:disabled){transform:translateY(-6px)}
.hai-btn:active:not(:disabled){transform:translateY(-8px)}
.hai-btn.ok{transform:translateY(-8px);outline:3px solid var(--ok);outline-offset:1px}
.hai-btn.ng{transform:translateY(-8px);outline:3px solid var(--ng);outline-offset:1px}
.hai-btn:disabled{cursor:default}
/* 解説 */
.explain,.picks{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 12px;font-size:.9rem}
.ex-h{font-weight:800;margin:6px 0 6px;font-size:.88rem}
.ex-ans{font-weight:900;font-size:1.1rem;margin:10px 0 0}
.yaku-table,.nani-table,.mini-table{width:100%;border-collapse:collapse;font-size:.88rem}
.yaku-table td,.nani-table td,.mini-table td{padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.yaku-table .num,.nani-table .num{text-align:right;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.yaku-table .sum td{font-weight:900;border-bottom:0}
.nani-table tr.best{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.nani-table .st{white-space:nowrap;font-weight:700}
.nani-table .waits .hai-row{justify-content:flex-start;flex-wrap:wrap}
.wait-line{display:flex;align-items:center;gap:6px;margin:6px 0;flex-wrap:wrap}
.wait-line .arrow{color:var(--muted)}
.wait-line .hai-row{justify-content:flex-start;flex-wrap:wrap}
/* みんなの選択 */
.pick{display:grid;grid-template-columns:24px 1fr 3em auto;align-items:center;gap:8px;margin:5px 0}
.pbar{height:14px;background:var(--line);border-radius:7px;overflow:hidden}
.pfill{display:block;height:100%;background:#9aa3ad;border-radius:7px}
.pick.right .pfill{background:var(--ok)}.pick.mine:not(.right) .pfill{background:var(--ng)}
.pct{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.tag{font-size:.68rem;font-weight:800;padding:1px 6px;border-radius:6px;color:#fff}
.tag.ok{background:var(--ok)}.tag.ng{background:var(--ng)}
/* ふりかえり */
.miss-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:10px}
.miss-list li{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.miss-list details summary{font-size:.82rem;color:var(--accent);margin-top:6px}
.review{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.review .hai-row{justify-content:flex-start;flex-wrap:wrap}
.review .ans{font-size:.82rem;color:var(--muted)}
.d-list li{display:flex;flex-direction:column;gap:4px}
/* 学ぶ */
.lesson summary{font-size:1rem}
.lesson p,.lesson li{line-height:1.75;font-size:.92rem}
.lesson ul{padding-left:1.2em}
.note{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:10px;padding:8px 10px;font-size:.86rem;line-height:1.7}
.mini-table{margin:6px 0}
.yaku-group{margin:18px 0 8px;font-size:1.05rem;border-left:5px solid var(--accent);padding-left:8px}
.yaku{padding:12px 14px;margin-bottom:10px}
.yaku-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.yaku-head b{font-size:1.05rem}.yaku-head .yomi{font-size:.75rem;color:var(--muted)}
.yaku-head .han{margin-left:auto;display:flex;gap:6px;font-size:.75rem;font-weight:800}
.yaku-head .han span{background:var(--line);border-radius:6px;padding:1px 6px}
.yaku-head .han span.no{opacity:.55}
.yaku .desc{margin:6px 0 0;font-size:.88rem;line-height:1.6}
.score-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:6px 0 14px;font-variant-numeric:tabular-nums;background:var(--card)}
.score-table th,.score-table td{border:1px solid var(--line);padding:4px 3px;text-align:center}
.score-table th{background:color-mix(in srgb,var(--accent) 12%,var(--card));white-space:nowrap}
.score-table td span{display:block;line-height:1.35}
.score-table td .tsumo{color:var(--muted);font-size:.72rem}
.score-table td.mangan{background:color-mix(in srgb,#e0a100 18%,var(--card))}
.score-table.limit th small{display:block;font-weight:500;font-size:.66rem;color:var(--muted)}
.score-table.limit td{font-weight:800}
body.stream .table-ask{font-size:clamp(1.8rem,8vw,2.8rem)}
@media (min-width:520px){.hai.mini{width:26px}}
#p-stage,#d-stage{min-height:0}
.choices.wait .choice.set .hai{width:21px}
.nani-table tr.back{opacity:.6}