:root{
  --cream:#FFF8EC;
  --ink:#2B2440;
  --coral:#FF6B4A;
  --coral-dark:#E5502F;
  --teal:#2BB7A9;
  --yellow:#FFC93C;
  --violet:#8C6FE6;
  --pink:#FF8FB1;
  --white:#ffffff;
  --shadow: 0 8px 24px rgba(43,36,64,0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  overflow:hidden;
  background-color:var(--cream);
  background-image:
    url('fond.png'),
    linear-gradient(180deg, #FFF8EC 0%, #FFEFDD 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3{font-family:var(--font-display); margin:0;}

.screen{
  position:fixed; inset:0;
  display:none;
  flex-direction:column;
  width:100%; height:100%;
  background:transparent;
}
.screen.active{display:flex;}

/* ===================== GLOBAL BACKGROUND SHAPES ===================== */
.bg-shapes{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.shape{position:absolute; border-radius:50%; opacity:.35; filter:blur(2px);}
.s1{width:220px; height:220px; background:var(--yellow); top:-60px; left:-60px;}
.s2{width:160px; height:160px; background:var(--teal); bottom:10%; left:6%;}
.s3{width:260px; height:260px; background:var(--coral); bottom:-100px; right:-80px;}
.s4{width:120px; height:120px; background:var(--violet); top:12%; right:14%;}
.s5{width:90px; height:90px; background:var(--teal); top:40%; right:6%;}

/* ===================== LOADING ===================== */
#screen-loading{
  align-items:center; justify-content:center;
}
.loading-wrap{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:22px;}
.loading-blob{position:relative; width:180px; height:180px;}
.blob-svg{width:100%; height:100%; animation: blob-spin 6s ease-in-out infinite;}
@keyframes blob-spin{
  0%,100%{ transform: rotate(0deg) scale(1); }
  50%{ transform: rotate(20deg) scale(1.06); }
}
.loading-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--ink);
}
.loading-label{font-weight:700; color:var(--ink); opacity:.75; margin:0;}
.loading-bar{width:220px; height:12px; border-radius:99px; background:rgba(43,36,64,0.1); overflow:hidden;}
.loading-bar-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--coral),var(--yellow)); border-radius:99px; transition:width .25s ease;}

/* ===================== HOME ===================== */
#screen-home{
  align-items:center; justify-content:center; text-align:center;
  position:relative;
}

.home-content{position:relative; z-index:1; max-width:560px; padding:24px; display:flex; flex-direction:column; align-items:center; gap:20px;}
.home-title-wrap{display:flex; justify-content:center;}
.home-title-img{max-width:420px; width:80vw; height:auto;}
.home-title-fallback{
  display:none;
  font-size:clamp(2.2rem, 6vw, 3.4rem);
  font-weight:800; line-height:1.05; color:var(--ink);
}
.home-title-fallback span{color:var(--coral);}
.home-tagline{font-size:1.1rem; font-weight:700; color:var(--ink); opacity:.8; max-width:420px;}
.home-buttons{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.home-footer{position:relative; z-index:1; margin:0 0 22px; font-weight:700; opacity:.55; font-size:.9rem;}

/* ===================== BUTTONS ===================== */
.btn{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  padding:14px 26px; border-radius:99px; box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0px) scale(.97);}
.btn-primary{background:var(--coral); color:white;}
.btn-primary:hover{background:var(--coral-dark);}
.btn-big{font-size:1.3rem; padding:18px 36px;}
.btn-ghost{background:white; color:var(--ink); border:2px solid rgba(43,36,64,0.12);}

.icon-btn{
  font-family:var(--font-body); font-weight:800; font-size:1rem;
  background:white; color:var(--ink); padding:10px 16px; border-radius:99px;
  box-shadow:var(--shadow);
}
.icon-btn:hover{transform:translateY(-1px);}

/* ===================== TOPBAR ===================== */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; background:var(--white);
  box-shadow:0 2px 10px rgba(43,36,64,0.08);
  z-index:5; position:relative;
}
.topbar-group{display:flex; align-items:center; gap:10px;}
.topbar-title{font-size:1.2rem; flex:1;}
.topbar-spacer{flex:1;}
.progress-wrap{flex:1; display:flex; align-items:center; gap:10px; max-width:420px; margin:0 auto;}
.progress-bar{flex:1; height:14px; border-radius:99px; background:rgba(43,36,64,0.1); overflow:hidden;}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--teal),var(--yellow)); border-radius:99px; transition:width .3s ease;}
.progress-label{font-weight:800; font-size:.9rem; white-space:nowrap;}

/* ===================== MENU ===================== */
#screen-menu{}
.menu-grid{
  flex:1; overflow-y:auto; padding:28px; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:20px;
  max-width:1100px; margin:0 auto; width:100%;
  align-content:start; justify-content:center;
  position:relative; z-index:1;
}
@media (min-width: 980px){
  .menu-grid{ grid-template-columns:repeat(5, minmax(150px,180px)); max-width:1000px; }
}
.menu-card{
  background:white; border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .15s ease;
  border:3px solid var(--coral);
  height:fit-content;
}
.menu-card:nth-child(5n+1){border-color:var(--coral);}
.menu-card:nth-child(5n+2){border-color:var(--teal);}
.menu-card:nth-child(5n+3){border-color:var(--yellow);}
.menu-card:nth-child(5n+4){border-color:var(--violet);}
.menu-card:nth-child(5n+5){border-color:var(--pink);}
.menu-card:hover{transform:translateY(-4px) rotate(-1deg);}
.menu-card svg{width:100%; height:100px;}
.menu-card-label{font-family:var(--font-display); font-weight:700;}
.menu-card-progress{font-size:.75rem; font-weight:800; color:var(--teal);}
.menu-card.done{outline:3px solid var(--teal); outline-offset:2px;}
.menu-card{position:relative;}
.menu-card-reset{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:white; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; color:var(--coral); line-height:1;
  transition:transform .15s ease;
}
.menu-card-reset:hover{transform:rotate(-60deg) scale(1.1);}

/* ===================== GAME ===================== */
#screen-game{}
.game-body{flex:1; display:flex; align-items:center; justify-content:center; gap:16px; overflow:hidden; padding:16px; position:relative; z-index:1;}
.legend-panel{
  width:170px; flex-shrink:0; align-self:center; max-height:92%;
  background:white; padding:18px 14px; overflow-y:auto;
  border-radius:var(--radius-lg); box-shadow:var(--shadow); z-index:4;
}
.legend-title{font-size:1rem; margin-bottom:10px; text-align:center;}
.legend-list{display:flex; flex-direction:column; gap:8px;}
.legend-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px;
  border:2px solid transparent; background:rgba(43,36,64,0.03);
  font-weight:800; font-size:1rem;
}
.legend-swatch{width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,0.08); flex-shrink:0;}
.legend-item.selected{border-color:var(--ink); background:rgba(43,36,64,0.08);}
.legend-item.solved{opacity:.4;}
.legend-item:not(.solved):hover{transform:scale(1.03);}

.canvas-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; height:100%;}
.game-svg{max-width:100%; max-height:100%; background:white; border-radius:var(--radius-md); box-shadow:var(--shadow);}

.zone{stroke:#c9c2d6; stroke-width:0.6; cursor:pointer; transition:fill .18s ease;}
.zone.solved{cursor:default;}
.zone:not(.solved):hover{fill:#eee7d8 !important;}
.zone-label{
  font-family:var(--font-display); font-weight:700; pointer-events:none;
  fill:#d81e3a; text-anchor:middle; dominant-baseline:middle;
  stroke:#ffffff; stroke-width:3px; stroke-linejoin:round; paint-order:stroke fill;
  transition:font-size .18s ease;
}
.zone.solved + .zone-label, .zone-label.hidden{opacity:0;}
.outline-path{fill:#3c3c3b; pointer-events:none;}

@keyframes shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
.shake{animation:shake .4s;}

/* ===================== MODALS ===================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(43,36,64,0.55);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-overlay.active{display:flex;}
.modal-card{
  background:white; border-radius:var(--radius-lg); padding:32px; max-width:480px; width:100%;
  box-shadow:var(--shadow); position:relative; text-align:center;
}
.help-card{border:5px solid var(--yellow);}
.modal-emoji{font-size:3rem; line-height:1; margin-bottom:6px;}
.help-title{color:var(--coral); font-size:1.6rem; margin-bottom:10px;}
.modal-close{position:absolute; top:16px; right:18px; font-size:1.2rem; font-weight:800; color:var(--ink); opacity:.5;}
.modal-close:hover{opacity:1;}
.help-list{text-align:left; line-height:1.6; font-weight:600; padding-left:22px;}
.victory-card{border:5px solid var(--teal);}
.victory-card h2{font-size:2rem; margin-bottom:6px; color:var(--coral);}
.victory-buttons{display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap;}

@media (max-width: 720px){
  .game-body{flex-direction:column; padding:10px; align-items:stretch;}
  .legend-panel{width:100%; height:auto; max-height:none; border-radius:var(--radius-md);}
  .legend-list{flex-direction:row; flex-wrap:wrap; justify-content:center;}
  .legend-item{font-size:.85rem; padding:6px 8px;}
  .legend-swatch{width:22px; height:22px;}
  .canvas-wrap{height:auto; flex:1; min-height:0;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}