:root{
  --paper:#faf6ee; --panel:#fff; --ink:#26324a; --sub:#6f6a5e; --line:#e2dbcc; --accent:#d97a26; --gold:#ffd77a;
  font-family:"Yu Gothic UI","Meiryo","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink)}
button{font:inherit;font-weight:600;color:var(--ink);background:var(--panel);border:1.5px solid #cbc4b5;border-radius:8px;padding:7px 14px;cursor:pointer;white-space:nowrap}
button:hover{background:#f4eee2}
button:disabled{opacity:.4;cursor:default;background:var(--panel)}
button:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
button.primary,button.on{background:var(--ink);border-color:var(--ink);color:#fff}
button.primary:hover,button.on:hover{background:#37456a}

/* 一覧 */
#home{max-width:1500px;margin:0 auto;padding:36px 32px 60px}
.hero h1{font-size:40px;margin:0 0 8px;letter-spacing:.02em}
.hero p{margin:4px 0;font-size:18px;color:var(--sub)}
.hero .howto{font-size:15px}
.hero b{color:var(--ink)}
.group h2{font-size:24px;margin:36px 0 4px}
.group h2 small{font-size:16px;font-weight:500;color:var(--sub);margin-left:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:14px}
.card{display:block;padding:0;text-align:left;overflow:hidden;font-weight:500;border-radius:10px}
.card:hover{border-color:var(--ink);background:var(--panel)}
.card .pic{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#f1ece1;font-size:44px;font-weight:700;color:#c4bcab}
.card canvas{width:100%;height:100%;display:block;image-rendering:pixelated;background:#fffdf8}
.card .meta{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;font-size:15px}
.card .meta span:last-child{color:var(--sub)}
.card.done .meta span:last-child{color:var(--accent);font-weight:700}
.narrow{display:none}
@media (max-width:900px){.narrow{display:block;margin-top:24px;padding:12px;background:#fff3d6;border-radius:8px}#home{padding:24px 16px}}

/* 遊ぶ画面 */
#game{position:fixed;inset:0;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1.5px solid var(--line);min-height:56px;font-size:15px}
.name{display:flex;flex-direction:column;line-height:1.2;min-width:96px}
.name b{font-size:17px}
.name span{font-size:13px;color:var(--sub)}
.time{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.prog{display:flex;align-items:center;gap:8px;color:var(--sub);font-variant-numeric:tabular-nums}
.prog span{min-width:42px;text-align:right}
.prog i{display:block;width:130px;height:10px;border-radius:5px;background:#ece5d8;overflow:hidden}
.prog u{display:block;height:100%;width:0;background:var(--accent)}
.spacer{flex:1}
.tools{display:flex}
.tools{gap:4px}
.tools button.sw{min-width:44px;padding:7px 0;text-align:center;border-color:transparent}
.tools button.sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.opt{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;font-size:14px}
.opt input{width:17px;height:17px;margin:0;accent-color:var(--ink);cursor:pointer}
#stage{position:relative;flex:1;min-height:0;overflow:hidden}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);padding:9px 18px;border-radius:8px;background:var(--ink);color:#fff;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:5}
#toast.show{opacity:1}
#clear{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--panel);border-top:1.5px solid var(--line)}
#clear div{flex:1;display:flex;align-items:baseline;gap:16px}
#clear b{font-size:24px}
#clear span{color:var(--sub);font-size:16px}
dialog{border:0;border-radius:12px;padding:22px 26px;color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(38,50,74,.4)}
dialog p{margin:0 0 16px;line-height:1.6}
dialog form{display:flex;justify-content:flex-end;gap:10px}
@media (max-width:1400px){.prog{display:none}.tools button.sw{min-width:36px}.opt{font-size:12px;gap:3px}.bar{gap:6px}.bar button{padding:6px 9px}.time{min-width:64px;font-size:22px}}
@media (max-width:1180px){.prog i{display:none}.bar{gap:6px;font-size:14px}.bar button{padding:6px 9px}}
#rmode{font-size:13px;font-weight:600;color:var(--sub);white-space:nowrap}
#rmode.off{color:#c0392b}
#clear{flex-wrap:wrap}
#sendBox{display:inline-flex;align-items:center;gap:8px}
#sendBox label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
#sendName{font:inherit;width:190px;padding:7px 10px;border:1.5px solid #cbc4b5;border-radius:8px}
#sendMsg{font-style:normal;font-size:14px;color:#c0392b}
#sendNote{font-size:14px;color:#c0392b}
dialog h2{margin:0 0 12px;font-size:22px}
dialog .small{font-size:14px;color:var(--sub);max-width:460px}
.set{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);cursor:pointer;max-width:460px;font-size:14px;color:var(--sub)}
.set input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.set b{display:block;font-size:16px;color:var(--ink)}
#settings form{margin-top:10px}
#rank{width:min(520px,92vw)}
.tabs2{display:flex;gap:6px;margin-bottom:10px}
.tabs2 button{flex:1}
#rankList{height:min(420px,56vh);overflow:auto;margin-bottom:12px;font-size:15px}
.rrow{display:grid;grid-template-columns:52px 1fr 68px 96px;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rrow span:last-child{color:var(--sub);font-size:13px}
.rrow.me{background:#fff3d6;font-weight:700}
.numlink{display:inline-block;padding:9px 18px;border-radius:8px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.numlink:hover{background:#37456a}