/* Mail board: locked 366×744, uniform --mail-panel-scale (same fit logic as backpack). */
#gameScreen .panel-overlay.is-mail{
  --mail-panel-scale:1;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:52px 8px 12px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#gameScreen .panel-overlay.is-mail .mail-fit{
  position:relative !important;
  flex:none !important;
  width:calc(366px * var(--mail-panel-scale,1)) !important;
  height:calc(744px * var(--mail-panel-scale,1)) !important;
  pointer-events:auto !important;
}
#gameScreen .panel-overlay.is-mail .game-panel{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:366px !important;
  height:744px !important;
  max-width:none !important;
  max-height:none !important;
  min-width:366px !important;
  min-height:744px !important;
  margin:0 !important;
  overflow:hidden !important;
  transform:translate(-50%,-50%) scale(var(--mail-panel-scale,1)) !important;
  transform-origin:center center !important;
}
#gameScreen .panel-overlay.is-mail .panel-content{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

@keyframes mail-wiggle {
  0%, 68%, 100% { transform: rotate(0deg); }
  72% { transform: rotate(-16deg); }
  76% { transform: rotate(14deg); }
  80% { transform: rotate(-12deg); }
  84% { transform: rotate(9deg); }
  88% { transform: rotate(-5deg); }
  92% { transform: rotate(3deg); }
}
.mail-button.has-unread,
.mail-button:has(#mailBadge:not(.is-hidden)) {
  transform-origin: 50% 70%;
  animation: mail-wiggle 2s ease-in-out infinite;
}
.mail-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:none;margin:0 0 8px}
.mail-clear-btn{margin-left:auto}
.panel-content:has(.mail-list),
.panel-content:has(.mail-detail),
.panel-content:has(.mail-compose),
#panelContent.is-mail{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  align-content:flex-start !important;
  overflow:hidden !important;
  min-height:0 !important;
}
.mail-list{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  pointer-events:auto;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  align-content:flex-start !important;
  place-content:flex-start !important;
  gap:8px;
  padding:0 0 8px;
  grid-auto-rows:min-content;
}
.mail-list .panel-card,
.mail-list .mail-row,
.mail-row{
  flex:0 0 auto !important;
  align-self:flex-start !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  box-sizing:border-box;
  align-content:start !important;
  place-content:start !important;
  grid-auto-rows:min-content;
  align-items:center;
}
.mail-row{cursor:pointer}
.mail-row.is-unread{background:#fff8e0}
.mail-row .mail-time{display:block;color:#8a5a2b;font-size:10px;margin-top:3px}
.mail-kind{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:#d4a056;color:#fff;margin-right:4px;vertical-align:middle}
.mail-kind.is-gm{background:#4a8f3a}
.mail-kind.is-sent{background:#8d5727}
.mail-unread{color:#c0392b;font-weight:800;margin-right:4px}
.mail-detail{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:4px 2px 8px;
}
.mail-detail .mail-time{color:#8a5a2b;font-size:11px;margin:6px 0 10px}
.mail-detail .mail-body{white-space:pre-wrap;line-height:1.55;color:#4a2e14;font-size:13px}
.mail-compose{flex:1 1 auto;min-height:0;overflow:auto}
.mail-compose input,.mail-compose textarea{width:100%;box-sizing:border-box;border:2px solid #b47b3a;border-radius:10px;padding:8px;background:#fff8e8;color:#4a2e14;font-size:13px}
.mail-compose textarea{min-height:120px;resize:vertical}
.mail-compose .form-row{margin:0 0 8px}