:root{
  --bg:#E4EEF0;--surface:#F8FBFA;--ink:#1D2B3A;--sub:#55636F;--line:#BFCDD2;
  --hit:#2F7A57;--hit-ink:#FFFFFF;--near:#E2AE4A;--near-ink:#1D2B3A;--miss:#D3DCDF;--miss-ink:#1D2B3A;--red:#B23A48;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#14212A;--surface:#1C2C37;--ink:#E6EEF0;--sub:#A3B2BA;--line:#34495A;--hit:#3E9A6E;--hit-ink:#FFFFFF;--near:#E0B458;--near-ink:#14212A;--miss:#33454F;--miss-ink:#E6EEF0;--red:#E06A76}}
:root[data-theme="dark"]{--bg:#14212A;--surface:#1C2C37;--ink:#E6EEF0;--sub:#A3B2BA;--line:#34495A;--hit:#3E9A6E;--hit-ink:#FFFFFF;--near:#E0B458;--near-ink:#14212A;--miss:#33454F;--miss-ink:#E6EEF0;--red:#E06A76}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;font-size:1rem;line-height:1.6}
main{max-width:560px;margin:0 auto;padding:.9rem .9rem 2rem}

.top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.top h1{white-space:nowrap}
#practiceBtn{white-space:nowrap;flex-shrink:0}
@media (max-width:360px){h1{font-size:1.7rem}h1 .stamp{margin-left:.3em}}
h1{font-family:"Dela Gothic One","Hiragino Sans",sans-serif;font-weight:400;font-size:2rem;line-height:1.1;margin:0}
h1 .stamp{display:inline-block;font-size:.34em;vertical-align:middle;margin-left:.5em;border:2px solid var(--red);color:var(--red);padding:.1em .45em;border-radius:4px;transform:rotate(-4deg);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700}
.puzzle-no{margin:.15rem 0 0;font-size:.85rem;color:var(--sub);font-weight:500}
button,.btn{font:inherit;font-weight:700;padding:.65rem 1rem;border-radius:10px;border:2px solid var(--ink);background:var(--ink);color:var(--surface);cursor:pointer;text-decoration:none;display:inline-block;text-align:center;min-height:44px;touch-action:manipulation}
button.ghost,.btn.ghost{background:transparent;color:var(--ink)}
button.small{padding:.4rem .8rem;font-size:.85rem;min-height:40px}
button.wide{width:100%}
button.link{background:none;border:none;color:var(--sub);text-decoration:underline;font-weight:500;padding:.3rem 0;min-height:auto;font-size:.85rem}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-bottom:.7rem;font-size:.9rem}
details summary{cursor:pointer;font-weight:700}
details ul{margin:.4rem 0 0;padding-left:1.1rem}details li{margin:.2rem 0}
.legend{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin-top:.4rem;color:var(--sub);font-size:.8rem}
.chip{display:inline-block;width:.9em;height:.9em;border-radius:3px;vertical-align:-.1em;margin-right:.25em}
.hintbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.3rem .9rem;margin-bottom:.7rem}
.hintbox h2,.misses h2{font-size:.8rem;color:var(--sub);margin:.5rem 0 .1rem;font-weight:700}
#hints{list-style:none;margin:0;padding:0}
#hints li{padding:.55rem 0 .55rem .7rem;border-bottom:1px solid var(--line);border-left:3px solid var(--hit);margin-bottom:0}
#hints li:first-child{border-left-color:var(--red)}
#hints li:last-child{border-bottom:none}
#hints li .k{display:block;font-size:.72rem;font-weight:700;color:var(--hit)}
#hints li:first-child .k{color:var(--red)}
#hints li.new{background:color-mix(in srgb,var(--red) 8%,transparent);border-left-color:var(--red)}
#hints li.later{opacity:.7}
.tag{display:inline-block;font-size:.66rem;font-weight:700;background:var(--red);color:#fff;border-radius:4px;padding:0 .35em;margin-left:.4em;vertical-align:.1em}
.next{background:var(--surface);border-left:4px solid var(--near);border-radius:0 10px 10px 0;padding:.55rem .85rem;margin:0 0 .8rem;font-size:.95rem}
.next[hidden]{display:none}
.next .k{display:block;font-size:.72rem;font-weight:700;color:var(--sub)}
.misses ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:.3rem 0 .8rem;padding:0}
.misses li{background:var(--miss);color:var(--miss-ink);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;text-decoration:line-through;text-decoration-color:var(--red)}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--line);padding:.55rem .9rem;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 18px rgba(29,43,58,.08)}
.bar[hidden]{display:none}
.bar-inner{max-width:560px;margin:0 auto}
#barHints{display:none}
body.kb #barHints{display:block;max-height:var(--hintmax,40vh);overflow-y:auto;margin:0 0 .5rem;padding:.4rem .6rem;background:var(--bg);border-radius:10px;font-size:.85rem;line-height:1.5}
#barHints p{margin:0;padding:.25rem 0;border-bottom:1px solid var(--line)}
#barHints p:last-child{border-bottom:none}
#barHints p b{font-size:.68rem;color:var(--hit);margin-right:.35em}
#barHints p.first b{color:var(--red)}
#barHints p.new{font-weight:700}
#barHints .nx{color:var(--sub);font-size:.78rem}
body.kb .bar{padding-bottom:.55rem}
#suggest{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.35rem}
#suggest:empty{display:none}
#suggest button{background:var(--bg);color:var(--ink);border:1px solid var(--line);font-weight:500;padding:.35rem .8rem;min-height:44px;font-size:.95rem}
.msg{min-height:1.2em;margin:0 0 .3rem;color:var(--red);font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;gap:.45rem}
.row input{flex:1;min-width:0;font:inherit;font-size:16px;padding:.6rem .75rem;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.sub{display:flex;justify-content:flex-end;align-items:center;margin-top:.25rem}
.counter{font-size:.78rem;color:var(--sub)}
body.kb .sub{display:none}
.credit{margin:.7rem 0 .2rem;font-size:.74rem;color:var(--sub)}
.credit a{color:inherit}
#endspace{height:var(--barh,9rem)}
body:not(.playing) #endspace{height:1rem}
.result{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.2rem 0 1rem}
.result h2{font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:2rem;margin:0;line-height:1.2}
.outcome{margin:.1rem 0 .8rem;color:var(--sub)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.9rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .7rem;margin:0 0 .8rem}
.fact{border-left:4px solid var(--hit);padding:.1rem .5rem}
.fact b{display:block;font-size:1.1rem}.fact span{font-size:.76rem;color:var(--sub)}
.bw{background:var(--bg);border-radius:10px;padding:.6rem .8rem;margin:0 0 .9rem;font-size:.9rem}
.bw h3{margin:0 0 .3rem;font-size:.85rem}
.bw p{margin:.15rem 0}
.bw b{display:inline-block;min-width:5.5em;color:var(--sub);font-size:.78rem}
.trivia{margin:0 0 .9rem;padding-left:1.1rem;font-size:.9rem}
footer{margin-top:1.2rem;font-size:.74rem;color:var(--sub)}
footer a{color:inherit}
.credit p{margin:.35rem 0}
.credit small{font-size:.7rem}