/* B2 game HUD: four compact player cards above an open board, controls below. */
body #hud {
  top: auto; bottom: max(20px, env(safe-area-inset-bottom)); right: 22px; left: auto;
  width: 390px; max-height: calc(100dvh - 214px); overflow: visible;
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px;
  padding: 13px 14px 10px; background: var(--v31-paper); border: 2px solid var(--v31-border);
  border-radius: 2px; box-shadow: var(--v31-frame); backdrop-filter: none; z-index: 5;
}
body #hud::before { content: ""; position: absolute; left: -4px; top: -4px; width: 12px; height: 4px; background: var(--v31-deep); box-shadow: 4px -4px var(--v31-deep); pointer-events: none; }
body #players {
  position: fixed; top: 79px; left: 50%; right: auto; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px;
  width: min(1040px, calc(100vw - 48px)); z-index: 5;
}
body #players .v26-player-row { min-width: 0; position: relative; --player: #24a56d; }
body #players .v26-player-row:nth-child(2) { --player: #e85569; }
body #players .v26-player-row:nth-child(3) { --player: #875dd4; }
body #players .v26-player-row:nth-child(4) { --player: #e0b32c; }
body #players .player {
  position: relative; display: grid; grid-template-columns: 47px minmax(0, 1fr);
  grid-template-rows: auto auto; gap: 3px 10px; align-items: center;
  min-height: 77px; width: 100%; margin: 0; padding: 10px 11px 9px;
  background: var(--v31-paper); color: var(--v31-ink); border: 2px solid var(--v31-border); border-top: 5px solid var(--player);
  border-radius: 1px; box-shadow: inset 2px 0 #c5e6fa, inset -2px -2px #acd7f2, 2px 3px var(--v31-deep); text-align: left;
}
body #players .player:hover:not(:disabled) { background: #ecf7fe; }
body #players .player.active { border-color: var(--v31-border); border-top-color: var(--player); background: #fffce7; box-shadow: 0 0 0 2px #fff7ae, 0 0 0 4px var(--player), 4px 5px var(--v31-deep), inset 2px 2px #fff; }
body #players .player.active::after { content: ""; position: absolute; top: -9px; left: 18px; width: 9px; height: 9px; background: var(--player); border: 2px solid var(--v31-deep); box-shadow: 2px 2px #fff9c8; }
body #players .player.out { opacity: .62; filter: saturate(.3); }
body #players .avatar.character-avatar {
  grid-row: 1 / 3; width: 47px; height: 53px; background: #e2f0f5; border: 0; border-radius: 0;
  box-shadow: none; align-self: center; image-rendering: pixelated;
}
body #players .character-avatar img { object-fit: cover; object-position: 50% 18%; image-rendering: pixelated; }
body #players .character-avatar::after { height: 3px; }
body #players .v24-player-identity { grid-column: 2; grid-row: 1; gap: 1px; min-width: 0; align-self: end; }
body #players .player-name { font-size: 14px; font-weight: 850; line-height: 1.25; max-width: none; width: 100%; color: var(--v31-ink); }
body #players .player-cash {
  grid-column: 2; grid-row: 2; margin: 0; color: var(--v31-ink); font-size: 21px; font-family: Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700;
  line-height: 1.1; letter-spacing: -.035em; align-self: start; font-variant-numeric: tabular-nums; min-width: 0;
}
body #players .v24-player-stay { font-size: 10px; color: #76519a; }
body #players .v24-player-stay[data-stay-kind=hospital] { color: #18715b; }
body #players .v24-player-stay[data-stay-kind=hotel] { color: #956028; }
body #players .v26-player-row.has-spirit > .player { padding-bottom: 30px; }
body #players .v26-player-spirit {
  bottom: 4px; left: 11px; right: 6px; max-width: none; min-width: 0; min-height: 23px;
  display: flex; align-items: center; gap: 5px; color: #34527a; padding: 1px 2px;
  background: #e4f2fa; border: 0; border-radius: 0; font-size: 10px;
}
body #players .v26-player-spirit .v26-spirit-art { width: 21px; height: 23px; }
body #players .v26-player-spirit > span:not(.v26-spirit-art) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #players .v26-player-spirit > b { color: #49657f; margin-left: auto; font-size: 9px; flex: none; }
body #hud .hud-head { grid-column: 1 / -1; display: flex; margin: -1px -2px 0; padding: 0 0 8px; border-bottom: 2px solid #95c5e5; min-width: 0; gap: 8px; }
body #hud .hud-head h2 { font-size: 13px; margin: 0; font-weight: 800; color: #467295; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #hud .v26-round-status { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; color: var(--v31-ink); font-size: 14px; font-weight: 850; max-width: 80%; }
body #hud #round-label { line-height: 1.25; }
body #hud #fee-multiplier { border: 1px solid #b99237; background: #fff0b2; color: #7c5518; border-radius: 0; font-size: 10px; padding: 2px 4px; }
body #hud .turn-row { grid-column: 1 / -1; display: flex; margin: 0; gap: 10px; font-size: 13px; min-width: 0; align-items: center; }
body #hud #turn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body #hud #turn-timer { font-family: Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700; color: var(--v31-ink); background: #e6f4ff; padding: 2px 8px; min-width: 48px; font-size: 19px; line-height: 1.25; text-align: center; border-left: 2px solid #97bdd9; }
body #hud #turn-timer.urgent { color: #b82542; background: #ffe8da; border-color: #d77979; }
body #hud #dice-display { grid-column: 1; grid-row: 3; height: 74px; align-self: center; margin: 0; min-width: 0; }
body #hud .neon-dice-view { gap: 7px; }
body #hud .neon-dice-die { --neon-die-size: 56px; }
body #hud .neon-dice-die::before { border-radius: 0; filter: none; opacity: .22; }
body #hud .neon-dice-face { border-color: #48597a; }
body #hud #turn-actions { grid-column: 2; grid-row: 3; display: grid; align-content: center; gap: 7px; min-width: 0; }
body #hud #turn-actions > .gold-btn, body #hud #turn-actions > .quiet-btn { font-size: 17px; padding: 10px 8px; min-height: 58px; white-space: normal; }
body #hud #turn-actions > .gold-btn:only-child { font-size: 22px; min-height: 72px; }
body #hud #action-description { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--v31-muted); }
body #hud .estate-tools { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 7px; margin: 3px 0 0; }
body #hud .estate-tools > button { min-width: 0; min-height: 42px; font-size: 12px; padding: 7px 5px; }
body #hud #cards-toggle { gap: 6px; white-space: normal; }
body #hud #cards-toggle > span { min-width: 0; overflow-wrap: anywhere; }
body #hud #cards-toggle[aria-expanded=true] { background: #c8eafa; border-color: #1a5791; }
body .compact-cards-count { flex: none; min-width: 23px; height: 24px; padding: 0 4px; background: #d23a55; border: 1px solid #9f244b; border-radius: 0; color: #fff; font-size: 14px; font-weight: 850; box-shadow: inset 1px 1px #f88491; }
body #hud #fair-btn { grid-column: 1 / -1; margin: 0; padding: 3px 2px 0; font-size: 10px; line-height: 1.4; min-height: 18px; color: #54708c; border-top: 0; }
body #hud #last-event { display: none; }
body #hud:has(#dice-display.v24-dice-quiet) #turn-actions { grid-column: 1 / -1; }
body #hud .v24-action-panel { gap: 7px; color: var(--v31-ink); background: #edf6fc; border: 2px solid #719fc0; border-radius: 1px; padding: 10px; box-shadow: inset 2px 2px #fff; }
body #hud .v24-action-panel h3 { color: var(--v31-ink); font-size: 17px; }
body #hud .v24-kicker { color: #42698b; }
body #hud .v24-caption { color: #526984; font-size: 11px; }
body #hud .v24-state-icon { color: #28507d; background: #c9e7fa; border: 2px solid #5588b0; border-radius: 0; box-shadow: 2px 2px #8fbada; width: 35px; height: 35px; font-size: 24px; }
body #hud .v24-debt-panel { border-color: #c98b8b; background: #fff2ec; }
body #hud .v24-debt-heading strong { color: var(--v31-negative); font-size: 25px; }
body #hud .v24-gap { color: #a4304d; }
body #hud .v24-covered { color: var(--v31-positive); }
body #hud #turn-actions .v24-action-panel .gold-btn, body #hud #turn-actions .v24-action-panel .quiet-btn { font-size: 13px; min-height: 42px; padding: 8px; }
body #hud .incoming { color: #7f481d; background: #fff0b7; border: 2px solid #c29a4f; border-radius: 0; font-size: 12px; padding: 8px; margin: 0; }
body #view-tools { left: 22px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 5; gap: 8px; }
body #view-tools .locate-me { color: var(--v31-ink); background: var(--v31-paper); border: 2px solid var(--v31-border); border-radius: 2px; padding: 11px 14px; min-height: 44px; font-size: 13px; box-shadow: var(--v31-small-frame); }
body #view-tools .locate-me:not(:has(svg, img, .v31-pixel-icon))::before { content: "⌖"; font-size: 22px; vertical-align: -2px; margin-right: 7px; color: #bd304b; }
body .compact-view-control { z-index: 7; }
body .compact-view-toggle { gap: 7px; height: 44px; padding: 0 11px; font-size: 12px; }
body .compact-view-toggle i { color: #33628b; }
body .compact-view-menu { color: var(--v31-ink); background: var(--v31-paper); border: 2px solid var(--v31-border); border-radius: 1px; padding: 6px; gap: 5px; min-width: 150px; box-shadow: var(--v31-small-frame); }
body .compact-view-menu button { color: var(--v31-ink); border: 1px solid transparent; border-radius: 0; background: #eef7fe; min-height: 42px; font-weight: 700; font-size: 13px; white-space: normal; }
body .compact-view-menu button[aria-pressed=true] { color: var(--v31-ink); border-color: #7dadcb; background: #c8e8fb; box-shadow: inset 3px 0 #347dae; }
body #card-dock.compact-card-dock { color: var(--v31-ink); background: var(--v31-paper); border: 2px solid var(--v31-border); border-radius: 2px; padding: 12px; box-shadow: var(--v31-frame); max-height: min(440px, 55dvh); }
body .compact-card-dock .card-dock-head { padding-bottom: 9px; border-bottom: 2px solid #a4c9e3; gap: 7px; }
body .compact-card-dock .card-dock-head > strong { white-space: normal; font-size: 14px; }
body .compact-dock-close { min-width: 32px; width: 32px; height: 32px; color: var(--v31-ink); background: #e0f0fc; border: 2px solid #4679a2; border-radius: 0; font-size: 24px; }
body .compact-card-dock #hand-cards { gap: 9px; padding: 2px 2px 5px; }
body .compact-card-dock .hand-card { display: grid; grid-template-columns: 39px minmax(0,1fr); gap: 2px 6px; min-width: 0; background: #edf6fc; border: 2px solid #77a0bf; border-radius: 1px; padding: 7px; color: var(--v31-ink); box-shadow: 1px 2px #a7c8de; }
body .compact-card-dock .hand-card > .v26-card-art { width: 39px; grid-row: 1 / 3; border-radius: 0; }
body .compact-card-dock .hand-card > strong { font-size: 12px; line-height: 1.35; max-width: none; overflow-wrap: anywhere; }
body .compact-card-dock .hand-card > b { color: #426886; font-size: 11px; margin-left: 0; }
body .compact-card-dock .hand-card.is-unavailable { background: #e6edf2; border-color: #a6b8c5; }
body .compact-card-dock .hand-card:hover:not(:disabled) { background: #d5ecfa; }
body .compact-card-dock .empty-hand { color: #52708c; font-size: 13px; }
body .compact-card-dock .guest-status { color: #286548; background: #e3f2dd; border: 1px solid #9bb898; border-radius: 0; padding: 3px 5px; }
@media(min-width: 701px) and (max-width: 1100px) {
  body #players { top: 75px; gap: 10px; width: calc(100vw - 36px); }
  body #players .player { grid-template-columns: 37px minmax(0,1fr); gap: 3px 7px; padding: 8px; min-height: 70px; }
  body #players .avatar.character-avatar { width: 37px; height: 46px; }
  body #players .player-name { font-size: 12px; }
  body #players .player-cash { font-size: 18px; }
  body #hud { right: 16px; bottom: 16px; width: 352px; grid-template-columns: 110px minmax(0,1fr); padding: 11px 12px 8px; gap: 7px 10px; }
  body #hud .neon-dice-die { --neon-die-size: 48px; }
  body #hud #turn-actions > .gold-btn:only-child { font-size: 19px; }
  body #view-tools { left: 17px; bottom: 17px; }
}
@media(max-width: 700px) {
  body #players { top: 62px; width: calc(100vw - 24px); gap: 7px 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #players .player { grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 7px; min-height: 55px; padding: 5px 7px; border-top-width: 3px; }
  body #players .avatar.character-avatar { width: 32px; height: 40px; }
  body #players .player-name { font-size: 11px; line-height: 1.25; }
  body #players .player-cash { font-size: 16px; line-height: 1.1; }
  body #players .player.active { box-shadow: 0 0 0 1px #fff7ae, 0 0 0 2px var(--player), 3px 3px var(--v31-deep); }
  body #players .player.active::after { width: 6px; height: 6px; top: -7px; left: 12px; }
  body #players .v24-player-stay { font-size: 9px; }
  body #players .v26-player-row.has-spirit > .player { padding-bottom: 25px; }
  body #players .v26-player-spirit { left: 6px; right: 4px; bottom: 2px; min-height: 21px; gap: 3px; font-size: 9px; }
  body #players .v26-player-spirit .v26-spirit-art { width: 18px; height: 20px; }
  body #players .v26-player-spirit > b { font-size: 8px; }
  body #hud { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 227px); padding: 9px 10px 6px; grid-template-columns: 105px minmax(0,1fr); gap: 5px 9px; }
  body #hud .hud-head { padding-bottom: 5px; margin: 0; gap: 5px; }
  body #hud .hud-head h2 { font-size: 11px; }
  body #hud .v26-round-status { font-size: 12px; gap: 4px; max-width: 82%; }
  body #hud .turn-row { font-size: 12px; gap: 5px; }
  body #hud #turn-timer { font-size: 16px; padding: 1px 6px; min-width: 42px; }
  body #hud #dice-display { height: 60px; }
  body #hud .neon-dice-die { --neon-die-size: 45px; }
  body #hud .neon-dice-view { gap: 5px; }
  body #hud #turn-actions { gap: 5px; }
  body #hud #turn-actions > .gold-btn, body #hud #turn-actions > .quiet-btn { font-size: 14px; padding: 8px 5px; min-height: 43px; }
  body #hud #turn-actions > .gold-btn:only-child { font-size: 19px; min-height: 57px; }
  body #hud .estate-tools { gap: 6px; margin-top: 1px; grid-template-columns: 1fr 1fr 1.2fr; }
  body #hud .estate-tools > button { font-size: 11px; min-height: 37px; padding: 6px 3px; }
  body #hud #cards-toggle { gap: 4px; }
  body .compact-cards-count { min-width: 20px; height: 21px; font-size: 12px; padding: 0 3px; }
  body #hud #fair-btn { font-size: 9px; min-height: 14px; padding: 1px 0 0; }
  body #hud .v24-action-panel { padding: 7px; gap: 5px; }
  body #hud .v24-action-panel h3 { font-size: 14px; }
  body #hud .v24-caption { font-size: 10px; }
  body #hud .v24-state-icon { width: 29px; height: 30px; font-size: 21px; }
  body #hud #turn-actions .v24-action-panel .gold-btn, body #hud #turn-actions .v24-action-panel .quiet-btn { min-height: 37px; font-size: 12px; padding: 6px; }
  body #view-tools { left: 12px; bottom: 230px; max-width: calc(100vw - 24px); }
  body #view-tools .locate-me { min-height: 37px; font-size: 11px; padding: 6px 10px; }
  body #view-tools .locate-me:not(:has(svg, img, .v31-pixel-icon))::before { font-size: 19px; margin-right: 5px; }
  body:has(#hud .v24-action-panel) #view-tools { bottom: 320px; }
  body .compact-view-toggle { min-height: 38px; height: 38px; max-width: 74px; gap: 4px; padding: 0 6px; font-size: 11px; }
  body .compact-view-toggle span { max-width: 52px; overflow: hidden; text-overflow: ellipsis; }
  body .compact-view-menu { min-width: 140px; }
  body #card-dock.compact-card-dock { max-height: min(440px, 50dvh); padding: 10px; }
}
@media(max-width: 420px) {
  body .compact-view-toggle { width: 45px; padding: 0 4px; gap: 2px; }
  body .compact-view-toggle span { max-width: 27px; font-size: 10px; }
  body #players { top: 60px; width: calc(100vw - 22px); gap: 7px 8px; }
  body #players .player { grid-template-columns: 28px minmax(0,1fr); gap: 1px 5px; padding: 5px; }
  body #players .avatar.character-avatar { width: 28px; height: 38px; }
  body #players .player-name { font-size: 10px; }
  body #players .player-cash { font-size: 14px; }
  body #hud { left: 10px; right: 10px; grid-template-columns: 94px minmax(0,1fr); gap: 5px 7px; padding: 8px 8px 5px; }
  body #hud .neon-dice-die { --neon-die-size: 40px; }
  body #hud #turn-actions > .gold-btn:only-child { font-size: 17px; }
}
@media(min-width: 701px) and (max-height: 680px) {
  body #players { top: 70px; }
  body #players .player { min-height: 62px; padding-top: 5px; padding-bottom: 5px; }
  body #players .avatar.character-avatar { width: 36px; height: 42px; }
  body #players .player-cash { font-size: 18px; }
  body #hud { bottom: 12px; max-height: calc(100dvh - 170px); padding: 8px 10px 6px; gap: 5px 10px; }
  body #hud .hud-head { padding-bottom: 4px; }
  body #hud #dice-display { height: 63px; }
  body #hud #turn-actions > .gold-btn:only-child { min-height: 58px; }
  body #hud #turn-timer { font-size: 17px; }
  body #hud #fair-btn { padding-top: 0; }
  body #hud .v24-action-panel { gap: 5px; padding: 7px; }
}
@media(max-height: 520px) and (min-width: 701px) {
  body header { padding-top: 8px; }
  body #players { top: 61px; width: calc(100vw - 30px); gap: 9px; }
  body #players .player { min-height: 50px; grid-template-columns: 27px minmax(0,1fr); padding: 4px 6px; gap: 1px 6px; }
  body #players .avatar.character-avatar { width: 27px; height: 34px; }
  body #players .player-name { font-size: 11px; }
  body #players .player-cash { font-size: 15px; }
  body #hud { width: 350px; grid-template-columns: 100px minmax(0,1fr); gap: 4px 8px; }
  body #hud .hud-head h2 { display: none; }
  body #hud .hud-head { justify-content: flex-end; }
  body #hud .v26-round-status { font-size: 12px; }
  body #hud .v24-caption { display: none; }
  body #hud #dice-display { height: 48px; }
  body #hud .neon-dice-die { --neon-die-size: 43px; }
  body #hud #turn-actions > .gold-btn:only-child { min-height: 46px; font-size: 18px; }
  body #hud .estate-tools > button { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
  body #view-tools { bottom: 12px; }
}

body #view-tools .locate-me:has(svg, img, .v31-pixel-icon)::before { content: none; display: none; }

/* Phones in landscape use the desktop arrangement, scaled to the shorter height. */
@media(max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  body #players {
    top: 58px; width: calc(100vw - 24px); gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body #players .player {
    grid-template-columns: 24px minmax(0, 1fr); gap: 1px 5px;
    min-height: 47px; padding: 4px 5px; border-top-width: 3px;
  }
  body #players .avatar.character-avatar { width: 24px; height: 33px; }
  body #players .player-name { font-size: 9px; line-height: 1.25; }
  body #players .player-cash { font-size: clamp(11px, 2.15vw, 14px); line-height: 1.1; letter-spacing: -.04em; }
  body #players .v24-player-stay { font-size: 8px; }
  body #players .v26-player-row.has-spirit > .player { padding-bottom: 22px; }
  body #players .v26-player-spirit { bottom: 2px; left: 5px; right: 3px; gap: 2px; font-size: 8px; min-height: 18px; }
  body #players .v26-player-spirit .v26-spirit-art { width: 16px; height: 18px; }
  body #players .v26-player-spirit > b { font-size: 8px; }
  body #hud {
    left: auto; right: 11px; bottom: max(9px, env(safe-area-inset-bottom));
    width: min(310px, calc(100vw - 240px)); max-height: calc(100dvh - 121px);
    grid-template-columns: 91px minmax(0, 1fr); gap: 5px 8px; padding: 8px 9px 5px;
  }
  body #hud .hud-head { grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0; justify-content: flex-start; }
  body #hud .hud-head h2 { display: none; }
  body #hud .v26-round-status { max-width: none; font-size: 10px; justify-content: flex-start; gap: 2px; }
  body #hud #fee-multiplier { padding: 1px 3px; font-size: 8px; }
  body #hud .turn-row { grid-column: 2; grid-row: 1; gap: 4px; font-size: 10px; }
  body #hud #turn-timer { min-width: 38px; padding: 1px 4px; font-size: 14px; }
  body #hud #dice-display { grid-column: 1; grid-row: 2; height: 52px; }
  body #hud .neon-dice-die { --neon-die-size: 39px; }
  body #hud .neon-dice-view { gap: 5px; }
  body #hud #turn-actions { grid-column: 2; grid-row: 2; gap: 5px; max-height: calc(100dvh - 215px); overflow: auto; padding: 1px 3px 3px 1px; }
  body #hud:has(#dice-display.v24-dice-quiet) #turn-actions { grid-column: 1 / -1; }
  body #hud #turn-actions > .gold-btn, body #hud #turn-actions > .quiet-btn { min-height: 37px; font-size: 12px; padding: 7px 5px; }
  body #hud #turn-actions > .gold-btn:only-child { min-height: 49px; font-size: 17px; }
  body #hud .estate-tools { grid-column: 1 / -1; gap: 5px; margin: 0; }
  body #hud .estate-tools > button { min-height: 36px; padding: 5px 3px; font-size: 10px; }
  body #hud #cards-toggle { gap: 3px; }
  body #hud .compact-cards-count { min-width: 17px; height: 20px; padding: 0 2px; font-size: 11px; }
  body #hud #fair-btn { min-height: 12px; font-size: 8px; padding: 0; }
  body #hud .v24-action-panel { padding: 6px; gap: 5px; }
  body #hud .v24-action-panel h3 { font-size: 12px; }
  body #hud .v24-caption { display: none; }
  body #hud .v24-kicker, body #hud .v24-gap { font-size: 10px; }
  body #hud .v24-state-icon { width: 25px; height: 27px; font-size: 19px; }
  body #hud .v24-debt-heading strong { font-size: 20px; }
  body #hud #turn-actions .v24-action-panel .gold-btn, body #hud #turn-actions .v24-action-panel .quiet-btn { min-height: 36px; font-size: 11px; padding: 6px; }
  body #view-tools, body:has(#hud .v24-action-panel) #view-tools { left: 12px; bottom: max(10px, env(safe-area-inset-bottom)); max-width: calc(100vw - 350px); }
  body #view-tools .locate-me { min-height: 36px; font-size: 10px; padding: 6px 8px; }
  body .compact-view-toggle { height: 38px; min-height: 38px; }
}