/* Shared portrait gate — "Turn your device sideways".
*
* For minigames that genuinely cannot be played in a narrow portrait window.
* Cryptic Trail shipped this first; Dead Man's Hand independently grew a
* weaker version (an inline notice inside the container, with the site header,
* back link and footer all still on screen) and Bonejack copied that. Rather
* than keep three treatments, this is the one implementation and all three
* use it.
*
* CSS only — there is no JavaScript and nothing to initialise. Wiring a game
* is one stylesheet link plus one block of markup as the FIRST child of
* , before .wrapper:
*
*
*
*
*
* The gate hides the whole page and replaces it, which is the point: a notice
* that leaves the header and footer in place reads as a page that is merely
* missing its game, not as an instruction.
*
* Do NOT use this for a game that is genuinely playable in portrait. Blocking
* a playable layout is worse than a cramped one.
*
* Above the breakpoint, and in any landscape orientation, the block is display
* :none and costs nothing. `hidden` is not used, so no [hidden] guard applies.
*/
.portrait-gate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
/* Replace the page rather than sit inside it. */
body > .wrapper { display: none; }
.portrait-gate {
position: fixed;
z-index: 9999;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
color: #dfffff;
background: #030708;
text-align: center;
}
.portrait-gate > div {
max-width: 390px;
padding: 28px;
border: 1px solid #00cccc;
background: #071012;
}
.portrait-gate span {
display: block;
color: #78ffff;
font-size: 3rem;
}
.portrait-gate strong {
display: block;
margin: 10px 0;
font-family: 'Cinzel', Georgia, serif;
font-size: 1.2rem;
}
.portrait-gate p {
color: #9eb3b4;
font-size: 0.84rem;
line-height: 1.6;
}
}