/* =========================================================
   Duck Pond Idle — V2 dynamique
   Module non destructif : il s'ajoute au hub existant.
   ========================================================= */
:root{
  --duck-bg:#d8d6cf;
  --duck-bg-2:#efe7d5;
  --duck-paper:#fff8ea;
  --duck-paper-2:#f4ead6;
  --duck-ink:#2c2721;
  --duck-muted:#7c705f;
  --duck-water:#8fc7d9;
  --duck-water-2:#69abc2;
  --duck-grass:#74aa74;
  --duck-grass-dark:#2f5f46;
  --duck-yellow:#f2c75c;
  --duck-orange:#e88c3d;
  --duck-brown:#8b6b4f;
  --duck-line:rgba(44,39,33,.13);
  --duck-shadow:0 24px 70px rgba(42,34,18,.18);
}

.game-tile.duck{
  background:
    radial-gradient(circle at 82% 8%, rgba(242,199,92,.18), transparent 34%),
    radial-gradient(circle at 20% 100%, rgba(143,199,217,.20), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(111,168,120,.085));
}
.game-tile.duck::after{
  content:"COIN";
  position:absolute;
  right:-8px;
  bottom:-8px;
  font-size:92px;
  line-height:.8;
  font-weight:1000;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.045);
  pointer-events:none;
}

.duck-page{
  width:min(1760px, calc(100vw - 28px));
  margin:0 auto;
  min-height:calc(100vh - 40px);
  color:var(--duck-ink);
  display:grid;
  gap:12px;
}
.duck-v2{
  padding-bottom:24px;
}
.duck-v2 *::selection{background:rgba(242,199,92,.55);color:#21170a}

/* HUD sticky, pensé pour rester lisible pendant le scroll */
.duck-hud{
  position:sticky;
  top:10px;
  z-index:60;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,248,234,.82);
  box-shadow:0 18px 48px rgba(43,34,18,.18);
  backdrop-filter:blur(18px);
}
.duck-hud-brand{display:flex;align-items:center;gap:10px;min-width:210px}
.duck-dot{width:13px;height:13px;border-radius:50%;background:var(--duck-yellow);box-shadow:0 0 0 6px rgba(242,199,92,.18),0 0 22px rgba(232,140,61,.35)}
.duck-hud-brand b{display:block;font-size:13px;letter-spacing:.02em;color:var(--duck-ink)}
.duck-hud-brand small{display:block;margin-top:2px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--duck-muted);font-weight:950}
.duck-hud-stats{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:8px}
.duck-hud-stats div{
  min-width:0;
  padding:9px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(44,39,33,.08);
}
.duck-hud-stats strong{
  display:block;
  color:var(--duck-grass-dark);
  font-size:clamp(16px,1.2vw,23px);
  line-height:1;
  letter-spacing:-.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.duck-hud-stats span{
  display:block;
  margin-top:4px;
  color:var(--duck-muted);
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:1000;
}
.duck-hud-actions{display:flex;align-items:center;gap:7px}
.duck-icon-btn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(44,39,33,.10);
  background:rgba(255,255,255,.56);
  color:var(--duck-ink);
  cursor:pointer;
  transition:.16s;
}
.duck-icon-btn:hover{transform:translateY(-1px);background:#fff;box-shadow:0 12px 26px rgba(44,39,33,.10)}

.duck-offline{
  padding:10px 14px;
  border-radius:18px;
  background:rgba(242,199,92,.24);
  color:#463316;
  border:1px solid rgba(139,107,79,.12);
  line-height:1.4;
}
.duck-offline strong{color:#2c2414}

.duck-layout-v2{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(360px,.58fr);
  gap:14px;
  align-items:start;
}
.duck-world-card,
.duck-panel{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.36);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.64), transparent 32%),
    linear-gradient(135deg, rgba(255,248,234,.86), rgba(244,234,214,.76));
  box-shadow:var(--duck-shadow);
  overflow:hidden;
}
.duck-world-card{min-width:0}
.duck-world-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px 12px;
}
.duck-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--duck-grass-dark);
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-weight:1000;
}
.duck-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--duck-yellow);box-shadow:0 0 16px rgba(242,199,92,.7)}
.duck-world-head h1{
  margin-top:6px;
  max-width:820px;
  color:var(--duck-ink);
  font-size:clamp(28px,3.3vw,62px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:1000;
}
.duck-world-mini-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:420px}
.duck-world-mini-stats span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(44,39,33,.08);
  color:var(--duck-muted);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:1000;
}

/* Scène dynamique */
.duck-world{
  position:relative;
  height:calc(100vh - 178px);
  min-height:520px;
  max-height:820px;
  overflow:hidden;
  cursor:pointer;
  background:
    linear-gradient(180deg, #f4ead7 0%, #e8dfc9 43%, #a5c88f 44%, #6fa878 100%);
  image-rendering:auto;
}
.duck-world::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(44,39,33,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,39,33,.06) 1px, transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.62), transparent 62%);
}
.duck-sky{
  position:absolute;right:36px;top:26px;width:72px;height:72px;border-radius:50%;
  background:var(--duck-yellow);
  box-shadow:0 0 0 14px rgba(242,199,92,.14),0 0 64px rgba(242,199,92,.40);
}
.duck-world::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:38%;
  background:
    radial-gradient(circle at 12% 82%, rgba(47,95,70,.20), transparent 16%),
    radial-gradient(circle at 88% 78%, rgba(47,95,70,.18), transparent 18%),
    repeating-linear-gradient(90deg, rgba(47,95,70,.16) 0 2px, transparent 2px 22px);
  opacity:.7;
  pointer-events:none;
}
.duck-pond-water{
  position:absolute;
  left:10%;right:10%;top:33%;height:39%;
  border-radius:52% 48% 46% 54% / 46% 52% 48% 54%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.42), transparent 16%),
    radial-gradient(ellipse at 32% 62%, rgba(255,255,255,.24), transparent 18%),
    linear-gradient(180deg, var(--duck-water), var(--duck-water-2));
  box-shadow:inset 0 -20px 0 rgba(47,95,70,.10),0 18px 0 rgba(44,39,33,.05);
  border:2px solid rgba(255,255,255,.35);
}
.duck-pond-shine{position:absolute;border-radius:999px;background:rgba(255,255,255,.42);height:8px;z-index:1;animation:duckShine 6s ease-in-out infinite}
.duck-pond-shine.s1{left:27%;top:45%;width:15%}
.duck-pond-shine.s2{left:56%;top:58%;width:11%;animation-delay:1.8s}
@keyframes duckShine{0%,100%{opacity:.25;translate:0 0}50%{opacity:.65;translate:18px 0}}
.duck-world-shadow{
  position:absolute;left:-10%;right:-10%;bottom:0;height:15%;
  background:linear-gradient(0deg, rgba(47,95,70,.35), transparent);
  z-index:2;
  pointer-events:none;
}
.duck-critter-layer{position:absolute;inset:0;z-index:8;pointer-events:none}
.duck-critter{
  --size:42px; --x:50; --y:50; --dur:18s; --delay:0s; --walk:26px; --z:50;
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  width:var(--size);
  height:var(--size);
  z-index:calc(10 + var(--z));
  transform-origin:center bottom;
  transform:translate3d(0,0,0);
  animation:duckWalk var(--dur) ease-in-out infinite alternate;
  animation-delay:var(--delay);
  will-change:transform;
}
.duck-bob{display:block;width:100%;height:100%;animation:duckBob 1.15s ease-in-out infinite;animation-delay:calc(var(--delay) / 2);will-change:transform}
.duck-sprite-sheet{
  display:block;
  width:100%;
  height:100%;
  background-image:url("../img/duck-walk-sheet.png");
  background-size:400% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 8px 0 rgba(44,39,33,.10));
  animation:duckSprite .64s linear infinite;
}
.duck-sprite-walker.reverse .duck-sprite-sheet{transform:scaleX(-1)}
.duck-sprite-walker.golden .duck-sprite-sheet{filter:hue-rotate(34deg) saturate(1.5) brightness(1.12) drop-shadow(0 8px 0 rgba(44,39,33,.10))}
.duck-emoji{
  display:grid;
  place-items:center;
  width:100%;height:100%;
  font-size:var(--size);
  line-height:1;
  filter:drop-shadow(0 8px 0 rgba(44,39,33,.10));
}
.duck-emoji-walker.reverse .duck-emoji{transform:scaleX(-1)}
@keyframes duckWalk{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(var(--walk),0,0)}}
@keyframes duckBob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes duckSprite{
  0%,24.99%{background-position-x:0%}
  25%,49.99%{background-position-x:33.333%}
  50%,74.99%{background-position-x:66.666%}
  75%,100%{background-position-x:100%}
}

.duck-feed-button{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:40;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:11px 17px;
  border-radius:999px;
  border:1px solid rgba(44,39,33,.12);
  background:linear-gradient(90deg, var(--duck-yellow), #ffe6aa);
  color:#24190a;
  box-shadow:0 16px 34px rgba(232,140,61,.24);
  cursor:pointer;
  transition:.16s;
}
.duck-feed-button:hover{transform:translateY(-2px)}
.duck-feed-button strong{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:1000}
.duck-feed-button span{font-size:12px;color:#5a3a10;font-weight:950}

/* Panneaux latéraux */
.duck-panel-stack{display:grid;gap:12px;max-height:calc(100vh - 88px);overflow:auto;padding-right:2px;position:sticky;top:88px}
.duck-panel{padding:14px;overflow:visible}
.duck-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  color:var(--duck-ink);
}
.duck-section-title span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:1000}
.duck-section-title small{color:var(--duck-muted);font-size:9px;letter-spacing:.10em;text-transform:uppercase;font-weight:950;text-align:right}
.duck-shop-list{display:grid;gap:8px}
.duck-shop-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:11px;
  border-radius:18px;
  border:1px solid rgba(44,39,33,.10);
  background:rgba(255,255,255,.56);
  box-shadow:0 10px 22px rgba(44,39,33,.05);
}
.duck-shop-item h3{font-size:15px;line-height:1.15;letter-spacing:-.02em;color:var(--duck-ink)}
.duck-shop-item h3 span{color:var(--duck-grass-dark);font-size:11px;letter-spacing:.02em;font-weight:1000}
.duck-shop-item p{margin-top:4px;color:var(--duck-muted);font-size:12px;line-height:1.32}
.duck-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.duck-tags b,
.duck-unlocks span{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(111,168,120,.12);
  color:var(--duck-grass-dark);
  border:1px solid rgba(47,95,70,.12);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:1000;
}
.duck-mini-btn{
  min-height:38px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(44,39,33,.12);
  background:linear-gradient(90deg,var(--duck-yellow),#ffe6aa);
  color:#251a08;
  cursor:pointer;
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:1000;
  transition:.16s;
  white-space:nowrap;
}
.duck-mini-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(232,140,61,.18)}
.duck-mini-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;background:rgba(255,255,255,.55)}
.duck-mini-btn.prestige{width:100%;margin-top:10px}
.duck-empty{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.44);
  border:1px dashed rgba(44,39,33,.14);
  color:var(--duck-muted);
  font-size:12px;
  line-height:1.45;
}
.duck-owned-grid{display:grid;grid-template-columns:1fr;gap:7px}
.duck-owned{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:9px;
  align-items:center;
  padding:9px;
  border-radius:15px;
  background:rgba(255,255,255,.44);
  border:1px solid rgba(44,39,33,.08);
}
.duck-owned span{grid-row:1/3;font-size:22px;line-height:1}
.duck-owned b{font-size:12px;color:var(--duck-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duck-owned small{font-size:10px;color:var(--duck-muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duck-prestige-card{
  padding:12px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(242,199,92,.24),rgba(255,255,255,.42));
  border:1px solid rgba(139,107,79,.14);
}
.duck-prestige-card strong{display:block;font-size:32px;line-height:.9;color:#5b3d12;letter-spacing:-.05em}
.duck-prestige-card span{display:block;margin-top:3px;color:var(--duck-muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:1000}
.duck-prestige-card p{margin-top:9px;color:#6b563a;font-size:12px;line-height:1.38}
.duck-unlocks{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.duck-modal-note{color:var(--muted);line-height:1.5;margin-top:8px;font-size:13px}
.duck-confetti{
  position:fixed;
  z-index:250;
  pointer-events:none;
  font-size:22px;
  color:#53360d;
  text-shadow:0 2px 0 rgba(255,255,255,.6);
  animation:duckPop .9s ease-out forwards;
}
@keyframes duckPop{0%{opacity:0;transform:translateY(10px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.1)}}

/* Harmonisation avec les modales legacy en thème sombre */
.modal .duck-modal-note{color:var(--muted)}

@media(max-width:1180px){
  .duck-layout-v2{grid-template-columns:1fr}
  .duck-panel-stack{position:relative;top:auto;max-height:none;overflow:visible;padding-right:0}
  .duck-hud{grid-template-columns:1fr auto}
  .duck-hud-stats{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(5,minmax(0,1fr))}
  .duck-world{height:560px;max-height:none}
}
@media(max-width:760px){
  .duck-page{width:min(100vw - 16px, 1760px)}
  .duck-hud{top:6px;border-radius:18px;grid-template-columns:1fr;gap:8px}
  .duck-hud-brand{min-width:0}
  .duck-hud-actions{position:absolute;right:8px;top:8px}
  .duck-hud-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:4px}
  .duck-hud-stats div:nth-child(5){grid-column:1/-1}
  .duck-layout-v2{gap:10px}
  .duck-world-head{display:grid;padding:14px}
  .duck-world-head h1{font-size:34px}
  .duck-world-mini-stats{justify-content:flex-start}
  .duck-world{height:520px;min-height:520px}
  .duck-pond-water{left:2%;right:2%;top:35%;height:36%}
  .duck-shop-item{grid-template-columns:1fr}
  .duck-mini-btn{width:100%}
  .duck-feed-button{left:12px;right:12px;justify-content:center}
}


/* ===== Motion V2.2 ===== */
.duck-world.enhanced-motion .duck-critter{
  position:absolute;
  animation:none;
  will-change:left, top;
}
.duck-world.enhanced-motion .duck-bob{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  animation:duckBob 1.3s ease-in-out infinite;
}
.duck-world.enhanced-motion .duck-critter.is-idle .duck-bob{animation-duration:2.2s}
.duck-world.enhanced-motion .duck-critter.swimming .duck-bob{animation-duration:1.9s}
.duck-world.enhanced-motion .duck-sprite-sheet,
.duck-world.enhanced-motion .duck-emoji{
  position:relative;
  z-index:2;
}
.duck-world.enhanced-motion .duck-sprite-sheet{
  background-size:400% 100%;
}
.duck-world.enhanced-motion .duck-critter.facing-right .duck-sprite-sheet,
.duck-world.enhanced-motion .duck-critter.facing-right .duck-emoji{transform:scaleX(-1)}
.duck-world.enhanced-motion .duck-critter.facing-left .duck-sprite-sheet,
.duck-world.enhanced-motion .duck-critter.facing-left .duck-emoji{transform:none}
.duck-world.enhanced-motion .duck-waterline,
.duck-world.enhanced-motion .duck-beak-open,
.duck-world.enhanced-motion .duck-quack-bubble{
  position:absolute;
  pointer-events:none;
}
.duck-world.enhanced-motion .duck-waterline{
  display:none;
  left:8%;
  right:8%;
  bottom:18%;
  height:22%;
  z-index:4;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(105,171,194,.92));
  box-shadow:0 -1px 0 rgba(255,255,255,.45), 0 5px 12px rgba(44,39,33,.10);
}
.duck-world.enhanced-motion .duck-critter.swimming .duck-waterline{display:block}
.duck-world.enhanced-motion .duck-critter.swimming .duck-sprite-sheet{
  clip-path:inset(0 0 18% 0);
  filter:drop-shadow(0 4px 0 rgba(44,39,33,.06));
}
.duck-world.enhanced-motion .duck-critter.swimming .duck-emoji{transform:translateY(2px)}
.duck-world.enhanced-motion .duck-beak-open{
  display:none;
  top:29%;
  width:15%;
  height:11%;
  background:#f5ad32;
  border:2px solid #111;
  border-radius:2px 6px 6px 2px;
  z-index:5;
}
.duck-world.enhanced-motion .duck-critter.facing-left .duck-beak-open{left:-3%}
.duck-world.enhanced-motion .duck-critter.facing-right .duck-beak-open{right:-3%; transform:scaleX(-1)}
.duck-world.enhanced-motion .duck-critter.quacking .duck-beak-open{display:block}
.duck-world.enhanced-motion .duck-quack-bubble{
  display:none;
  top:-24%;
  left:52%;
  transform:translateX(-50%);
  padding:2px 6px;
  background:rgba(255,248,234,.94);
  border:1px solid rgba(44,39,33,.15);
  border-radius:999px;
  color:#4f463c;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
  z-index:6;
  box-shadow:0 8px 16px rgba(44,39,33,.08);
}
.duck-world.enhanced-motion .duck-critter.quacking .duck-quack-bubble{display:block; animation:duckQuackBubble .7s ease-out}
@keyframes duckQuackBubble{0%{opacity:0; transform:translateX(-50%) translateY(6px) scale(.9)}20%{opacity:1}100%{opacity:0; transform:translateX(-50%) translateY(-10px) scale(1)}}

/* ===== V2.3 écran fixe + shop scalable ===== */
body.duck-lock-scroll{
  overflow:hidden !important;
  height:100vh;
  background:
    radial-gradient(circle at 50% 0%,rgba(155,109,198,.10),transparent 34vw),
    linear-gradient(135deg,#07050a,#0c0711 45%,#050307);
}
body.duck-lock-scroll #app{
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  padding:12px;
  overflow:hidden;
}
body.duck-lock-scroll .duck-page{
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  padding:0;
}
body.duck-lock-scroll .duck-offline{
  display:none;
}
body.duck-lock-scroll .duck-hud{
  position:relative;
  top:auto;
  z-index:60;
  min-height:64px;
  padding:8px;
  flex-shrink:0;
}
body.duck-lock-scroll .duck-hud-brand{
  min-width:220px;
}
body.duck-lock-scroll .duck-hud-stats{
  grid-template-columns:repeat(5,minmax(120px,1fr));
}
body.duck-lock-scroll .duck-hud-stats div{
  padding:8px 10px;
}
body.duck-lock-scroll .duck-layout-v2{
  height:100%;
  min-height:0;
  overflow:hidden;
  grid-template-columns:minmax(0,1fr) minmax(360px,460px);
  gap:12px;
}
body.duck-lock-scroll .duck-world-card,
body.duck-lock-scroll .duck-panel-stack{
  min-height:0;
  height:100%;
}
body.duck-lock-scroll .duck-world-card{
  display:grid;
  grid-template-rows:auto 1fr;
}
body.duck-lock-scroll .duck-world-head{
  min-height:98px;
  padding:12px 16px 10px;
  align-items:center;
}
body.duck-lock-scroll .duck-world-head h1{
  margin-top:4px;
  max-width:none;
  font-size:clamp(31px,4.1vw,62px);
  line-height:.88;
  letter-spacing:-.075em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.duck-lock-scroll .duck-world-mini-stats{
  flex:0 0 auto;
  max-width:310px;
}
body.duck-lock-scroll .duck-world-mini-stats span{
  font-size:9px;
  padding:7px 10px;
}
body.duck-lock-scroll .duck-world{
  height:100%;
  min-height:0;
  max-height:none;
}
body.duck-lock-scroll .duck-panel-stack{
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-width:thin;
}
body.duck-lock-scroll .duck-panel-stack::-webkit-scrollbar{width:8px}
body.duck-lock-scroll .duck-panel-stack::-webkit-scrollbar-thumb{background:rgba(44,39,33,.22);border-radius:999px}
body.duck-lock-scroll .duck-compact-panel{
  flex:0 0 auto;
}
body.duck-lock-scroll .duck-panel{
  border-radius:22px;
}
body.duck-lock-scroll .duck-section-title{
  margin-bottom:9px;
}

.duck-shop-groups{
  display:grid;
  gap:10px;
}
.duck-shop-group{
  display:grid;
  gap:7px;
}
.duck-shop-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 2px;
  color:var(--duck-muted);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:1000;
}
.duck-shop-group-title span{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(47,95,70,.12);
  color:var(--duck-grass-dark);
  letter-spacing:0;
}
.compact-buy-card.duck-shop-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:18px;
}
.compact-buy-card .duck-buy-main{min-width:0}
.compact-buy-card h3{
  margin:0;
  font-size:16px;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.compact-buy-card h3 span{
  color:var(--duck-grass-dark);
  font-size:.86em;
}
.compact-buy-card p{
  margin-top:4px;
  color:var(--duck-muted);
  font-size:12px;
  line-height:1.22;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.duck-buy-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  white-space:nowrap;
}
.duck-buy-meta span,
.duck-buy-meta strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(47,95,70,.10);
  color:var(--duck-grass-dark);
  font-size:11px;
  line-height:1;
  font-weight:950;
}
.duck-buy-meta strong{
  background:rgba(242,199,92,.24);
  color:#6a4a13;
}
.compact-buy-card .duck-mini-btn{
  min-width:84px;
  min-height:40px;
  padding:9px 12px;
}

/* Correction nage : l'eau ne masque plus l'ombre. Elle devient un ripple derrière le corps. */
.duck-world.enhanced-motion .duck-waterline{display:none !important}
.duck-world.enhanced-motion .duck-ripple{
  position:absolute;
  display:none;
  left:12%;
  right:12%;
  bottom:16%;
  height:18%;
  z-index:1;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(105,171,194,.40) 56%, rgba(105,171,194,0) 72%);
  filter:drop-shadow(0 2px 0 rgba(44,39,33,.05));
  pointer-events:none;
}
.duck-world.enhanced-motion .duck-critter.swimming .duck-ripple{
  display:block;
  animation:duckRipplePulse 1.45s ease-in-out infinite;
}
.duck-world.enhanced-motion .duck-critter.swimming .duck-sprite-sheet{
  clip-path:inset(0 0 19% 0);
  filter:drop-shadow(0 3px 0 rgba(44,39,33,.05));
}
@keyframes duckRipplePulse{
  0%,100%{transform:scaleX(.86);opacity:.50}
  50%{transform:scaleX(1.08);opacity:.82}
}

@media (max-width:1100px){
  body.duck-lock-scroll #app{padding:8px}
  body.duck-lock-scroll .duck-hud{grid-template-columns:1fr auto;}
  body.duck-lock-scroll .duck-hud-stats{grid-column:1 / -1;grid-template-columns:repeat(5,1fr)}
  body.duck-lock-scroll .duck-layout-v2{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 280px}
  body.duck-lock-scroll .duck-panel-stack{height:280px;display:block}
  body.duck-lock-scroll .duck-world-head h1{font-size:clamp(28px,6vw,46px)}
}


/* ===== V2.4 — Grenouilles post-reset ===== */
.duck-world.enhanced-motion .frog-hop{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  animation:frogHop 1.05s cubic-bezier(.2,.8,.2,1) infinite;
}
.duck-world.enhanced-motion .duck-critter.is-idle .frog-hop{animation-duration:1.9s}
.duck-world.enhanced-motion .frog-sprite-sheet{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  background-image:url("../img/frog-hop-sheet.png");
  background-size:400% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 5px 0 rgba(44,39,33,.08));
  animation:frogSprite .54s steps(1) infinite;
}
.duck-world.enhanced-motion .duck-critter.facing-right .frog-sprite-sheet{transform:scaleX(-1)}
.duck-world.enhanced-motion .duck-critter.facing-left .frog-sprite-sheet{transform:none}
.duck-world.enhanced-motion .duck-critter.swimming .frog-sprite-sheet{
  clip-path:inset(0 0 12% 0);
  filter:drop-shadow(0 3px 0 rgba(44,39,33,.04));
}
.duck-world.enhanced-motion .frog-ripple{
  left:5%;
  right:5%;
  bottom:11%;
  height:22%;
}
.duck-world.enhanced-motion .frog-call{font-size:9px;color:#2f5f46}
@keyframes frogHop{
  0%,100%{transform:translate3d(0,0,0)}
  45%{transform:translate3d(0,-5px,0)}
}
@keyframes frogSprite{
  0%,24.99%{background-position-x:0%}
  25%,49.99%{background-position-x:33.333%}
  50%,74.99%{background-position-x:66.666%}
  75%,100%{background-position-x:100%}
}

/* ===== V2.5 — nav magasin + améliorations constantes ===== */
body.duck-lock-scroll .duck-panel-stack{
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.duck-side-nav{
  position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
  padding:8px;
  margin:0 0 2px;
  border-radius:22px;
  background:rgba(255,248,234,.88);
  border:1px solid rgba(44,39,33,.10);
  box-shadow:0 12px 28px rgba(44,39,33,.10);
  backdrop-filter:blur(16px);
}
.duck-side-nav button{
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(44,39,33,.08);
  background:rgba(255,255,255,.54);
  color:var(--duck-grass-dark);
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:1000;
  cursor:pointer;
  transition:.14s;
  white-space:nowrap;
}
.duck-side-nav button:hover{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 8px 18px rgba(44,39,33,.08);
}
.duck-side-section{
  scroll-margin-top:64px;
}
.duck-shop-list{
  gap:8px;
}
.compact-buy-card.is-disabled,
.compact-buy-card.is-locked,
.compact-buy-card.maxed{
  filter:grayscale(.22);
  opacity:.62;
  background:rgba(255,255,255,.36);
  box-shadow:none;
}
.compact-buy-card.is-locked{
  opacity:.44;
}
.compact-buy-card.can-buy{
  border-color:rgba(242,199,92,.42);
  box-shadow:0 12px 26px rgba(232,140,61,.12);
}
.compact-buy-card.can-buy .duck-buy-meta strong{
  background:rgba(242,199,92,.34);
}
.duck-buy-meta em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:120px;
  min-height:22px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(44,39,33,.06);
  color:var(--duck-muted);
  font-size:9px;
  line-height:1;
  font-style:normal;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.compact-buy-card.can-buy .duck-buy-meta em{
  color:var(--duck-grass-dark);
  background:rgba(111,168,120,.16);
}
.compact-buy-card.is-locked .duck-buy-meta em{
  background:rgba(44,39,33,.08);
  color:#7b7166;
}
.duck-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.duck-stats-grid div{
  min-width:0;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(44,39,33,.08);
}
.duck-stats-grid strong{
  display:block;
  color:var(--duck-grass-dark);
  font-size:18px;
  line-height:1;
  letter-spacing:-.035em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.duck-stats-grid span{
  display:block;
  margin-top:5px;
  color:var(--duck-muted);
  font-size:8.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:1000;
}
.duck-stats-owned{
  margin-top:10px;
}
body.duck-lock-scroll .duck-world-head h1{
  font-size:clamp(24px,3.45vw,54px);
}
@media (max-width:1100px){
  .duck-side-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px}
  .duck-side-nav button{font-size:8px;min-height:30px;padding:0 5px}
  .duck-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:720px){
  .duck-side-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duck-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ===== V2.6 — achat multiple + panneau fixe ===== */
.duck-buy-mode{
  position:sticky;
  top:52px;
  z-index:29;
  display:grid;
  grid-template-columns:auto repeat(5, minmax(0,1fr));
  gap:6px;
  align-items:center;
  margin:0 0 8px;
  padding:8px;
  border-radius:20px;
  background:rgba(255,248,234,.86);
  border:1px solid rgba(44,39,33,.10);
  box-shadow:0 10px 24px rgba(44,39,33,.08);
  backdrop-filter:blur(14px);
}
.duck-buy-mode span{
  color:var(--duck-muted);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:1000;
  padding:0 4px;
  white-space:nowrap;
}
.duck-buy-mode button{
  min-height:30px;
  border-radius:999px;
  border:1px solid rgba(44,39,33,.08);
  background:rgba(255,255,255,.52);
  color:var(--duck-muted);
  cursor:pointer;
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:1000;
  transition:.14s;
}
.duck-buy-mode button:hover{background:#fff;transform:translateY(-1px)}
.duck-buy-mode button.active{
  background:linear-gradient(90deg, var(--duck-yellow), #ffe7aa);
  color:#47320e;
  border-color:rgba(139,107,79,.18);
  box-shadow:0 8px 18px rgba(232,140,61,.14);
}
.compact-buy-card .duck-mini-btn{min-width:108px}
.compact-buy-card.is-disabled .duck-mini-btn,
.compact-buy-card.is-locked .duck-mini-btn,
.compact-buy-card.maxed .duck-mini-btn{box-shadow:none}
@media (max-width:980px){
  .duck-buy-mode{grid-template-columns:auto repeat(5,minmax(0,1fr));top:76px;gap:4px;padding:6px}
  .duck-buy-mode span{font-size:8px}
  .duck-buy-mode button{font-size:8px;min-height:28px;padding:0 4px}
}
