:root {
  color-scheme: dark;
  --ink: #f4eafa;
  --muted: #b69bc5;
  --page: #100619;
  --line: #ffffff24;
  --surface: #21102e;
  --ad-surface: #140a1d;
  --ad-line: #211727;
  --game-bg: #190728;
  --accent: #d2a6eb;
  --bottom-width: 320px;
  --bottom-height: 50px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { color: var(--ink); background: var(--page); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.page {
  height: 100vh;
  height: 100dvh;
  min-height: 240px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.masthead { min-height: 56px; display: flex; align-items: center; gap: 22px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 19px; letter-spacing: -.5px; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.app-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.tagline { color: var(--muted); font-size: 12px; letter-spacing: .2px; }
.maker-link { margin-left: auto; align-self: center; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); font-size: 12px; line-height: 1.35; text-decoration: none; text-align: center; }
.maker-link:hover { border-color: var(--line); background: var(--surface); }
.kofi-link { background: var(--surface); border-color: var(--line); font-weight: 600; }
.kofi-link:hover { border-color: var(--accent); }
.maker-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.play-layout { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 12px; gap: 14px; }
.game-window { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--game-bg); box-shadow: 0 8px 32px #0003; }
#letterical-game { display: block; width: 100%; height: 100%; border: 0; }
.rail { display: none; min-width: 0; align-items: center; justify-content: center; }
.placement { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.placement-label { color: var(--muted); font-size: 9px; line-height: 12px; letter-spacing: 1.5px; text-transform: uppercase; user-select: none; }
.banner-unit { background: var(--ad-surface); outline: 1px solid var(--ad-line); }
.rail .banner-unit { width: 160px; height: 600px; }
.sponsor-band { min-width: 0; display: flex; justify-content: center; align-items: center; padding: 2px 12px 10px; }
.bottom-placement .banner-unit { width: var(--bottom-width); height: var(--bottom-height); }
.support-note { width: min(960px, 100%); display: flex; align-items: center; justify-content: center; gap: 24px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.support-note[hidden], [hidden] { display: none !important; }
.support-copy { max-width: 740px; }
.support-copy p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.6; }
.goose-placeholder { flex: 0 0 132px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border-left: 1px solid var(--line); padding-left: 20px; color: var(--ink); font-size: 11px; }
.goose-placeholder small { color: var(--muted); font-size: 10px; }
.no-script { position: fixed; inset: 35% 10% auto; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; z-index: 10; text-align: center; }
@media (min-width: 768px) and (min-height: 650px) {
  :root { --bottom-width: 728px; --bottom-height: 90px; }
}
@media (min-width: 1200px) and (min-height: 840px) and (hover: hover) and (pointer: fine) {
  .play-layout { grid-template-columns: 172px minmax(0, 1fr) 172px; padding-inline: 20px; }
  .rail { display: flex; }
}
@media (max-width: 599px) {
  .masthead { min-height: 44px; padding: 6px 10px; gap: 8px; }
  .brand { font-size: 16px; gap: 8px; }
  .app-icon { width: 32px; height: 32px; }
  .tagline { display: none; }
  .maker-link { min-height: 32px; font-size: 10px; padding: 5px 8px; max-width: 190px; }
  .play-layout { padding: 4px 4px 8px; }
  .game-window { border-radius: 8px; }
  .sponsor-band { padding: 0 8px 8px; }
  .support-note { padding: 8px 10px; display: block; }
  .support-copy p { font-size: 11px; line-height: 1.45; }
  .goose-placeholder { border: 0; padding: 5px 0 0; min-height: 0; flex-direction: row; justify-content: flex-start; font-size: 10px; }
}
@media (max-width: 343px) { :root { --bottom-width: 300px; } }
/* A short landscape viewport needs its height for the puzzle and keyboard. */
@media (max-height: 499px) {
  .masthead { min-height: 34px; padding: 4px; }
  .brand { font-size: 15px; }
  .app-icon { width: 26px; height: 26px; }
  .tagline { display: none; }
  .play-layout { padding: 2px 4px 4px; }
  .sponsor-band { display: none; }
  .game-window { border-radius: 6px; }
}

@media (min-width: 600px) and (max-width: 799px) { .tagline { display: none; } }

.site-heading { margin: 0; font-size: inherit; line-height: 1; flex-shrink: 0; }

.letterical-bottom-ad { display: block; width: var(--bottom-width); height: var(--bottom-height); }

.letterical-left-ad, .letterical-right-ad { display: block; width: 160px; height: 600px; }

.header-actions { margin-left: auto; display: flex; align-self: center; gap: 14px; }
.header-actions .maker-link { margin-left: 0; display: flex; align-items: center; gap: 8px; }
.support-copy a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 1050px) { .tagline { display: none; } }
/* Keep a single header row and preserve the donation label for as long as it fits. */
.header-actions .maker-link { flex-shrink: 0; max-width: none; }
.header-actions .maker-link span { white-space: nowrap; }
@media (max-width: 699px) { .honkus-link span { display: none; } }
@media (max-width: 359px) { .kofi-link span { display: none; } }

.link-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
@media (max-width: 599px) { .link-icon { width: 22px; height: 22px; flex-basis: 22px; } .header-actions .maker-link { gap: 6px; } }

@media (max-width: 599px) { .header-actions { gap: 8px; } }