:root{--bg:#121410;--ink:#e8e4d4;--dim:#6f705f;--line:#2c2e26;--acc:#f2b233;--bad:#e5553b;--hit:#9fd36a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0c09;color:var(--ink);font-family:"M PLUS 1 Code",ui-monospace,monospace}
.shell-stage{background:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}

.scr{position:absolute;inset:0;padding:30px 44px;display:none}
.scr.on{display:block}
#hid{position:absolute;left:0;bottom:0;width:2px;height:2px;opacity:0;border:0;padding:0;font-size:16px}

/* ボタンは四角・太い線。主なものだけ琥珀で塗る */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--ink);background:transparent;padding:10px 18px;font-size:20px;min-height:52px}
.btn:hover{background:#1c1e18}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:700}
.btn.pri:hover{background:#ffc552}
.btn kbd,.kbd{font:inherit;font-size:14px;border:1px solid currentColor;padding:0 5px;opacity:.75}
.lnk{background:none;border:0;padding:6px 0;font-size:18px;color:var(--dim);text-decoration:underline;text-underline-offset:4px}
.lnk:hover{color:var(--ink)}
h2{font-size:15px;color:var(--dim);font-weight:400;letter-spacing:.12em;margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}

/* タイトル */
#s-title.on{display:grid;grid-template-columns:1fr 340px;grid-template-rows:auto 1fr;column-gap:44px}
.t-head{grid-column:1/-1;display:flex;align-items:baseline;gap:22px;border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:22px}
.t-head h1{margin:0;font-size:44px;letter-spacing:.04em}
.t-head p{margin:0;color:var(--dim);font-size:17px}
.t-start{border:2px solid var(--line);padding:22px 28px 24px;cursor:text;position:relative}
.t-start .lbl{color:var(--acc);font-size:18px;letter-spacing:.1em}
.t-kana{font-size:92px;font-weight:700;line-height:1.1;margin-top:6px}
.t-kana i{font-style:normal;color:var(--dim)}
.t-roma{font-size:40px;letter-spacing:.08em;color:var(--dim)}
.t-roma .ok{color:var(--hit)}
.t-roma::after{content:"";display:inline-block;width:3px;height:38px;background:var(--acc);vertical-align:-6px;margin-left:4px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.t-start .alt{margin-top:16px;display:flex;align-items:center;gap:16px;color:var(--dim);font-size:16px}
.t-rules{list-style:none;margin:22px 0 0;padding:0;font-size:19px;line-height:1.75}
.t-rules li{display:flex;gap:14px}
.t-rules b{color:var(--acc);width:1.2em;flex:none}
.t-rules em{font-style:normal;color:var(--bad)}
.t-side{display:flex;flex-direction:column;gap:22px}
.t-code{display:flex;gap:8px}
.t-code input{flex:1;min-width:0;font:inherit;font-size:24px;letter-spacing:.2em;padding:8px 12px;background:#1b1d17;color:var(--ink);border:2px solid var(--line);outline:none}
.t-code input:focus{border-color:var(--acc)}
.t-note{font-size:14px;color:var(--dim);margin:6px 0 0}
.t-count{font-size:17px;color:var(--dim)}
.t-count b{color:var(--ink);font-weight:700}
.t-links{display:flex;gap:22px}
.t-best{font-size:16px;color:var(--dim)}
.t-best b{color:var(--ink)}
.t-side .btn{width:100%}

/* だれかと遊ぶ */
#s-match.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.m-big{font-size:40px;font-weight:700}
.m-dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.m-sub{font-size:22px;color:var(--dim)}
.m-sub b{color:var(--acc)}

/* 結果 */
#s-result.on{display:grid;grid-template-columns:1fr 400px;column-gap:44px}
.r-head{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--line);padding-bottom:6px}
.r-rank{font-size:110px;font-weight:700;line-height:1;color:var(--acc)}
.r-of{font-size:28px;color:var(--dim)}
.r-why{margin-left:auto;font-size:20px;color:var(--dim)}
.r-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0}
.r-stats div{border-left:2px solid var(--line);padding-left:10px}
.r-stats span{display:block;font-size:14px;color:var(--dim)}
.r-stats b{font-size:34px}
.r-order{list-style:none;margin:0;padding:0;font-size:19px}
.r-order li{display:grid;grid-template-columns:48px 1fr 100px;padding:6px 0;border-bottom:1px solid var(--line)}
.r-order li.me{color:var(--acc)}
.r-order li span:last-child{text-align:right;color:var(--dim)}
.r-side{display:flex;flex-direction:column;gap:18px}
.r-net{font-size:17px;color:var(--dim);min-height:150px}
.r-net b{color:var(--ink)}
.r-net ol{margin:8px 0 0;padding:0;list-style:none}
.r-net li{display:grid;grid-template-columns:40px 1fr 70px;padding:3px 0}
.r-net li.me{color:var(--acc)}
.r-net li span:last-child{text-align:right}
.r-btns{display:flex;flex-direction:column;gap:10px;margin-top:auto}

/* 共有ボタンを作品の形に */
.shell-share button{border-radius:0;border:2px solid var(--ink);font-size:16px;padding:8px 14px;background:transparent;color:var(--ink)}
.shell-share button:hover{background:#1c1e18}
.shell-share .shell-done{color:var(--hit)}

/* 記録・設定 */
#s-rec.on,#s-set.on{display:flex;flex-direction:column}
.p-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:20px}
.p-head h1{margin:0;font-size:34px}
.p-body{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:44px;min-height:0}
.rec-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.rec-nums div{border-left:2px solid var(--line);padding-left:10px}
.rec-nums span{display:block;font-size:14px;color:var(--dim)}
.rec-nums b{font-size:36px}
.rec-list{list-style:none;margin:0;padding:0;font-size:17px}
.rec-list li{display:grid;grid-template-columns:90px 60px 1fr 80px;padding:5px 0;border-bottom:1px solid var(--line)}
.rec-list li span:last-child{text-align:right}
.tabs{display:flex;gap:0;margin-bottom:10px}
.tabs button{border:2px solid var(--line);background:none;padding:6px 16px;font-size:16px;color:var(--dim)}
.tabs button.on{border-color:var(--acc);color:var(--acc)}
.set-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:19px}
.set-row > span{width:200px;flex:none;color:var(--dim)}
.set-row input{font:inherit;font-size:20px;padding:8px 10px;background:#1b1d17;color:var(--ink);border:2px solid var(--line);outline:none;width:260px}
.set-row input:focus{border-color:var(--acc)}
.seg{display:flex}
.seg button{border:2px solid var(--line);background:none;padding:8px 16px;font-size:18px;color:var(--dim);margin-right:-2px}
.seg button.on{border-color:var(--acc);color:var(--acc);position:relative}
.set-help{font-size:15px;color:var(--dim);line-height:1.7;margin-top:16px}

/* 縦の枠（720×1080） */
.pt .scr{padding:28px 32px}
.pt #s-title.on{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr}
.pt .t-head{flex-direction:column;gap:4px}
.pt .t-side{margin-top:18px;gap:14px}
.pt .t-kana{font-size:72px}
.pt .rec-list li:nth-child(n+6){display:none}
.pt #s-result.on{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.pt .r-side{margin-top:18px}
.pt .r-stats{grid-template-columns:repeat(3,1fr)}
.pt .p-body{grid-template-columns:1fr;gap:24px}