/* Graph Art's compact two-mode studio; all artwork is mathematical SVG. */
.regions-page{background:#f7f4ed}
.regions-page .app{max-width:1320px}
.region-main{max-width:1190px;margin:0 auto;padding:10px 0 35px}
.graph-landing-intro{text-align:center;margin:20px auto 22px;max-width:790px}
.graph-landing-intro h1{font-size:clamp(2.2rem,4.5vw,3.8rem);letter-spacing:-.055em;line-height:1.1;margin:10px 0}
.graph-landing-intro h1 em{color:#469c8b;font-style:normal}
.graph-landing-intro p{color:#718191;font-size:.94rem;line-height:1.6}
.graph-picker-modes,.graph-picture-picker{padding:20px 23px;border:1px solid #e5e0d9;border-radius:19px;background:#fffcf8;margin-top:14px}
.graph-picker h2{font-size:1.24rem;letter-spacing:-.035em;margin:0 0 14px;color:#304760}
.graph-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(min-width:781px) and (max-width:980px){
 .graph-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.graph-mode-card{display:flex;align-items:center;text-align:left;gap:15px;padding:18px;border-radius:15px;border:2px solid #e4e7e2;background:#fdfcf8;color:#384d63;cursor:pointer;font:inherit}
.graph-mode-card[href]{text-decoration:none;color:inherit}
.graph-mode-card:hover,.graph-mode-card:focus-visible{border-color:#56a698;background:#f0f9f4}
.graph-mode-go{margin-left:auto;color:#358d78;font-size:1.15rem;font-weight:900}
.graph-mode-card[aria-pressed=true]{border-color:#56a698;background:#eaf7f1;box-shadow:0 4px 17px #47988316}
.graph-mode-card strong,.graph-mode-card small{display:block}
.graph-mode-card strong{font-size:1.06rem;margin-bottom:5px}
.graph-mode-card small{font-size:.76rem;color:#647d84;line-height:1.5}
.graph-mode-icon{font-size:2.1rem;color:#398e82}
.graph-mode-tick{margin-left:auto;opacity:0;color:#358d78;font-weight:900}
.graph-mode-card[aria-pressed=true] .graph-mode-tick{opacity:1}
.graph-picker-heading{display:flex;justify-content:space-between;gap:15px;align-items:end}
.graph-picker-heading h2{margin:5px 0 0;font-size:1.62rem}
.graph-picker-heading p{font-size:.78rem;color:#748593}
.graph-picture-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}
.graph-picture-card{border:1px solid #e3e4dc;background:#f8f8f1;border-radius:14px;padding:15px;display:flex;align-items:center;gap:15px;text-align:left;cursor:pointer;font:inherit;color:#384d63}
.graph-picture-card:hover,.graph-picture-card:focus-visible{border-color:#55aa9a;background:#eff7f2}
.graph-picture-card svg{width:114px;height:105px;flex:none;border-radius:10px;background:#f9f2e7}
.graph-picture-card strong,.graph-picture-card small{display:block}
.graph-picture-card strong{font-size:1.13rem;margin:6px 0}
.graph-picture-card small{font-size:.74rem;color:#72828c;line-height:1.5}
.graph-picture-card .graph-stage{font-size:.65rem;text-transform:uppercase;font-weight:850;letter-spacing:.08em;color:#4d947f}
.graph-card-go{font-size:.72rem;font-weight:800;color:#4a9280;margin-top:9px;display:block}

/* Five increasingly challenging pictures, matching the Pixel Art journey.
   Mode-specific galleries share a visual language but never share pictures. */
.graph-journey-status{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:7px 14px;margin:8px 0 11px;color:#75868b;font-size:.74rem;
}
.graph-journey-status strong{font-size:.77rem;color:#417e70}
.graph-stage-track{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 gap:5px;margin-bottom:15px;position:relative;
}
.graph-step-node{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-width:0;gap:4px;color:#9a9faa;font-size:.65rem;font-weight:750;
}
.graph-step-number{
 display:grid;place-items:center;width:27px;height:27px;border:1px solid #dddeda;
 border-radius:50%;background:#f6f5f1;color:#7d8993;font-weight:900;
}
.graph-step-node.is-recommended{color:#377d6b}
.graph-step-node.is-recommended .graph-step-number{
 background:#e3f5ed;border-color:#6bae9d;box-shadow:0 0 0 3px #d9f0e588;color:#2c806a
}
.graph-step-node.is-complete{color:#317e66}
.graph-step-node.is-complete .graph-step-number{
 background:#468f79;border-color:#468f79;color:white
}
.graph-picture-grid{
 grid-template-columns:repeat(5,minmax(0,1fr));
 align-items:stretch;gap:9px;
}
.graph-picture-card{
 flex-direction:column;align-items:stretch;gap:7px;
 justify-content:start;padding:9px 9px 12px;
 position:relative;border-radius:13px;
}
.graph-picture-card.is-recommended{
 background:#f1faf3;border-color:#7bb7a3;box-shadow:0 0 0 2px #68b19a1c
}
.graph-picture-card svg{
 width:100%;height:auto;aspect-ratio:1;
 max-height:154px;margin:auto;
 border:1px solid #e8e3d8;border-radius:9px;
}
.graph-picture-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.graph-picture-card .graph-stage{font-size:.6rem;line-height:1.4;min-height:1.6em}
.graph-picture-card strong{
 font-size:.98rem;letter-spacing:-.02em;line-height:1.17;margin:1px 0 2px
}
.graph-picture-card small{
 line-height:1.35;font-size:.68rem;min-height:2.7em
}
.graph-card-maths{
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
 overflow:hidden;margin-top:2px;color:#7b7f86;font-size:.66rem;
 line-height:1.4;min-height:2.7em;
}
.graph-card-progress{
 display:block;overflow:hidden;background:#e1e9df;height:4px;
 border-radius:8px;margin-top:auto
}
.graph-card-progress span{
 display:block;height:100%;background:#60ad8f;
 border-radius:8px;transition:width .3s ease
}
.graph-card-go{
 padding:4px 0 0;margin-top:2px;
 font-size:.69rem;line-height:1.35;
}
.graph-more-pictures{margin-top:17px;border-top:1px solid #e6e8e1;padding-top:11px}
.graph-more-pictures summary{
 font-size:.78rem;font-weight:850;color:#448f7d;cursor:pointer
}
.graph-more-pictures p{font-size:.74rem;color:#70818b}
.graph-extra-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.graph-game-focus{
 display:block;margin-top:1px;color:#668381;font-size:.69rem;
 max-width:450px;line-height:1.35
}
@media(min-width:780px){
 .graph-landing-intro{margin:9px auto 12px}
 .graph-landing-intro h1{font-size:clamp(1.85rem,3.15vw,2.7rem);margin:6px 0}
 .graph-landing-intro p{font-size:.84rem}
 .graph-picker-modes,.graph-picture-picker{padding:14px 17px;margin-top:10px}
 .graph-mode-card{padding:11px 14px}
 .graph-mode-icon{font-size:1.6rem}
 .graph-picture-picker .graph-picker-heading h2{font-size:1.43rem}
}
@media(min-width:780px) and (max-width:1120px){
 .graph-picture-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .graph-picture-card{flex-direction:row;gap:9px;padding:9px}
 .graph-picture-card svg{width:86px;height:90px;max-height:none;flex:none}
 .graph-picture-card .graph-card-maths{display:none}
 .graph-picture-card small{min-height:0}
 .graph-picture-card .graph-stage{min-height:0}
}
@media(max-width:779px){
 .graph-picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .graph-picture-card{padding:9px}
 .graph-picture-card svg{height:auto;max-height:155px}
 .graph-mode-card{padding:13px}
 .graph-card-maths{min-height:0}
 .graph-journey-status span{display:none}
}
@media(max-width:480px){
 .graph-picture-grid{grid-template-columns:1fr}
 .graph-picture-card{flex-direction:row;align-items:center;gap:12px}
 .graph-picture-card svg{width:94px;height:100px;flex:0 0 94px;max-height:none}
 .graph-picture-card .graph-stage{min-height:0}
 .graph-picture-card small,.graph-card-maths{min-height:0}
 .graph-stage-track{gap:3px}
 .graph-step-node{font-size:.57rem}
 .graph-step-number{width:25px;height:25px}
}

.graph-play{padding-top:5px}
.graph-game-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:5px 0 11px}
.graph-game-title{text-align:center}
.graph-game-title h1{font-size:clamp(1.35rem,2.6vw,2rem);margin:3px 0;color:#344b61;letter-spacing:-.04em}
.graph-quiet-button{border:0;background:transparent;color:#4d8d82;font:inherit;font-size:.79rem;font-weight:850;cursor:pointer;padding:8px}
.graph-piece-pill,.graph-canvas-count{font-size:.73rem;font-weight:850;background:#e7f3ed;color:#438978;border-radius:99px;padding:8px 12px}
.graph-progress-track{height:6px;border-radius:99px;background:#e4e6df;margin-bottom:13px;overflow:hidden}
#graphProgressFill{height:100%;width:0;background:#57a595;transition:width .4s}
.region-workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:14px;align-items:start}
.graph-canvas-panel,.graph-task-panel{padding:16px;min-width:0}
.graph-canvas-panel{position:sticky;top:10px}
.graph-panel-top,.graph-task-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.graph-panel-top h2,.graph-task-heading h2{font-size:1.17rem;letter-spacing:-.03em;color:#344c63;margin:3px 0}
.graph-frame{background:#fffcf9;border:1px solid #dce1da;border-radius:14px;display:flex;justify-content:center;padding:5px;overflow:hidden}
#graphArtGraph{width:100%;max-width:525px;height:auto;aspect-ratio:1;display:block;touch-action:manipulation;cursor:crosshair;outline-offset:3px}
.graph-canvas-footer{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:.69rem;line-height:1.5;color:#7d8e95}
.graph-canvas-key{white-space:nowrap}
.graph-piece-swatch{width:28px;height:28px;border-radius:9px}
.graph-task-lead{color:#627786;font-size:.8rem;line-height:1.55;margin:8px 0 14px}
.graph-rule-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.75rem;color:#496073}
.graph-rule-heading span{font-size:.7rem;color:#8a969d}
.graph-rule-list{display:flex;flex-direction:column;gap:6px;margin:11px 0 14px;max-height:245px;overflow:auto}
.graph-rule-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e3e7e2;border-radius:9px;background:#fafaf7;padding:10px 12px;color:#314d68;font-size:1.05rem;font-weight:800}
button.graph-rule-item{width:100%;font:inherit;cursor:pointer;text-align:left}
.graph-rule-item.selected{border-color:#62a897;background:#eaf7f0}
.graph-rule-item.done{color:#528b7b;background:#ebf4ed}
.graph-rule-item .rule-state{font-size:.68rem;font-weight:750;color:#71938b}
.graph-tool-hint{display:flex;gap:13px;align-items:center;border-radius:11px;background:#ecf7f2;padding:13px;color:#437668}
.graph-tool-hint>span{font-size:1.7rem}
.graph-tool-hint strong,.graph-tool-hint small{display:block}
.graph-tool-hint strong{font-size:.78rem}
.graph-tool-hint small{font-size:.72rem;line-height:1.5;margin-top:3px}
.graph-commands,.graph-choice-row,.graph-reveal-buttons{display:flex;gap:9px}
.graph-commands{margin-top:12px}
.graph-commands button{flex:1;font-size:.78rem}
.graph-commands .button-primary{flex:1.3}
.graph-selected-rule{border:1px solid #d7e3dc;background:#f0f7f3;border-radius:11px;padding:10px;margin-bottom:11px;text-align:center}
.graph-selected-rule .eyebrow{display:block;font-size:.62rem}
.graph-selected-rule strong{display:block;margin-top:6px;color:#395a67;font-size:1.38rem}
.graph-choice-set{border:0;margin:11px 0;padding:0}
.graph-choice-set legend{font-size:.78rem;font-weight:800;color:#455a72;margin-bottom:6px}
.graph-choice-row button{flex:1;min-height:42px;border-radius:9px;border:1px solid #dbe3dc;background:#fff;font:inherit;font-size:.8rem;font-weight:800;color:#465b70;cursor:pointer}
.graph-choice-row button[aria-pressed=true]{background:#e4f5ec;border-color:#5ea990;color:#287d6b}
.graph-full-button{width:100%;margin-top:4px}
.graph-build-controls.is-solved .graph-selected-rule,
.graph-build-controls.is-solved .graph-choice-set{display:none}
.graph-build-waiting{
  margin:5px 0;padding:12px 10px;text-align:center;
  border:1px solid #c7e4d5;background:#eaf8f0;color:#267358;
  border-radius:10px;font-size:.82rem;font-weight:800;line-height:1.45
}
.graph-next-piece{
  width:100%;min-height:47px;margin-top:12px;
  background:#276d64;box-shadow:0 4px 0 #1b514b;
  animation:graph-next-appear .4s ease-out both
}
.graph-next-piece:hover{background:#328878}
.graph-build-controls.is-solved .graph-overlap-note{
  border-color:#83bca7;background:#e3f5eb;margin-top:7px;
}
.graph-build-controls.is-solved .graph-overlap-note p{
  color:#315c50;font-size:.8rem;line-height:1.65
}
@keyframes graph-next-appear{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.graph-feedback{min-height:42px;margin:11px 0;padding:10px 12px;border:1px solid #e4e9df;border-radius:9px;background:#f6f8f4;color:#677c86;font-size:.78rem;line-height:1.5}
.graph-feedback.error{color:#a83c3c;background:#fff0ef;border-color:#edcac7}
.graph-feedback.success{color:#277e61;background:#ebf8ef;border-color:#bfe3ca}
.graph-help-actions{display:flex;align-items:center;justify-content:space-between;gap:7px}
.graph-help-actions span{font-size:.68rem;color:#929da5}
.graph-hint{font-size:.77rem;background:#fff6e9;padding:11px;border-radius:10px;color:#795f3d}
/* Every arrow is an explicit SVG shaft and polygon head, not a browser marker.
   The note connects arrow direction to the AND/intersection idea. */
.graph-overlap-note{
  display:flex;align-items:flex-start;gap:10px;margin-top:12px;
  padding:10px 12px;border:1px solid #cce5da;border-radius:10px;
  background:#edf8f2;color:#365e54;
}
.graph-overlap-symbol{
  font-size:1.5rem;line-height:1;flex:none;font-weight:800;color:#24866b
}
.graph-overlap-note strong{display:block;font-size:.75rem;color:#27725c}
.graph-overlap-note p{margin:3px 0 0;font-size:.72rem;line-height:1.5}
.graph-rule-item:disabled{opacity:1;cursor:default}
.graph-full-button:disabled{opacity:.67;cursor:wait}
.graph-choice-row button:disabled{cursor:default;opacity:.7}

.graph-summary{text-align:center;padding:50px 15px;background:#fffcf8;border-radius:19px;margin-top:24px}
.graph-summary h1{font-size:clamp(2rem,5vw,3.4rem);color:#335370;margin:12px 0}
.graph-summary p{color:#74848e}
.graph-summary-stats{font-size:.86rem;color:#548c7f;padding:16px}
.graph-summary-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.graph-how{margin-top:21px;padding:21px;border:1px solid #e8e1d9;background:#fffcf8;border-radius:18px}
.graph-how h2{font-size:1.26rem;margin:6px 0 15px}
.graph-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.graph-how-grid>div{padding:13px;border-radius:11px;background:#f7f2e9}
.graph-how-grid span{display:block;color:#c88d77;font-weight:900;margin-bottom:5px}
.graph-how-grid strong{font-size:.82rem;color:#3e5067}
.graph-how-grid p{font-size:.74rem;color:#778393;line-height:1.55}
.region-footer{display:flex;justify-content:space-between;align-items:center;padding:19px 0;color:#849098;font-size:.7rem}
.region-footer a{color:#438d7f;text-decoration:none}
.graph-reveal{border:0;border-radius:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:0;background:#182b43;color:#fff;overflow:hidden}
.graph-reveal::backdrop{background:#182b43}
.graph-reveal-layout{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:9px;height:100%;padding:clamp(15px,3vh,35px)}
.graph-reveal-head{display:flex;justify-content:space-between;align-items:start;gap:20px;width:100%;max-width:1200px}
.graph-reveal-head .eyebrow{color:#f0c4a0}
.graph-reveal-head h2{font-size:clamp(1.5rem,3.6vw,3rem);margin:7px 0;letter-spacing:-.04em}
.graph-reveal-close{border:1px solid #ffffff50;border-radius:50%;width:49px;height:49px;flex:none;color:#fff;background:#ffffff27;font-size:1.9rem;cursor:pointer}
.graph-reveal-board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
#graphRevealSvg{display:block;height:100%;max-height:min(68dvh,750px);max-width:100%;aspect-ratio:1;background:#fdf8ed;border:10px solid #f7eedb;border-radius:20px;filter:drop-shadow(0 20px 30px #0004)}
.graph-reveal-foot{text-align:center;width:100%;padding-bottom:7px}
.graph-reveal-foot p{font-size:.95rem;color:#d6e2e9;min-height:23px}
.graph-reveal-buttons{justify-content:center;flex-wrap:wrap}
.graph-reveal-buttons button{cursor:pointer;border:1px solid #ffffff60;background:#ffffff20;color:#fff;padding:11px 15px;border-radius:10px;font:inherit;font-size:.8rem;font-weight:800}
.graph-reveal-buttons button:hover{background:#ffffff35}
@keyframes graph-wrong{0%,100%{fill-opacity:.3}45%{fill:#dc454d;fill-opacity:.8}}
@keyframes graph-good{0%,100%{fill-opacity:.3}50%{fill:#55c994;fill-opacity:.9}}
/* Newly solved arrows slide a short distance into their satisfying half-plane.
   On the final line all arrows agree while the common region glows green. */
@keyframes graph-arrow-enter{
  from{opacity:.25;transform:translate(var(--graph-enter-x),var(--graph-enter-y))}
  70%{opacity:1;transform:translate(2px,0)}
  to{opacity:1;transform:translate(0,0)}
}
@keyframes graph-arrow-converge{
  0%{opacity:.7;transform:translate(var(--graph-enter-x),var(--graph-enter-y))}
  34%{opacity:1;transform:translate(0,0)}
  55%{filter:drop-shadow(0 0 6px #63e6af)}
  80%{filter:drop-shadow(0 0 2px #63e6af)}
  100%{opacity:1;filter:none;transform:translate(0,0)}
}
@keyframes graph-common-highlight{
  0%{fill-opacity:0;stroke-opacity:0}
  33%{fill-opacity:.22;stroke-opacity:1}
  60%{fill-opacity:.65;stroke-opacity:1}
  100%{fill-opacity:.36;stroke-opacity:.84}
}
.graph-wrong-flash{animation:graph-wrong .7s ease-in-out 2}
.graph-good-flash{animation:graph-good .8s ease-in-out 2}
.graph-arrow-enter{animation:graph-arrow-enter .65s cubic-bezier(.16,.8,.2,1) both}
.graph-arrow-converge{animation:graph-arrow-converge 2.35s ease-in-out both}
.graph-common-pulse{animation:graph-common-highlight 2.35s ease-in-out both}
@keyframes graph-build-settle{
  from{opacity:.6;fill-opacity:.5}
  to{opacity:1;fill-opacity:1}
}
.graph-build-settled{animation:graph-build-settle .55s ease-out both}
@media(max-width:780px){
 .graph-mode-grid,.graph-picture-grid,.graph-how-grid{grid-template-columns:1fr}
 .region-workspace{grid-template-columns:1fr;gap:10px}
 .graph-canvas-panel{position:static}
 .graph-landing-intro{margin-top:12px}
 .graph-picker-modes,.graph-picture-picker{padding:15px}
 .graph-play{padding-top:0}
 .graph-game-top{margin:3px 0 8px}
 .graph-canvas-panel{padding:10px}
 .graph-task-panel{padding:13px}
 #graphArtGraph{max-width:min(100%,46dvh,435px)}
 .graph-frame{padding:2px}
 .graph-rule-list{max-height:132px}
 .graph-canvas-footer{margin:4px 0 0}
 .graph-canvas-key{display:none}
 .graph-task-lead{margin:5px 0 7px}
 .graph-rule-item{padding:7px 10px}
 .graph-reveal-layout{padding:13px}
 #graphRevealSvg{max-height:58dvh}
}
@media(max-width:410px){
 .graph-mode-card{padding:12px}
 .graph-commands .button{padding:10px 7px}
 .graph-help-actions span{display:none}
 .graph-picture-card svg{width:90px;height:88px}
 .graph-reveal-head h2{font-size:1.35rem}
 #graphRevealSvg{max-height:52dvh;border-width:5px}
 .graph-reveal-buttons button{padding:9px}
}
@media(prefers-reduced-motion:reduce){
 .graph-wrong-flash,.graph-good-flash,.graph-arrow-enter,
 .graph-arrow-converge,.graph-common-pulse,
 .graph-build-settled,.graph-next-piece{animation:none!important}
 .graph-common-pulse{fill-opacity:.45}
 #graphProgressFill{transition:none}
}


/* Phase 4: learning help stays collapsed and subordinate to the game actions. */
.graph-learning-route {margin:7px 0 0;color:#617c81;font-size:.73rem;line-height:1.45}
.graph-learning-route summary {cursor:pointer;width:fit-content;text-decoration:underline;text-underline-offset:3px}
.graph-learning-route p {margin:6px 0 0;color:#667c83}
.graph-learning-route strong {color:#3e786b}
.graph-skill-note {font-size:.72rem;color:#5f887f;line-height:1.4}
.graph-why {margin:0 0 9px;border-radius:9px;border:1px solid #dce5df;background:#f8faf6;padding:8px 11px;color:#45645b;font-size:.76rem;line-height:1.5}
.graph-why[hidden] {display:none}
.graph-why summary {cursor:pointer;font-weight:750;width:fit-content}
.graph-why p {margin:6px 0 0}
.graph-why summary:focus-visible,.graph-learning-route summary:focus-visible,.graph-overlap-note summary:focus-visible {outline:2px solid #428e78;outline-offset:3px}
.graph-overlap-note {display:block}
.graph-overlap-note summary {display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.75rem}
.graph-overlap-note p {margin:6px 0 0 28px}
.graph-overlap-note:not([open]) {background:#f6faf6;border-color:#e1ebe4}
/* Design alignment pass 1: familiar picture statuses and non-destructive replay.
   Controls remain alongside the picture title on desktop and mobile. */
.graph-picture-card.is-complete{
  border-color:#b2d3c2;
  background:#f4faf5;
}
.graph-picture-card.is-complete .graph-card-go{
  color:#307e69;
  font-weight:850;
}
.graph-game-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  flex:0 0 auto;
}
.graph-restart-button{
  border:1px solid #d8dfd9;
  border-radius:9px;
  background:#fffdf9;
  padding:6px 10px;
  font-size:.72rem;
  color:#5f7280;
  white-space:nowrap;
  line-height:1.35;
}
.graph-restart-button:hover{
  background:#f1f7f2;
  border-color:#9cbdad;
  color:#357967;
}
.graph-restart-button:focus-visible{
  outline:3px solid #5c9d94;
  outline-offset:2px;
}
@media(max-width:540px){
  .graph-game-top{gap:7px}
  .graph-game-actions{gap:4px}
  .graph-game-actions .graph-piece-pill{
    font-size:.64rem;
    padding:7px 8px;
  }
  .graph-restart-button{padding:5px 7px;font-size:.67rem}
  .graph-game-title h1{font-size:clamp(1.17rem,5vw,1.5rem)}
}


/* Graph Art hub · Pass 2
   One compact three-decision workspace, following Pixel Art's desktop layout.
   Game and reveal screens retain their existing styling. */
.graph-hub-picker .graph-landing-intro{
  text-align:left;max-width:none;margin:2px 0 15px;
}
.graph-hub-picker .graph-landing-intro h1{
  margin:5px 0 4px;font-size:clamp(2rem,3.3vw,2.8rem);
  letter-spacing:-.07em;line-height:1.12;
}
.graph-hub-picker .graph-landing-intro p{
  margin:0;max-width:850px;font-size:.82rem;line-height:1.5;
}
.graph-hub-workspace{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1.08fr) minmax(0,.96fr);
  gap:13px;align-items:start;
}
.graph-hub-workspace>.graph-picker-modes,
.graph-hub-workspace>.graph-picture-picker,
.graph-hub-preview{
  min-width:0;margin:0;padding:16px;border:1px solid #e4e2d9;
  border-radius:18px;background:#fffcf8;
  box-shadow:0 7px 28px #384f4210;
}
.graph-hub-panel-heading{min-width:0;margin-bottom:11px}
.graph-hub-panel-heading .eyebrow{color:#b67f71;font-size:.64rem}
.graph-hub-panel-heading h2{font-size:1.06rem;margin:5px 0 0;color:#304760;line-height:1.2}
.graph-hub-picture-heading{
  display:flex;align-items:center;justify-content:space-between;
  gap:7px;min-width:0;
}
.graph-hub-picture-heading h2{min-width:0}
.graph-hub-picture-heading span{white-space:nowrap;font-size:.63rem;font-weight:800;color:#438a76}
.graph-hub-modes .graph-mode-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
}
.graph-hub-modes .graph-mode-card{
  min-height:68px;width:100%;text-align:left;
  gap:11px;padding:11px;
  border-width:1.5px;border-radius:12px;align-items:center;
}
.graph-hub-modes .graph-mode-card strong{font-size:.85rem;margin:0 0 4px}
.graph-hub-modes .graph-mode-card small{font-size:.67rem;line-height:1.36}
.graph-hub-modes .graph-mode-icon{
  flex:0 0 35px;display:grid;place-items:center;width:35px;height:35px;
  border-radius:10px;background:#e8f4ec;font-size:1.25rem;color:#3b907b;
}
.graph-hub-modes .graph-mode-card[aria-pressed="true"]{
  background:#eaf6ee;border-color:#65ae98;
  box-shadow:0 0 0 2px #b9e2cf61;
}
.graph-hub-modes .graph-mode-card[aria-pressed="true"] .graph-mode-icon{
  color:#247561;background:#d7eddf;
}
.graph-hub-modes .graph-mode-tick{font-size:.83rem}
.graph-hub-mode-description{
  color:#7b8590;font-size:.71rem;line-height:1.47;margin:11px 3px 1px;
}
.graph-hub-pictures .graph-stage-track{margin:3px 0 12px;gap:4px}
.graph-hub-pictures .graph-step-node{font-size:.55rem;gap:2px}
.graph-hub-pictures .graph-step-number{width:25px;height:25px;font-size:.71rem}
.graph-hub-pictures .graph-picture-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin:0;
}
.graph-hub-pictures .graph-picture-card{
  display:flex;flex-direction:row;align-items:center;
  text-align:left;gap:9px;min-height:68px;padding:7px 9px;
  border-radius:12px;width:100%;box-shadow:none;
}
.graph-hub-pictures .graph-picture-card>svg{
  flex:0 0 54px;width:54px;height:54px;max-height:none;
  margin:0;aspect-ratio:1;border-radius:7px;
}
.graph-hub-pictures .graph-picture-info{gap:2px;flex:1}
.graph-hub-pictures .graph-picture-card .graph-stage{
  font-size:.58rem;min-height:0;
}
.graph-hub-pictures .graph-picture-card strong{
  font-size:.81rem;min-height:0;margin:0;line-height:1.22;
}
.graph-hub-pictures .graph-picture-card small{
  display:none;min-height:0;
}
.graph-hub-pictures .graph-card-maths{
  display:none;min-height:0;
}
.graph-hub-pictures .graph-card-progress{margin-top:3px;height:3px}
.graph-hub-pictures .graph-card-go{
  font-size:.62rem;padding:0;line-height:1.24;
}
.graph-hub-pictures .graph-picture-card.is-recommended{
  background:#f5f9f3;border-color:#c6d9c9;box-shadow:none;
}
.graph-hub-pictures .graph-picture-card.is-selected{
  background:#e8f7ed;border-color:#5cab91;
  box-shadow:0 0 0 2px #a8d5bd54;
}
.graph-hub-pictures .graph-picture-card.is-selected .graph-card-go{color:#297661}
.graph-hub-pictures .graph-more-pictures{margin-top:11px;padding-top:9px}
.graph-hub-pictures .graph-extra-grid{
  grid-template-columns:minmax(0,1fr);gap:6px;
  margin-top:9px;
}
.graph-hub-preview{display:flex;flex-direction:column;gap:0}
.graph-hub-art-frame{
  position:relative;padding:12px;
  border-radius:15px;background:#f2f1e7;
  border:1px solid #e4e3d8;overflow:hidden;
}
.graph-hub-art-frame>svg{
  display:block;width:100%;height:auto;
  aspect-ratio:1;background:#fffdf8;border-radius:10px;
  box-shadow:0 6px 18px #37564b1a;
}
.graph-hub-art-sticker{
  position:absolute;right:4px;top:3px;
  padding:5px 8px;border-radius:8px;background:#f1d59c;
  color:#765d3b;font-size:.6rem;font-weight:900;
  transform:rotate(5deg);pointer-events:none;
}
.graph-hub-art-info{padding:13px 2px 10px}
.graph-hub-art-info>strong{
  display:block;color:#35526a;letter-spacing:-.03em;
  font-size:1rem;line-height:1.27;
}
.graph-hub-art-info p{line-height:1.5;margin:6px 0 0;color:#788791;font-size:.72rem}
.graph-hub-art-info #graphPreviewProgress{font-weight:850;color:#348775}
.graph-hub-start{width:100%;font-size:.88rem;min-height:48px;margin-top:auto}
.graph-hub-reassurance{
  margin:10px 0 0;text-align:center;color:#91a09d;
  line-height:1.4;font-size:.63rem;
}
.graph-hub-picker .graph-more-pictures summary{font-size:.72rem}
@media(min-width:781px) and (max-width:1100px){
  .graph-hub-workspace{
    grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    grid-template-areas:"modes preview" "pictures preview";
  }
  .graph-hub-modes{grid-area:modes}
  .graph-hub-pictures{grid-area:pictures}
  .graph-hub-preview{grid-area:preview;position:sticky;top:12px}
  .graph-hub-modes .graph-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .graph-hub-modes .graph-mode-card{min-height:74px;padding:9px}
  .graph-hub-modes .graph-mode-icon{flex-basis:27px;width:27px;height:27px;font-size:1.05rem}
  .graph-hub-modes .graph-mode-card strong{font-size:.77rem}
  .graph-hub-modes .graph-mode-card small{font-size:.61rem}
  .graph-hub-preview .graph-hub-art-frame>svg{max-height:min(42vh,360px)}
}
@media(max-width:780px){
  .graph-hub-picker .graph-landing-intro{
    text-align:left;margin:7px 0 15px;
  }
  .graph-hub-picker .graph-landing-intro h1{font-size:clamp(2.05rem,6vw,2.75rem)}
  .graph-hub-workspace{grid-template-columns:minmax(0,1fr);gap:11px}
  .graph-hub-workspace>.graph-picker-modes,
  .graph-hub-workspace>.graph-picture-picker,
  .graph-hub-preview{padding:14px}
  .graph-hub-modes .graph-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .graph-hub-modes .graph-mode-card{min-height:85px;padding:10px;gap:9px}
  .graph-hub-modes .graph-mode-card strong{font-size:.82rem}
  .graph-hub-modes .graph-mode-card small{font-size:.65rem}
  .graph-hub-pictures .graph-picture-grid{grid-template-columns:minmax(0,1fr)}
  .graph-hub-pictures .graph-picture-card{min-height:61px}
  .graph-hub-pictures .graph-picture-card>svg{width:47px;height:47px;flex-basis:47px}
  .graph-hub-preview .graph-hub-art-frame>svg{
    width:min(100%,310px);margin:0 auto;
  }
}
@media(max-width:420px){
  .graph-hub-modes .graph-mode-card{
    gap:6px;min-height:74px;padding:8px;
  }
  .graph-hub-modes .graph-mode-icon{
    flex:0 0 26px;width:26px;height:26px;font-size:1rem;
  }
  .graph-hub-modes .graph-mode-card strong{font-size:.75rem}
  .graph-hub-modes .graph-mode-card small{font-size:.61rem;line-height:1.3}
  .graph-hub-modes .graph-mode-tick{display:none}
  .graph-hub-picture-heading span{font-size:.58rem}
}


/* Phase 6: optional mastery remains outside the uncluttered five-stage cards. */
.graph-practice-section {margin-top:15px}
.graph-practice-cards {display:grid;grid-template-columns:minmax(0,245px);gap:11px;margin-top:12px}
.graph-practice-cards .graph-picture-card {min-width:0}
.graph-reverse-controls[hidden] {display:none}
.graph-reverse-controls .graph-tool-hint {margin-bottom:11px}
.graph-reverse-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.graph-reverse-options button {
  min-width:0;min-height:45px;border:1.5px solid #d4e1db;
  border-radius:11px;background:#fffdfa;color:#365468;
  padding:11px 9px;font:inherit;font-size:.98rem;font-weight:750;
  text-align:center;cursor:pointer;overflow-wrap:anywhere;
}
.graph-reverse-options button:hover,.graph-reverse-options button:focus-visible {
  background:#e9f5ee;border-color:#5aa794;outline-offset:2px
}
.graph-reverse-options button:disabled {opacity:.55;cursor:default}
.graph-reverse-controls .graph-next-piece {margin-top:10px}
@media(max-width:780px){
  .graph-practice-cards {grid-template-columns:minmax(0,1fr)}
  .graph-reverse-options button {min-height:48px}
}


/* Graph Art · difficulty-first challenges (same vocabulary as Pixel Art).
   The separate picture gallery remains optional; the maths comes first. */
.graph-hub-pictures .graph-difficulty-choices{
  display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin:8px 0 9px;
}
.graph-difficulty-card{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  min-height:57px;padding:8px 10px;border-radius:12px;
  border:1.5px solid #e0e4dc;background:#fffdf9;color:#344d61;
  font:inherit;cursor:pointer;transition:border-color .15s,background .15s;
}
.graph-difficulty-card:hover{border-color:#9ecbbb;background:#f3faf4}
.graph-difficulty-card.is-selected{
  background:#eaf7ee;border-color:#60aa91;
  box-shadow:0 0 0 2px #c5e6d343;
}
.graph-difficulty-card:focus-visible{
  outline:3px solid #e3aa69;outline-offset:2px;
}
.graph-difficulty-stamp{
  display:grid;place-items:center;width:33px;height:33px;flex:0 0 33px;
  background:#f3e6df;border-radius:9px;color:#bc796a;
  font-weight:900;font-size:.94rem;
}
.graph-difficulty-card.is-selected .graph-difficulty-stamp{
  background:#cfeadc;color:#2f8167;
}
.graph-difficulty-card.is-complete .graph-difficulty-stamp{
  background:#d6ece0;color:#347d64;
}
.graph-difficulty-info{display:grid;gap:3px;flex:1;min-width:0}
.graph-difficulty-info strong{font-size:.83rem;line-height:1.22}
.graph-difficulty-info small{font-size:.67rem;color:#778892;line-height:1.35}
.graph-difficulty-tick{font-size:1rem;color:#70aa96;font-weight:800}
.graph-hub-pictures .graph-mystery-hint{
  color:#4f786a;font-size:.73rem;line-height:1.45;
  background:#f2f8f2;border:1px dashed #cadfcf;border-radius:10px;
  margin:8px 0 10px;padding:9px 11px;
}
.graph-mystery-cta{display:grid;gap:7px;margin:9px 0 11px}
.graph-mystery-cta button{width:100%;min-height:43px;font-size:.83rem}
.graph-mystery-cta button[disabled],
.graph-hub-start[disabled]{opacity:.62;cursor:default}
.graph-hub-pictures .graph-mystery-gallery{
  margin-top:11px;padding-top:12px;border-top:1px solid #e8e8de;
}
.graph-hub-pictures .graph-mystery-gallery>summary{
  cursor:pointer;font-size:.77rem;font-weight:850;color:#426f67;
}
.graph-hub-pictures .graph-mystery-gallery>p{
  font-size:.69rem;color:#748694;line-height:1.42;margin:8px 0 10px;
}
.graph-hub-pictures .graph-mystery-gallery .graph-picture-grid{margin-top:9px}
.graph-hub-pictures .graph-mystery-gallery .graph-more-pictures{
  margin-top:12px;padding-top:10px;
}
.graph-hub-pictures .graph-stage-track{margin-bottom:9px}
.graph-hub-pictures .graph-step-node{flex:1;min-width:0}
.graph-hub-pictures .graph-step-node span:not(.graph-step-number){
  font-size:.53rem;max-width:75px;text-align:center;
}
.graph-hub-preview #graphPreviewName{font-size:1.04rem}
.graph-mystery-direct-link{
  display:inline-flex;justify-content:center;align-items:center;
  margin:10px 0 15px;padding:11px 16px;border-radius:11px;
  border:1px solid #aed6be;background:#e9f7ed;
  color:#347b64;font-size:.85rem;font-weight:850;text-decoration:none;
}
.graph-mystery-direct-link:hover{background:#dff1e4}
.graph-mystery-direct-link:focus-visible{outline:3px solid #e3aa69;outline-offset:3px}
@media(max-width:780px){
  .graph-hub-pictures .graph-difficulty-choices{gap:7px}
  .graph-difficulty-card{min-height:55px}
  .graph-mystery-cta button{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  .graph-difficulty-card{transition:none}
}

/* Graph Art My Mural navigation.
   The shared desktop header places .top-button items in the rightmost
   grid cell. My Mural MUST use the same separately positioned
   .mural-nav-link pattern as Pixel Art, or How to play overlaps it. */
.regions-page .graph-mural-link{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  text-decoration:none;white-space:nowrap;font-weight:850;font-size:.78rem;
  color:#2e7867;background:#e8f6ee;border:1px solid #a8d0be;
  border-radius:11px;min-height:39px;padding:9px 12px;
}
.regions-page .graph-mural-link .mural-nav-label{
  display:inline;white-space:nowrap;
}
.regions-page .graph-mural-link:hover{
  color:#236450;background:#d7f0e2;border-color:#75b49b;
}
.regions-page .graph-mural-link:focus-visible,
.regions-page .graph-mural-promo:focus-visible{
  outline:3px solid #d89a6d;outline-offset:3px;
}
.graph-mural-promo{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  border-radius:13px;border:1px solid #a8d3bf;background:#e8f7ee;
  color:#356a60;text-decoration:none;padding:12px 15px;font-size:.74rem;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.graph-mural-promo > .graph-mural-promo-kicker{
  font-size:.66rem;color:#387b67;font-weight:900;
  letter-spacing:.075em;white-space:nowrap;
}
.graph-mural-promo strong{color:#2d5a4f;font-size:.86rem;}
.graph-mural-promo > .graph-mural-promo-detail{
  color:#5d8074;font-size:.72rem;line-height:1.4;
}
.graph-mural-promo > .graph-mural-promo-action{
  margin-left:auto;background:#fffdf8;border:1px solid #8bbda6;
  border-radius:9px;padding:9px 12px;white-space:nowrap;
  font-weight:850;color:#236e58;font-size:.74rem;
}
.graph-mural-promo:hover,.graph-mural-promo:focus-visible{
  background:#dbf2e4;border-color:#7daf9c;
  box-shadow:0 5px 14px #40776113;
}
.graph-mural-promo:hover .graph-mural-promo-action{
  background:#f7fff9;border-color:#55947d;
}
@media(max-width:780px){
  .regions-page .graph-mural-link{
    min-height:36px;font-size:.72rem;padding:8px 11px;
  }
  .graph-mural-promo{flex-wrap:wrap;gap:6px 9px;padding:11px 12px;}
  .graph-mural-promo > .graph-mural-promo-detail{
    flex:1 1 100%;order:3;font-size:.67rem;
  }
  .graph-mural-promo > .graph-mural-promo-action{
    order:2;margin-left:auto;padding:7px 10px;
  }
}
@media(max-width:520px){
  /* On narrow phones, retain full button labels rather than hiding
     the destination behind an ambiguous star icon. */
  .regions-page .top-actions{flex-wrap:wrap;}
  .regions-page .studio-switch{flex:1 1 100%;width:100%;}
  .regions-page .graph-mural-link,
  .regions-page .graph-help-link{flex:1 1 0;justify-content:center;text-align:center;}
}


/* Optional Complex Quest extension takes the place of the former redundant
   three-card instruction panel, and only appears on the selection screen. */
.complex-invite{
  display:flex;align-items:center;gap:17px;margin:16px 0 0;
  padding:17px 21px;border:1px solid #bdd8cd;border-radius:17px;
  background:linear-gradient(115deg,#ebf8f0 0%,#fffcf5 75%);
  box-shadow:0 8px 25px #40645610;
}
.complex-invite-mark{
  flex:0 0 84px;width:84px;height:84px;border-radius:18px;
  display:grid;place-items:center;background:#e2f0e6;
  border:1px solid #cde5da;
}
.complex-invite-mark svg{width:73px;height:73px}
.complex-invite-copy{flex:1;min-width:0}
.complex-invite-copy .eyebrow{font-size:.64rem;color:#658f7f}
.complex-invite-copy h2{
  font-size:1.35rem;letter-spacing:-.045em;color:#30475d;margin:5px 0;
}
.complex-invite-copy p{
  font-size:.77rem;color:#71818a;line-height:1.55;
  margin:4px 0;max-width:630px;
}
.complex-invite-actions{
  display:grid;justify-items:end;gap:7px;flex:0 0 auto;
}
.complex-invite-actions .button{
  min-height:43px;text-decoration:none;font-size:.79rem;
  font-weight:850;padding:11px 17px;border-color:#83b8a7;
  color:#2e7a68;background:#fffef9;white-space:nowrap;
}
.complex-invite-actions .button:hover{
  background:#d9f2e5;border-color:#62a78e;
}
.complex-invite-actions span{font-size:.65rem;color:#748d86;text-align:right}
@media(max-width:780px){
 .complex-invite{padding:14px;gap:11px;align-items:flex-start;flex-wrap:wrap}
 .complex-invite-mark{width:55px;height:55px;flex-basis:55px;border-radius:12px}
 .complex-invite-mark svg{width:50px;height:50px}
 .complex-invite-copy{flex:1 1 calc(100% - 78px)}
 .complex-invite-copy h2{font-size:1.14rem}
 .complex-invite-copy p{font-size:.7rem}
 .complex-invite-actions{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:9px}
 .complex-invite-actions .button{font-size:.72rem;min-height:39px}
 .complex-invite-actions span{font-size:.61rem;max-width:150px}
}