/* YULLBELL UI (2026-11 全面リデザイン)
   コンセプト: 当時の不便さはそのまま、見た目は今。
   - 描き方はアイコンと同じ: フラットな面 + オフホワイトの太い輪郭線 +
     ピル形のキー。グラデーションの立体表現・ぼかした落ち影は使わない。
   - 当時の質感を残すのは液晶だけ (黄緑のバックライト + ドットフォント)。
   - 赤 (--signal) は「鳴った / 気づいてほしい」ときだけ。
   守っている実機由来の制約 (変更しないこと):
   - ステージ 390×844 固定 + 拡縮 (app.js fitStage)
   - デンワはスクロールなし・テンキー 84px・フェイス 104px
   - 状態が変わっても各要素の占有サイズは不変 (中身だけ切り替える)
   - ポケベル液晶は 300×104 固定・10文字
   - ラベル類は折り返さない (nowrap) */
:root{
  --navy:#10233f;
  --navy-deep:#0a1830;
  --paper:#f3f3ee;
  --slate:#27405f;
  --signal:#e5483a;
  --pg:#1d6a45;          /* 公衆電話の緑 (フラット) */
  --pg-deep:#155235;

  --bg:#eeefea;
  --card:#fbfbf8;
  --ink:var(--navy);
  --bg-ink:var(--ink);   /* 旧名 (互換) */
  --panel:var(--card);   /* 旧名 (互換) */
  --muted:#5b6577;
  --line:#cfd3cb;

  --lcd:#b9cc97;
  --lcd-deep:#a9bf88;
  --lcd-ink:#22301a;
  --lcd-dim:#58693f;

  --accent:var(--signal);
  --accent-ink:#fff;
  --led:#ff4b3e;
  --ok:#5f9a3a;
  --hangup:#d63d2f;

  --ui-font:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --lcd-font:"DotGothic16",ui-monospace,"SF Mono",Menlo,"Courier New",monospace;
  --mono:ui-monospace,"SF Mono",Menlo,"Courier New",monospace;
  --outline:5px;
  /* 下部の広告枠の高さ: 320×50 のバナー + 上下の余白 + ホームバー */
  --ad-h:calc(62px + env(safe-area-inset-bottom, 0px));
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1729;
    --card:#11213a;
    --ink:#eceee8;
    --muted:#97a3b6;
    --line:#2a3f5f;
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui-font);
  line-height:1.6;
}
button{font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
button, [role="button"]{min-height:2.25rem;}
button:focus-visible, a:focus-visible, input:focus-visible, label:focus-visible{outline:3px solid var(--signal); outline-offset:2px;}
.wrap{max-width:460px; margin:0 auto; padding:18px 16px 48px;}
.app-head h1{
  display:flex; align-items:center; gap:.5em;
  font-size:1.3rem; font-weight:900; letter-spacing:.28em; margin:2px 2px 14px;
}
/* タイトル左のアイコン。行の高さ (1.3em) 未満に収め、タイトル行の高さを変えない */
.app-mark{width:1.15em; height:1.15em; border-radius:.28em; flex:none;}
footer{margin-top:30px; text-align:center; font-size:.72rem; color:var(--muted);}

/* ---------- 共通ボタン ---------- */
.primary-btn{
  width:100%; min-height:48px;
  background:var(--ink); color:var(--bg); border:2px solid var(--ink);
  border-radius:999px; font-size:.95rem; font-weight:700; letter-spacing:.04em; padding:11px 18px;
}
.primary-btn:active{opacity:.85;}
.primary-btn:disabled{opacity:.4; cursor:not-allowed;}
.ghost-btn{
  width:100%; min-height:46px;
  background:transparent; color:var(--hangup); border:2px solid var(--line);
  border-radius:999px; font-size:.9rem; font-weight:700; padding:10px;
}
.note{color:var(--muted); font-size:.8rem; line-height:1.7;}

/* ---------- タブ (上部固定) ----------
   アイコンのキーと同じピル形のセグメント。高さは旧タブとほぼ同じ (48px) で、
   デンワの縦配分を変えない */
.tabbar{
  position:relative; z-index:30; flex:none;
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  background:var(--card); border:2px solid var(--ink); border-radius:999px;
  padding:3px; margin-bottom:6px;
}
.tab-btn{
  position:relative; background:transparent; color:var(--ink);
  border:0; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:0; padding:7px 0;
  white-space:nowrap; font-feature-settings:"palt";
}
.tab-btn[aria-selected="true"]{background:var(--ink); color:var(--bg);}
.tab-badge{
  position:absolute; top:-5px; right:2px;
  min-width:1.25rem; height:1.25rem; padding:0 5px;
  border-radius:999px; background:var(--signal); color:#fff;
  font-size:.68rem; font-weight:700; line-height:1.25rem; text-align:center;
  box-shadow:0 0 0 2px var(--card);
}
.tab-badge[hidden]{display:none;}
.tab-panel[hidden]{display:none;}
.tab-panel button, .tab-panel input, .tab-panel label, .tab-panel .device{scroll-margin-top:84px;}

/* ================================================================
   端末 (デンワ / ポケベル) = 工業製品として作る (2026-11 改訂)
   - 素材: マットな樹脂。ごく弱い上からの光 + 細かい粒子 (--grain) +
     縁のハイライト / 影で「成形品」の厚みを出す。派手な光沢は使わない。
   - くぼみ (受け台・キーの台座・液晶窓) は内側の影、キーは天面と側面の
     2面で押し込める厚みを出す。
   - 液晶だけが当時の質感 (黄緑 + ドット書体) で、窓にはガラスの映り込み。
   ================================================================ */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --body-edge:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.18);
  --body-drop:0 1px 1px rgba(10,24,48,.25), 0 16px 16px -14px rgba(10,24,48,.5);
  --recess:inset 0 2px 5px rgba(0,0,0,.32), inset 0 -1px 0 rgba(255,255,255,.12);
  --cap-ivory:linear-gradient(180deg,#fdfdf9 0%,#f0f0ea 60%,#e4e5dd 100%);
  --cap-wall:#b4b8ad;
}
.device{
  border-radius:38px;
  padding:20px 18px 22px;
  color:var(--paper);
  position:relative;
}
.device-top{display:flex; align-items:center; justify-content:space-between; padding:0 6px 12px;}
/* 本体に型押しされたロゴ (下に光、上に影) */
.brand{
  font-weight:900; letter-spacing:.34em; font-size:.78rem; color:rgba(255,255,255,.78);
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
}
.brand small{display:block; letter-spacing:.2em; font-size:.52rem; opacity:.62; font-weight:700; margin-top:1px;}
.led{
  width:11px; height:11px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, #6b2a26, #3a1210 70%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.18);
}
.led.on{background:radial-gradient(circle at 35% 30%, #ffd2cc 0 12%, #ff5a49 30%, #d4291b 100%); box-shadow:0 0 0 3px rgba(229,72,58,.25), 0 0 14px 3px rgba(255,75,62,.65);}
.led.calling{background:radial-gradient(circle at 35% 30%, #eaffd9 0 12%, #8fd16a 32%, #4f9a2d 100%); box-shadow:0 0 0 3px rgba(143,209,106,.22), 0 0 14px 3px rgba(143,209,106,.55);}

/* ---------- 液晶 (当時の質感はここだけ) ----------
   黒い枠 + 窓のくぼみ + 斜めのガラスの映り込み */
.lcd{
  background:linear-gradient(180deg,#c3d5a1,#b3c690);
  color:var(--lcd-ink);
  border-radius:10px;
  padding:13px 14px 11px;
  font-family:var(--lcd-font);
  box-shadow:0 0 0 4px #0c1626, 0 0 0 5px rgba(255,255,255,.14), inset 0 3px 6px rgba(20,30,10,.35);
  position:relative;
  overflow:hidden;
}
.lcd::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.22) 0 18%, rgba(255,255,255,0) 18.5% 100%),
    repeating-linear-gradient(0deg, rgba(34,48,26,.05) 0 1px, transparent 1px 3px);
}
.lcd-status{
  display:flex; justify-content:flex-end; gap:8px;
  font-size:.78rem; color:var(--lcd-dim);
  border-bottom:2px dotted rgba(34,48,26,.3);
  padding-bottom:5px; margin-bottom:8px;
  white-space:nowrap;
}
.lcd.flash .lcd-inner{animation:lcdflash .5s steps(1) 3;}
@keyframes lcdflash{50%{opacity:.2;}}
.blind-view{text-align:center; padding:8px 4px 6px;}
/* 状態遷移でレイアウトが動かないよう、各行は固定領域の中で中身だけを
   切り替える (2026-11-14 実機報告の不具合修正を継承) */
.blind-timer{font-size:1.3rem; letter-spacing:.04em; line-height:1.35; color:var(--lcd-ink);
  height:1.35em; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; overflow:hidden;}
.blind-timer.is-ringing{letter-spacing:.02em;}
.dial-dots{font-size:1.05rem; letter-spacing:.42em; color:var(--lcd-ink); margin-top:8px;
  height:3rem; line-height:1.5; display:flex; align-items:center; justify-content:center;
  overflow:hidden;}
.dial-dots[hidden]{visibility:hidden;}
.dial-dots.is-disp{letter-spacing:.08em; font-size:.92rem; word-break:break-all;}
.ring-dots i{font-style:normal; animation:ringdot 1.05s steps(1) infinite;}
.ring-dots i:nth-child(2){animation-delay:.18s;}
.ring-dots i:nth-child(3){animation-delay:.36s;}
@keyframes ringdot{0%,100%{opacity:.15;} 50%{opacity:1;}}

/* ================================================================
   デンワ: 公衆電話 (緑の成形樹脂)
   ================================================================ */
.device.phone-public{
  --hs-1:#33425e; --hs-2:#17243b; --hs-3:#0a1323;
  --cord:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='7'%3E%3Cellipse cx='11' cy='3.5' rx='8.6' ry='2.3' fill='none' stroke='%230d1628' stroke-width='2.6'/%3E%3Cpath d='M4 2.6 Q11 .8 18 2.6' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
  background:var(--grain), linear-gradient(180deg,#2a7b54 0%,#1f6b47 28%,#195c3c 100%);
  box-shadow:var(--body-edge), var(--body-drop);
  display:flex; gap:10px;
  padding:20px 16px 22px 12px;
  /* 角の R は「中の部品の R + 余白」に揃える。大きすぎると角のキーが
     はみ出しそうに見える (2026-11-15 指摘) */
  border-radius:24px;
}
.device.phone-public .device-main{flex:1; min-width:0;}

/* 受話器の列 */
.hs-col{position:relative; flex:none; width:58px; align-self:stretch;}
/* 受け台: 受話器の形より一回り大きいくぼみ */
.hs-well{
  position:absolute; left:0; top:2px; width:58px; height:248px; border-radius:26px 26px 28px 28px;
  background:rgba(0,0,0,.2); box-shadow:var(--recess);
}
.handset{
  position:absolute; left:1px; top:9px; width:56px; height:236px; z-index:2;
  background:transparent; border:0; padding:0; min-height:0;
  transition:transform .22s cubic-bezier(.3,.7,.3,1);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.3)) drop-shadow(0 8px 10px rgba(0,0,0,.2));
}
.hs-svg{display:block; width:100%; height:100%; overflow:visible;}
.hs-s1{stop-color:var(--hs-1);} .hs-s2{stop-color:var(--hs-2);} .hs-s3{stop-color:var(--hs-3);}
.hs-shine{fill:rgba(255,255,255,.13);}
.hs-holes circle{fill:rgba(0,0,0,.5);}
/* 受話器を上げる: 受け台から少し浮いて傾く (本体からははみ出さない範囲) */
.device.phone-public.offhook .handset{transform:translate(3px,-6px) rotate(-3deg);}
.device.phone-public.offhook .handset{filter:drop-shadow(0 8px 6px rgba(0,0,0,.3)) drop-shadow(0 16px 16px rgba(0,0,0,.22));}
/* カールコード: 受話器の下端から本体下部の口金まで。長さは列の高さに合わせて伸びる */
.hs-cord{
  position:absolute; left:50%; top:240px; bottom:30px; width:22px; margin-left:-11px; z-index:1;
  background:var(--cord) center top / 22px 7px repeat-y;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));
}
.hs-boot{
  position:absolute; left:50%; bottom:12px; width:26px; height:26px; margin-left:-13px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #2b3a55, #0b1424 70%);
  box-shadow:0 0 0 3px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2);
}

/* フェイス: 高さは全デザイン共通で 104px 固定 (サイズ統一の基準値) */
.phone-face{
  display:flex; gap:10px; align-items:stretch;
  height:104px; flex:none;
  background:rgba(0,0,0,.16); box-shadow:var(--recess);
  border-radius:16px;
  padding:10px 12px;
  margin:0 2px 12px;
}
/* カード挿入口: 金属の縁取りがついた細いスロット */
.card-slot{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; justify-content:center;}
.slot-line{
  display:block; width:min(100%,220px); height:12px; border-radius:6px;
  background:linear-gradient(180deg,#02070a,#0d1a14);
  box-shadow:0 0 0 3px #b9bdb4, 0 0 0 4px rgba(0,0,0,.35), 0 -1px 0 4px rgba(255,255,255,.35), inset 0 2px 3px rgba(0,0,0,.9);
}
.slot-label{font-size:.6rem; letter-spacing:.2em; color:rgba(255,255,255,.72); font-weight:700;}
/* 硬貨投入口・返却口は全デザインで出さない (HTML 要素は残置) */
.coin-unit{display:none;}
.face-speaker{display:none;}
.device.phone-public.is-home:not(.is-speed) .card-slot{display:none;}
.device.phone-public.is-home:not(.is-speed) .face-speaker{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
}
.face-speaker span{width:6px; height:44px; border-radius:999px; background:rgba(0,0,0,.2); box-shadow:inset 0 2px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.6);}

/* 番号札: 本体に貼られた印刷のプレート */
.own-number{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 2px 12px; padding:4px 10px;
  background:linear-gradient(180deg,#fbfbf6,#ecece4); color:var(--navy); border-radius:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.3);
}
.own-number .label{font-size:.62rem; font-weight:700; letter-spacing:.04em; white-space:nowrap; flex:none; opacity:.75;}
.own-number .num{font-size:1rem; font-weight:900; letter-spacing:.12em; white-space:nowrap; font-variant-numeric:tabular-nums;}

.sub-controls{display:grid; grid-template-columns:1fr; gap:8px; margin-top:14px;}
.sub-btn{
  background:rgba(0,0,0,.16);
  color:rgba(255,255,255,.88); border:0; border-radius:12px;
  box-shadow:var(--recess);
  font-size:.76rem; font-weight:700; padding:7px 4px; letter-spacing:.04em; line-height:1.35;
}
.sub-btn small{display:block; font-size:.58rem; font-weight:400; opacity:.72; letter-spacing:.04em;}
.sub-btn:active{background:rgba(0,0,0,.26);}
.sub-btn:disabled{opacity:.4; cursor:not-allowed;}

/* テンキー: 台座のくぼみに、天面と側面のあるキーキャップ */
.keypad{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px;
  background:rgba(0,0,0,.18); box-shadow:var(--recess);
  border-radius:20px; padding:12px;
}
.key{
  background:var(--cap-ivory);
  color:var(--navy); border:0; border-radius:14px;
  /* テンキーは 84px (2026-11-14 ユーザー指示)。is-denwa では keypad 側の行で固定 */
  height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.06), 0 4px 0 var(--cap-wall), 0 5px 6px rgba(0,0,0,.35);
  transform:translateY(-2px);
  user-select:none; touch-action:manipulation;
  transition:transform .05s, box-shadow .05s;
}
.key .d{font-size:1.7rem; font-weight:700; line-height:1.1; font-family:var(--ui-font);}
.key:active, .key.hit{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 #fff, inset 0 2px 4px rgba(0,0,0,.1), 0 0 0 var(--cap-wall), 0 1px 2px rgba(0,0,0,.35);
}
.key:disabled{opacity:.45; cursor:not-allowed;}
.key:disabled:active{transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, 0 4px 0 var(--cap-wall), 0 5px 6px rgba(0,0,0,.35);}

/* 受話器ボタン: 横長のキーキャップ。通話中は赤いキー */
.call-btn{
  width:100%; margin-top:14px;
  background:var(--cap-ivory);
  color:var(--navy); border:0; border-radius:14px;
  box-shadow:inset 0 1px 0 #fff, 0 4px 0 var(--cap-wall), 0 5px 6px rgba(0,0,0,.35);
  transform:translateY(-2px);
  font-size:.98rem; font-weight:900; letter-spacing:.16em; padding:13px;
  white-space:nowrap;
}
.call-btn.hangup{
  background:linear-gradient(180deg,#f2665a,#e5483a 60%,#d63d2f); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 #9e2a20, 0 5px 6px rgba(0,0,0,.35);
}
.call-btn:active{transform:translateY(2px); box-shadow:inset 0 2px 4px rgba(0,0,0,.12), 0 0 0 var(--cap-wall), 0 1px 2px rgba(0,0,0,.35);}
.call-btn:disabled{opacity:.5; cursor:not-allowed;}

/* ================================================================
   デンワ第2/第3デザイン: 家庭電話 (is-home)
   アイボリーの成形樹脂 + 紺のキー + アイボリーの受話器とコード
   ================================================================ */
.device.phone-public.is-home{
  --hs-1:#fefefb; --hs-2:#ecebe3; --hs-3:#cdcbbf;
  --cord:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='7'%3E%3Cellipse cx='11' cy='3.5' rx='8.6' ry='2.3' fill='none' stroke='%23d9d7cc' stroke-width='2.6'/%3E%3Cpath d='M4 4.6 Q11 6.2 18 4.6' fill='none' stroke='%23000000' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E");
  background:var(--grain), linear-gradient(180deg,#f7f6f0 0%,#ecebe3 35%,#e0dfd5 100%);
  color:var(--navy);
  box-shadow:inset 0 2px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.08), var(--body-drop);
}
.device.phone-public.is-home .brand{color:rgba(16,35,63,.7); text-shadow:0 1px 0 #fff;}
.device.phone-public.is-home .hs-well,
.device.phone-public.is-home .phone-face,
.device.phone-public.is-home .keypad,
.device.phone-public.is-home .sub-btn{background:rgba(16,35,63,.07); box-shadow:inset 0 2px 4px rgba(16,35,63,.16), inset 0 -1px 0 #fff;}
.device.phone-public.is-home .hs-holes circle{fill:rgba(0,0,0,.18);}
.device.phone-public.is-home .hs-shine{fill:rgba(255,255,255,.7);}
.device.phone-public.is-home .hs-boot{background:radial-gradient(circle at 50% 40%, #f4f3ec, #cfcdc2 75%); box-shadow:0 0 0 3px rgba(0,0,0,.06), inset 0 1px 0 #fff;}
.device.phone-public.is-home .slot-label{color:var(--navy);}
.device.phone-public.is-home .own-number{background:var(--navy); color:var(--paper);}
.device.phone-public.is-home .key{
  background:linear-gradient(180deg,#24395c 0%,#172a49 60%,#10213b 100%); color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #050d1b, 0 5px 6px rgba(0,0,0,.3);
}
.device.phone-public.is-home .key:active,
.device.phone-public.is-home .key.hit{box-shadow:inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 #050d1b, 0 1px 2px rgba(0,0,0,.3);}
.device.phone-public.is-home .call-btn{
  background:linear-gradient(180deg,#24395c,#10213b); color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #050d1b, 0 5px 6px rgba(0,0,0,.3);
}
.device.phone-public.is-home .call-btn.hangup{
  background:linear-gradient(180deg,#f2665a,#e5483a 60%,#d63d2f); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 #9e2a20, 0 5px 6px rgba(0,0,0,.3);
}
.device.phone-public.is-home .sub-btn{color:var(--navy);}

/* ---------- 短縮パネル (第3デザインのみ) ---------- */
.speed-dial{margin-top:12px; border-radius:16px; padding:6px 10px;}
.speed-dial[hidden]{display:none;}
.speed-head{display:flex; align-items:center; gap:8px; margin-bottom:5px;}
.speed-title{font-size:.72rem; font-weight:900; letter-spacing:.18em;}
.speed-range{font-family:var(--lcd-font); font-size:.8rem;}
.speed-cycle{
  margin-left:auto; min-height:1.55rem;
  background:var(--cap-ivory); color:var(--navy);
  border:0; border-radius:999px; box-shadow:0 2px 0 var(--cap-wall), 0 3px 3px rgba(0,0,0,.2);
  font-size:.66rem; font-weight:700; padding:1px 11px;
}
.speed-cycle:active{transform:translateY(2px); box-shadow:none;}
.speed-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.speed-btn{
  background:var(--cap-ivory);
  color:var(--navy); border:0; border-radius:10px;
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 var(--cap-wall), 0 4px 4px rgba(0,0,0,.25);
  min-height:44px; padding:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.speed-btn[hidden]{display:none;}
.speed-btn .sd-name{
  font-size:.8rem; font-weight:700; line-height:1.25;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.speed-btn .sd-empty{font-size:.68rem; font-weight:700; color:var(--muted);}
.speed-btn.is-empty{opacity:.75;}
.speed-btn:active{transform:translateY(3px); box-shadow:inset 0 2px 3px rgba(0,0,0,.12);}
.speed-btn:disabled{opacity:.4; cursor:not-allowed;}
/* 短縮つき: カード挿入口の場所 (フェイス 104px の中) に短縮を置く */
.device.phone-public.is-speed .card-slot,
.device.phone-public.is-speed .coin-unit{display:none;}
.device.phone-public.is-speed .speed-dial{
  flex:1; margin:0; padding:0;
  display:flex; flex-direction:column; justify-content:center;
}

/* ================================================================
   デンワタブ表示中は無スクロール (2026-11-14 ユーザー指示)。
   縦の過不足は液晶が伸縮して吸収する。
   ================================================================ */
body.is-denwa{overflow:hidden; overscroll-behavior:none;}
body.is-denwa footer{display:none;}
body.is-denwa main{flex:1; min-height:0; display:flex; flex-direction:column;}
body.is-denwa #stage .panels-scroll{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding-bottom:0;}
body.is-denwa #panelDenwa:not([hidden]){flex:1; min-height:0; display:flex; flex-direction:column;}
body.is-denwa .device.phone-public{flex:1; min-height:0; padding:10px 12px 10px 9px; overflow:hidden;}
body.is-denwa .device-main{display:flex; flex-direction:column; min-height:0;}
body.is-denwa .device-top{padding-bottom:3px;}
body.is-denwa .brand{line-height:1.35;}
body.is-denwa .phone-face{margin-bottom:6px; padding:7px 10px;}
body.is-denwa .own-number{margin-bottom:9px; padding-top:2px; padding-bottom:2px;}
body.is-denwa .own-number .num{line-height:1.25;}
body.is-denwa .lcd{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:7px 14px 4px; margin:0 4px;}
body.is-denwa .lcd-inner{flex:1; min-height:0; display:flex; flex-direction:column;}
body.is-denwa .lcd-status{line-height:1.3; padding-bottom:2px; margin-bottom:3px;}
body.is-denwa .blind-view{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:2px 4px;}
body.is-denwa .blind-timer{font-size:1.18rem; flex:none;}
body.is-denwa .dial-dots{flex:0 1 40px; height:auto; min-height:26px; margin-top:4px;}
body.is-denwa .call-btn{margin-top:12px; padding:7px; line-height:1.3;}
body.is-denwa .keypad{flex:none; grid-template-rows:repeat(4,84px); margin-top:9px; padding:8px 7px 9px; gap:6px 6px; border-radius:16px;}
body.is-denwa .phone-face{border-radius:14px;}
body.is-denwa .sub-btn{border-radius:12px;}
body.is-denwa .key{height:auto; min-height:0;}
body.is-denwa .sub-controls{margin-top:7px;}
body.is-denwa .sub-btn{padding:5px 4px;}

/* ================================================================
   ポケベル: アイコンを実物にした形
   オフホワイトのバンパー + 紺の面 + 液晶窓 (角に着信ランプ) + 3つのキー。
   上辺から側面ボタンが頭を出す。
   ================================================================ */
.peer-head{display:flex; align-items:baseline; gap:10px; margin:4px 4px 10px; flex-wrap:wrap;}
.peer-head h2{font-size:1rem; font-weight:900; margin:0;}
.device.peer-device{
  padding:28px 0 18px; border-radius:0; color:var(--paper);
}
/* ---------- 機種ごとの素材 (カラー) ----------
   バンパー / 面 / 側面ボタン / キーの色を変数で持ち、カラーごとに差し替える。
   ベーシック = アイコンそのもの (アイボリー × 紺) */
.device.peer-device{
  --pb:linear-gradient(180deg,#fdfdf9 0%,#f1f1eb 40%,#dedfd6 100%);
  --pb-edge:#fff;
  --pf:linear-gradient(180deg,#183058 0%,#10233f 45%,#0b1a32 100%);
  --pf-ink:rgba(243,243,238,.85);
  --ps:linear-gradient(180deg,#3a5072,#27405f 45%,#1b3150);
  --ps-ink:var(--paper);
  --pk:var(--cap-ivory);
  --pk-wall:#a9ada2;
  --pk-ink:var(--navy);
}
/* スケルトン: 透けたアイスブルーの外装から、中の基板が見える */
.device.peer-device.pg-color-skeleton{
  --pb:linear-gradient(180deg,rgba(214,236,252,.92) 0%,rgba(178,214,240,.86) 50%,rgba(150,195,228,.9) 100%);
  --pb-edge:rgba(255,255,255,.9);
  --pf:
    repeating-linear-gradient(90deg, rgba(140,230,190,.13) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(140,230,190,.1) 0 1px, transparent 1px 22px),
    linear-gradient(180deg,#1d4f63 0%,#163f52 50%,#10303f 100%);
  --pf-ink:rgba(220,245,255,.88);
  --ps:linear-gradient(180deg,rgba(200,230,250,.95),rgba(150,195,228,.95));
  --ps-ink:#123247;
  --pk:linear-gradient(180deg,rgba(255,255,255,.95),rgba(214,236,252,.95));
  --pk-wall:#86b2d0;
  --pk-ink:#123247;
}
.device.peer-device.pg-color-black{
  --pb:linear-gradient(180deg,#3d4047 0%,#2b2d33 45%,#1c1e22 100%);
  --pb-edge:rgba(255,255,255,.22);
  --pf:linear-gradient(180deg,#1a1b1f 0%,#131417 50%,#0c0d0f 100%);
  --pf-ink:rgba(235,235,235,.8);
  --ps:linear-gradient(180deg,#4a4d55,#33353b 50%,#26282d);
  --ps-ink:#eaeaea;
  --pk:linear-gradient(180deg,#4b4f57,#373a41 60%,#2d3036);
  --pk-wall:#15161a;
  --pk-ink:#f1f1f1;
}
.device.peer-device.pg-color-pink{
  --pb:linear-gradient(180deg,#fbe0e8 0%,#f5c6d4 45%,#eaa9bd 100%);
  --pb-edge:#fff4f7;
  --pf:linear-gradient(180deg,#fffafb 0%,#fdeef2 50%,#f9e1e8 100%);
  --pf-ink:#7a3550;
  --ps:linear-gradient(180deg,#f3a9bf,#e78aa6 50%,#d9738f);
  --ps-ink:#fff;
  --pk:linear-gradient(180deg,#ffffff,#fdeef2);
  --pk-wall:#e2a2b5;
  --pk-ink:#7a3550;
}
.device.peer-device.pg-color-silver{
  --pb:linear-gradient(180deg,#f6f7f9 0%,#d6d9de 35%,#eceef1 55%,#bfc3ca 100%);
  --pb-edge:#fff;
  --pf:linear-gradient(180deg,#454b55 0%,#343941 50%,#262a30 100%);
  --pf-ink:rgba(240,242,245,.85);
  --ps:linear-gradient(180deg,#e9ebee,#c3c7cd 55%,#a9aeb6);
  --ps-ink:#2b3038;
  --pk:linear-gradient(180deg,#fbfcfd,#dfe2e6 60%,#cdd1d6);
  --pk-wall:#8f949c;
  --pk-ink:#2b3038;
}
/* 面が明るいカラーでは、刻印ロゴの影を光に変える */
.device.peer-device.pg-color-pink .brand{color:rgba(122,53,80,.75); text-shadow:0 1px 0 #fff;}

/* 側面ボタン: バンパーの上辺から頭だけ出ている (下半分はバンパーの裏) */
.pg-side{
  position:absolute; left:46px; right:46px; top:0; z-index:1;
  display:flex; gap:6px; justify-content:flex-end; align-items:flex-start;
}
.side-btn{
  height:44px; min-height:0; padding:5px 11px 0; align-self:flex-start;
  display:inline-flex; align-items:flex-start; gap:6px;
  background:var(--ps);
  color:var(--ps-ink); border:0; border-radius:10px 10px 4px 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.25);
  font-size:.68rem; font-weight:700; line-height:1.25; letter-spacing:.02em; white-space:nowrap;
  transition:transform .06s;
}
.side-btn:active:not(:disabled){transform:translateY(4px);}
.side-btn:disabled{opacity:.5; cursor:not-allowed;}
/* 電源は左端。ドット点灯 = ON */
.side-btn.power-btn{margin-right:auto;}
.side-btn .pwr-dot{
  width:7px; height:7px; border-radius:50%; flex:none; margin-top:3px;
  background:#8fd16a; box-shadow:0 0 6px 1px rgba(143,209,106,.75);
}
.device.peer-device.power-off .side-btn .pwr-dot{background:#0a1830; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}

/* 本体: バンパー (アイコンの太い白枠) + 面 */
.pg-shell{
  position:relative; z-index:2;
  padding:15px;
  border-radius:52px;
  background:var(--grain), var(--pb);
  box-shadow:inset 0 2px 0 var(--pb-edge), inset 0 -3px 0 rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.1), var(--body-drop);
}
.pg-face{
  position:relative;
  border-radius:38px;
  padding:16px 18px 18px;
  background:var(--grain), var(--pf);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.18);
}
.pg-face .brand{color:var(--pf-ink);}

.pg-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px 12px;}
.peer-own-num{font-family:var(--lcd-font); font-size:.95rem; letter-spacing:.16em; color:var(--pf-ink); white-space:nowrap;}

/* ---------- サイズ ----------
   液晶は全サイズ 300×104 (10文字) のまま。変わるのは本体だけ */
/* ミニ: 液晶ぎりぎりまで詰めた小さな本体 */
.device.peer-device.pg-size-mini{max-width:236px; margin:0 auto; padding-top:22px;}
.pg-size-mini .pg-side{left:16px; right:16px; gap:3px;}
.pg-size-mini .side-btn{height:36px; padding:4px 6px 0; gap:4px; font-size:.56rem; letter-spacing:0;}
/* ミニの液晶は小さいまま (幅 150px ・旧来の文字サイズ)。2026-11-15 ユーザー指示 */
.device.peer-device.pg-size-mini .lcd{width:150px; height:80px; padding:19px 10px 6px;}
.pg-size-mini .peer-text{font-size:1.3rem; line-height:1.2;}
.pg-size-mini .peer-text.is-clock{font-size:1.6rem; letter-spacing:.16em; line-height:1.15;}
.pg-size-mini .peer-text .placeholder{font-size:.7rem; line-height:1.3;}
.pg-size-mini .peer-pos{font-size:.72rem;}
.pg-size-mini .peer-date{top:5px; font-size:.68rem;}
.device.peer-device.pg-size-mini .lcd .led{top:6px; right:8px; width:9px; height:9px;}
.pg-size-mini .peer-pos-line{margin-top:0;}
/* ジャンボの液晶は本体の面の幅いっぱい (高さ・文字は標準のまま) */
.device.peer-device.pg-size-jumbo .lcd{width:100%;}
.pg-size-mini .pg-shell{padding:9px; border-radius:36px;}
.pg-size-mini .pg-face{padding:10px 12px 13px; border-radius:28px;}
.pg-size-mini .pg-head{padding:0 4px 8px;}
.pg-size-mini .pg-face .brand{font-size:.66rem;}
.pg-size-mini .pg-face .brand small{display:none;}
.pg-size-mini .peer-own-num{font-size:.8rem;}
.pg-size-mini .pg-keys{margin-top:13px; gap:7px;}
.pg-size-mini .pg-key{height:32px; font-size:.72rem; letter-spacing:0;}
/* ジャンボ: 無駄に大きい。キーの下はまるごとプリクラを貼るための面 */
.device.peer-device.pg-size-jumbo{padding-top:32px;}
.pg-size-jumbo .pg-side{left:60px; right:60px;}
.pg-size-jumbo .side-btn{height:50px; padding:6px 14px 0; font-size:.76rem; border-radius:12px 12px 4px 4px;}
.pg-size-jumbo .pg-shell{padding:16px; border-radius:72px;}
.pg-size-jumbo .pg-face{
  display:flex; flex-direction:column;
  min-height:640px; padding:24px 18px 26px; border-radius:58px;
}
.pg-size-jumbo .pg-head{padding:0 8px 18px;}
.pg-size-jumbo .pg-face .brand{font-size:1rem;}
.pg-size-jumbo .pg-keys{margin-top:24px;}
.pg-size-jumbo .pg-key{height:50px; font-size:.95rem;}
/* 余白の下端に型押しの機種名 (プリクラの貼り場所はその上の広い面) */
.pg-size-jumbo .pg-face::after{
  content:"YULLBELL JUMBO"; margin-top:auto; align-self:center;
  font-size:.7rem; font-weight:900; letter-spacing:.5em; text-indent:.5em;
  color:var(--pf-ink); opacity:.35; text-shadow:0 -1px 0 rgba(0,0,0,.35);
}

/* D型 (レギュラーのみ・サブスク特典): 右側だけが大きくカーブする。
   液晶 300px を保つため、中身は左に寄せ、キーと側面ボタンはカーブの内側に収める */
.device.peer-device.shape-d .pg-side{right:118px;}
.device.peer-device.shape-d .pg-shell{border-radius:52px 116px 116px 52px / 52px 50% 50% 52px;}
.device.peer-device.shape-d .pg-face{border-radius:38px 100px 100px 38px / 38px 50% 50% 38px; padding-right:34px;}
.device.peer-device.shape-d .pg-keys{margin-right:18px;}

/* 液晶の外形は全状態で固定: 幅 225px ・高さ 104px、左寄せ。
   本文は最大10文字の1行 (11文字以上は自動スクロール)。液晶の文字はすべて
   半角 (pager.js toHalfKana) で、本文 2.05rem の10文字 = 約197px + 左右の余白。
   2026-11-15 ユーザー指示: 幅を削って右側をプリクラ用に空け (150px)、その後
   文字を大きくして幅を 150% (225px) に。本文は上の受信日時の行より下から始める */
.device.peer-device .lcd{width:225px; height:104px; margin:0; padding:22px 10px 9px; display:flex; flex-direction:column;}
/* 着信ランプはアイコンと同じく液晶の右上 */
.device.peer-device .lcd .led{position:absolute; top:9px; right:10px; z-index:2;}
.peer-text{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:flex-start; text-align:left;
  font-size:2.05rem; letter-spacing:.1em; line-height:1.15; word-break:break-all;
}
.peer-text.is-windowed{white-space:nowrap; overflow:hidden; word-break:normal;}
/* 着信が無いときの案内文 (全角) は小さく、幅に収まらなければ2行にする */
.peer-text .placeholder{color:var(--lcd-dim); font-size:.9rem; line-height:1.4; letter-spacing:.02em; white-space:normal; text-wrap:balance; word-break:auto-phrase;}
.peer-text.is-clock{font-size:2.3rem; letter-spacing:.14em; line-height:1.15; justify-content:center; text-align:center;}
.lcd-emoji{display:inline-block;}
.lcd-emoji svg{display:block; width:100%; height:100%;}
.peer-text .lcd-emoji{width:.5em; height:.5em; vertical-align:-.05em;}
.peer-pos-line{display:flex; justify-content:flex-start; align-items:baseline; gap:8px; margin-top:2px; flex:none; line-height:1.2;}
.peer-pos{font-family:var(--lcd-font); font-size:.86rem; color:var(--lcd-dim); white-space:nowrap;}
/* 受信日時は液晶の左上 (右上は着信ランプ)。2026-11-15 ユーザー指示で右下から移動 */
.peer-date{position:absolute; top:6px; left:10px; z-index:2; font-family:var(--lcd-font); font-size:.86rem; line-height:1.2; color:var(--lcd-dim); white-space:nowrap;}
.peer-date:empty{display:none;}
/* 電源 OFF: 液晶はアイコンの画面と同じスレートに消灯 (ランプも消える) */
.device.peer-device.power-off .lcd{background:linear-gradient(180deg,#2c4566,#223a59);}
.device.peer-device.power-off .lcd *{visibility:hidden;}

/* 3つのキー (アイコンのピル): 前 / 再生 / 次 */
.pg-keys{display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:12px; margin-top:20px; padding:0 2px;}
.pg-key{
  height:40px; min-height:0; padding:0 6px;
  background:var(--pk); color:var(--pk-ink);
  border:0; border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 var(--pk-wall), 0 5px 6px rgba(0,0,0,.35);
  transform:translateY(-2px);
  font-size:.85rem; font-weight:900; letter-spacing:.04em; white-space:nowrap;
  transition:transform .05s, box-shadow .05s;
}
.pg-key small{display:none;}
.pg-key:active:not(:disabled){transform:translateY(1px); box-shadow:inset 0 2px 3px rgba(0,0,0,.15), 0 0 0 var(--pk-wall), 0 1px 2px rgba(0,0,0,.35);}
.pg-key:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- 機種えらび (ポケベルタブ) ---------- */
.pg-model{margin-top:18px; background:var(--card); border:2px solid var(--ink); border-radius:22px; padding:14px 16px 12px;}
.pg-model h3{font-size:.82rem; font-weight:900; margin:4px 0 8px;}
.pg-model h3 + .pg-opts{margin-bottom:10px;}
.pg-opts{display:flex; flex-wrap:wrap; gap:6px;}
.pg-opt{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  min-height:40px; padding:6px 13px;
  background:transparent; color:var(--ink);
  border:2px solid var(--line); border-radius:999px;
  font-size:.78rem; font-weight:700; white-space:nowrap;
}
.pg-opt.is-active{border-color:var(--ink); background:var(--ink); color:var(--bg);}
/* 鍵付き (サブスク特典): 押すと案内のトーストが出る */
.pg-opt.is-locked{color:var(--muted); border-style:dashed;}
.pg-opt.is-locked::after{
  content:""; width:10px; height:12px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h.5A1.5 1.5 0 0 1 10 6.5v4A1.5 1.5 0 0 1 8.5 12h-7A1.5 1.5 0 0 1 0 10.5v-4A1.5 1.5 0 0 1 1.5 5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h.5A1.5 1.5 0 0 1 10 6.5v4A1.5 1.5 0 0 1 8.5 12h-7A1.5 1.5 0 0 1 0 10.5v-4A1.5 1.5 0 0 1 1.5 5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* サイズの目安アイコン (本体の縦横比) */
.pg-ico{display:inline-block; flex:none; border:2px solid currentColor; border-radius:4px;}
.pg-ico-mini{width:14px; height:10px;}
.pg-ico-regular{width:18px; height:13px; border-radius:5px;}
.pg-ico-jumbo{width:15px; height:21px; border-radius:5px;}
/* カラー見本: 左上がバンパー、右下が面 */
.pg-sw{display:inline-block; flex:none; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);}
.pg-sw-basic{background:linear-gradient(135deg,#f1f1eb 50%,#10233f 50%);}
.pg-sw-skeleton{background:linear-gradient(135deg,#bfe0f4 50%,#1d4f63 50%);}
.pg-sw-black{background:linear-gradient(135deg,#3d4047 50%,#131417 50%);}
.pg-sw-pink{background:linear-gradient(135deg,#f5c6d4 50%,#fdeef2 50%);}
.pg-sw-silver{background:linear-gradient(135deg,#d6d9de 50%,#343941 50%);}

.device.ringing .pg-shell{animation:ring-shake .18s linear 10;}
@keyframes ring-shake{25%{transform:translateX(-3px) rotate(-.4deg);} 75%{transform:translateX(3px) rotate(.4deg);}}

/* ---------- purikura ---------- */
.puri-layer{position:absolute; inset:0; z-index:6; border-radius:inherit; overflow:hidden; pointer-events:none;}
.puri-sticker{
  position:absolute; pointer-events:auto; cursor:grab; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  /* 長押しで画像の共有・保存などブラウザ特有の動きを出さない */
  -webkit-touch-callout:none;
  background:transparent; padding:0; border-radius:4px;
  box-shadow:0 3px 9px rgba(0,0,0,.35);
}
/* タッチの対象になる子要素側にも touch-action:none を付け、1本指ドラッグが
   ページスクロールに奪われないようにする (長押しの callout も同様に抑止) */
.puri-photo, .puri-photo img{touch-action:none; -webkit-touch-callout:none;}
.puri-photo img{-webkit-user-drag:none;}
.puri-sticker:active{cursor:grabbing;}
/* 貼付済みシールは固定 (タップで選択のみ)。配置モード中だけ動かせる */
.puri-sticker.is-fixed{cursor:pointer;}
.puri-sticker.is-fixed:active{cursor:pointer;}
.puri-sticker.is-draft{
  outline:2px dashed var(--accent); outline-offset:3px;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  animation:puri-draft-pulse 1.3s ease-in-out infinite;
}
@keyframes puri-draft-pulse{50%{outline-offset:6px;}}

.puri-sticker.is-selected{
  /* 確定後のシールにオレンジ点線は出さない (2026-11-14 ユーザー指示)。
     選択中であることは影の持ち上がりだけで示す */
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
}
/* シールの大きさ: 旧 138×92 の 80% (2026-11-15 ユーザー指示「大きすぎて貼りにくい」)。
   比率は 3:2 のまま。フレームの SVG は viewBox ごと伸縮するので追従する */
.puri-photo{position:relative; width:111px; height:74px; overflow:hidden; background:#e8e6da; border-radius:4px;}
.puri-photo img{width:100%; height:100%; object-fit:cover; display:block;}
/* フレーム (サブスク/テレカ特典): 写真の上に重ねる縁取り SVG。
   fade / wear より下の層に置くので、フレームごと色あせ・擦れていく */
.puri-frame{position:absolute; inset:0; pointer-events:none;}
.puri-frame svg{width:100%; height:100%; display:block;}
.puri-fade{position:absolute; inset:0; background:#fffdf2; opacity:0; pointer-events:none;}
.puri-wear{
  position:absolute; inset:0; opacity:0; pointer-events:none; background-size:cover;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='92'%3E%3Cg stroke='rgba(255,255,255,0.9)' stroke-width='1'%3E%3Cpath d='M4 16 L134 6'/%3E%3Cpath d='M8 82 L50 24'/%3E%3Cpath d='M110 88 L128 30'/%3E%3C/g%3E%3Cg stroke='rgba(110,100,80,0.55)' stroke-width='1'%3E%3Cpath d='M0 48 L138 42'/%3E%3Cpath d='M46 0 L60 92'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.45)'%3E%3Ccircle cx='28' cy='64' r='7'/%3E%3Ccircle cx='116' cy='18' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.puri-sticker.is-shaking{animation:puri-shake .38s ease;}
@keyframes puri-shake{0%,100%{translate:0 0;}20%{translate:-3px 0;}40%{translate:3px 0;}60%{translate:-2px 0;}80%{translate:2px 0;}}

/* ---------- プリクラ操作パネル ---------- */
.puri-controls{margin-top:16px; background:var(--card); border:2px solid var(--ink); border-radius:22px; padding:16px;}
.puri-controls h3{font-size:.95rem; font-weight:900; margin:0 0 12px;}
.puri-file-btn{
  display:flex; align-items:center; justify-content:center; min-height:48px; text-align:center; cursor:pointer;
  background:var(--ink); color:var(--bg); border-radius:999px;
  font-size:.9rem; font-weight:700; padding:11px;
}
.puri-file-btn:active{opacity:.85;}
.puri-file-btn.is-disabled{opacity:.4; pointer-events:none;}
/* 配置モード (確定前): 赤い破線 = まだ貼れていない、の合図 */
.puri-place-bar{
  margin-top:12px; border:2px dashed var(--signal); border-radius:16px;
  background:rgba(229,72,58,.06); padding:12px;
}
.puri-place-bar[hidden]{display:none;}
.puri-place-title{font-size:.9rem; font-weight:900; margin:0 0 4px;}
.puri-place-note{font-size:.78rem; color:var(--muted); margin:0 0 10px; line-height:1.7;}
.puri-frame-picker{margin:0 0 10px;}
.puri-frame-picker .picker-label{margin-top:2px;}
.puri-frame-list{display:flex; gap:8px; overflow-x:auto; padding:3px 2px 5px; -webkit-overflow-scrolling:touch;}
.puri-frame-opt{
  position:relative; flex:none; width:80px; padding:6px 5px 7px;
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink); cursor:pointer; font-family:inherit;
}
.puri-frame-opt:active{opacity:.85;}
.puri-frame-opt.is-active{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink);}
.puri-frame-opt.is-locked{opacity:.6;}
.puri-frame-preview{
  position:relative; width:66px; height:44px; border-radius:6px; overflow:hidden; flex:none;
  background:linear-gradient(180deg,#bfe0ee 0%,#e2f2da 56%,#8fce7e 57%,#63ac55 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:700; color:#46603c;
}
.puri-frame-preview svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.puri-frame-name{font-size:.66rem; font-weight:700; line-height:1.3; text-align:center;}
.puri-frame-cond{font-size:.55rem; color:var(--muted); line-height:1.3; text-align:center;}
.puri-frame-lock{position:absolute; top:1px; right:4px; font-size:.72rem;}
.puri-frame-note{font-size:.68rem; color:var(--muted); margin:2px 0 0; line-height:1.6;}
.puri-place-btns{display:grid; grid-template-columns:1fr 1.5fr; gap:8px;}
.place-cancel, .crop-cancel{
  min-height:46px; background:transparent; color:var(--ink); border:2px solid var(--line); border-radius:999px;
  font-size:.88rem; font-weight:700; padding:10px;
}
.place-ok, .crop-ok{
  min-height:46px; background:var(--ink); color:var(--bg); border:2px solid var(--ink); border-radius:999px;
  font-size:.9rem; font-weight:700; padding:10px;
}
.place-ok:active, .place-cancel:active, .crop-ok:active, .crop-cancel:active{opacity:.85;}
.puri-remove{
  width:100%; min-height:44px; margin-top:8px; background:transparent; color:var(--hangup);
  border:2px solid var(--line); border-radius:999px; font-size:.8rem; font-weight:700; padding:8px;
}
.puri-remove[hidden]{display:none;}
.puri-remove.is-blocked{color:var(--muted); border-style:dashed;}
.puri-remove.is-shaking{animation:puri-shake .38s ease;}
.picker-label{font-size:.74rem; font-weight:700; color:var(--muted); margin:14px 0 6px;}
.puri-rot-row{display:flex; align-items:center; gap:8px;}
.puri-rot-row input[type="range"]{flex:1; min-width:0; accent-color:var(--ink); min-height:2.25rem; margin:0;}
.puri-rot-row input[type="range"]:disabled{opacity:.35;}
.puri-rot-row .sub-btn{
  flex:none; padding:7px 12px;
  color:var(--ink); border-color:var(--line);
}
.puri-rot-row .sub-btn:active{background:rgba(127,127,127,.12);}
.puri-note{font-size:.74rem; color:var(--muted); margin:8px 0 0; line-height:1.7;}

/* ---------- 設定・ガイド・課金の各パネル ----------
   アイコンと同じ太い輪郭線のシート。影は付けない */
.settings-panel{
  background:var(--card); border:2px solid var(--ink); border-radius:22px;
  padding:18px 18px 17px; margin-bottom:12px;
}
.settings-panel h2{font-size:1rem; font-weight:900; margin:0 0 10px; border:0; padding:0;}
.settings-panel p{margin:0 0 10px;}
.settings-panel p:last-child{margin-bottom:0;}
.settings-panel .primary-btn + .note{margin-top:10px;}
.my-number{
  display:inline-block; font-family:var(--lcd-font); font-size:1.7rem; letter-spacing:.14em;
  background:var(--lcd); color:var(--lcd-ink); border-radius:10px; padding:4px 14px; margin:2px 0 10px !important;
}
.wl-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.wl-item{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg); border-radius:14px; padding:7px 8px 7px 14px;}
.wl-item .wl-num{font-family:var(--lcd-font); font-size:1.05rem; letter-spacing:.18em;}
.wl-del{flex:none; font-size:.72rem; font-weight:700; color:var(--hangup); background:transparent; border:2px solid var(--line); border-radius:999px; padding:3px 12px; min-height:2rem;}
.wl-form{display:flex; gap:8px; margin-top:10px;}
.wl-form input{
  flex:1; min-width:0; font-family:var(--lcd-font); font-size:1.05rem; letter-spacing:.16em;
  padding:9px 14px; border:2px solid var(--line); border-radius:999px; background:var(--bg); color:var(--ink);
}
.wl-form input:focus{border-color:var(--ink); outline:none;}
.wl-add{flex:none; min-height:44px; background:var(--ink); color:var(--bg); border:0; border-radius:999px; font-size:.85rem; font-weight:700; padding:9px 18px;}

/* ガイド: 説明書の1ページのように読ませる */
.guide-panel h2{display:flex; align-items:center; gap:10px; padding-bottom:10px !important; border-bottom:2px solid var(--ink) !important; margin-bottom:12px !important;}
.guide-panel p{font-size:.88rem; line-height:1.9; margin:0 0 10px;}
.guide-panel p:last-child{margin-bottom:0;}
.guide-panel .primary-btn{margin:4px 0 0;}

/* ---------- プリクラ切り取りエディタ ---------- */
.crop-backdrop{
  position:fixed; inset:0; background:rgba(10,24,48,.6); z-index:65;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.crop-backdrop.open{display:flex;}
.crop-panel{
  background:var(--card); color:var(--ink); width:100%; max-width:460px; max-height:92vh; overflow:auto;
  border:2px solid var(--ink); border-radius:26px; padding:20px 18px;
}
.crop-panel h2{font-size:1.05rem; font-weight:900; margin:0 0 4px;}
.crop-note{font-size:.78rem; color:var(--muted); margin:0 0 12px; line-height:1.7;}
.crop-viewport{
  position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  border-radius:12px; background:#1b1f26; touch-action:none; cursor:grab;
}
.crop-viewport:active{cursor:grabbing;}
.crop-viewport img{position:absolute; left:50%; top:50%; max-width:none; pointer-events:none; -webkit-user-select:none; user-select:none;}
.crop-frame{position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 3px rgba(255,255,255,.9);}
.crop-frame::before, .crop-frame::after{content:""; position:absolute; background:rgba(255,255,255,.35);}
.crop-frame::before{left:33.33%; top:0; bottom:0; width:1px;}
.crop-frame::after{top:33.33%; left:0; right:0; height:1px;}
.crop-thirds-v{position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.35); pointer-events:none;}
.crop-zoom-row{display:flex; align-items:center; gap:10px; margin-top:12px;}
.crop-zoom-row .cz-label{font-size:.74rem; font-weight:700; color:var(--muted); flex:none;}
.crop-zoom-row input[type="range"]{flex:1; min-width:0; accent-color:var(--ink); min-height:2.25rem; margin:0;}
.crop-zoom-row .cz-value{font-family:var(--lcd-font); font-size:.85rem; flex:none; min-width:3.2em; text-align:right;}
.crop-btn-row{display:grid; grid-template-columns:1fr 1.4fr; gap:8px; margin-top:14px;}

/* ---------- 確認モーダル ---------- */
.confirm-backdrop{
  position:fixed; inset:0; background:rgba(10,24,48,.6); z-index:70;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.confirm-backdrop.open{display:flex;}
.confirm-panel{
  background:var(--card); color:var(--ink); width:100%; max-width:400px;
  border:2px solid var(--ink); border-radius:26px; padding:22px 18px 18px;
}
.confirm-panel h2{font-size:1.1rem; font-weight:900; margin:0 0 8px;}
.confirm-panel p{font-size:.86rem; line-height:1.8; color:var(--muted); margin:0 0 6px;}

/* ---------- 短縮メモリ編集モーダル ---------- */
.speed-backdrop{z-index:72;}
.speed-panel{max-width:440px; max-height:92dvh; overflow:auto;}
.speed-edit-list{display:flex; flex-direction:column; gap:7px; margin:10px 0 4px;}
.speed-edit-row{display:flex; align-items:center; gap:7px;}
.speed-edit-row .se-no{
  flex:none; width:1.7rem; height:1.7rem; border-radius:50%; text-align:center; line-height:1.7rem;
  background:var(--ink); color:var(--bg); font-size:.78rem; font-weight:700;
}
.speed-edit-row input{
  border:2px solid var(--line); border-radius:12px;
  background:var(--bg); color:var(--ink);
  padding:7px 10px; font-size:.92rem; min-height:2.5rem; font-family:inherit;
}
.speed-edit-row input:focus{border-color:var(--ink); outline:none;}
.speed-edit-row .se-name{flex:1.1; min-width:0;}
.speed-edit-row .se-num{flex:1; min-width:0; font-family:var(--lcd-font); letter-spacing:.06em;}
.speed-edit-row input.is-invalid{border-color:var(--hangup); outline:2px solid rgba(214,61,47,.3);}

/* ---------- 課金（テスト）: テレカ / サブスクのダミー ---------- */
.billing-warn{color:var(--hangup); font-weight:700;}
.billing-balance{font-family:var(--lcd-font); font-size:1.4rem;}
.billing-subhead{font-size:.88rem; font-weight:900; margin:18px 0 8px;}
.billing-btn{
  flex:none; min-height:40px; background:var(--ink); color:var(--bg); border:0;
  border-radius:999px; font-size:.8rem; font-weight:700; padding:8px 14px;
}
.billing-btn:active{opacity:.85;}
.billing-btn:disabled{opacity:.4; cursor:not-allowed;}
.billing-btn.ghost{width:100%; margin-top:12px; background:transparent; color:var(--ink); border:2px solid var(--line);}
.teleca-shop{display:flex; flex-direction:column; gap:12px; margin-top:6px;}
.teleca-item{display:flex; gap:12px; align-items:center;}
.teleca-card{
  flex:none; width:118px; height:74px; border-radius:10px; padding:8px 10px;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);
  font-family:var(--lcd-font);
}
.teleca-card .tc-brand{font-size:.5rem; letter-spacing:.14em; opacity:.85; line-height:1.3;}
.teleca-card .tc-deg{font-size:1.5rem; line-height:1; text-align:right;}
.teleca-card .tc-deg small{font-size:.55rem;}
.teleca-card.is-small{width:92px; height:58px; padding:6px 8px;}
.teleca-card.is-small .tc-deg{font-size:1.1rem;}
.teleca-meta{flex:1; min-width:0;}
.teleca-meta .tc-name{font-weight:900; font-size:.88rem; line-height:1.4;}
.teleca-meta .tc-desc{font-size:.72rem; color:var(--muted); line-height:1.55;}
.teleca-collection{display:flex; flex-direction:column; gap:8px;}
.teleca-owned{display:flex; gap:12px; align-items:center;}
.teleca-owned.is-silhouette .teleca-card{filter:grayscale(1); opacity:.35;}
.teleca-owned.is-silhouette .teleca-meta{color:var(--muted);}
.tc-status{
  flex:none; font-size:.66rem; font-weight:700;
  border:2px solid var(--line); border-radius:999px; padding:2px 9px; color:var(--muted); white-space:nowrap;
}
.tc-status.st-unused{color:var(--ok); border-color:var(--ok);}
.tc-status.st-using{color:var(--signal); border-color:var(--signal);}
.tc-status.st-used{color:var(--muted);}
.perk-row{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.85rem; font-weight:700; margin:12px 0 8px; line-height:1.55;}
.perk-row input[type="checkbox"]{width:1.25rem; height:1.25rem; accent-color:var(--ink); flex:none;}
.shape-btns{display:flex; gap:6px; flex-wrap:wrap;}
.shape-btn{
  border:2px solid var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:6px 13px; font-size:.78rem; font-weight:700; min-height:2.2rem;
}
.shape-btn.is-active{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.shape-btn:disabled{opacity:.4; cursor:not-allowed;}

/* ================================================================
   表示モード分岐: ブラウザのタブ → 紹介サイト / standalone → アプリ
   (判定は index.html の <head> スクリプト)
   ================================================================ */
#view-app{display:none;}
html.mode-standalone #view-app{display:block;}
html.mode-standalone #view-site{display:none;}

/* ================================================================
   ステージ方式 (standalone 時): 390×844 固定を fitStage() で拡縮
   ================================================================ */
html.mode-standalone body{overflow:hidden; overscroll-behavior:none;}
html.mode-standalone #view-app{
  /* 下部の広告枠 (--ad-h) の上だけを使う。ステージはこの中で拡縮される */
  position:fixed; top:0; left:0; right:0; bottom:var(--ad-h); overflow:hidden; background:var(--bg);
}
#stage{
  position:absolute; left:50%; top:50%;
  width:390px; height:844px;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  background:var(--bg);
  overflow:hidden;
  touch-action:pan-x pan-y;
}
#stage .wrap{
  width:390px; max-width:none; height:100%;
  margin:0; padding:6px 12px;
  display:flex; flex-direction:column;
  overflow:hidden; overscroll-behavior:none;
}
#stage .app-head{flex:none;}
/* タイトルとタブのサイズは全タブで統一 (タブ切替で大きさが変わらない) */
#stage .app-head h1{font-size:1.02rem; line-height:1.3; margin:2px 4px 5px;}
#stage #pushgate-section{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
}
#stage #wizard-section{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
}
#stage #main-section{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
#stage #main-section[hidden]{display:none;}
#stage .panels-scroll{
  flex:1; min-height:0;
  overflow-y:auto; overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:34px;
}

/* ================================================================
   通知ゲート (standalone 時・最優先): 通知が granted でない間は
   この画面だけを出す (html.needs-pushgate)
   ================================================================ */
#pushgate-section{display:none;}
html.mode-standalone.needs-pushgate #pushgate-section{display:block;}
html.mode-standalone.needs-pushgate .app-head,
html.mode-standalone.needs-pushgate #wizard-section,
html.mode-standalone.needs-pushgate #main-section,
html.mode-standalone.needs-pushgate #view-app footer{display:none !important;}
/* 起動直後の画面: 罫線のカードではなく、アイコンを主役にした1枚 */
.pushgate-card{
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 18px 40px; text-align:center;
}
.pushgate-icon{width:112px; height:112px; border-radius:26px; margin:0 auto;}
.pushgate-name{font-size:1.3rem; font-weight:900; letter-spacing:.3em; text-indent:.3em; margin:22px 0 10px;}
.pushgate-lead{font-size:.95rem; line-height:1.9; color:var(--muted); margin:0 0 28px; word-break:auto-phrase; text-wrap:balance;}
.pushgate-card .primary-btn{width:100%;}
.pushgate-denied{
  margin-top:18px; border:2px dashed var(--signal); border-radius:18px; padding:14px 16px;
  text-align:left;
}
.pushgate-denied p{font-size:.86rem; margin:0 0 6px;}
.pushgate-denied ol{margin:6px 0 13px; padding-left:1.35em; font-size:.86rem; line-height:1.9;}
.pushgate-denied[hidden]{display:none;}
.pushgate-status{font-size:.8rem; color:var(--muted); min-height:1.3em; margin:12px 0 0;}

/* ================================================================
   セットアップ・ウィザード (通知ゲート通過後): ログイン → 完了
   ================================================================ */
#wizard-section[hidden]{display:none;}
.wizard-card{
  background:var(--card); border:2px solid var(--ink); border-radius:26px;
  padding:22px 20px 24px; margin-top:8px;
}
.wizard-progress{font-size:.78rem; font-weight:700; color:var(--muted); margin:0 0 8px;}
.wizard-dots{display:flex; gap:6px; margin-bottom:18px;}
.wizard-dot{width:30px; height:8px; border-radius:999px; background:var(--line);}
.wizard-dot.is-active{background:var(--ink);}
.wizard-dot.is-done{background:var(--ok);}
.wizard-step[hidden]{display:none;}
.wizard-step h2{font-size:1.2rem; font-weight:900; margin:0 0 10px;}
.wizard-step p{font-size:.88rem; line-height:1.9; margin:0 0 18px;}
.wizard-denied{
  margin-top:15px; border:2px dashed var(--signal); border-radius:18px; padding:13px 14px;
}
.wizard-denied p{font-size:.86rem; margin:0 0 6px;}
.wizard-denied ol{margin:6px 0 13px; padding-left:1.35em; font-size:.86rem; line-height:1.85;}
.wizard-denied[hidden]{display:none;}
.wizard-status{font-size:.8rem; color:var(--muted); min-height:1.3em; margin:11px 0 0 !important;}
.wizard-number{
  font-family:var(--lcd-font); font-size:1.2rem; font-weight:400; letter-spacing:.14em;
  background:var(--lcd); color:var(--lcd-ink); border-radius:8px; padding:1px 8px;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--ad-h) + 14px); transform:translate(-50%,20px);
  background:var(--navy); color:var(--paper); font-size:.85rem; font-weight:700;
  padding:11px 20px; border-radius:999px; opacity:0; pointer-events:none; transition:.2s;
  box-shadow:0 0 0 2px var(--paper); z-index:50; max-width:92vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%,0);}

@media (min-width:640px){
  .wrap{padding-top:30px;}
}

/* ---------- 初心者ツアー ---------- */
.tour-card{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--ad-h) + 10px);
  width:min(460px, calc(100vw - 24px)); z-index:55;
  background:var(--card); color:var(--ink);
  border:2px solid var(--ink); border-radius:22px;
  box-shadow:0 12px 30px rgba(10,24,48,.28);
  padding:14px 16px 12px;
}
.tour-card[hidden]{display:none;}
.tour-card.is-top{
  bottom:auto;
  top:calc(14px + env(safe-area-inset-top, 0px));
}
.tour-head{display:flex; align-items:center; gap:10px;}
.tour-step-label{
  font-family:var(--lcd-font); font-size:.74rem;
  background:var(--lcd); color:var(--lcd-ink); border-radius:6px; padding:1px 7px; white-space:nowrap;
}
.tour-title{font-size:1rem; font-weight:900; flex:1;}
.tour-close{
  background:transparent; border:2px solid var(--line); border-radius:999px;
  color:var(--muted); font-size:.72rem; font-weight:700; padding:3px 11px; min-height:2rem;
}
.tour-text{font-size:.86rem; line-height:1.8; margin:8px 0 10px;}
.tour-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tour-dots{display:flex; gap:5px;}
.tour-dot{width:8px; height:8px; border-radius:50%; background:var(--line);}
.tour-dot.is-on{background:var(--signal);}
.tour-btns{display:flex; gap:8px;}
.tour-btn{
  min-height:40px; border-radius:999px; font-size:.85rem; font-weight:700; padding:8px 18px;
  border:2px solid var(--ink);
}
.tour-btn.primary{background:var(--ink); color:var(--bg);}
.tour-btn.ghost{background:transparent; color:var(--ink);}
.tour-btn:disabled{opacity:.3;}
.tour-btn:active{opacity:.85;}
/* ツアー対象要素のハイライト (tour.js が一時的に付ける) */
.tour-highlight{
  outline:3px solid var(--signal); outline-offset:3px;
  box-shadow:0 0 0 8px rgba(229,72,58,.22);
  position:relative; z-index:5;
}

@media (prefers-reduced-motion: reduce){
  .puri-sticker.is-draft{animation:none;}
  .ring-dots i{animation:none;}
  .device.ringing, .device.ringing .pg-shell{animation:none;}
  .key, .pg-key, .handset{transition:none;}
  .lcd.flash .lcd-inner{animation:none;}
  .toast{transition:none;}
  .handset{transition:none;}
}

/* ---------- code table sheet (4-C 広告ワク・モダン / 2026-11-14 採用) ----------
   タウンページ風: 黄色い紙面 (#ffd21a + ドット質感) に、黒地の見出し帯、
   行グループごとの広告ワク (太い黒枠 2.5px + ハードシャドウ 4px 4px 0)。
   スタイルはすべて #sheetBackdrop 配下に閉じ、他画面へ影響させない。 */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(12,12,10,.55); z-index:40;
  display:none; align-items:flex-end; justify-content:center;
}
.sheet-backdrop.open{display:flex;}
#sheetBackdrop .sheet{
  background-color:#ffd21a;
  background-image:radial-gradient(rgba(20,19,16,.055) 1px, transparent 1.3px);
  background-size:14px 14px;
  color:#141310; width:100%; max-width:460px; max-height:82vh; overflow:auto;
  border:3px solid #141310; border-bottom:none;
  border-radius:20px 20px 0 0; padding:18px 18px 28px;
  box-shadow:0 -12px 34px rgba(0,0,0,.35);
}
/* 見出し帯: 黒地に黄文字 (電話帳の見出し帯) */
#sheetBackdrop .sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  background:#141310; border-radius:8px; padding:8px 8px 8px 14px; margin-bottom:10px;
  box-shadow:3px 3px 0 rgba(20,19,16,.35);
}
#sheetBackdrop .sheet-head h2{font-size:1.35rem; font-weight:900; margin:0; color:#ffd900; letter-spacing:.08em;}
#sheetBackdrop .sheet-close{background:#ffd900; border:2px solid #ffd900; color:#141310; font-weight:900; border-radius:999px; width:38px; height:38px; font-size:1rem; line-height:1;}
/* セクション見出し帯: 大タイトルの帯と同デザイン (黒地に黄文字)。
   「特殊文字表」「2タッチ入力表」を同構造 (帯＋広告ワク) に統一する */
#sheetBackdrop .sheet-sec-head{
  display:flex; align-items:center;
  background:#141310; border-radius:8px; padding:7px 14px; margin:20px 0 10px;
  box-shadow:3px 3px 0 rgba(20,19,16,.35);
}
#sheetBackdrop .sheet-sec:first-of-type .sheet-sec-head{margin-top:6px;}
#sheetBackdrop .sheet .sheet-sec-head h3{
  font-size:1rem; font-weight:900; margin:0; padding:0; border-bottom:none;
  color:#ffd900; letter-spacing:.04em;
}
#sheetBackdrop .sheet p{font-size:.8rem; color:#33302a; margin:4px 0 12px; line-height:1.7;}
#sheetBackdrop .sheet p b{color:#141310;}
#sheetBackdrop .sheet h3{font-size:.85rem; font-weight:900; margin:18px 0 6px; padding-bottom:4px; border-bottom:2px solid #141310; color:#141310;}
/* 行グループ = 広告ワク */
#sheetBackdrop .code-grid{display:flex; flex-direction:column; gap:14px;}
#sheetBackdrop .code-row{
  background:#fff; border:2.5px solid #141310; border-radius:8px;
  box-shadow:4px 4px 0 #141310; padding:8px 9px 9px;
}
#sheetBackdrop .code-row.is-alt{background:#ffef8a;}
#sheetBackdrop .code-row-head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:2px solid #141310; padding-bottom:4px; margin-bottom:7px;
}
#sheetBackdrop .code-row-head .rng{font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.1em; color:#141310;}
#sheetBackdrop .code-row-head .tag{font-family:var(--mono); font-size:.6rem; font-weight:800; letter-spacing:.22em; color:#d42b1e;}
#sheetBackdrop .code-cells{display:grid; grid-template-columns:repeat(5,1fr); gap:5px;}
#sheetBackdrop .code-cell{border:1px solid rgba(20,19,16,.3); border-radius:6px; padding:5px 2px 4px; text-align:center; background:rgba(255,255,255,.55);}
#sheetBackdrop .code-row.is-alt .code-cell{background:rgba(255,255,255,.75);}
#sheetBackdrop .code-cell .c{font-family:var(--mono); font-size:.68rem; font-weight:700; color:#8a6d00; display:block;}
#sheetBackdrop .code-cell .v{font-size:1.02rem; font-weight:700; display:block; line-height:1.3; color:#141310;}
#sheetBackdrop .code-cell .v .lcd-emoji{width:1.05em; height:1.05em; vertical-align:-.14em;}
/* 欠番 (割り当てのないコード) もセルを省略せずに出す */
#sheetBackdrop .code-cell.is-unused{background:rgba(255,255,255,.25); border-style:dashed; border-color:rgba(20,19,16,.4);}
#sheetBackdrop .code-cell.is-unused .v{font-size:.58rem; font-weight:500; color:#5c5644; line-height:1.3; padding:2px 0;}
/* 特殊文字表: 数字区間の記号コード4件 (2タッチ入力表と同構造の広告ワク) */
#sheetBackdrop .sheet-sec > .code-row{margin-bottom:10px;}
#sheetBackdrop .special-cells{grid-template-columns:repeat(4,1fr);}
#sheetBackdrop .func-list{font-size:.82rem; margin:0; padding-left:1.1em; color:#33302a;}
#sheetBackdrop .func-list li{margin:3px 0;}
#sheetBackdrop .func-list code{font-family:var(--mono); background:rgba(255,255,255,.65); border:1.5px solid #141310; border-radius:5px; padding:0 5px; color:#141310;}


/* ================================================================
   紹介サイト = YULLBELL の取扱説明書 (ブラウザのタブで開いた場合)
   - 表紙はポケベルの「各部のなまえ」図。本体は押せる (site.js)。
   - 章番号・手順番号は実際の順序を表すときだけ使う。
   - 液晶に出る文字は液晶の見た目 (黄緑 + ドットフォント) で示す。
   崩れ対策: 固定幅を持たない (vw / clamp / aspect-ratio)、ノッチは
   safe-area で避ける、backdrop-filter・背景固定は使わない。
   ================================================================ */
#view-site{
  --mx-pad:max(20px, env(safe-area-inset-left, 0px));
  --mx-pad-r:max(20px, env(safe-area-inset-right, 0px));
  background:var(--bg); color:var(--ink);
  min-height:100vh; min-height:100dvh;
  line-break:strict; overflow-wrap:anywhere;
}
.mx-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.mx-cover, .mx-toc, .mx-main{max-width:680px; margin-left:auto; margin-right:auto; padding-left:var(--mx-pad); padding-right:var(--mx-pad-r);}

/* ---------- 表紙 ---------- */
.mx-cover{padding-top:calc(env(safe-area-inset-top, 0px) + 14px);}
.mx-run{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:2px solid var(--ink);
}
.mx-brand{display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:900; letter-spacing:.3em;}
.mx-brand img{width:28px; height:28px; border-radius:7px;}
.mx-doc{font-size:.82rem; font-weight:700;}
.mx-title{
  margin:30px 0 0;
  font-size:clamp(2.3rem, 11.4vw, 4.2rem); font-weight:900; line-height:1.14; letter-spacing:-.01em;
  font-feature-settings:"palt"; word-break:keep-all;
}

.mx-fig{margin:34px 0 0;}
/* 図: 本体の左右に番号の引き出し線を出す。番号の分だけ左右に余白を取る */
.mx-diagram{position:relative; width:min(60vw, 300px); margin:0 auto;}
.mx-co{
  position:absolute; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bg); font-size:.76rem; font-weight:700; line-height:1;
}
.mx-co::after{content:""; position:absolute; top:50%; height:2px; width:14px; margin-top:-1px; background:var(--ink);}
.mx-co-1{left:-40px; top:30%;}
.mx-co-1::after{left:100%;}
.mx-co-2{right:-40px; top:15%;}
.mx-co-2::after{right:100%;}
.mx-co-3{left:-40px; top:80%;}
.mx-co-3::after{left:100%;}

/* 図のポケベル: アイコンと同じ形。比率は aspect-ratio で固定し、
   液晶の中身を入れ替えても外形は動かない */
.hp{
  --frame:clamp(11px, 4vw, 19px);
  appearance:none; -webkit-appearance:none; font:inherit; color:inherit;
  display:grid; grid-template-rows:1fr auto; gap:clamp(11px, 3.6vw, 18px);
  width:100%; aspect-ratio:32/27; min-height:0;
  margin:0; padding:clamp(12px, 4.4vw, 22px);
  background:var(--navy);
  border:var(--frame) solid var(--paper);
  box-shadow:0 0 0 2px var(--navy);
  border-radius:19% / 22%;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:hp-buzz .09s linear .5s 8;
}
.hp:active{transform:scale(.985);}
.hp:focus-visible{outline:3px solid var(--signal); outline-offset:6px;}
.hp-screen{
  position:relative; display:flex; align-items:center;
  padding:0 9%; border-radius:clamp(7px, 2.4vw, 12px); overflow:hidden;
  background:var(--lcd);
  animation:hp-screen-off .01s 1.35s backwards;
}
.hp-msg{
  font-family:var(--lcd-font);
  font-size:clamp(1.6rem, 8.4vw, 2.6rem); line-height:1; letter-spacing:.06em;
  color:var(--lcd-ink); white-space:nowrap;
  animation:hp-ink-off .01s 1.35s backwards;
}
.hp-pos{
  position:absolute; left:9%; bottom:9%;
  font-family:var(--lcd-font); font-size:.66rem; line-height:1; color:var(--lcd-dim);
  animation:hp-ink-off .01s 1.35s backwards;
}
.hp-led{
  position:absolute; top:13%; right:6%; width:9.5%; aspect-ratio:1; border-radius:50%;
  background:var(--signal);
  animation:hp-blink .3s steps(1) .5s 3;
}
.hp.is-blink .hp-led{animation:hp-blink .24s steps(1) 0s 2;}
.hp-keys{display:flex; justify-content:space-between;}
.hp-keys i{width:27%; height:clamp(9px, 3vw, 14px); border-radius:999px; background:var(--paper);}
@keyframes hp-blink{50%{opacity:.18;}}
@keyframes hp-buzz{25%{translate:-2px 0;} 75%{translate:2px 0;}}
@keyframes hp-screen-off{from{background:var(--slate);}}
@keyframes hp-ink-off{from{color:transparent;}}
@keyframes hp-fade-off{from{opacity:0;}}

/* 図の凡例 (番号は図の引き出し線と対応) */
.mx-legend{
  list-style:none; counter-reset:co; margin:26px 0 0; padding:0;
  display:grid; gap:10px;
}
.mx-legend li{
  position:relative; padding-left:34px; font-size:.85rem; line-height:1.6; color:var(--muted);
}
.mx-legend li::before{
  counter-increment:co; content:counter(co);
  position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bg); font-size:.76rem; font-weight:700; line-height:1;
}
.mx-legend b{display:block; color:var(--ink); font-size:.92rem; font-weight:900;}
@media (min-width:560px){
  .mx-legend{grid-template-columns:repeat(3,1fr); gap:16px;}
}

.mx-read{
  margin:22px 0 0; padding:12px 14px; border-radius:14px; background:var(--card);
  border:2px solid var(--line);
  font-size:.86rem; line-height:1.7; color:var(--muted);
  animation:hp-fade-off .01s 1.35s backwards;
}
.mx-read-k{
  display:inline-block; margin-right:.5em; padding:0 8px; border-radius:6px;
  background:var(--lcd); color:var(--lcd-ink); font-family:var(--lcd-font); font-size:1.05rem; letter-spacing:.08em;
}

.mx-lead{margin:30px 0 0; max-width:30em; font-size:1rem; line-height:1.95; word-break:auto-phrase; text-wrap:pretty;}
.mx-cta{
  display:flex; align-items:center; justify-content:center;
  min-height:52px; margin-top:24px; padding:12px 28px;
  border-radius:999px; background:var(--ink); color:var(--bg);
  font-size:1rem; font-weight:700; letter-spacing:.04em; text-decoration:none;
}
.mx-cta:active{opacity:.85;}
@media (min-width:560px){.mx-cta{display:inline-flex;}}
.mx-cta[hidden]{display:none;}
/* 追加ボタンの補助表示 (iPhone の2手順・追加完了・アプリ内ブラウザの案内) */
.mx-install{margin-top:12px; padding:14px 16px; border-radius:16px; background:var(--card); border:2px solid var(--ink);}
.mx-install[hidden]{display:none;}
.mx-install p{margin:0; font-size:.86rem; line-height:1.8; color:var(--muted);}
.mx-install p + p, .mx-install ol + p{margin-top:6px;}
.mx-install .mx-install-h{margin-bottom:6px; font-size:.95rem; font-weight:900; color:var(--ink);}
.mx-install-steps{list-style:none; counter-reset:is; margin:0; padding:0;}
.mx-install-steps li{
  position:relative; padding:4px 0 8px 36px; font-size:.92rem; font-weight:700; line-height:1.7;
}
.mx-install-steps li::before{
  counter-increment:is; content:counter(is);
  position:absolute; left:0; top:4px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bg); font-size:.8rem; line-height:1;
}
.mx-share{display:inline-block; width:1.05em; height:1.25em; vertical-align:-.25em; margin:0 2px; color:#2f7cf6;}
.mx-notice{margin-top:22px; padding:14px 16px; border-radius:16px; border:2px solid var(--ink);}
.mx-notice p{margin:0; font-size:.85rem; line-height:1.8; color:var(--muted);}
.mx-notice b{color:var(--ink);}

/* ---------- もくじ ---------- */
.mx-toc{margin-top:56px;}
.mx-toc-h{margin:0; padding-bottom:10px; border-bottom:2px solid var(--ink); font-size:.95rem; font-weight:900;}
.mx-toc ol{list-style:none; counter-reset:toc; margin:0; padding:0;}
.mx-toc li{border-bottom:1px solid var(--line);}
.mx-toc a{
  display:flex; align-items:center; gap:14px; min-height:48px; padding:8px 0;
  color:var(--ink); text-decoration:none; font-weight:700;
}
.mx-toc a::before{
  counter-increment:toc; content:counter(toc);
  flex:none; width:34px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); font-size:.74rem; font-weight:700; line-height:1;
}

/* ---------- 本文の章 ---------- */
.mx-ch{padding-top:64px; scroll-margin-top:8px;}
.mx-ch h2{
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--ink);
  font-size:clamp(1.45rem, 6vw, 1.8rem); font-weight:900; line-height:1.3;
  font-feature-settings:"palt";
}
.mx-no{
  flex:none; min-width:46px; height:32px; padding:0 10px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bg); font-size:1rem; font-weight:900;
}
.mx-ch h3{margin:34px 0 10px; font-size:1.05rem; font-weight:900;}
.mx-ch p{max-width:36em; margin:0 0 12px; font-size:.95rem; line-height:1.95; color:var(--muted);}
.mx-c{white-space:nowrap; font-weight:700; color:var(--ink);}
.mx-small{font-size:.85rem !important;}

/* 送りかた: 手順ごとに、そのとき液晶に出る表示を添える。
   番号と縦線は「この順で進む」ことを示す */
.mx-flow, .mx-steps{list-style:none; counter-reset:st; margin:22px 0 0; padding:0;}
.mx-flow li, .mx-steps li{
  position:relative; padding:0 0 28px 50px;
  font-size:.9rem; line-height:1.85; color:var(--muted);
}
.mx-flow li::before, .mx-steps li::before{
  counter-increment:st; content:counter(st);
  position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bg); font-size:.9rem; font-weight:900; line-height:1;
}
.mx-flow li::after, .mx-steps li::after{
  content:""; position:absolute; left:16px; top:40px; bottom:6px; width:2px; background:var(--line);
}
.mx-flow li:last-child::after, .mx-steps li:last-child::after{display:none;}
.mx-flow b, .mx-steps b{display:block; font-size:1rem; font-weight:900; color:var(--ink); line-height:1.6;}
.mx-lcd{
  display:flex; flex-direction:column; justify-content:center;
  width:min(100%, 15rem); min-height:3.4rem; margin:0 0 10px; padding:8px 14px;
  border-radius:10px; background:var(--lcd); color:var(--lcd-ink);
  font-family:var(--lcd-font); font-size:1.05rem; line-height:1.35; white-space:nowrap; overflow:hidden;
}
.mx-lcd small{font-size:.86rem; letter-spacing:.3em; color:var(--lcd-dim);}

/* 語呂の対応表 */
.mx-goro{margin:0; border-top:2px solid var(--ink);}
.mx-goro div{display:flex; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid var(--line);}
.mx-goro dt{
  flex:none; width:7.2rem; padding:4px 10px; border-radius:8px; text-align:right;
  background:var(--lcd); color:var(--lcd-ink); font-family:var(--lcd-font); font-size:1.15rem; letter-spacing:.08em;
}
.mx-goro dd{margin:0; font-size:1rem; font-weight:900; letter-spacing:.06em;}
.mx-goro + p{margin-top:14px;}

/* 打つ → 届く の実例 */
.mx-try{display:block; margin:14px 0 0; border-radius:14px; overflow:hidden; max-width:24rem; border:2px solid var(--ink);}
.mx-try-in, .mx-try-out{display:flex; align-items:baseline; gap:12px; padding:10px 14px; white-space:nowrap; overflow:hidden;}
.mx-try small{flex:none; font-family:var(--ui-font); font-size:.68rem; font-weight:700; opacity:.7;}
.mx-try-in{background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:.82rem;}
.mx-try-out{background:var(--lcd); color:var(--lcd-ink); font-family:var(--lcd-font); font-size:1.25rem; letter-spacing:.06em;}

/* ご注意: 説明書の注意枠。赤は「気づいてほしい」印だけに使う */
.mx-warn{border:2px solid var(--ink); border-radius:18px; overflow:hidden; margin:0 0 18px;}
.mx-warn-h{
  display:flex; align-items:center; gap:10px;
  margin:0 !important; max-width:none !important; padding:10px 16px;
  background:var(--ink); color:var(--bg) !important; font-size:.95rem !important; font-weight:900;
}
.mx-warn-h::before{
  content:"!"; flex:none; width:22px; height:20px; padding-top:4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--signal); color:#fff; font-size:.78rem; font-weight:900; line-height:1;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.mx-warn ul{list-style:none; margin:0; padding:4px 16px;}
.mx-warn li{padding:12px 0; border-bottom:1px solid var(--line); font-size:.9rem; line-height:1.8; color:var(--muted);}
.mx-warn li:last-child{border-bottom:0;}
.mx-warn li b{color:var(--ink); margin-right:.3em;}

/* 故障かな？と思ったら: こんなとき / ここを確かめてください */
.mx-qa{margin:0; border-top:2px solid var(--ink);}
.mx-qa div{display:grid; gap:4px; padding:14px 0; border-bottom:1px solid var(--line);}
.mx-qa dt{font-size:1rem; font-weight:900;}
.mx-qa dd{margin:0; font-size:.9rem; line-height:1.85; color:var(--muted);}
@media (min-width:560px){
  .mx-qa div{grid-template-columns:11em 1fr; gap:18px; align-items:baseline;}
}

/* ---------- 裏表紙 ---------- */
.mx-back{
  margin-top:80px; padding:44px var(--mx-pad-r) calc(44px + env(safe-area-inset-bottom, 0px)) var(--mx-pad);
  background:var(--navy); color:var(--paper); text-align:center;
}
.mx-back img{width:64px; height:64px; border-radius:15px; box-shadow:0 0 0 2px rgba(243,243,238,.25);}
.mx-back p{margin:14px 0 0; font-size:.8rem; font-weight:700; letter-spacing:.2em;}

@media (prefers-color-scheme: dark){
  .hp{box-shadow:none;}
  .mx-back{border-top:1px solid var(--line);}
}
@media (prefers-reduced-motion: reduce){
  .hp, .hp-screen, .hp-msg, .hp-pos, .hp-led, .mx-read, .hp.is-blink .hp-led{animation:none;}
}

/* ================================================================
   広告枠 (全画面のフッターに常時表示)
   画面最下部に固定。アプリではステージの外 (#view-app の下) 、
   紹介サイトでは本文の下に同じ高さの余白を取って、内容が隠れないようにする。
   z-index はページより上、モーダル (40〜) より下。
   ================================================================ */
.ad-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  height:var(--ad-h);
  padding:6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  display:flex; align-items:flex-start; justify-content:center;
  background:var(--bg); border-top:1px solid var(--line);
}
.ad-slot{
  width:320px; max-width:100%; height:50px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* 広告が入るまでのプレースホルダー */
.ad-slot:empty{border:1px dashed var(--line); border-radius:6px;}
.ad-slot:empty::before{content:"広告"; font-size:.68rem; font-weight:700; color:var(--muted); letter-spacing:.2em;}
#view-site{padding-bottom:var(--ad-h);}

/* ================================================================
   開通直後の全画面広告 (無料版のみ・5秒・スキップなし)
   画面全体 (下部の広告枠の上も) を覆う。残り秒数は液晶の書体で示す
   ================================================================ */
.cm-backdrop{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background:var(--navy); color:var(--paper);
}
.cm-backdrop[hidden]{display:none;}
.cm-panel{width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.cm-head{margin:0 0 16px;}
.cm-title{
  display:inline-block; padding:4px 14px; border-radius:8px;
  background:var(--lcd); color:var(--lcd-ink); font-family:var(--lcd-font); font-size:1.1rem; letter-spacing:.1em;
}
.cm-slot{
  width:300px; max-width:100%; height:250px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:8px;
}
.cm-slot:empty{border:1px dashed rgba(243,243,238,.35);}
.cm-slot:empty::before{content:"広告"; font-size:.8rem; font-weight:700; letter-spacing:.2em; color:rgba(243,243,238,.6);}
.cm-count{margin:18px 0 8px; font-size:.9rem; font-weight:700;}
.cm-count b{font-family:var(--lcd-font); font-weight:400; font-size:1.5rem; margin-right:.2em; color:var(--lcd);}
.cm-bar{width:300px; max-width:100%; height:4px; border-radius:999px; background:rgba(243,243,238,.18); overflow:hidden;}
.cm-bar i{display:block; height:100%; width:0; background:var(--lcd);}
.cm-note{margin:14px 0 0; font-size:.72rem; line-height:1.7; color:rgba(243,243,238,.65);}
@media (prefers-reduced-motion: reduce){.cm-bar i{transition:none !important;}}