/* Mondo OLA — mondo illustrato. Colori ricavati dalle illustrazioni approvate:
   acqua profonda, sabbia calda, corallo, giallo sole, turchese della laguna. */

:root {
  --ola-deep: #0d4a63;
  --ola-sea: #13758a;
  --ola-lagoon: #39c3c0;
  --ola-foam: #e9fbf7;
  --ola-sand: #fff0cf;
  --ola-coral: #ff7458;
  --ola-sun: #ffc83d;
  --ola-ink: #1b2a33;
  --ola-line: #1b2a33;
  --ola-radius: 26px;
}

body.ola {
  background: var(--ola-deep);
  color: var(--ola-foam);
  font: 19px/1.55 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.ola a { color: var(--ola-sun); }
.ola a:hover { color: #fff; }
/* i pulsanti e i link-bottone mantengono il colore dell'interno, non quello dei link */
.ola .ola-btn, .ola .ola-btn:hover, .ola .ola-download, .ola .ola-download:hover,
.ola .ola-menu a, .ola .ola-menu a:hover, .ola .ola-back, .ola .ola-card, .ola .ola-card:hover { text-decoration: none; }
.ola .ola-btn, .ola .ola-btn:hover { color: var(--ola-ink); }
.ola .ola-btn.coral, .ola .ola-btn.lagoon, .ola .ola-btn.sun { color: var(--ola-ink); }
.ola .ola-download, .ola .ola-download:hover { color: var(--ola-ink); }
.ola .ola-menu a, .ola .ola-menu a:hover { color: var(--ola-foam); }
.ola .ola-menu a:hover { color: var(--ola-ink); }
.ola .ola-menu a[aria-current="page"] { color: var(--ola-ink); }
.ola .ola-card { color: var(--ola-ink); }
.ola .ola-place a, .ola .ola-place a:hover { color: var(--ola-ink); }
.ola :focus-visible { outline: 4px solid var(--ola-sun); outline-offset: 4px; }
.ola h1, .ola h2, .ola h3 { font-weight: 800; letter-spacing: .01em; line-height: 1.12; }
.ola h2 { font-size: clamp(32px, 5vw, 52px); }
.ola h3 { font-size: 26px; }

/* marchio */
.ola-logo {
  display: inline-block; font-weight: 900; color: #fff; text-decoration: none; line-height: 1;
  font-size: clamp(56px, 12vw, 120px); letter-spacing: .04em;
  text-shadow: 4px 5px 0 var(--ola-coral), 8px 10px 0 var(--ola-ink);
}
.ola-logo small {
  display: block; font-size: clamp(16px, 2.4vw, 22px); letter-spacing: .08em; margin-top: 10px;
  color: var(--ola-sun); text-shadow: 2px 2px 0 var(--ola-ink);
}
.ola-logo-sm { font-size: 30px; letter-spacing: .06em; text-shadow: 2px 3px 0 var(--ola-coral); }

/* navigazione della serie */
.ola-head {
  position: sticky; top: 0; z-index: 30; background: var(--ola-deep);
  border-bottom: 4px solid var(--ola-ink);
}
.ola-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.ola-menu { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; }
.ola-menu a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ola-foam);
  background: var(--ola-sea); border: 3px solid var(--ola-ink); border-radius: 999px;
  padding: 8px 16px; font-weight: 800; font-size: 17px; box-shadow: 0 4px 0 var(--ola-ink);
  transition: transform .15s ease, background .15s ease;
}
.ola-menu a:hover { transform: translateY(-2px); background: var(--ola-lagoon); color: var(--ola-ink); }
.ola-menu a[aria-current="page"] { background: var(--ola-sun); color: var(--ola-ink); }
.ola-menu .ico { font-size: 18px; }
.ola-back { font-size: 15px; color: var(--ola-foam); text-decoration: none; opacity: .9; }
.ola-back:hover { opacity: 1; color: var(--ola-sun); }

/* scene a tutta larghezza */
.ola-scene {
  position: relative; min-height: min(88svh, 760px); display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
.ola-scene > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.ola-scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 74, 99, .15) 0%, rgba(13, 74, 99, .55) 55%, rgba(13, 74, 99, .95) 100%);
}
.ola-scene .wrap { padding-bottom: clamp(28px, 6vw, 64px); }
.ola-welcome { font-size: clamp(22px, 3vw, 30px); font-weight: 700; max-width: 24ch; margin: 18px 0 26px; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }

/* pulsanti grandi, a tocco */
.ola-btns { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ola-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ola-btns { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ola-btn {
  display: flex; flex-direction: column; gap: 4px; min-height: 96px; justify-content: center;
  text-decoration: none; color: var(--ola-ink); background: var(--ola-sand);
  border: 4px solid var(--ola-ink); border-radius: 22px; padding: 16px 18px;
  box-shadow: 0 7px 0 var(--ola-ink); font-weight: 800; font-size: 21px; line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ola-btn small { font-weight: 600; font-size: 15px; color: #4d5b63; }
.ola-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--ola-ink); color: var(--ola-ink); }
.ola-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--ola-ink); }
.ola-btn.coral { background: var(--ola-coral); }
.ola-btn.lagoon { background: var(--ola-lagoon); }
.ola-btn.sun { background: var(--ola-sun); }

/* bolle da scoprire */
.ola-bubbles { position: relative; height: 0; }
.ola-bubble {
  position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff;
  background: radial-gradient(circle at 30% 30%, #fff 0 12%, rgba(255, 255, 255, .25) 13% 60%, rgba(57, 195, 192, .35) 100%);
  color: #fff; font-weight: 900; font-size: 22px; cursor: pointer; box-shadow: inset 0 -6px 10px rgba(13, 74, 99, .3);
  top: -180px; right: 6%;
}
.ola-bubble:nth-child(2) { top: -120px; right: 18%; width: 40px; height: 40px; }
.ola-bubble:nth-child(3) { top: -210px; right: 24%; width: 30px; height: 30px; }
.ola-bubble[aria-expanded="true"] { background: var(--ola-sun); color: var(--ola-ink); }
.ola-bubble-text {
  position: relative; background: var(--ola-foam); color: var(--ola-ink); border: 4px solid var(--ola-ink);
  border-radius: 20px; padding: 14px 18px; margin: 8px 0 0; font-size: 18px; max-width: 42ch; display: none;
}
.ola-bubble-text.open { display: block; }
.ola-bubble-text strong { color: var(--ola-coral); }

/* sezioni */
.ola-sec { padding: clamp(48px, 8vw, 88px) 0; }
.ola-sec.sand { background: var(--ola-sand); color: var(--ola-ink); border-top: 4px solid var(--ola-ink); border-bottom: 4px solid var(--ola-ink); }
.ola-sec.sand a { color: #b23d28; }
.ola-sec.sand .muted { color: #46545c; }
.ola-sec.sea { background: var(--ola-sea); }
.ola-kicker {
  display: inline-block; font-weight: 900; font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ola-coral); color: #fff; border: 3px solid var(--ola-ink); border-radius: 999px; padding: 4px 14px; margin-bottom: 14px;
  transform: rotate(-2deg);
}
.ola-lead { font-size: clamp(20px, 2.6vw, 24px); max-width: 44ch; }
.muted { opacity: .85; }

/* esplora: tessere con scoperta */
.ola-places { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ola-places { grid-template-columns: repeat(3, 1fr); } }
.ola-place {
  background: var(--ola-foam); color: var(--ola-ink); border: 4px solid var(--ola-ink); border-radius: var(--ola-radius);
  overflow: hidden; box-shadow: 0 8px 0 var(--ola-ink); display: flex; flex-direction: column;
}
.ola-place img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 4px solid var(--ola-ink); }
.ola-place .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ola-place h3 { margin: 0; color: var(--ola-ink); }
.ola-place p { margin: 0; font-size: 17px; }
.ola-place button {
  align-self: flex-start; font-family: inherit; font-weight: 800; font-size: 17px; line-height: 1; cursor: pointer;
  border-radius: 999px; border: 3px solid var(--ola-ink); background: var(--ola-sun); color: var(--ola-ink);
  padding: 10px 16px; box-shadow: 0 4px 0 var(--ola-ink);
}
.ola-place button[aria-expanded="true"] { background: var(--ola-lagoon); }
.ola-place .discover { display: none; font-size: 17px; background: #fff; border: 3px dashed var(--ola-ink); border-radius: 16px; padding: 12px 14px; }
.ola-place .discover.open { display: block; }
.ola-textlinks { margin-top: 22px; font-size: 17px; }

/* squadra */
.ola-team-photo { border: 4px solid var(--ola-ink); border-radius: var(--ola-radius); overflow: hidden; box-shadow: 0 8px 0 var(--ola-ink); margin-bottom: 26px; }
.ola-team-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ola-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ola-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ola-cards { grid-template-columns: repeat(3, 1fr); } }
.ola-card {
  appearance: none; text-align: left; font-family: inherit; color: var(--ola-ink); cursor: pointer;
  background: var(--ola-foam); border: 4px solid var(--ola-ink); border-radius: var(--ola-radius);
  box-shadow: 0 7px 0 var(--ola-ink); padding: 20px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ola-card:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--ola-ink); }
.ola-card .role { font-weight: 900; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #b23d28; }
.ola-card h3 { margin: 0; }
.ola-card p { margin: 0; font-size: 17px; }
.ola-card .more { display: none; font-size: 17px; background: var(--ola-sand); border-radius: 14px; padding: 10px 12px; border: 3px solid var(--ola-ink); }
.ola-card[aria-expanded="true"] .more { display: block; }
.ola-card .reaction { font-weight: 800; color: #b23d28; min-height: 1.4em; font-size: 18px; }
.ola-card .ola-hint { font-size: 14px; font-weight: 700; color: #3a6070; }
.ola-card.ola-card-ola { border-color: var(--ola-ink); }

/* libro */
.ola-book { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .ola-book { grid-template-columns: 1fr 1.1fr; } }
.ola-book img { border: 4px solid var(--ola-ink); border-radius: var(--ola-radius); box-shadow: 0 10px 0 var(--ola-ink); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ola-status { display: inline-block; font-weight: 900; background: var(--ola-lagoon); color: var(--ola-ink); border: 3px solid var(--ola-ink); border-radius: 999px; padding: 4px 14px; margin: 8px 0 12px; }
.ola-note-card {
  background: var(--ola-foam); color: var(--ola-ink); border: 4px solid var(--ola-ink); border-radius: var(--ola-radius);
  padding: 18px 20px; font-size: 18px; margin-top: 16px;
}

/* gioco memory */
.memo-board { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); max-width: 620px; margin: 22px 0; }
@media (min-width: 640px) { .memo-board { grid-template-columns: repeat(4, 1fr); } }
.memo-card {
  position: relative; aspect-ratio: 1; border: 4px solid var(--ola-ink); border-radius: 18px; background: var(--ola-sun);
  cursor: pointer; padding: 0; overflow: hidden; box-shadow: 0 5px 0 var(--ola-ink);
}
.memo-card img { width: 100%; height: 100%; object-fit: cover; display: none; }
.memo-card.flip img { display: block; }
.memo-card::before { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: 900; color: var(--ola-ink); }
.memo-card.flip::before { display: none; }
.memo-card.done { opacity: .55; cursor: default; }
.memo-status { font-size: 20px; font-weight: 800; min-height: 1.4em; }
.memo-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ola-btn-inline {
  font: 800 18px/1 ui-rounded, -apple-system, sans-serif; border: 3px solid var(--ola-ink); border-radius: 999px;
  background: var(--ola-sun); color: var(--ola-ink); padding: 12px 20px; box-shadow: 0 5px 0 var(--ola-ink); cursor: pointer;
}
.ola-btn-inline:hover { background: #ffd966; }

/* crea: scheda stampabile */
.ola-download {
  display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ola-ink);
  background: var(--ola-coral); border: 4px solid var(--ola-ink); border-radius: 999px; padding: 12px 22px;
  font-weight: 900; box-shadow: 0 6px 0 var(--ola-ink); margin-top: 12px;
}
.ola-download:hover { color: var(--ola-ink); transform: translateY(-2px); }

/* adulti: area secondaria */
.ola-adult { background: #fff; color: var(--ola-ink); border-radius: 18px; padding: 28px; }
.ola-adult a { color: #b23d28; }
.ola-adult h2, .ola-adult h3 { color: var(--ola-ink); }

/* piè di pagina della serie */
.ola-foot { background: var(--ola-ink); color: #cfe6ea; padding: 36px 0 44px; font-size: 16px; }
.ola-foot a { color: #fff; }
.ola-foot .sign { margin-top: 18px; font-size: 15px; opacity: .85; }
.ola-foot ul { list-style: none; display: flex; gap: 12px 18px; flex-wrap: wrap; }

/* movimento */
@media (prefers-reduced-motion: no-preference) {
  .ola-bubble { animation: bob 5s ease-in-out infinite; }
  .ola-bubble:nth-child(2) { animation-delay: -1.5s; }
  .ola-bubble:nth-child(3) { animation-delay: -3s; }
  .ola-kicker { animation: none; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .ola-btn, .ola-card, .ola-menu a { transition: none; }
}

/* stampa: la scheda esce pulita, senza menu */
@media print {
  .ola-head, .ola-foot, .no-print, .skip { display: none !important; }
  body.ola { background: #fff; color: #000; }
  .ola-scheda { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; }
  .ola-scheda .line { border-bottom-color: #000; }
}

/* galleria illustrata */
.ola-gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .ola-gallery { grid-template-columns: repeat(4, 1fr); } }
.ola-gallery img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 4px solid var(--ola-ink);
  border-radius: 18px; box-shadow: 0 6px 0 var(--ola-ink); background: var(--ola-foam);
}

/* ritratti dei personaggi */
.ola-card .portrait {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border: 3px solid var(--ola-ink);
  border-radius: 16px; background: radial-gradient(circle at 50% 40%, #fff3d6 0%, #ffd98a 100%);
}
.ola-team-photo img { aspect-ratio: 1950 / 807; }

/* personaggi del mondo di sopra: nessun gioco di scheda, solo presentazione */
.ola-card-static { cursor: default; }
.ola-card-static:hover { transform: none; box-shadow: 0 7px 0 var(--ola-ink); }
.ola-card .portrait { mix-blend-mode: multiply; }
.ola-subhead { font-size: 26px; color: var(--ola-sun); }
.ola-card-static .portrait { aspect-ratio: 2 / 3; max-height: 340px; width: auto; max-width: 100%; margin: 0 auto; display: block; }