/* UI coordinates never inherit the map's camera transform. */
#camera-world { transition: none; }
#players { grid-template-rows: none; grid-auto-rows: max-content; align-content: space-between; }
.player-hud-card { align-self: start; }
.cash-value { display: inline-block; font-variant-numeric: tabular-nums; transition: color .2s; }
.cash-value.cash-count-up { color: #4ade80; }
.cash-value.cash-count-down { color: #f87171; }
#money-notif-container { position: fixed; inset: 0; overflow: visible; z-index: 80; }
#money-notif-container .money-notif {
  width: min(264px, calc(100vw - 24px));
  white-space: normal;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #111e30f7;
  box-shadow: 0 5px 18px #0008;
  font-size: 16px;
  line-height: 1.22;
  animation: transactionNotice 4s ease-out both;
}
.money-notif strong { font-size: 25px; line-height: 1.2; }
.money-notif small { font-size: 14px; color: #f3e8cf; }
.money-notif span { color: #f3e8cf; }
.money-notif span:last-child { color: #c7d6df; }
@keyframes transactionNotice {
  0% { opacity: 0; transform: translateY(4px); }
  8%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
#transaction-rail { height: 0; flex: none; }
#dice-box-3d-wrap { width: clamp(240px, 28vw, 360px); height: clamp(150px, 17vw, 220px); }
.physics-dice-arena-fixed { top: 50%; }
.physics-dice-arena-fixed.dice-stage-hidden { opacity: 0; visibility: hidden; }
.center-hud-fixed { top: 29%; }
.board-ui-overlay > .roll { top: 70%; }
.board-ui-overlay > #hint { top: calc(70% + 44px); }
.dice-banner { font-size: 17px; background: #101f31ed; padding: 6px 10px; white-space: normal; text-align: center; }
#dice-box-3d-wrap, #dice-box-3d-wrap canvas { background: transparent; border: 0; box-shadow: none; }
#dice-box-3d-wrap canvas { image-rendering: pixelated; }
#dice-loading-note { position:absolute;inset:0;display:grid;place-items:center;color:#f5dcac;font-size:18px;text-align:center; }
.event-popup-panel, .rent-popup-panel { max-height: calc(100dvh - 32px); overflow-y: auto; }
.event-popup-panel { width: min(540px, calc(100vw - 24px)); }
.event-popup-body { font-size: 18px; line-height: 1.45; }
.event-popup-body p { margin: 8px 0; }
.event-illustration { width: 100%; height: 112px; object-fit: contain; image-rendering: pixelated; border-radius: 8px; background: #13263b; }
.event-player { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
.event-player img { width: 38px; height: 46px; object-fit: contain; image-rendering: pixelated; }
#event-popup-result { padding: 10px; border: 1px solid #e7c77655; border-radius: 6px; color: #f5dcac; }
#event-sample-note { font-size: 13px; color: #b9c8d7; }
.event-effect-badge.gain { color: #4ade80; border-color: #4ade8077; }
.event-effect-badge.loss { color: #f87171; border-color: #f8717177; }
.rent-timer-bar i, .event-timer-bar i { transition: width .1s linear; }
@media (max-width: 900px) {
  #transaction-rail { height: 125px; border-top: 1px solid #e7c77622; background: #0d1929; }
  #money-notif-container .money-notif { width: min(340px, calc(100vw - 24px)); padding: 7px 12px; font-size: 15px; }
  .money-notif strong { font-size: 23px; }
  .center-hud-fixed { top: 31%; }
  #dice-box-3d-wrap { width: min(240px, 55vw); height: 150px; }
  .event-illustration { height: 80px; }
  .event-popup-body { font-size: 16px; }
}
@media (max-width: 600px) {
  #players { inset: 8px 8px auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 4px 18px; }
  .player-hud-card { min-width: 0; max-width: 100%; padding: 5px; gap: 5px; }
  .player-hud-portrait { width: 32px; height: 46px; }
  .player-hud-portrait .avatar { width: 30px; height: 42px; }
  .player-hud-details { min-width: 0; }
  .player-hud-topline { flex-wrap: wrap; gap: 2px; }
  .player-hud-name { max-width: 100%; font-size: 12px; }
  .player-hud-cash { flex-wrap: wrap; gap: 2px; }
  .hud-turn-badge { font-size: 7px; }
  .center-hud-fixed { top: 39%; }
  .center-hud-fixed .hud-eyebrow { display: none; }
  #dice-box-3d-wrap { width: 200px; height: 120px; }
  .board-ui-overlay > .roll { top: 74%; }
  .board-ui-overlay > #hint { top: calc(74% + 40px); }
  #transaction-rail { height: 135px; }
}
@media (prefers-reduced-motion: reduce) { #money-notif-container .money-notif { animation: none; } }
@media (max-width: 600px) and (max-height: 800px) {
  .player-hud-card { padding: 3px 4px; gap: 4px; }
  .player-hud-portrait { width: 26px; height: 36px; }
  .player-hud-portrait .avatar { width: 26px; height: 34px; }
  .player-hud-name { font-size: 11px; }
  .cash-amount { font-size: 13px; }
  .player-hud-cash { margin: 2px 0; }
}
.reduced-motion #money-notif-container .money-notif { animation: none; }