:root{
  --forest-deep:#173425;
  --forest-mid:#2f5d3f;
  --forest-light:#5a8f5e;
  --moss:#8fbf6f;
  --sun:#ffc94a;
  --sun-dark:#e8a92d;
  --berry:#e2572b;
  --berry-dark:#c8431a;
  --cream:#fff6e0;
  --bark:#8a5a34;
  --bark-dark:#5c3a1e;
  --sky:#cdeadf;
  --ink:#2c2013;
  --shadow: 0 6px 0 rgba(0,0,0,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;height:100%;overflow:hidden;
  font-family:'Nunito',sans-serif;color:var(--ink);
  background:var(--forest-deep);
  user-select:none;
  touch-action:none;
}
h1,h2,h3,.display{font-family:'Baloo 2',cursive;}
button{font-family:inherit;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}

#app{
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 50% -10%, #3f7a4d 0%, transparent 55%),
    linear-gradient(180deg, var(--forest-mid) 0%, var(--forest-deep) 100%);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.screen{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;
  align-items:center;justify-content:center;
  padding:16px;
}
.screen.active{display:flex;}

/* ---------- decor: feuilles flottantes ---------- */
.leaf-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.leaf-decor span{
  position:absolute; top:-40px; font-size:22px; opacity:.55;
  animation: fall linear infinite;
}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(0deg);}
  100%{transform:translateY(110vh) rotate(360deg);}
}

/* ---------- barre du haut (toujours visible) ---------- */
.topbar{
  position:absolute; top:10px; right:10px; z-index:50;
  display:flex; gap:8px;
}
.icon-btn{
  width:46px;height:46px;border-radius:16px;
  background:var(--cream);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  border:3px solid var(--bark-dark);
  transition:transform .1s;
}
.icon-btn:active{transform:translateY(4px);box-shadow:none;}

/* ---------- écran de chargement ---------- */
#screen-loading{background:var(--forest-deep);z-index:5;}
.loader-hog{font-size:64px;animation:bounce 1s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0) scaleX(1);}50%{transform:translateY(-18px) scaleX(1.05);}}
.loading-title{color:var(--cream);margin:10px 0 22px;font-size:1.4rem;text-align:center;}
.bar-outer{width:min(280px,70vw);height:18px;background:rgba(255,255,255,.18);border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.3);}
.bar-inner{height:100%;width:0%;background:linear-gradient(90deg,var(--sun),var(--berry));border-radius:10px;transition:width .15s linear;}

/* ---------- panneau bois générique ---------- */
.panel{
  background:linear-gradient(180deg, var(--cream), #fdeecb);
  border:6px solid var(--bark-dark);
  border-radius:26px;
  box-shadow:0 10px 0 var(--bark-dark), 0 14px 24px rgba(0,0,0,.35);
  padding:26px 28px;
  max-width:520px;width:100%;
  position:relative;z-index:2;
}
.panel-title{text-align:center;color:var(--forest-deep);margin-top:4px;}

/* ---------- écran accueil ---------- */
.home-title{
  text-align:center;font-size:clamp(1.8rem,7vw,2.7rem);
  color:var(--forest-deep);
  margin:0 0 4px;
  text-shadow:2px 2px 0 var(--sun);
  line-height:1.1;
}
.home-sub{text-align:center;color:var(--forest-mid);font-weight:700;margin-bottom:18px;}
.hog-hero{display:block;margin:0 auto 10px;font-size:70px;text-align:center;animation:idlebob 2.2s ease-in-out infinite;}
@keyframes idlebob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-8px) rotate(2deg);}}

.btn-big{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 20px;margin:8px 0;
  border-radius:18px;font-size:1.15rem;font-weight:800;font-family:'Baloo 2',cursive;
  color:#fff;background:var(--forest-mid);
  box-shadow:0 6px 0 #1f3f28;
  transition:transform .08s;
}
.btn-big:active{transform:translateY(6px);box-shadow:none;}
.btn-big.secondary{background:var(--sun-dark);box-shadow:0 6px 0 #a97112;color:var(--ink);}
.btn-big.berry{background:var(--berry);box-shadow:0 6px 0 var(--berry-dark);}

.intro-plank{
  margin-top:18px;padding:12px 16px;border-radius:14px;
  background:var(--bark);color:var(--cream);
  font-size:.92rem;text-align:center;font-weight:600;
  border:3px solid var(--bark-dark);
}

/* ---------- écran comment jouer ---------- */
.back-btn{
  position:absolute;top:10px;left:10px;z-index:50;
}
.howto-list{padding-left:0;list-style:none;margin:14px 0;max-height:52vh;overflow-y:auto;}
.howto-list li{
  display:flex;gap:10px;align-items:flex-start;
  background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:8px;
  border:2px solid #eadfc0;font-weight:700;font-size:.95rem;
}
.howto-list li span.emoji{font-size:1.4rem;flex:0 0 auto;}

/* ---------- écran classement ---------- */
.scores-status{
  text-align:center;font-weight:700;color:var(--forest-mid);
  margin-bottom:10px;font-size:.9rem;
}
.scores-list{
  list-style:none;padding:0;margin:0 0 16px;
  max-height:46vh;overflow-y:auto;
  counter-reset:rank;
}
.scores-list li{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:2px solid #eadfc0;border-radius:12px;
  padding:9px 12px;margin-bottom:6px;font-weight:700;
}
.scores-list li .rank{
  font-family:'Baloo 2',cursive;font-size:1.05rem;
  width:28px;text-align:center;color:var(--forest-mid);
}
.scores-list li.medal-1 .rank, .scores-list li.medal-2 .rank, .scores-list li.medal-3 .rank{font-size:1.3rem;}
.scores-list li .pseudo{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scores-list li .time{color:var(--berry);font-family:'Baloo 2',cursive;}
.scores-empty{text-align:center;color:#888;font-weight:600;padding:14px 0;}

/* ---------- écran de jeu ---------- */
#screen-game{padding:8px;justify-content:flex-start;}
.game-topbar{
  width:100%;max-width:900px;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 4px;gap:6px;
}
.game-topbar .left-group{display:flex;gap:6px;}
.right-group-spacer{width:100px;flex:0 0 auto;}
.hud-info{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.timer-badge{
  background:var(--sun);border:3px solid var(--bark-dark);border-radius:14px;
  padding:4px 14px;font-family:'Baloo 2',cursive;font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow);
}

.game-main{
  flex:1;width:100%;max-width:1000px;
  display:flex;flex-direction:row;
  align-items:center;justify-content:center;
  gap:14px;min-height:0;
  margin-top:4px;
}
.maze-wrap{
  flex:1;height:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;min-height:0;min-width:0;
}
#mazeCanvas{
  background:#e9f6df;border-radius:18px;
  border:6px solid var(--bark-dark);
  box-shadow:0 8px 0 var(--bark-dark);
  touch-action:none;
  max-width:100%;max-height:100%;
}
#confettiCanvas{position:absolute;inset:0;pointer-events:none;z-index:20;}

/* message temporaire (ex: contact avec un obstacle) */
.toast{
  position:absolute;top:14px;left:50%;
  transform:translate(-50%,-14px);
  background:var(--berry);color:#fff;
  font-family:'Baloo 2',cursive;font-weight:700;
  padding:8px 18px;border-radius:14px;
  box-shadow:0 5px 0 var(--berry-dark);
  opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:30;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- pavé directionnel : SUR LE COTE de la zone de jeu ---------- */
.controls-bar{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  padding:4px;
}
.dpad{
  display:grid;
  grid-template-columns:50px 50px 50px;
  grid-template-rows:46px 46px;
  gap:5px;
}
.dpad button{
  border-radius:14px;background:var(--cream);
  border:3px solid var(--bark-dark);
  font-size:1.25rem;box-shadow:0 4px 0 var(--bark-dark);
  display:flex;align-items:center;justify-content:center;
}
.dpad button:active{transform:translateY(3px);box-shadow:none;}
.dpad .up{grid-column:2;grid-row:1;}
.dpad .left{grid-column:1;grid-row:2;}
.dpad .down{grid-column:2;grid-row:2;}
.dpad .right{grid-column:3;grid-row:2;}

/* ---------- overlay victoire ---------- */
.overlay{
  position:absolute;inset:0;z-index:40;
  display:none;align-items:center;justify-content:center;
  background:rgba(23,52,37,.55);
  backdrop-filter:blur(2px);
}
.overlay.active{display:flex;}
.win-panel{
  text-align:center;
  animation:popin .35s cubic-bezier(.2,1.4,.4,1);
  max-height:90vh;overflow-y:auto;
}
@keyframes popin{0%{transform:scale(.5);opacity:0;}100%{transform:scale(1);opacity:1;}}
.win-emoji{font-size:3.4rem;}
.win-title{color:var(--berry);font-size:1.8rem;margin:4px 0 2px;}
.win-sub{color:var(--forest-mid);font-weight:700;margin-bottom:6px;}
.win-time{font-weight:800;margin:2px 0 14px;font-size:1.1rem;}

.score-submit-area{margin-bottom:14px;}
.pseudo-label{display:block;font-weight:700;margin-bottom:6px;text-align:left;}
#pseudoInput{
  width:100%;padding:11px 14px;border-radius:12px;
  border:3px solid var(--bark-dark);font-size:1rem;font-family:'Nunito',sans-serif;
  margin-bottom:8px;font-weight:700;
}
.score-result-area{margin-bottom:14px;}
.score-result-area p{font-weight:800;color:var(--forest-mid);font-size:1.05rem;}

.win-btns{display:flex;flex-direction:column;gap:8px;}

/* ---------- overlay rotation ---------- */
#overlay-rotate{
  position:fixed;inset:0;z-index:100;
  background:var(--forest-deep);
  color:var(--cream);
  display:none;
  align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:20px;
}
#overlay-rotate.active{display:flex;}
.rotate-icon{font-size:4rem;animation:rotatehint 1.4s ease-in-out infinite;}
@keyframes rotatehint{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(90deg);}
}
.rotate-title{margin:14px 0 6px;}
.rotate-sub{max-width:280px;font-weight:600;}

/* petits ajustements responsive */
@media (max-width:480px){
  .panel{padding:18px 16px;border-radius:20px;}
  .icon-btn{width:40px;height:40px;font-size:17px;border-radius:12px;}
  .right-group-spacer{width:88px;}
}
@media (max-width:640px){
  .dpad{
    grid-template-columns:44px 44px 44px;
    grid-template-rows:40px 40px;
  }
}
/* écran très étroit : le pavé repasse sous le labyrinthe pour ne pas trop le rétrécir */
@media (max-width:420px){
  .game-main{flex-direction:column;}
}