/* ═══ 19zzc-ost.css ═══ サイトの BGM（19zzc-ost.js、2026-10-04）：入ったときの問い・右上の「Music: ただの中学生」・マイページの設定・管理者の札 */
/* 入ったときの問い（この端末で一度だけ） */
#ostask{position:fixed;inset:0;z-index:88;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,8,12,.42);animation:ostfade .25s ease}
#ostask[hidden]{display:none}
.ostbox{position:relative;width:min(420px,100%);background:var(--sur);color:var(--tx);border:1px solid var(--line);border-radius:16px;padding:22px 20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);animation:ostpop .28s cubic-bezier(.2,.9,.3,1.2)}
.ostx{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;background:none;color:var(--dim);font-size:22px;line-height:1;border-radius:50%;cursor:pointer}
.ostx:hover,.ostx:focus-visible{background:var(--sur2,rgba(127,127,127,.15));color:var(--tx)}
.ostq{margin:4px 26px 16px 0;font-size:15.5px;font-weight:700;line-height:1.55}
.ostrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ostby{font-size:14px;color:var(--dim)}
.ostby a,#osttoast a,#ostbox a{color:var(--irm);font-weight:700;text-decoration:none}
.ostby a:hover,#osttoast a:hover,#ostbox a:hover{text-decoration:underline}
.ostrow .btn{min-width:96px}
.ostnote{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);line-height:1.6}
.ostnote a{color:var(--irm);font-weight:700;text-decoration:none}.ostnote a:hover{text-decoration:underline}
@keyframes ostfade{from{opacity:0}to{opacity:1}}
@keyframes ostpop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
/* 右上の「Music: ただの中学生」（2.5 秒） */
#osttoast{position:fixed;right:14px;top:10px;z-index:95;background:rgba(12,14,20,.86);color:#e8ecf2;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 14px;font-size:13px;letter-spacing:.02em;box-shadow:0 8px 24px rgba(0,0,0,.35);backdrop-filter:blur(6px);opacity:0;transform:translateX(16px);transition:opacity .3s ease,transform .3s ease;max-width:calc(100vw - 28px)}
#osttoast[hidden]{display:none}
#osttoast.in{opacity:1;transform:none}
#osttoast.out{opacity:0;transform:translateX(16px)}
#osttoast a{color:#ffd76a}
body.light #osttoast{background:rgba(255,255,255,.94);color:#1b1f2a;border-color:rgba(0,0,0,.1)}
body.light #osttoast a{color:#b7791f}
/* マイページ */
.ostset{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ostvol{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim)}
.ostvol input{width:120px;accent-color:var(--irm)}
.ostvol b{min-width:2em;color:var(--tx);font-size:12px}
/* 管理者の札 */
.ostlist{display:flex;flex-direction:column;gap:4px}
.ostli{display:flex;align-items:center;gap:8px;font-size:13px}
.ostli b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ostli span{color:var(--dim);font-size:11.5px}
.ostpages{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 12px}
.ostpages label{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ostpages label span{flex:0 0 8.5em;color:var(--dim)}
.ostpages select{flex:1;min-width:0;padding:5px 6px;font-size:12.5px}
#ostdef{max-width:320px}
.ostnums{display:flex;flex-wrap:wrap;gap:8px 16px}
.ostnums label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim)}
.ostnums input[type=number]{width:76px;padding:4px 6px}
.ostnums input[type=range]{width:120px;accent-color:var(--irm)}
.ostnums b{color:var(--tx);min-width:2em;font-size:12px}
@media (max-width:560px){.ostq{font-size:16px}.ostby{font-size:15px}#osttoast{font-size:14px}.ostnote{font-size:13.5px}}