:root{
  --bg:#f7f7f7;
  --surface:#fff;
  --text:#333;
  --muted:#666;
  --accent:#ff9800;
  --nav-h:64px;
  --radius:12px;
  --shadow-sm:0 2px 5px rgba(0,0,0,.1);
  --shadow-md:0 4px 10px rgba(0,0,0,.1);
  --shadow-lg:0 6px 15px rgba(0,0,0,.2);
}

/* Base reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
  /* Mobile-first: allow normal page scrolling. */
  overflow:auto;
}
img{max-width:100%;height:auto;display:block}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;width:100%;
  background:#333;color:#fff;min-height:var(--nav-h);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);z-index:1000;
}
nav ul{list-style:none;display:flex;align-items:center;justify-content:center;gap:22px}
nav li{position:relative}
nav a{
  color:#fff;text-decoration:none;font-weight:500;font-size:17px;
  padding:6px 2px;transition:color .2s ease;display:inline-flex;align-items:center;gap:.5rem
}
nav a i{font-size:16px;opacity:.95;transform:translateY(-1px)}
nav a:hover,nav a:focus{color:#ddd;outline:none}
nav a.active{color:var(--accent)}

.has-dropdown{position:relative}
.has-dropdown .dropdown{
  position:absolute;top:100%;left:0;background:#222;color:#fff;
  border-radius:10px;box-shadow:var(--shadow-lg);min-width:220px;padding:8px;display:none;z-index:1200
}
.has-dropdown.open .dropdown{display:block}
@media (pointer:fine){ .has-dropdown:hover .dropdown{display:block} }
.dropdown a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:#fff;text-decoration:none;font-size:15px
}
.dropdown a:hover{background:#333}
.dropdown .ico{width:18px;text-align:center}

/* Mobile menu button */
.menu-toggle{
  display:none;cursor:pointer;width:44px;height:44px;
  position:fixed;right:12px;top:10px;border:0;background:transparent;z-index:1300
}
.menu-toggle .bar{display:block;width:25px;height:3px;margin:5px auto;background:#fff;transition:all .3s ease}

/* Mobile/tablet nav behavior */
@media (max-width:1023px){
  .menu-toggle{display:block}
  nav ul{
    display:none;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;
    background:#333;text-align:center;padding:12px 0;z-index:1200;
    max-height:calc(100svh - var(--nav-h));overflow-y:auto
  }
  nav ul.active{display:flex}
  nav li{margin:6px 0}
  nav a{font-size:18px;padding:10px 0}
  .has-dropdown .dropdown{position:static;box-shadow:none;background:#333;padding:0}
}

/* ---------- MAIN SCROLLER (#snap) ---------- */
/* Mobile-first: normal scrolling through the whole page */
#snap{
  margin-top:var(--nav-h);
  min-height:calc(100svh - var(--nav-h));
  overflow:visible; /* body scrolls on mobile */
}
#snap>section{
  display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;
  min-height:auto; /* let content decide height on mobile/tablet */
}

/* Desktop (>=1024px): full-page snap inside #snap, body locked */
@media (min-width:1024px){
  body{overflow:hidden} /* prevent body scroll; only #snap scrolls */
  #snap{
    height:calc(100svh - var(--nav-h));
    overflow-y:auto;overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:y mandatory;
  }
  #snap>section{
    height:calc(100svh - var(--nav-h));
    scroll-snap-align:start;scroll-snap-stop:always;
  }
}

/* ---------- TITLES / COMMON ---------- */
.section-title{
  position:relative;font-size:30px;font-weight:600;color:#333;text-transform:uppercase;text-align:center;margin-bottom:28px
}
.section-title i{margin-right:.5rem;font-size:.9em;color:inherit}
.section-title::after{
  content:'';width:180px;height:4px;background:var(--accent);
  position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);border-radius:2px
}
.section-content{max-width:1100px;margin:0 auto}
p{font-size:17px;color:#000;margin-bottom:10px;line-height:1.8}

/* ---------- ABOUT ---------- */
#about{background:var(--bg)}
.about{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  width:100%;max-width:1100px;margin:1px auto;background:#fff;border-radius:10px;box-shadow:var(--shadow-sm);padding:20px
}
.about img{width:360px;max-width:40vw;border-radius:10px;box-shadow:var(--shadow-sm);transition:transform .3s ease}
.about img:hover{transform:scale(1.04)}
.about .content{max-width:620px}

/* ---------- TOOLS GRID ---------- */
#tools .tool-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;max-width:1100px;width:100%
}
.tool-card{
  background:#fff;border-radius:12px;box-shadow:var(--shadow-md);padding:18px;min-height:140px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;
  transition:transform .15s ease,box-shadow .15s ease
}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tool-title{display:flex;align-items:center;gap:10px;font-weight:600}
.tool-title .ico{font-size:18px;color:#222}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap}
.tool-actions a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#f2f2f2;text-decoration:none;color:#222;font-size:14px}
.tool-actions a:hover{background:#e8e8e8}
.tool-actions .ico{font-size:14px}

/* ---------- EDUCATION ---------- */
#education{background:#f7f7f7}
.timeline{
  display:flex;gap:18px;position:relative;padding:4px 2px 2px 2px;flex-wrap:wrap;justify-content:center
}
.timeline-item{
  flex:0 1 260px;padding:18px;background:#fff;border-radius:12px;box-shadow:var(--shadow-md);
  text-align:center;color:#444;transition:transform .15s ease,box-shadow .15s ease
}
.timeline-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.timeline-item h3{font-size:19px;margin-bottom:10px;color:#222;font-weight:600}
.timeline-item p{font-size:15px;color:#666;line-height:1.55}

/* ---------- PROJECTS ---------- */
.project-grid{display:flex;flex-wrap:wrap;margin:0 -12px;row-gap:16px}
.project-item{width:calc(50% - 24px);margin:0 12px;background:#fff;border-radius:10px;box-shadow:var(--shadow-md);transition:box-shadow .15s}
.project-item:hover{box-shadow:var(--shadow-lg)}
.project-header{display:flex;align-items:center;cursor:pointer;padding:14px 16px;position:relative}
.project-logo{font-size:40px;color:#333;margin-right:14px}
.project-title{font-size:18px;font-weight:600;margin-bottom:4px}
.project-details{font-size:13px;color:#777}
.toggle-icon{position:absolute;right:14px;top:12px;font-size:22px;color:var(--accent)}
.toggle-icon::before{content:'+'}
.project-item.active .toggle-icon::before{content:'-'}
.project-description{display:none;padding:0 16px 14px}
.project-item.active .project-description{display:block}
.project-description ul{list-style:disc inside;margin-left:16px}
.project-description li{margin-bottom:8px;line-height:1.55}
.project-description a{color:var(--accent);text-decoration:none}
.project-description a:hover{text-decoration:underline}

/* ---------- EXPERIENCE ---------- */
#experience .section-content{max-width:1100px}
.experience-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;margin:0;padding:0}
.experience-item{display:flex;align-items:flex-start;background:#fff;padding:14px;border-radius:10px;box-shadow:var(--shadow-md)}
.experience-item img{width:60px;height:60px;object-fit:contain;margin-right:12px}
.experience-text{flex:1}
.experience-text .toggle{font-size:16px;font-weight:600;cursor:pointer;position:relative;display:inline-block;margin-bottom:6px;margin-right:8px}
.experience-text .toggle::after{content:" ▼";font-size:14px;position:relative;margin-left:6px}
.experience-list li.active .experience-text .toggle::after{content:" ▲"}
.position-details{display:block;color:#555;font-size:13px;margin-bottom:6px}
.experience-text .details{list-style:disc inside;margin-left:12px;display:none;font-size:14px}
.experience-list li.active .experience-text .details{display:block}

/* ---------- PARTICIPATIONS (compact + consistent crop) ---------- */
#participations .section-content{max-width:1100px;width:100%}
.participations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.participation-card{
  display:flex;gap:10px;align-items:center;background:#fff;border-radius:10px;box-shadow:var(--shadow-sm);padding:8px
}
.participation-card.right .participation-img{order:2;margin-left:10px;margin-right:0}
.participation-img{
  width:130px;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}
.participation-text h3{font-size:14px;margin-bottom:4px;line-height:1.35}
.participation-text p{font-size:13px;line-height:1.45;color:#333;margin-bottom:4px}
.participation-text .clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#participations .section-title{margin-bottom:20px}

@media (min-width:1200px){
  .participations-grid{grid-template-columns:repeat(2,1fr)}
  .participation-img{ width:160px; }
}

/* ---------- LANGUAGES ---------- */
#languages{background:#f0f0f0;color:#333;padding:24px}
.languages{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1100px;margin:0 auto;gap:20px}
.language-item{display:flex;flex-direction:column;align-items:center;margin:10px}
.language-item p{text-align:center;margin-top:10px;font-size:16px}
.language-item small{font-size:13px;color:#666}

/* Donut progress rings */
/* Progress pie (no inner white circle) */
.progress-circle{
  --size:120px;
  --p: 0;                /* 0–100, set from JS */
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;

  /* Solid pie using conic-gradient */
  background:
    conic-gradient(var(--accent) calc(var(--p) * 1%), #e6e6e6ec 0);

  /* Make the number readable on any fill */
  color:#020202;
  font-weight:700;
}
.progress-circle .progress-value{
  position:relative;      /* stays above the background */
  z-index:1;
  font-size:22px;
  letter-spacing:.3px;
  /* optional: subtle stroke for contrast on light % */
  text-shadow:0 0 2px rgba(0,0,0,.35);
}


/* ---------- CONTACT ---------- */
#contact{background:#f0f0f0;color:#333;padding:30px 20px}
.contact-content{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px}
.contact-item a{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center}
.contact-icon{font-size:40px;color:#333;transition:color .2s,transform .2s}
.contact-info{display:none;margin-top:8px;font-size:15px;color:#555;text-align:center}
.contact-item:hover .contact-icon,.contact-item a:focus .contact-icon{color:var(--accent);transform:scale(1.08)}
.contact-item:hover .contact-info,.contact-item a:focus .contact-info{display:block}

/* ---------- RESPONSIVE TWEAKS ---------- */
@media (max-width:1200px){
  #tools .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  #tools .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  #tools .tool-grid{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .section-content,.about{max-width:92%}
}
@media (max-width:768px){
  .about{flex-direction:column;text-align:center}
  .about img{width:300px;margin-bottom:12px}
  .project-item{width:100%}
  .experience-list{grid-template-columns:1fr}
  .participations-grid{grid-template-columns:1fr}
  .participation-img{width:38vw;height:auto}
  .languages{flex-direction:column;align-items:center}
}

/* ---------- STANDALONE PAGES (cards, etc.) ---------- */
/* Re-enable page scrolling if a page wraps content outside #snap */
.page-standalone{overflow:auto;min-height:100svh;background:var(--bg)}
.page-cards main.cards-main{padding-top:var(--nav-h)}
.page-cards #game-chooser{
  min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,152,0,.16), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(0,0,0,.06), transparent 50%),
    var(--bg);
}
.page-cards #game-chooser::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.02) 100%);
}
.page-cards .game-grid{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1200px){ .page-cards .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){  .page-cards .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){  .page-cards .game-grid{grid-template-columns:1fr} }
.page-cards .game-card{
  -webkit-tap-highlight-color:transparent;border:0;outline:0;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;
  padding:18px;border-radius:16px;box-shadow:var(--shadow-md);position:relative;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;text-align:left;overflow:hidden;
}
.page-cards #game-runner{
  max-width:1100px;margin:0 auto;padding:24px;
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center
}