/* Product Phase 7 reconciliation theme for the develop platform shell.
   Visual-only overlay: preserve develop DOM, Auth, Socket.IO and gameplay behavior. */

:root {
  color-scheme: dark;
  --ink: #edf3f2;
  --muted: #9eadae;
  --paper: #d8c79f;
  --panel: rgba(16, 27, 32, .93);
  --line: rgba(216, 199, 159, .20);
  --sea: #183b46;
  --deep-sea: #0b2028;
  --accent: #c9a86b;
  --accent-dark: #3c716c;
  --forest: #47786d;
  --shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(59, 105, 103, .18), transparent 32rem),
    radial-gradient(circle at 82% 78%, rgba(188, 151, 91, .08), transparent 28rem),
    #09151b;
}

.brand p,
.hint,
.eyebrow,
.stage-path,
#gameStatus,
#connectionStatus,
#handTotal,
#deckCount {
  color: var(--muted);
}

.lobby-card,
.panel,
.side-panel,
.topbar,
.waiting-room,
.result-panel,
.runtime-bar,
.action-dock,
.player-rail,
.activity-panel {
  border-color: var(--line);
  color: var(--ink);
  background: linear-gradient(165deg, rgba(24, 39, 45, .96), rgba(12, 22, 27, .96));
  box-shadow: var(--shadow);
}

button {
  color: #102024;
  background: linear-gradient(180deg, #d8bc82, #b69055);
  border: 1px solid rgba(250, 232, 187, .18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .20);
}

button.secondary,
.icon-button.secondary {
  color: var(--ink);
  background: rgba(28, 47, 54, .88);
  border: 1px solid var(--line);
}

button:hover:not(:disabled) {
  filter: brightness(1.08);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #d7bd84;
  outline-offset: 2px;
}

input,
select {
  color: var(--ink);
  background: rgba(9, 23, 29, .92);
  border-color: var(--line);
}

.topbar {
  border-radius: 12px;
}

.game-mark,
.mark {
  color: #efd08d;
  background: linear-gradient(145deg, #214b55, #416e63);
}

.game-workspace {
  gap: 10px;
}

.player-rail,
.context-panel {
  min-width: 0;
}

.player,
.seat,
.public-room,
.development-card,
.dice-card,
.mode-card,
.trade-card {
  color: var(--ink);
  background: rgba(24, 40, 46, .82);
  border-color: var(--line);
}

/* Develop shell has a more-specific light identity card rule. Override it
   explicitly so player information keeps readable contrast on the dark table. */
.identity-strip .player {
  color: var(--ink);
  background: rgba(24, 40, 46, .94);
  border-color: rgba(216, 199, 159, .24);
}
.identity-strip .player-head strong,
.identity-strip .player-head > span {
  color: var(--ink);
}
.identity-strip .resources,
.identity-strip .resource {
  color: #c3d0cf;
}
.identity-strip .resource {
  background: rgba(255, 255, 255, .06);
}

.turn-guide,
.context-panel .turn-guide {
  color: var(--ink);
  background: linear-gradient(160deg, rgba(39, 65, 69, .96), rgba(20, 38, 43, .96));
  border-left-color: #c8a56a;
}

/* styles.css still contains light Phase-7 fallback surfaces with higher
   specificity. Match that specificity so the dark Asterism overlay never
   produces light backgrounds with --ink (light) text. */
.game-sheet .development-section {
  color: var(--ink);
  background: rgba(16, 31, 36, .78);
  border-color: var(--line);
}
.game-sheet .development-heading h2,
.game-sheet .development-card h3,
.game-sheet .development-card p {
  color: var(--ink);
}

.guide-owner {
  border-bottom-color: var(--line);
}

.production-result {
  color: var(--ink);
  background: rgba(24, 43, 48, .84);
  border-left-color: #c8a56a;
}

.board-panel {
  border-color: rgba(221, 206, 170, .18);
  background:
    radial-gradient(circle at center, rgba(93, 139, 132, .13), transparent 24rem),
    linear-gradient(145deg, #16333b, #0b2229);
  box-shadow: inset 0 0 72px rgba(0, 0, 0, .32), var(--shadow);
}

.board-toolbar button {
  color: var(--ink);
  background: rgba(14, 31, 37, .88);
  border-color: rgba(220, 204, 166, .25);
}

.hand-bar {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(26, 43, 48, .97), rgba(13, 27, 32, .98));
  border-color: var(--line);
  box-shadow: none;
}

.hand-resource {
  border-right-color: var(--line);
}

.action-dock {
  border-radius: 11px;
  overflow: hidden;
}

.dock-actions button {
  color: #d8dedc;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dock-actions button:hover:not(:disabled),
.dock-actions button[aria-expanded="true"] {
  color: #fff4d6;
  background: rgba(66, 91, 88, .72);
  border-color: rgba(215, 190, 131, .26);
}

.activity-panel,
.game-sheet,
dialog {
  color: var(--ink);
  background: linear-gradient(165deg, #1e3439, #101f25);
  border-color: rgba(216, 199, 159, .26);
  box-shadow: 0 24px 68px rgba(0, 0, 0, .50);
}

dialog::backdrop {
  background: rgba(3, 8, 11, .72);
  backdrop-filter: blur(2px);
}

.activity-tab {
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

.activity-tab.active {
  color: #fff3d2;
  border-color: #c8a56a;
}

.phase7-obsolete-control,
.phase7-proxied-action,
.phase7-trade-proxy-hidden {
  display: none !important;
}

/* Blocking discard uses the native dialog top layer, not workspace z-index. */
.phase7-discard-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: min(82dvh, 620px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(216, 199, 159, .30);
  border-radius: 12px;
}

.phase7-discard-dialog #discardForm {
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* ui-ux-baseline-v1 previously promoted #discardForm itself to a fixed modal.
   The native dialog is now the only modal layer, so neutralize that legacy
   selector with equal/higher specificity to keep mobile inputs interactive. */
#discardBlockingDialog[open] > #discardForm:has(#discardPanel:not([hidden])) {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block !important;
  place-items: initial !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
#discardBlockingDialog[open] #discardPanel:not([hidden]) {
  width: 100%;
  max-height: none;
  overflow: visible;
}
#discardBlockingDialog[open] #discardInputs input {
  min-height: 44px;
  font-size: 16px;
  pointer-events: auto;
  touch-action: manipulation;
}

body:has(#discardBlockingDialog[open]) #rollDice,
body:has(#discardBlockingDialog[open]) #endTurn,
body:has(#discardBlockingDialog[open]) #guidePrimary {
  display: none !important;
}

.phase7-purchase-dialog {
  width: min(520px, calc(100vw - 28px));
}

.phase7-purchase-summary {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 20, 25, .58);
}

.phase7-purchase-cost {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phase7-purchase-cost span {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  background: rgba(255, 255, 255, .035);
}

.phase7-purchase-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  body.playing-view {
    overflow: hidden;
  }

  .topbar {
    background: rgba(13, 27, 32, .98);
  }

  .mobile-overflow-trigger {
    color: var(--ink);
    background: rgba(31, 52, 58, .92);
  }

  .player-rail {
    background: rgba(18, 34, 39, .96);
  }

  .board-stage,
  .board-panel {
    min-width: 0;
  }

  .action-dock {
    background: rgba(10, 22, 27, .98);
    border-top-color: rgba(216, 199, 159, .22);
  }

  .phase7-purchase-cost {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* Victory result is a presentation-only Asterism hero. Keep it dark and high-contrast. */
.result-panel.victory-panel { color:var(--ink); border-color:color-mix(in srgb,var(--winner-color) 58%,#d7bd84); background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--winner-color) 22%,transparent),transparent 31rem),linear-gradient(158deg,rgba(27,47,53,.98),rgba(11,25,31,.99) 62%,rgba(6,16,21,.99)); box-shadow:0 28px 78px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.055); }
.result-panel.victory-panel .victory-kicker{color:#d7bd84}.result-panel.victory-panel .victory-title{color:#fff7e4}.result-panel.victory-panel .victory-subtitle{color:#c7d2d0}
.result-panel.victory-panel .victory-rank-card{color:var(--ink);background:rgba(17,33,39,.92);border-color:rgba(216,199,159,.20)}
.result-panel.victory-panel .victory-rank-card.rank-first{border-color:color-mix(in srgb,var(--winner-color) 66%,#efd08d);background:linear-gradient(135deg,color-mix(in srgb,var(--winner-color) 19%,rgba(30,49,54,.97)),rgba(11,27,33,.98) 58%)}
.result-panel.victory-panel .victory-rank-player strong{color:#f4f7f6}.result-panel.victory-panel .victory-rank-score{color:#d7e0de}
.result-panel.victory-panel .rank-first .victory-rank-score,.result-panel.victory-panel .rank-first .victory-rank-number{color:#f5d78e}
.result-panel.victory-panel #rematchChoice{color:#152328;background:linear-gradient(180deg,#edcf8c,#bd9557);border-color:rgba(255,236,190,.28);box-shadow:0 10px 24px rgba(0,0,0,.26)}
.result-panel.victory-panel #returnLobbyChoice{color:var(--ink);background:rgba(29,48,54,.94)}

/* Mobile contrast + hierarchy hardening. Match the higher-specificity layout
   selectors so legacy light fallbacks cannot wash out Asterism text. */
.playing-view .activity-panel.mobile-open,
.playing-view .top-actions.mobile-open {
  color: var(--ink);
  background: linear-gradient(165deg, #1c3238, #0d1c22);
  border-color: rgba(216,199,159,.30);
  box-shadow: 0 -16px 44px rgba(0,0,0,.50);
}
.playing-view .mobile-sheet-heading {
  color: #fff4d6;
  background: rgba(8,20,25,.72);
  border-bottom-color: rgba(216,199,159,.24);
}
.playing-view .top-actions.mobile-open button,
.playing-view .top-actions.mobile-open .icon-button {
  color: #eef4f2;
  background: rgba(30,49,55,.94);
  border-color: rgba(216,199,159,.22);
}
.playing-view .top-actions.mobile-open button:hover:not(:disabled),
.playing-view .top-actions.mobile-open button:focus-visible {
  color: #fff5db;
  background: rgba(61,84,81,.96);
}
.playing-view .mobile-overflow-trigger {
  color: #f5e9ca;
  background: rgba(28,47,54,.96);
  border-color: rgba(216,199,159,.30);
}
.playing-view .mobile-overflow-trigger span { color: inherit; }

.playing-view .activity-panel .activity-tabs {
  background: rgba(8,20,25,.78);
  border-bottom-color: rgba(216,199,159,.22);
}
.playing-view .activity-panel .activity-tab {
  color: #b9c7c6;
  background: transparent;
}
.playing-view .activity-panel .activity-tab.active {
  color: #fff2cf;
  background: rgba(74,98,93,.38);
  box-shadow: inset 0 -3px #d1ad6d;
}
.playing-view .activity-panel .activity-view {
  color: #edf3f2;
  background: rgba(8,20,25,.48);
}
.playing-view .activity-panel .log-item {
  color: #edf3f2;
  background: rgba(27,45,51,.86);
  border-left-color: #d3ae6b;
}
.playing-view .activity-panel .log-item .time,
.playing-view .activity-panel .time {
  color: #f0d59a;
}
.playing-view .activity-panel #chatMessages {
  color: #edf3f2;
}
.playing-view .activity-panel .chat input {
  color: #f1f5f4;
  background: rgba(6,17,22,.96);
  border-color: rgba(216,199,159,.28);
}
.playing-view .activity-panel .chat input::placeholder {
  color: #9fb0b0;
  opacity: 1;
}
.playing-view .activity-panel .empty-state {
  color: #afbfbe;
}

.playing-view .context-panel .turn-guide,
.playing-view .context-panel .turn-guide p,
.playing-view .context-panel .turn-guide li,
.playing-view .context-panel .turn-guide strong {
  color: #edf3f2;
}
.playing-view .context-panel .guide-owner {
  color: #f1d89f;
}
.playing-view .context-panel #guideMessage {
  color: #d9e2e0;
}
.playing-view .context-panel #guideOptions {
  color: #f1f5f4;
}

.playing-view .action-dock,
.playing-view .action-dock .hand-bar,
.playing-view .dock-actions {
  color: #edf3f2;
  background: linear-gradient(180deg, rgba(22,39,45,.98), rgba(10,23,29,.99));
  border-color: rgba(216,199,159,.22);
}
.playing-view .action-dock #handTotal,
.playing-view .action-dock .hand-resource dt {
  color: #b8c6c5;
}
.playing-view .action-dock .hand-resource dd {
  color: #f5f7f6;
}
.playing-view .dock-actions .mobile-primary-action:not([hidden]) {
  color: #172329;
  background: linear-gradient(180deg, #f1d58f, #c79a55);
  border-color: rgba(255,235,185,.38);
}
.playing-view .dock-actions button:not(.mobile-primary-action) {
  color: #e4ecea;
}
.playing-view .dock-actions button:disabled {
  color: #7f908f;
  background: rgba(12,27,32,.78);
}

dialog.result-panel.victory-panel[open] {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--winner-color) 24%,transparent), transparent 27rem),
    linear-gradient(158deg, #1b3036, #0b191f 64%, #061014);
  border-color: color-mix(in srgb,var(--winner-color) 62%,#d7bd84);
}
dialog.result-panel.victory-panel::backdrop {
  background: rgba(2,7,10,.86);
  backdrop-filter: blur(5px);
}

@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
  .playing-view .player-rail,
  .playing-view .context-panel,
  .playing-view .board-panel,
  .playing-view .runtime-bar,
  .playing-view .action-dock {
    border-color: rgba(216,199,159,.24);
  }
  .playing-view .identity-strip .player {
    color: #edf3f2;
    background: rgba(22,39,45,.97);
    border-color: rgba(216,199,159,.24);
  }
  .playing-view .identity-strip .player-head strong,
  .playing-view .identity-strip .player-head > span {
    color: #eef4f2;
  }
}

/* Waiting-room mobile sheets use game-view before the match becomes playing-view. */
.game-view:not(.playing-view) .topbar,
.game-view:not(.playing-view) .waiting-room {
  color: var(--ink);
  background: linear-gradient(165deg, rgba(24,39,45,.98), rgba(12,22,27,.98));
  border-color: var(--line);
}
.game-view:not(.playing-view) .mobile-overflow-trigger {
  color: #f5e9ca;
  background: rgba(28,47,54,.96);
  border-color: rgba(216,199,159,.30);
}
.game-view:not(.playing-view) .top-actions.mobile-open {
  color: var(--ink);
  background: linear-gradient(165deg, #1c3238, #0d1c22);
  border: 1px solid rgba(216,199,159,.28);
  box-shadow: 0 -16px 44px rgba(0,0,0,.50);
}
.game-view:not(.playing-view) .top-actions.mobile-open .mobile-sheet-heading {
  color: #fff4d6;
}
.game-view:not(.playing-view) .top-actions.mobile-open button,
.game-view:not(.playing-view) .top-actions.mobile-open .icon-button {
  color: #eef4f2;
  background: rgba(30,49,55,.94);
  border-color: rgba(216,199,159,.22);
}
.game-view:not(.playing-view) .seat {
  color: #eef4f2;
  background: rgba(22,39,45,.94);
  border-color: rgba(216,199,159,.24);
}
.game-view:not(.playing-view) .waiting-actions select,
.game-view:not(.playing-view) .waiting-actions input {
  color: #eef4f2;
  background: rgba(7,19,24,.94);
  border-color: rgba(216,199,159,.24);
}

/* Keep primary actions outside secondary drawers and inside the visible phone
   viewport, including four-seat games and landscape browser chrome. */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
  .game-view .topbar:has(.top-actions.mobile-open) { z-index: 11; backdrop-filter: none; }
  .game-view .waiting-heading {
    position: sticky; top: 58px; z-index: 2;
    padding: 6px; background: #18272d;
  }
  .playing-view .shell {
    height: 100dvh;
    padding: max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  }
  .playing-view #game { height: 100%; min-height: 0; }
  .playing-view .topbar { flex: 0 0 44px; min-height: 44px; position: relative; }
  .playing-view .runtime-bar { flex: 0 0 auto; min-height: 28px; padding: 2px 6px; }
  .playing-view .game-workspace { min-height: 0; }
  .playing-view .board-stage, .playing-view .board-panel { min-height: 0; height: 100%; aspect-ratio: auto; }
  .playing-view .board-feedback { pointer-events: none; }
  .playing-view .turn-guide { display: flex; flex-direction: column; }
  .playing-view #guidePrimary { order: -1; min-height: 44px; flex-shrink: 0; }
  .playing-view #guideOptionsLabel, .playing-view #guideOptions { display: none !important; }
  .playing-view .action-dock { flex: 0 0 auto; position: static; }
  .playing-view .hand-resource { min-height: 32px; }
}

@media (max-width: 760px) and (min-height: 501px) {
  .playing-view .game-workspace {
    display: grid; grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr) auto;
  }
  .playing-view .identity-strip .players,
  .playing-view .identity-strip .players:has(.player:nth-child(4)) {
    display: flex; overflow-x: auto;
  }
  .playing-view .identity-strip .player { flex: 1 0 78px; padding: 4px; }
  .playing-view .identity-strip .player-head strong {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .playing-view .context-panel { max-height: 170px; overflow: auto; }
  .playing-view .turn-guide h3 { margin: 2px 0; font-size: 14px; }
  .playing-view .turn-guide p { margin: 2px 0; font-size: 12px; }
}

@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
  .game-view .waiting-heading { top: 0; }
  .playing-view .game-workspace { grid-template-columns: 94px minmax(0,1fr) 210px; }
  .playing-view .identity-strip .players,
  .playing-view .identity-strip .players:has(.player:nth-child(4)) { display: grid; grid-template-columns: minmax(0,1fr); }
  .playing-view .identity-strip .player-head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .playing-view .context-panel .turn-guide { min-height: 0; }
  .playing-view #guidePrimary { min-height: 44px; }
  .playing-view .board-toolbar { display: flex; gap: 2px; }
  .playing-view .board-toolbar button { width: 30px; height: 30px; min-height: 30px; padding: 4px; }
}

/* The trading flow has two separate top-layer dialogs. Keep their contrast and
   controls stable in the short visual viewport without changing other modals. */
#tradeHubDialog .sheet-heading,
#tradeHubDialog .trade-card {
  color: #edf3f2;
  background: #172b31;
}
#tradeHubDialog .sheet-heading h2,
#tradeHubDialog .trade-rate-reason { color: #edf3f2; }
#tradeHubDialog .harbor-chip { color: #193039; background: #e8f0ed; }
.trade-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade-dialog-heading .icon-button { flex: 0 0 38px; }

@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
  dialog#tradeHubDialog[open],
  dialog#tradeDialog[open] {
    position: fixed;
    top: calc(var(--trade-vv-top, 0px) + max(8px, env(safe-area-inset-top)));
    left: calc(var(--trade-vv-left, 0px) + max(8px, env(safe-area-inset-left)));
    width: min(640px, calc(var(--trade-vv-width, 100vw) - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))));
    height: calc(var(--trade-vv-height, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    max-width: none;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
  }
  dialog#tradeHubDialog[open] { display: flex; flex-direction: column; }
  #tradeHubDialog .sheet-heading { flex: 0 0 auto; padding: 8px 12px; }
  #tradeHubDialog .sheet-heading h2 { font-size: 16px; }
  #tradeHubDialog .trade-card {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  #tradeHubDialog .trade-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  #tradeHubDialog .trade-row button { grid-column: 1 / -1; }
  #tradeHubDialog select { min-width: 0; max-width: 100%; }
  dialog#tradeDialog[open] { display: flex; flex-direction: column; }
  #tradeDialog .trade-dialog-heading {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
  }
  #tradeDialog .trade-dialog-heading h2 { font-size: 16px; margin: 0; }
  #tradeDialog #playerTradeForm { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; }
  #tradeDialog .trade-dialog-fields {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 12px;
    overscroll-behavior: contain;
  }
  #tradeDialog .trade-resource-row { min-width: 0; gap: 6px; margin: 6px 0; }
  #tradeDialog .trade-resource-row label { min-width: 0; overflow-wrap: anywhere; }
  #tradeDialog .development-actions {
    flex: 0 0 auto;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }
  #tradeDialog .development-actions button { min-height: 42px; }
}