/* Shared application styles; game-specific rules are loaded per package. */
.desktop-game-workspace{
  --dg-space: 10px;
  --dg-action-bg: var(--panel-2);
  --dg-action-line: var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.dg-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.dg-head>div:first-child{ display:flex;align-items:baseline;gap:12px;min-width:0; }
.dg-kicker{ margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; white-space:nowrap; }
.dg-head h3{ margin: 0; color: var(--text); font-family: var(--font-editorial); font-size: 21px; font-weight: 700; line-height: 1.3; }
.dg-status{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.dg-phase{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); border-radius: 999px; color: var(--mint); background: var(--mint-wash); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dg-phase::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dg-phase.is-finished{ color: var(--muted); background: var(--panel-2); border-color: var(--line); }
.dg-role{ color: var(--muted); font-size: 12px; }
.dg-next{ display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 14px; color: var(--text-soft); background: var(--mint-wash); border-bottom: 1px solid var(--line); }
.dg-next > span{ color: var(--mint); font-size: 20px; }
.dg-next p{ margin: 0; line-height: 1.6; font-size: 13px; }
.dg-stage{ min-width: 0; padding: var(--dg-space); }
.dg-stage > .card{ margin: 0; border: 0; box-shadow: none; }
.dg-stage > .board-card{ padding-top: 0; }
.dg-setup{padding:18px 14px;color:var(--text-soft)}
.dg-setup>span{font-size:11px;letter-spacing:.08em;color:var(--mint)}
.dg-setup h4{margin:8px 0 12px;font-family:var(--font-editorial);font-size:24px;line-height:1.4}
.dg-setup p{max-width:620px;margin:8px 0;font-size:13px;line-height:1.8}
.dg-stage .game-view-toolbar{ margin-top:0;margin-bottom:4px;padding-bottom:4px;justify-content:flex-end; }
.desktop-game-workspace :is(.art-controls.art-spectate,.art-controls.art-wait,.hd-act.dim){display:none}
.dg-stage .turn-float{ margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--dg-action-line); border-radius: 9px; background: var(--dg-action-bg); }
.desktop-game-workspace[data-dg-readonly="true"] .dg-stage :is(button, input, textarea, select):not(#game-render-2d):not(#game-render-3d){ opacity: .5; cursor: not-allowed; }
.dg-tools{ display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 5px 14px; border-top: 1px solid var(--line); background: var(--panel-2); }
.dg-rules{ flex: 1; min-width: 0; color: var(--muted); font-size: 12px; }
.dg-rules summary{ width: fit-content; min-height: 36px; display: list-item; align-content: center; cursor: pointer; color: var(--text-soft); font-weight: 600; }
.dg-rules > div{ max-width: 700px; padding: 4px 0 8px; }
.dg-rules p{ margin: 8px 0 0; line-height: 1.8; }
.dg-secondary{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dg-secondary .btn{ min-height: 36px; padding-inline: 12px; border-color: var(--line); background: transparent; color: var(--muted); font-size: 12px; }
.dg-secondary .btn:hover{ color: var(--text); border-color: var(--line-strong); background: var(--panel); }
.desktop-game-workspace :is(button, summary):focus-visible{ outline: 2px solid var(--club-red); outline-offset: 3px; }
/* Keep the outer room identity compact so the game receives the vertical space. */
.desktop-room[data-room-type="game"] > .room-header{min-height:0;padding:9px 24px;gap:7px 12px}
.desktop-room[data-room-type="game"] > .room-header .room-return{line-height:1.4}
.desktop-room[data-room-type="game"] > .room-grid[data-layout]{padding-top:12px;padding-bottom:14px}
.desktop-game-workspace[data-dg-kind="gomoku"]{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.desktop-game-workspace[data-dg-kind="gomoku"] .dg-stage{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:12px 16px}
.desktop-game-workspace[data-dg-kind="gomoku"] .dg-stage>.board-card{height:100%;width:100%;min-height:0;padding:0;gap:8px;justify-content:center;background:transparent;overflow:visible}
.desktop-game-workspace[data-dg-kind="gomoku"] .dg-stage .board-card .board-wrap{width:var(--dg-board-size,min(100%,calc(100dvh - 420px)));height:auto;max-width:100%;flex:none;box-shadow:0 8px 22px #17291e20,0 0 0 1px #6d4f2820}
.desktop-game-workspace[data-dg-kind="gomoku"] .board-caption{min-height:20px;max-width:var(--dg-board-size,100%);align-self:center;font-size:10px;gap:12px}
.desktop-game-workspace[data-dg-kind="gomoku"] .result-banner{padding:4px 8px;min-height:28px;font-size:12px}
.desktop-game-workspace[data-dg-kind="gomoku"] .result-banner :is(#btn-rematch,#btn-new-game){display:none}
.desktop-game-workspace[data-dg-kind="gomoku"][data-dg-board-mode="zoom"] .dg-stage{overflow:auto;align-items:flex-start;overscroll-behavior:contain}
.desktop-game-workspace[data-dg-kind="gomoku"][data-dg-board-mode="zoom"] .dg-stage>.board-card{height:auto;min-height:100%;justify-content:flex-start}
.desktop-game-workspace[data-dg-kind="gomoku"][data-dg-board-mode="zoom"] .dg-stage .board-card .board-wrap{width:min(720px,100%)}
.desktop-game-workspace[data-dg-kind="gomoku"][data-dg-board-mode="zoom"] .board-caption{max-width:min(720px,100%)}
@media (prefers-reduced-motion: reduce){.desktop-game-workspace *{ transition: none !important; }}