/* File: desktop/folder/dinno.css — responsive, cleaned, duplicates removed */

/* ========== THEME TOKENS ========== */
:root{
  --bg:#0b0f1c;          /* base under sky canvas */
  --bg-soft:#171a31;
  --card:#1e2242;
  --text:#e9ecff;
  --muted:#a8b0d9;
  --brand:#6dd6ff;
  --brand-2:#90ff84;
  --accent:#ffd166;
  --danger:#ff6b6b;
  --ok:#4ade80;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

body[data-theme="contrast"]{
  --text:#ffffff;
  --muted:#f0f3ff;
  --card:#2a3266;
  --bg-soft:#202851;
  --brand:#ff9f1c;
  --brand-2:#ffbf69;
  --accent:#ff595e;
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,Segoe UI,Roboto,Ubuntu,"Open Sans",sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100dvh;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .5rem}
h1{font-size:clamp(1.6rem,2.6vw,2.6rem)}
h2{font-size:clamp(1.3rem,2.2vw,2.2rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.4rem)}
p{margin:.25rem 0 .75rem}
.muted{color:var(--muted);font-size:.95rem}

/* accessibility */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:10000}
.btn:focus,.icon-btn:focus,.nav-list a:focus{outline:2px solid var(--brand);outline-offset:2px}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ========== CANVAS BACKGROUNDS ========== */
#starfield,
.bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none; display:block;
}

/* lift content above canvas */
.site-header,.section,.site-footer{position:relative; z-index:1}

/* ========== HEADER + NAV ========== */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(130%) blur(8px);
  background:linear-gradient(180deg, rgba(10,14,28,.85), rgba(10,14,28,.55));
  border-bottom:1px solid #20264a;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.6rem 1rem;
}
.logo{display:flex;align-items:center;gap:.5rem;color:var(--text);text-decoration:none;font-weight:700}
.logo img{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.nav{position:relative}
.nav-list{
  display:flex; gap:.6rem; list-style:none; margin:0; padding:0;
}
.nav-list a{
  color:var(--text); text-decoration:none; padding:.35rem .6rem; border-radius:.5rem;
}
.nav-list a:hover,.nav-list a:focus{background:var(--bg-soft)}
.icon-btn{
  background:var(--bg-soft); border:1px solid #2a2f57; color:var(--text);
  border-radius:.6rem; padding:.45rem .6rem; cursor:pointer;
}
.header-actions{display:flex;gap:.4rem}
#menuBtn{display:none}

/* mobile nav */
@media (max-width: 900px){
  #menuBtn{display:inline-block}
  .nav-list{
    position:absolute; right:0; top:calc(100% + 8px);
    background:rgba(10,14,28,.97);
    border:1px solid #2a2f57; border-radius:.8rem; padding:.6rem;
    flex-direction:column; min-width:200px; display:none;
  }
  .nav-list.show{display:flex}
}

/* ========== LAYOUT HELPERS ========== */
.section{padding:clamp(1.6rem,4vw,3.2rem) 1rem; max-width:1100px; margin:0 auto}
.btn{
  background:var(--brand); color:#001018; border:none; border-radius:.7rem;
  padding:.55rem .9rem; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid #385782; color:var(--text)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* ========== HERO ========== */
.hero{
  display:grid; grid-template-columns:1.1fr 1fr; gap:1.2rem; align-items:center;
}
.hero-right{
  background:linear-gradient(180deg,#0c1430,#0a0f24);
  border:1px solid #20264a; border-radius:1rem; box-shadow:var(--shadow);
  padding:.5rem; min-height:320px; display:flex; align-items:center; justify-content:center;
}
@media (max-width: 900px){ .hero{ grid-template-columns:1fr } }

/* video slider (hero) */
.video-slider{
  position:relative; width:100%; max-width:min(640px,100%); aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; border:1px solid #2a2f57; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.dino-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.dino-video.active{ display:block; }
.video-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:50%;
  width:42px; height:42px; font-size:20px; cursor:pointer; z-index:2;
}
.video-btn.prev{ left:10px } .video-btn.next{ right:10px }
.video-btn:hover{ background:rgba(0,0,0,.8) }
.mute-btn{
  position:absolute; right:10px; bottom:10px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:50%;
  width:40px; height:40px; font-size:18px; cursor:pointer;
}
.dots{
  position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; z-index:2;
}
.dot{ width:10px; height:10px; border-radius:50%; border:1px solid #fff; background:transparent; cursor:pointer; opacity:.85 }
.dot.active{ background:#fff }

/* ========== TIMELINE ========== */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.time-card{
  background:var(--card); border:1px solid #2a2f57; border-radius:.9rem;
  overflow:hidden; box-shadow:var(--shadow);
  display:grid; grid-template-columns:120px 1fr; gap:.8rem; align-items:center; padding:.6rem;
}
.time-card img{width:120px; height:90px; object-fit:cover; border-radius:.5rem}
@media (max-width: 800px){
  .timeline{grid-template-columns:1fr}
  .time-card{grid-template-columns:100px 1fr}
  .time-card img{width:100px; height:80px}
}

/* ========== CARDS (generic) ========== */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; margin-top:.6rem}
.card{
  background:var(--card); border:1px solid #2a2f57; border-radius:1rem;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card .thumb{aspect-ratio:16/10; background:#0a0f24; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:.6rem}
.pill{
  display:inline-block; font-size:.75rem; padding:.15rem .45rem; border-radius:999px;
  background:#172046; border:1px solid #2a2f57; color:var(--muted); margin-right:.25rem;
}

/* ========== DIALOG / LIGHTBOX ========== */
dialog{border:none; border-radius:1rem; background:#0b122a; color:var(--text); padding:1rem; max-width:860px; width:92vw; box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.6)}
#detailContent{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
#detailContent img{width:100%; border-radius:.7rem}
@media (max-width:900px){ #detailContent{grid-template-columns:1fr} }

/* image lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; justify-content:center; align-items:center; z-index:2000;
}
.lightbox img{
  max-width:90%; max-height:90%; border-radius:12px; box-shadow:0 0 20px rgba(0,0,0,.8);
  animation:zoomIn .3s ease;
}
.lightbox[hidden]{display:none}
@keyframes zoomIn{ from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }

/* ========== EXPLOREE ========== */
.exploree{display:grid; gap:1rem}
.exploree-head{text-align:center}
.x-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem}

/* flip cards */


/* ADAUGĂ LA FINALUL dinno.css — centrează tot în #exploree */
.exploree { text-align:center; }

.x-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* centrează pe rând */
  gap:1rem;
}

/* cardul pe centru */
.x-card { width:240px; margin-inline:auto; }

/* fața și spatele cardului centrate perfect */
.x-face { display:grid; place-items:center; text-align:center; }

/* imaginea umple cardul corect */
.x-front img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* quiz și ouă aliniate central */
.x-quiz { margin-inline:auto; max-width:560px; text-align:center; }
.x-eggs { display:flex; justify-content:center; gap:.6rem; }




.x-card{perspective:1000px; height:280px}
.x-card>.inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.75,.25,1);
  border-radius:1rem; overflow:hidden; box-shadow:var(--shadow); border:1px solid #2a2f57;
}
.x-card.flip>.inner{transform:rotateY(180deg)}
.x-face{position:absolute; inset:0; backface-visibility:hidden; display:grid; place-items:center; padding:.6rem}
.x-front{background:var(--card)}
.x-front img{width:100%; height:100%; object-fit:cover}
.x-badge{
  position:absolute; left:.5rem; top:.5rem; background:#0009; color:#fff;
  padding:.2rem .5rem; border-radius:.5rem; font-size:.8rem;
}
.x-back{
  background:linear-gradient(180deg,#10173a,#0c1330); transform:rotateY(180deg); text-align:center;
}
.x-back h3{margin:.4rem 0 .2rem}
.x-back p{font-size:.95rem}
.x-quiz{
  background:var(--card); border:1px solid #2a2f57; border-radius:1rem; padding:1rem;
  display:grid; gap:.6rem; text-align:center;
}
.x-opts{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.x-eggs{display:flex; gap:.6rem; justify-content:center}
.egg{
  font-size:1.6rem; line-height:1; padding:.5rem .7rem; border-radius:.8rem; border:1px solid #2a2f57;
  background:var(--bg-soft); color:var(--text); cursor:pointer; transition:transform .15s;
}
.egg:active{transform:scale(.92) rotate(-6deg)}
.x-card:hover .x-front img{transform:scale(1.05); transition:transform .4s}

/* ========== DIG ========== */
.dig-section{display:grid; gap:1rem; margin-top:1rem}
.dig-head{text-align:center}
.dig-sub{opacity:.85}

/* video wrap */
.dig-video-wrap{position:relative; max-width:880px; margin:0 auto; border-radius:1rem; overflow:hidden; border:1px solid #2a2f57}
.dig-video{width:100%; display:block; background:#000}
.dig-mute{
  position:absolute; right:.6rem; bottom:.6rem; background:rgba(0,0,0,.55); color:#fff;
  border:none; border-radius:999px; padding:.45rem .6rem; font-size:1rem; cursor:pointer;
}

/* UI */
.dig-ui{display:flex; gap:.8rem; align-items:center; justify-content:center; flex-wrap:wrap}
.dig-btn{background:var(--brand); color:#001018; border:none; border-radius:.7rem; padding:.55rem .9rem; font-weight:700; cursor:pointer}
.dig-btn.ghost{background:transparent; border:1px solid #385782; color:var(--text)}
.dig-info{display:flex; gap:1rem; color:var(--muted)}

/* grid game */
.dig-grid{
  --cols:6;
  display:grid; grid-template-columns:repeat(var(--cols),minmax(72px,1fr));
  gap:.5rem; max-width:960px; margin:0 auto;
}
@media (max-width: 800px){ .dig-grid{--cols:4} }
@media (max-width: 520px){ .dig-grid{--cols:3} }

.dig-tile{
  position:relative; aspect-ratio:1; border-radius:.8rem; cursor:pointer;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.75,.25,1);
}
.dig-tile .dig-face{
  position:absolute; inset:0; border-radius:.8rem; backface-visibility:hidden; display:grid; place-items:center; overflow:hidden;
}
.dig-face.front{
  background:linear-gradient(180deg,#c8a86a,#8d6a3d); box-shadow:inset 0 6px 18px rgba(0,0,0,.25);
}
.dig-face.front::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:6px 6px; opacity:.25; mix-blend-mode:overlay;
}
.dig-face.back{transform:rotateY(180deg); background:#0b122a; border:1px solid #2a2f57}
.dig-tile.revealed{transform:rotateY(180deg)}
.dig-fossil{width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}

/* dust */
.dig-dust{position:absolute; pointer-events:none; inset:0; overflow:hidden}
.dig-p{position:absolute; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.65); opacity:.9; animation:dig-pop .6s ease-out forwards}
@keyframes dig-pop{ 0%{transform:translate(0,0) scale(.7);opacity:.9} 100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0} }

/* quiz */
.dig-quiz{
  max-width:800px; margin:.5rem auto 0; background:var(--card); border:1px solid #2a2f57;
  border-radius:1rem; padding:1rem; display:grid; gap:.6rem; text-align:center;
}
.dig-a{color:var(--muted)}
.dig-opts{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}

/* ========== SOUNDS ========== */
.sounds{text-align:center}
.sound-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.s-item{
  background:rgba(10,14,40,.65); border:1px solid #2a2f57; border-radius:1rem; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.s-video{width:100%; aspect-ratio:16/9; object-fit:cover; background:#000}
.s-controls{display:flex; gap:.5rem; justify-content:center; align-items:center; padding:.6rem}
.s-btn{border:none; border-radius:.6rem; padding:.45rem .7rem; cursor:pointer; background:#6dd6ff; color:#001018; font-weight:700}
.s-btn.sound{background:#ffb74d; color:#1b1200}
.s-btn:is(:hover,:focus){filter:brightness(.95)}
.s-tip{font-size:.9rem; opacity:.8}
.s-item.active{box-shadow:0 0 0 2px #6dd6ff, 0 10px 30px rgba(0,0,0,.35)}

/* ========== QUIZ (EGG HUNT) ========== */
.dino-quiz{position:relative; display:grid; gap:1rem}
.dq-head{text-align:center}
.dq-wrap{display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center}
@media (max-width:800px){
  .dq-wrap{grid-template-columns:1fr; grid-template-rows:auto auto auto}
  .dq-arrow{order:2; justify-self:center}
  .dq-card{order:1}
}
.dq-card{
  background:var(--card); border:1px solid #2a2f57; border-radius:1rem;
  padding:1rem; min-height:240px; display:grid; gap:.8rem; position:relative;
}
.dq-progress{position:absolute; top:.6rem; right:.8rem; font-weight:700; opacity:.8}
.dq-q{margin:.4rem 0 .2rem}
.dq-opts{display:grid; gap:.5rem}
.dq-opts button{
  text-align:left; padding:.6rem .75rem; border-radius:.7rem; border:1px solid #384a80;
  background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; transition:filter .2s;
}
.dq-opts button:hover{filter:brightness(1.1)}
.dq-opts button.correct{border-color:#2dd4bf; background:rgba(45,212,191,.1)}
.dq-opts button.wrong{border-color:#f59e0b; background:rgba(245,158,11,.12)}
.dq-msg{min-height:1.2em; opacity:.9}
.dq-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid #2a2f57;
  background:rgba(0,0,0,.45); color:#fff; font-size:20px; cursor:pointer;
}
.dq-arrow:hover{background:rgba(0,0,0,.75)}
.dq-basket{
  position:relative; display:grid; justify-items:center; gap:.4rem;
  background:rgba(10,14,40,.55); border:1px solid #2a2f57; border-radius:1rem; padding:.6rem;
}
.dq-badge{font-weight:700}
.dq-eggs{display:flex; flex-wrap:wrap; gap:.25rem; justify-content:center; min-height:32px}
.dq-eggs .egg{font-size:1.3rem}
.dq-count{opacity:.85}
.egg-fly{position:fixed; pointer-events:none; z-index:2000; transition:transform .6s cubic-bezier(.2,.75,.25,1), opacity .6s}
.dq-win{max-width:520px; border:none; border-radius:1rem; padding:1.2rem; background:#12183a; color:#fff}
.dq-portal{width:100%; border-radius:.8rem; margin:.6rem 0}
.dq-reset{
  margin-top:.6rem; padding:.4rem .8rem; border:1px solid #384a80; border-radius:.6rem;
  background:rgba(255,255,255,.08); color:#eaf1ff; cursor:pointer; transition:background .2s;
}
.dq-reset:hover{background:rgba(255,255,255,.2)}

/* ========== VIDEO GALLERY (10 videos + thumbs) ========== */
#video-section{padding:2rem 1rem; text-align:center}
.video-title{margin-bottom:.8rem}
.video-carousel{display:flex; align-items:center; justify-content:center; gap:.75rem}
.video-container{width:min(960px,100%)}
#videoPlayer{width:100%; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.35); background:#000}
.nav-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid #2a2f57;
  background:rgba(0,0,0,.45); color:#fff; font-size:20px; cursor:pointer;
}
.nav-btn:hover{background:rgba(0,0,0,.75)}
.thumbs{margin-top:.75rem; display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
.thumb{
  width:120px; aspect-ratio:16/9; position:relative; border-radius:.5rem; overflow:hidden;
  border:2px solid transparent; cursor:pointer;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.active{border-color:#6dd6ff; box-shadow:0 0 0 2px rgba(109,214,255,.35)}
.thumb:focus-visible{outline:3px solid #6dd6ff; outline-offset:2px}
@media (max-width:700px){ .thumb{width:92px} }

/* ========== ADULTS (For Parents & Teachers) ========== */
.adults{display:grid; gap:1rem}
.adults-head{text-align:center}
.adults .muted{opacity:.85}
.adults-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem;
}
.ad-card{
  background:var(--card); border:1px solid #2a2f57; border-radius:1rem; padding:1rem;
}
.ad-card h3{margin:.2rem 0 .4rem}
.ad-card ul{padding-left:1.1rem}
.ad-card li{margin:.25rem 0}
.cta-wrap{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.btn.ghost{background:transparent; border:1px solid #385782; color:#eaf1ff}
.ad-faq{margin-top:1rem}
.faq{border:1px solid #2a2f57; border-radius:.7rem; overflow:hidden; margin:.5rem 0; background:rgba(255,255,255,.03)}
.faq-q{
  width:100%; text-align:left; background:transparent; color:inherit; border:none;
  padding:.7rem .9rem; cursor:pointer; font-weight:700;
}
.faq-a{padding:.7rem .9rem; border-top:1px solid #2a2f57}

/* ========== FOOTER ========== */
.site-footer{
  margin-top:1.2rem; padding:1rem;
  background:rgba(10,14,40,.65); border-top:1px solid #2a2f57; color:#eaf1ff;
}
.foot-wrap{max-width:1100px; margin:0 auto; display:grid; gap:.5rem; text-align:center}
.foot-nav{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.foot-nav a{color:#cfe6ff; text-decoration:none; border-bottom:1px dotted transparent}
.foot-nav a:hover{border-color:#cfe6ff}
.foot-copy{opacity:.85; font-size:.95rem}