/* ══════════════════════════════════════════════════
   PAGR-BELL TYPE-II  —  style.css  (Phase 3 rev)
   方針: 静かな1990年代通信機器 / 実機素材感
   ══════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── カラートークン ─────────────────── */
:root {
  /* 本体樹脂色: くすんだ青灰 / ABS樹脂風 */
  --resin-base:   #3d4149;
  --resin-light:  #484e57;
  --resin-dark:   #2c2f35;
  --resin-edge:   #1e2126;
  --resin-hi:     #565d67;
  --resin-shadow: #191c20;

  /* スモークパネル */
  --smoke-face:   #141618;
  --smoke-inner:  #0d0f10;
  --smoke-border: #0a0c0e;

  /* LCD — 文字を明確に読める輝度 */
  --lcd-bg:       #0e1a0e;
  --lcd-pixel:    #72d472;   /* はっきり読める緑 */
  --lcd-dim:      #284828;
  --lcd-off:      #0a120a;

  /* テキスト */
  --text-lcd:     #72d472;
  --text-muted:   #3e7a3e;
  --text-accent:  #90f0a8;
  --text-warn:    #c89030;
  --text-error:   #c84848;
  --text-recall:  #7090d0;

  /* フォント */
  --font-lcd:     'VT323', 'Share Tech Mono', monospace;
  --font-mono:    'Share Tech Mono', monospace;

  /* サイドボタン */
  --sbtn-top:     #404650;
  --sbtn-side:    #282c32;
  --sbtn-press:   #32363e;
}

/* ── ベース / 机面 ───────────────────── */
html, body {
  min-height: 100%;
  background: #2a2a28;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 8px 100px;
  font-family: var(--font-mono);
}

/* 机の木目・テクスチャ感 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      88deg,
      transparent,
      transparent 60px,
      rgba(0,0,0,0.03) 60px,
      rgba(0,0,0,0.03) 61px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    ),
    linear-gradient(160deg, #2e2e2c 0%, #252523 50%, #2a2a27 100%);
  z-index: -1;
}

.desk-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 480px;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════
   PAGER BODY — 横長・薄型・樹脂筐体
   ══════════════════════════════════════════════════ */
.pager-body {
  width: 100%;
  max-width: 100%;
  /* 横長プロポーション */
  background:
    /* シボ感: 細かいノイズライン */
    repeating-linear-gradient(
      92deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.025) 3px,
      rgba(0,0,0,0.025) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.012) 3px,
      rgba(255,255,255,0.012) 4px
    ),
    linear-gradient(175deg, var(--resin-light) 0%, var(--resin-base) 45%, var(--resin-dark) 100%);
  border-radius: 9px 9px 10px 10px;
  border: 1px solid var(--resin-edge);
  box-shadow:
    /* 上辺ハイライト */
    0 1px 0 var(--resin-hi) inset,
    /* 落ち影 */
    0 3px 6px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.6),
    /* 側面影 */
    2px 0 4px rgba(0,0,0,0.3),
    -2px 0 4px rgba(0,0,0,0.3);
  padding: 8px 10px 7px;
  position: relative;
}

/* ── 上面ストリップ ───────────────────── */
.pager-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  padding: 0 2px;
}

.antenna-nub {
  width: 5px;
  height: 14px;
  background: linear-gradient(180deg, var(--resin-hi) 0%, var(--resin-dark) 100%);
  border-radius: 2px 2px 1px 1px;
  border: 1px solid var(--resin-edge);
  box-shadow: 1px 0 2px rgba(0,0,0,0.4);
}

.brand-stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #6a7280;
  /* エンボス彫刻風 */
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 -1px 0 rgba(0,0,0,0.4);
}

/* LEDインジケーター */
.led-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.led-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1e22;
  border: 1px solid #0e1214;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
  position: relative;
}
/* POWER LED: 常時微点灯 */
#led-power {
  background: #243a24;
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.4),
    0 0 3px rgba(60,140,60,0.25);
}
/* CALL LED: 着信時点滅 (JSで制御) */
.led-call { background: #1a1e22; }
.led-call.active {
  background: #4da84d;
  box-shadow: 0 0 5px rgba(77,168,77,0.6);
}

/* ── メインパネル（LCD窓 + サイドボタン） ── */
.pager-main-panel {
  display: flex;
  gap: 8px;
  align-items: flex-start;  /* 高さをLCDに合わせる */
}

/* ── スモークパネル ─────────────────────
   固定サイズの物理画面として扱う。
   文字数・改行・ビューポートで変形しない。
   ─────────────────────────────────────── */
.lcd-smoke-panel {
  /* 固定幅: 端末本体の残り幅を占有しつつ最低幅を保証 */
  flex: 1;
  min-width: 0;             /* flex縮小は許可するが… */
  width: 100%;              /* …以下のlcd-screenが固定幅を決める */
  background: var(--smoke-face);
  border-radius: 4px;
  border: 1px solid var(--smoke-border);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.9) inset,
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 0 var(--resin-hi);
  padding: 5px 6px 4px;
  position: relative;
  /* スモークアクリル感: 縦縞を薄く（可読性優先） */
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    ),
    linear-gradient(var(--smoke-face), var(--smoke-inner));
}

/* スモーク板の光沢（上辺に細い反射） */
.smoke-glare {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 70%,
    transparent 100%);
  pointer-events: none;
}

/* ── LCD ─────────────────────────────────
   固定高さの物理画面。横幅は親に追従。
   ─────────────────────────────────────── */
.lcd-screen {
  width: 100%;
  /* 高さの内訳:
       status-bar    : 14px
       lcd-rule ×2   :  6px  (margin2+1px × 2)
       message-area  : 62px  (24px×1.28×2行 = 61.4 → 62)
       code-bar      : 16px
       padding 6+5   : 11px
       合計          ≒ 109px → 110 に丸め */
  min-height: 110px;
  height: auto;
  border-radius: 2px;
  padding: 6px 8px 5px;
  position: relative;
  flex-shrink: 0;
  /* スキャンライン: 薄め・間隔広め */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.09) 2px,
      rgba(0,0,0,0.09) 3px
    ),
    linear-gradient(180deg, #101c10 0%, #0e1a0e 55%, #0c180c 100%);
  box-shadow: 0 0 18px rgba(100,200,100,0.06) inset;
  transition: box-shadow 0.15s;
}
.lcd-screen.state-error {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.09) 2px, rgba(0,0,0,0.09) 3px),
    linear-gradient(180deg, #1e0e0e 0%, #160a0a 100%);
}
.lcd-screen.state-save {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.09) 2px, rgba(0,0,0,0.09) 3px),
    linear-gradient(180deg, #0e1e0e 0%, #0c1a0c 100%);
}
.lcd-screen.state-input {
  box-shadow: 0 0 20px rgba(100,200,100,0.09) inset;
}

/* ── ステータスバー ───────────────────── */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.status-item {
  font-family: var(--font-lcd);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: 0.5px;
}
.time-item {
  font-size: 13px;
  color: #5a9a5a;
  letter-spacing: 1px;
}
.sig-bars, .bat-bars {
  font-size: 9px;
  color: #4a8a4a;
  letter-spacing: 0;
}

/* ── LCD罫線 ─────────────────────────── */
.lcd-rule {
  height: 1px;
  background: var(--lcd-dim);
  margin: 2px 0;
  opacity: 0.4;
}

/* ── メッセージエリア ─────────────────── */
.message-area {
  min-height: 62px;
  overflow-y: visible;
  overflow-x: hidden;
  padding: 0;
  word-break: break-all;
  position: relative;
}
.message-text {
  font-family: var(--font-lcd);
  font-size: 24px;
  color: var(--lcd-pixel);
  text-shadow:
    0 0 10px rgba(114,212,114,0.65),
    0 0 3px  rgba(114,212,114,0.4);
  letter-spacing: 2px;
  line-height: 1.28;
  word-break: break-all;
  display: block;
}
.cursor {
  font-family: var(--font-lcd);
  font-size: 24px;
  color: var(--lcd-pixel);
  opacity: 0.8;
  animation: blink 1.1s step-end infinite;
  text-shadow: 0 0 8px rgba(114,212,114,0.6);
}
@keyframes blink { 0%,100%{opacity:0.8;} 50%{opacity:0;} }

/* ── コードバー ──────────────────────── */
.code-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  overflow: hidden;
}
.cb-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  opacity: 0.7;
}
.code-display {
  font-family: var(--font-lcd);
  font-size: 14px;
  color: #3a6a3a;
  letter-spacing: 2px;
  min-width: 22px;
  transition: color 0.1s, text-shadow 0.1s;
}
.code-display.active {
  color: var(--text-accent);
  text-shadow: 0 0 6px rgba(130,232,160,0.5);
  animation: code-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes code-pulse { from{opacity:0.65;} to{opacity:1;} }

.cb-sep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--lcd-dim);
  opacity: 0.5;
}
.input-mode-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  opacity: 0.55;
  flex: 1;
  text-align: center;
  transition: color 0.2s, opacity 0.2s;
}
.input-mode-label.active {
  color: #5aaa7a;
  opacity: 1;
  animation: mode-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes mode-pulse { from{opacity:0.55;} to{opacity:1;} }

.mem-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  opacity: 0.7;
}
.mem-limit { opacity: 0.5; }
.mem-count.warn {
  color: var(--text-warn) !important;
  opacity: 1;
}
.mem-count.full {
  color: var(--text-error) !important;
  opacity: 1;
  animation: mem-blink 0.5s step-end infinite;
}
@keyframes mem-blink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* ── システムメッセージ ───────────────── */
.sys-bar {
  display: flex;
  align-items: center;
  height: 16px;
}
.sys-bar.hidden { display: none; }
.sys-msg-text {
  font-family: var(--font-lcd);
  font-size: 13px;
  letter-spacing: 1.5px;
}
.sys-msg-text.msg-error  { color: var(--text-error); text-shadow: 0 0 5px rgba(180,60,60,0.3); }
.sys-msg-text.msg-save   { color: var(--text-accent); text-shadow: 0 0 5px rgba(100,200,130,0.3); }
.sys-msg-text.msg-warn   { color: var(--text-warn); }
.sys-msg-text.msg-recall { color: var(--text-recall); }

/* ── サイドコントロール ───────────────── */
.side-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  padding: 2px 0;
  width: 38px;
}

/* 横長カプセル型物理ボタン */
.side-btn {
  width: 100%;
  height: 22px;
  border: none;
  /* 完全カプセル形状 */
  border-radius: 9999px;
  cursor: pointer;
  position: relative;
  outline: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.05s, box-shadow 0.05s;
  /* 表面: 上から光が当たる塗装金属風 */
  background: linear-gradient(
    180deg,
    #565e6c 0%,
    #474e5a 30%,
    #383e48 70%,
    #2e333c 100%
  );
  box-shadow:
    /* 本体への固定影（押し込み量感） */
    0 3px 0 #14171c,
    0 4px 7px rgba(0,0,0,0.55),
    /* 上辺の細いハイライト（光源） */
    0 1px 0 rgba(255,255,255,0.12) inset,
    /* 左右辺の内側ハイライト */
    1px 0 0 rgba(255,255,255,0.04) inset,
    -1px 0 0 rgba(255,255,255,0.04) inset,
    /* 下辺の内側シャドウ（厚み感） */
    0 -1px 0 rgba(0,0,0,0.3) inset;
}
.side-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #14171c,
    0 1px 3px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset;
  background: linear-gradient(
    180deg,
    #464d5a 0%,
    #383e48 40%,
    #2e333c 100%
  );
}
.side-btn-cap {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.8px;
  /* 印刷感: やや薄い白灰 */
  color: #8a94a0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 -1px 0 rgba(255,255,255,0.04);
  pointer-events: none;
}
/* CLR: ごく控えめな赤みのカプセル */
.side-btn-shift {
  background: linear-gradient(
    180deg,
    #524040 0%,
    #433230 30%,
    #352626 70%,
    #2a1e1e 100%
  );
  box-shadow:
    0 3px 0 #120e0e,
    0 4px 7px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset;
}
.side-btn-shift:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #120e0e,
    0 1px 3px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.05) inset;
  background: linear-gradient(180deg, #413030 0%, #2e2020 100%);
}
.side-btn-shift .side-btn-cap { color: #9a8888; }

/* ボタンリップル */
@keyframes btn-ripple {
  0%   { opacity:0.3; transform:scale(0.8); }
  100% { opacity:0;   transform:scale(1.5); }
}
.btn-ripple {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  animation: btn-ripple 0.2s ease-out forwards;
  pointer-events: none;
}

/* ── 底面ストリップ ───────────────────── */
.pager-bottom-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 2px;
}
.serial-stamp {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.8px;
  color: #484e58;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.strap-lugs {
  display: flex;
  gap: 4px;
}
.strap-lug {
  width: 10px;
  height: 5px;
  background: linear-gradient(180deg, var(--resin-hi) 0%, var(--resin-dark) 100%);
  border-radius: 2px;
  border: 1px solid var(--resin-edge);
}

/* ══════════════════════════════════════════════════
   CAPTURE BUTTON
   ══════════════════════════════════════════════════ */
.capture-bar {
  margin-top: 10px;
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: flex-end;
}
.capture-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid #2a3038;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.capture-btn:hover {
  border-color: #4a6070;
  background: rgba(40,60,80,0.3);
}
.capture-btn:active {
  background: rgba(40,60,80,0.5);
}
.capture-btn-icon {
  font-size: 8px;
  color: #506070;
  line-height: 1;
}
.capture-btn-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: #607080;
  letter-spacing: 1.5px;
}
.capture-btn.capturing .capture-btn-label {
  color: #80c0a0;
}

/* ══════════════════════════════════════════════════
   MESSAGE BOX — 補助パネル（控えめに）
   ══════════════════════════════════════════════════ */
.msgbox-panel {
  margin-top: 20px;
  width: 100%;
  max-width: 480px;
  background: #1a1e22;
  border: 1px solid #252a30;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.msgbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #161a1e;
  border-bottom: 1px solid #1e2428;
}
.msgbox-title {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #8aa0b0;
  letter-spacing: 2px;
}
.msgbox-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #7090a0;
  letter-spacing: 1px;
}
.msgbox-list {
  min-height: 36px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e2428 transparent;
}
.msgbox-list::-webkit-scrollbar { width: 3px; }
.msgbox-list::-webkit-scrollbar-thumb { background: #1e2428; }

.msgbox-empty {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #6080a0;
  text-align: center;
  padding: 12px 0;
  letter-spacing: 2px;
}
.msg-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #141820;
  cursor: pointer;
  transition: background 0.1s;
}
.msg-row:hover { background: rgba(40,50,60,0.4); }
.msg-row:last-child { border-bottom: none; }
.msg-row-body {
  flex: 1;
  padding: 5px 8px 4px;
  min-width: 0;
}
.msg-preview {
  font-family: var(--font-lcd);
  font-size: 14px;
  color: #60c880;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 1px;
  margin-bottom: 1px;
  display: block;
}
.msg-meta {
  font-family: var(--font-mono);
  font-size: 8px;
  color: #6080a0;
  letter-spacing: 0.3px;
}
.msg-delete-btn {
  width: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #604040;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #141820;
  transition: color 0.15s, background 0.15s;
}
.msg-delete-btn:hover { color: #a04040; background: rgba(80,20,20,0.2); }
.msgbox-footer {
  padding: 5px 8px;
  border-top: 1px solid #141820;
  display: flex;
  justify-content: flex-end;
}
.msgbox-clearall-btn {
  font-family: var(--font-mono);
  font-size: 8px;
  color: #806060;
  background: transparent;
  border: 1px solid #503030;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.msgbox-clearall-btn:hover { color: #c08080; border-color: #804040; }

/* ══════════════════════════════════════════════════
   CODE CARD — 極控えめ（補助的な付属品）
   ══════════════════════════════════════════════════ */
.code-card {
  margin-top: 12px;
  width: 100%;
  max-width: 480px;
  background: #111418;
  border: 1px solid #191d22;
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  opacity: 0.72;
}
.code-card:hover { opacity: 0.95; transition: opacity 0.2s; }
.code-card-title {
  font-family: var(--font-mono);
  font-size: 7px;
  color: #7090a0;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.code-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.code-grid span {
  font-family: var(--font-lcd);
  font-size: 11px;
  color: #50a870;
  text-align: center;
  white-space: nowrap;
}
.code-blank { visibility: hidden; }

/* ══════════════════════════════════════════════════
   INPUT PAD OVERLAY
   ══════════════════════════════════════════════════ */
.input-pad-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.input-pad-overlay.open {
  pointer-events: auto;
  /* 薄いスモーク */
  background: rgba(0,0,0,0.55);
}
.input-pad-overlay.open::before {
  content: '';
  position: absolute;
  inset: 0;
}

/* ══════════════════════════════════════════════════
   INPUT PAD — 送信端末面板
   ══════════════════════════════════════════════════ */
.input-pad {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 360px;
  /* 端末筐体: 本体より少し暗い樹脂 */
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.02) 3px,
      rgba(0,0,0,0.02) 4px
    ),
    linear-gradient(175deg, #393e46 0%, #2e3238 50%, #252830 100%);
  border-radius: 14px 14px 0 0;
  border: 1px solid #1e2228;
  border-bottom: none;
  box-shadow:
    0 -3px 20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 0 14px 18px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 101;
}
.input-pad.open {
  transform: translateX(-50%) translateY(0%);
}

/* ── 端末ヘッダー（機械的・ミニマル） ── */
.pad-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 5px;
  gap: 4px;
}
.pad-indicator-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.pad-ind-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a2018;
  border: 1px solid #0e1210;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
  flex-shrink: 0;
}
.pad-ind-dot.active {
  background: #2e6a38;
  box-shadow: 0 0 3px rgba(46,106,56,0.4);
  animation: ind-blink 2s ease-in-out infinite;
}
@keyframes ind-blink { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.pad-ind-label {
  font-family: var(--font-mono);
  font-size: 6.5px;
  color: #3a4250;
  letter-spacing: 1.8px;
  flex: 1;
}
/* ドラッグバーは細く・控えめに */
.pad-drag-bar {
  width: 28px; height: 2px;
  background: #252930;
  border-radius: 1px;
  border: 1px solid #1a1e24;
}

/* ── サブ液晶表示窓 ──────────────────── */
.pad-sublcd {
  margin-bottom: 10px;
  background: #0c1410;
  border: 1px solid #0a1008;
  border-radius: 3px;
  padding: 3px 6px;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.8) inset,
    0 1px 0 rgba(255,255,255,0.03);
  /* スキャンライン薄く */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0,0,0,0.2) 1px,
      rgba(0,0,0,0.2) 2px
    ),
    linear-gradient(#0c1410, #0a1208);
}
.pad-sublcd-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
}
.pad-sublcd-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: #1e3a1e;
  letter-spacing: 0.8px;
  opacity: 0.8;
  flex-shrink: 0;
}
.pad-sublcd-code {
  font-family: var(--font-lcd);
  font-size: 16px;
  color: #2a502a;
  letter-spacing: 2px;
  min-width: 22px;
  flex-shrink: 0;
  transition: color 0.1s;
}
.pad-sublcd-code.active {
  color: #4da84d;
  text-shadow: 0 0 5px rgba(77,168,77,0.3);
  animation: code-pulse 0.8s ease-in-out infinite alternate;
}
.pad-sublcd-sep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #1a2e1a;
  opacity: 0.4;
}
.pad-sublcd-msg {
  font-family: var(--font-lcd);
  font-size: 14px;
  color: #2e4e2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  letter-spacing: 1px;
}

/* ══════════════════════════════════════════════════
   入力パッド: 面板 + 数字キー（公衆電話・専用端末風）
   面板色: くすんだ灰緑の塗装金属
   数字キー: 白灰の丸い立体キー
   ══════════════════════════════════════════════════ */

/* ── 数字キー面板 ────────────────────── */
.pad-faceplate {
  /* くすんだ灰緑の塗装金属 */
  background:
    /* 細かい塗装テクスチャ */
    repeating-linear-gradient(
      91deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.04) 2px,
      rgba(0,0,0,0.04) 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.015) 2px,
      rgba(255,255,255,0.015) 3px
    ),
    linear-gradient(175deg, #3a4038 0%, #30362e 45%, #282e26 100%);
  border-radius: 4px;
  /* 面板の縁: 彫り込み風 */
  border-top: 1px solid #1e221c;
  border-left: 1px solid #1c201a;
  border-right: 1px solid #141816;
  border-bottom: 2px solid #101410;
  padding: 10px 12px 10px;
  box-shadow:
    /* 上辺ハイライト（斜光） */
    0 1px 0 rgba(255,255,255,0.06) inset,
    /* 内側深さ */
    0 3px 8px rgba(0,0,0,0.4) inset;
}

/* 面板上部: 機器ラベル行 */
.pad-faceplate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding: 0 2px;
}
.pad-faceplate-label {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 2.5px;
  /* くすんだ黄白: 機器への白印刷 */
  color: #7a8070;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
/* 面板上部: 小さなLEDランプ */
.pad-faceplate-led {
  display: flex;
  gap: 4px;
}
.faceplate-led-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1e2a1e;
  border: 1px solid #0e160e;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
}
.faceplate-led-dot.active {
  background: #3a6a3a;
  box-shadow: 0 0 3px rgba(58,106,58,0.4);
}

/* 面板中央の境界線 */
.pad-faceplate-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.3) 80%, transparent);
  margin: 0 0 8px;
  position: relative;
}
.pad-faceplate-rule::after {
  content: '';
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0.04) 80%, transparent);
}

.pad-keypad {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pad-key-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ── 数字キー: 白灰の立体丸ボタン ─────── */
.pad-key {
  flex: 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  outline: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.04s, box-shadow 0.04s;
  max-width: 54px;
  height: 54px;
  aspect-ratio: 1 / 1;
  align-self: center;
}

.pad-num {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: normal;
  /* 機械印字: 濃いグレー文字 */
  color: #2a2e32;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  /* 表面: 中央が明るい白灰の球面グラデ */
  background: radial-gradient(
    circle at 40% 35%,
    #d8dce0 0%,
    #b8bec6 35%,
    #9aa0aa 65%,
    #828890 85%,
    #70767e 100%
  );
  box-shadow:
    /* 面板への固定影（キーの厚み・沈み込み） */
    0 0 0 2px rgba(0,0,0,0.25),
    0 0 0 3px rgba(0,0,0,0.12),
    /* キーの底面影 */
    0 4px 0 #141816,
    0 5px 10px rgba(0,0,0,0.7),
    /* 上辺の細いハイライト（球面反射） */
    0 -2px 3px rgba(255,255,255,0.5) inset,
    /* 右上の球面感 */
    -2px -2px 6px rgba(255,255,255,0.2) inset,
    /* 下辺の影（球面の裏側） */
    0 2px 4px rgba(0,0,0,0.3) inset;
}
.pad-num:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.25),
    0 0 0 3px rgba(0,0,0,0.12),
    0 1px 0 #141816,
    0 2px 4px rgba(0,0,0,0.6),
    0 -1px 2px rgba(255,255,255,0.3) inset,
    0 2px 5px rgba(0,0,0,0.4) inset;
  background: radial-gradient(
    circle at 40% 35%,
    #c0c4ca 0%,
    #a4aab2 35%,
    #888e98 65%,
    #74797f 100%
  );
}

/* 取消キー: 面板と同系の暗い丸ボタン */
.pad-func {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #8a9298;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  background: radial-gradient(
    circle at 40% 35%,
    #484e58 0%,
    #383e48 40%,
    #2c3038 70%,
    #22262e 100%
  );
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.3),
    0 4px 0 #0e1012,
    0 5px 8px rgba(0,0,0,0.65),
    0 -1px 2px rgba(255,255,255,0.08) inset,
    0 2px 4px rgba(0,0,0,0.3) inset;
}
.pad-func:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.3),
    0 1px 0 #0e1012,
    0 2px 4px rgba(0,0,0,0.6),
    0 2px 5px rgba(0,0,0,0.4) inset;
  background: radial-gradient(
    circle at 40% 35%,
    #383e48 0%,
    #2c3038 50%,
    #1e2228 100%
  );
}

/* 閉じるキー: 取消より少し暗め */
.pad-close {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #7a8088;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  background: radial-gradient(
    circle at 40% 35%,
    #3c4048 0%,
    #2e3238 40%,
    #242830 70%,
    #1c2026 100%
  );
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.3),
    0 4px 0 #0a0c10,
    0 5px 8px rgba(0,0,0,0.65),
    0 -1px 2px rgba(255,255,255,0.06) inset,
    0 2px 4px rgba(0,0,0,0.35) inset;
}
.pad-close:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.3),
    0 1px 0 #0a0c10,
    0 2px 4px rgba(0,0,0,0.6),
    0 2px 5px rgba(0,0,0,0.4) inset;
  background: radial-gradient(
    circle at 40% 35%,
    #2e3238 0%,
    #22262e 50%,
    #181c22 100%
  );
}

/* ── 丸ボタン押下エフェクト ────────── */
@keyframes pad-ripple {
  0%   { opacity:0.2; transform:scale(0.75); }
  100% { opacity:0;   transform:scale(1.2); }
}
.pad-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  animation: pad-ripple 0.18s ease-out forwards;
  pointer-events: none;
}

/* ── 面板ネジ ─────────────────────────── */
.pad-screw-row {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding: 0 2px;
  align-items: center;
}
/* ネジとネジ間の細い仕切り線 */
.pad-screw-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.25), transparent);
  margin: 0 4px;
}
.pad-screw {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #404850 0%, #282e36 60%, #1c2028 100%);
  border: 1px solid #101418;
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  flex-shrink: 0;
}
/* ネジ溝（プラス） */
.pad-screw::before,
.pad-screw::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,0.55);
  border-radius: 0.5px;
}
.pad-screw::before {
  width: 1.5px; height: 6px;
  top: 1px; left: 3.25px;
}
.pad-screw::after {
  width: 6px; height: 1.5px;
  top: 3.25px; left: 1px;
}

/* ══════════════════════════════════════════════════
   ANIMATIONS (LCD / エラー)
   ══════════════════════════════════════════════════ */
@keyframes convert-glow {
  0%,100% { text-shadow: 0 0 10px rgba(114,212,114,0.65), 0 0 3px rgba(114,212,114,0.4); }
  50%      { text-shadow: 0 0 20px rgba(144,240,168,0.85), 0 0 8px rgba(114,212,114,0.7); }
}
.convert-flash { animation: convert-glow 0.22s ease; }

@keyframes error-shake {
  0%,100% { transform:translateX(0); }
  25%      { transform:translateX(-2px); }
  75%      { transform:translateX(2px); }
}
.error-shake { animation: error-shake 0.18s ease; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
   方針: LCD・液晶窓は固定サイズのまま変えない。
         小画面では端末全体を transform:scale() で縮小する。
         lcd-screen に個別のブレークポイントは設けない。
   ══════════════════════════════════════════════════ */

/* 標準: 340px端末が収まる余白を確保 */
html, body {
  /* すでに上部で定義済みだが、padding-bottomだけ上書き */
}

/* 小画面: LCD固定のまま端末全体を縮小 */
@media (max-width: 380px) {
  html, body { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 320px) {
  .desk-surface {
    transform: scale(0.85);
    transform-origin: top center;
    width: calc(100% / 0.85);
    margin-left: calc((100% - 100% / 0.85) / 2);
  }
}