.wpcdg-modal[hidden] { display: none !important; }
.wpcdg-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 18px; background: rgba(12, 16, 24, .78); }
.wpcdg-dialog { position: relative; display: flex; flex-direction: column; width: min(1180px, 100%); height: auto; max-height: min(860px, 94vh); overflow: hidden; color: #f7f8fb; background: #151b27; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.wpcdg-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; font: 600 16px/1.3 system-ui, sans-serif; }
.wpcdg-close { width: 36px; height: 36px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 8px; font: 30px/1 system-ui, sans-serif; cursor: pointer; }
.wpcdg-close:hover, .wpcdg-close:focus-visible { background: rgba(255,255,255,.12); }
.wpcdg-status { min-height: 20px; margin: 0; padding: 0 16px 10px; color: #d7deea; font: 14px/1.45 system-ui, sans-serif; }
.wpcdg-status:empty { display: none; }
.wpcdg-game { display: block; width: 100%; height: min(760px, calc(94vh - 70px)); min-height: 360px; flex: 0 0 auto; border: 0; background: #090d14; }
html.wpcdg-open { overflow: hidden; }
@media (max-width: 640px) { .wpcdg-modal { padding: 8px; } .wpcdg-dialog { max-height: 96vh; border-radius: 10px; } .wpcdg-game { height: calc(96vh - 72px); min-height: 54vh; } }
.wpcdg-status.is-win { color: #a8f0b0; font-size: 16px; font-weight: 700; }
.wpcdg-status.is-loss { color: #ffc0b0; }
.wpcdg-status.is-loading { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wpcdg-status.is-loading::before { content: ""; width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid rgba(215,222,234,.3); border-top-color: #ffb02e; border-radius: 50%; animation: wpcdg-load-spin .75s linear infinite; }
@keyframes wpcdg-load-spin { to { transform: rotate(360deg); } }
.wpcdg-confirm[hidden], .wpcdg-retry[hidden] { display: none !important; }
.wpcdg-confirm { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(8, 11, 18, .88); text-align: center; font: 600 16px/1.5 system-ui, sans-serif; }
.wpcdg-confirm p { max-width: 440px; margin: 0; }
.wpcdg-confirm button, .wpcdg-retry { padding: 9px 16px; color: #f7f8fb; background: #27354d; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font: 600 14px/1.3 system-ui, sans-serif; cursor: pointer; }
.wpcdg-confirm .wpcdg-confirm-close { background: #8e351f; border-color: #c95534; }
.wpcdg-retry { display: block; margin: 0 16px 10px auto; }
.wpcdg-launch[hidden] { display: none !important; }
.wpcdg-launch { position: fixed; right: 22px; bottom: 22px; z-index: 999990; padding: 12px 18px; color: #fff8eb; background: linear-gradient(135deg, #bd4927, #e07b29); border: 1px solid #ffc04b; border-radius: 11px; box-shadow: 0 8px 28px rgba(0,0,0,.3); font: 700 15px/1.2 system-ui, sans-serif; cursor: pointer; }
.wpcdg-launch:hover, .wpcdg-launch:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 640px) { .wpcdg-launch { right: 12px; bottom: 12px; padding: 11px 15px; font-size: 14px; } }
/* Landscape phone layout is enabled after the game reports its selected map. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 640px) {
  .wpcdg-modal.is-mobile-game { padding: 0; }
  .wpcdg-modal.is-mobile-game .wpcdg-dialog { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .wpcdg-modal.is-mobile-game .wpcdg-heading { position: absolute; inset: 0 0 auto; z-index: 10; height: 0; padding: 0; pointer-events: none; }
  .wpcdg-modal.is-mobile-game .wpcdg-heading strong { display: none; }
  .wpcdg-modal.is-mobile-game .wpcdg-close { position: absolute; top: 5px; right: 6px; width: 42px; height: 42px; color: #fff; background: rgba(13, 19, 30, .78); border: 1px solid rgba(255,255,255,.3); pointer-events: auto; }
  .wpcdg-modal.is-mobile-game .wpcdg-status:not(:empty) { position: absolute; top: 7px; left: 48px; right: 52px; z-index: 8; min-height: 0; padding: 4px 8px; text-align: center; font-size: 12px; pointer-events: none; }
  .wpcdg-modal.is-mobile-game .wpcdg-game { width: 100%; height: 100%; height: 100dvh; min-height: 0; flex: 1 1 auto; }
  .wpcdg-modal.is-mobile-game .wpcdg-retry { position: absolute; top: 48px; right: 8px; z-index: 8; margin: 0; }
}