/* 『打刻！』試作版。机（木目）の上に端末を並べる。アプリ「スキマル」はオレンジ */
:root{--brand:#ff7a1a;--brand2:#ffb067;--ink:#1f1a17;--sub:#7b716a;--ok:#1aa36f;--ng:#e5484d;--blue:#3d7bfd;--desk:#5a3b24}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#120d0a;color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{position:relative;max-width:480px;height:100dvh;margin:0 auto;overflow:hidden;overflow:clip;background:#1b1410}
.screen{position:absolute;inset:0;display:none;overflow:hidden}
.screen.show{display:block}
.btn{display:block;width:100%;padding:15px;border-radius:8px;font-weight:700;font-size:16px}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 4px 0 #c95a08}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #c95a08}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:none;opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.7)}50%{box-shadow:0 0 0 8px rgba(255,122,26,0)}}
.spin{display:inline-block;width:28px;height:28px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- タイトル ---------- */
#title{background:linear-gradient(180deg,#fff7ef,#ffe7d1);overflow-y:auto;padding:44px 26px 30px;text-align:center}
.t-app{display:flex;flex-direction:column;align-items:center;gap:4px}
.t-icon{width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;box-shadow:0 8px 20px rgba(255,122,26,.35)}
.t-icon b{color:#fff;font-size:36px;font-weight:800}
.t-brand{font-weight:800;font-size:18px;margin-top:6px}
.t-sub{font-size:12px;color:var(--sub)}
#title h1{font-size:44px;font-weight:900;letter-spacing:.06em;margin:22px 0 8px}
.t-lead{font-size:14px;line-height:1.9;color:#4a403a}
.t-reg{margin:26px 0 18px;text-align:left}
.t-reg label{display:block;font-size:12px;color:var(--sub);margin-bottom:6px}
.t-reg input{width:100%;padding:13px 14px;border:1.5px solid #e9d6c4;border-radius:6px;font-size:16px;background:#fff;margin-bottom:14px}
.t-notes{list-style:none;font-size:12px;color:var(--sub);line-height:1.9}
.t-proto{margin-top:12px;display:inline-block;font-size:11px;padding:3px 10px;border-radius:3px;background:#1f1a17;color:#fff}
.t-foot{margin-top:18px;font-size:11px;letter-spacing:.2em;color:#b8a898}

/* ---------- プロローグ ---------- */
#pro{background:radial-gradient(ellipse at 50% 30%,#1c2230,#07080b 70%);color:#e9eef5;text-align:center}
.p-clock{margin-top:70px;font-size:64px;font-weight:200;letter-spacing:.02em}
.p-date{font-size:13px;color:#9aa3b2}
.p-note{margin:44px 16px 0;padding:14px 14px 12px;border-radius:18px;background:rgba(245,245,250,.16);backdrop-filter:blur(12px);text-align:left;opacity:0;transform:translateY(-12px);transition:.5s}
.p-note.in{opacity:1;transform:none}
.p-head{display:flex;align-items:center;gap:7px;font-size:12px;color:#c8cfda}
.p-head span{margin-left:auto}
.p-ic{width:20px;height:20px;border-radius:6px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:800}
.p-txt{margin-top:8px;font-size:14px;line-height:1.6}
.p-sub{font-size:12px;color:#aab2c0;margin-top:2px}
.p-btns{display:flex;gap:8px;margin-top:12px}
.p-btn{flex:1;padding:11px;border-radius:12px;font-weight:700;font-size:14px}
.p-btn.ghost{background:rgba(255,255,255,.06);color:#7f8796}
.p-btn.glow{background:var(--brand);color:#fff;animation:glow 1.6s infinite}
.p-match{margin-top:120px}
.p-match p{margin-top:14px;font-size:14px;color:#c8cfda}
.p-door{position:absolute;inset:0;background:linear-gradient(180deg,#2a2a2c,#18181a);display:flex;flex-direction:column;align-items:center;justify-content:center}
.p-door::before{content:"";position:absolute;inset:60px 50px 120px;border:3px solid #3b3b3e;border-radius:4px;background:repeating-linear-gradient(0deg,#2f2f32 0 2px,#2b2b2e 2px 9px)}
.p-papers{position:relative;width:180px;height:230px;cursor:pointer}
.paper{position:absolute;inset:0;background:#f4f0e6;padding:28px 26px 60px;box-shadow:0 2px 6px rgba(0,0,0,.5);display:flex;justify-content:center;border-top:14px solid rgba(220,210,170,.6)}
.paper canvas{width:128px;height:128px;image-rendering:pixelated}
.paper.top{}
.paper.read{outline:3px solid var(--ok)}
.p-door-t{position:relative;margin-top:28px;font-size:14px;color:#ddd;padding:0 20px}
.p-white{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity 1.6s}
.p-white.on{opacity:1}

/* ---------- 机 ---------- */
#desk{background:radial-gradient(ellipse at 50% 40%,#7a5233,var(--desk) 55%,#2e1d11);display:none;flex-direction:column}
#desk.show{display:flex}
#desk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,rgba(0,0,0,.05) 0 3px,transparent 3px 11px),repeating-linear-gradient(88deg,rgba(255,255,255,.03) 0 1px,transparent 1px 23px);pointer-events:none}
.hud{position:relative;z-index:2;margin:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35);display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.h-app{font-weight:800;font-size:13px;display:flex;align-items:center;gap:5px;color:var(--brand)}
.h-app i{font-style:normal;width:18px;height:18px;border-radius:5px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:10px}
.h-bal{text-align:right}
.h-bal small{font-size:10px;color:var(--sub);margin-right:6px}
.h-bal b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.h-goal{grid-column:1/-1;font-size:12px;color:#7a4b1d;background:#fff3e6;border-radius:8px;padding:4px 8px;text-align:center}
.h-goal b{font-size:14px}
.h-goal.done{display:none}
.h-row{grid-column:1/-1;display:flex;justify-content:space-between;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.grid{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,1),1fr);gap:12px;padding:16px max(16px,env(safe-area-inset-right)) calc(146px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));align-content:center;justify-items:center;align-items:center;overflow:hidden}

/* 端末：机の上も、寄ったときも同じ部品。大きさはすべて端末の幅（cqw）に合わせる */
.ph{position:relative;width:var(--pw,120px);container-type:inline-size;transform:rotate(var(--rot,0deg));filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .12s}
.ph:active{transform:rotate(var(--rot,0deg)) scale(.96)}
.ph.new{animation:pop .45s ease}
.dev{position:relative;width:100%;aspect-ratio:9/19.5;border-radius:9cqw;background:#08090a;box-shadow:inset 0 0 0 1.3cqw var(--frame),inset 0 0 0 1.7cqw rgba(255,255,255,.28),inset 0 0 0 2.4cqw #050506}
/* 側面のボタン（音量・電源） */
.btn-l,.btn-l2,.btn-r{position:absolute;width:1.3cqw;border-radius:1cqw;background:var(--frame);filter:brightness(.85)}
.btn-l{left:-.9cqw;top:22%;height:9%} .btn-l2{left:-.9cqw;top:33%;height:9%} .btn-r{right:-.9cqw;top:27%;height:14%}
/* 画面 */
.scr{position:absolute;inset:2.6cqw;border-radius:6.5cqw;overflow:hidden;background:#141821 center/cover no-repeat;color:#fff}
.own .scr{background-image:radial-gradient(ellipse at 30% 20%,#4b6cb7,transparent 60%),radial-gradient(ellipse at 80% 90%,#7b4397,transparent 55%),linear-gradient(160deg,#182848,#0d1424)}
.scr .dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45))}
.scr .glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 40%),linear-gradient(118deg,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 85%,rgba(255,255,255,0) 100%)}
.scr .crk{position:absolute;inset:0;pointer-events:none;background-size:100% 100%}
.scr .ind{position:absolute;bottom:1.8cqw;left:50%;width:34cqw;height:1.2cqw;margin-left:-17cqw;border-radius:1cqw;background:rgba(255,255,255,.85)}
/* カメラ：ダイナミックアイランド／ノッチ／パンチホール */
.isl{position:absolute;z-index:3;background:#000}
.m-island .isl{top:2.6cqw;left:50%;width:30cqw;height:8.4cqw;margin-left:-15cqw;border-radius:5cqw}
.m-notch .isl{top:0;left:50%;width:46cqw;height:7.4cqw;margin-left:-23cqw;border-radius:0 0 5cqw 5cqw}
.m-punch .isl{top:3.2cqw;left:50%;width:4.6cqw;height:4.6cqw;margin-left:-2.3cqw;border-radius:50%;box-shadow:0 0 0 .6cqw rgba(30,30,30,.9)}
/* ステータスバー */
.sb{position:absolute;z-index:4;top:3.6cqw;left:9cqw;right:7.5cqw;display:flex;justify-content:space-between;align-items:center;font-size:5.4cqw;font-weight:600;letter-spacing:-.02em;text-shadow:0 0 .6cqw rgba(0,0,0,.3)}
.m-notch .sb{top:2.2cqw} .m-punch .sb{top:2.6cqw}
.sb-ic{display:flex;align-items:center;gap:1.4cqw}
.sig{display:flex;align-items:flex-end;gap:.5cqw;height:3.6cqw}
.sig b{width:.9cqw;background:#fff;border-radius:.3cqw}
.sig b:nth-child(1){height:30%} .sig b:nth-child(2){height:55%} .sig b:nth-child(3){height:78%} .sig b:nth-child(4){height:100%}
.sig b.off{background:rgba(255,255,255,.35)}
.wifi{width:4.4cqw;height:3.4cqw;background:#fff;-webkit-mask:radial-gradient(circle at 50% 100%,#000 14%,transparent 15%,transparent 33%,#000 34%,#000 47%,transparent 48%,transparent 63%,#000 64%,#000 77%,transparent 78%);mask:radial-gradient(circle at 50% 100%,#000 14%,transparent 15%,transparent 33%,#000 34%,#000 47%,transparent 48%,transparent 63%,#000 64%,#000 77%,transparent 78%);clip-path:polygon(50% 100%,0 0,100% 0)}
.batt{position:relative;width:6.6cqw;height:3.2cqw;border:.45cqw solid rgba(255,255,255,.55);border-radius:1cqw;padding:.35cqw}
.batt::before{content:"";display:block;height:100%;width:var(--b);background:#fff;border-radius:.4cqw}
.batt::after{content:"";position:absolute;right:-1.2cqw;top:30%;width:.7cqw;height:40%;border-radius:0 .4cqw .4cqw 0;background:rgba(255,255,255,.55)}
.batt.low::before{background:#ff453a}
/* ロック画面の時計 */
.lk{position:absolute;top:13cqw;left:0;right:0;text-align:center;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.35)}
.lk-d{font-size:5.4cqw;font-weight:600;opacity:.92}
.lk-c{font-size:24cqw;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* 通知の重なり（持ち主の通知＋アプリの通知） */
.stack{position:absolute;left:3.6cqw;right:3.6cqw;bottom:6.5cqw;display:flex;flex-direction:column;gap:2cqw}
.on,.card{border-radius:4.5cqw;background:rgba(246,246,248,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#111;padding:3.4cqw 4cqw;font-size:5.6cqw;line-height:1.35;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.18)}
.on-hd,.c-hd{display:flex;align-items:center;gap:1.8cqw;font-size:4.6cqw;color:#55565c;margin-bottom:.8cqw}
.on-hd span,.c-now{margin-left:auto;font-size:4.2cqw;color:#7c7d84}
.on p{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ph.ping .on{animation:pop .4s ease}
.c-ic{font-style:normal;width:5.6cqw;height:5.6cqw;border-radius:1.6cqw;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:3.6cqw;font-weight:800}
.c-app{font-weight:600}
.c-tt{font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.c-tt.g{color:var(--ok)} .c-tt.r{color:var(--ng)}
.c-bd{color:#3c3d42;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.c-bd.yui{color:var(--ng)}
.c-act{display:block;margin-top:2cqw;padding:2.4cqw 0;border-radius:4cqw;text-align:center;font-weight:800;background:var(--brand);color:#fff;animation:glow 1.6s infinite}
.c-act.g{background:var(--ok);animation:pulse .6s infinite} .c-act.r{background:var(--ng);animation:pulse .6s infinite}
.c-bar{height:2cqw;border-radius:1cqw;background:#dfe3ea;margin:1.6cqw 0 1cqw;overflow:hidden}
.c-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:1cqw}
.card.st-work .c-now,.card.st-lock .c-now{color:var(--blue);font-weight:700}
.card.st-lock{background:rgba(236,238,243,.8)}
.c-qr{display:flex;justify-content:center;padding:1cqw 0}
.c-qr canvas{width:46cqw;height:46cqw;image-rendering:pixelated;animation:pulse .35s 2}
/* ホームボタンの古い機種：上下の額縁が太く、角ばった画面 */
.m-home .dev{aspect-ratio:9/18.4;border-radius:8cqw;background:var(--frame);box-shadow:inset 0 0 0 1cqw rgba(0,0,0,.12),inset 0 0 0 1.4cqw rgba(255,255,255,.3)}
.m-home .scr{inset:17cqw 5cqw 19cqw;border-radius:1cqw;box-shadow:0 0 0 1cqw #0b0b0c}
.m-home .isl,.m-home .ind{display:none}
.m-home .sb{top:1cqw;left:3cqw;right:3cqw;font-size:4.6cqw}
.m-home .lk{top:9cqw}
.m-home .lk-c{font-size:20cqw;font-weight:300}
.m-home .stack{bottom:3cqw;left:2.6cqw;right:2.6cqw}
.m-home .on,.m-home .card{border-radius:2.4cqw}
.hb,.spk{display:none}
.m-home .hb{display:block;position:absolute;bottom:4.4cqw;left:50%;width:12cqw;height:12cqw;margin-left:-6cqw;border-radius:50%;box-shadow:inset 0 0 0 .7cqw rgba(0,0,0,.28)}
.m-home .spk{display:block;position:absolute;top:8cqw;left:50%;width:16cqw;height:1.6cqw;margin-left:-8cqw;border-radius:1cqw;background:rgba(0,0,0,.4);box-shadow:-11cqw 0 0 -.1cqw rgba(0,0,0,.45)}
/* ケース */
.k-silicone .dev{outline:3.4cqw solid var(--case);outline-offset:-.2cqw}
.k-silicone .btn-l,.k-silicone .btn-l2,.k-silicone .btn-r{background:var(--case);filter:brightness(.9);width:2.4cqw}
.k-silicone .btn-l,.k-silicone .btn-l2{left:-3.6cqw} .k-silicone .btn-r{right:-3.6cqw}
.k-clear .dev{outline:2.4cqw solid rgba(255,236,170,.38);outline-offset:-.2cqw}
.k-clear .dev::before{content:"";position:absolute;inset:-2.4cqw;border-radius:10cqw;pointer-events:none;background:radial-gradient(circle at 0 0,rgba(255,240,190,.55) 0 8cqw,transparent 8.4cqw),radial-gradient(circle at 100% 0,rgba(255,240,190,.55) 0 8cqw,transparent 8.4cqw),radial-gradient(circle at 0 100%,rgba(255,240,190,.55) 0 8cqw,transparent 8.4cqw),radial-gradient(circle at 100% 100%,rgba(255,240,190,.55) 0 8cqw,transparent 8.4cqw);-webkit-mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);padding:2.6cqw}
.k-book .dev{outline:5cqw solid var(--case);outline-offset:-.2cqw}
.k-book .dev::before{content:"";position:absolute;inset:-3.4cqw;border-radius:11cqw;border:.7cqw dashed rgba(255,255,255,.4);pointer-events:none}
.k-book .dev::after{content:"";position:absolute;right:-7.6cqw;top:44%;width:7cqw;height:14%;border-radius:0 3cqw 3cqw 0;background:var(--case);filter:brightness(.88);box-shadow:inset -1.4cqw 0 0 rgba(0,0,0,.12)}
.k-book .btn-l,.k-book .btn-l2,.k-book .btn-r{display:none}
.m-home.k-silicone .dev,.m-home.k-clear .dev,.m-home.k-book .dev{border-radius:8cqw}
/* 寄ったとき（大きい端末） */
.ph.big{--pw:min(74vw,300px);width:var(--pw);transform:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.ph.big:active{transform:none}
.big .stack{bottom:7cqw}
.big .on,.big .card{font-size:4.6cqw}
.big .on-hd,.big .c-hd{font-size:3.8cqw}
.big .c-tt{white-space:normal}
.c-dl{margin:2cqw 0;font-size:4.2cqw}
.c-dl div{display:flex;gap:2cqw;padding:1cqw 0;border-top:1px solid rgba(0,0,0,.08)}
.c-dl dt{width:13cqw;color:#7c7d84;flex:none}
.c-err{font-size:4cqw;color:var(--ng);background:#fff0f0;border-radius:2.4cqw;padding:2cqw 2.6cqw;margin:1.6cqw 0}
.c-btns{display:flex;gap:2cqw;margin-top:2.4cqw}
.c-b{flex:1;padding:3.4cqw 1cqw;border-radius:3.6cqw;font-weight:800;font-size:4.4cqw}
.c-b.go{background:var(--brand);color:#fff} .c-b.go.g{background:var(--ok)} .c-b.go.r{background:var(--ng)}
.c-b.ghost{flex:.45;background:rgba(0,0,0,.07);color:#55565c}

/* 通知（トースト） */
.toasts{position:absolute;left:10px;right:10px;top:132px;z-index:5;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.96);font-size:13px;line-height:1.45;box-shadow:0 6px 14px rgba(0,0,0,.3);animation:pop .3s ease;transition:opacity .4s,transform .4s}
.toast.out{opacity:0;transform:translateY(-6px)}
.toast.pay{border-left:5px solid var(--ok);font-weight:700}
.toast.rv{border-left:5px solid #f5b700;font-size:12px}
.toast.err{background:#2a1d1d;color:#ffd5d5;border-left:5px solid var(--ng)}
.toast.chat{border-left:5px solid var(--brand)}
.toast.goal{background:var(--brand);color:#fff;font-weight:800;text-align:center;font-size:16px}
.toast.tip{background:#1f1a17;color:#fff}
.chat-open{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom) + var(--devh,0px));z-index:4;padding:11px 16px;border-radius:99px;background:#fff;font-weight:700;font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.chat-open i{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--ng);color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center;padding:0 5px}

/* ---------- 寄る ---------- */
.zoom{position:absolute;inset:0;z-index:10;background:rgba(10,7,5,.78);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
.zoom.show{display:flex;animation:fade .2s}
.z-close{padding:11px 26px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-size:14px}

/* ---------- チャット ---------- */
.chat{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:11;background:#f6f2ee;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;transform:translateY(105%);transition:transform .3s}
.chat.show{transform:none}
.c-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e7ded5;font-size:14px}
.c-head button{font-size:22px;color:var(--sub);width:32px}
.c-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.cm{align-self:flex-start;max-width:82%;padding:9px 12px;border-radius:4px 16px 16px 16px;background:#fff;font-size:14px;line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cm.me{align-self:flex-end;border-radius:16px 4px 16px 16px;background:var(--brand);color:#fff}
.c-choice{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 16px}
.c-choice:empty{display:none}
.cc{padding:10px 14px;border-radius:99px;border:1.5px solid var(--brand);color:var(--brand);font-weight:700;font-size:13px;background:#fff}

/* ---------- 共通 ---------- */
.mute{position:absolute;top:14px;right:14px;z-index:20;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.25);color:#fff;font-size:15px}
#desk.show ~ .mute{top:auto;bottom:calc(16px + env(safe-area-inset-bottom) + var(--devh,0px));left:max(12px,env(safe-area-inset-left));right:auto;z-index:9}
.mute.off{opacity:.45;text-decoration:line-through}
.dev-bar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;flex-wrap:wrap;gap:6px;padding:8px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:rgba(0,0,0,.85)}
.dev-bar b{cursor:pointer}
.dev-bar.min button{display:none}
.dev-bar b{color:#ffcc00;font-size:12px;align-self:center}
.dev-bar button{padding:6px 10px;border-radius:8px;background:#333;color:#fff;font-size:12px}
/* 開発ページ：開発用バーの高さ（--devh、JS で測る）の分だけ、机・ボタン・各画面の下をあける */
#app.devmode .grid{padding-bottom:calc(146px + var(--devh,0px))}
#app.devmode #end,#app.devmode #result,#app.devmode #title{padding-bottom:calc(30px + var(--devh,0px))}
/* 勤務中で操作のいらない端末は画面が暗くなる（本物のスマホと同じ。通知が来た端末だけ明るい＝どれを触ればいいか分かる） */
.scr::after{content:"";position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none;transition:opacity .5s}
.ph:not(.big).st-work .scr::after{opacity:.3}
.ph:not(.big).st-lock .scr::after{opacity:.25}
.ph:not(.big).st-done .scr::after,.ph:not(.big).st-over .scr::after,.ph:not(.big).st-cool .scr::after{opacity:0;transition:opacity .15s}
/* 机の上（小さい端末）：文字を大きく、中身を絞る（ユーザー指摘「見えない」） */
.ph:not(.big) .lk{top:11cqw}
.ph:not(.big) .lk-c{font-size:20cqw}
.ph:not(.big) .stack{left:3cqw;right:3cqw;bottom:5cqw;gap:1.6cqw}
.ph:not(.big) .on,.ph:not(.big) .card{font-size:max(8.6cqw,8px);line-height:1.25;padding:3cqw 3.4cqw;border-radius:3.6cqw}
.ph:not(.big) .c-hd{display:none}
.ph:not(.big) .on-hd{display:none}
.ph:not(.big) .on p{-webkit-line-clamp:1}
.ph:not(.big) .c-tt{font-size:1em}
.ph:not(.big) .c-bd{font-size:.86em}
.ph:not(.big) .c-act{margin-top:1.6cqw;padding:2.6cqw 0;border-radius:3cqw;font-size:1.05em}
.ph:not(.big) .c-bar{height:2.6cqw}
.ph:not(.big) .c-qr canvas{width:40cqw;height:40cqw}
/* ---------- 3章：古い端末・ガラケー・たくさん並んだとき ---------- */
.toast.far{background:rgba(20,16,14,.82);color:#cfc6bd;font-style:italic;font-size:12px}
/* ガラケー（開いた二つ折り）：上が小さな画面、下がボタン */
.m-kei .dev{aspect-ratio:9/19.5;border-radius:7cqw;background:linear-gradient(180deg,var(--frame) 0 52%,#2a2a2e 52% 53%,var(--frame) 53%);box-shadow:inset 0 0 0 1cqw rgba(0,0,0,.15)}
.m-kei .scr{inset:9cqw 8cqw 54% 8cqw;border-radius:1cqw;box-shadow:0 0 0 1cqw #111;background-color:#0d1b2a}
.m-kei .dev::after{content:"";position:absolute;left:12cqw;right:12cqw;top:58%;bottom:6%;background:radial-gradient(ellipse 34% 28% at 50% 50%,rgba(0,0,0,.28) 0 96%,transparent 100%) 0 0/33.3% 25%;border-radius:2cqw}
.m-kei .isl,.m-kei .ind,.m-kei .lk,.m-kei .glare,.m-kei .btn-l,.m-kei .btn-l2,.m-kei .btn-r{display:none}
.m-kei .sb{top:.6cqw;left:2cqw;right:2cqw;font-size:4.4cqw;font-family:monospace}
.m-kei .stack{left:1.4cqw;right:1.4cqw;bottom:1.4cqw}
.m-kei .on{display:none}
.m-kei .card,.ph:not(.big).m-kei .card{border-radius:0;background:#cfe3d0;color:#0f2b12;font-family:monospace;padding:1.6cqw 2cqw;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.m-kei .c-act{border-radius:0}
.m-kei.k-silicone .dev,.m-kei.k-clear .dev,.m-kei.k-book .dev{border-radius:7cqw}
/* 端末がとても小さいとき（3章で37台）：通知は色と一言だけ */
@container (max-width:56px){
  .lk-d,.c-bd,.on,.sb-ic{display:none}
  .lk-c{font-size:22cqw}
  .card{padding:2cqw!important}
  .c-tt{font-size:.9em}
}

/* ---------- 4章：青いカゴ ---------- */
#desk .grid{transition:transform 3s ease}
#desk.basket .grid{transform:scale(.86);z-index:2}
#desk::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 3s;z-index:1;background:linear-gradient(90deg,#1d4f9e 0 26px,transparent 26px calc(100% - 26px),#1d4f9e calc(100% - 26px)),linear-gradient(180deg,transparent 0 110px,#1d4f9e 110px 136px,transparent 136px calc(100% - 26px),#1d4f9e calc(100% - 26px)),repeating-linear-gradient(90deg,transparent 0 10px,rgba(10,30,70,.55) 10px 14px),linear-gradient(#2a64c4,#1a4a99)}
#desk.basket::after{opacity:1}
.st-stuck .scr::after{opacity:.2!important}
.st-qr .scr{background:#fff!important}
.st-qr .lk,.st-qr .dim,.st-qr .on{display:none}
.st-qr .card{background:transparent!important;box-shadow:none!important;color:#111;text-align:center}
.st-qr .c-hd{display:none}
.c-qr.big canvas{width:70cqw;height:70cqw}
.c-tt.b{color:#111}
.h-hist{padding:1px 8px;border-radius:4px;background:#1f1a17;color:#fff;font-size:11px;animation:glow 1.6s infinite}
#h-bal.glitch{animation:gl .9s steps(2) 1;color:var(--ng)}
@keyframes gl{0%{transform:translate(0)}20%{transform:translate(-3px,1px) skewX(10deg)}40%{transform:translate(3px,-1px);opacity:.4}60%{transform:translate(-2px,0) skewX(-8deg)}80%{transform:translate(2px,1px);opacity:.7}100%{transform:none}}
.hist{position:absolute;inset:0;z-index:12;background:#f6f2ee;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s}
.hist.show{transform:none}
.hi-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #e7ded5}
.hi-head button{font-size:22px;color:var(--sub);width:32px}
.hi-list{list-style:none;overflow-y:auto;flex:1;padding:6px 14px}
.hi-list li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:10px 4px;border-bottom:1px solid #ece4dc;font-size:12px}
.hi-list .hd{color:var(--sub);font-variant-numeric:tabular-nums}
.hi-list .hs{color:var(--blue);font-weight:700}
.choice{position:absolute;left:0;right:0;bottom:0;z-index:13;padding:18px 16px 26px;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .4s}
.choice.show{transform:none}
.ch-q{font-size:13px;color:var(--sub);margin-bottom:12px;text-align:center}
.ch-b{display:block;width:100%;padding:14px;margin-top:8px;border-radius:8px;background:var(--brand);color:#fff;font-weight:800;font-size:15px}
.ch-b + .ch-b{background:#f1ece6;color:var(--ink)}
.caption{position:absolute;left:16px;right:16px;bottom:200px;z-index:12;text-align:center;font-size:16px;color:#fff;text-shadow:0 0 8px #000,0 0 2px #000;opacity:0;pointer-events:none}
.caption.show{animation:cap 5s ease forwards}
@keyframes cap{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* ---------- エンディング ---------- */
#end{padding:70px 18px 30px;transition:background 2.5s;overflow-y:auto}
#end.night{background:radial-gradient(ellipse at 50% 30%,#1c2230,#07080b 70%)}
#end.morning{background:radial-gradient(ellipse at 50% 0%,#ffe3b8,#f2b37a 45%,#6d5a7a)}
#end.dark{background:#000}
.end-lines{display:flex;flex-direction:column;gap:12px}
.el{animation:pop .35s ease}
.el.sys{color:#e7e2dc;font-size:15px;line-height:1.8;text-align:center;padding:4px 0}
#end.morning .el.sys{color:#2b2018}
.el.say{color:#fff;font-size:20px;text-align:center}
.el.big{color:#fff;font-size:26px;font-weight:800;text-align:center;padding-top:18px;letter-spacing:.06em}
.el.note,.el.talk{background:rgba(246,246,248,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.5;color:#111}
.el-hd{display:flex;align-items:center;gap:6px;font-size:12px;color:#55565c;margin-bottom:3px}
.el-hd i{font-style:normal;width:18px;height:18px;border-radius:5px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800}
.el-hd span{margin-left:auto;color:#8a8a92}
.el.talk .el-hd b{color:var(--brand)}
.end-next{margin-top:26px}

/* ---------- 給与明細 ---------- */
#result{background:#f4efe6;padding:26px 18px 30px;overflow-y:auto}
.slip{background:#fff;border:2px solid #1f1a17;border-radius:4px;padding:0 0 16px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.s-hd{display:flex;justify-content:space-between;align-items:center;background:var(--brand);color:#fff;padding:10px 14px}
.s-hd b{font-size:18px;letter-spacing:.2em}
.s-hd span{font-size:12px;font-weight:700}
.s-issued{text-align:right;font-size:11px;color:var(--sub);padding:8px 14px 0;font-variant-numeric:tabular-nums}
.s-issued.red{color:var(--ng);font-weight:700}
.s-name{font-size:16px;font-weight:700;padding:2px 14px 8px;border-bottom:1px solid #e7ded5}
.s-k{font-size:11px;color:var(--sub);padding:10px 14px 0}
.s-total{font-size:34px;font-weight:900;padding:0 14px;font-variant-numeric:tabular-nums}
.s-rows{margin:8px 14px 0}
.s-rows div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #efe8e0;font-size:13px}
.s-rows dd{font-weight:800;font-variant-numeric:tabular-nums}
.s-rows .own{color:var(--ng)}
.s-title{font-size:20px;font-weight:900;color:var(--brand);padding:0 14px}
.s-end{font-size:12px;color:var(--sub);padding:6px 14px 0}
.r-btns{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px}
.r-btns a{text-align:center;text-decoration:none}
.btn.sub{background:#fff;border:1.5px solid #d9cfc4;color:var(--ink)}
.r-h{font-size:14px;margin:18px 0 8px}
.r-ends{list-style:none;background:#fff;border-radius:6px;padding:4px 12px;margin-bottom:16px}
.r-ends li{display:flex;gap:10px;padding:9px 0;border-top:1px solid #efe8e0;font-size:12px;color:var(--sub)}
.r-ends li:first-child{border-top:0}
.r-ends li.got{color:var(--ink)}
.r-ends b{flex:none;width:44px}
#result .t-foot{text-align:center}
/* ランキング（総支給額） */
.rank{background:#fff;border-radius:6px;padding:2px 12px 12px;margin-top:8px}
.rank .r-h{margin:12px 0 4px}
.rankhead{font-size:15px;font-weight:700;margin-bottom:10px}
.rankhead b{color:var(--brand);font-size:20px}
.namerow{display:flex;gap:8px}
.namerow input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid #d9cfc4;border-radius:8px;background:#fff;color:var(--ink)}
.namerow .btn{width:auto;flex:none;padding:10px 18px;font-size:15px}
.namerow .btn:disabled{opacity:.55}
.rankmsg{font-size:11px;color:var(--sub);line-height:1.6;margin:6px 0;min-height:1em}
.board{list-style:none;margin:4px 0 0}
.board li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:8px;padding:7px 4px;border-top:1px solid #efe8e0;font-size:13px;align-items:baseline}
.board li.me{background:#fff1e4;border-radius:4px}
.board li.empty{display:block;color:var(--sub);font-size:12px}
.board .no{color:var(--sub);font-variant-numeric:tabular-nums}
.board .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm small{color:var(--sub);font-size:10px;margin-left:6px}
.board .sc{font-weight:800;font-variant-numeric:tabular-nums}
.linerec{border-top:1px dashed #d9cfc4;margin-top:10px;padding-top:12px}
.btn.line{background:#06c755;color:#fff}
.rp-score{font-size:30px;font-weight:900;margin:0;font-variant-numeric:tabular-nums}
.rp-rank{font-size:13px;color:var(--sub);margin:2px 0 14px;min-height:1.4em}
.rp-rank b{color:var(--ink);font-size:17px}
.rp-opt{text-align:left;border:1px solid #e7ded5;border-radius:10px;padding:12px;margin-bottom:10px}
.rp-opt h4{margin:0 0 4px;font-size:14px}
.rp-opt p{margin:0 0 10px;font-size:12px;color:var(--sub);line-height:1.6}
.rp-opt input{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid #d9cfc4;border-radius:8px;margin-bottom:6px}
.rp-msg{min-height:16px;font-size:12px;color:var(--ng)}
.rp-later{background:transparent;border:0;color:var(--sub);font-size:13px;text-decoration:underline;padding:6px}
.choice.show ~ .dev-bar,.hist.show ~ .dev-bar{display:none}
/* ---------- 企画書どおりに（2026-10-22） ---------- */
.toast .t-app{display:block;font-size:10px;color:var(--brand);margin-bottom:1px}
.toast.goal .t-app{color:#fff}
.toast.app{border-left:5px solid var(--brand)}
/* エンド A・C：ロック画面 */
.ls{text-align:center;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3);margin:6px 0 26px}
.ls-d{font-size:14px;font-weight:600;opacity:.9}
.ls-t{font-size:76px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
#end{padding-top:max(46px,env(safe-area-inset-top))}
#end.morning .ls{color:#3a2a1c;text-shadow:none}
.e-chat{margin-top:14px;background:#f6f2ee;border-radius:14px;overflow:hidden;animation:pop .35s ease}
.e-chat-h{padding:10px 14px;font-size:13px;font-weight:700;border-bottom:1px solid #e7ded5;transition:color .4s,background .4s}
.e-chat-h.chg{background:#fff1e6;color:var(--brand)}
.e-chat-b{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.e-chat-b .cm{font-size:13px}
/* エンド B：机の上 */
.ph.off .scr::after{opacity:1!important;transition:opacity .4s}
.desk-next{position:absolute;left:16px;right:16px;bottom:calc(66px + env(safe-area-inset-bottom) + var(--devh,0px));z-index:9;width:auto}
/* ---------- ドラッグで読み取る ---------- */
#grid,#grid .ph,.p-me{touch-action:none;-webkit-user-select:none;user-select:none}
.ph.lift{opacity:.35}
.ph.ghost{position:absolute;z-index:40;pointer-events:none;transform:rotate(0deg) scale(1.06);filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.ph.hover{outline:3px solid var(--ok);outline-offset:4px;border-radius:12px}
.own:not(.big) .dev::before{content:"";position:absolute;inset:-5px;border-radius:12cqw;border:2px dashed rgba(255,255,255,.45);pointer-events:none}
.c-act.b{background:var(--blue);animation:none}
.c-qr.out canvas{width:58cqw;height:58cqw;animation:none}
.ph:not(.big) .st-done .c-qr.out canvas,.ph:not(.big) .card.st-done .c-qr.out canvas{outline:2.4cqw solid var(--ok);animation:pulse .6s infinite}
.card.st-over .c-qr.out canvas{outline:2.4cqw solid var(--ng)}
/* 画面下の出勤QR・退勤QR（端末をここへドラッグ） */
.qrbar{position:absolute;left:calc(max(12px,env(safe-area-inset-left)) + 44px);right:calc(max(12px,env(safe-area-inset-right)) + 96px);bottom:calc(10px + env(safe-area-inset-bottom) + var(--devh,0px));z-index:3;display:flex;gap:10px;justify-content:center}
.qrc{flex:1;max-width:120px;height:96px;border-radius:8px;background:#f7f4ec;box-shadow:0 4px 10px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-top:8px solid var(--brand)}
.qrc.out{border-top-color:var(--ok)}
.qrc i{width:54px;height:54px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v7H0zM18 0h7v7h-7zM0 18h7v7H0z'/%3E%3Cpath fill='%23fff' d='M1 1h5v5H1zM19 1h5v5h-5zM1 19h5v5H1z'/%3E%3Cpath d='M2 2h3v3H2zM20 2h3v3h-3zM2 20h3v3H2zM9 1h2v2H9zM12 3h2v2h-2zM9 6h3v2H9zM14 8h2v3h-2zM8 10h3v2H8zM18 9h3v2h-3zM10 14h2v3h-2zM13 12h3v2h-3zM20 13h3v3h-3zM9 19h2v4H9zM14 17h3v2h-3zM17 21h4v2h-4zM22 18h2v2h-2zM12 21h2v3h-2zM1 9h3v2H1zM4 13h2v3H4z'/%3E%3C/svg%3E") center/100% no-repeat}
.qrc b{font-size:12px;font-weight:800;color:#2b2f36}
.qrc.hover{outline:3px solid var(--ok);outline-offset:3px;transform:scale(1.06)}
/* プロローグ：自分のスマホ（ドラッグして扉の QR へ） */
.p-door{justify-content:flex-start;padding-top:70px}
.p-me{position:relative;margin-top:34px;width:96px;height:180px;border-radius:16px;background:#2b2f36;box-shadow:inset 0 0 0 3px #4a4f57,0 10px 24px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:11px;cursor:grab;animation:glow 1.6s infinite}
.p-me .pm-cam{width:34px;height:34px;border-radius:8px;border:2px solid #fff;position:relative}
.p-me .pm-cam::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;background:var(--ok)}
.p-me.ghost{position:absolute;z-index:40;pointer-events:none;animation:none}
.p-me.lift{opacity:.3}
#p-papers.hover .paper.top{outline:3px solid var(--ok)}
/* ---------- その後（漫画・動画）・エンドロール ---------- */
.after{position:absolute;inset:0;z-index:35;display:none;flex-direction:column;background:#08080a;color:#eee}
.after.show{display:flex;animation:fade .3s ease}
.af-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px 12px 0}
.af-panel{position:relative;width:min(100%,calc((100dvh - 96px) * 2 / 3));aspect-ratio:2/3;overflow:hidden;border-radius:4px;background:#111;box-shadow:0 0 0 1px #444;animation:fade .45s ease}
.af-panel img,.af-panel video{width:100%;height:100%;object-fit:cover;display:block}
.af-panel img.kb{animation:kb linear both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.22) translateY(4%)}}
.af-caps{position:absolute;inset:12px;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.af-caps .sp{flex:1}
.af-caps .ap{background:rgba(250,250,250,.96);color:#111;border-radius:12px;padding:8px 11px;box-shadow:0 2px 8px rgba(0,0,0,.5);font-size:13.5px;line-height:1.55}
.af-caps .ap .el-hd{display:flex;align-items:center;gap:6px;font-size:11px;color:#777;margin-bottom:2px}
.af-caps .ap .el-hd i{width:16px;height:16px;border-radius:4px;background:var(--brand);color:#fff;font-style:normal;font-size:10px;display:grid;place-items:center}
.af-caps .ap .el-hd b{font-weight:700;color:#333}
.af-caps .ap .el-hd span{margin-left:auto}
.af-caps .m{background:#fff;color:#111;border-radius:16px 16px 16px 4px;padding:7px 12px;font-size:14px;line-height:1.55;max-width:88%;align-self:flex-start;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.af-caps .m b{display:block;font-size:11px;color:#777;font-weight:600}
.af-caps .tm{align-self:center;margin-top:8%;font-size:46px;font-weight:700;color:#fff;text-shadow:0 2px 10px #000;font-variant-numeric:tabular-nums}
.af-caps .hw{position:absolute;top:36.5%;left:61%;transform:translateX(-50%) rotate(-4deg);font-family:"Klee One","Hiragino Maru Gothic ProN","Yu Gothic",cursive;font-size:15px;color:#1d3f8f;white-space:nowrap}
.af-panel.v{width:min(100%,calc((100dvh - 96px) * 9 / 16));aspect-ratio:9/16}
.af-panel.v .af-caps{inset:0}
/* 灯ったスマホの画面の中に出す（Kling の動画 b.mp4 の位置。元絵のときは画面の下寄り） */
.af-panel.v .af-caps .sub{position:absolute;left:8%;width:80%;top:54%;text-align:center;font-size:16px;font-weight:700;color:#3a3d42;letter-spacing:.02em;transform:rotate(-1.5deg);opacity:0;transition:opacity 1.2s}
.af-panel.v.still .af-caps .sub{left:0;width:100%;top:58%;font-size:18px;color:#e8fff1;text-shadow:0 0 12px #2bd67b,0 0 3px #000;transform:none}
.af-panel.v .af-caps .sub.lit{opacity:1}
.af-bar{display:flex;align-items:center;gap:10px;padding:10px 14px 0}
.af-dots{flex:1;display:flex;gap:5px}
.af-dots i{flex:none;width:7px;height:7px;border-radius:50%;background:#3a3842}
.af-dots i.lit{background:#ddd}
.af-snd,.af-skip{font-size:12px;color:#aaa;border:1px solid #3a3842;border-radius:999px;padding:5px 12px;background:transparent}
.af-snd.off{text-decoration:line-through;opacity:.6}
.af-hint{text-align:center;font-size:11px;color:#666;padding:6px 0 max(12px,env(safe-area-inset-bottom));min-height:30px}
.roll{position:absolute;inset:0;z-index:36;display:none;overflow:hidden;background:#000;color:#eee}
.roll.show{display:block;animation:fade .6s ease}
.ro-bg{position:absolute;inset:0}
.ro-img{width:100%;height:100%;object-fit:cover;opacity:.4;animation:ro-zoom 8s ease-out both}
@keyframes ro-zoom{from{transform:scale(1.02);opacity:0}15%{opacity:.4}to{transform:scale(1.1);opacity:.4}}
.ro-stats{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;gap:24px;padding:0 22px 40px;text-align:center;font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif}
.roll.stats .ro-stats{display:flex}
.ro-stats .st{opacity:0;animation:ro-in 1.2s ease forwards}
.ro-stats p{font-size:16px;line-height:1.85;letter-spacing:.05em;color:#ddd}
.ro-stats .st:nth-last-child(2) p{font-size:18px;font-weight:700;color:#e9d9a0}
.ro-stats small{position:absolute;left:18px;right:18px;bottom:62px;font-size:10px;line-height:1.6;color:#888;opacity:0;animation:ro-in 1.2s ease forwards;font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif}
@keyframes ro-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ro-view{position:absolute;left:0;right:0;top:0;bottom:112px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 calc(100% - 56px),transparent 100%)}
.roll.stats .ro-view,.roll.fin .ro-view{visibility:hidden}
.ro-col{position:absolute;left:20px;right:20px;top:0;display:flex;flex-direction:column;gap:16vh;text-align:center;line-height:2.1;letter-spacing:.06em;text-shadow:0 1px 8px #000,0 0 2px #000;will-change:transform}
.ro-blk .gap{height:.9em}
.ro-blk.title{font-size:30px;letter-spacing:.3em;font-weight:700}
.ro-blk.cast{font-size:14px;color:#ddd}
.ro-blk.cast>p:first-child{font-size:16px;letter-spacing:.3em;color:#fff}
.ro-blk .role{font-size:11px;color:#999;line-height:1.5}
.ro-blk .name{font-size:16px;line-height:1.6;margin-bottom:10px}
.ro-blk.cr{font-size:13px;line-height:2;color:#ccc}
.ro-fin{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:18px;letter-spacing:.14em;animation:fade 2s ease}
.roll.fin .ro-fin{display:flex}
.ro-lyr{position:absolute;left:16px;right:16px;bottom:66px;text-align:center;font-size:14px;letter-spacing:.08em;color:#f2f2f2;text-shadow:0 1px 6px #000,0 0 2px #000;opacity:0;transition:opacity .4s}
.ro-lyr.lit{opacity:.9}

.ro-bar{position:absolute;right:12px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:2}
.after.show ~ .mute,.roll.show ~ .mute,.after.show ~ .dev-bar,.roll.show ~ .dev-bar{display:none}
/* 漫画の吹き出し（依頼者フィードバック：セリフ付きに）。位置は AFTER の bb の 左%・上%。改行は文中の 
 だけ */
.af-caps .bb{position:absolute;max-width:84%;background:#fff;color:#111;border:2px solid #111;border-radius:18px;padding:7px 14px;font-size:15px;font-weight:700;line-height:1.5;text-align:center;white-space:pre;box-shadow:0 2px 6px rgba(0,0,0,.35);opacity:0;animation:bb-in .35s ease forwards}
/* しっぽ：黒い三角（線）の上に白い三角を重ねる */
.af-caps .bb::before,.af-caps .bb::after{content:"";position:absolute;width:0;height:0;border-style:solid;border-color:transparent}
.af-caps .bb::before{bottom:-14px;border-width:14px 8px 0;border-top-color:#111}
.af-caps .bb::after{bottom:-10px;border-width:11px 6px 0;border-top-color:#fff}
.af-caps .bb.t-l::before{left:20px}.af-caps .bb.t-l::after{left:22px}
.af-caps .bb.t-r::before{right:20px}.af-caps .bb.t-r::after{right:22px}
/* 心の声：点線の枠と、小さな丸のしっぽ */
.af-caps .bb.th{border-style:dashed;border-radius:24px;font-weight:600}
.af-caps .bb.th::before,.af-caps .bb.th::after{border:2px solid #111;border-radius:50%;background:#fff}
.af-caps .bb.th::before{width:10px;height:10px;bottom:-15px}
.af-caps .bb.th::after{width:6px;height:6px;bottom:-25px}
.af-caps .bb.th.t-r::before{right:26px}.af-caps .bb.th.t-r::after{right:20px}
.af-caps .bb.th.t-l::before{left:26px}.af-caps .bb.th.t-l::after{left:20px}
/* 知らない人の声 */
.af-caps .bb.stranger{background:#e9e9e9}
.af-caps .bb.stranger::after{border-top-color:#e9e9e9}
@keyframes bb-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
/* ---------- 遊んだあとのアンケート ---------- */
.endpop{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6)}
.endpop.show{display:flex;animation:fade .25s ease}
.ep-card{position:relative;width:100%;max-width:360px;max-height:100%;overflow-y:auto;background:#fff;color:var(--ink);border-radius:14px;padding:26px 20px 20px;text-align:center}
.ep-x{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:transparent;font-size:22px;color:var(--sub)}
.ep-head{font-size:16px;font-weight:800;margin:0 0 14px}
.ep-label{font-size:12px;color:var(--sub);margin:0 0 6px}
.stars{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.star{font-size:30px;color:#ddd;cursor:pointer;line-height:1;user-select:none;-webkit-user-select:none}
.star.lit{color:#f5b301}
.fb-text{width:100%;height:84px;border:1px solid #ddd;border-radius:10px;padding:10px;font:inherit;font-size:14px;resize:none;margin-bottom:6px}
.fb-err{min-height:18px;font-size:12px;color:var(--ng);margin:0 0 6px}
.fb-note{font-size:11px;line-height:1.6;color:var(--sub);margin:4px 0 10px}
.fb-note a{color:inherit}
.fb-send,.portal-btn{width:100%}
.fb-send:disabled{opacity:.5}
.fb-thanks{display:none;font-size:14px;padding:18px 0}
.ep-div{height:1px;background:#eee;margin:18px 0 14px}
.portal-pitch{font-size:12px;color:var(--sub);line-height:1.7;margin:0 0 10px}
.endpop.show ~ .dev-bar,.endpop.show ~ .mute{display:none}
/* ---------- その後 v2：1ページ3〜4コマの漫画。文字はページ上の決まった位置に順に出す ---------- */
.af-caps .at{position:absolute;opacity:0;animation:bb-in .35s ease forwards;margin:0}
.af-caps .ap.at{font-size:11px;line-height:1.45;padding:6px 8px;border-radius:9px}
.af-caps .ap.at .el-hd{font-size:9.5px}
.af-caps .ap.at .el-hd i{width:13px;height:13px;font-size:8px}
.af-caps .m.at{font-size:11px;line-height:1.45;padding:6px 9px;max-width:none}
.af-caps .m.at b{font-size:9.5px}
.af-caps .hw.at{transform:rotate(-4deg);font-size:12px;text-align:center;background:#fff;white-space:nowrap;overflow:hidden}
.af-panel.pg .af-caps{inset:0}
.af-panel.pg .af-caps .bb{font-size:12.5px;padding:5px 10px;border-radius:14px}
.af-panel.all .af-caps>*{animation-delay:0s!important}