:root { color-scheme: light; --ui-bg:#f5f7fb; --ui-surface:#fff; --ui-text:#172033; --ui-muted:#64748b; --ui-line:#d6deea; --ui-accent:#2563eb; --ui-accent-contrast:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--ui-text); background:var(--ui-bg); }
:root[data-theme="dark"] { color-scheme:dark; --ui-bg:#0f172a; --ui-surface:#1e293b; --ui-text:#f1f5f9; --ui-muted:#bac6d6; --ui-line:#475569; --ui-accent:#60a5fa; --ui-accent-contrast:#0f172a; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --ui-bg:#0f172a; --ui-surface:#1e293b; --ui-text:#f1f5f9; --ui-muted:#bac6d6; --ui-line:#475569; --ui-accent:#60a5fa; --ui-accent-contrast:#0f172a; } }
* { box-sizing:border-box; }
body.experiment-shell { min-height:100svh; margin:0; padding:0 0 max(12px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; color:var(--ui-text); background:var(--ui-bg); font:400 16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
body.experiment-shell .experiment-header { position:sticky; z-index:10; top:0; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:10px; width:min(960px,100%); min-height:56px; margin:0 auto; padding:6px max(12px,env(safe-area-inset-left)) 6px max(12px,env(safe-area-inset-right)); border-bottom:1px solid var(--ui-line); background:color-mix(in srgb,var(--ui-bg) 94%,transparent); backdrop-filter:blur(12px); }
body.experiment-shell .experiment-header > .experiment-icon-button:first-child { grid-column:1; justify-self:start; }
body.experiment-shell .experiment-header > .experiment-title { grid-column:2; justify-self:stretch; }
body.experiment-shell .experiment-header > .experiment-icon-button:last-child { grid-column:3; justify-self:end; }
body.experiment-shell .experiment-title { min-width:0; margin:0; overflow:hidden; color:var(--ui-text); font-size:clamp(1rem,3.5vw,1.25rem); font-weight:750; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
body.experiment-shell .experiment-icon-button { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-surface); color:var(--ui-text); font-size:1.2rem; cursor:pointer; }
body.experiment-shell main { width:min(960px,100% - 24px); max-width:960px; margin:12px auto 0; padding:0 0 max(14px,env(safe-area-inset-bottom)); color:var(--ui-text); }
body.experiment-shell main > h1 { display:none; }
body.experiment-shell main > p:not([id]) { color:var(--ui-muted); font-size:.9rem; line-height:1.5; }
body.experiment-shell .actions button, body.experiment-shell .controls button { max-width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); color:var(--ui-text); font:inherit; cursor:pointer; touch-action:manipulation; }
body.experiment-shell select, body.experiment-shell input { min-height:44px; padding:8px 10px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); }
body.experiment-shell select, body.experiment-shell input { max-width:100%; color:var(--ui-text); font:inherit; }
body.experiment-shell .actions button:disabled, body.experiment-shell .controls button:disabled { opacity:.55; cursor:default; }
body.experiment-shell :focus-visible { outline:3px solid var(--ui-accent); outline-offset:2px; }
body.experiment-shell [role="status"] { min-height:1.5em; margin:8px 0; color:var(--ui-muted); text-align:center; }
body.experiment-shell .actions, body.experiment-shell .controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px auto; }
body.experiment-shell .actions button, body.experiment-shell .controls button { min-width:84px; padding:8px 12px; border-radius:10px; font-weight:650; }
body.experiment-shell .board, body.experiment-shell #board, body.experiment-shell .tableau, body.experiment-shell #tableau { margin-right:auto; margin-left:auto; }
body.experiment-shell .board button, body.experiment-shell #board button, body.experiment-shell .tableau button { touch-action:manipulation; }
body.experiment-shell #reference { display:block; width:min(100%,144px); height:auto; margin:8px auto; border-radius:14px; }
body.experiment-shell[data-experiment="five-cell-regions"] #board > .cell,
body.experiment-shell[data-experiment="paired-shapes"] #board > .cell,
body.experiment-shell[data-experiment="crate-escape"] #board > .cell,
body.experiment-shell[data-experiment="growing-polyomino"] #board > .cell,
body.experiment-shell[data-experiment="circle-relocation"] #board > .cell,
body.experiment-shell[data-experiment="shortest-route-walls"] #board > .cell,
body.experiment-shell[data-experiment="inertia-grid"] #board > .cell,
body.experiment-shell[data-experiment="waterway-regions"] #board > .cell,
body.experiment-shell[data-experiment="cube-route"] #board > .cell { min-width:0; min-height:0; aspect-ratio:1; }
body.experiment-shell .experiment-dialog { width:min(360px,calc(100% - 28px)); max-height:calc(100svh - 28px); padding:18px; overflow:auto; border:1px solid var(--ui-line); border-radius:18px; background:var(--ui-surface); color:var(--ui-text); box-shadow:0 18px 60px #0f172a30; }
body.experiment-shell .experiment-dialog::backdrop { background:#0f172a80; }
body.experiment-shell .completion-dialog { width:min(360px,calc(100% - 28px)); overflow:visible; text-align:center; }
body.experiment-shell .completion-dialog .experiment-dialog-heading,
body.experiment-shell .completion-dialog .completion-message,
body.experiment-shell .completion-dialog .completion-actions { position:relative; z-index:2; }
body.experiment-shell .completion-dialog .experiment-dialog-heading { margin-bottom:8px; }
body.experiment-shell .completion-dialog .experiment-dialog-heading h2 { flex:1; }
body.experiment-shell .completion-message { color:var(--ui-muted); }
body.experiment-shell .completion-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
body.experiment-shell .completion-new-game { min-height:48px; border:1px solid var(--ui-accent); border-radius:12px; background:var(--ui-accent); color:var(--ui-accent-contrast); font:inherit; font-weight:750; cursor:pointer; }
body.experiment-shell .completion-confetti { position:fixed; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
body.experiment-shell .completion-confetti i { position:absolute; top:-12px; left:var(--x); width:8px; height:12px; background:hsl(var(--hue) 85% 55%); animation:completion-fall 1.3s var(--delay) ease-in forwards; }
@keyframes completion-fall { to { transform:translateY(105vh) rotate(720deg); opacity:0; } }
@media(prefers-reduced-motion:reduce) { body.experiment-shell .completion-confetti { display:none; } }
body.experiment-shell .experiment-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
body.experiment-shell .experiment-dialog-heading h2 { margin:0; font-size:1.15rem; }
body.experiment-shell .experiment-dialog-close { flex:0 0 44px; width:44px; min-width:44px; max-width:44px; height:44px; padding:0; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-bg); color:var(--ui-text); font-size:1.4rem; cursor:pointer; }
body.experiment-shell .experiment-home-link { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:8px 12px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-bg); color:var(--ui-text); font-weight:700; text-decoration:none; }
body.experiment-shell .experiment-setting-row { display:grid; grid-template-columns:minmax(72px,1fr) minmax(130px,1.2fr); align-items:center; gap:12px; margin:12px 0; }
body.experiment-shell .experiment-setting-row select { width:100%; }
body.experiment-shell .experiment-settings-note { color:var(--ui-muted); font-size:.82rem; }
@media(max-width:480px) { body.experiment-shell main { width:calc(100% - 20px); margin-top:8px; } body.experiment-shell .experiment-header { min-height:52px; gap:6px; padding-right:10px; padding-left:10px; } body.experiment-shell .experiment-icon-button { width:42px; height:42px; min-height:42px; } body.experiment-shell .actions, body.experiment-shell .controls { gap:6px; } body.experiment-shell .actions button, body.experiment-shell .controls button { min-width:76px; padding:7px 9px; } }
@media(max-height:680px) and (orientation:portrait) { body.experiment-shell .experiment-header { position:relative; } body.experiment-shell main { margin-top:4px; } }