/* Attance's word studio. This sheet is loaded only by the dedicated-site shell. */
@font-face {
    font-family: AttanceDisplay;
    src: url('/fonts/games/fraunces-latin-5d283517432688cbc312a7a954516cce.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: AttanceWords;
    src: url('/fonts/games/cp-regular-2fed1725e4fba84fd3d0d701f577be18.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: AttanceWords;
    src: url('/fonts/games/cp-semibold-8ca08dd9c8d7bc46890658f8f563307c.woff2') format('woff2');
    font-weight: 600 800;
    font-display: swap;
}
body[data-games-site=attance] {
    --attance-canvas: #101b18;
    --attance-surface: #192f26;
    --attance-raised: #20372f;
    --attance-ink: #f2f2e8;
    --attance-muted: #b4c4ba;
    --attance-action: #8fd6b1;
    --attance-line: #365046;
    --attance-control: #668b76;
    --attance-selected: #244d3b;
    --attance-primary: #b9e8ca;
    --attance-primary-ink: #10251b;
    --attance-primary-hover: #d2f2dd;
    --attance-focus: #efb276;
    --attance-success: #b9e8ca;
    --attance-error: #ffd2c7;
    --attance-error-surface: #4b2828;
    --attance-font-display: AttanceDisplay, Georgia, serif;
    --attance-font-ui: AttanceWords, system-ui, sans-serif;
    --attance-radius-control: 9px;
    --attance-radius-panel: 16px;
    --attance-scheme: dark;
    --bs-body-bg: var(--attance-canvas);
    --bs-body-bg-rgb: 16, 27, 24;
    --bs-body-color: var(--attance-ink);
    --bs-body-color-rgb: 242, 242, 232;
    --bs-heading-color: var(--attance-ink);
    --bs-emphasis-color: var(--attance-ink);
    --bs-emphasis-color-rgb: 242, 242, 232;
    --bs-secondary-color: var(--attance-muted);
    --bs-secondary-color-rgb: 180, 196, 186;
    --bs-tertiary-color: var(--attance-muted);
    --bs-secondary-bg: var(--attance-surface);
    --bs-secondary-bg-rgb: 25, 47, 38;
    --bs-tertiary-bg: var(--attance-raised);
    --bs-tertiary-bg-rgb: 32, 55, 47;
    --bs-border-color: var(--attance-line);
    --bs-link-color: var(--attance-action);
    --bs-link-color-rgb: 143, 214, 177;
    --bs-link-hover-color: var(--attance-primary-hover);
    --bs-link-hover-color-rgb: 210, 242, 221;
    --bs-primary: var(--attance-primary);
    --bs-primary-rgb: 185, 232, 202;
    background: var(--attance-canvas);
    color: var(--attance-ink);
    color-scheme: var(--attance-scheme);
    font-family: var(--attance-font-ui);
    scrollbar-color: var(--attance-control) var(--attance-canvas);
    caret-color: var(--attance-action);
}
html[data-bs-theme=light] body[data-games-site=attance] {
    --attance-canvas: #f6f3ea;
    --attance-surface: #fffef8;
    --attance-raised: #eceee3;
    --attance-ink: #172b24;
    --attance-muted: #52655b;
    --attance-action: #245a43;
    --attance-line: #d5d9cd;
    --attance-control: #748777;
    --attance-selected: #e0eadc;
    --attance-primary: #163d30;
    --attance-primary-ink: #f7f8ee;
    --attance-primary-hover: #275844;
    --attance-focus: #91421d;
    --attance-success: #21613d;
    --attance-error: #922f23;
    --attance-error-surface: #ffebe4;
    --attance-scheme: light;
    --bs-body-bg-rgb: 246, 243, 234;
    --bs-body-color-rgb: 23, 43, 36;
    --bs-emphasis-color-rgb: 23, 43, 36;
    --bs-secondary-color-rgb: 82, 101, 91;
    --bs-secondary-bg-rgb: 255, 254, 248;
    --bs-tertiary-bg-rgb: 236, 238, 227;
    --bs-link-color-rgb: 36, 90, 67;
    --bs-link-hover-color-rgb: 39, 88, 68;
    --bs-primary-rgb: 22, 61, 48;
}
body[data-games-site=attance] ::selection {
    color: var(--attance-primary-ink);
    background: var(--attance-primary);
}
body[data-games-site=attance] :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--attance-focus);
    outline-offset: 4px;
}
body[data-games-site=attance] :is(#navbar, #footer) {
    background: var(--attance-canvas);
    border-color: var(--attance-line) !important;
}
body[data-games-site=attance] #navbar {
    --bs-navbar-color: var(--attance-muted);
    --bs-navbar-hover-color: var(--attance-primary-hover);
    --bs-navbar-brand-color: var(--attance-ink);
    --bs-navbar-brand-hover-color: var(--attance-primary-hover);
}
body[data-games-site=attance] #navbar .nav-link { color: var(--attance-muted); }
body[data-games-site=attance] #navbar .nav-link:hover { color: var(--attance-primary-hover); }
body[data-games-site=attance] #navbar > .container {
    max-width: 1280px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .35rem 2rem;
    padding-inline: 2rem;
}
body[data-games-site=attance] #navbar .navbar-brand {
    font-family: var(--attance-font-display);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: -.025em;
    line-height: 1.2;
    margin: 0;
}
body[data-games-site=attance] .attance-shell-links,
body[data-games-site=attance] .attance-shell-tools {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}
body[data-games-site=attance] .attance-shell-tools { margin-left: auto; }
body[data-games-site=attance] #navbar .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    padding: .4rem 0;
    white-space: normal;
    text-underline-offset: .2em;
    font-size: .95rem;
}
body[data-games-site=attance] .attance-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    border: 1px solid var(--attance-control);
    border-radius: var(--attance-radius-control);
    padding: .45rem .7rem;
    color: var(--attance-ink);
    background: var(--attance-surface);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
body[data-games-site=attance] .attance-theme-toggle[hidden] { display: none; }
body[data-games-site=attance] .attance-theme-toggle:hover { background: var(--attance-raised); }
body[data-games-site=attance] .attance-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
body[data-games-site=attance] .attance-theme-toggle svg path { fill: currentColor; stroke: none; }
@media (max-width: 760px) {
    body[data-games-site=attance] #navbar > .container { padding-inline: 1rem; gap: .35rem 1rem; }
    body[data-games-site=attance] .attance-shell-links { order: 3; flex-basis: 100%; gap: 1.5rem; }
    body[data-games-site=attance] .attance-shell-tools { gap: .8rem; }
    body[data-games-site=attance] #navbar .navbar-brand { font-size: 1.75rem; }
    body[data-games-site=attance] #navbar .nav-link { font-size: .9rem; }
}
@media (max-width: 370px) {
    body[data-games-site=attance] #navbar > .container { padding-inline: .75rem; }
    body[data-games-site=attance] .attance-shell-tools { gap: .6rem; }
    body[data-games-site=attance] .attance-theme-toggle { padding-inline: .5rem; }
}
body[data-games-site=attance] #footer a { color: var(--attance-action); }
body[data-games-site=attance] #footer a:hover { color: var(--attance-primary-hover); }
body[data-games-site=attance] .btn-primary {
    --bs-btn-bg: var(--attance-primary);
    --bs-btn-color: var(--attance-primary-ink);
    --bs-btn-border-color: var(--attance-primary);
    --bs-btn-hover-bg: var(--attance-primary-hover);
    --bs-btn-hover-color: var(--attance-primary-ink);
    --bs-btn-hover-border-color: var(--attance-primary-hover);
    --bs-btn-active-bg: var(--attance-primary-hover);
    --bs-btn-active-color: var(--attance-primary-ink);
    --bs-btn-active-border-color: var(--attance-primary-hover);
}
body[data-games-site=attance] .btn-outline-primary {
    --bs-btn-color: var(--attance-action);
    --bs-btn-border-color: var(--attance-control);
    --bs-btn-hover-bg: var(--attance-selected);
    --bs-btn-hover-color: var(--attance-ink);
    --bs-btn-hover-border-color: var(--attance-action);
    --bs-btn-active-bg: var(--attance-selected);
    --bs-btn-active-color: var(--attance-ink);
    --bs-btn-active-border-color: var(--attance-action);
}

/* The shared Wortlumen setup, saved results and original word-network edition. */
body[data-games-site=attance] .compound-game {
    --ink: var(--attance-ink);
    --muted: var(--attance-muted);
    --accent: var(--attance-action);
    --line: var(--attance-line);
    --ww-paper: var(--attance-surface);
    --ww-open: var(--attance-focus);
    scrollbar-color: var(--attance-control) var(--attance-surface);
}
body[data-games-site=attance] .compound-game :is(input, select, textarea) {
    background: var(--attance-surface);
    color: var(--attance-ink);
    border-color: var(--attance-control);
}
body[data-games-site=attance] .compound-game :is(input, textarea)::placeholder { color: var(--attance-muted); opacity: 1; }
body[data-games-site=attance] .compound-game input[readonly] { background: var(--attance-raised); }
body[data-games-site=attance] .compound-game :where(button, .action-link) {
    background: var(--attance-primary);
    color: var(--attance-primary-ink);
}
body[data-games-site=attance] .compound-game :where(button, .action-link):hover {
    background: var(--attance-primary-hover);
}
body[data-games-site=attance] .compound-game :is(button.secondary, .action-link.secondary) {
    background: var(--attance-surface);
    color: var(--attance-action);
    border-color: var(--attance-control);
}
body[data-games-site=attance] .compound-game :is(button.secondary, .action-link.secondary):hover {
    background: var(--attance-raised);
}
body[data-games-site=attance] .compound-game button[aria-pressed=true] {
    background: var(--attance-selected);
    color: var(--attance-ink);
    border-color: var(--attance-action);
}
body[data-games-site=attance] .compound-game .reveal { background: var(--attance-raised); }
body[data-games-site=attance] .compound-game #game-status { color: var(--attance-focus); }
body[data-games-site=attance] .compound-game .board { scrollbar-color: var(--attance-control) var(--attance-surface); }
body[data-games-site=attance] .compound-game .board svg { background: var(--attance-surface); }
body[data-games-site=attance] .compound-game .map-node rect { fill: var(--attance-raised); stroke: var(--attance-control); }
body[data-games-site=attance] .compound-game .map-edge line { stroke: var(--attance-control); }
body[data-games-site=attance] .compound-game .map-edge.invalid line { stroke: var(--attance-focus); }
body[data-games-site=attance] .compound-game .edge-label { fill: var(--attance-muted); stroke: var(--attance-surface); }
body[data-games-site=attance] .compound-game .map-face { fill: var(--attance-raised); }
body[data-games-site=attance] .compound-game .map-face.claimed { fill: var(--attance-selected); }
body[data-games-site=attance] .compound-game .ww-cell,
body[data-games-site=attance] .compound-game .ww-cell:is(:hover, [aria-pressed=true]) {
    background: transparent;
    color: var(--attance-ink);
}
body[data-games-site=attance] .ww-hex polygon { fill: var(--attance-raised); stroke: var(--attance-control); }
body[data-games-site=attance] .compound-game .ww-locked .ww-hex polygon,
body[data-games-site=attance] .compound-game button.ww-cell:hover .ww-hex polygon,
body[data-games-site=attance] .compound-game .ww-cell[aria-pressed=true] .ww-hex polygon {
    fill: var(--attance-selected);
    stroke: var(--attance-action);
}
body[data-games-site=attance] .compound-game .ww-text-button,
body[data-games-site=attance] .compound-game .ww-text-button:hover {
    background: transparent;
    color: var(--attance-action);
}
body[data-games-site=attance] .ww-success,
body[data-games-site=attance] .compound-game[data-game=wortwelten] #room-tools #copy-feedback {
    color: var(--attance-action);
}

/* The linked full catalogue keeps the same site palette. */
body[data-games-site=attance] .games-home {
    --home-ink: var(--attance-ink);
    --home-muted: var(--attance-muted);
    --home-rule: var(--attance-line);
    --home-accent: var(--attance-action);
    --home-hover: var(--attance-primary-hover);
    scrollbar-color: var(--attance-control) var(--attance-surface);
}
body[data-games-site=attance] .games-home :is(input, select, button),
body[data-games-site=attance] .games-home__skip:focus {
    background: var(--attance-surface);
    border-color: var(--attance-control);
}
body[data-games-site=attance] .games-home button:hover:not(:disabled),
body[data-games-site=attance] .games-home__headline-intro { background: var(--attance-raised); }
body[data-games-site=attance] .games-home__headline-intro h2 { color: var(--attance-ink); }
body[data-games-site=attance] .games-home__headline-intro p,
body[data-games-site=attance] .games-home__index .games-home__new-label { color: var(--attance-muted); }
body[data-games-site=attance] .kgard-public-hub,
body[data-games-site=attance] .kgard-public-hub__scorecard strong,
body[data-games-site=attance] .kgard-public-mini-stat strong,
body[data-games-site=attance] .kgard-public-primer__rule { color: var(--attance-ink); }
body[data-games-site=attance] :is(.kgard-public-hub__lede, .kgard-public-game-card__label,
    .kgard-public-game-card__rule, .kgard-public-game-card__hook, .kgard-public-primer__copy),
body[data-games-site=attance] .kgard-public-benchmarks p { color: var(--attance-muted); }
body[data-games-site=attance] :is(.kgard-public-game-card, .kgard-public-benchmarks, .kgard-public-primer,
    .kgard-public-mini-stat),
body[data-games-site=attance] .kgard-public-hub__scorecard span,
body[data-games-site=attance] .kgard-public-game-card__facts span,
body[data-games-site=attance] .kgard-public-game-shell .badge {
    background: var(--attance-surface);
    color: var(--attance-muted);
    border-color: var(--attance-line);
}
body[data-games-site=attance] .kgard-public-hub__header { border-color: var(--attance-line); }
body[data-games-site=attance] .kgard-public-game-card__icon {
    background: var(--attance-selected);
    color: var(--attance-action);
    border-color: var(--attance-control);
}
body[data-games-site=attance] .kgard-public-kicker { color: var(--attance-focus); }

/* Display type belongs to the entrance and page titles; playable words stay in the UI face. */
body[data-games-site=attance] :is(.attance-intro h1, .attance-section-heading h2, .attance-how h2,
    .game-heading h1, .games-home__header h1) {
    font-family: var(--attance-font-display);
    font-weight: 550;
    letter-spacing: -.025em;
    text-wrap: balance;
}
body[data-games-site=attance] :is(button, input, select, textarea) { accent-color: var(--attance-primary); }
body[data-games-site=attance] .attance-home { color-scheme: var(--attance-scheme); }
body[data-games-site=attance] .compound-game :is(button, .action-link, input:not([type=radio]):not([type=checkbox]), select) {
    min-height: 44px;
    border-radius: var(--attance-radius-control);
}
body[data-games-site=attance] .compound-game :is(button, .action-link):disabled {
    opacity: .55;
    cursor: not-allowed;
}
body[data-games-site=attance] .compound-game :is(input, select, textarea)[aria-invalid=true] {
    border-color: var(--attance-error);
    outline: 1px solid var(--attance-error);
}
body[data-games-site=attance] .compound-game #game-status {
    min-height: 1.6em;
    margin-block: .8rem;
}
body[data-games-site=attance] :is(.status-line, .score, output) { font-variant-numeric: tabular-nums; }
/* The existing atlas boards keep their forest material inside either surrounding appearance. */
body[data-games-site=attance] .build-atlas-network {
    --attance-ink: #f2f2e8;
    --attance-muted: #b4c4ba;
    --attance-raised: #20392e;
    --attance-control: #63826e;
    --attance-selected: #304b3b;
    --attance-action: #b9e8ca;
}
@media (prefers-reduced-motion: reduce) {
    body[data-games-site=attance] .compound-game .reveal { animation: none; }
}