/* Voice-only / phone mode — high contrast, large targets */
html.phone-mode body { background: #000; }
html.phone-mode .app-header { background: #0a0a0a; border-bottom: 2px solid #ffbe5a; }
html.phone-mode .app-header .brand { font-size: 14px; }

.phone-shell {
  position: fixed; inset: 0; z-index: 80; background: #000; color: #fff;
  display: flex; flex-direction: column; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 10px; overflow: auto;
}
.phone-shell.hidden { display: none; }
.phone-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.phone-top .title { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: #ffbe5a; }
.phone-narration {
  flex: 1; min-height: 120px; max-height: 40vh; overflow: auto;
  background: #111; border: 2px solid #333; border-radius: 12px; padding: 14px;
  font-size: 22px; line-height: 1.35; color: #f5f5f5;
}
.phone-narration .line { margin-bottom: 10px; }
.phone-narration .who { color: #ffbe5a; font-weight: 700; margin-right: 6px; }
.phone-dice {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.phone-dice button {
  min-height: 56px; font-size: 18px; font-weight: 700; border-radius: 12px;
  background: #1a1a1a; color: #fff; border: 2px solid #ff7a18; cursor: pointer;
}
.phone-dice button:active { background: #3a1800; }
.phone-dice .d20 { grid-column: span 2; min-height: 72px; font-size: 28px; border-color: #ffbe5a; background: #221200; }
.phone-ptt-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.phone-ptt {
  width: min(88vw, 320px); height: 120px; border-radius: 24px; border: 3px solid #e04b4b;
  background: radial-gradient(circle at 50% 40%, #5a1010, #1a0505);
  color: #fff; font-size: 28px; font-weight: 800; letter-spacing: 0.06em; cursor: pointer;
  touch-action: none; user-select: none;
}
.phone-ptt.live { background: radial-gradient(circle at 50% 40%, #c02020, #400808); box-shadow: 0 0 24px #e04b4b; }
.phone-ptt.latched { border-color: #ffbe5a; box-shadow: 0 0 20px #ffbe5a88; }
.phone-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.phone-row .btn, .phone-shell .btn {
  min-height: 44px; font-size: 15px; padding: 10px 14px; border-radius: 10px;
}
.phone-note {
  font-size: 13px; color: #bbb; text-align: center; line-height: 1.3;
  border: 1px solid #333; border-radius: 8px; padding: 8px; background: #0d0d0d;
}
.phone-note strong { color: #ffbe5a; }
.phone-voice-status { font-size: 14px; text-align: center; color: #9f9; min-height: 1.2em; }
.phone-mic-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.phone-mic-row select {
  min-height: 44px; font-size: 14px; background: #111; color: #fff; border: 2px solid #555; border-radius: 8px; max-width: 70vw;
}
.phone-suggest {
  position: fixed; bottom: 16px; left: 12px; right: 12px; z-index: 90;
  background: #1a1200; border: 2px solid #ffbe5a; border-radius: 12px; padding: 14px; color: #fff;
  box-shadow: 0 8px 24px #000a;
}
.phone-suggest p { margin: 0 0 10px; font-size: 16px; }
.phone-suggest .actions { display: flex; gap: 8px; }