/* Studio chrome stays outside each released sibling's React root. */
:root{--family-strip-height:44px;--family-header-height:calc(var(--family-strip-height) + env(safe-area-inset-top))}
.family-game-header{box-sizing:border-box;position:absolute;z-index:9;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--family-header-height);padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-left)) 0;background:var(--studio-paper);color:var(--studio-ink);font:600 12px/1.2 Archivo,system-ui,sans-serif;border-bottom:1px solid var(--studio-line)}
.family-game-header a{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;color:inherit;text-decoration:none}
.family-studio{font-weight:800;letter-spacing:-.025em}
.family-game-header a:focus-visible,.family-footer a:focus-visible{outline:3px solid currentColor;outline-offset:-3px}
body[data-family-game='wordpaths'] .masthead{padding-top:calc(var(--family-header-height) + 16px)}
body[data-family-game='wordclips'] .app-shell{padding-top:calc(38px + var(--family-header-height))}
.family-footer{box-sizing:border-box;max-width:1120px;margin:24px auto 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--studio-line);color:var(--studio-muted);font:12px/1.6 Archivo,system-ui,sans-serif;text-align:center}
.family-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px}
.family-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--studio-ink);font-weight:600;text-underline-offset:4px}
.family-footer p{max-width:680px;margin:4px auto 0}
@media(max-width:759px){
  body[data-family-game='wordclips'] .app-shell{padding-top:calc(12px + var(--family-header-height))}
  /* Retain every released viewport breakpoint, subtracting the studio strip only
     at the final board constraint rather than replacing the game's height rules. */
  body[data-family-game='wordclips'] .board-column{width:min(100%,calc(max(128px,var(--board-height) - var(--family-strip-height)) * 4 / var(--board-rows) + 32px))}
  body[data-family-game='wordclips'] .family-footer{padding-bottom:calc(142px + env(safe-area-inset-bottom))}
}
@media(max-width:350px){.family-game-header{padding-inline:12px;gap:8px;font-size:11px}}
@media(max-height:500px) and (orientation:landscape){body[data-family-game='wordclips'] .family-footer{padding-bottom:24px}}

/* Match native header branding without changing the released game's functional
   accent colors, board pieces, saved preferences or progress. */
body[data-family-game='wordpaths'] .wordmark .paths{color:var(--studio-wordmark-paths)}
body[data-family-game='wordclips'] .wordmark>span{color:var(--studio-wordmark-clips)}

.family-game-summary{max-width:680px;margin:4px auto 18px;text-align:left}
.family-game-summary h2{font:700 23px/1.25 Charis,Georgia,serif;letter-spacing:-.02em;color:var(--studio-ink);margin:0 0 12px}
.family-game-summary p{font-size:14px;line-height:1.7;margin:0 0 10px;max-width:none}
.family-game-summary a{display:inline;min-height:0}
