/* stella-code.space 版 ── 艦の public/pages/stage-page.css の写し（modes_to_site.py）。手で直さない */
/* 絵の舞台のモードに共通の見た目（2026-10-22）。色と字はモードの頁が :root の変数で替える。 */
:root{--ink:#3b2f25;--paper:#fbf6e9;--line:rgba(120,150,190,.28);--accent:#7a8fa8;--accent2:#b08a30;--memo:#fff6b8;--hdr:#fffdf6;--hdrsh:rgba(30,60,90,.6);--glow:rgba(255,240,200,.9);--f1:'Klee One',serif;--f2:'Zen Maru Gothic',sans-serif;--bg:#000}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--f1);user-select:none}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
#hdr{position:fixed;left:44px;top:26px;z-index:5;pointer-events:none}
#hdr h1{margin:0;font:600 40px/1 var(--f1);letter-spacing:.3em;color:var(--hdr);text-shadow:0 2px 0 var(--hdrsh),0 0 18px var(--hdrsh)}
#hdr p{margin:8px 0 0;font:500 14px/1 var(--f2);letter-spacing:.42em;color:var(--hdr);text-shadow:0 1px 4px var(--hdrsh)}
#st{margin-top:14px;font:600 15px/1 var(--f1);letter-spacing:.2em;color:var(--hdr);text-shadow:0 1px 4px var(--hdrsh)}
#st i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#9fe08a;box-shadow:0 0 8px #e8ffd0;margin-right:9px;vertical-align:1px;animation:pul 3s ease-in-out infinite}
#st.work i{background:#ffd27a;animation-duration:.9s}
@keyframes pul{50%{opacity:.45}}
#clk{position:fixed;right:44px;bottom:26px;z-index:5;text-align:right;pointer-events:none;color:var(--hdr);text-shadow:0 1px 6px var(--hdrsh)}
#clk b{display:block;font:600 34px/1 var(--f1);letter-spacing:.08em}
#clk span{display:block;margin-top:6px;font:500 14px/1 var(--f2);letter-spacing:.25em}
/* 道具の札（モードの描き手が位置を置く） */
.tag{position:fixed;left:0;top:0;z-index:4;pointer-events:none;width:0;height:0}
.tag b,.tag em,.tag s{position:absolute;left:24px;white-space:nowrap;text-decoration:none;font-style:normal}
.tag b{top:-30px;padding:3px 10px;border-radius:3px;background:var(--paper);box-shadow:0 2px 6px rgba(20,20,20,.3);font:600 17px/1.2 var(--f1);color:var(--ink);animation:tgin .6s ease both}
.tag em{top:2px;font:500 13px/1 var(--f2);color:var(--hdr);text-shadow:0 1px 3px rgba(0,0,0,.9);max-width:320px;overflow:hidden;text-overflow:ellipsis}
.tag s{top:20px;font:700 10px/1 var(--f2);letter-spacing:.3em;color:var(--hdr);text-shadow:0 1px 3px rgba(0,0,0,.9)}
.tag.done b{box-shadow:0 0 14px var(--glow)}
.tag.err b{filter:saturate(.4) brightness(.9);color:#8a3a2a}
.tag.gone{opacity:0;transition:opacity 1s}
@keyframes tgin{0%{opacity:0;transform:translateY(6px) rotate(-3deg)}100%{opacity:1;transform:none}}
/* 帯 */
#ban{position:fixed;left:0;right:0;top:15vh;text-align:center;z-index:7;pointer-events:none;opacity:0}
#ban b{display:inline-block;padding:14px 50px;font:600 46px/1 var(--f1);letter-spacing:.5em;color:var(--hdr);background:radial-gradient(ellipse at center,rgba(20,30,50,.4),rgba(20,30,50,0) 70%);text-shadow:0 2px 3px rgba(10,20,40,.8),0 0 24px var(--hdrsh)}
#ban span{display:block;margin-top:14px;font:500 17px/1 var(--f2);letter-spacing:.3em;color:var(--hdr);text-shadow:0 1px 5px rgba(10,20,40,.9)}
#ban.on{animation:ban 4s ease forwards}
@keyframes ban{0%{opacity:0;transform:translateY(-14px);filter:blur(6px)}14%{opacity:1;transform:none;filter:none}78%{opacity:1}100%{opacity:0;transform:translateY(8px);filter:blur(4px)}}
/* 便り（最新の副長の言葉） */
#letter{position:fixed;right:5vw;bottom:118px;width:38vw;max-height:52vh;overflow:hidden;z-index:6;pointer-events:none;padding:26px 34px 22px;background:var(--paper);background-image:repeating-linear-gradient(180deg,transparent 0 37px,var(--line) 37px 38px);background-position:0 18px;border-radius:4px;box-shadow:0 10px 30px rgba(10,15,25,.35);transform:rotate(-.6deg) translateY(16px);opacity:0;transition:opacity .9s,transform .9s}
#letter.on{opacity:1;transform:rotate(-.6deg)}
#letter small{display:block;font:700 12px/1 var(--f2);letter-spacing:.4em;color:var(--accent);margin-bottom:6px}
#ltx{font:500 21px/38px var(--f1);white-space:pre-line;color:var(--ink)}
.c{opacity:0;transition:opacity .35s}.c.on{opacity:1}
#memo{position:fixed;right:5vw;top:30px;max-width:30vw;z-index:6;pointer-events:none;padding:14px 20px;background:var(--memo);box-shadow:0 6px 16px rgba(10,10,10,.3);transform:rotate(1.5deg);font:500 18px/1.6 var(--f1);color:#4a3d20;opacity:0;transition:opacity .8s}
#memo.on{opacity:1}#memo small{display:block;font:700 11px/1 var(--f2);letter-spacing:.35em;color:var(--accent2);margin-bottom:4px}
#memo div{max-height:8.4em;overflow:hidden}
#mbar{position:fixed;right:calc(5vw + 150px);bottom:34px;width:calc(38vw - 150px);display:flex;align-items:center;gap:14px;padding:12px 22px;border-radius:30px;background:var(--paper);opacity:.94;box-shadow:0 6px 20px rgba(10,15,25,.35);z-index:9}
#mbar span,#wbar span{font:700 14px/1 var(--f2);letter-spacing:.25em;color:var(--accent);white-space:nowrap}
#mbar input,#wbar input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:500 19px/1.4 var(--f1);color:var(--ink)}
#mbar input::placeholder,#wbar input::placeholder{color:rgba(90,80,70,.45)}
#mbar:focus-within{box-shadow:0 6px 24px rgba(10,15,25,.4),0 0 0 2px var(--accent)}
#book{position:fixed;left:44px;top:200px;bottom:34px;width:34vw;z-index:5;padding:24px 26px 18px;border-radius:6px;background:var(--paper);opacity:.95;box-shadow:0 10px 30px rgba(10,15,25,.35);display:none;transition:opacity .6s,transform .6s}
body.single #book{display:block}
body.fold #book{opacity:0;transform:translateX(-40px);pointer-events:none}
body.single:not(.fold) #letter{display:none}
#log{height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:16px;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(120,110,90,.4) transparent}
#log>.e:first-child{margin-top:auto}
.e h4{margin:0 0 4px;font:700 12px/1 var(--f2);letter-spacing:.3em;color:var(--accent)}
.e.u h4{color:var(--accent2)}
.e p{margin:0;font:500 18px/1.75 var(--f1);white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.e.u p{background:var(--memo);padding:6px 12px;border-radius:2px;font-size:17px}
.e.s{text-align:center}.e.s p{font-size:14px;opacity:.7}.e.s h4{display:none}
#tail{position:absolute;right:26px;bottom:12px;padding:5px 14px;border-radius:14px;background:var(--accent);color:#fff;font:600 12px/1 var(--f2);cursor:pointer;display:none}#tail.on{display:block}
#help{position:fixed;left:50%;top:80px;transform:translateX(-50%);z-index:12;padding:16px 26px;background:var(--paper);box-shadow:0 8px 24px rgba(10,15,25,.35);font:500 16px/1.9 var(--f1);display:none;white-space:pre}#help.on{display:block}
#toast{position:fixed;left:50%;top:40px;transform:translateX(-50%);z-index:20;padding:8px 22px;border-radius:20px;background:var(--paper);box-shadow:0 4px 14px rgba(10,15,25,.3);font:600 16px/1 var(--f1);letter-spacing:.12em;opacity:0;transition:opacity .4s;pointer-events:none}#toast.on{opacity:1}
#imgov{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:rgba(10,15,25,.65);z-index:50;cursor:pointer}
#imgov.on{display:flex}#imgov img{max-width:80vw;max-height:78vh;border:10px solid var(--paper);box-shadow:0 12px 40px rgba(0,0,0,.5)}#imgov b{font:500 18px/1.4 var(--f1);color:#fff}
#boot{position:fixed;inset:0;z-index:100;display:none;cursor:pointer;background:var(--bootbg,#0b0f18)}
#boot.on{display:block}#boot canvas{position:absolute;inset:0;width:100%;height:100%}
#boot .bt{position:absolute;left:0;right:0;top:40%;text-align:center;pointer-events:none}
#boot h2{margin:0;font:600 80px/1 var(--f1);letter-spacing:.4em;color:var(--hdr);text-shadow:0 3px 0 var(--hdrsh),0 0 30px var(--hdrsh)}
#boot h2 span{opacity:0;display:inline-block;transform:translateY(10px);transition:all 1s}#boot h2 span.on{opacity:1;transform:none}
#boot p{margin:22px 0 0;font:500 18px/1 var(--f2);letter-spacing:.6em;color:var(--hdr);opacity:0;transition:opacity 1.2s;text-shadow:0 1px 6px var(--hdrsh)}#boot p.on{opacity:1}
#boot.open{opacity:0;transition:opacity 1.6s;pointer-events:none}
/* 二枚目 */
body.wall #hdr,body.wall #ban,body.wall #letter,body.wall #memo,body.wall #mbar,body.wall #clk{display:none}
#wall{display:none;position:fixed;inset:0;z-index:3;pointer-events:none}
#wall .card,#wall #wbar{pointer-events:auto}
body.wall #wall{display:block}
#wtitle{position:absolute;left:0;right:0;top:3vh;text-align:center;font:600 46px/1 var(--f1);letter-spacing:.4em;color:var(--hdr);text-shadow:0 3px 0 var(--hdrsh),0 0 20px var(--hdrsh)}
#wclk{position:absolute;left:0;right:0;top:calc(3vh + 62px);text-align:center;font:500 18px/1 var(--f2);letter-spacing:.3em;color:var(--hdr);text-shadow:0 1px 5px rgba(10,20,40,.8)}
#medal{position:absolute;left:50%;top:13vh;width:22vh;height:22vh;margin-left:-11vh;border-radius:50%;overflow:hidden;border:6px solid var(--paper);box-shadow:0 8px 24px rgba(10,15,25,.4);background:var(--medal,radial-gradient(circle at 50% 30%,#d8eefc,#8cc4ec))}
#medal img{position:absolute;left:50%;top:2%;width:170%;transform:translateX(-50%)}
#mood{position:absolute;left:0;right:0;top:36.5vh;text-align:center;font:600 20px/1 var(--f1);letter-spacing:.3em;color:var(--hdr);text-shadow:0 1px 6px rgba(10,20,40,.9)}
.card{position:absolute;left:4vw;right:4vw;padding:14px 20px;background:var(--paper);opacity:.94;border-radius:4px;box-shadow:0 8px 22px rgba(10,15,25,.35)}
.card h3{margin:0 0 10px;font:700 13px/1 var(--f2);letter-spacing:.4em;color:var(--accent)}
#gauges{top:40vh;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.gg.cx{padding-top:8px;border-top:1px dotted rgba(120,110,90,.35)}.gg.cx h3{margin-bottom:6px;font-size:11px}.gg.cx b{font-size:22px}.gg.cx u{height:6px;margin-top:5px}.gg.cx i{font-size:12px;margin-top:2px}
.gg b{display:block;font:600 34px/1 var(--f1)}.gg i{display:block;font:500 14px/1.4 var(--f2);font-style:normal;opacity:.75;margin-top:4px}
.gg u{display:block;height:10px;margin-top:8px;border-radius:5px;background:rgba(120,110,90,.2);overflow:hidden;text-decoration:none}.gg u span{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width 1.2s}
#watch{top:52.5vh;max-height:12.5vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 16px;font:500 14px/1.3 var(--f2)}
#watch div{display:flex;justify-content:space-between;gap:6px;border-bottom:1px dotted rgba(120,110,90,.3);padding:3px 0;white-space:nowrap;overflow:hidden}
#watch span{overflow:hidden;text-overflow:ellipsis}#watch i{font-style:normal;color:#4f8a3a}#watch .w i{color:#c08a20}#watch .c i{color:#c04a40}
body.wall #book{display:block;left:4vw;right:4vw;width:auto;top:66vh;bottom:auto;height:22vh}
#wbar{position:absolute;left:4vw;right:4vw;top:89vh;display:flex;gap:12px;align-items:center;padding:8px 18px;border-radius:24px;background:var(--paper);box-shadow:0 6px 18px rgba(10,15,25,.3)}
#today{top:94vh;padding:8px 16px;font:500 14px/1.5 var(--f1);display:flex;gap:18px;overflow:hidden;white-space:nowrap}
#today small{font:700 11px var(--f2);letter-spacing:.2em;color:var(--accent);margin-right:6px}