/* The second shared top menu: the one a play page wears.
*
* game-menu.css gives every page in the collection the same six links, the
* same type, the same gold for the page you are on and the same ☰ below
* 1281px. That part does not change here, and must not: a player who learns
* the menu on the lobby has learned it on the board too.
*
* What changes is the frame. A lobby, a rules page or a profile is a document,
* and a menu sitting in a panel of its own reads as part of that document's
* furniture. A play page is a table: everything around the board is competing
* for the player's attention with the game, and a framed box of links wins
* that competition without deserving to. Slave's table has never framed its
* menu — the links simply sit in the header beside the game's own buttons —
* and that is the look this file makes shared.
*
* So: on a play page the menu wears no border, no panel and no shadow.
*
* Load it AFTER site-menu.css, only on pages whose body carries
* data-menu-variant="play". scripts/sync-game-menus.mjs copies it next to
* site-menu.css in every game; edit this one.
*/
/* Whatever a game wraps its menu in, the wrapper stops being a box.
* game-menu.js marks every element between the nav and the header .gm-parent,
* so this reaches a game's own container without this file having to know its
* class name — which is what makes it a shared component rather than a patch
* for one game. */
body[data-menu-game][data-menu-variant="play"] .gm-parent {
/* Frame only. The padding stays: it is spacing, not a frame, and taking it
away pushed the controls flush against the header's edge — which on Ono at
320px was enough that clicking the ☰ scrolled the whole page 3px sideways
and took the board with it. */
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* The header the menu sits in wears no frame either.
*
* This is the part that makes a play page look like Slave's: there, the brand,
* the game's own buttons and the six links float straight on the table's
* artwork with nothing drawn behind them. A card with a border and a shadow
* would be a second frame inside the browser window, and on a board that is
* one frame too many — it reads as a strip of website pasted above the game.
*
* game-menu.js marks the header .gm-host, so a game does not have to name its
* own header class here. Spacing is left alone: a header still needs its
* padding and its height, it just stops being a panel.
*/
body[data-menu-game][data-menu-variant="play"] .gm-host {
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* The inline row above the breakpoint carries nothing behind it at all. */
@media (min-width: 1281px) {
body[data-menu-game][data-menu-variant="play"] :is(#siteNav, #site-nav, #tarot-page-menu)[data-game-menu] {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
}
/* Below it the menu becomes a ☰ and a dropdown, and neither is outlined here
* either — no border anywhere around a play page's menu, which is the whole
* instruction this file exists to carry.
*
* Their fills stay. A button a thumb has to find needs to look like a button,
* and a list of links floating over a live board needs to be readable against
* whatever the board happens to be showing underneath it. Taking the outline
* off is what was asked for; taking the surface off would make the menu hard
* to use, which was not. */
body[data-menu-game][data-menu-variant="play"] button.gm-toggle {
border: 0 !important;
}
@media (max-width: 1280px) {
body[data-menu-game][data-menu-variant="play"] :is(#siteNav, #site-nav, #tarot-page-menu)[data-game-menu] {
border: 0 !important;
}
}
/* The settings popup, the third piece a play page's chrome is made of.
*
* Copied from Slave's, rule for rule, because Slave's is the one the owner
* wants everywhere. Its measurements are in slave/assets/play-comfort.css
* (.comfort-settings) and slave/style.css (.seat-picker), and they are these:
*
* the panel absolute under the button, 12px below it, min(470px,100%)
* wide, 14px of padding, 12px between chips, a 14px radius and
* a soft drop shadow; it scrolls rather than growing past the
* screen
* a chip one per setting: a rounded box, 13px radius, a light rim and
* a highlight along its top edge, that GROWS to share the row
* with its neighbours rather than hugging its own contents
* its label small and letter-spaced, muted against the options
* an option a squarish key, 8px radius; the one in force is gold, sitting
* on a darker gold edge with a faint glow around it
*
* What is not copied is the palette: the panel is filled with this game's own
* --gm-base and the gold is the collection's, exactly as the ☰ dropdown above
* it, because a popup wearing another game's colour would look borrowed rather
* than shared. And the keys are 44px tall rather than Slave's 27, which is the
* size every other control in this collection is held to.
*
* The markup a game writes is only:
*
*
Label…
*
* with .active (and aria-pressed) on the option in force.
*/
/* The gear that opens the popup: the ☰ toggle's own look — same surface,
same line, 44px — so the two buttons that sit side by side in a header read
as one control set. Unlike ☰ it shows at every width, because the popup it
opens has no desktop row to fall back to. A game writes
…
and game-menu.js does the opening, closing and wording; the [data-gm-copy]
words (settings, level, easy, normal, hard, sound, on, off) follow the
page's language with the rest of the menu. */
body[data-menu-game][data-menu-variant="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(--gm-line); border-radius: 10px;
background: var(--gm-surface); color: var(--gm-ink); box-shadow: none;
font: 600 13px/1.3 GameMenu, sans-serif; letter-spacing: 0; text-transform: none;
white-space: nowrap; cursor: pointer; transform: none;
}
body[data-menu-game][data-menu-variant="play"] .gm-settings-toggle > span:first-child { font-size: 16px; line-height: 1; }
body[data-menu-game][data-menu-variant="play"] .gm-settings-toggle:hover { background: #ffffff14; }
body[data-menu-game][data-menu-variant="play"] .gm-settings-toggle[aria-expanded="true"] { border-color: var(--gm-gold); color: var(--gm-gold); }
body[data-menu-game][data-menu-variant="play"] .gm-settings-toggle:focus-visible { outline: 2px solid var(--gm-gold); outline-offset: 3px; }
/* On a narrow phone the word goes and the gear stays a 44px square. */
@media (max-width: 480px) {
body[data-menu-game][data-menu-variant="play"] .gm-settings-toggle { padding: 10px; }
body[data-menu-game][data-menu-variant="play"] .gm-settings-toggle > span:not(:first-child) { display: none; }
}
/* The popup hangs from the button that opens it, so a game wraps the two
together in .gm-settings-host and the panel anchors to that. Anchoring to
the header instead — which is what this did first — drops the panel at the
far end of the row, nowhere near the gear the player just pressed. */
body[data-menu-game][data-menu-variant="play"] .gm-settings-host { position: relative; }
body[data-menu-game][data-menu-variant="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;
/* Wide enough for its chips and no wider. Slave's panel is 470px because two
chips fill it; a panel with one chip that still measured 470 would be a
third empty. */
width: max-content; max-width: min(470px, calc(100vw - 24px));
/* The panel hangs below the header, so what it may be is the screen less the
header, the 12px gap and a little air. 105px was measured against a short
header and Thai Chess's is taller: its panel ran 37px off the bottom of a
390x844 screen. 160px clears the tallest header in the collection, and a
panel with more in it than that scrolls inside itself. */
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(--gm-base); box-shadow: 0 15px 35px #06112680;
}
body[data-menu-game][data-menu-variant="play"] .gm-settings[hidden] { display: none; }
body[data-menu-game][data-menu-variant="play"] .gm-setting {
display: flex; flex: 1 1 185px; 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[data-menu-game][data-menu-variant="play"] .gm-setting > span {
margin: 0 3px 0 1px; color: var(--gm-ink);
font: 700 12px/1.3 GameMenu, sans-serif !important; letter-spacing: .2px; white-space: nowrap;
}
/* 44px tall, not Slave's 27: every other control in the collection is
thumb-sized and the device checks hold it to that. */
body[data-menu-game][data-menu-variant="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;
/* !important because a game's own stylesheet sets a face for every button on
the page — .club-pages :is(button,input,select){font-family:Club} and its
like — and the panel is the component's, not the page's. Eleven games were
drawing these keys in their own display face. */
font: 700 14px/1.3 GameMenu, sans-serif !important; letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
body[data-menu-game][data-menu-variant="play"] .gm-setting button:hover:not(.active) { background: #ffffff2b; }
body[data-menu-game][data-menu-variant="play"] .gm-setting button.active {
color: #5b3452; background: var(--gm-gold); box-shadow: 0 2px 0 #b98a3f, 0 0 12px #f4ce8777;
}
body[data-menu-game][data-menu-variant="play"] .gm-setting button:focus-visible { outline: 2px solid var(--gm-gold); outline-offset: 3px; }
/* On a phone the gear is a 44px square somewhere in the middle of the header,
and a panel hanging from its edge would run off the screen. There the panel
leaves the button behind and spans the width instead, which is what Slave's
does and what a thumb wants. */
@media (max-width: 700px) {
/* The wrapper stops being the thing the panel hangs from, so the panel falls
back to the header and spans it. Nothing else changes: same offset below,
same panel. */
body[data-menu-game][data-menu-variant="play"] .gm-settings-host { position: static; }
body[data-menu-game][data-menu-variant="play"] .gm-settings {
left: 12px; right: 12px; width: auto; max-width: none;
}
body[data-menu-game][data-menu-variant="play"] .gm-setting { flex: 1 1 100%; }
}