/* The settings popup on Ludo's play page.
 *
 * Every other play page in the collection wears this from the shared
 * play-menu.css (scripts/play-menu.css, the .gm-settings rules). Ludo keeps
 * its own menu skin (site-menu.css) and is left out of the sync, so the same
 * rules live here: the gear is the ☰ toggle's twin — same surface, same line,
 * 44px — and the panel is Slave's, measured out of Slave's own code, filled
 * with this game's own colours (the --ludo-nav-* tokens site-menu.css sets on
 * the header) and the collection's gold.
 *
 * Load it before site-menu.css, on the play page only. The markup is:
 *   <div class="gm-settings-host" data-gm-settings>
 *     <button class="gm-settings-toggle" …><span>⚙</span><span data-gm-copy="settings">Settings</span></button>
 *     <section class="gm-settings" hidden>
 *       <div class="gm-setting"><span>Label</span><button>…</button>…</div>
 *     </section>
 *   </div>
 * with .active (and aria-pressed) on the option in force; src/settings-popup.js
 * does the opening, closing and wording.
 */
body.game-ludo.club-play .gm-settings-toggle {
 display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
 min-height: 44px; min-width: 44px; margin: 0; padding: 10px 13px;
 border: 1px solid var(--ludo-nav-line, #f4dcaf24); border-radius: 10px;
 background: var(--ludo-nav-surface, #203943); color: var(--ludo-nav-ink, #fff3de); box-shadow: none;
 font: 600 13px/1.3 Club, sans-serif; letter-spacing: 0; text-transform: none;
 white-space: nowrap; cursor: pointer; transform: none;
}
body.game-ludo.club-play .gm-settings-toggle > span:first-child { font-size: 16px; line-height: 1; }
body.game-ludo.club-play .gm-settings-toggle:hover { background: #ffffff14; }
body.game-ludo.club-play .gm-settings-toggle[aria-expanded="true"] { border-color: var(--ludo-nav-gold, #f4ce87); color: var(--ludo-nav-gold, #f4ce87); }
body.game-ludo.club-play .gm-settings-toggle:focus-visible { outline: 2px solid var(--ludo-nav-gold, #f4ce87); outline-offset: 3px; }
/* On a narrow phone the word goes and the gear stays a 44px square. */
@media (max-width: 480px) {
 body.game-ludo.club-play .gm-settings-toggle { padding: 10px; }
 body.game-ludo.club-play .gm-settings-toggle > span:not(:first-child) { display: none; }
}
/* The popup hangs from the button that opens it. */
body.game-ludo.club-play .gm-settings-host { position: relative; }
body.game-ludo.club-play .gm-settings {
 position: absolute; z-index: 151; top: calc(100% + 12px); right: 0; left: auto;
 display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
 width: max-content; max-width: min(470px, calc(100vw - 24px));
 max-height: calc(100dvh - 160px); overflow-y: auto; box-sizing: border-box;
 margin: 0; padding: 14px; border: 1px solid #c9e2f44a; border-radius: 14px;
 background: var(--ludo-nav-base, #14232d); box-shadow: 0 15px 35px #06112680;
}
body.game-ludo.club-play .gm-settings[hidden] { display: none; }
body.game-ludo.club-play .gm-setting {
 display: flex; flex: 1 1 185px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px;
 min-width: 0; padding: 6px 7px; border: 1px solid #ffffff42; border-radius: 13px;
 background: #ffffff10; box-shadow: inset 0 1px #ffffff2b;
}
body.game-ludo.club-play .gm-setting > span {
 margin: 0 3px 0 1px; color: var(--ludo-nav-ink, #fff3de);
 font: 700 12px/1.3 GameMenu, sans-serif !important; letter-spacing: .2px; white-space: nowrap;
}
/* 44px tall: every other control in the collection is thumb-sized. */
body.game-ludo.club-play .gm-setting button {
 min-width: 40px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px;
 color: #edf4ff; background: #ffffff17; box-shadow: none;
 /* GameMenu, like every other game's panel: this file mirrors the shared one
    and the keys are the component's, not Ludo's own display face. */
 /* !important because club-pages.css paints every font inside the header with
    .club-site-header *{font-family:Club!important}, and the panel is the
    component's rather than the header's. */
 font: 700 14px/1.3 GameMenu, sans-serif !important; letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
body.game-ludo.club-play .gm-setting button:hover:not(.active):not(:disabled) { background: #ffffff2b; }
body.game-ludo.club-play .gm-setting button.active {
 color: #5b3452; background: var(--ludo-nav-gold, #f4ce87); box-shadow: 0 2px 0 #b98a3f, 0 0 12px #f4ce8777;
}
body.game-ludo.club-play .gm-setting button:disabled { opacity: .55; cursor: default; }
body.game-ludo.club-play .gm-setting button:focus-visible { outline: 2px solid var(--ludo-nav-gold, #f4ce87); outline-offset: 3px; }
/* A note under a chip's options — on an online table, that only the host can change the level. */
body.game-ludo.club-play .gm-setting > small {
 flex: 1 1 100%; margin: 2px 3px 0; color: var(--ludo-nav-muted, #c8c2b9);
 font: 500 11px/1.3 Club, sans-serif; text-align: center;
}
body.game-ludo.club-play .gm-setting > small[hidden] { display: none; }
/* On a phone the panel leaves the gear behind and spans the header instead. */
@media (max-width: 700px) {
 body.game-ludo.club-play .gm-settings-host { position: static; }
 body.game-ludo.club-play .gm-settings { left: 12px; right: 12px; width: auto; max-width: none; }
 body.game-ludo.club-play .gm-setting { flex: 1 1 100%; }
}