/*
 * FLOW Platform — WordAGE embed styles.
 *
 * The game itself is a self-contained HTML document served from
 * assets/wordage/wordage.html and hosted in an iframe. These rules only
 * style the frame and its wrapper on the host page — nothing here reaches
 * inside the game.
 *
 * HEIGHT — and why WordAGE is not Hive
 * ------------------------------------
 * Hive is a fixed-viewport app: its coach panel is pinned to the bottom of
 * the viewport, so an under-sized frame pushes the panel off screen. WordAGE
 * is a single column that flows — a clue, five or six rows, the buttons, and
 * after the check a reveal several screens long. It scrolls inside the frame
 * and nothing is pinned.
 *
 * So the frame is still viewport-fitted (a daily card wants to sit on one
 * screen with no page scroll around it), but the floor is set by the TALLEST
 * unfinished card rather than by a guess: a six-word card at the widest phone
 * text size measures about 620px, and 640 leaves a margin. Below that the
 * frame stops shrinking and the host page scrolls, which is the right failure
 * — a squeezed frame with its Check button cut off is not.
 */

.flow-wordage-root {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Matches the game's own --page so no seam shows at the frame edge. */
    background: #E7E9E4;
    /* Kill the inline-element descender gap under the iframe. */
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.flow-wordage-frame {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background: #E7E9E4;
    color-scheme: light;
    /* Baseline before the fitter runs. dvh tracks the mobile URL bar. */
    height: 100dvh;
    min-height: 640px;
}

@supports not (height: 100dvh) {
    .flow-wordage-frame { height: 100vh; }
}

/* Logged-in admins get the WP admin bar; it eats viewport height. The
   fitter handles this automatically, these are the no-JS fallbacks. */
body.admin-bar .flow-wordage-frame { height: calc(100dvh - 32px); }

@media screen and (max-width: 782px) {
    body.admin-bar .flow-wordage-frame { height: calc(100dvh - 46px); }
}

/* Shown in place of the game when the asset is missing from the build. */
.flow-wordage-fatal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    max-width: 560px;
    margin: 40px auto;
    padding: 16px 18px;
    border: 1px solid #D6D9D1;
    border-radius: 10px;
    background: #FCFBF8;
    color: #22262C;
}