/* Scope the shared UI to .ag-game; artwork keeps its own identity. */
.ag-game{--ag-bg:#fbf8f0;--ag-panel:#fff;--ag-ink:#233b38;--ag-muted:#4c625e;--ag-primary:#146e5c;--ag-on-primary:#fff;--ag-border:#bdc9c2;--ag-focus:#6841c4;--ag-danger:#a12135;--ag-radius:12px;color-scheme:light;color:var(--ag-ink);background:var(--ag-bg);font:16px/1.5 system-ui,sans-serif;min-height:100%;padding:clamp(12px,3vw,32px);box-sizing:border-box}
.ag-game[data-ag-theme=dark]{--ag-bg:#151b30;--ag-panel:#22243e;--ag-ink:#f2dfb3;--ag-muted:#c0c3d2;--ag-primary:#edbb67;--ag-on-primary:#151b30;--ag-border:#7e8299;--ag-focus:#c5acff;--ag-danger:#ffb3bd;color-scheme:dark}
.ag-game *{box-sizing:border-box}.ag-shell{max-width:1180px;margin-inline:auto}.ag-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.ag-title{font:750 clamp(1.3rem,3vw,2rem)/1.2 system-ui,sans-serif;margin:0}.ag-panel{background:var(--ag-panel);border:1px solid var(--ag-border);border-radius:20px;padding:clamp(16px,3vw,24px);margin-block:20px;box-shadow:0 6px 20px #0000000a}.ag-actions{display:flex;flex-wrap:wrap;gap:12px}.ag-button,.ag-game select{font:inherit;min-height:44px;border:1px solid var(--ag-border);border-radius:var(--ag-radius);padding:10px 16px;color:var(--ag-ink);background:var(--ag-panel)}.ag-button{cursor:pointer;touch-action:manipulation}.ag-button--primary{background:var(--ag-primary);border-color:var(--ag-primary);color:var(--ag-on-primary);font-weight:700}.ag-button--danger{color:var(--ag-danger);border-color:currentColor}.ag-button--quiet{background:transparent}.ag-button--comic{border:3px solid currentColor;box-shadow:3px 3px 0 var(--ag-ink)}.ag-button:hover{filter:brightness(.94)}.ag-button:active,.ag-pressed{transform:translateY(1px)}.ag-button:disabled{opacity:.6;cursor:default}.ag-game :focus-visible{outline:3px solid var(--ag-focus);outline-offset:3px}.ag-game input[type=checkbox]{width:24px;height:24px;accent-color:var(--ag-primary)}.ag-field{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;margin-block:12px}.ag-field select{max-width:60%;min-width:0}.ag-status{font-size:.875rem;color:var(--ag-muted)}.ag-dialog{color:var(--ag-ink);background:var(--ag-panel);border:2px solid var(--ag-border);border-radius:20px;width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:24px;overflow-y:auto}.ag-dialog::backdrop{background:#101729b8}.ag-dialog .ag-topbar{margin-bottom:20px}.ag-fullscreen,.ag-game:fullscreen{position:fixed;inset:0;z-index:10000;width:100%;height:100dvh;max-width:none;overflow:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overscroll-behavior:contain}.ag-touch{touch-action:none;user-select:none}.ag-game[data-ag-motion=reduced] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ag-game[data-ag-contrast=high]{--ag-border:var(--ag-ink);--ag-muted:var(--ag-ink)}
@media(prefers-reduced-motion:reduce){.ag-game *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-contrast:more){.ag-game{--ag-border:var(--ag-ink);--ag-muted:var(--ag-ink)}}
@media(forced-colors:active){.ag-button,.ag-panel,.ag-dialog{border:2px solid ButtonText}.ag-game :focus-visible{outline-color:Highlight}}
@media(max-width:400px){.ag-dialog{padding:16px}.ag-field{gap:8px}.ag-game select{padding:8px}.ag-title{font-size:1.3rem}}

.ag-settings-group{min-width:0;margin:18px 0;padding:12px 16px;border:1px solid var(--ag-border);border-radius:var(--ag-radius)}
.ag-settings-group legend{padding:0 8px;font-weight:700;font-size:.9rem}.ag-settings-group .ag-field{margin-block:6px}
.ag-dialog-header{position:sticky;top:-24px;background:var(--ag-panel);padding-block:12px;z-index:1}
.ag-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.ag-dialog .ag-status{line-height:1.5;max-width:60ch}.ag-dialog [hidden]{display:none!important}
.ag-reset-confirm{padding:12px;border:1px solid var(--ag-danger);border-radius:var(--ag-radius)}.ag-reset-confirm .ag-button{margin:4px}
.ag-field input:disabled{opacity:.5}.ag-field:has(input:disabled){color:var(--ag-muted)}
@media(max-width:420px){.ag-dialog{padding:16px}.ag-dialog-header{top:-16px}.ag-settings-group{padding:8px 12px}.ag-field{gap:10px}.ag-field select{max-width:58%}.ag-dialog-footer>.ag-button{flex:1}}

/* Equal columns are a layout contract, independent of text length or selection. */
.ag-game{--ag-grid-gap:16px}
.ag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ag-grid-gap);align-items:stretch}
.ag-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ag-game .ag-equal-items{gap:var(--ag-grid-gap);align-items:stretch}
.ag-game .ag-equal-items>*{box-sizing:border-box;min-width:0;width:100%;max-width:none;margin:0;align-self:stretch;transform:none!important;scale:none!important;rotate:none!important;translate:none!important}
.ag-game .ag-panel,.ag-game .ag-settings-group{box-sizing:border-box;width:100%;min-width:0}
.ag-game .ag-field{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--ag-grid-gap);width:100%;min-width:0}
.ag-game .ag-field>span{min-width:0;overflow-wrap:anywhere}
.ag-game .ag-field select,.ag-game .ag-field input:not([type=checkbox]){width:100%;max-width:none;min-width:0}
.ag-game .ag-field input[type=checkbox]{justify-self:end}
.ag-game .ag-dialog-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ag-grid-gap)}
.ag-game .ag-dialog-footer>.ag-button{width:100%;min-width:0}
.ag-game .ag-board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:1000px;gap:var(--ag-grid-gap)}
@media(max-width:700px){.ag-grid,.ag-grid--3,.ag-game .ag-board-grid{grid-template-columns:minmax(0,1fr)}}

/* A single readable type scale for shared panels, controls and feedback. */
.ag-game{--ag-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ag-type-body:1rem;--ag-type-label:.9375rem;--ag-type-caption:.875rem;--ag-type-title:clamp(1.375rem,2.2vw,1.75rem);font-family:var(--ag-font);font-size:var(--ag-type-body);line-height:1.5}
.ag-game .ag-title{font-family:var(--ag-font);font-size:var(--ag-type-title);font-weight:700;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.ag-game .ag-dialog{font-family:var(--ag-font);font-size:var(--ag-type-body);line-height:1.5}
.ag-game .ag-settings-group legend{font:650 var(--ag-type-label)/1.4 var(--ag-font);letter-spacing:.01em}
.ag-game .ag-field{font:500 var(--ag-type-label)/1.45 var(--ag-font)}
.ag-game .ag-dialog :is(select,input,button){font:500 var(--ag-type-body)/1.4 var(--ag-font);letter-spacing:normal;text-transform:none}
.ag-game .ag-status{font:400 var(--ag-type-caption)/1.5 var(--ag-font);text-wrap:pretty}
.ag-game .ag-kit-controls .ag-button{font:600 var(--ag-type-caption)/1.4 var(--ag-font)}
.ag-game .ag-equal-items :is(.card,.case-entry) h3{font:650 1.125rem/1.35 var(--ag-font)}
.ag-game .ag-equal-items :is(.card,.case-entry) p{font:400 var(--ag-type-caption)/1.5 var(--ag-font)}
.ag-game .world strong,.ag-game .level-card strong{font:650 var(--ag-type-body)/1.35 var(--ag-font);white-space:normal;overflow-wrap:anywhere}
.ag-game .world small,.ag-game .level-card small{font:400 var(--ag-type-caption)/1.5 var(--ag-font);white-space:normal;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.ag-game[data-ag-motion=system] :is(.ag-button,.ag-dialog){animation:none;transition:none;scroll-behavior:auto}}