/*
 * FLOW Platform — WordTrace embed styles.
 *
 * The game itself is a self-contained HTML document served from
 * assets/wordtrace/wordtrace.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: the game is a fixed-viewport app (its coach panel is
 * position:fixed), so the frame must be viewport-sized, NOT
 * content-sized. CSS gives it a full-viewport baseline; wordtrace-embed.js
 * then measures the real space left under the theme header / admin bar
 * and writes an exact pixel height inline. If JS is blocked, the CSS
 * baseline still produces a playable frame.
 */

.flow-wordtrace-root {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f5efe4;
    /* Kill the inline-element descender gap under the iframe. */
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

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

@supports not (height: 100dvh) {
    .flow-wordtrace-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-wordtrace-frame { height: calc(100dvh - 32px); }

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

/* Shown in place of the game when the asset is missing from the build. */
.flow-wordtrace-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 #d9c9a8;
    border-radius: 10px;
    background: #fffaf0;
    color: #6b4f18;
}