/* Mobile Forced Landscape & Base Viewport */
#app-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.force-landscape, html.force-landscape body {
  overflow: hidden !important;
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  inset: 0 !important;
  user-select: none;
}

html.force-landscape #app-viewport {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--force-ls-w, 100vh) !important;
  height: var(--force-ls-h, 100vw) !important;
  transform: rotate(90deg) translateY(calc(-1 * var(--force-ls-h, 100vw))) !important;
  transform-origin: 0 0 !important;
  overflow: hidden !important;
}

/* HUD rails reserve space beside the map; UI never inherits camera transforms. */
body.in-match { height:100dvh; overflow:hidden; overscroll-behavior:none; }
body.in-match .app-header { padding-top:env(safe-area-inset-top); height:calc(54px + env(safe-area-inset-top)); }
body.in-match .app-main { min-height:0; height:calc(100dvh - 78px); margin-bottom:0; }
body.in-match #game { height:100%; min-height:0; display:flex; flex-direction:column; position:relative; }
#game .match-toolbar { flex:none; }
#game .boardarea { flex:1; min-height:0; height:auto; --hud-rail:clamp(176px,19vw,240px); }
#game #board { position:absolute; inset:0 var(--hud-rail); width:auto; height:100%; touch-action:none; }
#game #players { inset:10px max(8px,env(safe-area-inset-right)) 36px max(8px,env(safe-area-inset-left)); grid-template-columns:repeat(2,calc(var(--hud-rail) - 16px)); grid-auto-rows:max-content; align-content:space-between; }
#players .player-hud-card { min-width:0; max-width:none; width:100%; min-height:84px; padding:8px; pointer-events:auto; }
#players .player-hud-topline { flex-wrap:wrap; gap:3px 6px; }
#players .player-hud-name { flex:1 1 100%; white-space:normal; overflow-wrap:anywhere; line-height:1.15; }
#players .player-hud-cash { flex-wrap:wrap; }
#players .player-hud-card:focus-visible { outline:3px solid #fff0bd; outline-offset:2px; }
#players .is-active-turn { border-color:#ffe3a1; box-shadow:0 0 0 1px #f7d28688,0 0 18px #f7d28666; }
#rotate-guide { display:none; }
.center-hud-fixed { top:10%; }
#board-ui-overlay>.roll { top:auto; bottom:54px; }
#board-ui-overlay>#hint { top:auto; bottom:104px; }
.portfolio-person { display:flex; align-items:center; gap:16px; }
.portfolio-person img { width:65px; height:82px; object-fit:contain; image-rendering:pixelated; }
.portfolio-person h3 { margin:0; font-size:25px; }
.portfolio-person p { margin:5px 0; }
.portfolio-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.portfolio-summary>div { background:#122339; border:1px solid #e7c77633; padding:10px; border-radius:6px; }
.portfolio-summary dt { color:#bfccdc; font-size:15px; }
.portfolio-summary dd { margin:4px 0 0; color:#ffe3a1; font-size:21px; }
.portfolio-list { display:grid; gap:10px; }
.portfolio-item { border:1px solid #e7c77644; background:#15273a; padding:10px; border-radius:7px; }
.portfolio-open { display:flex; flex-direction:column; width:100%; text-align:left; padding:4px; gap:5px; border:0; background:none; color:#f3ead7; font-size:17px; }
.portfolio-open strong { color:#ffe3a1; font-size:20px; }
.portfolio-open:hover { background:#e7c7760c; }
.portfolio-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.portfolio-actions button { min-height:40px; }
.mortgage-label { color:#ffb089; }
.portfolio-empty { padding:20px; text-align:center; }
#modalbg .modal,.rent-popup-panel,.event-popup-panel { max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow:visible; }
#modalbg { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
@media(min-width:1200px) and (min-height:620px) {
  #game .boardarea { --hud-rail:clamp(278px,21vw,330px); }
  #players .player-hud-card { min-height:118px; padding:11px 12px; gap:13px; }
  #players .player-hud-portrait { width:59px; height:75px; }
  #players .player-hud-portrait .avatar { width:56px; height:70px; }
  #players .player-hud-name { font-size:18px; }
  #players .player-hud-cash .cash-amount { font-size:19px; }
  #players .net-worth-badge,#players .asset-count-pill { font-size:14px; }
  #players .player-hud-tag,#players .player-hud-team,#players .status-chip { font-size:11px; }
  #players .hud-turn-badge { font-size:10px; }
}
@media(max-width:900px) {
  body.in-match .app-main { height:calc(100dvh - 64px); }
  .portfolio-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* In mobile portrait without forced-ls, keep layout ready */
@media(max-width:600px) and (orientation:portrait) {
  body.in-match .app-header { height:calc(43px + env(safe-area-inset-top)); }
  body.in-match .app-main { height:calc(100dvh - 43px); }
  #rotate-guide { display:none !important; }
}
@media(max-height:600px) {
  body.in-match .app-header { height:calc(36px + env(safe-area-inset-top)); min-height:36px; padding-block:env(safe-area-inset-top) 0; padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)); }
  body.in-match .app-header .brand { font-size:14px; }
  body.in-match .app-header .brand-mark { font-size:26px; }
  body.in-match .app-header .brand small,body.in-match .app-header .profile-button { display:none; }
  body.in-match .app-main { height:calc(100dvh - 36px); }
  #game .match-toolbar { height:40px; min-height:40px; padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)); flex-wrap:nowrap; gap:6px; }
  .match-toolbar .match-meta { font-size:12px; gap:5px; }
  .match-toolbar #match-room,.match-toolbar #match-round { display:none; }
  .match-toolbar .match-tools button { min-height:32px; font-size:12px; padding:4px 7px; }
  #game .boardarea { --hud-rail:clamp(130px,18vw,170px); }
  #game #board { inset:0 calc(var(--hud-rail) + max(env(safe-area-inset-right),env(safe-area-inset-left))); }
  #game #players { inset:4px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left)); grid-template-columns:repeat(2,calc(var(--hud-rail) - 12px)); gap:4px; }
  #players .player-hud-card { padding:4px; gap:4px; min-height:48px; }
  #players .player-hud-portrait { width:28px; height:37px; }
  #players .player-hud-portrait .avatar { width:27px; height:36px; }
  #players .player-hud-name { font-size:13px; line-height:1.05; }
  #players .player-hud-cash .cash-amount { font-size:16px; }
  #game #transaction-rail { height:0; }
  #dice-box-3d-wrap { width:200px; height:110px; }
  .center-hud-fixed { top:5%; }
  .center-hud-fixed .hud-eyebrow,#board-ui-overlay>#hint { display:none; }
  #board-ui-overlay>.roll { top:auto; bottom:max(4px,env(safe-area-inset-bottom)); min-height:44px; padding:8px 20px; font-size:17px; }
  .physics-dice-arena-fixed { top:46%; }
  .dice-banner { font-size:14px; padding:2px 5px; }
  #tile-caption { display:none; }
  .camera-controls { bottom:5px; right:5px; }
  .camera-controls button { min-width:40px; min-height:40px; }
  .event-illustration { float:left; width:90px; height:75px; margin-right:12px; }
  .event-popup-body,.rent-popup-body { padding:10px 14px; }
  .event-popup-header,.rent-popup-header { padding:10px 14px; }
  .event-popup-header h3,.rent-popup-header h3 { font-size:23px; margin:3px; }
  .event-popup-footer,.rent-popup-footer { padding:8px 14px; }
  .event-confirm-btn,.rent-confirm-btn,#modalActions button { min-height:44px; }
}

/* Forced Landscape Layout Override (matches phone landscape specs) */
html.force-landscape body.in-match .app-header { height:calc(36px + env(safe-area-inset-top)); min-height:36px; padding-block:env(safe-area-inset-top) 0; padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)); }
html.force-landscape body.in-match .app-header .brand { font-size:14px; }
html.force-landscape body.in-match .app-header .brand-mark { font-size:26px; }
html.force-landscape body.in-match .app-header .brand small, html.force-landscape body.in-match .app-header .profile-button { display:none; }
html.force-landscape body.in-match .app-main { height:calc(100% - 36px); }
html.force-landscape #game .match-toolbar { height:40px; min-height:40px; padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)); flex-wrap:nowrap; gap:6px; }
html.force-landscape .match-toolbar .match-meta { font-size:12px; gap:5px; }
html.force-landscape .match-toolbar #match-room, html.force-landscape .match-toolbar #match-round { display:none; }
html.force-landscape .match-toolbar .match-tools button { min-height:34px; font-size:12px; padding:4px 8px; }
html.force-landscape #game .boardarea { --hud-rail:clamp(120px,16vw,155px); }
html.force-landscape #game #board { inset:0 calc(var(--hud-rail) + max(env(safe-area-inset-right),env(safe-area-inset-left))); }
html.force-landscape #game #players { inset:4px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left)); grid-template-columns:repeat(2,calc(var(--hud-rail) - 10px)); gap:4px; }
html.force-landscape #players .player-hud-card { padding:4px; gap:4px; min-height:48px; }
html.force-landscape #players .player-hud-portrait { width:28px; height:37px; }
html.force-landscape #players .player-hud-portrait .avatar { width:27px; height:36px; }
html.force-landscape #players .player-hud-name { font-size:13px; line-height:1.05; }
html.force-landscape #players .player-hud-cash .cash-amount { font-size:16px; }
html.force-landscape #game #transaction-rail { height:0; }
html.force-landscape #dice-box-3d-wrap { width:200px; height:110px; }
html.force-landscape .center-hud-fixed { top:5%; }
html.force-landscape .center-hud-fixed .hud-eyebrow, html.force-landscape #board-ui-overlay>#hint { display:none; }
html.force-landscape #board-ui-overlay>.roll { top:auto; bottom:max(4px,env(safe-area-inset-bottom)); min-height:44px; padding:8px 20px; font-size:17px; }
html.force-landscape .physics-dice-arena-fixed { top:46%; }
html.force-landscape .dice-banner { font-size:14px; padding:2px 5px; }
html.force-landscape #tile-caption { display:none; }
html.force-landscape .camera-controls { bottom:5px; right:5px; }
html.force-landscape .camera-controls button { min-width:40px; min-height:40px; }
html.force-landscape .event-illustration { float:left; width:90px; height:75px; margin-right:12px; }
html.force-landscape .event-popup-body, html.force-landscape .rent-popup-body { padding:10px 14px; }
html.force-landscape .event-popup-header, html.force-landscape .rent-popup-header { padding:10px 14px; }
html.force-landscape .event-popup-header h3, html.force-landscape .rent-popup-header h3 { font-size:23px; margin:3px; }
html.force-landscape .event-popup-footer, html.force-landscape .rent-popup-footer { padding:8px 14px; }
html.force-landscape .event-confirm-btn, html.force-landscape .rent-confirm-btn, html.force-landscape #modalActions button { min-height:44px; }

/* Lobby & Popups on Forced Landscape */
html.force-landscape .fighting-stage { flex-direction: row !important; height: auto !important; }
html.force-landscape .team-bracket { width: auto !important; flex: 1 !important; }
html.force-landscape .fighting-vs-center { padding: 0 8px !important; }
html.force-landscape .standing-hero-card { width: clamp(75px, 12vw, 110px) !important; height: clamp(140px, 40vh, 185px) !important; }
html.force-landscape .horizontal-cards-row { gap: 6px !important; justify-content: center !important; }
html.force-landscape .lobby-start-btn { white-space: nowrap !important; min-height: 40px !important; height: 40px !important; padding: 0 16px !important; font-size: 13px !important; }
html.force-landscape .fighting-lobby-header { padding: 4px 14px !important; min-height: 38px !important; }
html.force-landscape .fighting-lobby-footer { padding: 4px 14px !important; min-height: 44px !important; }
html.force-landscape .mode-popup-panel { max-height: calc(100% - 16px) !important; overflow: hidden !important; padding: 10px 16px !important; }
html.force-landscape .mode-cards-dual { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html.force-landscape .mode-dual-card { padding: 6px 10px !important; }
html.force-landscape #modalbg .modal { max-height: calc(100% - 16px) !important; max-width: min(840px, calc(100% - 20px)) !important; overflow: hidden !important; }
html.force-landscape .rent-popup-panel,
html.force-landscape .event-popup-panel,
html.force-landscape .trade-standalone-panel,
html.force-landscape .rcode-panel,
html.force-landscape .friends-panel {
  max-height: calc(100% - 16px) !important;
  max-width: min(860px, calc(100% - 20px)) !important;
  overflow: hidden !important;
}
html.force-landscape .event-popup-panel h3,
html.force-landscape .rent-popup-panel h3 {
  font-size: 16px !important;
  margin: 2px 0 !important;
}
html.force-landscape .event-illustration {
  width: 55px !important;
  height: 45px !important;
  margin-right: 8px !important;
}
html.force-landscape .event-popup-body,
html.force-landscape .rent-popup-body {
  padding: 6px 10px !important;
}
html.force-landscape .event-popup-header,
html.force-landscape .rent-popup-header {
  padding: 6px 10px !important;
}
html.force-landscape .event-popup-footer,
html.force-landscape .rent-popup-footer {
  padding: 4px 10px !important;
}
html.force-landscape .event-popup-footer button,
html.force-landscape .rent-popup-footer button {
  min-height: 32px !important;
  padding: 3px 12px !important;
  font-size: 11px !important;
}
html.force-landscape .fantasy-home-stage { min-height: 0 !important; height: 100% !important; padding: 4px 14px 2px !important; justify-content: space-evenly !important; }
html.force-landscape .home-title-area { margin: 0 !important; }
html.force-landscape .game-main-title { font-size: 24px !important; }
html.force-landscape .home-lead-desc { display: none !important; }
html.force-landscape .rpg-menu-container { width: min(580px, 96%) !important; margin: 2px auto !important; padding: 6px 12px !important; }
html.force-landscape .rpg-menu-list { display: grid !important; grid-template-columns: 1fr 1.35fr !important; gap: 8px !important; align-items: center !important; }
html.force-landscape .btn-play-primary { height: 42px !important; font-size: 13px !important; }
html.force-landscape .btn-secondary { height: 32px !important; font-size: 11px !important; margin-top: 2px !important; }
html.force-landscape .rpg-menu-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
html.force-landscape .btn-compact { height: 34px !important; font-size: 9px !important; padding: 2px 4px !important; }
html.force-landscape .footer-pills { display: none !important; }

/* Lay out the match and waiting rooms in the viewport's logical orientation. */
body.in-match .app-header { display:none; }
body.in-match .app-main { flex:1 1 auto; height:100% !important; padding:0; }
#game .match-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:38px; height:auto; padding:4px 8px; }
#game .match-meta { min-width:0; }
#game .match-tools { display:flex; flex-wrap:wrap; gap:4px; margin-inline-start:auto; }
#game .match-tools button { min-height:30px; padding:3px 7px; white-space:nowrap; }
#match-ai-toggle[aria-pressed=true] { color:#b9ffd6; border-color:#69bd90; background:#163b2c; }
#turn-order { display:flex; align-items:center; gap:3px; margin:0; padding:0; list-style:none; }
#turn-order li { display:grid; place-items:center; width:24px; height:28px; border:1px solid #7d735b; border-radius:4px; }
#turn-order .current { border-color:#ffe9a7; box-shadow:0 0 6px #e7ba5b; }
#turn-order img { width:100%; height:100%; min-height:0; object-fit:contain; image-rendering:pixelated; }
#game .boardarea { --hud-rail:clamp(140px,16vw,212px); }
#game #board { inset:0 var(--hud-rail); }
#game #players { inset:7px 5px 10px; grid-template-columns:repeat(2,calc(var(--hud-rail) - 10px)); }
#players .player-hud-card { position:relative; padding:6px; min-height:68px; gap:5px; overflow:visible; }
#players .player-hud-topline { flex-direction:column; align-items:flex-start; }
#players .player-hud-name { font-size:clamp(12px,1.3vw,17px); word-break:normal; overflow-wrap:anywhere; white-space:normal; }
#players .player-hud-cash { display:flex; gap:2px 5px; }
#players .player-hud-cash .cash-amount { display:inline-flex; align-items:center; font-size:16px; white-space:nowrap; }
#players .net-worth-badge { display:inline-block; white-space:nowrap; font-size:11px; padding:1px 3px; }
#players .hud-turn-badge { display:block; white-space:nowrap; font-size:8px; }
#players .is-ai-controlled .player-hud-tag { display:block; font-size:9px; white-space:normal; }
#players .wealth-crown { position:absolute; inset:-8px auto auto -3px; z-index:1; width:28px; height:21px; transform:rotate(-19deg);
 filter:drop-shadow(0 0 4px #f7bd58); pointer-events:none; }
.wealth-crown::before,.wealth-crown::after { content:""; position:absolute; inset:0; }
.wealth-crown::before { background:#553317; clip-path:polygon(0 14%,18% 14%,18% 33%,32% 33%,32% 22%,42% 22%,42% 0,58% 0,58% 22%,68% 22%,68% 33%,82% 33%,82% 14%,100% 14%,100% 42%,89% 42%,89% 87%,82% 87%,82% 100%,18% 100%,18% 87%,11% 87%,11% 42%,0 42%); }
.wealth-crown::after { inset:2px 3px 3px; background:linear-gradient(#ffeaa2,#f4b340 55%,#9a5b16 55%,#e09c27 72%,#ffd35f 72%); clip-path:polygon(0 16%,16% 16%,16% 39%,38% 39%,38% 25%,44% 25%,44% 0,56% 0,56% 25%,62% 25%,62% 39%,84% 39%,84% 16%,100% 16%,100% 42%,88% 42%,88% 100%,12% 100%,12% 42%,0 42%); }
#board .hide-tile-names .tile-name-line { display:none; }
html.compact-game #game .match-meta { display:none; }
html.compact-game #game .boardarea { --hud-rail:clamp(116px,calc(var(--game-w) * .15),146px); }
html.compact-game #game #board { inset:0 var(--hud-rail); }
html.compact-game #game #players { grid-template-columns:repeat(2,calc(var(--hud-rail) - 9px)); }
html.compact-game #players .player-hud-card { padding:4px; gap:3px; min-height:49px; }
html.compact-game #players .player-hud-portrait { width:27px; height:34px; }
html.compact-game #players .player-hud-portrait .avatar { width:27px; height:34px; }
html.compact-game #players .player-hud-topline { gap:1px; }
html.compact-game #players .player-hud-name { font-size:12px; }
html.compact-game #players .player-hud-team,html.compact-game #players .player-hud-assets,html.compact-game #players .player-hud-tag:not(.tag-ai) { display:none; }
html.compact-game #players .player-hud-cash .cash-amount { font-size:14px; }
html.compact-game #players .net-worth-badge { display:inline-block; font-size:10px; }
html.compact-game #players .hud-turn-badge { display:block; }
html.compact-game #game .match-tools button { padding:3px 5px; font-size:11px; }
html.compact-game #turn-order li { width:19px; height:23px; }
html.narrow-game #game .match-toolbar { column-gap:5px; }
html.narrow-game #game .match-tools { margin-inline-start:0; }
body.in-match :is(#modalbg,#rent-popup,#event-popup,#trade-standalone-modal) { inset-block-start:var(--match-toolbar-height,44px); }

#setup { height:100%; max-height:100%; width:100%; min-height:0; gap:8px; }
#setup .fighting-lobby-header { margin:0; }
#setup .fighting-stage { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; overflow:visible; min-height:0; }
#setup .team-bracket { height:auto; min-height:0; }
#setup .ffa-stage { display:flex; flex:1; min-height:0; flex-direction:column; justify-content:center; }
#setup .horizontal-cards-row { display:grid; grid-template-columns:repeat(3,minmax(0,150px)); gap:clamp(4px,1vw,14px); min-height:0; }
#setup .ffa-row { grid-template-columns:repeat(6,minmax(0,150px)); }
#setup .standing-hero-card { width:100%; min-width:0; min-height:0; height:min(360px,calc(var(--game-h) - 245px)); }
#setup .standing-hero-card .card-inner { min-height:0; }
#setup .standing-hero-card .card-portrait-stage { min-height:0; overflow:visible; }
#setup .standing-hero-sprite { max-height:100%; }
#setup .lobby-footer-actions { flex-shrink:0; }
html.compact-game #setup { gap:3px; padding:3px 8px !important; }
html.compact-game #setup .fighting-lobby-header { gap:6px; padding:2px 5px !important; min-height:0 !important; }
html.compact-game #setup .lobby-title-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 6px; }
html.compact-game #setup .lobby-title-wrap h1 { font-size:16px; margin:0; }
html.compact-game #setup .lobby-title-wrap .eyebrow,html.compact-game #setup .lobby-quick-meta { display:none; }
html.compact-game #setup .room-code-tag { margin:0; padding:0 4px; gap:3px; }
html.compact-game #setup .fighting-stage { padding:0; gap:4px; }
html.compact-game #setup .team-bracket { padding:3px 4px; }
html.compact-game #setup .team-header-strip,html.compact-game #setup .ffa-header-strip { margin:0; padding:2px 4px; }
html.compact-game #setup .fighting-vs-center { padding:0 4px !important; align-self:center; }
html.compact-game #setup .vs-badge { font-size:25px; }
html.compact-game #setup .standing-hero-card { height:min(245px,max(94px,calc(var(--game-h) - 170px))) !important; width:100% !important; }
html.compact-game #setup .standing-hero-card .card-inner { padding:3px 4px; }
html.compact-game #setup .card-header-bar,html.compact-game #setup .card-name-bar { margin:0; padding:2px 1px; }
html.compact-game #setup .standing-hero-sprite { width:clamp(28px,7vw,65px); height:min(86px,calc(var(--game-h) * .22)); }
html.compact-game #setup .card-portrait-stage { min-height:0; }
html.compact-game #setup :is(.empty-title,.hero-class-tag,.seat-badge) { font-size:9px; }
html.compact-game #setup .empty-silhouette { font-size:24px; line-height:1; margin:0; }
html.compact-game #setup .empty-actions { gap:2px; }
html.compact-game #setup .empty-actions button { min-height:25px; padding:1px 2px; font-size:10px; }
html.compact-game #setup .lobby-status-guide { font-size:11px; margin:0; }
html.compact-game #setup .lobby-start-btn { min-height:34px !important; height:34px !important; }
html.compact-game #setup .fighting-lobby-footer { padding:2px 4px !important; min-height:36px !important; gap:4px; }

.opening-draw { position:absolute; z-index:85; inset:var(--match-toolbar-height,44px) 0 0; display:grid; place-items:center; padding:8px; background:#081611e8; }
.opening-panel { --deck-light:#ffe7a3; --deck-dark:#62411a; width:min(780px,100%); padding:clamp(8px,2vw,24px); background:#10251e; border:2px solid var(--deck-light); box-shadow:0 0 0 3px var(--deck-dark),0 12px 30px #0008; }
.opening-panel[data-deck=elemental] { --deck-light:#bcd6ff; --deck-dark:#41377c; }
.opening-panel[data-deck=treasure] { --deck-light:#afffdb; --deck-dark:#31565e; }
.opening-panel header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.opening-panel h2 { font-size:clamp(16px,2.6vw,25px); margin:0; color:var(--deck-light); }
.opening-panel p { margin:4px 0 8px; font-size:clamp(11px,1.5vw,16px); }
.opening-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(3px,1vw,10px); }
.opening-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; height:clamp(84px,calc(var(--game-h) * .33),165px); gap:3px; padding:4px; border:2px solid var(--deck-light); border-radius:2px; background:repeating-linear-gradient(45deg,#ffffff0b 0 4px,transparent 4px 8px),var(--deck-dark); color:var(--deck-light); }
.opening-card:not(:disabled):hover,.opening-card:focus-visible { box-shadow:inset 0 0 0 2px var(--deck-light),0 0 10px var(--deck-light); }
.opening-card:disabled { opacity:1; cursor:default; }
.opening-card.claimed { background:#13241f; }
.opening-card img { width:26px; height:29px; object-fit:contain; image-rendering:pixelated; }
.opening-card .opening-glyph { font-size:clamp(21px,4vw,48px); line-height:1; }
.opening-card.revealed { animation:opening-flip .48s ease both; }
.opening-card strong,.opening-card small { text-align:center; font-size:clamp(10px,1.4vw,15px); line-height:1.1; overflow-wrap:anywhere; }
.opening-card[data-rank="1"] { box-shadow:0 0 9px var(--deck-light); }
.opening-card[data-deck=treasure] .opening-glyph { filter:drop-shadow(0 0 4px currentColor); }
.opening-panel[data-deck=elemental] :is([data-rank="2"],[data-rank="6"]) .opening-glyph { color:#ffa572; }
.opening-panel[data-deck=elemental] :is([data-rank="3"],[data-rank="4"]) .opening-glyph { color:#90deff; }
.opening-panel[data-deck=treasure] [data-rank="2"] .opening-glyph { color:#ff6e8e; }
.opening-panel[data-deck=treasure] [data-rank="3"] .opening-glyph { color:#77ffac; }
.opening-panel[data-deck=treasure] [data-rank="4"] .opening-glyph { color:#79a7ff; }
.opening-panel[data-deck=treasure] [data-rank="5"] .opening-glyph { color:#ffcf68; }
@keyframes opening-flip { from { transform:perspective(360px) rotateY(90deg); } to { transform:perspective(360px) rotateY(0); } }
@media(prefers-reduced-motion:reduce){.opening-card.revealed{animation:none;}}
.reduced-motion .opening-card.revealed { animation:none; }

#app-viewport { position:relative; height:var(--game-h,100dvh); }
#app-viewport > .app-main { flex:1 1 auto; min-height:0; height:auto; }
#setup:not([hidden]) { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
#setup .ffa-stage,#setup .team-bracket { min-height:0; }
#setup .horizontal-cards-row { align-items:stretch; }
#setup .standing-hero-card { align-self:center; max-height:100%; }
html.compact-game #setup .standing-hero-card { height:100% !important; max-height:205px; }
html.compact-game #setup .card-portrait-stage { flex:1 1 0; }
html.compact-game #setup .card-name-bar { overflow-wrap:anywhere; }
html.compact-game #setup .lobby-footer-actions { display:flex; align-items:center; gap:4px; }
html.compact-game #setup .lobby-start-btn { font-size:12px; }

.profile-tabs,.profile-avatar-pages { display:flex; align-items:center; justify-content:center; gap:7px; margin-block:6px; }
.profile-google { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.profile-google p { flex:1 0 100%; margin:2px 0; }
.profile-avatars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.profile-avatars button { display:grid; place-items:center; gap:4px; padding:5px; min-width:0; }
.profile-avatars img { width:42px; height:48px; object-fit:contain; }
.profile-avatars span { overflow-wrap:anywhere; }
.friend-status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#697177; }
.friend-status-dot.online { background:#87dfad; box-shadow:0 0 4px #87dfad; }

html.compact-game #modalbg .modal { padding:8px 14px; }
html.compact-game #modalbg .modal h2 { font-size:21px; margin:2px 0; }
html.compact-game #modalbg .modal p { margin:3px 0; }
html.compact-game #modalActions { gap:5px; margin-top:5px; }
html.compact-game #modalActions button { min-height:30px !important; padding:3px 8px; }
html.compact-game #modalText .settings-section { margin-top:4px !important; padding-top:2px !important; }
html.compact-game #modalText .settings-section h4 { margin:0 0 1px !important; }
html.compact-game #modalText .settings-section .muted { margin:0 0 2px 17px !important; }
html.compact-game .portfolio-summary { grid-template-columns:repeat(3,minmax(0,1fr)); margin:3px 0; gap:3px; }
html.compact-game .portfolio-summary > div { padding:2px 4px; }
html.compact-game .portfolio-summary dt { font-size:10px; }
html.compact-game .portfolio-summary dd { font-size:12px; margin:0; }
html.compact-game .portfolio-person { gap:6px; }
html.compact-game .portfolio-person img { width:28px; height:34px; }
html.compact-game .portfolio-person h3 { font-size:15px; }
html.compact-game .portfolio-item { padding:3px; }
html.compact-game .portfolio-open { display:grid; grid-template-columns:1fr 1fr; gap:1px 4px; font-size:11px; }
html.compact-game .portfolio-open strong { font-size:12px; }
html.compact-game .portfolio-actions { gap:4px; margin-top:1px; }
html.compact-game .portfolio-actions button { min-height:24px; padding:1px 4px; }
html.compact-game .profile-avatars img { width:32px; height:38px; }
html.compact-game .interior-page { padding:4px 10px !important; }
html.compact-game .interior-page .page-heading { margin:0 0 3px; gap:6px; }
html.compact-game .interior-page .page-heading h1 { font-size:19px; margin:0; }
html.compact-game .interior-page .page-heading p,html.compact-game .interior-page .page-footnote { display:none; }
html.compact-game .interior-page .tabs { margin:2px 0; }
html.compact-game .interior-page .tabs button { min-height:26px; padding:2px 7px; }
#shop-grid {
  grid-template-columns:repeat(var(--shop-columns,4),minmax(0,1fr));
  max-height:none;
  flex:none;
}
#shop-pages:not([hidden]) {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 16px;
  margin-top:12px;
}
html.compact-game #shop-grid { gap:5px; }
html.compact-game #shop .page-heading { padding:0 !important; margin-bottom:3px !important; }
html.compact-game #shop .balance { display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; }
html.compact-game #shop .balance strong { font-size:15px !important; }
html.compact-game #shop #gift-code-open { margin:0; padding:4px 6px; font-size:11px; }
html.compact-game #shop #shop-tabs { margin:2px 0 6px !important; }
html.compact-game #shop-grid .shop-card {
  display:grid;
  grid-template-columns:minmax(65px, 1fr) minmax(0, 3fr);
  align-content:center;
  align-items:center;
  justify-items:center;
  gap:2px 5px;
  padding:5px !important;
}
html.compact-game #shop-grid .shop-art {
  grid-column:1;
  grid-row:1 / span 4;
  flex-direction:column;
  min-height:0 !important;
  height:auto !important;
  max-width:100%;
}
html.compact-game #shop-grid .shop-art :is(.shop-hero-img,.shop-bld-preview,.shop-bld-preview img) { width:44px; height:48px; }
html.compact-game #shop-grid .premium-hero-tag { font-size:8px; line-height:1.15; }
html.compact-game #shop-grid .dice-skin-preview { width:66px; height:66px; }
html.compact-game #shop-grid .dice-skin-face { width:38px !important; height:38px !important; }
html.compact-game #shop-grid .dice-skin-fx { font-size:9px; white-space:normal; }
html.compact-game #shop-grid .dice-skin-gleam { width:38px; height:38px; top:8px; }
html.compact-game #shop-grid .dice-skin-preview i:nth-of-type(2) { left:80%; top:25%; }
html.compact-game #shop-grid .dice-skin-preview i:nth-of-type(3) { left:72%; top:55%; }
html.compact-game #shop-grid .shop-card :is(h3,p,button) { grid-column:2; }
html.compact-game #shop-grid .shop-card h3 { font-size:13px !important; line-height:1.15; margin:0 !important; }
html.compact-game #shop-grid .shop-card p {
  display:block !important;
  min-height:0 !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1.2 !important;
}
html.compact-game #shop-grid .shop-card button { min-height:25px !important; padding:2px 6px !important; }
html.compact-game .shop-pagination-bar { margin-top:1px !important; }
html.compact-game .shop-pagination-bar button { min-height:25px !important; padding:2px 6px !important; }
html.compact-game.narrow-game #shop:not([hidden]) {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"heading heading" "tabs pages" "items items";
  align-items:center;
  align-content:start;
  gap:5px;
}
html.compact-game.narrow-game #shop .page-heading { grid-area:heading; }
html.compact-game.narrow-game #shop #shop-tabs {
  grid-area:tabs;
  display:flex;
  flex-wrap:nowrap;
  justify-self:start;
  margin:0 !important;
  padding:2px;
}
html.compact-game.narrow-game #shop #shop-tabs button {
  min-width:0;
  min-height:25px;
  padding:2px 5px !important;
  font-size:10px !important;
  line-height:1.1;
}
html.compact-game.narrow-game #shop-pages { grid-area:pages; gap:4px; }
html.compact-game.narrow-game #shop-grid { grid-area:items; }
html.compact-game #hero-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
html.compact-game #hero-grid .hero-card { min-height:0; padding:5px 3px; }
html.compact-game #hero-grid .hero-card img { height:calc(var(--game-h) * .23); }

.profile-title-entry { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:3px 0; }
.profile-title-entry small { display:block; }

/* Ranked title cards and the independent UI scales. */
#modalbg .modal:has(.titles-browser) {
  width:min(calc(570px * var(--frame-ui,1)),100%);
  border-color:#ad8854;
}
.title-rarity-tabs,.settings-tabs { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:4px 0 8px; }
.title-rarity-tabs button,.settings-tabs button { min-height:calc(27px * var(--btn-ui,1)); padding:2px 8px; font-size:calc(12px * var(--font-ui,1)); }
.title-rarity-tabs button[aria-pressed=true],.settings-tabs button[aria-pressed=true] { border-color:#e8be70; background:#315043; color:#fff0bd; }
.title-shelf { display:grid; gap:5px; }
.profile-title-entry {
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:6px; align-items:center;
  padding:calc(5px * var(--frame-ui,1)); border:1px solid var(--title-edge); border-radius:4px;
  background:linear-gradient(100deg,var(--title-shade),#162d28 85%);
}
.profile-title-detail { display:grid; gap:2px; min-width:0; }
.profile-title-detail strong { font-size:clamp(12px,calc(15px * var(--font-ui,1)),19px); color:var(--title-ink); overflow-wrap:anywhere; }
.profile-title-detail small { color:#d0dbd5; font-size:clamp(10px,calc(11px * var(--font-ui,1)),14px); line-height:1.15; }
.title-icon {
  display:inline-block; flex:none; width:32px; height:32px;
  background-image:url('title-icons.png'); background-size:608px 128px;
  background-position:var(--icon-x) var(--icon-y); image-rendering:pixelated;
}
[data-rarity=common] { --title-edge:#829394; --title-ink:#e1ebeb; --title-shade:#344341; }
[data-rarity=rare] { --title-edge:#598bbb; --title-ink:#b8e2ff; --title-shade:#1b3b55; }
[data-rarity=epic] { --title-edge:#9566b6; --title-ink:#e9caff; --title-shade:#41275a; }
[data-rarity=legendary] { --title-edge:#c5984d; --title-ink:#ffe4a4; --title-shade:#514124; }
.title-progress-row { display:flex; gap:6px; align-items:center; font-size:11px; white-space:nowrap; }
.title-progress-row progress { flex:1; width:0; height:7px; accent-color:var(--title-edge); }
.title-equip-btn { min-width:68px; min-height:clamp(24px,calc(29px * var(--btn-ui,1)),40px); padding:2px 5px; font-size:clamp(10px,calc(12px * var(--font-ui,1)),15px); }
.player-title {
 display:block; max-width:100%; color:#f1d28a; font-size:clamp(10px,calc(11px * var(--font-ui,1)),14px);
 line-height:1.12; overflow-wrap:anywhere; white-space:normal;
}
#setup .card-info-bottom:has(.player-title) { min-height:0; gap:1px; }
#players .player-title { font-size:clamp(8px,calc(10px * var(--font-ui,1)),13px); }
#title-unlock {
 position:absolute; z-index:95; inset:auto 8px 8px auto; max-width:calc(100% - 16px);
 display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid var(--title-edge);
 background:linear-gradient(120deg,var(--title-shade),#142a22); border-radius:5px; color:var(--title-ink);
 box-shadow:0 0 13px var(--title-edge);
}
#title-unlock[hidden] { display:none; }
#title-unlock small,#title-unlock strong { display:block; }
#settings-scale:not([hidden]) { display:grid; gap:4px; }
#settings-scale label { display:flex; justify-content:space-between; margin:0; }
#settings-scale input[type=range] { width:100%; margin:1px 0 5px; min-height:18px; padding:0; accent-color:#e9bc65; }
#settings-scale output { color:#ffdf9b; }
#settings-scale #reset-ui-size { justify-self:center; min-height:26px; padding:2px 8px; }
#modalbg .modal:has(.settings-tabs) { width:min(calc(490px * var(--frame-ui,1)),100%); }
.settings-tabs ~ :is(#settings-general,#settings-scale) { font-size:clamp(11px,calc(14px * var(--font-ui,1)),18px); }
html.compact-game #settings-scale:not([hidden]) {
  grid-template-columns:minmax(92px,1fr) minmax(0,2fr);
  align-items:center; gap:4px 12px;
}
html.compact-game #settings-scale input[type=range] { margin:0; }
html.compact-game #settings-scale #reset-ui-size { grid-column:1/-1; }
#game .match-tools button { min-height:clamp(26px,calc(30px * var(--btn-ui,1)),37px); }
#players .player-hud-name { font-size:clamp(11px,calc(15px * var(--font-ui,1)),19px); }
#setup .player-custom-name { font-size:clamp(10px,calc(13px * var(--font-ui,1)),16px); }
html.compact-game #players .player-hud-name { font-size:clamp(10px,calc(12px * var(--font-ui,1)),15px); }
html.compact-game #setup .card-info-bottom .player-title { font-size:clamp(9px,calc(10px * var(--font-ui,1)),12px); }
html.compact-game #modalbg .modal:has(.titles-browser) { padding:5px 9px; }
html.compact-game .titles-browser .title-rarity-tabs { margin:2px 0 4px; }
html.compact-game .titles-browser .profile-avatar-pages,html.compact-game .modal:has(.titles-browser) .profile-tabs { margin-block:3px; }
html.compact-game .titles-browser .profile-avatar-pages button { min-height:24px; padding:2px 8px; }