/* ============================================================
   parts.css — 部品の見た目(部品1個=1ブロック)。
   フィルムの質感・小さな飾り文字(5〜12px)はここだけ。screens.jsに寸法・色を書かない。
   ============================================================ */

/* ── 部品: topbar(←+題+右) ───────────────────────── */
.tbar{flex:none;position:relative;min-height:44px;margin:calc(14px + env(safe-area-inset-top)) 16px 0;z-index:12}
.tbar .side{display:flex;align-items:flex-start;justify-content:space-between}
.backbtn{width:44px;height:44px;border-radius:var(--r-m);background:rgba(255,244,227,.1);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.tbar .mid{position:absolute;left:56px;right:56px;top:0;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
.tbar .mid .ttl{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;white-space:nowrap;overflow:hidden;max-width:100%}
.tbar .mid.small .ttl{font-size:20px;padding-top:10px}

/* ── 部品: cutFrame(フィルムの1コマ 78×76) ───────────── */
.cutf{position:relative;width:78px;height:76px;background:var(--film-dark);flex:none;display:block;padding:0;text-align:left}
.cutf .tape{position:absolute;inset:0;background:var(--film-grad);
  -webkit-mask-image:repeating-linear-gradient(90deg,transparent 0 6px,#000 6px 10.3px),linear-gradient(180deg,#000 0 2px,transparent 2px 6.5px,#000 6.5px 69.5px,transparent 69.5px 74px,#000 74px 76px);
  mask-image:repeating-linear-gradient(90deg,transparent 0 6px,#000 6px 10.3px),linear-gradient(180deg,#000 0 2px,transparent 2px 6.5px,#000 6.5px 69.5px,transparent 69.5px 74px,#000 74px 76px);
  -webkit-mask-position:var(--mox,0px) 0,0 0;mask-position:var(--mox,0px) 0,0 0;
  -webkit-mask-composite:source-over;mask-composite:add}
.cutf .edge{position:absolute;left:0;right:0;height:5.5px;font-family:var(--font-num);font-size:5px;font-style:normal;line-height:5.5px;letter-spacing:.2em;color:var(--film-edge);padding-left:3px;white-space:nowrap;overflow:hidden}
.cutf .edge.top{top:6.5px}
.cutf .edge.bot{top:64.5px}
.cutf .edge.teal{color:var(--film-edge2)}
.cutf .win{position:absolute;left:0;top:12px;width:78px;height:52px;overflow:hidden;background:var(--screen);display:block}
.cutf .win .ph{position:absolute;inset:-8px;background-size:cover;background-position:50% 50%;background-image:var(--img)}
.cutf.blur .win .ph{inset:-10px;filter:blur(7px) brightness(.72) saturate(.8)}
.cutf .win .shade{position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(0deg,rgba(10,10,14,.86),rgba(10,10,14,0))}
.cutf .chip{position:absolute;left:4px;bottom:4px;display:flex;align-items:center;gap:4px;z-index:2}
.cutf .chip .av{width:15px;height:15px;flex:none;border-radius:4px;background-size:cover;background-position:50% 50%;border:1px solid rgba(255,244,227,.45);box-sizing:border-box;background-image:var(--img)}
.cutf .chip .tx{font-family:var(--font-num);font-size:8.5px;font-weight:800;font-style:normal;color:rgba(255,244,227,.92);white-space:nowrap}
.cutf .dimlay{position:absolute;left:0;top:12px;width:78px;height:52px;background:rgba(25,25,32,.72);z-index:2;pointer-events:none}
.cutf .xbtn{position:absolute;right:5px;top:17px;width:24px;height:24px;border-radius:var(--r-2xs);background:linear-gradient(rgba(255,244,227,.12),rgba(255,244,227,.12)),rgba(12,12,17,.55);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;z-index:3;box-shadow:0 2px 8px rgba(8,8,11,.6);transition:transform .12s}
.cutf .xbtn:active{transform:scale(.9)}
.cutf .xbtn::before{content:"";position:absolute;inset:-10px} /* 当たり判定44px */
.cutf .selfring{position:absolute;left:0;top:12px;width:78px;height:52px;box-shadow:inset 0 0 0 2px rgba(255,244,227,.9);z-index:2;pointer-events:none}
.cutf .plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,238,210,.92)}
.cutf .inbd{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,238,210,.3)}

/* ── 部品: fan(コマの扇+漏れ光+まんなかの＋) ───────── */
.fan{position:relative;height:238px}
.fan .leak{position:absolute;left:50%;bottom:-20px;width:250px;height:22px;margin-left:-125px;pointer-events:none;z-index:3;opacity:.5;
  background:radial-gradient(40% 66% at 22% 0%,rgba(255,107,107,.85),rgba(255,107,107,0) 72%),radial-gradient(40% 66% at 50% 0%,rgba(255,214,110,.9),rgba(255,201,60,0) 72%),radial-gradient(40% 66% at 78% 0%,rgba(78,205,196,.85),rgba(78,205,196,0) 72%);
  mix-blend-mode:screen;filter:blur(3px)}
.fan .fslot{position:absolute;transform:rotate(var(--rot)) scale(var(--sc));z-index:var(--z);box-shadow:0 8px 22px rgba(10,10,14,.5)}
.fan .addwrap{position:absolute;left:50%;top:130px;margin-left:-39px;margin-top:-38px;transform:scale(1.5);z-index:9;box-shadow:0 10px 26px rgba(8,8,11,.6)}

/* ── 部品: reelRing(回る文字の輪72px) ──────────────── */
.reelw{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;width:76px;padding:0;transition:transform .12s}
.reelw:active{transform:scale(.95)}
.reel{position:relative;display:block;width:72px;height:72px;border-radius:999px;background:#08080B}
.reel svg{position:absolute;inset:0;width:100%;height:100%;animation:reelSpin 26s linear infinite;pointer-events:none}
.reel svg text{font-family:var(--font-num);font-size:6.6px;font-weight:800;letter-spacing:.06em;fill:var(--film-ring)}
.reelw.dim .reel svg text{fill:var(--film-ring-dim)}
.reel .in{position:absolute;inset:10%;border-radius:999px;border:1px solid var(--bg);box-sizing:border-box;background-clip:padding-box;background-size:cover;background-position:50% 50%;background-image:var(--img)}
.reelw .nm{font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;line-height:1.1;max-width:76px;overflow:hidden;text-overflow:ellipsis}
.reelw.dim .nm{font-weight:700;color:var(--ink-soft)}

/* ── 部品: epCard(エピソード札 118×157) ─────────────── */
.epc{position:relative;width:118px;height:157px;flex:none;border-radius:var(--r-l);overflow:hidden;background:#0A0A0E;box-shadow:inset 0 0 0 1px rgba(126,221,214,.34);padding:0;text-align:left;transition:transform .12s}
.epc:active{transform:scale(.98)}
.epc .ph{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-image:var(--img)}
.epc .grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,11,.92) 6%,rgba(8,8,11,.22) 48%,rgba(8,8,11,.74))}
.epc .top{position:absolute;left:9px;right:9px;top:10px;display:flex;flex-direction:column;gap:5px}
.epc .lab{font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:.3em;color:rgba(255,244,227,.6);line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.epc .ttl{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);line-height:1.3;text-wrap:pretty;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.epc .foot{position:absolute;left:9px;right:9px;bottom:10px;display:flex;align-items:center;gap:6px;min-width:0}
.epc .cav{width:18px;height:18px;flex:none;border-radius:6px;background-size:cover;background-position:50% 50%;border:1.2px solid rgba(255,244,227,.8);box-sizing:border-box;background-image:var(--img)}
.epc .cnm{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,244,227,.9);line-height:1.2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ── 部品: crewRow(行)+avatarStack(顔の重なり) ─────── */
.crow{width:100%;min-height:78px;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-m);background:var(--face-1);text-align:left;transition:transform .12s,opacity .2s}
.crow:active{transform:scale(.99)}
.crow .tile{width:56px;height:56px;flex:none;border-radius:var(--r-m);background-size:cover;background-position:50% 50%;background-image:var(--img)}
.ctile{display:block;width:var(--ctsz,44px);height:var(--ctsz,44px);flex:none;border-radius:var(--r-s);background:var(--well) center/cover no-repeat;background-image:var(--img)}
.crow .tile.s54{width:54px;height:54px}
.crow .mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.crow .nm{font-size:17px;font-weight:800;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow.sel{background:rgba(78,205,196,.1);box-shadow:inset 0 0 0 1.5px rgba(78,205,196,.55)}
.crow.dimmed{opacity:.4}
.avs{display:flex}
.avs i{width:var(--avsz,22px);height:var(--avsz,22px);border-radius:var(--avr,7px);background-size:cover;background-position:50% 50%;border:2px solid #232229;box-sizing:border-box;background-image:var(--img)}
.avs i+i{margin-left:-6px}
.rdo{width:26px;height:26px;flex:none;border-radius:999px;border:2px solid rgba(255,244,227,.3);display:flex;align-items:center;justify-content:center;color:#062925;position:relative}
.rdo::before{content:"";position:absolute;inset:-9px}
.rdo.on{background:var(--accent-t);border-color:var(--accent-t)}
.xrnd{width:44px;height:44px;flex:none;border-radius:var(--r-m);background:var(--face-2);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .12s}
.xrnd:active{transform:scale(.94)}

/* ── 部品: sheet(下からの紙) ────────────────────── */
#sheetHost .scrim{position:absolute;inset:0;background:var(--scrim)}
.sheetp{position:absolute;left:0;right:0;bottom:0;background:#211F28;border-radius:28px 28px 0 0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));max-height:88%;display:flex;flex-direction:column;animation:fadeUp .22s ease}
.sheetp .grab{width:44px;height:5px;flex:none;border-radius:999px;background:rgba(255,244,227,.25);margin:0 auto 14px}
.sheetp .shead{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:20px}
.sheetp .sttl{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ink)}
.sheetp .sx{position:absolute;right:0;top:-2px;width:44px;height:44px;border-radius:999px;background:var(--face-2);color:var(--ink);display:flex;align-items:center;justify-content:center}
.sheetp .sbody{overflow-y:auto;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.phtile{width:84px;height:84px;flex:none;border-radius:var(--r-m);background:var(--well);display:flex;align-items:center;justify-content:center;color:var(--ink-dim);background-size:cover;background-position:50% 50%;position:relative}
.phtile.empty{border:2px dashed rgba(255,244,227,.4);background:transparent}
.phtile .plusb{position:absolute;right:-7px;bottom:-7px;width:26px;height:26px;border-radius:9px;background:var(--accent-y);color:#5A3A00;display:flex;align-items:center;justify-content:center;font-weight:900}
.togrow{display:flex;align-items:center;justify-content:center;gap:12px}
.togrow .tl{font-size:15px;font-weight:800;color:var(--ink)}
.togrow .tl.off{color:var(--ink-soft);font-weight:700}
.togrow .tsw{width:52px;height:32px;border-radius:999px;background:var(--well);position:relative;flex:none;transition:background .2s}
.togrow .tsw i{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:999px;background:var(--ink);transition:left .2s}
.togrow .tsw.on{background:var(--accent-t)}
.togrow .tsw.on i{left:23px}

/* ── 部品: gateShell(うしろをぼかした前室) ─────────── */
.gate{position:absolute;inset:0;background:var(--bg);overflow:hidden}
.gate .gbg{position:absolute;inset:0;filter:blur(9px) brightness(.45);transform:scale(1.06);pointer-events:none}
.gate .gfg{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:calc(48px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));background:rgba(25,25,32,.35)}

/* ── 部品: codeBox(合言葉6マス・見えない入力欄1つ) ──── */
.cdwrap{position:relative;width:100%}
.cdwrap input{position:absolute;inset:0;opacity:0;border:none;background:none;color:transparent;caret-color:transparent}
.cdbx{display:flex;gap:8px;width:100%}
.cdbx .cell{flex:1 1 0;height:64px;border-radius:var(--r-m);background:var(--face-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:26px;font-weight:700;color:var(--ink);font-style:normal}
.cdbx .cell.empty{background:rgba(255,244,227,.06);border:2px dashed rgba(255,244,227,.34)}
.cdbx .caret{width:2px;height:26px;background:var(--brand);animation:cblink 1s step-end infinite}
@keyframes cblink{50%{opacity:0}}

/* ── 部品: player(全画面の縦プレーヤー+データ帯) ────── */
.plyr{position:absolute;inset:0;background:#000;display:flex;flex-direction:column}
.plyr .band{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-family:var(--font-num);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--film-edge);background:#000;z-index:5}
.plyr .band.top{padding-top:env(safe-area-inset-top);height:calc(44px + env(safe-area-inset-top))}
.plyr .band.bot{padding-bottom:env(safe-area-inset-bottom);height:calc(44px + env(safe-area-inset-bottom))}
.plyr .band .y{color:var(--accent-y)}
.plyr .stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:var(--screen)}
.plyr .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plyr .stage .poster{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-image:var(--img)}
.plyr .stage .poster.lockblur{filter:blur(14px) brightness(.6)}
.plyr .bigplay{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:999px;background:rgba(10,10,14,.55);color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:6}
.plyr .pback{position:absolute;left:14px;top:14px;z-index:8}
.plyr .who{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;z-index:6;max-width:70%}
.plyr .who .av{width:24px;height:24px;flex:none;border-radius:8px;background-size:cover;background-position:50% 50%;border:1.2px solid rgba(255,244,227,.7);background-image:var(--img)}
.plyr .who .nm{font-size:13px;font-weight:800;color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plyr .who .ago{font-size:11px;color:rgba(255,244,227,.75);text-shadow:0 1px 6px rgba(0,0,0,.7);flex:none}
.plyr .rail{position:absolute;right:12px;bottom:24px;display:flex;flex-direction:column;gap:18px;align-items:center;z-index:6}
.plyr .rail button{width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff}
.plyr .rail button svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.plyr .rail .n{font-size:12px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.plyr .rail .like.on{color:var(--brand)}
.plyr .lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:7;text-align:center;padding:0 32px}
.plyr .lock .t{font-size:15px;font-weight:700;color:var(--ink);text-shadow:0 1px 8px rgba(0,0,0,.8);line-height:1.6}
.plyr .epinfo{position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;flex-direction:column;gap:8px;z-index:6;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0))}
.plyr .epinfo .ln{display:flex;align-items:baseline;gap:12px;font-family:var(--font-mono)}
.plyr .epinfo .k{font-size:8px;letter-spacing:.3em;color:rgba(255,244,227,.55);width:44px;flex:none}
.plyr .epinfo .v{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.04em}

/* ── 部品: bubble(トーク) ───────────────────────── */
.msgs{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 0;overscroll-behavior:contain}
.bname{font-size:12px;font-weight:700;color:var(--ink-dim);margin:12px 16px 3px 56px}
.brow{display:flex;gap:8px;padding:2px 16px;align-items:flex-end}
.brow.mine{justify-content:flex-end}
.bav{width:28px;height:28px;flex:none;border-radius:9px;background-size:cover;background-position:50% 50%;background-image:var(--img)}
.bavgap{width:28px;flex:none}
.bub{max-width:72%;padding:10px 14px;border-radius:16px;background:var(--surface);color:var(--ink);font-size:15px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.brow.mine .bub{background:var(--accent-t);color:#062925;font-weight:700}
.btime{font-size:10px;color:var(--ink-faint);flex:none;margin:0 2px 2px}
.btl{font-size:10px;color:var(--ink-faint);margin:3px 16px 4px 56px}
.btl.mine{text-align:right;margin:3px 20px 4px 16px}
.bmed{width:170px;border-radius:14px;overflow:hidden;background:#000;position:relative;padding:0;display:block}
.bmed img{width:100%;display:block;min-height:90px;object-fit:cover}
.bmed .vmark{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:999px;background:rgba(10,10,14,.55);color:var(--ink);display:flex;align-items:center;justify-content:center}
.readmark{font-size:10px;color:var(--ink-faint);text-align:right;margin:3px 20px 0}
.unline{display:flex;align-items:center;gap:10px;margin:16px 16px;color:var(--brand-2);font-size:12px;font-weight:800;flex:none}
.unline::before,.unline::after{content:"";flex:1;height:1px;background:rgba(255,148,148,.4)}
.talkbar{flex:none;display:flex;gap:10px;align-items:center;padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hairline)}
.talkbar .plus{width:44px;height:44px;flex:none;border-radius:999px;background:rgba(255,201,60,.22);color:var(--accent-y);display:flex;align-items:center;justify-content:center}
.talkbar input{flex:1 1 auto;min-width:0;height:44px;border-radius:999px;background:var(--face-1);border:1px solid transparent;padding:0 18px}
.talkbar .sendb{width:44px;height:44px;flex:none;border-radius:999px;background:var(--accent-t);color:#062925;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.talkbar .sendb:active{transform:scale(.92)}
.talkbar .sendb.dim{background:var(--face-2);color:var(--ink-faint)}

/* ── 部品: バッジ・知らせ ─────────────────────── */
.bwrap{position:relative;display:inline-flex}
.nbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--brand);color:#FFF4E3;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;z-index:2}
.toast{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));background:var(--surface);color:var(--ink);z-index:80;border-radius:var(--r-s);padding:13px 16px;font-size:14px;line-height:1.5;box-shadow:var(--shadow-2);animation:fadeUp .2s}
.toast.err{color:var(--err)}
.toast.ok{color:var(--ok)}

/* ── 送ったカットの箱(設計 Black Frame 28a) ─────────── */
.sentbox{position:relative;flex:none;display:flex;flex-direction:column;gap:6px;padding:14px 12px 18px;border-radius:var(--r-l);background:rgba(255,244,227,.06);border:1px solid rgba(255,244,227,.12);overflow:hidden}
.sentbox .crewln{display:flex;align-items:center;gap:12px;padding:5px 0;transition:opacity .2s}
.sentbox .crewln .av{width:40px;height:40px;flex:none;border-radius:var(--r-s);background-size:cover;background-position:50% 50%;transition:opacity .2s;background-image:var(--img)}
.sentbox .crewln .nm{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.sentbox .crewln.off .av,.sentbox .crewln.off .nm{opacity:.3}
.sentbox .film{position:relative;display:flex;align-items:center;gap:16px;height:96px;margin:8px -12px 0;padding:0 12px 0 24px;overflow-x:auto;overflow-y:hidden;transition:opacity .2s}
.sentbox .film .cutf{transform:rotate(var(--rot,0deg)) scale(1.1);box-shadow:0 10px 24px rgba(10,10,14,.55)}
.sentbox .spill{position:absolute;left:50%;bottom:0;width:250px;height:22px;margin-left:-125px;pointer-events:none;z-index:3;transition:opacity .2s;opacity:.5;
  background:radial-gradient(40% 66% at 22% 0%,rgba(255,107,107,.85),rgba(255,107,107,0) 72%),radial-gradient(40% 66% at 50% 0%,rgba(255,214,110,.9),rgba(255,201,60,0) 72%),radial-gradient(40% 66% at 78% 0%,rgba(78,205,196,.85),rgba(78,205,196,0) 72%);
  mix-blend-mode:screen;filter:blur(3px)}
.sentbox.alloff .film,.sentbox.alloff .spill{opacity:.3}

/* ── 送る画面の網(コマの格子) ─────────────────── */
.pickgrid{display:flex;flex-wrap:wrap;gap:10px 8px;padding:4px 16px}
.pickgrid .cutf{box-shadow:0 8px 22px rgba(10,10,14,.5)}

/* ── ホームの上下のかすみ ─────────────────────── */
.fadeTop{position:absolute;left:0;right:0;top:0;height:calc(96px + env(safe-area-inset-top));background:linear-gradient(180deg,var(--bg) 56%,rgba(25,25,32,0));pointer-events:none;z-index:10}
.fadeBot{position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(0deg,var(--bg) 40%,rgba(25,25,32,0));pointer-events:none;z-index:5}

/* ── おかえりの顔えらび ───────────────────────── */
.facepick{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.facepick button{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;padding:0}
.facepick .fp{width:56px;height:56px;border-radius:var(--r-s);background-size:cover;background-position:50% 50%;box-sizing:border-box;background-image:var(--img)}
.facepick button.on .fp{box-shadow:0 0 0 2.5px var(--brand)}
.facepick .fn{font-size:11px;font-weight:700;color:var(--ink);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facepick button:not(.on) .fn{color:var(--ink-soft)}

/* ── 招待の前室 ─────────────────────────────── */
.appicon{width:84px;height:84px;border-radius:22px;background:#0E0E13;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(0,0,0,.5)}

/* ── 部品: cropper(写真の切り抜き) ─────────────── */
.cropov{position:absolute;inset:0;z-index:90;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:20px}
.croppn{width:100%;max-width:340px;background:#211F28;border-radius:var(--r-l);padding:18px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:var(--shadow-2)}
.croptt{font-size:var(--fs-s);font-weight:800;color:var(--ink)}
.cropvp{position:relative;width:280px;height:280px;border-radius:var(--r-m);overflow:hidden;background:var(--screen);touch-action:none;cursor:grab}
.cropvp img{position:absolute;left:0;top:0;max-width:none;will-change:transform;pointer-events:none}
.cropzm{width:100%;height:44px;accent-color:var(--brand)}
.croprw{display:flex;gap:10px;width:100%}
.cropbt{flex:1 1 0;height:48px;border-radius:var(--r-m);background:var(--face-2);color:var(--ink);font-size:var(--fs-s);font-weight:800;transition:transform .12s}
.cropbt:active{transform:scale(.97)}
.cropbt.ok{background:var(--ink);color:var(--on-brand)}

/* たしかめ(確認)の器: 中身=設計の紙の「退室のたしかめ」の写しそのもの(P.kakunin)。
   器は全画面に被せる1枚だけ=中の幕とシートは紙の宣言(absolute)がそのまま効く */
/* 被せ物の置き場は1本: 全部アプリの器(#shell=柱)の中に置く。
   窓全体基準(fixed)は禁止=PCで柱の外いっぱいに広がる(2026-08-21実測) */
.kakunin{position:absolute;inset:0;z-index:80}