/* Appearance surrounds puzzles; puzzle tokens, board cells and drawing canvases retain their colours. */
html{--scene-surface:#f5f6e9;--scene-ink:#233d35;--scene-muted:#526a5c;--scene-line:#c3d0bb;--scene-accent:#287b6e;--scene-radius:20px;background:#eeeede}
html[data-mode=dark]{--scene-surface:#142e26;--scene-ink:#edf4de;--scene-muted:#c0d1be;--scene-line:#48654e;--scene-accent:#98d1a4}
html[data-season]:not([data-season=original]) body{background:transparent!important;color:var(--scene-ink)}
#play-scenery{position:fixed;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-image:linear-gradient(#f5f1e526,#e5ebdf33),var(--scene-image);transform:scale(1.02)}
html[data-season=spring]{--scene-image:url('/assets/scenery/spring.webp')}
html[data-season=summer]{--scene-image:url('/assets/scenery/summer.webp')}
html[data-season=autumn]{--scene-image:url('/assets/scenery/autumn.webp')}
html[data-season=winter]{--scene-image:url('/assets/scenery/winter.webp')}
html[data-season=original] #play-scenery{display:none}
html[data-mode=dark] #play-scenery{background-image:linear-gradient(#0a251d70,#0a251d80),var(--scene-image)}
html[data-season]:not([data-season=original]) :is(.shell,.game-shell,.wrap,.app){position:relative;z-index:1;background:var(--scene-surface)!important;color:var(--scene-ink)!important;border-radius:var(--scene-radius);box-shadow:0 24px 70px #132c3033;margin-top:20px;margin-bottom:20px}
html[data-season]:not([data-season=original]) :is(.shell,.game-shell,.wrap)>:is(.hero,.intro,h1,h2,p,.eyebrow,.footer,.game-guide,.hub-intro,.label){color:var(--scene-ink)!important}
html[data-season]:not([data-season=original]) :is(.aside,.panel,.play-panel,.lobby,.phase-entry,.game-card){background:var(--scene-surface)!important;border-color:var(--scene-line)!important;color:var(--scene-ink)!important}
html[data-season]:not([data-season=original]) :is(.aside,.game-guide,.game-card,.phase-entry) :is(p,h2,summary,.small,.label,.rule){color:var(--scene-ink)!important}
html[data-season]:not([data-season=original]) :is(.game-guide details,.premium-controls button,.premium-controls select,.toolbar select,.select){background:var(--scene-surface)!important;color:var(--scene-ink)!important;border-color:var(--scene-line)!important}
html[data-season]:not([data-season=original]) .hub-nav a:not([aria-current=page]):not(.phase-tab){background:var(--scene-surface);color:var(--scene-ink);border-color:var(--scene-line)}
#play-appearance{position:relative;z-index:5;margin:14px 0;padding:10px 14px;border:1px solid var(--scene-line);border-radius:12px;background:var(--scene-surface);color:var(--scene-ink);font:12px/1.5 Arial,sans-serif}
#play-appearance summary{cursor:pointer;list-style:none;font-weight:700;min-height:28px;display:flex;align-items:center}
.appearance-options{display:flex;gap:14px;flex-wrap:wrap;padding:14px 0 4px}.appearance-options label{display:grid;gap:5px;flex:1;min-width:130px}.appearance-options select{min-height:42px;border:1px solid var(--scene-line);border-radius:8px;background:var(--scene-surface);color:var(--scene-ink);padding:8px;font:13px Arial,sans-serif}.appearance-options .motion-setting{display:flex;align-items:center;gap:8px;align-self:end;min-height:42px}.motion-setting input{accent-color:#287b6e;width:18px;height:18px}
#play-appearance :is(select,input,summary):focus-visible{outline:3px solid #43b39a;outline-offset:4px}
html[data-style=minimal]{--scene-radius:12px}html[data-style=nordic]{--scene-radius:20px}html[data-style=french]{--scene-radius:26px}
html[data-style=french] :is(.game-shell,.shell,.wrap)>h1{font-family:Georgia,serif;letter-spacing:-1px}
html[data-style=baroque] :is(.shell,.game-shell,.wrap,.app){border:2px solid #ac9055;outline:1px solid #ac905555;outline-offset:5px}
html[data-style=baroque] #play-appearance{border-color:#ac9055}html[data-style=baroque] :is(.game-shell,.shell,.wrap)>h1{font-family:Georgia,serif}
html[data-style=baroque] #play-scenery:after{content:'';position:absolute;inset:18px;border:1px solid #c4a96d80;box-shadow:inset 0 0 0 7px #c4a96d18;border-radius:50px}
.game-card{overflow:hidden;transition:transform .2s,box-shadow .2s;border-radius:var(--scene-radius)!important;box-shadow:0 8px 25px #12312610}.game-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #12312624}.game-art{display:block;width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:20px;background:#dce9db}.game-card h2{font-size:22px}.game-card a{display:inline-flex;align-items:center;min-height:44px;border-radius:9px}
.play-cookie-footer{position:relative;z-index:1;background:var(--scene-surface);color:var(--scene-ink)}
html[data-motion=on]:not([data-season=original]) #play-scenery{animation:scene-breathe 45s ease-in-out infinite alternate} @keyframes scene-breathe{from{transform:scale(1.02) translateX(-.3%)}to{transform:scale(1.06) translateX(.3%)}}
@media(prefers-reduced-motion:reduce){#play-scenery{animation:none!important}.game-card{transition:none}.game-card:hover{transform:none}}
html[data-motion=off] .game-card{transition:none}html[data-motion=off] .game-card:hover{transform:none}
@media(max-width:700px){html[data-season]:not([data-season=original]) :is(.shell,.game-shell,.wrap,.app){margin:8px;border-radius:14px}#play-appearance{padding:8px 10px}.appearance-options{gap:10px}.appearance-options label{min-width:115px}.game-art{height:150px}#play-scenery{background-position:40% center}}
/* Original scenery still allows independent light/dark selection for the surrounding UI. */
html[data-season=original] :is(.shell,.game-shell,.wrap,.app){color:var(--scene-ink);background:var(--scene-surface)}
html[data-mode=dark] .app{--bg:#142e26;--panel:#1a382e;--text:#edf4de;--muted:#c0d1be;--line:#48654e}
html[data-mode=light] .app{--bg:#f5f6e9;--panel:#f5f6e9;--text:#233d35;--muted:#526a5c;--line:#c3d0bb}
.focus-play #play-appearance{display:none}
.glade-page{isolation:isolate}
.glade-page>header,.glade-page>main,.glade-page>footer{position:relative;z-index:1}
.glade-page #play-appearance{max-width:1350px;margin:12px auto}
.glade-page .mobile-scene-preview{position:relative;z-index:1;margin:12px}
.glade-page .forest{isolation:isolate}
.glade-page .forest :is(h1,p,small,.plant,.empty){color:#fff4d4!important}
.glade-page :is(.layout>section,.layout>aside,.start-bar,nav[aria-label=Activity]){background:var(--scene-surface)!important;color:var(--scene-ink)!important;border-color:var(--scene-line)!important}
.glade-page :is(.layout,.start-bar)>:is(section,aside,div) :is(h2,p,li,summary,.fine,.goal,.goal small,.family,#message){color:var(--scene-ink)!important}
.glade-page :is(.path,.choice,.journal div){background:var(--scene-surface)!important;color:var(--scene-ink)!important}
html[data-mode=dark] :is(.panel,.play-panel,.aside,.lobby,.challenge,.how,.game-guide) :is(h1,h2,h3,p,li,summary,label,.small,.caption,.message,.statline,.statusline,.muted){color:#edf4de!important}
html[data-mode=light] :is(.lobby,.challenge,.how,.phase-entry,.game-guide,.game-card) :is(h1,h2,h3,p,li,summary,label,.small,.caption,.message){color:#233d35!important}
html[data-mode=dark] .panel :is(.tool,.quiet,.select),html[data-mode=dark] .premium-controls :is(button,select){background:#203e32!important;color:#edf4de!important;border-color:#68846c!important}
html[data-mode=dark] .panel .hint-coach{background:#244334!important;color:#edf4de!important}
/* STILL: compact editorial header, artwork-first cards, original touch/canvas behaviour. */
.still-page .still-back{position:relative;display:inline-flex;left:auto;top:auto;z-index:2;padding:12px 20px;color:var(--scene-ink);background:var(--scene-surface);border-radius:0 0 12px 0;min-height:44px}
.still-page .app{min-height:0!important;margin-top:8px!important;--bg:var(--scene-surface);--panel:var(--scene-surface);--text:var(--scene-ink);--muted:var(--scene-muted);--line:var(--scene-line)}
.still-page .hero{min-height:0!important;padding:28px 30px!important;border-radius:18px 18px 0 0;background:linear-gradient(90deg,var(--scene-surface),transparent 170%),var(--scene-image) center/cover!important;align-items:center}
.still-page .hero h1{font-size:clamp(48px,8vw,86px)!important;line-height:1;margin:6px 0;color:var(--scene-ink)!important}
.still-page .hero .eyebrow{margin-bottom:8px;color:var(--scene-muted)!important;font-size:10px}
.still-page .hero p{margin:12px 0 0;font-size:18px;color:var(--scene-ink)!important}
.still-page .hero small{margin-top:10px;font-size:12px;color:var(--scene-muted)!important;line-height:1.6}
.still-page #play-appearance{margin:10px 20px}
.still-page .mobile-scene-preview{display:none!important}
.still-page .section{padding:22px 24px 40px!important}
.still-page .section-title{align-items:start;margin-bottom:18px}.still-page .section-title h2{font-size:26px}.still-page .section-title p{font-size:13px}
.still-page .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.still-page .card,.still-page .card:first-child{grid-column:auto!important;min-height:0!important;background:var(--scene-surface);border:1px solid var(--scene-line);border-radius:18px;box-shadow:0 12px 30px #153b2414}
.still-page .card:after{display:none}
.still-page .card img{position:relative;display:block;width:100%;height:190px;object-fit:cover;inset:auto}
.still-page .card-copy{position:relative;left:auto;right:auto;bottom:auto;padding:18px;color:var(--scene-ink)!important}
.still-page .card :is(h3,p,.num){color:var(--scene-ink)!important}.still-page .card h3{font-size:25px;margin:8px 0}.still-page .card p{font-size:13px;line-height:1.6;min-height:62px}
.still-page .open-btn{background:#287b6e;color:#fff!important;border:0;min-height:44px;padding:12px 20px;letter-spacing:.06em}
.still-page .coming{margin-top:30px;padding-top:24px}.still-page .teaser{min-height:130px;color:#fff4e7}.still-page .teaser span{color:#fff4e7!important}
/* Drawing controls always keep light text on their own dark surfaces. */
.still-page .play,.still-page .modal,.still-page .sheet{color:#f4f0e8!important}.still-page .play-head :is(b,span,button){color:#f4f0e8!important}.still-page .toolbar :is(button,select,label){color:#f4f0e8!important}
@media(max-width:900px){.still-page .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.still-page .hero{padding:20px!important}.still-page .section{padding:18px 14px 28px!important}.still-page .section-title{display:block}.still-page .section-title p{margin-top:10px}.still-page .grid{grid-template-columns:1fr}.still-page .card img{height:200px}.still-page #play-appearance{margin:8px 14px}.still-page .card p{min-height:0}.glade-page #play-appearance{margin:8px 12px}}
.scene-hub .scenic-hub-hero{position:relative;min-height:310px;padding:30px;border-radius:16px;margin:20px 0;background:linear-gradient(90deg,var(--scene-surface),transparent 95%),var(--scene-image) center/cover;color:var(--scene-ink)}
.scenic-hub-hero .eyebrow{margin-top:0!important}.scenic-hub-hero h1{position:relative;margin:25px 0;max-width:65%;font:normal clamp(35px,5vw,62px)/1.08 Georgia,serif}.scenic-hub-hero .hub-intro{max-width:62%;position:relative}.scenic-hub-hero .hub-logo-hero{position:absolute;right:24px;top:40px;width:140px}.scenic-hub-hero .hub-logo-hero img{width:100%;border-radius:12px;box-shadow:0 10px 30px #12312618}
.scene-hub main.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.scene-hub main.cards .game-card{padding:14px}.scene-hub main.cards h2{font-size:20px}.scene-hub main.cards p{font-size:12px;line-height:1.7}.game-art{background-image:url('/assets/scenery/game-art.webp');background-size:200% 200%;height:auto;aspect-ratio:3/2}.art-0{background-position:0 0}.art-1{background-position:100% 0}.art-2{background-position:0 100%}.art-3{background-position:100% 100%}
.still-hub-card{position:relative;background:linear-gradient(100deg,var(--scene-surface),#daa48722)!important}.still-dots{float:right;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at center,#dc9c78 3px,transparent 4px),radial-gradient(circle at center,#5ba191 2px,transparent 3px);background-size:18px 18px,30px 30px;color:#287b6e;font:70px Georgia;display:grid;place-items:center;opacity:.85}
html[data-mode=dark] .scenic-hub-hero{background:linear-gradient(90deg,#142e26,#142e2640),var(--scene-image) center/cover}
html[data-style=french] .scenic-hub-hero{border:1px solid #b3b89b}html[data-style=baroque] .scenic-hub-hero{border:1px solid #ac9055;box-shadow:inset 0 0 0 6px #ac90551a}
@media(max-width:850px){.scene-hub main.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.scene-hub .scenic-hub-hero{padding:20px;min-height:280px}.scenic-hub-hero h1{max-width:100%;font-size:38px}.scenic-hub-hero .hub-logo-hero{position:relative;float:right;right:0;top:0;width:65px;margin:0 0 12px 15px}.scenic-hub-hero .hub-intro{max-width:100%}.scene-hub main.cards h2{font-size:17px}.still-dots{width:90px;height:90px}.scene-hub main.cards .game-card{padding:12px}}
html[data-style=minimal] #play-scenery{filter:saturate(.7)}html[data-style=nordic] #play-scenery{filter:saturate(.82)}html[data-style=french] #play-scenery{filter:saturate(.92) sepia(.06)}html[data-style=baroque] #play-scenery{filter:saturate(1.08)}
html[data-style=baroque] .game-card{border:1px solid #a99261!important;box-shadow:0 10px 25px #55442620}
html[data-style=french] .game-card{border-radius:18px!important}html[data-style=minimal] .game-card{box-shadow:none}
html[data-mode=light] .wrap :is(.intro,.hero,.lobby,.how,.aside-note,.game-guide,.footer,.label,.small){color:var(--scene-ink)!important}
html[data-mode=dark] .shell :is(.hero,.aside,.game-guide,.footer,.label,.small,.message){color:var(--scene-ink)!important}
/* Mobile must show scenery inside the viewport, not only behind opaque page shells. */
.mobile-scene-preview{display:none}
.extra-game-art{background:none;height:auto;aspect-ratio:5/3;object-fit:cover}
.still-painted-art{height:180px;margin-bottom:20px;border-radius:12px;background:radial-gradient(circle,#edb170 3px,transparent 4px) 0 0/20px 20px,radial-gradient(circle,#709e83 3px,transparent 4px) 10px 10px/25px 25px,linear-gradient(120deg,#eadcc6,#c9e2d8,#ddd0e8);box-shadow:inset 0 0 30px #ffffff66}
.scene-hub .cards{gap:18px}.game-card>.symbol{display:none}
@media(max-width:700px){
 #play-appearance{display:block!important;margin:12px 0;border:1px solid #78ab91;box-shadow:0 5px 18px #15362912}
 #play-appearance summary{min-height:44px;font-size:14px}
 .appearance-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .appearance-options label{min-width:0}.appearance-options select{width:100%;font-size:16px;min-height:46px}.appearance-options .motion-setting{font-size:13px}
 html:not([data-season=original]) .mobile-scene-preview{display:block;height:145px;border-radius:12px;background:linear-gradient(#ffffff08,#ffffff08),var(--scene-image) center 55%/cover;margin-bottom:18px;box-shadow:0 5px 18px #163c2420}
 html[data-mode=dark] .mobile-scene-preview{background:linear-gradient(#122c2640,#122c2640),var(--scene-image) center 55%/cover}
 .scene-hub .mobile-scene-preview{display:none!important}
 .scene-hub .scenic-hub-hero{background:linear-gradient(180deg,var(--scene-surface) 0%,transparent 135%),var(--scene-image) center/cover;min-height:330px;padding-bottom:85px}
 .scene-hub .cards,.scene-hub main.cards{grid-template-columns:minmax(0,1fr)!important;gap:18px}
 .scene-hub .cards .game-card{padding:17px!important}.scene-hub .cards .game-art{height:auto;aspect-ratio:3/2}.scene-hub .cards .extra-game-art{aspect-ratio:5/3}
 .scene-hub .cards .game-card h2{font-size:23px}.scene-hub .cards .game-card p{font-size:14px;line-height:1.65}.scene-hub .cards .game-card a{min-height:46px;font-size:14px}
}
/* Shared dark-mode action contrast. Exclude puzzle cells, coloured palettes and garden artwork. */
html[data-mode=dark][data-mode=dark][data-mode=dark] body button:not(:where(#board *,#cross-board *,#palette *,.palette *,.lenses *,#garden *,.cell,.swatch,.tile,.colour,.plant,.island-button)),
html[data-mode=dark][data-mode=dark][data-mode=dark] body select:not(:where(#board *,#palette *)){
 background:#203e32!important;background-image:none!important;color:#f3f8e8!important;-webkit-text-fill-color:#f3f8e8!important;border-color:#7a9c88!important;
}
html[data-mode=dark][data-mode=dark][data-mode=dark] body button:not(:where(#board *,#cross-board *,#palette *,.palette *,.lenses *,#garden *,.cell,.swatch,.tile,.colour,.plant,.island-button)):is([aria-pressed=true],.active,.primary,.gold),
html[data-mode=dark][data-mode=dark][data-mode=dark] body .game-card a{
 background:#2b6656!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#96c5ae!important;
}
html[data-mode=dark][data-mode=dark][data-mode=dark] body button:not(:where(#board *,#cross-board *,#palette *,.palette *,.lenses *,#garden *,.cell,.swatch,.tile,.colour,.plant,.island-button)):disabled{
 opacity:1!important;background:#293b32!important;color:#bdcdbf!important;-webkit-text-fill-color:#bdcdbf!important;border-color:#637a69!important;
}
html[data-mode=dark][data-mode=dark][data-mode=dark] body button:not(:where(#board *,#cross-board *,#palette *,.palette *,.lenses *,#garden *,.cell,.swatch,.tile,.colour,.plant,.island-button)) :is(span,b,strong,small),
html[data-mode=dark][data-mode=dark][data-mode=dark] body select option{color:inherit!important;-webkit-text-fill-color:inherit!important}
html[data-mode=dark][data-mode=dark][data-mode=dark] body .game-card a :is(span,b,strong){color:inherit!important}
html[data-mode=dark][data-mode=dark][data-mode=dark] body :is(.tools,.toolbar,.actions,.launch,.bottom-tools,.dialogactions,.pad,.pot-options,.lesson-actions,.detail-actions) button:focus-visible{outline:3px solid #b5efd0!important;outline-offset:3px}
/* Consistent, tactile action styling; puzzle/navigation direction controls are excluded. */
body button.premium-action,body .game-card a.premium-action,body .open-btn.premium-action,body .play-now.premium-action{
 border-radius:12px!important;min-height:44px;border:1px solid #95b3a3;padding:11px 17px;letter-spacing:.015em;font-weight:600;box-shadow:0 2px 0 #193d2612,0 5px 14px #193d2610;transition:box-shadow .18s ease,transform .18s ease;
}
body button.premium-action:hover,body .game-card a.premium-action:hover{box-shadow:0 4px 18px #193d2626}
body button.premium-action:active,body .game-card a.premium-action:active{transform:translateY(1px)}
html[data-mode=light] body button.premium-action:not(.primary):not(.gold):not(.open-btn):not([aria-pressed=true]){background:#edf3e6!important;color:#264e40!important;-webkit-text-fill-color:#264e40!important;border-color:#91ad96!important}
body .game-card a.premium-action{background:#2b6656!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#2b6656!important;text-decoration:none!important;padding:12px 20px!important;justify-content:center;gap:0}
body .game-card a.premium-action:after{content:none!important}
.extra-premium-art{background-image:url('/assets/scenery/extra-games.webp');background-size:300% 200%;height:auto;aspect-ratio:1;display:block;width:100%;border-radius:12px;margin-bottom:20px}
.extra-art-0{background-position:0 0}.extra-art-1{background-position:50% 0}.extra-art-2{background-position:100% 0}.extra-art-3{background-position:0 100%}.extra-art-4{background-position:50% 100%}.extra-art-5{background-position:100% 100%}
@media(max-width:700px){.extra-premium-art{aspect-ratio:1.35}.game-card a.premium-action{width:100%}}
@media(prefers-reduced-motion:reduce){body .premium-action{transition:none!important;transform:none!important}}
/* Light gameplay surfaces keep their own ink even inside a dark surround. */
html[data-mode] body #board :is(.digit,.pencil i,.notes){color:#244b40!important;-webkit-text-fill-color:#244b40!important}
html[data-mode] body #board .fixed .digit{color:#203c34!important;-webkit-text-fill-color:#203c34!important}
html[data-mode] body.still-page #toolbar :is(label,output,.studio-actions>span){color:#294b40!important;-webkit-text-fill-color:#294b40!important}
html[data-mode] body.still-page .studio-status{color:#294b40!important;-webkit-text-fill-color:#294b40!important}
html[data-mode] body [data-card-tone=light]{background:#f2f0e3!important;color:#23433a!important}
html[data-mode] body [data-card-tone=light] :is(h1,h2,h3,p,span,small,label,strong,b){color:#23433a!important;-webkit-text-fill-color:#23433a!important}
/* Card ink belongs to the card surface, independently of the page appearance.
   In particular, Original + Dark must never put pale text on retained cream cards. */
html[data-mode][data-mode] body :is(.game-card,.phase-entry){
 --card-ink:#233d35;--card-muted:#465f53;
 background:#fffaf3!important;color:var(--card-ink)!important;
}
html[data-mode][data-mode] body :is(.game-card,.phase-entry) :is(h1,h2,h3,h4,p,li,summary,label,small,span,strong,b,.calm-card-tag,.muted):not(:where(a *,button *,.game-art *,.extra-premium-art *)){
 color:var(--card-ink)!important;-webkit-text-fill-color:var(--card-ink)!important;
}
html[data-mode][data-mode] body :is(.game-card,.phase-entry) :is(.calm-card-tag,.small,.muted){
 color:var(--card-muted)!important;-webkit-text-fill-color:var(--card-muted)!important;
}
html[data-mode][data-mode] body :is(.game-card,.phase-entry)>a{
 background:#2b6656!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
}