.deck-mail {
  --mail-accent: #e7bf65;
  position: absolute;
  left: 444px;
  top: 151px;
  z-index: 2;
  color: var(--hud-ink);
  pointer-events: auto;
}
.deck-mail-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--mail-accent);
  transition: color .18s, filter .18s;
}
.deck-mail-toggle svg { width: 30px; height: 24px; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: bevel; }
.deck-mail-toggle:hover, .deck-mail-toggle[aria-expanded="true"] { color: #ffe0a0; filter: drop-shadow(0 0 5px #e7bf6545); }
.deck-mail button:focus-visible, .deck-pet-viewer button:focus-visible { outline: 1px solid #e7bf65; outline-offset: 3px; }
.deck-mail-panel {
  position: absolute;
  left: 0;
  top: 54px;
  width: 322px;
  padding: 17px 20px 21px;
  border: 1px solid #e7bf6566;
  background: linear-gradient(145deg, rgba(12, 22, 27, .98), rgba(5, 15, 21, .96));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.deck-mail-heading, .deck-pet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.deck-mail-heading { padding-bottom: 12px; border-bottom: 1px solid #e7bf6533; }
.deck-mail-heading h3 { color: var(--mail-accent); font-size: 13px; font-weight: 400; letter-spacing: .05em; }
.deck-mail-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: #afc9c7; }
.deck-mail-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.deck-mail-close:hover { color: #ffe0a0; }
.deck-mail-panel h4 { font-size: 14px; line-height: 1.6; font-weight: 400; }
.deck-mail-pet-title { margin-top: 17px; }
.deck-mail-pets { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 12px; }
.deck-mail-pet { text-align: left; }
.deck-mail-pet img { display: block; width: 100%; height: 92px; object-fit: cover; border: 1px solid #afc9c738; transition: border-color .18s; }
.deck-mail-pet:first-child img { object-position: 50% 32%; }
.deck-mail-pet span { display: block; margin-top: 7px; color: var(--hud-soft); font-size: 12px; line-height: 1.6; }
.deck-mail-pet:hover img { border-color: var(--mail-accent); }
.deck-mail-pet:hover span { color: var(--mail-accent); }
.deck-mail-hint { margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--hud-line); }
.deck-mail-hint p { margin-top: 9px; color: var(--hud-soft); font-size: 12px; line-height: 1.9; }
.deck-mail-hint .deck-mail-volume { margin-top: 5px; color: var(--mail-accent); }
.deck-mail-panel[hidden], .deck-pet-viewer[hidden] { display: none; }
.deck-pet-viewer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 13, .93);
  color: #e2f6f3;
}
.deck-pet-frame { width: fit-content; max-width: 100%; }
.deck-pet-heading { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e7bf654d; }
.deck-pet-heading h2 { color: #e7bf65; font-size: 18px; line-height: 1.6; font-weight: 400; letter-spacing: .04em; }
.deck-pet-photo { display: block; max-width: 100%; max-height: calc(100vh - 164px); max-height: calc(100dvh - 164px); width: auto; height: auto; object-fit: contain; }
.deck-pet-switch { display: flex; justify-content: center; align-items: center; gap: 17px; margin-top: 10px; font-size: 13px; }
.deck-pet-switch > span { color: #afc9c74d; }
.deck-pet-switch button { min-height: 38px; padding: 5px 8px; color: #afc9c7; }
.deck-pet-switch button[aria-pressed="true"] { color: #e7bf65; text-decoration: underline; text-decoration-color: #e7bf6570; text-underline-offset: 6px; }
.deck-pet-switch button:hover { color: #ffe0a0; }
@media (max-width: 800px) {
  .deck-mail { left: calc(46vw - 2px); top: calc(9vh + 1px); }
  .deck-mail-toggle { width: 8vw; max-width: 44px; min-width: 28px; height: 36px; }
  .deck-mail-toggle svg { width: 25px; height: 20px; }
  .deck-mail-panel { left: calc(-43vw + 2px); top: 44px; width: min(322px, 94vw); padding: 12px 17px 16px; }
  .deck-mail-pets { gap: 12px; }
  .deck-mail-pet img { height: 78px; }
  .deck-mail-pet-title { margin-top: 12px; }
  .deck-mail-hint { margin-top: 13px; padding-top: 12px; }
}
@media (max-width: 800px) and (max-height: 650px) {
  .deck-mail { top: calc(7vh + 1px); }
  .deck-mail-panel { padding-top: 8px; padding-bottom: 12px; }
  .deck-mail-heading { padding-bottom: 5px; }
  .deck-mail-pet img { height: 60px; }
  .deck-mail-hint { margin-top: 10px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-mail-toggle, .deck-mail-pet img { transition: none; }
}