/* Shared Studio palette. Game files own board geometry and rules. */
:root{color-scheme:light;--paper:#f6f5f0;--ink:#233c35;--muted:#78847e;--green:#1d6256;--line:#d9ddd5;--wash:#e9eee7;--selected:#c8e0d4;--error:#a34035;--surface:#fffefb;--surface-bright:#fff;--on-accent:#fff;--accent-fill:#1d6256;--accent-fill-hover:#174e44;--border-strong:#bacabd;--border-soft:#cbd4c8;--mini-line:#a6b5a4;--text-soft:#66766b;--text-strong:#526356;--text-faint:#8f9890;--note:#688176;--sage:#739c75;--focus:#b88e42;--selected-ring:#72a38e;--cell-line:#d6dcd4;--related:#f0f3ed;--same:#e0eade;--conflict-bg:#fbe7e0;--conflict-ring:#c67e69;--diagram-bg:#f6f7f2;--card:#eaece3;--pad-border:#dfe3d9;--tip-symbol:#9c956d;--warning-bg:#f0e5ca;--warning-ink:#6f5824;--hard-frame:#252a2d}
:root[data-theme=dark]{color-scheme:dark;--paper:#151b19;--ink:#e2e8e3;--muted:#94a199;--green:#7ec4ae;--line:#2f3a36;--wash:#22302b;--selected:#2d5447;--error:#f08b7d;--surface:#1c2421;--surface-bright:#24302b;--on-accent:#fff;--accent-fill:#2a7a69;--accent-fill-hover:#33907c;--border-strong:#44564e;--border-soft:#3a4943;--mini-line:#4d5e56;--text-soft:#a5b2aa;--text-strong:#bac6be;--text-faint:#7f8c85;--note:#98b8a8;--sage:#8fb891;--focus:#d8ab5c;--selected-ring:#5fa58c;--cell-line:#2d3834;--related:#1f2a26;--same:#27372f;--conflict-bg:#4a2621;--conflict-ring:#c67e69;--diagram-bg:#19211e;--card:#1f2925;--pad-border:#34423d;--tip-symbol:#c4b97f;--warning-bg:#3d331c;--warning-ink:#e8cf90;--hard-frame:var(--ink)}
:root{--accent:var(--green);--soft:var(--wash);--studio-radius:5px;--studio-control:44px}

html { background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
body { background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
[hidden] { display:none!important; }
button,select,input { font:inherit; color:inherit; }
button,a { touch-action:manipulation; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible {
 outline:3px solid var(--focus); outline-offset:3px;
}
button:disabled { opacity:.36; cursor:default; }
body:not([data-game=sudoku]) button:not(.cell):not(.studio-menu-item) { min-height:44px; }
body :is(.cell,.edge-hit):focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
body :is(.eyebrow,.dialog-eyebrow,.studio-eyebrow) {
 color:var(--muted); font:700 10px/1.5 Arial,Helvetica,sans-serif; letter-spacing:1.8px;
}
body :is(.primary,.secondary,.new,.new-btn,.next,.dialog-action,.tool-btn,.hint-btn,.icon-btn,.draw-mode,.difficulty-option,.build-button,.undo-button) {
 border-radius:var(--studio-radius); font-weight:400;
}
body :is(.primary,.next,.new,.dialog-action) {
 background:var(--accent-fill); color:var(--on-accent); border:1px solid var(--accent-fill);
 min-height:var(--studio-control); font-size:13px;
}
body :is(.primary,.next,.new,.dialog-action):hover { background:var(--accent-fill-hover); }
body :is(.secondary,.new-btn,.tool-btn,.hint-btn,.icon-btn,.undo-button) {
 background:transparent; color:var(--green); border-color:var(--border-soft); min-height:var(--studio-control);
}
body button:not(.cell):active { transform:none; }
body :is(.icon-btn,.tool-btn) { min-width:var(--studio-control); }
body :is(.mode-switch,.draw-modes,#tools,.difficulty) { background:var(--wash); border-color:var(--line); border-radius:6px; }
body :is(.mode-switch button,#tools button,.draw-mode,.difficulty-option):is([aria-pressed=true],.active),
body .difficulty-option:has(input:checked) {
 color:var(--green); background:var(--selected); border-color:var(--selected-ring); box-shadow:none;
}
body :is(.mode-switch button,#tools button,.draw-mode,.difficulty-option) { color:var(--text-soft); }
body :is(.mode-switch button,#tools button,.draw-mode) { min-height:var(--studio-control); }
body svg:not(#board):not(.unit-art) { flex-shrink:0; }
body :is(.studio-masthead,.studio-menu,.studio-icon-button,.studio-close) svg,
body button.studio-action-icon svg {
 width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round;
}
body button.studio-action-icon { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
body .studio-action-icon .studio-icon-label { font-size:11px; }

/* The same header and drawer are generated for every game except Sudoku,
   which already has these components and shares this palette. */
body header.studio-masthead {
 display:flex; align-items:center; justify-content:space-between; gap:12px;
 min-height:80px; height:auto; margin:0 0 22px; padding:0;
 border-bottom:1px solid var(--line); background:var(--paper); color:var(--ink);
}
body .studio-brand {
 display:flex; align-items:center; gap:10px; min-width:0; min-height:44px;
 border:0; border-radius:8px; background:transparent; padding:4px 0;
 font:700 25px/1 Arial,Helvetica,sans-serif; letter-spacing:-1.2px; color:var(--ink); white-space:nowrap;
}
body .studio-brand img { width:34px; height:34px; border-radius:8px; }
body .studio-brand small { font-size:10px; letter-spacing:2.3px; font-weight:400; margin:8px 0 0 2px; }
body .studio-brand:hover img { box-shadow:0 0 0 3px var(--wash); }
.studio-tagline { font:italic 16px Georgia,serif; color:var(--muted); margin-left:auto; }
.studio-header-actions { display:flex; align-items:center; gap:8px; }
body .studio-header-action {
 display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
 border:1px solid var(--border-strong); border-radius:5px; padding:9px 12px;
 background:transparent; color:var(--ink); font-size:12px; white-space:nowrap;
}
body dialog.studio-menu {
 position:fixed; inset:0 auto 0 0; margin:0; width:min(320px,86vw); max-width:none;
 height:100dvh; max-height:none; border:0; border-right:1px solid var(--line);
 border-radius:0 14px 14px 0; padding:calc(18px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px));
 overflow:auto; background:var(--paper); color:var(--ink);
}
.studio-menu-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.studio-menu-head img { border-radius:7px; }
.studio-menu-head>span { font:20px Georgia,serif; }
body .studio-close {
 display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px;
 padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper);
 color:var(--ink); font:26px/1 Arial,Helvetica,sans-serif;
}
.studio-menu-head .studio-close { margin-left:auto; }
body .studio-menu-list { display:grid; gap:4px; padding:6px 0 16px; margin:0; border-block:1px solid var(--line); }
body .studio-menu-item {
 display:flex; align-items:center; gap:14px; width:100%; min-height:48px; padding:10px 12px;
 border:0; border-radius:7px; background:transparent; color:var(--ink); font-size:15px; text-align:left;
}
body .studio-menu-item:hover,body .studio-close:hover { background:var(--wash); }
.studio-menu-item svg { color:var(--green); }
.studio-switch { position:relative; margin-left:auto; width:38px; height:22px; border-radius:11px; background:var(--border-soft); flex-shrink:0; }
.studio-switch::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--surface-bright); }
[aria-checked=true] .studio-switch { background:var(--accent-fill); }
[aria-checked=true] .studio-switch::after { transform:translateX(16px); }
.studio-credits { padding-top:18px; font-size:13px; line-height:1.7; color:var(--text-soft); }
.studio-credits p { margin:6px 0 18px; }
.studio-credits a { color:var(--green); overflow-wrap:anywhere; text-underline-offset:3px; }

/* Shared modal surface and close control. Native dialogs retain their own state. */
body:not([data-game=sudoku]) dialog:not(.studio-menu) {
 border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink);
 width:min(470px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px);
 padding:0; overflow:hidden; box-shadow:0 20px 100px #122e3440;
}
body dialog::backdrop { background:#15352d66; backdrop-filter:blur(3px); }
.studio-dialog-scroll { max-height:calc(100dvh - 34px); overflow:auto; overscroll-behavior:contain; padding:52px 28px 28px; }
body dialog>.studio-close { position:absolute; top:8px; right:8px; z-index:2; }
body dialog .dialog-top { display:block; margin:0 0 8px; }
body dialog h2 { color:var(--ink); font:normal 32px/1.17 Georgia,serif; letter-spacing:-.8px; margin:12px 0 18px; }
body dialog :is(p,li,label) { color:var(--text-soft); font-size:14px; line-height:1.7; }
body dialog a { color:var(--green); }
body dialog :is(.tip,.example,.stat) { background:var(--wash); border-radius:5px; color:var(--ink); }
body dialog :is(.stat strong,.level-stats strong) { color:var(--green); font-family:Georgia,serif; font-weight:400; }
body dialog :is(.stat span,.level-stats small) { color:var(--muted); }
body dialog .level-stats>div { border-color:var(--line); border-radius:5px; }
body dialog :is(.primary,.dialog-action) { border-radius:5px; font:13px Arial,Helvetica,sans-serif; }

/* Board shapes and meaningful region/faction colors remain game-specific. */
body:not([data-game=sudoku]) :is(.board,.board-wrap):not(.map-panel .board-wrap) { box-shadow:none; }
body[data-game=loopline] .board-wrap { background:var(--surface); border:2px solid var(--ink); border-radius:3px; }
body[data-game=loopline] :is(.clue,.vertex) { fill:var(--ink); }
body[data-game=loopline] .edge-base { stroke:var(--cell-line); }
body[data-game=loopline] .edge-on { stroke:var(--green); filter:none; }
body[data-game=loopline] .clue.ok { fill:var(--green); }
body[data-game=loopline] .clue.bad { fill:var(--error); }
body[data-game=loopline] .loader { background:var(--surface); color:var(--green); }
body[data-game=loopline] .draw-mode { box-shadow:none; }
body[data-game=loopline] .hint-count { border-radius:8px; background:var(--accent-fill); color:var(--on-accent); }
body[data-game=loopline] :is(.feedback,.supporting,.footer,.footer a,#levelLabel) { color:var(--text-soft); }
body[data-game=loopline] .round { color:var(--ink); }
body[data-game=loopline] .toast { background:var(--accent-fill); color:var(--on-accent); border-radius:5px; }
body[data-game=loopline] .footer { border-color:var(--line); }
body[data-game=loopline] .success-ring { color:var(--green); border-color:var(--green); }
body[data-game=nonogram] .header-actions button { border-radius:5px; }
body[data-game=nonogram] :is(.actions button,#tools button) { border-radius:5px; }
body[data-game=nonogram] .cell { background:var(--surface); border-color:var(--cell-line); }
body[data-game=nonogram] .cell:is(.end-col,.end-row,.first-col,.first-row) { border-color:var(--ink); }
body[data-game=nonogram] .cell[data-v="1"] { background:var(--ink); }
body[data-game=nonogram] .cell[data-v="-1"] { color:var(--note); }
body[data-game=nonogram] .clue.selected { background:var(--wash); }
body[data-game=nonogram] .clue.done { color:var(--muted); }
body[data-game=starbattle] button:not(.cell),body[data-game=starbattle] select { border-radius:5px; }
body[data-game=starbattle] :is(.controls button,.toolbar select) { background:var(--surface); color:var(--ink); border-color:var(--border-soft); }
body[data-game=starbattle] .board { border-width:2px; border-color:var(--ink); }
body[data-game=starbattle] :is(.status,.foot,.hint) { color:var(--text-soft); font-weight:400; }
body[data-game=starbattle] .win { color:var(--green); }
body[data-game=starbattle] :is(#mode,#notes)[aria-pressed=true] { background:var(--selected); border-color:var(--selected-ring); }
body[data-game=starbattle] .cell:disabled { opacity:1; }
body[data-game=fillomino] .cell { background:var(--surface); color:var(--green); border-color:var(--cell-line); }
body[data-game=fillomino] .cell.given { color:var(--ink); font-weight:500; }
body[data-game=fillomino] .cell.done { background:var(--tint); color:#233c35; }
body[data-game=fillomino] .cell.conflict { background:var(--conflict-bg); color:var(--error); }
body[data-game=fillomino] .pad button { background:var(--surface); border:1px solid var(--pad-border); border-radius:5px; color:var(--green); font-weight:400; }
body[data-game=fillomino] .pad button[aria-pressed=true] { background:var(--accent-fill); color:var(--on-accent); box-shadow:none; }
body[data-game=akari] .progress-track>div { background:var(--green); }
body[data-game=akari] .cell:not(.wall):not(.lit):not(.conflict) { background:var(--surface); }
body[data-game=akari] .cell.wall { background:#233c35; }
body:is([data-game=akari],[data-game=fillomino]) .board { border-color:var(--ink); }
body:is([data-game=akari],[data-game=fillomino]) :is(.status.success,.hint-btn svg) { color:var(--green); }
body:is([data-game=akari],[data-game=fillomino]) .status.error { color:var(--error); }

body[data-game=slay] header.studio-masthead { margin:0 auto; max-width:1120px; padding-inline:20px; }
body[data-game=slay] main { max-width:1120px; padding-inline:20px; }
body[data-game=slay] :is(h1,.command-card h2,dialog h2) { font-family:Georgia,serif; font-weight:400; }
body[data-game=slay] :is(.map-panel,.command-card,.activity,.factions) { border-color:var(--line); border-radius:5px; }
body[data-game=slay] .map-panel { color:#233c35; }
body[data-game=slay] :is(.command-card,.activity,.factions) { background:var(--surface); }
body[data-game=slay] :is(.faction.current,.build-button,.map-bottom,.mode-tag) { background:var(--wash); color:var(--ink); border-color:var(--line); }
body[data-game=slay] :is(.match-note,.map-bottom p,.legend-mark,.forecast,.status,.autosave,.field-guide p,.field-guide small,.field-guide h2,.activity ol,.activity summary span,footer,footer a,.text-button) { color:var(--text-soft); }
body[data-game=slay] .negative,body[data-game=slay] .status.error { color:var(--error); }
body[data-game=slay] .positive { color:var(--green); }
body[data-game=slay] .build-button.active { background:var(--selected); border-color:var(--selected-ring); }
body[data-game=slay] .map-tools button { width:44px; height:44px; border-color:var(--border-soft); border-radius:5px; background:var(--surface); color:var(--green); }
body[data-game=slay] .battle-report { background:var(--warning-bg); color:var(--warning-ink); border-color:var(--line); }
body[data-game=slay] #opponent-count { background:var(--surface); color:var(--ink); border-color:var(--border-soft); min-height:44px; border-radius:5px; }
body[data-game=slay] .difficulty-option input { accent-color:var(--green); }
body[data-game=slay] .rules-dialog { width:min(650px,calc(100% - 32px)); }
body .studio-difficulty-options select { width:100%; min-height:48px; max-width:none; padding:12px; border:1px solid var(--border-soft); border-radius:5px; background:var(--surface); color:var(--ink); }
body .studio-difficulty-options :is(.difficulty,nav) { display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; border:0; background:none; }
body .studio-difficulty-options button { min-height:52px; display:flex; flex-direction:row; justify-content:space-between; gap:12px; border:1px solid var(--border-soft); border-radius:5px; padding:12px 16px; text-align:left; background:var(--surface); color:var(--ink); }
body .studio-difficulty-options button:is(.active,[aria-pressed=true]) { background:var(--selected); color:var(--ink); border-color:var(--selected-ring); }
body .studio-difficulty-options :is(small,span) { font-size:14px; color:inherit; font-weight:400; }
body .studio-difficulty-options small { display:inline; font-size:11px; }
body[data-game=loopline] .studio-dialog-scroll :is(.dialog-eyebrow,.stat span,.level-stats small) { color:var(--muted); }
body[data-game=loopline] .studio-dialog-scroll .subtle { display:block; margin:12px auto 0; min-height:44px; border:0; background:none; color:var(--green); }
body[data-game=loopline] .studio-dialog-scroll .primary { width:100%; margin-top:22px; padding:14px 18px; justify-content:center; }
.studio-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0 32px; }
body .studio-intro h1 { font:normal 54px/1.05 Georgia,serif; letter-spacing:-2px; margin:12px 0 0; }
.studio-intro>p { color:var(--muted); font-size:14px; line-height:1.7; flex-shrink:0; }
.studio-sidebar { padding-top:44px; min-width:0; }
.studio-sidebar h2 { font:normal 36px/1.17 Georgia,serif; letter-spacing:-.8px; margin:17px 0; }
.studio-sidebar>p { font-size:14px; line-height:1.8; color:var(--muted); }
.studio-tip { border-top:1px solid var(--line); margin-top:30px; padding-top:24px; }
.studio-tip h3 { font:600 14px Arial,Helvetica,sans-serif; margin:12px 0 8px; }
.studio-tip p { font:16px/1.6 Georgia,serif; color:var(--text-soft); }
.studio-rule-card { background:var(--card); border-radius:5px; padding:20px 17px; margin-top:30px; font-size:11px; }
.studio-rule-card p { color:var(--muted); margin-bottom:0; }
@media(min-width:801px) and (min-height:551px),(min-width:1001px) {
 body:is([data-game=akari],[data-game=fillomino],[data-game=loopline]) .app,
 body[data-game=starbattle] main { max-width:1044px; padding-inline:22px; }
 body:is([data-game=akari],[data-game=fillomino],[data-game=loopline],[data-game=starbattle]) .studio-tagline { display:block; }
 body .studio-play { display:grid; grid-template-columns:minmax(0,550px) minmax(220px,1fr); gap:0 40px; align-items:start; }
 .studio-play>:not(.studio-sidebar),body[data-game=loopline] .studio-play :is(.board-wrap,.tools,.feedback) { grid-column:1; }
 body .studio-play>.studio-sidebar { grid-column:2; grid-row:1 / span 12; }
 body[data-game=loopline] .board-wrap,body[data-game=loopline] .tools { max-width:none; }
}

@media(max-width:800px),(max-width:1000px) and (max-height:550px) and (orientation:landscape) {
 .studio-intro,.studio-sidebar { display:none; }
 body[data-game=loopline] .app { max-width:680px; }
 body header.studio-masthead { min-height:44px; margin-bottom:12px; gap:6px; padding-top:env(safe-area-inset-top,0px); }
 body .studio-brand { font-size:19px; gap:6px; }
 body .studio-brand img { width:25px; height:25px; border-radius:6px; }
 body .studio-brand small { font-size:7px; letter-spacing:1.4px; margin-top:4px; }
 .studio-tagline { display:none; }
 body .studio-header-action { min-width:44px; padding:8px; border:0; }
 .studio-header-action>span { display:none; }
 .studio-dialog-scroll { padding:52px 22px 28px; }
 body[data-game=slay] .command-panel { display:block; }
 body[data-game=slay] .field-guide { display:none; }
 body[data-game=slay] header.studio-masthead { margin-inline:14px; padding-inline:0; }
}
@media(max-height:550px) and (orientation:landscape) {
 body:is([data-game=akari],[data-game=fillomino]) header.studio-masthead { width:232px; left:18px; top:8px; }
 body:is([data-game=akari],[data-game=fillomino]) .studio-brand { font-size:18px; }
 body[data-game=loopline] .feedback { display:block; white-space:normal; max-height:44px; overflow:auto; }
 body[data-game=loopline] .app { overflow:auto; }
}
@media(max-height:520px) and (orientation:landscape) and (pointer:coarse) {
 body[data-game=loopline] main { grid-template-rows:30px minmax(0,1fr) 36px; }
 body[data-game=loopline] .feedback { grid-column:2; grid-row:3; max-height:36px; }
 body[data-game=loopline] .board-wrap { width:min(100%,calc(100dvh - 126px)); grid-row:2 / span 2; }
}
@media(min-width:480px) and (max-height:550px) and (orientation:landscape) {
 body[data-game=starbattle] .studio-play { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:4px 16px; }
 body[data-game=starbattle] .board-wrap { grid-column:1; grid-row:1 / span 5; width:min(100%,calc(100dvh - 76px)); }
 body[data-game=starbattle] .studio-play>:not(.board-wrap) { grid-column:2; }
 body[data-game=starbattle] .controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:649px) and (orientation:portrait) {
 body[data-game=loopline] .feedback { white-space:normal; max-height:44px; min-height:28px; overflow:auto; }
 body[data-game=loopline] .board-wrap { width:min(100%,calc(100dvh - 223px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); }
}
@media(max-width:370px) and (orientation:portrait) {
 body[data-game=akari] .toolbar,body[data-game=loopline] .tools { flex-wrap:wrap; justify-content:center; }
 body[data-game=akari] .mode-switch button span { display:none; }
 body[data-game=loopline] .board-wrap { width:min(100%,calc(100dvh - 275px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))); }
 body[data-game=starbattle] .controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-height:660px) and (orientation:portrait) {
 body[data-game=akari] .board { max-width:min(100%,calc(100dvh - 330px)); }
 body[data-game=fillomino] .board { max-width:min(100%,calc(100dvh - 350px)); }
 body:is([data-game=akari],[data-game=fillomino]) :is(footer,.gesture-note) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}