/* AI Thinking Lab — λεπτή «κόλλα» πάνω στο Bootswatch theme.
   Τα χρώματα/επιφάνειες αντλούνται από τις μεταβλητές του εκάστοτε theme
   (--bs-primary, --bs-body-bg, --bs-border-color, ...), ώστε η αλλαγή skin
   να αλλάζει όλη την εμφάνιση. Τα per-room χρώματα (--accent) μένουν σταθερά. */

:root { --accent: var(--bs-primary); --accent2: var(--bs-info); --shadow: 0 16px 38px rgba(0,0,0,.14); }

* { scroll-behavior: smooth; }
body { background: var(--bs-tertiary-bg); overflow-x: hidden; }
h1, h2, h3, .navbar-brand { letter-spacing: -0.015em; }

/* ---------- Navbar ---------- */
.atl-nav { background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 60%, #120a22), color-mix(in srgb, var(--bs-primary) 88%, #000) 55%, color-mix(in srgb, var(--bs-info) 70%, #000)); box-shadow: 0 2px 18px rgba(0,0,0,.25); }
.atl-nav .navbar-brand { color: #fff; display: flex; align-items: center; gap: .5rem; }
.atl-nav .nav-link { color: rgba(255,255,255,.85); font-weight: 600; }
.atl-nav .nav-link:hover, .atl-nav .nav-link.active { color: #fff; }
.atl-nav .dropdown-menu { box-shadow: var(--shadow); }
.atl-dot { display:inline-block; width:.75rem; height:.75rem; border-radius:50%; margin-right:.4rem; vertical-align:middle; }
.atl-nav-prog { background: rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:2rem; padding:.15rem .7rem; font-size:.8rem; font-weight:700; }

/* ---------- Hero ---------- */
.atl-hero { position: relative; color:#fff; padding: 3.6rem 0 3.8rem; overflow:hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--bs-primary) 55%, #150b2b), color-mix(in srgb, var(--bs-primary) 85%, #000) 45%, color-mix(in srgb, var(--bs-info) 75%, #000) 100%);
  background-size: 200% 200%; animation: atl-gradient 16s ease infinite; }
@keyframes atl-gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.atl-hero .container { position: relative; z-index: 2; }
.atl-blob { position:absolute; border-radius:50%; filter:blur(8px); opacity:.32; z-index:1; pointer-events:none; }
.atl-blob.b1 { width:280px; height:280px; background:#f0abfc; top:-90px; right:-40px; animation:atl-float 9s ease-in-out infinite; }
.atl-blob.b2 { width:200px; height:200px; background:#38bdf8; bottom:-70px; left:-30px; animation:atl-float 11s ease-in-out infinite reverse; }
.atl-blob.b3 { width:120px; height:120px; background:#fde68a; top:40%; left:45%; animation:atl-float 7s ease-in-out infinite; }
@keyframes atl-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }
.atl-eyebrow { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:2rem; padding:.3rem .9rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.atl-hero-title { font-weight:900; font-size:clamp(2.1rem,5.5vw,3.5rem); line-height:1.05; }
.atl-hero-title .grad-word { background:linear-gradient(90deg,#fde68a,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.atl-hero-sub { font-size:1.18rem; opacity:.95; max-width:38rem; }
.atl-hero-art { max-width:100%; height:auto; animation:atl-float 8s ease-in-out infinite; filter:drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
.atl-problem { display:flex; gap:.8rem; align-items:flex-start; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:1rem; padding:1rem 1.25rem; margin-top:1.4rem; max-width:40rem; }
.atl-problem .bi { font-size:1.4rem; opacity:.85; }
.atl-problem span { font-size:1.05rem; font-weight:600; }

/* ---------- Generic surfaces ---------- */
.atl-card-surface, .atl-audience, .atl-progress-card, .atl-facts, .atl-mini, .atl-room-card,
.atl-side-card, .atl-guide-card, .atl-roomnav-link, .atl-hats-wrap { background: var(--bs-body-bg); border:1px solid var(--bs-border-color); }
.atl-h2 { font-weight:800; font-size:1.8rem; margin-bottom:.5rem; }
.atl-h3 { font-weight:800; font-size:1.25rem; }
.atl-section-eyebrow { color: color-mix(in srgb, var(--bs-primary) 82%, #000); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; }

/* ---------- Play button (hero) ---------- */
.atl-btn-play { background:linear-gradient(135deg,#fbbf24,#f472b6); color:#fff; font-weight:800; border:0; box-shadow:0 8px 22px rgba(244,114,182,.38); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.atl-btn-play:hover, .atl-btn-play:focus { color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(244,114,182,.5); filter:saturate(1.05); }

/* ---------- Audience ---------- */
.atl-audience { border-radius:1.2rem; padding:1.4rem 1.6rem; box-shadow:var(--shadow); margin-top:-2.6rem; position:relative; z-index:5; }
.atl-audience h2 { font-size:1.15rem; font-weight:800; margin:0 0 .2rem; }
.atl-audience p { margin:0; color:var(--bs-secondary-color); }
.atl-aud-chip { display:inline-flex; align-items:center; gap:.4rem; background:color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)); color:color-mix(in srgb, var(--bs-primary) 80%, #000); border-radius:2rem; padding:.35rem .85rem; font-weight:600; font-size:.9rem; }
.atl-aud-emoji { font-size:2.6rem; line-height:1; }

/* ---------- Mini features ---------- */
.atl-mini { display:flex; gap:.75rem; align-items:flex-start; border-radius:.9rem; padding:.9rem 1rem; height:100%; }
.atl-mini > .bi { font-size:1.6rem; color:var(--bs-primary); flex:none; }
.atl-mini strong { display:block; }
.atl-mini span { display:block; color:var(--bs-secondary-color); font-size:.88rem; }

/* ---------- Facts ---------- */
.atl-facts { border-radius:1.1rem; overflow:hidden; box-shadow:var(--shadow); }
.atl-facts .card-header { background:linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #000)); color:#fff; border:0; font-weight:700; }
.atl-facts th { width:38%; color:var(--bs-secondary-color); font-weight:700; }

/* ---------- Progress ---------- */
.atl-progress-card { border-radius:1.2rem; padding:1.5rem 1.6rem; box-shadow:var(--shadow); }
.atl-prog-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.atl-prog-count { font-weight:800; font-size:1.05rem; }
.atl-prog-count b { color:var(--bs-primary); font-size:1.3rem; }
.atl-prog-bar { height:14px; background:var(--bs-tertiary-bg); border-radius:2rem; overflow:hidden; margin:.9rem 0 1.2rem; }
.atl-prog-fill { height:100%; width:0; border-radius:2rem; background:linear-gradient(90deg,#2563eb,#16a34a,#f59e0b,#dc2626,#7c3aed); transition:width .8s cubic-bezier(.16,1,.3,1); }
.atl-prog-steps { display:flex; gap:.5rem; flex-wrap:wrap; }
.atl-prog-step { flex:1; min-width:90px; display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border-radius:.7rem; background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); font-size:.85rem; font-weight:600; color:var(--bs-secondary-color); transition:.2s; }
.atl-prog-step .num { width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); font-weight:800; font-size:.8rem; flex:none; }
.atl-prog-step.done { color:#166534; background:#ecfdf3; border-color:#bbf7d0; }
.atl-prog-step.done .num { background:#22c55e; color:#fff; }
.atl-reset { background:none; border:0; color:var(--bs-secondary-color); font-size:.85rem; text-decoration:underline; cursor:pointer; }
.atl-reset:hover { color:#dc2626; }

/* ---------- Celebrate ---------- */
.atl-celebrate { display:none; background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; border-radius:1.1rem; padding:1.1rem 1.3rem; margin-top:1rem; align-items:center; gap:.8rem; box-shadow:var(--shadow); }
.atl-celebrate.show { display:flex; animation:atl-pop .5s cubic-bezier(.16,1.3,.3,1); }
.atl-celebrate .bi { font-size:1.8rem; }
@keyframes atl-pop { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }

/* ---------- Room cards ---------- */
.atl-room-card { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; border-radius:1.3rem; overflow:hidden; position:relative; box-shadow:0 6px 18px rgba(0,0,0,.07); transition:transform .2s ease, box-shadow .2s ease; }
.atl-room-card:hover { transform:translateY(-7px); box-shadow:0 22px 44px rgba(0,0,0,.18); }
.atl-room-banner { position:relative; padding:1.2rem 1.3rem 1rem; color:#fff; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #000)); }
.atl-room-banner::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.25) 1.4px, transparent 1.6px); background-size:14px 14px; opacity:.45; }
.atl-room-banner .emoji { position:absolute; right:1rem; top:.7rem; font-size:2.4rem; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.atl-room-num { width:2.6rem; height:2.6rem; border-radius:.8rem; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; font-weight:900; font-size:1.3rem; position:relative; z-index:1; }
.atl-room-tag { margin:.7rem 0 0; font-weight:700; font-size:1.02rem; position:relative; z-index:1; }
.atl-room-body { padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.atl-room-title { font-weight:800; font-size:1.18rem; margin:0 0 .1rem; }
.atl-room-ft { color:var(--bs-secondary-color); font-size:.9rem; margin-bottom:.8rem; }
.atl-room-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; }
.atl-room-foot { display:flex; justify-content:space-between; align-items:center; color:var(--bs-secondary-color); font-size:.9rem; margin-top:auto; }
.atl-enter { color:var(--accent); font-weight:700; }
.atl-room-card.is-done::before { content:"✓ Ολοκληρώθηκε"; position:absolute; top:.8rem; left:-2.3rem; transform:rotate(-45deg); background:#16a34a; color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.05em; padding:.2rem 2.4rem; z-index:3; box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* ---------- Badges ---------- */
.atl-badge-phase { background:rgba(255,255,255,.22); color:#fff; font-weight:700; border:1px solid rgba(255,255,255,.35); }
.atl-room-body .atl-badge-phase { background:var(--accent); border:0; }
.atl-badge-tool { background:color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)); color:color-mix(in srgb, var(--bs-primary) 78%, #000); font-weight:700; }
.atl-badge-light { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.35); }

/* ---------- Room hero ---------- */
.atl-room-hero { position:relative; overflow:hidden; color:#fff; padding:2.6rem 0 2.4rem;
  background:linear-gradient(130deg, var(--accent), color-mix(in srgb, var(--accent) 52%, #000)); }
.atl-room-hero::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.22) 1.5px, transparent 1.7px); background-size:18px 18px; opacity:.5; }
.atl-room-hero .container { position:relative; z-index:2; }
.atl-room-emoji { position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:7rem; opacity:.9; filter:drop-shadow(0 8px 14px rgba(0,0,0,.25)); z-index:1; animation:atl-float 7s ease-in-out infinite; }
.atl-room-illu { position:absolute; right:4%; top:50%; transform:translateY(-50%); width:min(280px,32%); height:auto; z-index:1; background:rgba(255,255,255,.92); border-radius:1.6rem; padding:.7rem; box-shadow:0 16px 32px rgba(0,0,0,.18); animation:atl-float 7s ease-in-out infinite; }
@media (max-width:991.98px){ .atl-room-illu { display:none; } }
.atl-room-figure { position:relative; display:flex; align-items:center; justify-content:center; padding:1.1rem; min-height:178px; background:color-mix(in srgb, var(--accent) 10%, #fff); }
.atl-card-illu { height:150px; width:auto; max-width:92%; filter:drop-shadow(0 6px 14px rgba(27,31,42,.14)); }
.atl-room-figure .atl-room-num { position:absolute; top:.7rem; left:.7rem; width:2.3rem; height:2.3rem; border-radius:.6rem; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.1rem; }
.atl-room-body .atl-room-tag { color:var(--accent); font-weight:700; margin:.1rem 0 .6rem; }
.atl-room-banner { min-height:142px; }
.atl-cta { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; text-decoration:none; color:#fff; border-radius:1.3rem; padding:1.4rem 1.8rem; box-shadow:var(--shadow); background:linear-gradient(120deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 45%, #db2777)); }
.atl-cta strong { font-size:1.35rem; display:block; line-height:1.1; }
.atl-cta .sub { opacity:.92; }
.atl-cta .big { font-size:2.6rem; line-height:1; }
.atl-crumb { --bs-breadcrumb-divider-color:rgba(255,255,255,.6); margin-bottom:.7rem; }
.atl-crumb a { color:rgba(255,255,255,.9); text-decoration:none; }
.atl-crumb .active { color:#fff; }
.atl-room-hero-num { width:3.6rem; height:3.6rem; border-radius:1.1rem; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; font-weight:900; font-size:1.9rem; flex:none; }
.atl-room-hero .tagline { font-size:1.05rem; opacity:.95; margin-top:.5rem; font-weight:600; }

/* ---------- Room body ---------- */
.atl-objective { display:flex; gap:.9rem; align-items:flex-start; background:color-mix(in srgb, var(--accent) 10%, var(--bs-body-bg)); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--bs-body-bg)); border-left:6px solid var(--accent); border-radius:.9rem; padding:1rem 1.2rem; }
.atl-objective .bi { font-size:1.6rem; color:var(--accent); }
.atl-objective .atl-label { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:800; }
.atl-steps { counter-reset:step; list-style:none; padding-left:0; }
.atl-steps li { counter-increment:step; position:relative; padding:.35rem 0 1rem 3.1rem; }
.atl-steps li::before { content:counter(step); position:absolute; left:0; top:.1rem; width:2.1rem; height:2.1rem; border-radius:50%; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); color:#fff; display:grid; place-items:center; font-weight:800; }
.atl-steps li:not(:last-child)::after { content:""; position:absolute; left:1rem; top:2.3rem; bottom:0; width:2px; background:color-mix(in srgb, var(--accent) 30%, var(--bs-body-bg)); }
.atl-prompt { background:#14161f; color:#e7e9f0; border-radius:.9rem; padding:1.1rem 1.2rem; box-shadow:var(--shadow); }
.atl-prompt-text { font-family:'Inter',monospace; margin-bottom:.8rem; line-height:1.55; }
.atl-prompt-text::before { content:"« "; opacity:.5; } .atl-prompt-text::after { content:" »"; opacity:.5; }
.atl-meta { list-style:none; padding-left:0; }
.atl-meta li { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:4px solid var(--accent); border-radius:.7rem; padding:.7rem 1rem; margin-bottom:.5rem; font-weight:500; }
.atl-meta .bi { color:var(--accent); }
.atl-hints .accordion-button:not(.collapsed) { background:color-mix(in srgb, var(--accent) 14%, var(--bs-body-bg)); color:var(--accent); box-shadow:none; }
.atl-hints .accordion-button:focus { box-shadow:none; }

/* ---------- Six Hats widget ---------- */
.atl-hats-wrap { border-radius:1rem; padding:1.2rem; box-shadow:0 6px 18px rgba(0,0,0,.07); }
.atl-hats { display:flex; flex-wrap:wrap; gap:.6rem; }
.atl-hat { border:0; border-radius:.8rem; padding:.7rem .5rem; flex:1; min-width:80px; cursor:pointer; font-weight:700; font-size:.9rem; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.15); transition:transform .15s, outline .15s; outline:3px solid transparent; }
.atl-hat:hover { transform:translateY(-3px); }
.atl-hat.active { outline-color:var(--bs-emphasis-color); transform:translateY(-3px) scale(1.04); }
.atl-hat-desc { margin-top:1rem; background:var(--bs-tertiary-bg); border-radius:.8rem; padding:.9rem 1.1rem; font-weight:500; min-height:3.2rem; display:flex; align-items:center; gap:.6rem; }
.atl-hat-desc .badge { flex:none; }

/* ---------- Done button ---------- */
.atl-done-btn { border:2px solid var(--accent); color:var(--accent); background:var(--bs-body-bg); font-weight:800; border-radius:.8rem; padding:.7rem 1.2rem; transition:.2s; }
.atl-done-btn:hover { background:color-mix(in srgb, var(--accent) 10%, var(--bs-body-bg)); }
.atl-done-btn.is-done { background:linear-gradient(135deg,#16a34a,#22c55e); border-color:#16a34a; color:#fff; }

/* ---------- Sidebar ---------- */
.atl-side { top:1rem; display:grid; gap:1rem; }
.atl-side-card { border-radius:1.1rem; padding:1.2rem; box-shadow:0 6px 18px rgba(0,0,0,.07); }
.atl-side-title { font-size:1rem; font-weight:800; margin-bottom:.8rem; }
.atl-side-note { font-size:.88rem; color:var(--bs-secondary-color); margin:0; }
.atl-side-tool { border-top:5px solid var(--accent); }
.atl-tool-btn { background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); color:#fff; font-weight:700; border:0; }
.atl-tool-btn:hover { filter:brightness(1.08); color:#fff; }
.atl-side-teacher { background:var(--bs-tertiary-bg); }

/* ---------- Room nav ---------- */
.atl-roomnav { display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }
.atl-roomnav-link { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--bs-body-color); border-radius:1rem; padding:.8rem 1.1rem; transition:.15s; }
.atl-roomnav-link:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
.atl-roomnav-link .bi { font-size:1.3rem; color:var(--accent); }
.atl-roomnav-link small { display:block; color:var(--bs-secondary-color); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }

/* ---------- Rubric ---------- */
.atl-rubric table { border-radius:1rem; overflow:hidden; box-shadow:var(--shadow); }
.atl-rubric th, .atl-rubric td { font-size:.9rem; vertical-align:top; }
.atl-rubric-crit { background:var(--bs-tertiary-bg); font-weight:800; min-width:12rem; }
.atl-rubric-lvl { color:#fff; text-align:center; font-weight:800; }
.atl-lvl-1 { background:#ef6a6a; } .atl-lvl-2 { background:#e6a23c; } .atl-lvl-3 { background:#5aa6e0; } .atl-lvl-4 { background:#2eaa6b; }

/* ---------- Rubric criterion cards ---------- */
.atl-crit-card { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:6px solid var(--accent); border-radius:1.1rem; padding:1.3rem 1.5rem; margin-bottom:1.2rem; box-shadow:0 6px 18px rgba(27,31,42,.06); }
.atl-crit-head { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.atl-crit-illu { width:76px; height:76px; flex:none; background:color-mix(in srgb, var(--accent) 12%, #fff); border-radius:1rem; padding:.35rem; }
.atl-crit-head h3 { font-weight:800; font-size:1.2rem; margin:.25rem 0 0; }
.atl-level { height:100%; border-radius:.85rem; padding:.8rem .9rem; color:#fff; }
.atl-level-num { font-weight:800; font-size:.78rem; display:block; margin-bottom:.3rem; opacity:.95; }
.atl-level p { margin:0; font-size:.88rem; line-height:1.4; }

/* ---------- Guide ---------- */
.atl-guide-card { border-radius:1.1rem; padding:1.4rem 1.5rem; box-shadow:0 6px 18px rgba(0,0,0,.07); height:100%; }
.atl-guide-card .atl-h3 { color:var(--bs-primary); }

/* ---------- Footer ---------- */
.atl-footer { background:var(--bs-body-bg); border-top:1px solid var(--bs-border-color); padding:1.5rem 0; margin-top:2rem; }

/* ---------- Worksheet (πάντα λευκό «χαρτί» για εκτύπωση) ---------- */
.atl-ws-bar { display:flex; justify-content:space-between; margin-bottom:1rem; }
.atl-worksheet { background:#fff; color:#1b1f2a; border:1px solid #e5e7eb; border-radius:1rem; padding:2rem 2.2rem; max-width:50rem; margin:0 auto; box-shadow:var(--shadow); }
.atl-ws-head { border-bottom:2px solid #1b1f2a; padding-bottom:.8rem; margin-bottom:1.1rem; }
.atl-ws-code { text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:#6b7280; font-weight:700; margin:0; }
.atl-ws-title { font-weight:900; font-size:1.5rem; margin:.2rem 0 .6rem; }
.atl-ws-id { display:flex; gap:2rem; flex-wrap:wrap; font-size:.9rem; }
.atl-ws-instructions { font-size:.92rem; background:#f6f4fd; border-radius:.6rem; padding:.8rem 1rem; }
.atl-ws-h2 { font-size:1.05rem; font-weight:800; margin:1.3rem 0 .6rem; }
.atl-ws-steps li { margin-bottom:.3rem; font-size:.92rem; }
.atl-ws-field { margin-bottom:1.1rem; }
.atl-ws-label { font-weight:700; font-size:.92rem; display:block; margin-bottom:.5rem; }
.atl-fill-line { border-bottom:1px dashed #aab; height:1.7rem; }
.atl-fill-inline { display:inline-block; border-bottom:1px dashed #aab; min-width:9rem; }

/* ---------- Tabs & activity wizard ---------- */
.atl-tabs .nav-link { font-weight:700; }
.atl-wizard { border:1px solid var(--bs-border-color); border-radius:1rem; }
.atl-wiz-progress { height:8px; }
.atl-wiz-fill { background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); transition:width .4s cubic-bezier(.16,1,.3,1); }
.atl-wiz-track { min-height:5.5rem; }
.atl-wstep { display:flex; gap:1rem; align-items:flex-start; animation:atl-pop .3s ease; }
.atl-wstep-num { flex:none; width:2.6rem; height:2.6rem; border-radius:50%; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.2rem; }
.atl-wstep-text { font-size:1.12rem; line-height:1.5; margin:.3rem 0 0; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity:1; transform:none; }

/* ---------- Challenge game ---------- */
.atl-game { max-width:680px; margin:0 auto; }
.atl-game-screen { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:1.3rem; padding:2rem; box-shadow:var(--shadow); }
.atl-game-emoji { font-size:4rem; line-height:1; margin-bottom:.4rem; }
.atl-timer { height:10px; background:var(--bs-tertiary-bg); border-radius:2rem; overflow:hidden; }
.atl-timer-fill { height:100%; width:100%; background:linear-gradient(90deg,#22c55e,#f59e0b,#dc2626); }
.atl-q { font-weight:800; }
.atl-opt { font-weight:700; color:#fff; border:0; border-radius:1rem; padding:1rem .8rem; width:100%; min-height:68px; font-size:1.02rem; box-shadow:0 4px 12px rgba(0,0,0,.14); transition:transform .12s; }
.atl-opt:hover:not(:disabled) { transform:translateY(-3px); }
.atl-opt:disabled { opacity:.5; cursor:default; }
.atl-opt.correct { outline:4px solid #16a34a; opacity:1; }
.atl-opt.wrong { outline:4px solid #b91c1c; opacity:1; }
.atl-feedback { font-weight:800; min-height:1.5rem; }
.atl-feedback .tip { display:block; font-weight:400; color:var(--bs-secondary-color); font-size:.9rem; margin-top:.2rem; }
.atl-result-score { font-size:3.4rem; font-weight:900; color:var(--bs-primary); line-height:1; }

/* ---------- Progress v2 (colorful & cheerful) ---------- */
.atl-prog-count { font-weight:800; font-size:1.05rem; }
.atl-prog-count b { color:var(--bs-primary); font-size:1.4rem; }
.atl-prog-bar { height:14px; background:var(--bs-tertiary-bg,#eceaf6); border-radius:2rem; overflow:hidden; }
.atl-prog-fill { background:linear-gradient(90deg,#2563eb,#16a34a,#f59e0b,#dc2626,#7c3aed); border-radius:2rem; }
.atl-prog-steps { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.atl-prog-step { flex:1; min-width:135px; display:flex; align-items:center; gap:.5rem; padding:.6rem .75rem; border-radius:.85rem; background:color-mix(in srgb, var(--accent,#6d28d9) 12%, #fff); border:1px solid color-mix(in srgb, var(--accent,#6d28d9) 30%, #fff); color:var(--bs-body-color,#1b1f2a); font-size:.85rem; font-weight:700; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.atl-prog-step:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.atl-prog-step .num { width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; background:var(--accent,#6d28d9); color:#fff; font-weight:800; font-size:.85rem; flex:none; }
.atl-prog-ttl { line-height:1.12; }
.atl-prog-check { margin-left:auto; color:#16a34a; opacity:0; transition:opacity .2s; font-size:1.15rem; }
.atl-prog-step.done { background:#ecfdf3; border-color:#86efac; }
.atl-prog-step.done .num { background:#16a34a; }
.atl-prog-step.done .atl-prog-check { opacity:1; }
/* guide cards: λίγο πιο χαρούμενα */
.atl-guide-card { border-top:4px solid var(--bs-primary); }

/* ---------- Material pages (strategies/goals/glossary/printables/wall) ---------- */
.atl-strat { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:6px solid var(--accent); border-radius:1.1rem; padding:1.3rem 1.5rem; margin-bottom:1.2rem; box-shadow:0 6px 18px rgba(27,31,42,.06); }
.atl-strat-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; flex-wrap:wrap; }
.atl-goal-card { height:100%; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-top:5px solid var(--accent); border-radius:1.1rem; padding:1.4rem; box-shadow:0 6px 18px rgba(27,31,42,.06); }
.atl-goal-card .atl-h3 { color:var(--accent); }
.atl-goal-card ul { padding-left:1.1rem; margin:0; } .atl-goal-card li { margin-bottom:.45rem; }
.atl-gloss-card { height:100%; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-left:4px solid var(--bs-primary); border-radius:.9rem; padding:.9rem 1.1rem; }
.atl-gloss-card h3 { font-size:1.02rem; font-weight:800; color:var(--bs-primary); margin:0 0 .2rem; }
.atl-gloss-card p { margin:0; font-size:.9rem; color:var(--bs-secondary-color); }
.atl-print-card { display:flex; align-items:center; gap:.8rem; height:100%; text-decoration:none; color:var(--bs-body-color); background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:1rem; padding:1rem 1.1rem; box-shadow:0 6px 16px rgba(27,31,42,.06); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.atl-print-card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(27,31,42,.12); border-color:var(--bs-primary); }
.atl-print-ic { font-size:1.7rem; color:var(--bs-primary); }
.atl-print-txt { display:flex; flex-direction:column; }
.atl-print-txt .code { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bs-secondary-color); font-weight:700; }
.atl-wall-form { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start; }
.atl-wall-form #atl-wall-author { max-width:240px; }
.atl-wall-form textarea { flex:1; min-width:220px; }
.atl-wall { columns:3 240px; column-gap:1rem; margin-top:.5rem; }
.atl-note { break-inside:avoid; position:relative; border-radius:.8rem; padding:1rem 1.1rem; margin:0 0 1rem; box-shadow:0 4px 10px rgba(0,0,0,.12); color:#1f2937; transform:rotate(-1deg); }
.atl-note:nth-child(even) { transform:rotate(1deg); }
.atl-note p { margin:0; font-weight:600; white-space:pre-wrap; }
.atl-note-au { display:block; margin-top:.4rem; font-size:.8rem; opacity:.7; }
.atl-note-del { position:absolute; top:.25rem; right:.45rem; border:0; background:transparent; font-size:1.25rem; line-height:1; cursor:pointer; color:rgba(0,0,0,.4); }
.atl-note-del:hover { color:#dc2626; }
/* goals: διάγραμμα Σκέφτομαι/Νιώθω/Κάνω + icon-items */
.atl-hhh { display:flex; justify-content:center; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin:.5rem 0 2.5rem; }
.atl-hhh-item { text-align:center; max-width:180px; }
.atl-hhh-ic { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; background:var(--c); border:0; color:#fff; font-size:2.7rem; margin:0 auto .5rem; box-shadow:0 6px 16px color-mix(in srgb, var(--c) 30%, transparent); }
.atl-hhh-item strong { display:block; font-size:1.05rem; }
.atl-hhh-item > span { color:var(--bs-secondary-color); font-size:.85rem; }
.atl-hhh-plus { font-size:1.8rem; color:var(--bs-secondary-color); font-weight:300; margin-top:30px; }
.atl-goal-item { display:flex; gap:.55rem; align-items:flex-start; margin-bottom:.7rem; }
.atl-goal-item .bi { color:var(--accent); font-size:1.1rem; margin-top:.15rem; flex:none; }
/* glossary: εικονίδιο ανά όρο */
.atl-gloss-card { display:flex; gap:.8rem; align-items:flex-start; border-left-color:var(--accent); }
.atl-gloss-ic { width:42px; height:42px; flex:none; border-radius:.7rem; background:color-mix(in srgb, var(--accent) 14%, #fff); color:var(--accent); display:grid; place-items:center; font-size:1.2rem; }
.atl-gloss-card h3 { color:var(--accent); }
/* goals: διαδραστικά tabs */
.atl-hhh-tabs { gap:1.4rem; border:0; margin-bottom:1.6rem; flex-wrap:wrap; }
.atl-hhh-tab { background:transparent; border:0; text-align:center; opacity:.55; transition:opacity .15s ease, transform .15s ease; padding:.3rem; cursor:pointer; }
.atl-hhh-tab strong { display:block; color:var(--bs-body-color); }
.atl-hhh-tab > span { color:var(--bs-secondary-color); font-size:.82rem; }
.atl-hhh-tab.active { opacity:1; transform:translateY(-4px); }
.atl-hhh-tab.active .atl-hhh-ic { box-shadow:0 10px 22px color-mix(in srgb, var(--c) 45%, transparent); }
.atl-goal-panel { max-width:820px; margin:0 auto; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-top:4px solid var(--accent); border-radius:1.1rem; padding:1.4rem 1.5rem; box-shadow:0 6px 18px rgba(27,31,42,.06); }
.atl-goal-tile { display:flex; gap:.6rem; align-items:flex-start; height:100%; background:color-mix(in srgb, var(--accent) 7%, #fff); border:1px solid color-mix(in srgb, var(--accent) 18%, #fff); border-radius:.8rem; padding:.8rem .9rem; font-size:.92rem; }
.atl-goal-tic { width:28px; height:28px; flex:none; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:.9rem; margin-top:.05rem; }
/* glossary: ζωντανή αναζήτηση */
.atl-gloss-search-wrap { position:relative; max-width:480px; }
.atl-gloss-search-wrap .bi { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--bs-secondary-color); z-index:3; }
.atl-gloss-search-wrap input { padding-left:42px; border-radius:2rem; }
/* strategies: accordion με accent */
.atl-acc .accordion-item { border:1px solid var(--bs-border-color); border-left:5px solid var(--accent); border-radius:.8rem; overflow:hidden; margin-bottom:.7rem; }
.atl-acc .accordion-button { font-weight:800; }
.atl-acc .accordion-button:not(.collapsed) { background:color-mix(in srgb, var(--accent) 10%, #fff); color:var(--accent); box-shadow:none; }
.atl-acc .accordion-button:focus { box-shadow:none; }
/* video cards */
.atl-video-row { display:flex; gap:1rem; flex-wrap:wrap; }
.atl-video-card { flex:1; min-width:220px; display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--bs-body-color); background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:1rem; padding:1rem 1.2rem; font-weight:700; transition:transform .15s ease, box-shadow .15s ease; }
.atl-video-card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(27,31,42,.12); }
.atl-video-card .bi { font-size:1.85rem; color:#dc2626; }
/* strategies: featured card */
.atl-strat-feat { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-top:5px solid var(--accent); border-radius:1.1rem; padding:1.5rem 1.7rem; box-shadow:0 6px 18px rgba(27,31,42,.06); }
.atl-strat-ic { width:44px; height:44px; flex:none; border-radius:.7rem; background:color-mix(in srgb, var(--accent) 14%, #fff); color:var(--accent); display:grid; place-items:center; font-size:1.3rem; }
/* about: icon badges (λιγότερο basic) */
.atl-guide-card .atl-h3 .bi { display:inline-grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:.55rem; background:color-mix(in srgb, var(--bs-primary) 14%, #fff); font-size:1.05rem; vertical-align:-.45rem; }

/* ---------- Map (journey of 5 stations) ---------- */
.atl-map { position:relative; display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin-top:1.4rem; }
.atl-map::before { content:""; position:absolute; left:8%; right:8%; top:42px; border-top:3px dashed var(--bs-border-color,#ccc); z-index:0; }
.atl-map-node { position:relative; z-index:1; flex:1; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:.45rem; text-decoration:none; color:var(--bs-body-color,#1b1f2a); }
.atl-map-pin { position:relative; width:86px; height:86px; border-radius:50%; background:color-mix(in srgb, var(--accent) 14%, #fff); border:3px solid var(--accent); display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.1); transition:transform .15s ease; }
.atl-map-node:hover .atl-map-pin { transform:translateY(-4px) scale(1.05); }
.atl-map-pin img { width:54px; height:54px; }
.atl-map-badge { position:absolute; top:-6px; left:-6px; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.8rem; border:2px solid #fff; }
.atl-map-check { position:absolute; bottom:-4px; right:-4px; color:#16a34a; background:#fff; border-radius:50%; font-size:1.35rem; opacity:0; transition:opacity .2s ease; }
.atl-map-node.done .atl-map-pin { border-color:#16a34a; background:#ecfdf3; }
.atl-map-node.done .atl-map-check { opacity:1; }
.atl-map-ttl { font-size:.82rem; font-weight:700; text-align:center; line-height:1.12; }
@media (max-width:575.98px){ .atl-map::before { display:none; } }

/* ---------- Games hub + mini-games ---------- */
.atl-game-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; height:100%; text-decoration:none; color:inherit; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-top:5px solid var(--accent); border-radius:1.2rem; padding:1.7rem 1.2rem; box-shadow:0 6px 18px rgba(27,31,42,.06); transition:transform .18s ease, box-shadow .18s ease; }
.atl-game-card:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(27,31,42,.15); }
.atl-game-ic { font-size:3rem; line-height:1; }
.atl-game-card h3 { font-weight:800; font-size:1.2rem; margin:.3rem 0 0; }
.atl-game-card p { color:var(--bs-secondary-color); font-size:.92rem; margin:0 0 .7rem; }
.atl-match-col { display:flex; flex-direction:column; gap:.6rem; }
.atl-mt, .atl-mr { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; border:2px solid var(--bs-border-color); background:var(--bs-body-bg); color:var(--bs-body-color); border-radius:.9rem; padding:.7rem .9rem; font-weight:700; cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease; }
.atl-mt:hover:not(.locked), .atl-mr:hover:not(.locked) { transform:translateY(-2px); }
.atl-mt.sel { border-color:#6366f1; background:color-mix(in srgb,#6366f1 12%,#fff); }
.atl-mr { border-left:5px solid var(--accent); }
.atl-mr img { width:38px; height:38px; flex:none; }
.atl-mt.ok, .atl-mr.ok { border-color:#16a34a; background:#ecfdf3; }
.atl-mt.locked, .atl-mr.locked { cursor:default; }
.atl-mt.bad, .atl-mr.bad { border-color:#dc2626; animation:atl-shake .4s; }
.atl-ord { position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; width:100%; border:2px solid var(--bs-border-color); border-top:5px solid var(--accent); background:var(--bs-body-bg); color:var(--bs-body-color); border-radius:1rem; padding:.9rem .5rem; font-weight:700; font-size:.8rem; text-align:center; cursor:pointer; transition:transform .12s ease; }
.atl-ord:hover:not(.locked) { transform:translateY(-3px); }
.atl-ord img { width:62px; height:62px; }
.atl-ord.ok { border-color:#16a34a; background:#ecfdf3; cursor:default; }
.atl-ord.bad { border-color:#dc2626; animation:atl-shake .4s; }
.atl-ord-pos { display:none; position:absolute; top:-12px; left:-12px; width:1.9rem; height:1.9rem; border-radius:50%; background:#16a34a; color:#fff; place-items:center; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* ---------- Challenge v2 ---------- */
.atl-game-illu { width:150px; height:150px; margin:0 auto .6rem; display:block; }
.atl-game-bar { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; }
.atl-pill { font-weight:800; border-radius:2rem; padding:.3rem .9rem; font-size:.88rem; }
.atl-pill.atl-score { background:var(--bs-primary); color:#fff; }
.atl-pill.atl-streak { background:#f59e0b; color:#1f2937; }
.atl-pill.atl-qn { background:var(--bs-secondary-bg, #e9ecef); color:var(--bs-secondary-color, #555); }
.atl-timer { height:12px; background:var(--bs-tertiary-bg, #eee); border-radius:2rem; overflow:hidden; }
.atl-timer-fill { height:100%; width:100%; background:linear-gradient(90deg,#22c55e,#f59e0b,#dc2626); transition:width .05s linear; }
.atl-timer-sec { color:var(--bs-secondary-color, #777); margin-top:.2rem; }
.atl-opt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:94px; border:0; border-radius:1.1rem; padding:.85rem; font-weight:800; background:linear-gradient(135deg, var(--opt, #6d28d9), color-mix(in srgb, var(--opt, #6d28d9) 66%, #000)); box-shadow:0 6px 16px rgba(0,0,0,.18); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.atl-opt:hover:not(:disabled) { transform:translateY(-4px) scale(1.02); box-shadow:0 12px 26px rgba(0,0,0,.26); }
.atl-opt:active:not(:disabled) { transform:scale(.97); }
.atl-opt-img { width:48px; height:48px; background:#fff; border-radius:.6rem; padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.atl-opt-label { font-size:1rem; line-height:1.15; }
.atl-opt:disabled { cursor:default; }
.atl-opt.dim { opacity:.4; }
.atl-opt.correct { outline:4px solid #16a34a; outline-offset:2px; animation:atl-correct .5s; }
.atl-opt.wrong { outline:4px solid #b91c1c; outline-offset:2px; animation:atl-shake .4s; filter:saturate(.7); }
@keyframes atl-correct { 0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)} }
@keyframes atl-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 60%{transform:translateX(7px)} }
.atl-feedback { font-weight:800; min-height:2.4rem; }
.atl-fb-ok { color:#16a34a; } .atl-fb-no { color:#dc2626; }
.atl-fb-tip { display:block; font-weight:400; color:var(--bs-secondary-color, #777); font-size:.88rem; margin-top:.2rem; }
.atl-result-score { font-size:3.6rem; font-weight:900; color:var(--bs-primary); line-height:1; }

/* ---------- Confetti ---------- */
#atl-confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1080; }

@media (prefers-reduced-motion: reduce) {
  *, .atl-hero, .atl-blob, .atl-hero-art, .atl-room-emoji { animation:none !important; }
  .reveal { opacity:1; transform:none; transition:none; }
  .atl-prog-fill { transition:none; }
}

@media print {
  .atl-nav, .atl-footer, .no-print { display:none !important; }
  body { background:#fff; }
  .atl-worksheet { border:0; max-width:none; padding:0; box-shadow:none; }
  .atl-fill-line { height:1.9rem; }
}