/* A normal site view: same header, background and route, no second landing shell. */
[data-view-link="play"][aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
[data-view-link="play"][aria-disabled="true"]::after { display: none; }
#play.web-play-screen {
  --play-edge-gap: 10px;
  --game-top-space: calc(var(--floating-header-top, 10px) + var(--floating-header-height, 70px) + 16px);
  padding: var(--game-top-space) 24px 16px;
  min-height: 100svh;
  overflow: visible;
}
#play.web-play-screen.active { display: block; }
/* Windowed practice fits below the header, with equal breathing room at both ends. */
body[data-view="play"][data-play-mode="practice"] { overflow: hidden; }
#play.web-play-screen.active[data-play-mode="practice"] {
  position: fixed;
  top: calc(var(--play-viewport-top, var(--game-top-space)) + var(--play-edge-gap));
  right: 0;
  bottom: var(--play-edge-gap);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  height: calc(100dvh - var(--play-viewport-top, var(--game-top-space)) - 2 * var(--play-edge-gap));
  padding: 0 var(--play-inset-right, var(--floating-header-inset, 20px)) env(safe-area-inset-bottom, 0px) var(--play-inset-left, var(--floating-header-inset, 20px));
  /* Override the legacy mobile .screen rule's forced 12px side padding. */
  padding-left: var(--play-inset-left, var(--floating-header-inset, 20px)) !important;
  padding-right: var(--play-inset-right, var(--floating-header-inset, 20px)) !important;
  overflow: hidden;
}
#play[data-play-mode="practice"] .web-play-mount { flex: 1; min-height: 0; height: auto; width: 100%; }
#play[data-play-mode="practice"] .web-play-return { flex-shrink: 0; width: 100%; }
.web-play-mount {
  position: relative;
  width: min(1120px, 100%);
  margin-inline: auto;
  height: clamp(360px, calc(100svh - var(--game-top-space) - 24px), 760px);
}
#web-play-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 28px;
  background: transparent;
  visibility: hidden;
}
#web-play-frame.is-ready { visibility: visible; }
.web-play-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
  border-radius: 28px;
  background: #fffcf5;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.web-play-loading[hidden] { display: none; }
.web-play-loading p { max-width: 360px; margin: 0; line-height: 1.7; }
.web-play-loading button { border: 0; border-radius: 28px; padding: 14px 22px; background: #1263e7; color: #fff; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.web-play-loading button:focus-visible { outline: 3px solid #1263e7; outline-offset: 4px; }
.web-play-mount[hidden], .web-play-return[hidden], #daily-queue-root[hidden] { display: none; }
.web-play-return {
  width: min(1120px, 100%); margin: 0 auto 10px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: #586a82;
}
.web-play-return button {
  border: 1px solid #dce4ed; background: #fffdf8; color: #1c3657;
  padding: 10px 16px; border-radius: 24px; cursor: pointer;
  font: inherit; font-weight: 600;
}
.web-play-return button:focus-visible { outline: 3px solid #1365ed; outline-offset: 3px; }
@media (max-width: 760px) {
  @supports (zoom: .8) {
    html.web-play-native-viewport {
      zoom: 1;
      --mobile-density-viewport-width: 100vw;
      --mobile-density-viewport-height: 100vh;
    }
    @supports (height: 100dvh) {
      html.web-play-native-viewport { --mobile-density-viewport-height: 100dvh; }
    }
  }
  #play.web-play-screen { padding: 0 8px 12px; min-height: 0; }
  .web-play-mount { height: max(360px, calc(100svh - 156px)); }
  #web-play-frame { border-radius: 20px; }
}
/* Phones play in landscape: spend the viewport on the game, not a second
   navigation bar. The game's Home control retains navigation without ending
   the match. No fullscreen permission or orientation-lock API is required. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  body[data-view="play"][data-play-mode="practice"] > .site-chrome { display: none !important; }
  #play.web-play-screen.active[data-play-mode="practice"] {
    top: var(--play-viewport-offset, 0px);
    bottom: auto;
    height: var(--play-viewport-height, 100vh);
    padding-top: max(4px, env(safe-area-inset-top, 0px));
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
  }
  #web-play-frame { border-radius: 18px; }
  #play[data-play-mode="practice"] .web-play-return { margin: 0; }
  .web-play-return button { min-height: 44px; }
}
/* Unsupported mobile browsers can expand the game to the currently visible
   viewport. This deliberately does not promise to hide Safari/browser chrome. */
body.web-play-expanded-view[data-view="play"][data-play-mode="practice"] > .site-chrome { display: none !important; }
body.web-play-expanded-view #play.web-play-screen.active[data-play-mode="practice"] {
  top: var(--play-viewport-offset, 0px);
  left: var(--play-viewport-left, 0px);
  right: auto;
  bottom: auto;
  width: var(--play-viewport-width, 100vw);
  height: var(--play-viewport-height, 100dvh);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
}
body.web-play-expanded-view #web-play-frame { border-radius: 0; }