/* ひとりのページだけで使う画面（タイトル・だれかと遊ぶ・記録）。調合台と結果は ui.js が持つ */
html,body{margin:0;height:100%;background:#d9d1c4;overscroll-behavior:none}
.shell-stage.ic{background:var(--paper);box-shadow:0 0 0 2px #24211d}
.ic .big{height:84px;font-size:28px;font-weight:800;letter-spacing:.08em;width:100%}
.ic .line{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:4px 0}

/* タイトル */
.tt.land{grid-template-columns:440px 1fr;gap:44px}
.tt.port{grid-template-rows:360px 1fr;gap:24px}
.tt-sw{display:flex;flex-direction:column;gap:10px;min-height:0}
.tt-plate{flex:1;display:flex;border:2px solid var(--ink)}
.tt-plate>div{flex:1;position:relative}
.tt-plate i{position:absolute;left:10px;top:10px;font-style:normal;font-size:16px;background:var(--paper);border:1px solid var(--ink);padding:2px 8px}
.tt-cap{display:flex;justify-content:space-between;font-size:18px}
.tt-cap b{font-size:22px}
.tt-main{display:flex;flex-direction:column;gap:16px;min-height:0}
.tt h1{font-size:58px;font-weight:800;letter-spacing:.1em;line-height:1.1;border-bottom:3px solid var(--ink);padding-bottom:8px}
.tt.port h1{font-size:54px}
.tt-lead{font-size:19px;line-height:1.6}
.tt-lead b{color:var(--shu)}
.tt-done{font-size:17px;margin-top:8px}
.tt-sub{display:flex;gap:10px}
.tt-sub button{flex:1;height:56px;font-size:19px;font-weight:600}
.tt-party{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.tt-h{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;font-weight:800;border-bottom:2px solid var(--ink);padding-bottom:4px}
.tt-h .mono{font-size:15px;font-weight:500;color:var(--sub)}
.tt-room{display:grid;grid-template-columns:auto 1fr 100px;gap:10px;align-items:center}
.tt-room label{font-size:18px;font-weight:600}
.tt-room input{height:52px;border:2px solid var(--ink);border-radius:0;background:#f8f4ec;font:500 24px "IBM Plex Mono",monospace;padding:0 12px;width:100%;color:var(--ink);letter-spacing:.15em}
.tt-room input::placeholder{font:600 15px "Shippori Mincho",serif;letter-spacing:0;color:var(--sub)}
.tt-room button{height:52px;font-size:19px;font-weight:700}
.tt-find{display:flex;gap:14px;align-items:center}
.tt-find button{height:52px;padding:0 24px;font-size:19px;font-weight:700}
.tt-find span{font-size:15px;color:var(--sub)}

/* だれかと遊ぶ */
.fd{place-items:center}
.fd-box{width:min(560px,100%);text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.fd-h{font-size:40px;font-weight:800;letter-spacing:.1em}
.fd-n{font-size:20px}
.fd-t{font-size:96px;line-height:1}
.fd-sw{display:flex;gap:12px}
.fd-sw span{width:36px;height:52px;border:2px solid var(--ink);animation:fd-drip 1.2s ease-in-out infinite alternate}
@keyframes fd-drip{from{transform:translateY(0)}to{transform:translateY(12px)}}
.fd-note{font-size:16px;color:var(--sub);line-height:1.6}
.fd-btn button{width:240px;height:60px;font-size:22px;font-weight:700}

/* 記録・設定 */
.rc.land{grid-template-columns:1fr 360px;grid-template-rows:56px 1fr 64px;grid-template-areas:"head head" "rec set" "btn btn";gap:18px 44px}
.rc.port{grid-template-rows:56px auto 1fr 64px;grid-template-areas:"head" "rec" "set" "btn";gap:18px}
.rc-head{grid-area:head;border-bottom:3px solid var(--ink)}
.rc-head h2{font-size:36px;font-weight:800;letter-spacing:.1em}
.rc-rec{grid-area:rec;font-size:19px;min-height:0}
.rc-rec .mono{font-size:18px}
.rc-cap{font-size:16px;font-weight:800;margin:18px 0 8px}
.rc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.rc-days>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.rc-days .pair{display:flex;width:100%;height:40px;border:1px solid var(--ink)}
.rc-days .pair span{flex:1}
.rc-days b{font-size:18px;font-weight:500}
.rc-days b.ok{color:var(--shu)}
.rc-days small{font-size:12px;color:var(--sub)}
.rc-set{grid-area:set}
.rc-set .rc-cap:first-child{margin-top:0}
.seg{display:flex}
.seg button{flex:1;height:50px;font-size:17px;font-weight:600}
.seg button+button{border-left:0}
.seg button.on{background:var(--ink);color:var(--paper)}
.rc-name{display:flex;gap:10px;align-items:center}
.rc-name b{flex:1;font-size:22px}
.rc-name button{height:46px;padding:0 18px;font-size:17px}
.rc-btn{grid-area:btn;display:flex;justify-content:center}
.rc-btn button{width:320px;font-size:22px;font-weight:700}

/* 今日のランキング（結果の一覧の下） */
.rk-box{margin-top:18px}
.rk-box h3{font-size:17px;border-bottom:2px solid var(--ink);padding-bottom:4px;display:flex;justify-content:space-between}
.rk-row{display:grid;grid-template-columns:40px 1fr 84px 86px;gap:12px;padding:5px 4px;border-bottom:1px solid var(--rule);font-size:17px}
.rk-row .mono{text-align:right}
.rk-row .mono:first-child{text-align:center}
.rk-row.me{background:var(--wash)}
.rk-off{font-size:15px;color:var(--sub);padding:8px 0}
.rk-best{font-size:16px;font-weight:800;color:var(--shu);border-bottom:1px solid var(--rule);padding:6px 0}