/* Álom Festő – finomítás: puhább felületek, 3D gombok, kabalafigura. Az app.css után töltődik. */
:root{
  --edge-primary:#a3134f;--edge-soft:#f4c6d9;--edge-back:#cfc2ee;
  --paper:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.7) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 62%,rgba(255,255,255,.7) 0 2px,transparent 3px),
    radial-gradient(circle at 44% 88%,rgba(240,111,164,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 90% 12%,rgba(240,111,164,.16) 0 3px,transparent 4px);
}
body{background:var(--paper),radial-gradient(ellipse at 50% -10%,#ffeef6 0,var(--surface-page) 60%);background-size:90px 90px,130px 130px,110px 110px,150px 150px,auto;background-attachment:fixed}

/* Fejléc: finom fény és hullámos alsó él */
.draw-top,.site-head{position:relative;z-index:2;background:radial-gradient(circle at 12% -60%,rgba(255,255,255,.22),transparent 45%),radial-gradient(circle at 90% 160%,rgba(255,255,255,.14),transparent 45%),var(--brand-500)}
.draw-top::after,.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;background:radial-gradient(circle at 12px 0,var(--brand-500) 11px,transparent 12px) repeat-x;background-size:24px 14px;pointer-events:none}
@media (max-width:767px){.draw-top::after{display:none}}
.af-logo{box-shadow:0 4px 0 rgba(0,0,0,.12)}

/* 3D gombok */
.af-btn{transition:transform 120ms ease,box-shadow 120ms ease,background-color 150ms ease}
.af-btn--primary{background:linear-gradient(180deg,#e2377f,var(--brand-500));box-shadow:0 5px 0 var(--edge-primary),0 12px 22px rgba(214,31,105,.3)}
.af-btn--soft{box-shadow:0 5px 0 var(--edge-soft)}
.af-btn--back{box-shadow:0 5px 0 var(--edge-back)}
.af-btn--float{box-shadow:0 4px 0 var(--edge-soft),0 8px 18px rgba(214,31,105,.18)}
.af-btn:not(:disabled):active{transform:translateY(3px) scale(.98)}
.af-btn--primary:not(:disabled):active{box-shadow:0 2px 0 var(--edge-primary),0 6px 12px rgba(214,31,105,.25)}
.af-btn--soft:not(:disabled):active,.af-btn--back:not(:disabled):active{box-shadow:0 2px 0 var(--edge-soft)}
.af-btn:disabled{box-shadow:none}
.af-tool{border-radius:22px;box-shadow:0 4px 0 var(--edge-soft)}
.af-tool[aria-pressed="true"]{background:linear-gradient(180deg,#e2377f,var(--brand-500));box-shadow:0 4px 0 var(--edge-primary),0 8px 16px rgba(214,31,105,.3);transform:translateY(-2px)}
.hist-btn,.chip{transition:transform 120ms ease,background-color 150ms ease}

/* Vászon és panelek */
.af-canvas{border-color:var(--brand-300);box-shadow:0 0 0 8px rgba(255,255,255,.75),0 18px 40px rgba(214,31,105,.18)}
.controls,.card,.step,.af-palette{border:2px solid rgba(240,111,164,.14)}
.card,.step,.controls{box-shadow:0 10px 26px rgba(214,31,105,.1)}
.af-crayon .stick{position:relative;overflow:hidden}
.af-crayon .stick::after{content:"";position:absolute;left:18%;top:12%;width:34%;height:26%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-30deg)}
.af-crayon .stick.white::after{background:rgba(240,111,164,.15)}
.af-prompt{box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.af-star.on{box-shadow:0 0 0 3px rgba(255,201,60,.35)}

/* Kabalafigura */
.mascot{display:block;width:150px;height:auto;filter:drop-shadow(0 8px 10px rgba(214,31,105,.2))}
.mascot--lg{width:min(300px,70vw)}
.mascot--sm{width:96px}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.bob{animation:none}}
.empty .mascot{width:150px}
.empty .bubble,.hero-art .bubble{background:var(--surface-card);color:var(--brand-700);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-6);box-shadow:var(--shadow-soft);font-family:var(--font-display);font-size:24px;line-height:30px;font-weight:800;position:relative}
.empty .bubble::before{content:"";position:absolute;left:50%;top:-10px;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom-color:var(--surface-card)}
.party-card .mascot{margin:0 auto var(--space-2)}
.hero-mascot{position:relative;display:grid;place-items:center;min-height:260px}
.hero-mascot::before{content:"";position:absolute;inset:6% 12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(240,111,164,.14) 70%,transparent 71%)}
.hero-mascot .mascot{position:relative}
.spark{position:absolute;color:var(--star);font-size:30px;animation:tw 2.4s ease-in-out infinite}
.spark:nth-child(2){left:8%;top:30%;animation-delay:.5s;color:var(--brand-300)}
.spark:nth-child(3){right:6%;top:18%;animation-delay:1.1s}
.spark:nth-child(4){right:14%;bottom:12%;animation-delay:1.6s;color:var(--crayon-lila)}
@keyframes tw{50%{transform:scale(.55) rotate(25deg);opacity:.5}}
@media (prefers-reduced-motion:reduce){.spark{animation:none}}
.streak-card{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:0 10px 26px rgba(214,31,105,.1);padding:var(--space-4) var(--space-6);border:2px solid rgba(240,111,164,.14)}
.streak-card .big-n{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1;color:var(--brand-700)}
.streak-card .lbl{font-size:17px;font-weight:700;color:var(--ink-muted)}
.week-dots{display:flex;gap:var(--space-2);margin-left:auto}
.week-dots .d{width:44px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:800;color:var(--ink-muted)}
.week-dots .d i{width:36px;height:36px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center;font-style:normal;font-size:20px}
.week-dots .d.on i{background:var(--star)}
.week-dots .d.today{color:var(--brand-700)}
.week-dots .d.today i{box-shadow:0 0 0 3px var(--brand-300)}
.theme-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--surface-soft);font-weight:800;margin-bottom:var(--space-3);color:var(--ink)}
.theme-card b{color:var(--brand-700)}
.hero-canvas{position:relative}
.hero-peek{position:absolute;right:-14px;top:-52px;z-index:2}
@media (max-width:767px){.hero-peek{right:-6px;top:-46px;width:72px}}

/* Szülői rész */
.pin-card{max-width:440px;margin:0 auto;align-items:center;text-align:center;gap:var(--space-4)}
.pin-card h2,.gal-main .card>h2{margin:0;font-family:var(--font-display);font-size:26px;font-weight:800}
.pin-card form{display:flex;flex-direction:column;gap:var(--space-4);align-items:center}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4)}
.stat{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:0 10px 26px rgba(214,31,105,.1);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid rgba(240,111,164,.14)}
.stat .s-ic{font-size:30px}.stat .s-n{font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--brand-700);line-height:1.1}.stat .s-l{font-weight:700;color:var(--ink-muted);font-size:15px}
.bars{display:flex;align-items:flex-end;gap:var(--space-3);height:170px;padding-top:var(--space-4)}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.bar i{display:block;width:100%;max-width:56px;border-radius:12px 12px 4px 4px;background:var(--brand-300)}
.bar.today i{background:var(--brand-500)}
.bar .bv,.bar .bl{font-weight:800;font-size:14px;color:var(--ink-muted)}
.set-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);font-weight:800;font-size:18px}
.set-sel{height:48px;border:3px solid var(--brand-300);border-radius:var(--radius-pill);padding:0 var(--space-4);font-family:var(--font-body);font-size:17px;font-weight:800;color:var(--ink);background:var(--surface-card)}
#panel{display:flex;flex-direction:column;gap:var(--space-4)}
#panel[hidden]{display:none}
.gal-main .card{gap:var(--space-3)}
.guard .party-card .af-btn{margin-top:var(--space-2)}
.anim-cv{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);display:block;margin-bottom:var(--space-4);background:var(--surface-soft)}
@media (max-width:767px){.actions .af-btn--back{width:56px}}
@media (max-width:767px){
  .streak-card{padding:var(--space-3) var(--space-4)}
  .week-dots{margin-left:0;width:100%;gap:2px;justify-content:space-between}
  .week-dots .d{width:auto;flex:1;min-width:0}
  .week-dots .d i{width:34px;height:34px}
}
.chip--season{background:var(--star);color:var(--brand-900)}
.chip--season[aria-pressed="true"]{background:var(--brand-500);color:var(--on-brand)}

/* Mese-sáv */
.story{width:100%;max-width:1040px;background:var(--surface-card);border-radius:var(--radius-lg);border:3px solid var(--star);box-shadow:var(--shadow-soft);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.story[hidden]{display:none}
.story-top{display:flex;justify-content:space-between;gap:var(--space-3);font-family:var(--font-display);font-weight:800}
.story-title{font-size:22px;color:var(--brand-700)}
.story-count{font-size:18px;color:var(--ink-muted)}
.story-text{margin:0;font-size:22px;line-height:32px;font-weight:700;color:var(--ink)}
.story-btns{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-end}
.story-card .thumb{display:grid}
@media (max-width:767px){.story{padding:var(--space-3) var(--space-4)}.story-text{font-size:19px;line-height:28px}.story-btns .af-btn{flex:1;justify-content:center;padding:0 var(--space-4)}}
.legal .card p{margin:0;font-size:17px;line-height:26px;font-weight:600;color:var(--ink-muted)}
.legal .card h2{margin:0 0 var(--space-2)}
.site-foot nav{flex-wrap:wrap;gap:var(--space-2) var(--space-4)}