/* ΠΑΡΕΑ — ενιαία αισθητική καρτών, επιλογών και πλαισίων.
 * Η διακόσμηση μένει πίσω από το περιεχόμενο και δεν τυπώνεται.
 * Δεν αλλάζει τη σειρά, τα δεδομένα ή τη λειτουργία των ενοτήτων.
 */
@media screen {
  body.parea-soft-garden {
    --gc-ink: #29493c;
    --gc-muted: #617568;
    --gc-accent: var(--vf-accent, #386e54);
    --gc-strong: var(--vf-accent-strong, #285440);
    --gc-line: #d8e3d6;
    --gc-line-strong: #a7c4ae;
    --gc-paper: #fffefa;
    --gc-warm: #fbf8ec;
    --gc-pastel: #edf5eb;
    --gc-shadow: 0 13px 34px rgb(41 65 46 / 10%), 0 2px 7px rgb(41 65 46 / 4%);
    --gc-shadow-hover: 0 20px 44px rgb(41 65 46 / 15%), 0 4px 12px rgb(41 65 46 / 6%);
    --gc-radius-card: 25px;
    --gc-radius-button: 14px;
    --gc-focus: #a2682c;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .guide-card, .welcome-card,
       .clip, .control-card, .aside-card, .scenario, .collection-card,
       .world-card, .album-card, .panel, .stat-card, .login-card,
       .print-preview-empty, .stage-preview, .device-option, .guide-step,
       .library-item, .library-panel, .settings-card, .step-card,
       .history-row, .sound-entry, .story-shelf-card) {
    border-radius: var(--gc-radius-card);
    box-shadow: var(--gc-shadow);
  }

  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .guide-card, .welcome-card,
       .clip, .control-card, .aside-card, .scenario, .collection-card,
       .album-card, .panel, .stat-card, .login-card, .stage-preview,
       .device-option, .guide-step, .settings-card, .step-card,
       .library-item, .print-preview-empty) {
    border-color: var(--gc-line);
  }

  /* Η λευκή επιφάνεια προστατεύει το κείμενο από τα λουλούδια του φόντου. */
  body.parea-soft-garden :is(.hub-tile, .guide-card, .clip, .control-card,
       .aside-card, .scenario, .collection-card, .login-card, .stage-preview,
       .guide-step, .library-item, .print-preview-empty) {
    background-color: var(--gc-paper);
  }

  body.parea-soft-garden :is(.hub-welcome, .story-hub-hero, .welcome-hero,
       .guide-hero, .print-hero, .intro, .overview-hero, .login-story,
       .hub-tail, .story-hub-bottom, .guide-entry, .complete-view) {
    border-radius: clamp(23px, 3vw, 34px);
    border-color: var(--gc-line);
    box-shadow: 0 16px 45px rgb(46 79 53 / 9%);
  }

  body.parea-soft-garden :is(.hub-welcome, .story-hub-hero, .welcome-hero,
       .guide-hero, .print-hero, .intro, .hub-tail, .story-hub-bottom) {
    background-image:
      radial-gradient(ellipse at 96% 7%, rgb(244 220 160 / 28%), transparent 42%),
      radial-gradient(ellipse at 7% 90%, rgb(211 231 211 / 39%), transparent 48%),
      linear-gradient(125deg, rgb(255 254 249 / 97%), rgb(242 248 240 / 95%));
  }

  body.parea-soft-garden :is(.hub-tile, .guide-card, .clip, .story-hub-card,
       .scenario, .collection-card, .control-card, .story-shelf-card,
       .world-card, .age-card) {
    border-style: solid;
    border-width: 1px;
    overflow-wrap: anywhere;
  }

  /* Ένα μικρό κοινό λεξιλόγιο για τα κουμπιά, χωρίς γενική αλλαγή σε όλα
     τα κουμπιά (όπως σίγαση, εικονίδια, επιλογείς χρωμάτων και πινέλα). */
  body.parea-soft-garden :is(.hub-start, .hub-main-cta, .guide-primary,
       .primary-btn, .print-button.primary, .button.primary,
       .btn.primary, .story-card-foot button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--gc-strong);
    border-radius: var(--gc-radius-button);
    background: linear-gradient(145deg, var(--gc-accent), var(--gc-strong));
    color: #fff;
    min-height: 48px;
    padding: 11px 17px;
    font-weight: 800;
    line-height: 1.35;
    box-shadow: 0 7px 16px rgb(41 91 62 / 19%);
    text-align: center;
    text-decoration: none;
  }

  body.parea-soft-garden :is(.btn.outline, .button.secondary,
       .print-button.quiet, .outlined-button, .hub-tail a,
       .story-hub-bottom a, .guide-demo) {
    border-radius: var(--gc-radius-button);
    border-color: var(--gc-line-strong);
    background-color: var(--gc-paper);
    color: var(--gc-strong);
    min-height: 44px;
    box-shadow: 0 3px 10px rgb(39 72 48 / 6%);
  }

  body.parea-soft-garden :is(.hub-start, .hub-main-cta, .guide-primary, .primary-btn,
       .print-button, .button, .btn, .outlined-button, .guide-demo,
       .story-card-foot button, .tabs button, .pager button,
       .catalog-filter, .story-hub-link, .guide-age-buttons button,
       .guide-mode-buttons button, .sound-buttons button, .story-choice,
       .device-option, .age-card, .story-shelf-card, .picture-card) {
    touch-action: manipulation;
  }

  body.parea-soft-garden :is(button, a, input, select, textarea, summary):focus-visible,
  #parea-story-player :is(button, a):focus-visible {
    outline: 3px solid var(--gc-focus, #a2682c);
    outline-offset: 3px;
  }

  /* Αληθινά επιλεγμένα στοιχεία παραμένουν ευδιάκριτα χωρίς να στηρίζονται
     μόνο στο χρώμα. Οι προϋπάρχουσες ιδιότητες aria-pressed διατηρούνται. */
  body.parea-soft-garden :is(.catalog-filter[aria-pressed="true"],
       .tabs button.active, .guide-age-buttons button[aria-pressed="true"],
       .guide-mode-buttons button[aria-pressed="true"],
       .device-option[aria-pressed="true"]) {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 95%),
                0 0 0 4px var(--gc-line-strong), 0 6px 19px rgb(36 69 43 / 12%);
  }

  body.parea-soft-garden :is(.filters input, .filters select, .print-field input,
       .print-field select, .library-filters input, .library-filters select,
       .catalog-search input, .catalog-theme select, .search-box input,
       .guide-specific select, .field input:not([type="checkbox"]),
       .field select, .field textarea) {
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    border-radius: 13px;
    border-color: #b8cdb9;
    background-color: #fffefa;
  }

  body.parea-soft-garden :is(.filters input, .filters select, .print-field input,
       .print-field select, .library-filters input, .library-filters select,
       .catalog-search input, .catalog-theme select, .search-box input,
       .guide-specific select):focus-visible {
    border-color: var(--gc-accent);
    box-shadow: 0 0 0 3px rgb(81 123 95 / 14%);
  }

  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .age-card,
       .story-shelf-card, .world-card, .scenario, .device-option,
       .picture-card):focus-within {
    border-color: var(--gc-accent);
    box-shadow: var(--gc-shadow-hover);
  }

  body.parea-soft-garden :is(.story-hub-card, .hub-tile, .story-shelf-card,
       .world-card, .age-card, .clip, .control-card, .scenario,
       .guide-card, .guide-step, .print-preview-empty, .panel) {
    min-width: 0;
  }

  /* Αρχική εφαρμογή: ηλικιακές συλλογές με άνετες εικόνες και κείμενο. */
  body.visual-refresh.parea-soft-garden .age-card {
    box-shadow: var(--gc-shadow);
    border-radius: 27px;
  }
  body.visual-refresh.parea-soft-garden .age-card-art {
    border-radius: 21px;
    overflow: hidden;
  }
  body.visual-refresh.parea-soft-garden .age-card-count {
    font-weight: 800;
  }
  body.visual-refresh.parea-soft-garden .world-card,
  body.visual-refresh.parea-soft-garden .picture-card {
    border-radius: 24px;
    box-shadow: var(--gc-shadow);
  }
  body.visual-refresh.parea-soft-garden .panel {
    background-color: rgb(255 254 249 / 97%);
    box-shadow: var(--gc-shadow);
  }
  body.visual-refresh.parea-soft-garden .story-shelf {
    border: 1px solid var(--gc-line);
    border-radius: 31px;
    box-shadow: var(--gc-shadow);
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card {
    box-shadow: var(--gc-shadow);
  }
  body.visual-refresh.parea-soft-garden .story-shelf-cover {
    object-fit: contain;
  }
  body.visual-refresh.parea-soft-garden .story-shelf-art:has(.story-shelf-cover) {
    border: 1px solid rgb(232 225 205 / 80%);
    background-color: #fcf8eb;
  }

  /* Ράφι ιστοριών: μεγαλύτερα εξώφυλλα και σαφής ιεραρχία. */
  #stories .story-hub-card {
    border-radius: 29px;
  }
  #stories .story-card-art {
    border-radius: 22px;
  }
  #stories .story-card-cover {
    object-fit: contain;
    background-color: #faf6e9;
  }
  #stories .story-card-body h3 {
    color: var(--gc-ink);
  }
  #stories .story-card-foot {
    border-top-color: var(--gc-line);
  }

  /* Ηχοθήκη, εργαστήριο, εκτύπωση, οδηγοί και διαχείριση. */
  body.parea-soft-garden .clip.is-playing {
    border-color: #749d7e;
    box-shadow: 0 0 0 3px rgb(116 157 126 / 21%), var(--gc-shadow);
  }
  body.parea-soft-garden .print-controls .control-card,
  body.parea-soft-garden .print-preview-empty {
    background: linear-gradient(160deg, #fffefa, #f5f9f3);
  }
  body.parea-soft-garden .guide-setup,
  body.parea-soft-garden .library-panel {
    border-color: var(--gc-line);
    border-radius: 29px;
    box-shadow: var(--gc-shadow);
  }
  body.parea-soft-garden .guide-setup {
    background: linear-gradient(135deg, #f4faf0, #fffdf6 72%, #f7f0ef);
  }
  body.parea-soft-garden .guide-step {
    box-shadow: 0 7px 21px rgb(41 76 54 / 7%);
  }
  body.parea-soft-garden .library-item {
    border-radius: 18px;
  }
  body.parea-soft-garden .note,
  body.parea-soft-garden .guide-note {
    border-color: var(--gc-line);
  }
  body.parea-soft-garden .panel-heading,
  body.parea-soft-garden .section-heading {
    gap: 14px;
  }

  /* Ξεκούραση: διακριτικές επιλογές, χωρίς ήχο ή υποχρεωτική συμμετοχή. */
  body.visual-refresh.parea-soft-garden .rest-corner {
    margin: 17px 0 10px;
    padding: 17px;
    border-radius: 21px;
    border: 1px solid var(--gc-line);
    background: linear-gradient(130deg, #f3f7ed, #fffaf1);
  }
  body.visual-refresh.parea-soft-garden .rest-corner > strong {
    display: block;
    margin-bottom: 10px;
    color: var(--gc-ink);
    font-size: 1.02rem;
  }
  body.visual-refresh.parea-soft-garden .rest-ideas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  body.visual-refresh.parea-soft-garden .rest-idea {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 8px;
    text-align: left;
    border-radius: 16px;
    border: 1px solid #cbdccc;
    background: #fffefa;
    color: var(--gc-ink);
    padding: 12px 13px;
    min-height: 76px;
    cursor: pointer;
  }
  body.visual-refresh.parea-soft-garden .rest-idea[aria-pressed="true"] {
    border-color: var(--gc-strong);
    background: #e5f0df;
    box-shadow: inset 0 0 0 1px var(--gc-strong);
  }
  body.visual-refresh.parea-soft-garden .rest-idea-icon {
    font-size: 1.5rem;
    line-height: 1;
  }
  body.visual-refresh.parea-soft-garden .rest-result {
    margin: 13px 0 0;
    min-height: 1.5em;
    color: #4a6756;
    font-size: 0.94rem;
  }
}

@media screen and (hover: hover) and (pointer: fine) {
  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .story-shelf-card,
       .world-card, .age-card, .scenario, .device-option):hover {
    transform: translateY(-3px);
    box-shadow: var(--gc-shadow-hover);
  }
  body.parea-soft-garden :is(.hub-start, .hub-main-cta, .guide-primary,
       .primary-btn, .print-button.primary, .button.primary,
       .btn.primary, .story-card-foot button):hover:not(:disabled) {
    background: linear-gradient(145deg, var(--gc-strong), #234a38);
    box-shadow: 0 10px 23px rgb(41 91 62 / 24%);
  }
}

/* Tablet: πραγματικός χώρος για εικόνες και ήρεμη ανάγνωση. */
@media screen and (min-width: 651px) and (max-width: 1100px) {
  body.visual-refresh.parea-soft-garden .story-shelf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    min-height: 0;
    padding: clamp(15px, 2.2vw, 24px);
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card .story-shelf-art:has(.story-shelf-cover) {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
  }
  #stories .story-hub-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 850px;
    margin-inline: auto;
  }
  #stories .story-hub-card.has-story-cover .story-card-art {
    height: auto;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    aspect-ratio: 16 / 9;
  }
  #stories .story-card-body {
    padding: 21px clamp(19px, 3vw, 34px) 26px;
  }
}

@media screen and (min-width: 1101px) {
  body.visual-refresh.parea-soft-garden .story-shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card:only-child {
    grid-column: 1 / -1;
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card:only-child .story-shelf-art:has(.story-shelf-cover) {
    width: clamp(270px, 36%, 440px);
    aspect-ratio: 16 / 9;
  }
}

/* SmartPhone: εικόνα επάνω, τίτλος και πληροφορίες κάτω. */
@media screen and (max-width: 650px) {
  body.visual-refresh.parea-soft-garden .age-first-visit .age-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 13px;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card-art {
    flex: none;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 11;
    border-radius: 20px;
    margin: 0 0 14px;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card .age-number {
    align-self: start;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card strong {
    font-size: clamp(1.22rem, 5.1vw, 1.55rem);
    line-height: 1.28;
    margin-top: 8px;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card small {
    font-size: clamp(.9rem, 3.4vw, 1rem);
    line-height: 1.6;
    margin-top: 10px;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card-count {
    padding-top: 14px;
  }

  body.visual-refresh.parea-soft-garden .story-shelf-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
    padding: 13px;
    min-height: 0;
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card .story-shelf-art:has(.story-shelf-cover) {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 19px;
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card > span:last-child {
    display: grid;
    gap: 7px;
    padding: 3px 3px 7px;
    min-width: 0;
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card > span:last-child strong {
    font-size: clamp(1.17rem, 4.65vw, 1.45rem);
  }
  body.visual-refresh.parea-soft-garden .story-shelf-card > span:last-child > span {
    line-height: 1.6;
  }

  #stories .story-hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #stories .story-hub-card.has-story-cover .story-card-art {
    width: calc(100% - 24px);
    margin: 12px 12px 0;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  #stories .story-card-body {
    padding: 19px 18px 23px;
  }
  #stories .story-card-foot button {
    min-height: 46px;
  }
  body.parea-soft-garden .rest-ideas,
  body.visual-refresh.parea-soft-garden .rest-ideas {
    grid-template-columns: minmax(0, 1fr);
  }
  body.parea-soft-garden :is(.hub-welcome, .story-hub-hero, .welcome-hero,
       .guide-hero, .print-hero, .intro) {
    border-radius: 24px;
  }
  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .guide-card,
       .welcome-card, .clip, .control-card, .aside-card,
       .scenario, .collection-card, .panel, .guide-step) {
    border-radius: 22px;
  }
  body.parea-soft-garden :is(.hub-main-cta, .hub-start, .guide-primary,
       .story-card-foot button, .print-button.primary) {
    min-height: 48px;
  }
}

@media screen and (max-width: 359px) {
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card {
    padding: 11px;
  }
  body.visual-refresh.parea-soft-garden .age-first-visit .age-card-art {
    aspect-ratio: 4 / 3;
  }
  body.parea-soft-garden :is(.control-card, .guide-card, .clip, .hub-tile) {
    padding-inline: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .story-shelf-card,
       .world-card, .age-card, .scenario, .device-option,
       .picture-card, .btn, .button, .guide-primary, .print-button) {
    transition: none !important;
    animation: none !important;
  }
  body.parea-soft-garden :is(.hub-tile, .story-hub-card, .story-shelf-card,
       .world-card, .age-card, .scenario, .device-option):hover {
    transform: none !important;
  }
}