/* 打鍵まわり */
/* ---- typing ---- */
#modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:16px}
#modes button{background:var(--sur);border:1px solid transparent;border-radius:10px;color:var(--dim);font-weight:700;font-size:13.5px;padding:12px 14px;cursor:pointer;text-align:left;transition:border-color .15s}
#modes button b{display:block;color:var(--tx);font-size:14.5px}
#modes button span{font-size:12px;font-weight:400}
#modes button[aria-pressed="true"]{border-color:var(--irm);color:var(--tx)}
#stage{position:relative;min-height:330px;padding-top:8px}
#tbar{height:6px;background:var(--sur2);border-radius:3px;overflow:hidden;margin-bottom:16px}
#tbarf{height:100%;width:100%;background:var(--ok);transition:background .2s}
#tbarf.warn{background:var(--bad)}
#tbarf.plus{background:var(--good)}
#hud{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;margin-bottom:22px;font-size:11.5px;color:var(--dim);position:relative}
#hud b{display:block;font-size:25px;font-weight:800;color:var(--tx);line-height:1.1}
#combow b{color:var(--irm)}
#brkw b{color:var(--bad)}
#plus{position:absolute;left:0;top:-4px;color:var(--good);font-weight:800;font-size:17px;pointer-events:none;opacity:0}
#plus.on{animation:up .9s ease-out}
@keyframes up{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
#sent{font-size:clamp(19px,5vw,30px);font-weight:800;line-height:1.85;letter-spacing:-.03em;min-height:2.1em}
#sent i{font-style:normal;padding:0 3px;display:inline-block;border-radius:4px}
#sent i.now{background:var(--tx);color:var(--bg)}
#sent i.done{color:var(--dim)}
#sent i.brk{color:var(--bad)}
#sent i.brk.now{background:var(--bad);color:#fff}
#sent i.dead{color:var(--faint)}
#roma{font-family:var(--num);font-size:clamp(19px,5.4vw,28px);letter-spacing:.08em;margin-top:16px;word-break:break-all;min-height:1.5em}
#roma u{text-decoration:none;color:var(--faint)}
#roma u.hit{color:var(--ok)}
#roma u.cur{color:var(--tx);box-shadow:0 3px 0 var(--irm)}
#nextline{color:var(--faint);font-size:13.5px;margin-top:20px;min-height:1.5em}
#warn{color:var(--bad);font-size:13px;font-weight:700;min-height:1.4em;margin-top:8px}
#tyin{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none;background:transparent;color:transparent}
#count{position:absolute;inset:0;display:grid;place-items:center;background:rgba(21,25,34,.96);border-radius:12px;font-size:72px;font-weight:800;letter-spacing:-.05em;z-index:5}
#count small{display:block;font-size:14px;color:var(--dim);font-weight:700;letter-spacing:0;text-align:center;margin-top:8px}

/* ---- overlay ---- */
#ov{position:fixed;inset:0;z-index:80;background:rgba(6,8,12,.78);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow:auto}
#ovbox{background:var(--sur);border:1px solid var(--line2);border-radius:16px;max-width:520px;width:100%;padding:24px;animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.96) translateY(8px);opacity:0}to{transform:none;opacity:1}}
#ovmode{color:var(--dim);font-size:12px;font-weight:700}
#ovgain{background:var(--sur2);border:1px solid var(--line2);border-radius:11px;
 padding:11px 13px;margin:12px 0 4px;text-align:left}
#ovgain .ovgt{font-size:10.5px;font-weight:900;color:var(--irm);letter-spacing:.08em;margin-bottom:6px}
#ovgain .ovgi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 font-size:12.5px;font-weight:700;color:var(--dim);padding:2px 0}
#ovgain .ovgi b{color:var(--tx);font-size:14px;font-weight:900;text-align:right}
#ovgain .ovnext{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
 font-size:11.5px;line-height:1.7;color:var(--faint)}
#ovgain .ovnext b{color:var(--irm)}
#ovverdict{font-size:29px;font-weight:800;letter-spacing:-.035em;line-height:1.3;margin:2px 0 4px}
#ovbig{font-size:64px;font-weight:800;letter-spacing:-.05em;line-height:1}
#ovstats{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 6px}
#ovstats span{display:block;color:var(--dim);font-size:11px}
#ovstats b{font-size:21px;font-weight:800;letter-spacing:-.03em}
#ovmarks{font-size:19px;letter-spacing:3px;margin:6px 0}
#ovlog{background:var(--bg);border-radius:9px;padding:13px;font-size:15px;line-height:2.05;margin:12px 0}
#ovlog em{font-style:normal;color:var(--bad);font-weight:800}
#ovcard{width:100%;border-radius:10px;display:block;margin-top:12px;border:1px solid var(--line)}
#share{display:none;border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
#share.on{display:block}
#share p{color:var(--dim);font-size:12px;margin:0 0 8px}

#cv{background:#fff;border-radius:10px;touch-action:none;width:100%;max-width:360px;height:auto;display:block;cursor:crosshair}
.sw{width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0}
.sw[aria-pressed="true"]{border-color:var(--tx)}
input[type=range]{accent-color:var(--irm);width:150px}
input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--line2);border-radius:7px;background:none;cursor:pointer}
.txt{background:var(--bg);border:1px solid var(--line2);border-radius:8px;color:var(--tx);font-family:inherit;font-size:13.5px;padding:9px 11px}
.brush{padding:7px 13px;border-radius:7px;border:1px solid var(--line2);background:var(--sur2);color:var(--dim);cursor:pointer;font-size:12.5px;font-weight:700}
.brush[aria-pressed="true"]{color:var(--tx);border-color:var(--irm)}
.brush.lock{opacity:.45}
#egrid{display:grid;grid-template-columns:repeat(16,1fr);width:100%;max-width:288px;aspect-ratio:1;background:#fff;border-radius:10px;overflow:hidden;touch-action:none}
#egrid div{background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07)}
.mine{display:flex;flex-wrap:wrap;gap:10px}
.mine figure{margin:0;text-align:center;width:58px}
.mine img{width:46px;height:46px;image-rendering:pixelated;background:#fff;border-radius:8px}
.mine figcaption{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.post{background:var(--sur);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;border:1px solid transparent;color:inherit;padding:0;transition:border-color .15s}
.post:hover{border-color:var(--line2)}
.post img{width:100%;display:block;background:#fff}
.post .body{padding:13px;font-size:14px;line-height:1.9;min-height:100px}
/* カードの下の行：種類・題名・@名前・時刻・♥・💬・🔁 と増えたので、
   折り返さないと細い画面で文字が縦に割れる。題名だけ伸ばし、他は縮ませない。 */
.post .meta{padding:8px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
 display:flex;gap:5px 9px;flex-wrap:wrap;align-items:center}
.post .meta>span{flex:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.post .meta>span:nth-child(2){flex:1 1 auto;min-width:0}
#detail img.big{width:100%;max-width:360px;background:#fff;border-radius:10px;display:block}
.cmt{border-top:1px solid var(--line);padding:10px 0;font-size:15px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cmt img{width:22px;height:22px;image-rendering:pixelated}
#tiles{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;max-height:160px;overflow:auto}
.cats{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:10px 0 0;padding-bottom:2px}
.cats::-webkit-scrollbar{display:none}
.ct{flex:0 0 auto;background:none;border:0;border-radius:7px;color:var(--dim);font-size:12.5px;font-weight:700;padding:6px 11px;cursor:pointer}
.ct[aria-pressed="true"]{background:var(--sur2);color:var(--tx)}
.tls{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;max-height:150px;overflow:auto}
.dft{background:var(--bg);border-radius:8px;padding:11px;min-height:48px;font-size:16px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;line-height:1.6}
.dft img{width:22px;height:22px;image-rendering:pixelated}
.dft:empty::before{content:"タイルを押して文を組み立てる";color:var(--dim);font-size:13.5px}
#chatlog{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow:auto;padding-right:4px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .who{flex:0 0 auto;font-size:11.5px;color:var(--dim);width:88px;text-align:right;padding-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .bub{background:var(--sur2);border-radius:10px;padding:8px 13px;font-size:16px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;line-height:1.5}
.msg.me .bub{background:var(--mine);box-shadow:inset 0 0 0 1px var(--line2)}
.msg .bub img{width:22px;height:22px;image-rendering:pixelated}
.jack{border-color:var(--irm)!important;background:var(--irm)!important;color:#181203!important}
.tk{background:var(--sur2);border:1px solid var(--line2);border-radius:7px;color:var(--tx);font-size:13.5px;padding:5px 10px;cursor:pointer}
.tk:hover{border-color:var(--ok)}
.tk img{width:20px;height:20px;image-rendering:pixelated;display:block}
#draft{background:var(--bg);border-radius:8px;padding:11px;min-height:46px;font-size:16px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
#draft img{width:22px;height:22px;image-rendering:pixelated}
#draft:empty::before{content:"単語か絵文字をえらぶ";color:var(--dim);font-size:13.5px}
#rankv{font-size:30px;font-weight:800;letter-spacing:-.03em}
#titles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.tt{border-radius:9px;padding:11px 13px;background:var(--sur2);font-size:12px;color:var(--dim)}
.tt.off{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.tt b{display:block;font-size:13.5px;color:var(--tx);font-weight:700}
.tt.off b{color:var(--faint)}
.tt s{text-decoration:none;font-size:10.5px;display:block;margin-bottom:2px;opacity:.75}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:16px}
.stats span{display:block;color:var(--dim);font-size:11.5px}
.stats b{font-size:22px;font-weight:800;letter-spacing:-.03em}

/* ═══ タイピング v2（2026-09-23）═══ 段位・苦手キー・キーボードの道しるべ */
#tyrankb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 12px;font-size:12.5px;color:var(--dim)}
#tyrankb b{font-size:16px;font-weight:900;letter-spacing:.06em}
#tyrankb span{font-size:11.5px;color:var(--faint)}
/* キーボードの道しるべ：次に打つキーが光り、押し間違えたキーが赤く跳ねる */
#tykbwrap{margin:10px 0 2px}
#tykb{display:flex;flex-direction:column;gap:4px;align-items:center;user-select:none}
#tykb.off{display:none}
#tykb .kr{display:flex;gap:4px}
#tykb .kr.r1{margin-left:12px}#tykb .kr.r2{margin-left:22px}#tykb .kr.r3{margin-left:40px}
#tykb kbd{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line2);
  background:var(--sur2);color:var(--dim);font:600 11.5px/1 var(--mono,ui-monospace,monospace);transition:background .12s,color .12s,transform .12s}
#tykb kbd.next{background:var(--irm);color:#181203;border-color:var(--irm);transform:translateY(-2px) scale(1.12);box-shadow:0 3px 10px rgba(255,194,71,.4)}
#tykb kbd.bad{background:#ff6b6b;color:#fff;border-color:#ff6b6b;animation:tykbbad .4s}
@keyframes tykbbad{0%{transform:scale(1.25)}40%{transform:scale(.94) rotate(-4deg)}100%{transform:scale(1)}}
/* 結果：段位と苦手キー */
#ovrank{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;margin:2px 0 6px}
#ovrank .rk{font-size:26px;font-weight:900;letter-spacing:.08em}
#ovrank .rkb{font-size:11.5px;color:var(--faint)}
#ovrank .rknx{font-size:11.5px;color:var(--dim)}
#ovweak{margin:8px 0 2px}
#ovweak .wkrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
#ovweak .wkrow span{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);
  background:var(--sur2);border:1px solid var(--line2);border-radius:999px;padding:3px 10px}
#ovweak .wkrow kbd{background:#ff6b6b;color:#fff;border-radius:5px;padding:1px 6px;font:700 11px/1.5 var(--mono,ui-monospace,monospace)}
#ovweak .wkhint{font-size:11px;color:var(--faint);text-align:center;margin:5px 0 0}
@media(max-width:560px){
  #tykb kbd{width:22px;height:22px;font-size:10.5px}
  #tykb .kr{gap:3px}#tykb .kr.r3{margin-left:30px}
  #tyrankb b{font-size:15px}#ovrank .rk{font-size:22px}
}

/* ═══ 遊び方の 3 つの構え（2026-09-23）═══ 規則は変えない。見た目と演出だけを変える */
#tymoodwrap{margin:0 0 12px}
#tymood{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#tymood button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line2);background:var(--sur);color:var(--tx);font:inherit;cursor:pointer;text-align:left}
#tymood button b{font-size:13.5px;font-weight:800}
#tymood button span{font-size:11px;color:var(--dim)}
#tymood button[aria-pressed="true"]{border-color:var(--irm);background:linear-gradient(180deg,rgba(255,194,71,.16),transparent)}
#tymood button:hover{border-color:var(--irm)}
/* ── きそう：文字の見やすさが最優先。飾りを消し、字を大きく、明暗差を上げる ── */
body.tym-sport #tyhero,body.tym-sport #tylede,body.tym-sport #tyrankb{display:none}
body.tym-sport #sent{font-size:30px;line-height:2.0;letter-spacing:.04em;color:#fff}
body.tym-sport #sent i.done{opacity:.28}
body.tym-sport #roma{font-size:22px;letter-spacing:.14em;font-weight:700}
body.tym-sport #roma u.cur{background:var(--irm);color:#151007;border-radius:4px;box-shadow:0 0 0 3px rgba(255,194,71,.35)}
body.tym-sport #stage,body.tym-sport #beltstage{background:var(--sur);box-shadow:none}
body.tym-sport .cart .cjp{font-size:19px;font-weight:800}
body.tym-sport .cart .croma{font-size:15px;letter-spacing:.1em}
body.tym-sport #beltcourse,body.tym-sport #ovmarks,body.tym-sport #ovlog{display:none}
/* ── たのしむ：全部乗せ（既定）── */
body.tym-fun #sent{font-size:23px}
/* ── きらく：静かに。演出は控えめ、字はやや大きめ ── */
body.tym-easy #sent{font-size:25px;line-height:1.95}
body.tym-easy #roma{font-size:18px;letter-spacing:.1em}
body.tym-easy #tyhero{opacity:.75}
@media(max-width:560px){
  #tymood{grid-template-columns:1fr;gap:6px}
  #tymood button{flex-direction:row;align-items:baseline;gap:8px}
  body.tym-sport #sent{font-size:23px}body.tym-sport #roma{font-size:17px}
  body.tym-easy #sent{font-size:21px}
}