/* Shared by the game pages when a tournament shows them in a frame
   (/<game>/?tournament=<ticket>). The page keeps its board, its move list and the
   messages around the board. Everything for starting a game, statistics,
   navigation, ads and the result pop-up is left out. The class is set by a small
   script at the top of each page (and by embed.js).
   This file is under /tournament/, so nginx never caches it. */
html.tournament-embed .game-topbar,
html.tournament-embed .stage-header,
html.tournament-embed .controls-shell,
html.tournament-embed #side-panel,
html.tournament-embed .legal-footer,
html.tournament-embed section[aria-label^="About"],
html.tournament-embed .mobile-screen-toggle,
html.tournament-embed .move-history-pill,
html.tournament-embed #myPopup,
html.tournament-embed #result-modal,
html.tournament-embed #auth-modal,
html.tournament-embed .ai-thinking-panel { display: none !important; }

html.tournament-embed,
html.tournament-embed body { overflow: hidden; min-height: 0; }

html.tournament-embed .page-shell { width: calc(100% - 16px); padding: 6px 0 8px; }
html.tournament-embed .game-layout { padding-top: 0; }
html.tournament-embed .board-stage { padding: 8px; background: none; border: 0; box-shadow: none; }
html.tournament-embed .play-surface { grid-template-columns: minmax(0, 1fr); }
html.tournament-embed .board-and-info { grid-template-columns: minmax(0, 1fr) 300px; }
html.tournament-embed .text-box { max-width: none; }

@media (max-width: 760px) {
    html.tournament-embed .board-and-info { grid-template-columns: minmax(0, 1fr); }
}

/* Whatever the game's own stylesheet says (it may be an old copy in the browser's cache),
   backgammon's points and slots are buttons that must not show the browser's own look. */
html.tournament-embed .point,
html.tournament-embed .bar-slot,
html.tournament-embed .off-slot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background-color: transparent;
}

/* The checkers of a point sit in the middle of it, from the edge it points away from.
   Here so that a cached copy of backgammon's own stylesheet cannot put them at the side. */
html.tournament-embed .point.top,
html.tournament-embed .point.bottom {
    align-items: center;
    justify-content: flex-start;
}

/* The new game page (game-shell): only the board and the move list stay. */
html.tournament-embed .sg-header,
html.tournament-embed .sg-skip,
html.tournament-embed .sg-footer,
html.tournament-embed .gs-setup,
html.tournament-embed .gs-ctlbar,
html.tournament-embed .gs-side-head,
html.tournament-embed .gs-tabs,
html.tournament-embed .gs-below,
html.tournament-embed .mobile-app-dock { display: none !important; }

/* On a phone game-shell.css shows the setup card with body.mobile-pre-game and body.mobile-in-game (both !important),
   which beat the rules above. A tournament game never shows it, so it is hidden here with more weight. */
html.tournament-embed body .gs-setup,
html.tournament-embed body.mobile-pre-game .gs-setup,
html.tournament-embed body.mobile-in-game .gs-setup,
html.tournament-embed body .gs-ctlbar,
html.tournament-embed body .mobile-app-dock { display: none !important; }

/* A phone: the board takes the whole width of the frame, with only a thin margin. */
@media (max-width: 700px) {
    html.tournament-embed .page-shell { width: calc(100% - 6px); }
    html.tournament-embed .board-stage { padding: 2px; }
    html.tournament-embed body .gs-board-wrap,
    html.tournament-embed body .gs-main,
    html.tournament-embed body .game-layout { padding-left: 0; padding-right: 0; }
    html.tournament-embed body .page-shell { width: calc(100% - 6px); margin-left: 3px; margin-right: 3px; }
    html.tournament-embed body .checkers-board-shell { padding: 8px; }
}