/* ΠΑΡΕΑ · Χαρούμενες λεπτομέρειες που σέβονται τον ρυθμό κάθε παιδιού. */
body.parea-wonder {
  --wonder-sky: #b3e3d1;
  --wonder-sun: #f9d995;
  --wonder-rose: #edc3d8;
  --wonder-glow: rgb(119 185 142 / 19%);
}
body.parea-wonder[data-age="2-4"] { --wonder-sky:#d9e6b1; --wonder-sun:#f7d388; --wonder-rose:#f3c9ae; --wonder-glow:rgb(157 177 107 / 20%); }
body.parea-wonder[data-age="4-6"] { --wonder-sky:#cfc5eb; --wonder-sun:#f7d2a1; --wonder-rose:#eab6cf; --wonder-glow:rgb(186 135 167 / 18%); }
body.parea-wonder[data-age="6-8"] { --wonder-sky:#a7ddd7; --wonder-sun:#eeda9c; --wonder-rose:#c4d8f2; --wonder-glow:rgb(93 174 171 / 17%); }
body.parea-wonder[data-age="8-10"] { --wonder-sky:#becbf1; --wonder-sun:#eddbaa; --wonder-rose:#d7c4f1; --wonder-glow:rgb(124 135 189 / 18%); }

/* Η διακόσμηση μένει κάτω από το κείμενο και δεν δέχεται αγγίγματα. */
.parea-wonder .wonder-host { position:relative; isolation:isolate; }
.parea-wonder .wonder-sky { position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none; user-select:none; }
.parea-wonder .wonder-sky::before {
  content:""; position:absolute; width:min(46vw,450px); aspect-ratio:1; right:-13%; top:-32%; border-radius:50%;
  background:radial-gradient(circle at 37% 41%,var(--wonder-sun) 0,transparent 64%);
  opacity:.31; filter:blur(10px);
}
.parea-wonder .wonder-sky::after {
  content:""; position:absolute; width:min(38vw,360px); aspect-ratio:1; left:-14%; bottom:-64%; border-radius:50%;
  background:radial-gradient(circle,var(--wonder-sky),transparent 68%); opacity:.28;
}
.parea-wonder .wonder-sky i {position:absolute;display:block; width:10px;height:10px;border-radius:36% 64% 47% 53%; transform:rotate(22deg);background:var(--wonder-sun); opacity:.7;box-shadow:0 0 0 5px rgb(255 255 255 / 12%);}
.parea-wonder .wonder-sky i:nth-child(1) {left:8%;top:12%;width:6px;height:6px;animation:wonder-float 8s ease-in-out 1s infinite alternate;}
.parea-wonder .wonder-sky i:nth-child(2) {right:16%;top:15%;width:12px;height:12px;background:var(--wonder-rose);animation:wonder-float 10s ease-in-out -2s infinite alternate;}
.parea-wonder .wonder-sky i:nth-child(3) {right:7%;bottom:22%;width:7px;height:7px;animation:wonder-float 9s ease-in-out -4s infinite alternate;}
.parea-wonder .wonder-sky i:nth-child(4) {left:24%;bottom:12%;width:9px;height:9px;background:var(--wonder-sky);animation:wonder-float 11s ease-in-out -6s infinite alternate;}
.parea-wonder .wonder-sky i:nth-child(5) {right:39%;top:8%;width:5px;height:5px;background:var(--wonder-sky);animation:wonder-float 12s ease-in-out -3s infinite alternate;}
.parea-wonder .wonder-sky i:nth-child(6) {left:46%;bottom:24%;width:6px;height:6px;background:var(--wonder-rose);animation:wonder-float 10s ease-in-out -5s infinite alternate;}
@keyframes wonder-float { 0%,100%{translate:0 0;opacity:.54} 50%{translate:4px -12px;opacity:.95} }
@keyframes wonder-breathe { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)} }

/* Χαρούμενο αλλά διακριτικό καλωσόρισμα στις ξεχωριστές γωνιές της ΠΑΡΕΑΣ. */
@media (prefers-reduced-motion:no-preference) {
 .parea-wonder :is(.intro-picture svg,.hub-illustration svg,.welcome-mark img,.story-hub-hero .hub-art svg) { animation:wonder-breathe 8s ease-in-out infinite; transform-origin:center; }
}
/* Το φωτεινό φόντο ακολουθεί τις ήδη υπάρχουσες επιφάνειες, δεν τις καλύπτει. */
.parea-wonder :is(.world-card,.age-card,.hub-tile,.story-hub-card,.scenario,.welcome-stat,.welcome-card,.library-item,.story-card-art) {
  backface-visibility:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.25,1),box-shadow .25s ease,border-color .25s ease,filter .25s ease;
}
.parea-wonder :is(.world-card,.age-card,.hub-tile,.story-hub-card,.scenario,.welcome-stat,.welcome-card,.guide-card,.aside-card) { box-shadow:0 8px 24px rgb(53 90 71 / 6%),0 1px 0 rgb(255 255 255 / 75%) inset; }
.parea-wonder :is(.age-card,.world-card,.hub-tile,.story-hub-card,.scenario) { position:relative; }
.parea-wonder :is(.age-card,.world-card,.hub-tile,.story-hub-card,.scenario)::before {
 content:""; position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(117deg,transparent 18%,rgb(255 255 255 / 46%) 47%,transparent 73%);
 opacity:0;transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .parea-wonder:not(.quiet):not(.reduced-motion) :is(.world-card,.age-card,.hub-tile,.story-hub-card,.scenario):hover {
  transform:translateY(-4px);box-shadow:0 17px 34px var(--wonder-glow),0 2px 8px rgb(45 75 59 / 7%);
 }
 .parea-wonder:not(.quiet):not(.reduced-motion) :is(.world-card,.age-card,.hub-tile,.story-hub-card,.scenario):hover::before {opacity:1;}
 .parea-wonder:not(.quiet):not(.reduced-motion) :is(.world-card,.story-hub-card,.hub-tile):hover :is(.world-art svg,.story-card-circle svg,.tile-art) {transform:translateY(-2px) scale(1.035);}
 .parea-wonder :is(.world-art svg,.story-card-circle svg,.tile-art) {transition:transform .3s cubic-bezier(.2,.8,.3,1);}
}
.parea-wonder :is(button,.btn,.hub-main-cta,.hub-start,.outlined-button,.story-card-foot button,.hub-tail a,.story-hub-bottom a) { -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion:no-preference) {
 .parea-wonder:not(.quiet):not(.reduced-motion) :is(button,.btn,.hub-start,.hub-main-cta):not(:disabled):active {transform:scale(.977);}
}
.parea-wonder :is(button,a,select,input,textarea):focus-visible {outline:3px solid #b27737;outline-offset:4px;}
.parea-wonder .wonder-arrived {animation:wonder-arrive .56s cubic-bezier(.2,.7,.2,1) 1 both;}
@keyframes wonder-arrive {from{opacity:.78;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

/* Μικρές φωτεινές πινελιές μόνο όταν γίνεται επιλογή. */
.wonder-burst {position:fixed;top:0;left:0;z-index:9999;pointer-events:none;user-select:none;width:10px;height:10px;font-size:17px;line-height:1;color:var(--wonder-particle,#e9b66a);text-shadow:0 1px 5px rgb(255 255 255 / 80%);animation:wonder-twink .68s cubic-bezier(.2,.65,.36,1) both;}
@keyframes wonder-twink {0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}22%{opacity:.94}100%{opacity:0;transform:translate(calc(-50% + var(--dx,12px)),calc(-50% + var(--dy,-27px))) scale(1.2) rotate(var(--turn,60deg))}}
.parea-wonder .wonder-highlight {animation:wonder-glow .72s ease-out 1;}
@keyframes wonder-glow {0%{filter:brightness(1)}35%{filter:brightness(1.08)}100%{filter:brightness(1)}}

/* Ζωγραφική στον φωτεινό πίνακα του ρομπότ. */
.parea-wonder .matrix-art {margin-top:14px;border:1px solid #cfe1d4;border-radius:16px;background:linear-gradient(140deg,#f5fbf5,#fffcf5);overflow:hidden;}
.parea-wonder .matrix-art summary {cursor:pointer;list-style:none;min-height:51px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:850;color:#34634c;}
.parea-wonder .matrix-art summary::-webkit-details-marker{display:none;}
.parea-wonder .matrix-art summary::after{content:"＋";font-size:21px;font-weight:500;line-height:1;color:#517b63;}
.parea-wonder .matrix-art[open] summary::after{content:"−";}
.parea-wonder .matrix-art summary:focus-visible{outline:3px solid #ab7836;outline-offset:-4px;border-radius:13px;}
.parea-wonder .matrix-art-panel{padding:0 14px 15px;}
.parea-wonder .matrix-art-panel>p{font-size:12px;line-height:1.6;color:#557267;margin:0 0 12px;}
.parea-wonder .matrix-art-palette{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px;}
.parea-wonder .matrix-art-palette button {width:43px;height:43px;border:2px solid #d3dfd5;background:#fff;border-radius:13px;padding:5px;display:grid;place-items:center;cursor:pointer;}
.parea-wonder .matrix-art-palette button::after{content:"";display:block;width:24px;height:24px;border-radius:50%;background:var(--art-swatch);box-shadow:0 2px 8px var(--art-swatch),inset 0 1px 0 #fff9;}
.parea-wonder .matrix-art-palette button[aria-pressed="true"]{border-color:#375d4b;box-shadow:0 0 0 2px #aacdb9;}
.parea-wonder .matrix-art-templates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:9px;}
.parea-wonder .matrix-art-templates button,.parea-wonder #matrix-art-clear {min-height:43px;border:1px solid #bcd5c3;background:#fff;color:#305944;font-weight:750;font-size:12px;border-radius:11px;padding:8px 10px;}
.parea-wonder .matrix-art-templates button:hover,.parea-wonder #matrix-art-clear:hover{background:#e8f7ed;}
.parea-wonder #matrix-art-clear{width:100%;}
.parea-wonder #matrix-art-status{font-size:12px;color:#48705b;line-height:1.5;margin:9px 0 0;min-height:18px;}
.parea-wonder #pixel-display.is-drawing {cursor:crosshair;touch-action:none;}
.parea-wonder #pixel-display.is-drawing:focus-visible {outline:3px solid #ffde8c;outline-offset:4px;border-radius:8px;}

/* Μειωμένη κίνηση και ήσυχη επιλογή μέσα στην εφαρμογή. */
@media (prefers-reduced-motion:reduce) {
 .parea-wonder .wonder-sky i,.parea-wonder .wonder-arrived,.parea-wonder .wonder-highlight,.wonder-burst,
 .parea-wonder :is(.intro-picture svg,.hub-illustration svg,.welcome-mark img,.story-hub-hero .hub-art svg) {animation:none!important;}
 .parea-wonder :is(.world-card,.age-card,.hub-tile,.story-hub-card,.scenario):hover {transform:none!important;}
 .parea-wonder :is(.age-card,.world-card,.hub-tile,.story-hub-card,.scenario)::before{display:none;}
}
.parea-wonder.quiet .wonder-sky i,.parea-wonder.reduced-motion .wonder-sky i,
.parea-wonder.quiet .wonder-arrived,.parea-wonder.reduced-motion .wonder-arrived,
.parea-wonder.quiet :is(.intro-picture svg,.hub-illustration svg,.welcome-mark img,.story-hub-hero .hub-art svg),
.parea-wonder.reduced-motion :is(.intro-picture svg,.hub-illustration svg,.welcome-mark img,.story-hub-hero .hub-art svg){animation:none!important;}
@media (max-width:520px){.parea-wonder .wonder-sky i:nth-child(n+4){display:none;}.parea-wonder .matrix-art{margin-top:11px;}.parea-wonder .matrix-art summary{padding-inline:12px;}}
@media (forced-colors:active){.parea-wonder .wonder-sky,.wonder-burst{display:none!important;}.parea-wonder .matrix-art-palette button[aria-pressed="true"]{outline:3px solid Highlight;}}