/* Rollgebra 2026 visual system: calm light, legible dark, one-touch theme. */
:root,
html[data-rg-theme="light"]{
  --rg-bg:#f7f5ef;--rg-surface:#fffdf8;--rg-surface-muted:#f3f6f0;
  --rg-board:#faf8f1;--rg-text:#213635;--rg-muted:#627670;--rg-border:#dbe5dd;
  --rg-control:#fffefa;--rg-control-hover:#edf5ef;--rg-accent:#08786f;
  --rg-accent-ink:#fff;--rg-grid:#e1e8e1;--rg-axis:#a6bcb1;
  --rg-shadow:0 9px 34px rgba(32,61,53,.055),0 1px 2px rgba(32,61,53,.025);
}
html[data-rg-theme="dark"]{
  --rg-bg:#101d22;--rg-surface:#1b2a30;--rg-surface-muted:#23353a;
  --rg-board:#15272d;--rg-text:#e9f1ed;--rg-muted:#a6bbb6;--rg-border:#365055;
  --rg-control:#25383d;--rg-control-hover:#2e464a;--rg-accent:#6ad3bd;
  --rg-accent-ink:#123234;--rg-grid:#294046;--rg-axis:#607d80;
  --rg-shadow:0 12px 38px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.08);
}
html{color-scheme:light;background:var(--rg-bg);scrollbar-color:var(--rg-border) var(--rg-bg)}
html[data-rg-theme="dark"]{color-scheme:dark}
body{background:var(--rg-bg);color:var(--rg-text);min-height:100dvh;transition:background-color .2s ease,color .2s ease}
:where(button,input,select,textarea,math-field){accent-color:var(--rg-accent)}
:where(button,a,input,select,textarea,math-field):focus-visible{outline:3px solid var(--rg-accent)!important;outline-offset:3px}
:where(a,button){-webkit-tap-highlight-color:transparent}
:where(button){transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
:where(button):active:not(:disabled){transform:translateY(1px)}
/* Shared header brand, displayed consistently on gameplay, account and documents. */
.rg-brand-mark{display:block;width:34px;height:34px;min-width:34px;object-fit:contain;border-radius:10px;box-shadow:0 1px 5px #142d2b14}
.top .brand,.info-header .info-brand,header .d-logo,header .brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
.top .brand{font-weight:800;letter-spacing:-.045em;color:var(--rg-accent)}
.top{background:var(--rg-surface);border-bottom:1px solid var(--rg-border);box-shadow:0 1px 0 #ffffff08}
.top nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.top .site-menu>summary{background:var(--rg-control);border-color:var(--rg-border);color:var(--rg-text);border-radius:12px;min-height:42px;padding:9px 13px}
.top .site-menu>summary:hover{background:var(--rg-control-hover)}
.site-menu-panel{background:var(--rg-surface);border-color:var(--rg-border);box-shadow:var(--rg-shadow);padding:7px}
.site-menu-panel a{color:var(--rg-text)}
.site-menu-panel a:hover,.site-menu-panel a:focus-visible{background:var(--rg-control-hover)}
.site-menu-panel .site-menu-divider{background:var(--rg-border)}
.rg-theme-toggle{appearance:none;display:grid;place-items:center;flex:0 0 auto;
 width:42px;height:42px;min-height:42px;padding:0;background:var(--rg-control);
 color:var(--rg-text);border:1px solid var(--rg-border);border-radius:12px;
 box-shadow:0 1px 2px #102c2c0a;cursor:pointer;line-height:1}
.rg-theme-toggle svg{display:block;width:20px;height:20px}
.rg-theme-toggle:hover{background:var(--rg-control-hover);border-color:var(--rg-accent)}
.rg-theme-toggle:active{transform:translateY(1px)}
@media(max-width:540px){
 .rg-brand-mark{width:30px;height:30px;min-width:30px;border-radius:8px}
 .top nav{gap:6px}
 .rg-theme-toggle{width:40px;height:40px;min-height:40px;border-radius:10px}
 .top .site-menu>summary{min-height:40px;padding:8px 10px;border-radius:10px}
}
/* Game: make the graph the hero and make everything else quietly useful. */
#main{max-width:1420px}
.board-panel,.workbench{background:var(--rg-surface);border-color:var(--rg-border);
 border-radius:19px;box-shadow:var(--rg-shadow)}
.workbench{padding:clamp(14px,2vw,22px)}
.board-top{align-items:center}
.board-top strong,.workbench-top h2{color:var(--rg-text);letter-spacing:-.02em}
.board-top span,.workbench-top p,.math-editor-status,.save-status,.stream-label{color:var(--rg-muted)}
#board-wrap{background:var(--rg-board)}
.gridline{stroke:var(--rg-grid)}
.axis{stroke:var(--rg-axis)}
.tick{fill:var(--rg-muted)}
.board-desc{color:var(--rg-muted)}
.board-extras{background:var(--rg-surface);border-color:var(--rg-border)}
.status{background:var(--rg-surface-muted);color:var(--rg-text);border-color:var(--rg-accent)}
.primary{background:#08766e;border-color:#08766e;color:#fff;border-radius:11px;box-shadow:0 3px 12px #006d6620}
.primary:hover{background:#00655f}
.secondary,.pill{background:var(--rg-control);border-color:var(--rg-border);color:var(--rg-text);border-radius:11px}
.secondary:hover,.pill:hover{background:var(--rg-control-hover)}
.subtle{color:var(--rg-accent)}
.eq-row{background:var(--rg-surface-muted);border-color:var(--rg-border);border-radius:13px}
.eq-row:focus-within{border-color:var(--rg-accent);box-shadow:0 0 0 2px #54b49b24}
.row-heading,.input-label,.row-heading .track-heading-text{color:var(--rg-text)}
.track-mini-preview{color:var(--rg-muted)}
.track-mini-preview math{color:var(--rg-muted)}
.equation,.notation,math-field.rich-equation,.bound-input,.slider-value,.slider-limit,
.eq-row :is(input:not([type="checkbox"]):not([type="color"]),select,textarea){
 background:var(--rg-surface);border-color:var(--rg-border);color:var(--rg-text)}
.equation::placeholder,input::placeholder,textarea::placeholder{color:var(--rg-muted);opacity:.8}
.notation-placeholder,.slider-subtitle,.bound-count{color:var(--rg-muted)}
.track-advanced,.track-extra-actions,.curve-mode-section{border-color:var(--rg-border);color:var(--rg-text)}
.advanced-body,.track-colour-control,.parameter-slider,.slider-config{background:var(--rg-surface-muted);border-color:var(--rg-border);color:var(--rg-text)}
.track-colour-control label,.slider-head label{color:var(--rg-text)}
.track-colour{background:var(--rg-surface);border-color:var(--rg-border)}
#marble-count{color:var(--rg-accent)}
.difficulty-heading h1{color:var(--rg-text)}
.difficulty-status{background:var(--rg-surface-muted);color:var(--rg-accent);border:1px solid var(--rg-border)}
.difficulty-kicker,.eyebrow{color:var(--rg-accent)}
.difficulty-tab{background:var(--rg-surface);border-color:var(--rg-border);color:var(--rg-text);border-radius:13px}
.difficulty-tab small{color:var(--rg-muted)}
.difficulty-tab.active{background:var(--rg-surface-muted);border-color:var(--rg-accent);box-shadow:inset 0 0 0 1px var(--rg-accent)}
.difficulty-tab:hover:not(.active){background:var(--rg-control-hover)}
.tier-loading,.simple p,.card-link span{color:var(--rg-muted)}
.card-link,.stats>div{background:var(--rg-surface);border-color:var(--rg-border);border-radius:15px;box-shadow:var(--rg-shadow)}
.stats strong{color:var(--rg-accent)}
footer{color:var(--rg-muted);background:var(--rg-bg);border-color:var(--rg-border)}
/* Gem art. SVG gradients supply dimensionality; animation only adds the reflection. */
.gem-aura{fill:url(#rg-gem-halo);opacity:.68;transform-origin:center;animation:rg-gem-breathe 3.7s ease-in-out infinite alternate}
.gem-shadow{fill:#8b561e;opacity:.15;filter:blur(2px)}
.gem-crystal{filter:drop-shadow(0 2px 1.2px #70400c55)}
.gem-outline{fill:url(#rg-gem-edge);stroke:#ab661a;stroke-width:2.1;stroke-linejoin:round}
.gem-core{fill:url(#rg-gem-heart)}
.gem-left-facet{fill:#fff5a3;opacity:.8}
.gem-right-facet{fill:#e79324;opacity:.6}
.gem-top-facet{fill:#ffed8c;stroke:#ffd773;stroke-width:.45;opacity:.93}
.gem-base-facet{fill:#f9b83f;opacity:.52}
.gem-highlight{fill:#fff9d7;opacity:.88;filter:drop-shadow(0 0 2px #fff4b2)}
.gem-sheen{fill:none;stroke:#fffbe8;stroke-width:1.6;stroke-linecap:round;opacity:.8}
.gem-twinkle{fill:none;stroke:#fffcee;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px #fff4ad);transform-origin:center;animation:rg-gem-sparkle 3.4s ease-in-out infinite;animation-delay:var(--gem-delay,0s)}
.gem-twinkle-secondary{animation-delay:-1.55s;opacity:.8}
.gem-target.collected .gem-crystal{opacity:.26;filter:grayscale(.5)}
.gem-target.collected .gem-aura{animation:none;opacity:.1}
.gem-target.collected .gem-twinkle,.gem-target.collected .gem-highlight{visibility:hidden}
html[data-rg-theme="dark"] .gem-aura{opacity:.96}
html[data-rg-theme="dark"] .gem-crystal{filter:drop-shadow(0 2px 3px #ffd15c33)}
@keyframes rg-gem-breathe{from{opacity:.44;transform:scale(.95)}to{opacity:.82;transform:scale(1.06)}}
@keyframes rg-gem-sparkle{
  0%,16%,62%,100%{opacity:0;transform:translateY(2px) scale(.45) rotate(-17deg)}
  29%,40%{opacity:1;transform:translateY(-1px) scale(1.25) rotate(0)}
  50%{opacity:.2;transform:scale(.7)}
}
/* Awards modal follows whichever theme is selected. */
dialog.award-dialog{background:var(--rg-surface);color:var(--rg-text);border-color:var(--rg-border)}
.award-card{background:var(--rg-surface);color:var(--rg-text)}
.award-close{background:var(--rg-control-hover);color:var(--rg-text)}
.award-collect,.award-tier-note{color:var(--rg-text)}
.award-tier-note{opacity:.7}
.award-done{background:#08766e;color:#fff}
.award-dialog::backdrop{background:rgba(5,17,19,.72)}
/* Account pages. Keep the existing optional auth form intact. */
body:has(#loginTab) header .brand,body:has(#loginTab) header a{color:var(--rg-text)}
body:has(#loginTab){background:radial-gradient(ellipse 52% 44% at 8% 6%,rgba(244,199,157,.14),transparent 80%),var(--rg-bg)}
body:has(#loginTab) .intro h1,body:has(#loginTab) .intro p,body:has(#loginTab) .intro .aside{color:var(--rg-text)}
body:has(#loginTab) .intro p,body:has(#loginTab) .intro .aside{opacity:.78}
body:has(#loginTab) .intro em,.eyebrow{color:var(--rg-accent)!important}
body:has(#loginTab) .panel{background:var(--rg-surface);color:var(--rg-text);border-color:var(--rg-border);box-shadow:var(--rg-shadow)}
body:has(#loginTab) .tabs{background:var(--rg-surface-muted)}
body:has(#loginTab) .tabs button{color:var(--rg-muted)}
body:has(#loginTab) .tabs button[aria-selected="true"]{background:var(--rg-control);color:var(--rg-text);box-shadow:var(--rg-shadow)}
body:has(#loginTab) input,body:has(#loginTab) select,body:has(#loginTab) textarea{background:var(--rg-control);color:var(--rg-text);border-color:var(--rg-border)}
body:has(#loginTab) .google,body:has(#loginTab) .secondary{background:var(--rg-control);color:var(--rg-text);border-color:var(--rg-border)}
/* Developer studio; security and features are unchanged. */
header.d-top{background:var(--rg-surface);border-color:var(--rg-border)}
header.d-top span,.d-toolbar p,.d-auth p{color:var(--rg-muted)}
.d-top .d-logo{color:var(--rg-accent)}
.d-sidebar,.d-editor,.d-auth{background:var(--rg-surface);border-color:var(--rg-border);color:var(--rg-text);box-shadow:var(--rg-shadow)}
.d-item,.d-form-grid>label,.d-search-label,.d-gem label{color:var(--rg-text)}
.d-item{border-color:var(--rg-border)}
.d-item.active{background:var(--rg-surface-muted);border-color:var(--rg-accent)}
.d-item small,.d-search-label,#graph-status{color:var(--rg-muted)}
.d-gem,.d-board-top,.d-board{background:var(--rg-surface-muted);border-color:var(--rg-border)}
#graph{background:var(--rg-board)}
#graph line[stroke="#dce5df"]{stroke:var(--rg-grid)}
#graph line[stroke="#98afa4"]{stroke:var(--rg-axis)}
.d-editor input,.d-editor textarea,.d-editor select,.d-auth input{
 background:var(--rg-control);color:var(--rg-text);border-color:var(--rg-border)}
.d-editor button:not(.d-primary):not(.d-danger),.d-sidebar button,.d-top button:not(.rg-theme-toggle){
 background:var(--rg-control);color:var(--rg-text);border-color:var(--rg-border)}
.d-editor .d-primary,.d-auth button{background:#08766e;color:#fff}
.d-editor .d-danger{background:rgba(204,95,81,.16);color:#f3a398}
.d-board{border-radius:15px}
/* Information and legal pages retain real text/links in both schemes. */
.info-header{background:var(--rg-surface)!important;border-color:var(--rg-border)!important;color:var(--rg-text)}
.info-header .info-brand,.info-header a,.info-header summary{color:var(--rg-text)}
.info-header nav{display:flex;align-items:center;gap:12px}
.info-header nav .rg-theme-toggle{order:-1}
.info-main,.info-main :is(h1,h2,h3,h4,p,li,small,summary),.info-kicker{color:var(--rg-text)}
.info-main :is(p,li,small){color:var(--rg-muted)}
.info-main :is(section,article,aside,.info-card,.card,.box){border-color:var(--rg-border)}
html[data-rg-theme="dark"] .info-header nav details > div{background:var(--rg-surface);color:var(--rg-text);border:1px solid var(--rg-border)}
html[data-rg-theme="dark"] .info-main input,html[data-rg-theme="dark"] .info-main textarea{background:var(--rg-control);color:var(--rg-text)}
html[data-rg-theme="dark"] a{color:inherit}
html[data-rg-theme="dark"] :where(.simple,footer,.cards,.stats){color:var(--rg-text)}
html[data-rg-theme="dark"] :where(.simple,footer) a{color:var(--rg-accent)}
@media(max-width:860px){
 .action-bar{background:var(--rg-surface);border-bottom:1px solid var(--rg-border);backdrop-filter:blur(12px)}
 .board-panel,.workbench{border-radius:15px}
 .info-header nav{gap:8px}
}
@media(max-width:560px){
 .board-top{padding:12px 14px}
 .workbench{padding:13px}
 .eq-row{padding:12px}
 body:has(#loginTab) header{gap:8px;padding:16px 15px}
 body:has(#loginTab) header a{font-size:.88rem}
 .info-header .rg-theme-toggle{order:0}
}
@media(prefers-reduced-motion:reduce){
 body,.rg-theme-toggle,.gem-aura,.gem-twinkle{transition:none!important;animation:none!important}
}



/* Brand artwork from the owner's approved Rollgebra concept (4 November). */
:root,html[data-rg-theme="light"]{--rg-accent:#6e39d6;--rg-accent-ink:#fff}
html[data-rg-theme="dark"]{--rg-bg:#0b1226;--rg-surface:#161e35;--rg-surface-muted:#1f2b42;--rg-board:#11262d;--rg-accent:#b295ff;--rg-control:#202a45;--rg-control-hover:#2b3856;--rg-border:#34415d}
.rg-brand-mark{width:35px;height:35px;min-width:35px;border-radius:9px;box-shadow:0 2px 7px #20123924}
.rg-wordmark{font-weight:850;letter-spacing:-.045em;background:linear-gradient(100deg,#0b1226 0%,#111c43 35%,#6026d3 58%,#a535ed 100%);color:transparent;-webkit-background-clip:text;background-clip:text}
html[data-rg-theme="dark"] .rg-wordmark{background:linear-gradient(100deg,#fff 0%,#fff 37%,#c48fff 65%,#a843f2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .brand,.top .brand strong,.d-top .d-logo{color:var(--rg-accent)}
.primary,.award-done,.d-editor .d-primary{background:#6e39d6;border-color:#6e39d6;color:#fff}
.primary:hover,.award-done:hover{background:#5925be}
.difficulty-switcher{display:inline-flex;align-items:center;flex-shrink:0;margin-left:auto}
.board-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.board-top #count{font-size:.72rem;color:var(--rg-muted);white-space:nowrap}
.difficulty-tabs{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
.difficulty-tab{--tier-color:#178a57;--tier-fill:#e8f8ed;appearance:none;display:inline-flex;justify-content:center;align-items:center;min-height:35px;
padding:6px 12px;margin:0;border-radius:999px;border:1px solid color-mix(in srgb,var(--tier-color) 45%,transparent);
background:transparent;color:var(--tier-color);font-size:.78rem;letter-spacing:.01em;font-weight:750;line-height:1.1;white-space:nowrap;box-shadow:none;transition:background-color .18s ease,border-color .18s ease}
.difficulty-tab[data-tier="easy"]{--tier-color:#168753;--tier-fill:#dff6e8}
.difficulty-tab[data-tier="medium"]{--tier-color:#996b00;--tier-fill:#fff0ba}
.difficulty-tab[data-tier="hard"]{--tier-color:#c74446;--tier-fill:#fce4e5}
.difficulty-tab.active,.difficulty-tab[aria-selected="true"]{background:var(--tier-fill);border-color:var(--tier-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--tier-color) 15%,transparent)}
.difficulty-tab:hover:not(.active){background:color-mix(in srgb,var(--tier-fill) 52%,transparent)}
html[data-rg-theme="dark"] .difficulty-tab[data-tier="easy"]{--tier-color:#67dc9a;--tier-fill:#193b30}
html[data-rg-theme="dark"] .difficulty-tab[data-tier="medium"]{--tier-color:#ffdd70;--tier-fill:#3c3521}
html[data-rg-theme="dark"] .difficulty-tab[data-tier="hard"]{--tier-color:#ff9699;--tier-fill:#412c3b}
html[data-rg-theme="dark"] .difficulty-tab:hover:not(.active){color:var(--tier-color)}
@media(max-width:810px){.board-top #count{order:3;width:100%;text-align:left;font-size:.68rem;margin-top:-3px}}
@media(max-width:490px){.board-top{column-gap:6px;padding:10px 10px 9px}.board-top strong{font-size:.86rem}.difficulty-tabs{gap:3px}.difficulty-tab{min-height:32px;padding:6px 9px;font-size:.72rem}.rg-brand-mark{width:30px;height:30px;min-width:30px}}
/* Keep sparkles physically anchored to their individual gem. */
.gem-aura,.gem-twinkle{transform-box:fill-box;transform-origin:center}
.gem-aura{opacity:.43;animation:rg-gem-breathe 4s ease-in-out infinite alternate}
.gem-twinkle{stroke-width:1.6;filter:drop-shadow(0 0 1.5px #ffeabb);animation:rg-gem-sparkle 3.6s ease-in-out infinite;animation-delay:var(--gem-delay,0s)}
.gem-twinkle-secondary{opacity:.45;animation-delay:calc(var(--gem-delay,0s) - 1.6s)}
@keyframes rg-gem-breathe{0%{opacity:.34;transform:scale(.99)}100%{opacity:.48;transform:scale(1.03)}}
@keyframes rg-gem-sparkle{0%,20%,65%,100%{opacity:0;transform:scale(.7)}34%,43%{opacity:.82;transform:scale(1.04)}54%{opacity:.12;transform:scale(.92)}}
@media(prefers-reduced-motion:reduce){.gem-aura,.gem-twinkle{animation:none!important;transform:none!important}}


/* Play layout: the entire graph is visible on first load, without a sticky bar. */
#main{padding-top:clamp(8px,1.4vh,16px);padding-bottom:34px}
.game-layout{gap:clamp(12px,1.5vw,20px);align-items:start}
.board-panel{container-type:inline-size;overflow:hidden}
.board-top{min-height:51px;padding:8px 13px;align-items:center;border-bottom:1px solid var(--rg-border);background:var(--rg-surface)}
.board-top>strong{font-size:.88rem;font-weight:750;color:var(--rg-text);letter-spacing:-.012em}
.board-top .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.board-panel .board-extras,.board-panel .action-bar{display:none!important}
#board-wrap{aspect-ratio:5/4;max-height:calc(100dvh - 137px);height:auto;overflow:hidden;display:grid;place-items:center;background:var(--rg-board)}
#board{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
@supports (height:1cqw){
 #board-wrap{aspect-ratio:auto;height:max(220px,min(80cqw,calc(100dvh - 137px)));max-height:none}
 #board{width:auto;max-width:100%;height:100%}
}
.board-panel #outcome:empty{display:none!important}
.board-panel #outcome:not(:empty){min-height:0;padding:11px 13px;margin:9px 13px 12px;font-size:.87rem;line-height:1.4}
.workbench{padding:clamp(12px,1.5vw,20px)}
.play-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0 0 15px}
.play-controls .primary,.play-controls .secondary{min-height:46px;padding:10px 13px;font-size:.93rem;line-height:1.1;white-space:nowrap;border-radius:11px}
.play-controls .primary{min-width:0;font-weight:800}
.play-controls .secondary{flex:none}
.workbench-top{border-top:1px solid var(--rg-border);padding-top:12px}
.workbench-top h2{font-size:.98rem;letter-spacing:-.02em;margin:0}
.workbench .eq-row:first-of-type{margin-top:12px}
.polar-range[hidden]{display:none!important}
.polar-range h3{margin:0 0 8px;font-size:.87rem}
.polar-range{margin-bottom:13px}
@media(max-width:860px){
 .game-layout{gap:12px}
 #main{padding:8px 10px 38px}
 .board-top{padding:7px 10px;min-height:46px}
 .board-panel{border-radius:13px}
 .workbench{border-radius:13px}
}
@media(max-width:490px){
 #main{padding:7px 7px 32px}
 .board-top{gap:6px;padding:7px 9px}
 .board-top>strong{font-size:.79rem}
 .play-controls{gap:7px;margin-bottom:11px}
 .play-controls .primary,.play-controls .secondary{min-height:43px;padding:8px 10px;font-size:.85rem}
 .workbench-top{padding-top:10px}
}
/* Reward modal is the only place where sharing appears. */
.award-actions{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap}
.award-actions button{min-height:46px;padding:11px 19px;border-radius:11px;font-size:.9rem;font-weight:750}
.award-share{color:var(--rg-text);background:var(--rg-control);border:1px solid var(--rg-border);cursor:pointer}
.award-share:hover{background:var(--rg-control-hover);border-color:var(--rg-accent)}
.award-share-status{font-size:.77rem;margin:9px 0 0;color:var(--rg-muted)}
.award-share-status:empty{display:none}
@media(max-width:420px){.award-actions{gap:7px}.award-actions button{flex:1 1 auto;padding:10px 11px;min-width:124px}}


/* Focused play shell: the graph never moves while users scroll equations. */
body:has(.game-layout){height:100dvh;max-height:100dvh;overflow:hidden}
body:has(.game-layout) footer{display:none!important}
body:has(.game-layout) #main{height:calc(100dvh - var(--rg-header-h,60px));min-height:0;overflow:hidden;padding:8px clamp(8px,1.5vw,20px) 9px;max-width:1640px}
body:has(.game-layout) .game-layout{height:100%;min-height:0;align-items:stretch;gap:clamp(10px,1.2vw,18px)}
body:has(.game-layout) .board-panel{position:sticky;top:8px;align-self:start;min-width:0;max-height:100%;overflow:hidden}
body:has(.game-layout) .board-panel>.board-top{
 position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}
body:has(.game-layout) #board-wrap{width:100%;min-height:155px;overflow:hidden;border-radius:16px;background:var(--rg-board)}
body:has(.game-layout) #board{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;margin:auto}
body:has(.game-layout) .workbench{height:100%;max-height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:clamp(10px,1.3vw,17px);border-radius:16px}
body:has(.game-layout) .difficulty-switcher{margin:0 0 10px;align-self:stretch;display:flex;justify-content:flex-end;flex:none}
body:has(.game-layout) .difficulty-tabs{gap:6px;justify-content:flex-end;flex-wrap:nowrap}
body:has(.game-layout) .difficulty-tab{min-height:37px;padding:7px 13px}
body:has(.game-layout) .play-controls{flex:none;margin-bottom:10px}
body:has(.game-layout) .workbench-top{flex:none;padding-top:10px}
body:has(.game-layout) #rich-editor-status{flex:none;max-height:46px;overflow:hidden}
body:has(.game-layout) #rows{flex:1 1 auto;min-height:80px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding:0 5px 6px 1px}
body:has(.game-layout) #rows::-webkit-scrollbar{width:7px}
body:has(.game-layout) #rows::-webkit-scrollbar-thumb{background:var(--rg-border);border-radius:999px}
body:has(.game-layout) .add-track-actions{flex:none;padding-top:9px;flex-wrap:wrap}
body:has(.game-layout) .track-extra-actions{flex:none}
body:has(.game-layout) #save-status{flex:none;max-height:28px;overflow:hidden}
body:has(.game-layout) .board-panel #outcome:not(:empty){margin:6px 9px 9px;padding:7px 9px;font-size:.76rem}
.obstacle{stroke:#e99652;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 1.5px #6c382b55)}
html[data-rg-theme="dark"] .obstacle{stroke:#f5aa64;filter:drop-shadow(0 0 3px #efa25d55)}
@media(max-width:860px){
 body:has(.game-layout) #main{height:calc(100dvh - var(--rg-header-h,54px));padding:6px 7px 7px}
 body:has(.game-layout) .game-layout{display:flex;flex-direction:column;align-items:stretch;gap:8px}
 body:has(.game-layout) .board-panel{position:sticky;top:0;flex:0 0 auto;width:100%;align-self:stretch;max-height:55%;border-radius:12px}
 body:has(.game-layout) .workbench{height:auto;max-height:none;min-height:0;flex:1 1 auto;width:100%;padding:9px;border-radius:12px}
 body:has(.game-layout) .workbench-top{padding-top:8px}
 body:has(.game-layout) .difficulty-switcher{margin-bottom:6px}
 body:has(.game-layout) .difficulty-tab{min-height:32px;padding:6px 10px;font-size:.73rem}
 body:has(.game-layout) .play-controls{margin-bottom:7px}
 body:has(.game-layout) .play-controls .primary,body:has(.game-layout) .play-controls .secondary{min-height:40px;padding:8px}
 body:has(.game-layout) #rows{min-height:65px;scrollbar-gutter:auto}
}
@media(max-width:375px){
 body:has(.game-layout) .difficulty-tabs{gap:4px}
 body:has(.game-layout) .difficulty-tab{padding:5px 8px;min-height:31px}
 body:has(.game-layout) .board-panel{max-height:53%}
}

/* Ultra-compact equation editor footer: reclaim vertical room for actual maths. */
body:has(.game-layout) .workbench .eq-row:first-of-type{margin-top:5px}
body:has(.game-layout) .track-footer{
 position:relative;z-index:5;flex:0 0 auto;display:flex;align-items:center;
 justify-content:space-between;gap:7px;margin-top:4px;padding:6px 1px 0;
 border-top:1px solid var(--rg-border);min-height:37px
}
body:has(.game-layout) .track-footer .add-track-actions{
 display:flex;align-items:center;flex:0 1 auto;gap:5px;flex-wrap:nowrap;
 margin:0;padding:0;min-width:0
}
body:has(.game-layout) .track-footer .add-track-actions button{
 flex:0 0 auto;width:auto;min-height:30px;padding:4px 10px;
 border-radius:7px;font-size:.73rem;font-weight:750;line-height:1.1;
 white-space:nowrap
}
body:has(.game-layout) .track-footer .track-extra-actions{
 flex:0 0 auto;position:relative;margin:0;padding:0;border:0;min-width:0
}
body:has(.game-layout) .track-footer .track-extra-actions summary{
 display:flex;align-items:center;justify-content:flex-end;min-height:30px;
 padding:3px 5px;margin:0;list-style:none;cursor:pointer;
 color:var(--rg-muted);font-size:.73rem;white-space:nowrap
}
body:has(.game-layout) .track-footer .track-extra-actions summary::-webkit-details-marker{display:none}
body:has(.game-layout) .track-footer .track-extra-actions summary::marker{content:''}
body:has(.game-layout) .track-footer .track-extra-actions[open] .tools{
 position:absolute;z-index:10;right:0;bottom:calc(100% + 7px);
 display:flex;flex-direction:column;gap:6px;width:205px;
 margin:0;padding:9px;border:1px solid var(--rg-border);
 border-radius:10px;background:var(--rg-surface);box-shadow:var(--rg-shadow)
}
body:has(.game-layout) .track-footer .track-extra-actions .tools button{
 width:100%;min-height:35px;font-size:.78rem
}
@media(max-width:490px){
 body:has(.game-layout) .track-footer{gap:4px;padding-top:4px;min-height:38px}
 body:has(.game-layout) .track-footer .add-track-actions{gap:4px}
 body:has(.game-layout) .track-footer .add-track-actions button{min-height:34px;padding:5px 8px;font-size:.71rem}
 body:has(.game-layout) .track-footer .track-extra-actions summary{min-height:34px;font-size:.71rem}
}

/* Compact minigame shortcut adjacent to daily difficulty selectors. */
body:has(.game-layout) .difficulty-switcher{gap:7px;align-items:center;flex-wrap:nowrap}
.minigames-shortcut{border:1px solid var(--rg-border,#d4dfe0);border-radius:10px;color:var(--rg-text,#334);background:var(--rg-surface-muted,#f2f0f9);padding:8px 10px;min-height:37px;text-decoration:none;font-size:.73rem;font-weight:800;display:inline-flex;align-items:center;white-space:nowrap}
.minigames-shortcut:hover{border-color:var(--rg-accent,#784ace)}
@media(max-width:450px){.minigames-shortcut{min-height:32px;font-size:.69rem;padding:6px 7px}body:has(.game-layout) .difficulty-tab{padding:6px 8px}}

/* Mobile focus mode: preserve the live graph and the equation being edited.
   MathLive's floating keyboard is subtracted from --rg-edit-visible-height
   by theme.js, so no editor content can sit behind its key rows. */
@media(max-width:1180px), (max-width:1400px) and (pointer:coarse){
 body.rg-mobile-math-editing{height:var(--rg-edit-visible-height,100dvh)!important;max-height:var(--rg-edit-visible-height,100dvh)!important;overflow:hidden!important}
 body.rg-mobile-math-editing header.top,
 body.rg-mobile-math-editing .game-head{display:none!important}
 body.rg-mobile-math-editing:has(.game-layout) #main{
  height:var(--rg-edit-visible-height,100dvh)!important;
  max-height:var(--rg-edit-visible-height,100dvh)!important;
  padding:3px 6px 4px!important
 }
 body.rg-mobile-math-editing:has(.game-layout) .game-layout{display:flex!important;flex-direction:column!important;align-items:stretch!important;height:100%!important;gap:5px!important}
 body.rg-mobile-math-editing:has(.game-layout) .board-panel{
  flex:0 0 auto!important;max-height:min(57%,calc(var(--rg-edit-visible-height,100dvh) - 95px))!important;
  height:min(57%,calc(var(--rg-edit-visible-height,100dvh) - 95px))!important;
  min-height:0!important;position:relative!important;top:auto!important;
  /* Tablet-wide layouts use align-self:start by default, which collapses the
     column-oriented graph to 2px when the keyboard focus mode starts. */
  width:100%!important;align-self:stretch!important;min-width:0!important
 }
 body.rg-mobile-math-editing:has(.game-layout) #board-wrap{
  height:100%!important;max-height:100%!important;min-height:0!important
 }
 body.rg-mobile-math-editing:has(.game-layout) .workbench{
  flex:1 1 0!important;min-height:0!important;padding:5px 7px!important;
  overflow:hidden!important
 }
 body.rg-mobile-math-editing:has(.game-layout) .difficulty-switcher,
 body.rg-mobile-math-editing:has(.game-layout) .play-controls,
 body.rg-mobile-math-editing:has(.game-layout) .workbench-top,
 body.rg-mobile-math-editing:has(.game-layout) #rich-editor-status,
 body.rg-mobile-math-editing:has(.game-layout) .track-footer,
 body.rg-mobile-math-editing:has(.game-layout) #save-status,
 body.rg-mobile-math-editing:has(.game-layout) #outcome{display:none!important}
 body.rg-mobile-math-editing:has(.game-layout) #rows{
  flex:1 1 0!important;min-height:0!important;padding:0!important;
  overflow-y:auto!important;scrollbar-gutter:auto!important
 }
 body.rg-mobile-math-editing:has(.game-layout) #rows>.eq-row:not(.rg-mobile-active){
  display:none!important
 }
 body.rg-mobile-math-editing:has(.game-layout) #rows>.eq-row.rg-mobile-active{
  margin:0!important;padding:5px 8px!important
 }
 body.rg-mobile-math-editing:has(.game-layout) #rows>.eq-row.rg-mobile-active .row-heading,
 body.rg-mobile-math-editing:has(.game-layout) #rows>.eq-row.rg-mobile-active .track-advanced,
 body.rg-mobile-math-editing:has(.game-layout) #rows>.eq-row.rg-mobile-active .bounds-section,
 body.rg-mobile-math-editing:has(.game-layout) #rows>.eq-row.rg-mobile-active .row-error{
  display:none!important
 }
 body.rg-mobile-math-editing:has(.game-layout) #rows .rg-mobile-active .track-body{display:block!important}
 body.rg-mobile-math-editing:has(.game-layout) #rows .rg-mobile-active math-field.rich-equation,
 body.rg-mobile-math-editing:has(.game-layout) #rows .rg-mobile-active input.equation:not([hidden]){
  display:block;min-height:56px!important;max-height:100%;width:100%
 }
}