/* C: compact miniature-city controls, with jade enamel and fine brass bevels. */
body #hud,
body #hud #cards-toggle,
body #hud .estate-tools > button,
body #view-tools .locate-me {
  color: var(--v35-ink, #153e46);
  border: 3px solid #205e62;
  border-radius: 3px;
  border-image: none;
  background-clip: padding-box;
  clip-path: none;
  box-shadow: inset 1px 1px #fffff3, inset -1px -2px #95aaa1, 0 2px 0 #164448, 0 4px 8px #133e4638;
}
body #hud {
  left: auto; right: 22px; bottom: max(22px, env(safe-area-inset-bottom));
  width: 340px; max-height: calc(100dvh - 190px);
  grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: 30px auto;
  gap: 6px 8px; padding: 8px 9px 10px;
  background: linear-gradient(135deg, #3e8b87, #1c6368 66%, #174c56);
  border-color: #15494e;
  box-shadow: inset 1px 1px #add0b8, inset -1px -2px #16474c, 0 2px 0 #173e43, 0 4px 10px #153e464d;
}
body #hud::before {
  content: ''; display: block; position: absolute; inset: -2px;
  width: auto; height: auto; border: 0; box-shadow: none;
  background: linear-gradient(135deg, #ead18b 0 7px, #936c38 7px 8px, transparent 8px) left top / 15px 15px no-repeat,
    linear-gradient(315deg, #ead18b 0 7px, #936c38 7px 8px, transparent 8px) right bottom / 15px 15px no-repeat;
  pointer-events: none;
}
body #hud::after {
  content: ''; left: 7px; right: 7px; top: 44px; bottom: 7px;
  background: linear-gradient(135deg, #fffdf0, #e7e8d9);
  border: 1px solid #aac3b2; border-radius: 2px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #c2c9b9;
}
body #hud .hud-head {
  margin: 0; padding: 2px 75px 2px 7px; min-height: 0;
  border: 1px solid #b7c3ae; border-radius: 2px;
  background: linear-gradient(#fffdf1, #e7e8d9); box-shadow: inset 0 1px #fff;
}
body #hud .v26-round-status {
  max-width: 100%; font-size: 15px; font-weight: 750; line-height: 1.2; gap: 1px 5px;
  color: #173f48;
}
body #hud #round-label { line-height: 1.2; }
body #hud #fee-multiplier { font-size: 9px; padding: 0 3px; border-radius: 2px; }
body #hud .turn-row { top: 8px; right: 9px; width: 74px; height: 30px; }
body #hud #turn-timer {
  padding: 0 4px; min-width: 0; gap: 4px;
  background: linear-gradient(#fffdf1, #e7e8d9); border: 1px solid #b7c3ae; border-radius: 0 2px 2px 0;
  box-shadow: inset 0 1px #fff; color: #173f48; font-size: 16px; font-weight: 750;
}
body #hud #turn-timer::before { width: 12px; height: 19px; }
body #hud #turn-timer.urgent { background: #fce8bc; border-color: #c7a165; color: #ac3a36; }
body #hud #dice-display { grid-row: 2; height: 81px; }
body #hud .neon-dice-view { gap: 1px; }
body #hud .neon-dice-die { --neon-die-size: 57px; }
body #hud .neon-dice-die::before { background: #294b45; opacity: .24; filter: blur(2px); border-radius: 50%; }
body #hud .neon-dice-face {
  border: 1px solid #819284; border-radius: 3px; background: #f6f4e6;
  box-shadow: inset 1px 1px #fffef5, inset -1px -1px #bec6b6;
}
body #hud .neon-dice-face::before { inset: 1px; border-radius: 2px; clip-path: none; background: linear-gradient(135deg, #fffef4, #f2f0e2); }
body #hud .neon-dice-right, body #hud .neon-dice-right::before { background: linear-gradient(135deg, #d9dfd1, #b9c5b7); }
body #hud .neon-dice-top, body #hud .neon-dice-top::before { background: #fffdf2; }
body #hud .neon-dice-pip,
body #hud .neon-dice-right .neon-dice-pip,
body #hud .neon-dice-top .neon-dice-pip { width: 62%; height: 62%; border-radius: 50%; background: #234953; box-shadow: inset 0 1px 1px #0b2c33, 0 1px #ffffff8c; }
body #hud #turn-actions {
  grid-row: 2; padding: 7px 2px 5px 0; gap: 5px;
  max-height: none; overflow: visible;
}
body #hud #turn-actions > .gold-btn,
body #hud #turn-actions > .quiet-btn {
  min-height: 36px; padding: 6px; border: 2px solid #967d40; border-radius: 3px;
  color: #173f48; font-size: 14px; font-weight: 750; line-height: 1.25;
  box-shadow: inset 1px 1px #fff6bd, inset -1px -2px #e2af35, 0 2px #81672e;
  clip-path: none;
}
body #hud #turn-actions > .gold-btn { background: linear-gradient(135deg, #ffdf67, #f2c444); }
body #hud #turn-actions > .quiet-btn { background: linear-gradient(#fffdf1, #e5e6d7); border-color: #70908b; box-shadow: inset 1px 1px #fff, inset -1px -2px #bcc7b6, 0 2px #496b67; }
body #hud #turn-actions > .gold-btn:only-child { min-height: 64px; font-size: 24px; }
body #hud #turn-actions > button:hover:not(:disabled) { filter: brightness(1.055); background-color: #f9d659; }
body #hud #turn-actions > button:disabled { opacity: .77; }
body #hud #cards-toggle {
  top: -44px; right: -3px; width: 174px; height: 44px;
  padding: 5px 9px; gap: 7px; background: linear-gradient(#fffef3, #e7e9da);
  border-width: 3px; border-bottom: 3px solid #347c79;
  color: #173f48; font-size: 16px; font-weight: 750;
}
body #hud #cards-toggle::before {
  content: ''; position: absolute; left: auto; right: -1px; top: -1px; width: 13px; height: 13px;
  border: 0; background: linear-gradient(225deg, #e8ca7c 0 7px, #9b824b 7px 8px, transparent 8px);
}
body #hud #cards-toggle[aria-expanded=true] { background: #d5e6d8; border-color: #205e62; border-bottom-color: #347c79; }
body #hud #cards-toggle .v33-cards-art { width: 25px; height: 28px; }
body #hud .compact-cards-count { min-width: 25px; height: 27px; padding: 0 4px; border: 1px solid #c74952; border-radius: 2px; background: linear-gradient(#f87873, #d74652); box-shadow: inset 0 1px #ffb6a0; font-size: 19px; }
body #hud .estate-tools { left: 22px; top: auto; bottom: max(22px, env(safe-area-inset-bottom)); gap: 12px; margin: 0; padding: 0; }
body #hud .estate-tools > button {
  width: 60px; min-height: 65px; padding: 5px 4px 6px; gap: 4px;
  background: linear-gradient(#fffef4, #e5e7d8); font-size: 12px; font-weight: 750; line-height: 1.1;
}
body #hud .estate-tools .v31-pixel-icon { width: 28px; height: 29px; }
body #hud .estate-tools > button > span { font-size: 11px; letter-spacing: -.035em; line-height: 1.1; }
body #hud .estate-tools > button:hover:not(:disabled) { background: #e4ecdb; }
body #view-tools, body:has(#hud .v24-action-panel) #view-tools {
  left: auto; right: 22px; bottom: calc(var(--v33-console-height, 142px) + 150px); max-width: none;
}
body #view-tools .locate-me {
  width: 54px; min-height: 61px; padding: 5px 3px; gap: 3px;
  background: linear-gradient(#fffef4, #e5e7d8); font-size: 11px; font-weight: 750; line-height: 1.1;
}
body #view-tools .locate-me .v31-pixel-icon { width: 28px; height: 29px; }
body #view-preset-menu #fair-btn { border-top: 1px solid #bccabb; color: #315a5c; font-size: 12px; padding: 8px; }
body #players {
  top: 82px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(880px, calc(100vw - 380px)); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
body #players .player {
  grid-template-columns: 43px minmax(0, 1fr); grid-template-rows: auto auto;
  min-height: 66px; gap: 1px 7px; padding: 5px 7px 5px 6px;
  border: 2px solid #245e62; border-top: 3px solid var(--player); border-radius: 3px;
  color: #153e46;
  background: linear-gradient(90deg, color-mix(in srgb, var(--player) 12%, #e6ece0) 0 54px, #f5f3e5 54px);
  box-shadow: inset 1px 1px #fffdf0, inset -1px -1px #b7c6b6, 0 2px 0 #224c4f, 0 3px 6px #163a4333;
}
body #players .player.active {
  border-color: #245e62; border-top-color: var(--player);
  background: linear-gradient(90deg, color-mix(in srgb, var(--player) 18%, #e6ece0) 0 54px, #fff9db 54px);
  box-shadow: inset 1px 1px #fffdf0, inset -1px -1px #b7c6b6, 0 0 0 1px #f4d977, 0 2px 0 #224c4f, 0 3px 6px #163a4333;
}
body #players .player:hover:not(:disabled) { background-color: #f8f7df; }
body #players .player::before {
  left: -5px; top: -6px; width: 9px; height: 15px; border: 1px solid #347b76;
  border-radius: 2px; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  background: var(--player); box-shadow: inset 1px 1px #ffffff99, 1px 1px #274f51;
}
body #players .avatar.character-avatar { width: 43px; height: 49px; border-radius: 1px; align-self: end; }
body #players .character-avatar img { image-rendering: auto; }
body #players .player-name { font-size: 16px; font-weight: 750; line-height: 1.2; color: #153e46; }
body #players .player-cash { --v33-cash-size: 18px; gap: 4px; font-size: var(--v33-cash-size); font-weight: 750; line-height: 1.3; letter-spacing: -.025em; color: #153e46; }
body #players .v33-cash-art { width: 20px; height: 21px; }
body #players .v24-player-stay { font-size: 9px; line-height: 1.15; }
body #players .v26-player-row.has-spirit > .player { padding-bottom: 24px; }
body #players .v26-player-spirit { left: 6px; right: 4px; bottom: 2px; min-height: 20px; padding: 0 2px; gap: 3px; border-top: 1px solid #bfd0b9; color: #3c635f; background: #e0e8d7; font-size: 9px; }
body #players .v26-player-spirit .v26-spirit-art { width: 18px; height: 19px; }
body #hud .v24-action-panel { padding: 9px; gap: 6px; border: 1px solid #a4b9a7; border-radius: 2px; color: #173f48; background: #edf0df; box-shadow: inset 1px 1px #fff; }
body #hud .v24-action-panel h3 { color: #173f48; font-size: 16px; }
body #hud .v24-kicker { color: #386a65; font-size: 10px; }
body #hud .v24-caption { color: #596f65; font-size: 11px; }
body #hud .v24-state-icon { background: #d8e6d6; color: #27635f; border: 1px solid #8da99a; border-radius: 3px; box-shadow: inset 1px 1px #fff; }
body #hud #turn-actions .v24-action-panel .gold-btn,
body #hud #turn-actions .v24-action-panel .quiet-btn { min-height: 36px; font-size: 12px; padding: 6px; }
body #hud .v24-debt-panel { background: #f4e9d7; border-color: #bc9b7b; }
body #hud .v24-debt-heading strong { font-size: 21px; }
body #hud .incoming { background: #f8ecc4; border: 1px solid #c8ab64; color: #725d36; font-size: 11px; }
body #card-dock.compact-card-dock {
  padding: 11px; color: #173f48; background: linear-gradient(135deg, #faf7e8, #e5ebda);
  border: 2px solid #2a6c6a; border-radius: 3px; box-shadow: inset 1px 1px #fff, inset -1px -1px #b4c6b4, 0 3px 0 #214c4d, 0 6px 15px #123b443d;
}
body .compact-card-dock .card-dock-head { border-bottom: 1px solid #bdcdb6; }
body .compact-card-dock .card-dock-head > strong { font-size: 14px; }
body .compact-dock-close { color: #285d60; background: #faf8e8; border: 1px solid #86a597; border-radius: 2px; }
body .compact-card-dock .hand-card { background: #f9f6e7; border: 1px solid #8caa94; border-radius: 3px; box-shadow: inset 1px 1px #fff, 0 2px #c6cfb9; color: #234d50; }
body .compact-card-dock .hand-card:hover:not(:disabled) { background: #e4eddb; }
body .compact-card-dock .hand-card > b { color: #587264; }
body .compact-card-dock .empty-hand { color: #5b7468; }
body .compact-card-dock .hand-card.is-unavailable { background: #e9eadf; border-color: #b0b8a8; }

@media (max-width: 1100px) {
  body #players { width: calc(100vw - 40px); top: 77px; gap: 12px; }
  body #players .player { grid-template-columns: 40px minmax(0, 1fr); min-height: 63px; gap: 1px 6px; padding: 5px; }
  body #players .avatar.character-avatar { width: 40px; height: 47px; }
  body #players .player-name { font-size: 15px; }
  body #players .player-cash { --v33-cash-size: 17px; }
  body #hud { right: 18px; bottom: 18px; }
  body #hud .estate-tools { left: 18px; bottom: 18px; }
  body #view-tools, body:has(#hud .v24-action-panel) #view-tools { right: 18px; bottom: calc(var(--v33-console-height, 142px) + 112px); }
}
@media (max-width: 700px) and (min-height: 501px) {
  body #players { top: 83px; left: 12px; right: 12px; width: auto; transform: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  body #players .player { min-height: 58px; grid-template-columns: 35px minmax(0, 1fr); gap: 1px 5px; padding: 4px; border-width: 2px; border-top-width: 3px; }
  body #players .avatar.character-avatar { width: 35px; height: 44px; }
  body #players .player-name { font-size: 13px; }
  body #players .player-cash { --v33-cash-size: 15px; gap: 3px; }
  body #players .v33-cash-art { width: 16px; height: 18px; }
  body #players .v24-player-stay { font-size: 8px; }
  body #players .v26-player-row.has-spirit > .player { padding-bottom: 22px; }
  body #players .v26-player-spirit { min-height: 18px; font-size: 8px; }
  body #players .v26-player-spirit .v26-spirit-art { width: 16px; height: 17px; }
  body #hud { left: auto; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 275px); grid-template-columns: 42% minmax(0, 1fr); }
  body #hud #turn-actions > .gold-btn:only-child { font-size: 22px; }
  body #hud #cards-toggle { width: 165px; }
  body #hud .estate-tools, body #hud:has(.v24-action-panel) .estate-tools { left: 12px; top: auto; bottom: calc(var(--v33-console-height, 141px) + 61px); gap: 9px; }
  body #hud .estate-tools > button { width: 51px; min-height: 58px; padding: 4px 2px; font-size: 11px; }
  body #hud .estate-tools .v31-pixel-icon { width: 26px; height: 27px; }
  body #hud .estate-tools > button > span { font-size: 10px; }
  body #view-tools, body:has(#hud .v24-action-panel) #view-tools { left: auto; right: 12px; bottom: calc(var(--v33-console-height, 141px) + 108px); }
  body #view-tools .locate-me { width: 50px; min-height: 58px; font-size: 10px; }
  body #hud .v24-action-panel { padding: 8px; }
  body #hud .v24-action-panel h3 { font-size: 15px; }
}
@media (max-width: 360px) and (min-height: 501px) {
  body #players { top: 76px; left: 10px; right: 10px; gap: 8px; }
  body #players .player { grid-template-columns: 29px minmax(0, 1fr); gap: 1px 3px; }
  body #players .avatar.character-avatar { width: 29px; height: 41px; }
  body #players .player-name { font-size: 12px; }
  body #players .player-cash { --v33-cash-size: 14px; gap: 2px; }
  body #players .v33-cash-art { width: 14px; height: 17px; }
  body #hud { left: 10px; right: 10px; width: auto; grid-template-columns: 41% minmax(0, 1fr); padding-left: 7px; padding-right: 7px; }
  body #hud .neon-dice-die { --neon-die-size: 49px; }
  body #hud .v26-round-status { font-size: 13px; }
  body #hud #turn-actions > .gold-btn:only-child { font-size: 20px; }
  body #hud #cards-toggle { width: 156px; font-size: 14px; }
  body #hud .estate-tools { gap: 7px; }
  body #hud .estate-tools > button { width: 46px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body #players { top: 59px; left: 14px; right: 14px; width: auto; transform: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
  body #players .player { grid-template-columns: 30px minmax(0, 1fr); min-height: 48px; gap: 1px 4px; padding: 3px 4px; border-width: 2px; border-top-width: 3px; }
  body #players .avatar.character-avatar { width: 30px; height: 36px; }
  body #players .player-name { font-size: 11px; }
  body #players .player-cash { --v33-cash-size: 13px; gap: 2px; }
  body #players .v33-cash-art { width: 14px; height: 16px; }
  body #players .player::before { width: 7px; height: 12px; left: -4px; top: -5px; }
  body #players .v26-player-row.has-spirit > .player { padding-bottom: 20px; }
  body #players .v26-player-spirit { min-height: 17px; font-size: 8px; bottom: 1px; left: 4px; right: 3px; }
  body #players .v26-player-spirit .v26-spirit-art { width: 15px; height: 16px; }
  body #hud { left: auto; right: 12px; bottom: 11px; width: 287px; max-height: calc(100dvh - 140px); grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 26px auto; padding: 6px 7px 8px; gap: 4px 6px; }
  body #hud::after { top: 36px; left: 5px; right: 5px; bottom: 5px; }
  body #hud .hud-head { padding: 2px 66px 2px 6px; }
  body #hud .v26-round-status { font-size: 12px; }
  body #hud .turn-row { top: 6px; right: 7px; width: 66px; height: 26px; }
  body #hud #turn-timer { font-size: 14px; }
  body #hud #turn-timer::before { width: 11px; height: 17px; }
  body #hud #dice-display { height: 65px; }
  body #hud .neon-dice-die { --neon-die-size: 49px; }
  body #hud #turn-actions { padding: 5px 1px 4px 0; gap: 4px; max-height: calc(100dvh - 189px); overflow-y: auto; }
  body #hud #turn-actions > .gold-btn, body #hud #turn-actions > .quiet-btn { min-height: 33px; font-size: 12px; padding: 5px; }
  body #hud #turn-actions > .gold-btn:only-child { min-height: 53px; font-size: 21px; }
  body #hud #cards-toggle { top: -38px; height: 38px; width: 154px; font-size: 14px; padding: 4px 7px; gap: 6px; }
  body #hud #cards-toggle .v33-cards-art { width: 22px; height: 25px; }
  body #hud .compact-cards-count { min-width: 23px; height: 24px; font-size: 17px; }
  body #hud .estate-tools { left: 14px; bottom: 12px; gap: 10px; }
  body #hud .estate-tools > button { width: 49px; min-height: 55px; padding: 4px 2px; font-size: 10px; }
  body #hud .estate-tools .v31-pixel-icon { width: 25px; height: 26px; }
  body #hud .estate-tools > button > span { font-size: 10px; }
  body #view-tools, body:has(#hud .v24-action-panel) #view-tools { left: auto; right: 12px; bottom: calc(var(--v33-console-height, 115px) + 68px); }
  body #view-tools .locate-me { width: 47px; min-height: 53px; padding: 4px 2px; font-size: 10px; }
  body #view-tools .locate-me .v31-pixel-icon { width: 24px; height: 25px; }
  body #hud .v24-action-panel { padding: 6px; gap: 4px; }
  body #hud .v24-action-panel h3 { font-size: 13px; }
  body #hud .v24-caption { display: none; }
  body #hud #turn-actions .v24-action-panel .gold-btn, body #hud #turn-actions .v24-action-panel .quiet-btn { min-height: 32px; padding: 5px; font-size: 11px; }
}
@media (max-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  body #players { left: 11px; right: 11px; top: 55px; gap: 7px; }
  body #players .player { grid-template-columns: 25px minmax(0, 1fr); gap: 1px 3px; padding: 3px; }
  body #players .avatar.character-avatar { width: 25px; height: 34px; }
  body #players .player-name { font-size: 10px; }
  body #players .player-cash { --v33-cash-size: 12px; }
  body #players .v33-cash-art { width: 12px; height: 15px; }
  body #hud { width: 270px; grid-template-columns: 102px minmax(0, 1fr); }
  body #hud .neon-dice-die { --neon-die-size: 46px; }
  body #view-tools, body:has(#hud .v24-action-panel) #view-tools { right: auto; left: 140px; bottom: 12px; }
}