/* Simos Camp - project intro card (Y-Cycle / Erasmus+), shown over the game on every visit */
#intro {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom));
  background: linear-gradient(180deg, rgba(134, 230, 220, .94) 0%, rgba(46, 196, 198, .94) 45%, rgba(37, 150, 194, .96) 100%);
  overflow-y: auto; touch-action: pan-y; transition: opacity .5s var(--ease-soft);
}
#intro.hide { opacity: 0; pointer-events: none; }
.intro-card {
  width: 100%; max-width: 520px; margin: auto; padding: 26px 24px 22px; text-align: center;
  background: var(--panel-bg); color: var(--ink); border: 4px solid var(--wood); border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow); animation: intro-pop .5s var(--ease-spring) both;
}
@keyframes intro-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.intro-card h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.15; color: var(--deep); }
.intro-card p { margin: 0 auto 14px; max-width: 420px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.intro-card strong { color: var(--sea); }
.intro-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px;
  margin: 4px 0 14px; padding: 16px 14px; background: #fff; border-radius: var(--radius); border: 2px solid var(--sand-dark);
}
.intro-logos a { display: block; line-height: 0; border-radius: 8px; }
.intro-logos img { display: block; height: auto; }
.intro-logo-ycycle { width: 230px; max-width: 100%; }
.intro-logo-inedivim { width: 74px; }
.intro-logo-erasmus { width: 190px; }
.intro-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 8px 16px; border-radius: 999px;
  background: rgba(37, 150, 194, .12); color: var(--sea); font-weight: 600; font-size: 16px; text-decoration: none;
  -webkit-user-select: text; user-select: text;
}
.intro-link:hover, .intro-link:focus-visible { background: rgba(37, 150, 194, .22); text-decoration: underline; }
.intro-start { min-width: 200px; font-size: 19px; background: linear-gradient(180deg, #5fd889, var(--green)); border-color: var(--green-dark); box-shadow: 0 4px 0 var(--green-dark); text-shadow: 0 2px 0 rgba(47, 154, 80, .6); }
.intro-disclaimer { margin: 16px auto 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--ink-soft) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intro-card h1, :root:not([data-theme="light"]) .intro-card strong, :root:not([data-theme="light"]) .intro-link { color: #8fd8f0; }
}
:root[data-theme="dark"] .intro-card h1, :root[data-theme="dark"] .intro-card strong, :root[data-theme="dark"] .intro-link { color: #8fd8f0; }
@media (max-width: 420px) {
  .intro-card { padding: 22px 16px 18px; }
  .intro-card h1 { font-size: 25px; }
  .intro-card p { font-size: 16px; }
  .intro-logo-ycycle { width: 200px; }
  .intro-logo-inedivim { width: 64px; }
  .intro-logo-erasmus { width: 165px; }
}
@media (prefers-reduced-motion: reduce) { .intro-card { animation: none; } #intro { transition: none; } }