/*
========================================================
HIBOO TRASH RUSH — HABILLAGE HD-2D
Version 3.2.2 — Blauen & City View
Conception originale : V. REBOUL (@Geek40plus)
========================================================
*/

:root{
  --v3-ink:#06101f;
  --v3-night:#081a31;
  --v3-blue:#126785;
  --v3-cyan:#5dd7ec;
  --v3-sky:#94ecff;
  --v3-gold:#f7be4a;
  --v3-gold-dark:#9a5c16;
  --v3-paper:#f8fbff;
  --v3-glass:rgba(10,28,51,.78);
  --v3-glass-strong:rgba(8,22,42,.92);
  --v3-line:rgba(168,229,244,.23);
  --v3-shadow:0 24px 70px rgba(0,0,0,.48);
  --v3-ui:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

html{
  min-height:100%;
  background:#06101f;
}

body{
  min-height:100vh;
  padding:28px 16px 42px;
  background:
    radial-gradient(circle at 12% 8%, rgba(32,168,205,.18), transparent 27rem),
    radial-gradient(circle at 88% 18%, rgba(247,190,74,.11), transparent 24rem),
    linear-gradient(160deg,#06101f 0%,#0b223d 47%,#071526 100%);
  overflow-x:hidden;
  align-items:flex-start;
}

body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
}
body::before{
  inset:0;
  opacity:.38;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(93,215,236,.62) 0 1px,transparent 1.3px);
  background-size:73px 73px,119px 119px;
  background-position:0 0,31px 47px;
  mask-image:linear-gradient(to bottom,#000,transparent 64%);
}
body::after{
  left:-8%; right:-8%; bottom:-15vh; height:39vh;
  filter:blur(42px);
  background:radial-gradient(ellipse,rgba(18,103,133,.34),transparent 66%);
}

.cab{
  position:relative;
  z-index:1;
  width:min(100%,980px);
  max-width:980px;
  overflow:hidden;
  border:1px solid rgba(255,222,137,.58);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(17,51,84,.97),rgba(5,20,39,.98));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 5px rgba(3,12,24,.72),
    0 0 0 7px rgba(247,190,74,.15),
    var(--v3-shadow);
}

.cab::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:70;
  border-radius:25px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.65);
}

.tricolor{
  height:8px;
  position:relative;
  z-index:2;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.tricolor span{filter:saturate(1.15) brightness(1.08);}

.cab-head{
  position:relative;
  padding:16px 18px;
  border-bottom:1px solid rgba(247,190,74,.52);
  background:
    linear-gradient(90deg,rgba(255,255,255,.045),transparent 36%),
    linear-gradient(180deg,rgba(8,28,52,.96),rgba(4,18,36,.92));
  box-shadow:0 14px 30px rgba(0,0,0,.2);
}
.cab-head::after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--v3-gold),var(--v3-cyan),transparent);
  opacity:.7;
}
.cab-title{
  color:#ffe39b;
  font-size:15px;
  letter-spacing:1.4px;
  text-shadow:0 2px 0 #3d2208,0 0 20px rgba(247,190,74,.25);
}
.cab-title::after{
  content:"  v3.2.9 · MOBILE GAMEPLAY FIX";
  display:inline-block;
  margin-left:9px;
  padding:5px 7px 4px;
  border:1px solid rgba(93,215,236,.5);
  border-radius:999px;
  color:#a9effb;
  background:rgba(22,103,133,.22);
  font-family:var(--v3-ui);
  font-size:9px;
  font-weight:800;
  letter-spacing:.7px;
  vertical-align:2px;
  text-shadow:none;
}
.cab-sub{
  margin-top:7px;
  color:#9bddeb;
  font-family:var(--v3-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.25px;
}
.head-ctrl{gap:8px;}
.langbar{
  border:1px solid rgba(247,190,74,.55);
  border-radius:11px;
  background:rgba(2,12,25,.48);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
}
.langbtn{
  min-height:34px;
  padding:8px 10px;
  color:#b5d7e5;
  background:transparent;
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:850;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.langbtn+.langbtn{border-left:1px solid rgba(247,190,74,.32);}
.langbtn:hover{background:rgba(93,215,236,.11);color:#fff;}
.langbtn.on{
  color:#071a30;
  background:linear-gradient(180deg,#ffdc79,var(--v3-gold));
  box-shadow:0 0 18px rgba(247,190,74,.2) inset;
}
.btn-mute{
  min-height:34px;
  border:1px solid rgba(247,190,74,.62);
  border-radius:11px;
  padding:8px 12px;
  color:#ffe19a;
  background:linear-gradient(180deg,rgba(23,61,95,.82),rgba(7,26,49,.92));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 5px 15px rgba(0,0,0,.18);
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:900;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.btn-mute:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.18);box-shadow:0 8px 20px rgba(0,0,0,.24);}
.btn-mute:disabled{opacity:.42;filter:saturate(.55);}

.screen{
  min-height:720px;
  background:#07162b;
  isolation:isolate;
  overflow:hidden;
}
.screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:58;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 0 90px rgba(0,0,0,.45);
}
.scanlines{opacity:.38;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px);}
.vignette{box-shadow:inset 0 0 100px rgba(0,0,0,.38);}

.hud{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  padding:12px 14px;
  border-bottom:1px solid rgba(167,225,241,.18);
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 30%),
    rgba(4,18,35,.9);
  backdrop-filter:blur(12px);
}
.hudbox{
  position:relative;
  overflow:hidden;
  min-height:64px;
  padding:10px 12px 9px;
  border:1px solid rgba(161,222,239,.18);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(37,78,113,.54),rgba(10,31,56,.72));
  box-shadow:0 10px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--v3-ui);
}
.hudbox::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--v3-cyan),transparent);
  opacity:.82;
}
.hudbox:nth-child(1)::before,.hudbox:nth-child(2)::before{background:linear-gradient(var(--v3-gold),transparent);}
.hudbox:nth-child(5)::before{background:linear-gradient(#ff6681,transparent);}
.hudbox .lbl{
  color:#9cc6d8;
  font-family:var(--v3-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
}
.hud .score-v,.hud .lvl-v,.streak,.hearts{
  display:inline-block;
  margin-top:3px;
  font-family:var(--pxfont);
  font-size:15px;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
.hud .score-v{color:#ffd76b;}
.hud .lvl-v{color:#88e8f8;}
.hearts{color:#ff5f7b;}

.stage{
  height:322px;
  overflow:hidden;
  background:#102943;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bg{
  /* v3.2.4 : cadrage conservé pour afficher la ville et le sommet du Blauen. */
  transform:scale(1.035);
  transform-origin:50% 0%;
  background-position:center 6%;
  background-size:cover;
  filter:saturate(1.14) contrast(1.04) brightness(1.12);
  animation:v3ScenicDrift 18s ease-in-out infinite alternate;
}
.bgshade{
  background:
    linear-gradient(180deg,rgba(92,203,231,.06) 0%,transparent 39%),
    linear-gradient(180deg,rgba(4,16,31,.02) 43%,rgba(3,14,29,.6) 100%);
}
.v3-sky-glow{
  position:absolute;
  z-index:2;
  top:-90px; right:7%;
  width:260px; height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,223,135,.42),rgba(255,196,76,.1) 38%,transparent 70%);
  filter:blur(2px);
  pointer-events:none;
  animation:v3SunPulse 5s ease-in-out infinite alternate;
}
.v3-cloud{
  position:absolute;
  z-index:2;
  width:120px; height:23px;
  border-radius:99px;
  background:rgba(235,250,255,.16);
  filter:blur(1px);
  pointer-events:none;
  opacity:.7;
}
.v3-cloud::before,.v3-cloud::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.v3-cloud::before{width:44px;height:44px;left:23px;bottom:0;}
.v3-cloud::after{width:57px;height:57px;right:18px;bottom:-2px;}
.v3-cloud-a{top:48px;left:-150px;animation:v3Cloud 28s linear infinite;}
.v3-cloud-b{top:102px;left:-240px;transform:scale(.7);opacity:.42;animation:v3Cloud 40s 8s linear infinite;}
.v3-city-lights{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:37px;height:58px;
  pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle,rgba(255,214,96,.92) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(129,231,249,.82) 0 1px,transparent 2px);
  background-size:47px 31px,67px 37px;
  background-position:9px 12px,28px 4px;
  mask-image:linear-gradient(to top,#000,transparent);
  animation:v3Lights 2.8s ease-in-out infinite alternate;
}
.v3-foreground-glow{
  position:absolute;
  z-index:4;
  left:-10%;right:-10%;bottom:18px;height:75px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(41,171,203,.14),transparent 67%);
  filter:blur(8px);
}

.belt{
  z-index:5;
  height:45px;
  border-top:1px solid rgba(144,217,236,.28);
  background:
    linear-gradient(180deg,rgba(79,117,145,.34),rgba(11,28,48,.82)),
    repeating-linear-gradient(90deg,#223c58 0 38px,#162d49 38px 76px);
  box-shadow:0 -7px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12);
  animation:v3Belt 1.8s linear infinite;
}
.belt::before{
  content:"";
  position:absolute;
  inset:7px 0 8px;
  border-top:1px dashed rgba(167,225,241,.21);
  border-bottom:1px dashed rgba(167,225,241,.13);
}
.belt::after{
  top:-5px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(93,215,236,.72),transparent);
  background-size:34% 100%;
  background-repeat:no-repeat;
  animation:v3BeltLight 2.8s linear infinite;
}

.item{bottom:36px;width:min(440px,94%);}
.item canvas{
  width:118px;
  height:118px;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.42)) drop-shadow(0 3px 0 rgba(255,255,255,.12));
}
.plaque{
  margin-top:-2px;
  padding:10px 16px 11px;
  border:1px solid rgba(255,217,110,.62);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(7,27,50,.94),rgba(4,17,34,.9));
  box-shadow:0 13px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.item .fr{
  color:#fff;
  font-family:var(--v3-ui);
  font-size:16px;
  font-weight:900;
  line-height:1.25;
}
.item .de{
  color:#99e4f2;
  font-family:var(--v3-ui);
  font-size:12px;
  font-weight:750;
  line-height:1.3;
}
.item.enter{animation:v3ItemIn .55s cubic-bezier(.18,.88,.28,1.18);}

.timerwrap{
  height:18px;
  margin:10px 14px 8px;
  border:1px solid rgba(153,221,238,.28);
  border-radius:999px;
  padding:3px;
  background:rgba(3,15,29,.82);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.05);
}
.timerbar{
  border-radius:999px;
  background:linear-gradient(90deg,#36c874,#8ae49d,#d6f45c);
  box-shadow:0 0 14px rgba(76,192,106,.38);
}
.timerbar.warn{
  background:linear-gradient(90deg,#ee4562,#ff7a5c,#ffd15b);
  box-shadow:0 0 17px rgba(230,69,90,.48);
}

.bins{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:8px 14px 17px;
}
.bin{
  min-height:127px;
  padding:11px 6px 10px;
  overflow:hidden;
  border:1px solid rgba(161,222,239,.2);
  border-top:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:
    linear-gradient(180deg,var(--tint1,transparent),var(--tint2,transparent)),
    linear-gradient(145deg,rgba(31,67,101,.92),rgba(8,27,51,.95));
  box-shadow:0 12px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.bin::after{
  content:"";
  position:absolute;
  left:8px;right:8px;top:0;height:5px;
  border-radius:0 0 8px 8px;
  background:var(--bc,#7f92a4);
  box-shadow:0 0 16px color-mix(in srgb,var(--bc,#7f92a4),transparent 35%);
  opacity:.9;
}
.bin:hover{
  transform:translateY(-3px);
  border-color:rgba(187,238,249,.38);
  filter:brightness(1.11);
  box-shadow:0 17px 30px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.1);
}
.bin:active{transform:translateY(1px);box-shadow:0 8px 16px rgba(0,0,0,.26);}
.bin.sel{
  outline:none;
  border-color:rgba(255,220,116,.92);
  filter:brightness(1.14);
  transform:translateY(-4px);
  box-shadow:0 0 0 2px rgba(247,190,74,.25),0 0 27px rgba(247,190,74,.25),0 18px 30px rgba(0,0,0,.34);
}
.bin.sel::before{
  content:"◆";
  top:5px;
  color:#ffe189;
  font-size:10px;
  text-shadow:0 0 12px rgba(247,190,74,.8);
}
.bin canvas{
  width:64px;
  height:64px;
  margin-top:3px;
  filter:drop-shadow(0 7px 6px rgba(0,0,0,.28));
}
.bin .num{
  top:9px;left:10px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  color:#fff;
  background:rgba(2,15,29,.52);
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:900;
  opacity:.9;
}
.bin .de{
  color:#fff;
  font-family:var(--v3-ui);
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.bin .fr{
  margin-top:4px;
  color:#afd5e2;
  font-family:var(--v3-ui);
  font-size:9px;
  font-weight:700;
  line-height:1.25;
}
.bin.hitgood{animation:v3Good .52s ease;}
.bin.hitbad{animation:v3Bad .46s ease;}

.overlay{
  padding:24px;
  gap:13px;
  background:
    radial-gradient(circle at 50% 5%,rgba(70,166,194,.15),transparent 42%),
    linear-gradient(180deg,rgba(4,17,33,.66),rgba(3,13,27,.9));
  backdrop-filter:blur(3px) saturate(1.12);
}
#titleOverlay{
  justify-content:flex-start;
  gap:11px;
  padding:23px 30px 24px;
  overflow-y:auto;
  background:
    linear-gradient(180deg,rgba(3,15,29,.24),rgba(3,14,28,.76) 49%,rgba(3,13,27,.96) 100%);
}
#titleOverlay::before{
  content:"ÉDITION REMASTERISÉE · BLAUEN VIEW";
  flex:none;
  display:block;
  margin:0 auto 2px;
  padding:7px 12px 6px;
  border:1px solid rgba(109,226,244,.4);
  border-radius:999px;
  color:#adf1fb;
  background:rgba(12,68,91,.34);
  box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07);
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.1px;
}
#titleOverlay .hiboo-title-row{
  top:0;
  margin:0;
  gap:24px;
}
#titleOverlay .hiboo-hero{
  width:156px;
  height:156px;
  image-rendering:auto;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(93,215,236,.14));
}
.logo{
  color:#ffdb73;
  font-size:31px;
  line-height:1.36;
  letter-spacing:1.4px;
  text-shadow:0 3px 0 #6d390b,0 7px 0 #020a14,-2px -2px 0 #48b8d3,0 0 27px rgba(247,190,74,.22);
}
#titleOverlay .parade{
  min-height:58px;
  gap:28px;
  margin-top:-12px;
  padding:4px 26px 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(9,43,70,.32),transparent);
}
#titleOverlay .parade canvas{
  width:64px;
  height:64px;
  filter:drop-shadow(0 10px 9px rgba(0,0,0,.36));
}
#titleOverlay h2{
  width:min(690px,100%);
  margin:0;
  padding:13px 18px;
  border:1px solid rgba(122,220,238,.2);
  border-radius:14px;
  color:#b7f2fb;
  background:linear-gradient(145deg,rgba(12,47,75,.72),rgba(5,23,44,.62));
  box-shadow:0 12px 28px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.06);
  font-size:12px;
  line-height:1.75;
}
#titleIntro{font-family:var(--v3-ui);font-size:12px;line-height:1.55;color:#dbeff5;}

.difficulty-menu{
  width:min(760px,100%);
  gap:12px;
  margin:0;
}
.difficulty-btn{
  position:relative;
  overflow:hidden;
  min-height:100px;
  padding:15px 12px 12px;
  border:1px solid rgba(160,221,238,.22);
  border-bottom:1px solid rgba(160,221,238,.22);
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,rgba(28,64,98,.94),rgba(8,27,51,.94));
  box-shadow:0 13px 25px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.difficulty-btn::before{
  display:block;
  margin-bottom:8px;
  font-family:var(--v3-ui);
  font-size:23px;
  line-height:1;
}
.difficulty-btn[data-difficulty="easy"]::before{content:"🌱";}
.difficulty-btn[data-difficulty="normal"]::before{content:"♻️";}
.difficulty-btn[data-difficulty="hard"]::before{content:"⚡";}
.difficulty-btn::after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:-26px;height:36px;
  border-radius:50%;
  background:var(--v3-cyan);
  filter:blur(22px);
  opacity:.16;
}
.difficulty-btn:hover{transform:translateY(-3px);filter:brightness(1.1);border-color:rgba(188,238,248,.42);}
.difficulty-btn strong{
  color:#ffe08b;
  font-size:11px;
  margin-bottom:6px;
}
.difficulty-btn span{
  color:#b9dbe7;
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:750;
  line-height:1.35;
}
.difficulty-btn.on{
  outline:none;
  border-color:rgba(255,220,116,.86);
  background:linear-gradient(145deg,rgba(49,86,119,.98),rgba(11,34,59,.98));
  filter:none;
  transform:translateY(-4px);
  box-shadow:0 0 0 2px rgba(247,190,74,.22),0 0 30px rgba(247,190,74,.22),0 18px 30px rgba(0,0,0,.3);
}
.menu-record{
  margin:2px 0 0;
  padding:8px 14px;
  border:1px solid rgba(247,190,74,.25);
  border-radius:999px;
  color:#ffe18c;
  background:rgba(5,23,43,.7);
  font-family:var(--v3-ui);
  font-size:11px;
  font-weight:850;
  text-shadow:none;
}
#titleActions{gap:11px;}
.bigbtn{
  position:relative;
  overflow:hidden;
  min-height:46px;
  padding:13px 20px;
  border:1px solid rgba(255,232,168,.72);
  border-radius:13px;
  color:#132035;
  background:linear-gradient(180deg,#ffe088,#f4ae33);
  box-shadow:0 8px 0 #8a4d0d,0 14px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.55);
  font-family:var(--v3-ui);
  font-size:11px;
  font-weight:950;
  letter-spacing:.55px;
  transition:transform .17s ease,filter .17s ease,box-shadow .17s ease;
}
.bigbtn::after{
  content:"";
  position:absolute;
  top:-70%;left:-25%;width:24%;height:240%;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  transition:left .55s ease;
}
.bigbtn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 10px 0 #8a4d0d,0 18px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.55);}
.bigbtn:hover::after{left:115%;}
.bigbtn:active{transform:translateY(6px);box-shadow:0 2px 0 #8a4d0d,0 7px 14px rgba(0,0,0,.3);}
.secondary-btn{
  color:#c6f4fb;
  border-color:rgba(93,215,236,.48);
  background:linear-gradient(180deg,rgba(25,78,108,.98),rgba(8,36,63,.98));
  box-shadow:0 8px 0 #031629,0 14px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);
}
.secondary-btn:hover{filter:brightness(1.16);box-shadow:0 10px 0 #031629,0 18px 30px rgba(0,0,0,.3);}
.secondary-btn:active{box-shadow:0 2px 0 #031629,0 7px 14px rgba(0,0,0,.3);}
.kbd-help{
  color:#96bdcc;
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:700;
  line-height:1.55;
}

.tip-panel,.panel,.help-shell,.stats{
  border-color:rgba(247,190,74,.48);
  background:linear-gradient(145deg,rgba(21,57,89,.96),rgba(5,23,44,.98));
  box-shadow:0 24px 55px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.help-card{
  border-color:rgba(155,222,238,.22);
  background:rgba(6,28,52,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.stats span{
  border-radius:13px;
  background:linear-gradient(145deg,rgba(26,66,101,.82),rgba(7,27,51,.9));
}

.credit{
  min-height:52px;
  padding:10px 16px;
  border-top:1px solid rgba(247,190,74,.45);
  background:linear-gradient(180deg,rgba(6,24,45,.96),rgba(3,16,31,.98));
  color:#9bd6e3;
  font-family:var(--v3-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15px;
}
.credit-logo{width:36px;height:36px;image-rendering:auto;filter:drop-shadow(0 5px 5px rgba(0,0,0,.42));}

.v3-ambient-particle{
  position:absolute;
  z-index:3;
  width:3px;height:3px;
  border-radius:50%;
  background:#d8fbff;
  box-shadow:0 0 8px #75e9fb;
  pointer-events:none;
  opacity:0;
  animation:v3FloatParticle var(--duration,8s) var(--delay,0s) ease-in-out infinite;
}

@keyframes v3ScenicDrift{from{transform:scale(1.035) translate3d(-.35%,0,0)}to{transform:scale(1.055) translate3d(.35%,-.45%,0)}}
@keyframes v3SunPulse{from{opacity:.52;transform:scale(.94)}to{opacity:.8;transform:scale(1.06)}}
@keyframes v3Cloud{from{translate:0 0}to{translate:1200px 0}}
@keyframes v3Lights{from{opacity:.28}to{opacity:.65}}
@keyframes v3Belt{from{background-position:0 0,0 0}to{background-position:0 0,76px 0}}
@keyframes v3BeltLight{from{background-position:-50% 0}to{background-position:150% 0}}
@keyframes v3ItemIn{0%{transform:translateX(-330%) rotate(-8deg) scale(.72);opacity:0}72%{transform:translateX(-45%) rotate(2deg) scale(1.05);opacity:1}100%{transform:translateX(-50%) rotate(0) scale(1);opacity:1}}
@keyframes v3Good{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45);box-shadow:0 0 0 3px rgba(83,229,129,.45),0 0 36px rgba(83,229,129,.55)}}
@keyframes v3Bad{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-1deg)}45%{transform:translateX(7px) rotate(1deg)}70%{transform:translateX(-4px)}}
@keyframes v3FloatParticle{0%{opacity:0;transform:translate3d(0,18px,0) scale(.4)}18%{opacity:.8}65%{opacity:.38}100%{opacity:0;transform:translate3d(var(--drift,25px),-92px,0) scale(1.25)}}

@media(max-width:860px){
  body{padding:14px 8px 28px;}
  .cab{border-radius:20px;}
  .screen{min-height:735px;}
  .cab-head{padding:13px 12px;}
  .cab-title{font-size:12px;}
  .cab-title::after{font-size:8px;margin-left:5px;}
  .cab-sub{font-size:9px;}
  .stage{height:292px;}
  .bins{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:7px 9px 14px;}
  .bin{min-height:112px;padding:9px 3px 8px;}
  .bin canvas{width:55px;height:55px;}
  .bin .de{font-size:9px;}
  .bin .fr{font-size:8px;}
  #titleOverlay{padding:20px 18px;}
  #titleOverlay .hiboo-hero{width:138px;height:138px;}
  .logo{font-size:26px;}
}

@media(max-width:650px){
  body{padding:6px 3px 20px;}
  .cab{border-radius:15px;box-shadow:0 0 0 2px rgba(3,12,24,.82),0 20px 50px rgba(0,0,0,.46);}
  .cab-title::after{display:block;width:max-content;margin:6px 0 0;}
  .cab-head{align-items:flex-start;}
  .head-ctrl{width:100%;justify-content:space-between;}
  .langbar{max-width:100%;flex:1;}
  .langbtn{min-width:38px;padding:7px 8px;}
  .btn-mute{padding:7px 9px;}
  .btn-pause{min-width:82px;}
  .screen{min-height:840px;}
  .hud{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;}
  .hudbox{min-height:55px;padding:8px;}
  .hudbox:nth-child(4),.hudbox:nth-child(5){grid-column:span 1;}
  .hudbox .lbl{font-size:8px;}
  .hud .score-v,.hud .lvl-v,.streak,.hearts{font-size:12px;}
  .stage{height:260px;}
  .item canvas{width:98px;height:98px;}
  .item .fr{font-size:14px;}
  .item .de{font-size:11px;}
  .bins{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;}
  .bin{min-height:105px;display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:8px 8px 8px 5px;}
  .bin canvas{grid-row:1/3;width:58px;height:58px;margin:0;}
  .bin .num{top:6px;left:6px;}
  .bin .de{font-size:10px;text-align:left;}
  .bin .fr{display:block;font-size:8px;text-align:left;}
  .bin.sel::before{left:auto;right:10px;transform:none;top:7px;}
  #titleOverlay{padding:15px 10px 18px;gap:9px;}
  #titleOverlay::before{font-size:8px;letter-spacing:.7px;padding:6px 9px;}
  #titleOverlay .hiboo-title-row{gap:9px;}
  #titleOverlay .hiboo-hero{width:108px;height:108px;}
  .logo{font-size:20px;}
  #titleOverlay .parade{gap:17px;margin-top:-8px;}
  #titleOverlay .parade canvas{width:49px;height:49px;}
  #titleOverlay h2{font-size:9px;padding:10px 9px;line-height:1.6;}
  .difficulty-menu{grid-template-columns:1fr;gap:7px;}
  .difficulty-btn{min-height:69px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;text-align:left;padding:10px;}
  .difficulty-btn::before{grid-row:1/3;margin:4px 7px 0 0;font-size:23px;}
  .difficulty-btn strong{font-size:10px;margin:0 0 3px;}
  .difficulty-btn span{font-size:9px;}
  .difficulty-btn.on{transform:translateY(-1px);}
  #titleActions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;}
  #startBtn{grid-column:1/-1;}
  .bigbtn{width:100%;min-height:43px;padding:11px 9px;font-size:10px;}
  .menu-record{font-size:10px;}
  .credit{font-size:8px;padding:8px;}
}

@media(max-width:390px){
  .head-ctrl{gap:5px;}
  .btn-pause{min-width:auto;}
  .langbtn{min-width:35px;padding:7px 6px;}
  .screen{min-height:870px;}
  .stage{height:245px;}
  .bins{grid-template-columns:1fr;}
  .bin{min-height:83px;}
  .logo{font-size:17px;}
  #titleOverlay .hiboo-hero{width:94px;height:94px;}
  #titleOverlay .parade{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .bg,.v3-cloud,.v3-sky-glow,.v3-city-lights,.v3-ambient-particle,.belt,.belt::after,.bigbtn::after{animation:none!important;}
  .bigbtn,.bin,.difficulty-btn,.btn-mute{transition:none!important;}
}

/* Affinage du mode de jeu mobile plein écran conservé depuis la v2.5.1. */
@media(max-width:720px){
  body.game-active .screen{
    min-height:0 !important;
    grid-template-rows:
      calc(56px + env(safe-area-inset-top,0px))
      minmax(128px,1fr)
      10px
      calc(218px + env(safe-area-inset-bottom,0px));
  }
  body.game-active .hudbox{
    border-radius:8px;
    background:linear-gradient(145deg,rgba(31,70,104,.88),rgba(7,27,51,.94));
  }
  body.game-active .timerwrap{
    height:10px;
    padding:2px;
    border-radius:999px;
  }
  body.game-active .bins{
    gap:5px !important;
    padding:5px 4px calc(6px + env(safe-area-inset-bottom,0px)) !important;
    border-top:1px solid rgba(151,220,237,.2);
    background:linear-gradient(180deg,rgba(10,32,57,.98),rgba(4,18,36,.99));
  }
  body.game-active .bin{
    grid-template-rows:14px minmax(38px,1fr) minmax(28px,auto);
    padding:3px 2px 5px !important;
    border-radius:9px;
    border-color:rgba(161,222,239,.2);
    box-shadow:0 5px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);
  }
  body.game-active .bin::after{
    left:4px;
    right:4px;
    height:3px;
  }
  body.game-active .bin .num{
    width:17px;
    height:17px;
    border-radius:5px;
    font-size:7px !important;
  }
  body.game-active .bin canvas{
    width:clamp(32px,10.5vw,42px) !important;
    height:clamp(32px,10.5vw,42px) !important;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.28));
  }
  body.game-active .bin .fr{
    display:-webkit-box !important;
    max-height:3.85em;
    color:#f5fbff;
    font-size:7px !important;
    font-weight:800;
    line-height:1.28 !important;
    -webkit-line-clamp:3;
  }
  body.game-active #pauseBtn,
  body.game-active #muteBtn{
    border-radius:11px;
    border-color:rgba(247,190,74,.72);
    background:linear-gradient(180deg,rgba(25,67,100,.96),rgba(5,25,47,.96));
    box-shadow:0 5px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  }
}

@media(max-width:720px) and (max-height:670px) and (orientation:portrait){
  body.game-active .screen{
    grid-template-rows:
      calc(49px + env(safe-area-inset-top,0px))
      minmax(105px,1fr)
      7px
      calc(174px + env(safe-area-inset-bottom,0px));
  }
  body.game-active .bin{
    grid-template-rows:11px minmax(27px,1fr) minmax(19px,auto);
  }
  body.game-active .bin .fr{
    max-height:2.6em;
    font-size:5.8px !important;
    -webkit-line-clamp:2;
  }
}

@media(max-width:720px){
  body.game-active .bin{
    grid-template-columns:minmax(0,1fr) !important;
    text-align:center !important;
    justify-items:center !important;
  }
  body.game-active .bin canvas{
    grid-row:auto !important;
    margin:0 !important;
  }
  body.game-active .bin .fr,
  body.game-active .bin .de{
    text-align:center !important;
  }
}


/* ===== HIBOO TRASH RUSH v3.2 — 220 HD SPRITES EDITION ===== */
:root{
  --v31-parallax-x:0px;
  --v31-parallax-y:0px;
  --v31-readable:#d9f4fb;
}

/* Lisibilité prioritaire des dix destinations */
.bin{
  min-height:146px !important;
  padding:13px 9px 12px !important;
}
.bin canvas{
  width:70px !important;
  height:70px !important;
}
.bin .de{
  margin-top:5px;
  font-size:14px !important;
  line-height:1.22 !important;
  letter-spacing:.05px;
}
.bin .fr{
  margin-top:6px;
  color:var(--v31-readable);
  font-size:11.5px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.72);
}

/* Couvercle animé, ajouté sans modifier les dessins existants */
.bin .v31-lid{
  position:absolute;
  z-index:4;
  left:50%;
  top:28px;
  width:58px;
  height:7px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bc,#8799aa),white 18%),var(--bc,#8799aa));
  box-shadow:0 3px 5px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateX(-50%);
  transform-origin:12% 100%;
  transition:transform .22s cubic-bezier(.2,.85,.25,1.2),filter .2s ease;
  pointer-events:none;
}
.bin.sel .v31-lid,
.bin.hitgood .v31-lid{
  transform:translateX(-50%) translateY(-3px) rotate(-24deg);
  filter:brightness(1.25);
}
.bin.hitbad .v31-lid{animation:v31LidRattle .35s ease;}

/* Objet : ombre, relief et animation douce */
.item canvas{
  animation:v31ObjectIdle 2.1s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 17px 14px rgba(0,0,0,.46))
    drop-shadow(0 4px 0 rgba(255,255,255,.13))
    saturate(1.08) contrast(1.06);
}
.item::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:91px;
  width:104px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.46),transparent 68%);
  transform:translateX(-50%);
  filter:blur(3px);
  opacity:.72;
  pointer-events:none;
}

/* Décor vivant et pseudo-parallaxe */
.bg{
  transform:scale(1.075) translate3d(calc(var(--v31-parallax-x) * .18),calc(var(--v31-parallax-y) * .12),0);
  transition:transform .45s ease-out,filter .8s ease;
}
.v31-mountain-haze,
.v31-tree-line,
.v31-weather-layer,
.v31-bird-layer,
.v31-leaf-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.v31-mountain-haze{
  z-index:2;
  background:
    linear-gradient(180deg,transparent 48%,rgba(16,62,80,.18) 68%,transparent 100%),
    radial-gradient(ellipse at 68% 45%,rgba(218,246,255,.16),transparent 44%);
  transform:translate3d(calc(var(--v31-parallax-x) * .34),calc(var(--v31-parallax-y) * .22),0);
  filter:blur(1px);
}
.v31-tree-line{
  z-index:4;
  top:auto;
  height:72px;
  bottom:41px;
  opacity:.72;
  background:
    radial-gradient(ellipse at 5% 100%,#123a33 0 17px,transparent 18px),
    radial-gradient(ellipse at 12% 100%,#0d332d 0 25px,transparent 26px),
    radial-gradient(ellipse at 20% 100%,#17483a 0 19px,transparent 20px),
    radial-gradient(ellipse at 78% 100%,#0d332d 0 23px,transparent 24px),
    radial-gradient(ellipse at 88% 100%,#164739 0 27px,transparent 28px),
    radial-gradient(ellipse at 97% 100%,#0e382f 0 20px,transparent 21px);
  transform:translate3d(calc(var(--v31-parallax-x) * .62),calc(var(--v31-parallax-y) * .3),0);
  animation:v31TreesWind 3.4s ease-in-out infinite alternate;
  transform-origin:50% 100%;
}
.v31-bird-layer{z-index:5;overflow:hidden;}
.v31-bird{position:absolute;width:22px;height:10px;opacity:.75;animation:v31BirdFlight var(--bird-duration,18s) linear infinite;}
.v31-bird::before,.v31-bird::after{content:"";position:absolute;top:4px;width:12px;height:5px;border-top:2px solid #11263b;border-radius:50%;}
.v31-bird::before{left:0;transform:rotate(12deg)}.v31-bird::after{right:0;transform:rotate(-12deg)}
.v31-leaf-layer{z-index:8;overflow:hidden;}
.v31-leaf{position:absolute;top:-18px;width:10px;height:6px;border-radius:80% 10% 80% 10%;background:#d7a53f;opacity:.8;animation:v31LeafFall var(--leaf-duration,9s) linear infinite;}

/* HIBOO guide animé */
.v31-hiboo-guide{
  position:absolute;
  z-index:13;
  left:18px;
  bottom:51px;
  width:104px;
  height:104px;
  pointer-events:none;
  transform:translate3d(calc(var(--v31-parallax-x) * .72),0,0);
}
.v31-hiboo-img{
  width:76px;height:76px;object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.42));
  animation:v31HibooFloat 1.8s ease-in-out infinite alternate;
}
.v31-hiboo-bubble{
  position:absolute;
  left:60px;bottom:62px;
  min-width:122px;max-width:218px;
  padding:8px 10px;
  border:1px solid rgba(255,222,137,.78);
  border-radius:11px 11px 11px 2px;
  color:#fff;
  background:rgba(5,22,42,.92);
  box-shadow:0 9px 22px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--v3-ui);
  font-size:11px;
  font-weight:850;
  line-height:1.35;
  opacity:0;
  transform:translateY(5px) scale(.96);
  transition:opacity .18s ease,transform .18s ease;
}
.v31-hiboo-bubble.show{opacity:1;transform:translateY(0) scale(1);}
.v31-hiboo-guide.happy .v31-hiboo-img{animation:v31HibooHappy .46s ease 2;}
.v31-hiboo-guide.proud .v31-hiboo-img{animation:v31HibooProud .8s ease 2;}
.v31-hiboo-guide.worried .v31-hiboo-img{animation:v31HibooWorried .32s ease 3;filter:drop-shadow(0 8px 8px rgba(0,0,0,.42)) saturate(.72);}
.v31-hiboo-guide.celebrate .v31-hiboo-img{animation:v31HibooCelebrate .72s ease 4;filter:drop-shadow(0 0 17px #ffe18a) drop-shadow(0 9px 8px rgba(0,0,0,.45));}

/* Combo, collection, succès */
.v31-combo-meter{height:5px;margin-top:7px;border-radius:999px;background:rgba(0,0,0,.34);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.v31-combo-fill{height:100%;width:0;background:linear-gradient(90deg,#5dd7ec,#f7be4a,#ff6d76);transition:width .25s ease;}
.v31-combo-label{position:absolute;right:8px;bottom:5px;color:#ffe39b;font-family:var(--v3-ui);font-size:8px;font-weight:900;}
.v31-collection{
  position:absolute;z-index:12;right:14px;top:12px;
  padding:7px 10px;border:1px solid rgba(168,229,244,.38);border-radius:999px;
  color:#d9f8ff;background:rgba(5,24,45,.78);backdrop-filter:blur(8px);
  font-family:var(--v3-ui);font-size:9px;font-weight:900;letter-spacing:.2px;
}
.v31-achievement-stack{position:fixed;z-index:120;right:18px;top:18px;display:grid;gap:9px;pointer-events:none;}
.v31-achievement{
  width:min(330px,calc(100vw - 36px));padding:11px 13px;border:1px solid rgba(255,220,116,.75);border-radius:12px;
  color:#fff;background:linear-gradient(145deg,rgba(20,58,89,.97),rgba(5,22,42,.97));box-shadow:0 14px 35px rgba(0,0,0,.42);
  font-family:var(--v3-ui);font-size:11px;font-weight:800;line-height:1.35;
  animation:v31Toast 3.2s ease forwards;
}
.v31-achievement b{display:block;color:#ffe18a;font-size:12px;margin-bottom:2px;}

/* Ambiance */
.v31-ambiance-btn{white-space:nowrap;}
.v31-weather-layer{z-index:9;overflow:hidden;opacity:0;transition:opacity .6s ease;}
body[data-v31-theme="rain"] .v31-weather-layer,
body[data-v31-theme="snow"] .v31-weather-layer{opacity:1;}
.v31-weather-particle{position:absolute;top:-20px;animation:v31WeatherFall var(--weather-duration,1.2s) linear infinite;}
body[data-v31-theme="rain"] .v31-weather-particle{width:1px;height:18px;background:linear-gradient(transparent,#b6edff);transform:rotate(11deg);opacity:.72;}
body[data-v31-theme="snow"] .v31-weather-particle{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 5px #dff8ff;opacity:.84;}
body[data-v31-theme="night"] .bg{filter:brightness(.48) saturate(.74) hue-rotate(8deg);}
body[data-v31-theme="night"] .stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(5,18,50,.38),rgba(3,12,32,.16));}
body[data-v31-theme="rain"] .bg{filter:brightness(.72) saturate(.77) contrast(1.06);}
body[data-v31-theme="snow"] .bg{filter:brightness(1.06) saturate(.62) contrast(.93);}
body[data-v31-theme="autumn"] .bg{filter:saturate(1.13) hue-rotate(-17deg) sepia(.12);}
body[data-v31-theme="halloween"] .bg{filter:brightness(.57) saturate(1.1) hue-rotate(-22deg);}
body[data-v31-theme="spring"] .bg{filter:brightness(1.06) saturate(1.12) hue-rotate(-5deg);}
body[data-v31-theme="sun"] .bg{filter:brightness(1.08) saturate(1.12);}
body[data-v31-theme="autumn"] .v31-leaf-layer,
body[data-v31-theme="halloween"] .v31-leaf-layer{opacity:1;}
body:not([data-v31-theme="autumn"]):not([data-v31-theme="halloween"]) .v31-leaf-layer{opacity:.18;}

/* Secousse globale lors d'une erreur */
.cab.v31-shake{animation:v31ScreenShake .42s ease;}

@keyframes v31LidRattle{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-53%) rotate(-8deg)}65%{transform:translateX(-47%) rotate(8deg)}}
@keyframes v31ObjectIdle{from{transform:translateY(0) rotate(-.5deg)}to{transform:translateY(-5px) rotate(.5deg)}}
@keyframes v31TreesWind{from{rotate:-.35deg}to{rotate:.55deg}}
@keyframes v31BirdFlight{0%{transform:translate3d(-80px,0,0)}45%{transform:translate3d(52vw,-20px,0)}100%{transform:translate3d(calc(100vw + 80px),8px,0)}}
@keyframes v31LeafFall{0%{transform:translate3d(0,-20px,0) rotate(0)}100%{transform:translate3d(var(--leaf-drift,80px),360px,0) rotate(540deg)}}
@keyframes v31HibooFloat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-5px) rotate(1deg)}}
@keyframes v31HibooHappy{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(5deg) scale(1.05)}}
@keyframes v31HibooProud{0%,100%{transform:scale(1)}50%{transform:scale(1.12) rotate(-3deg)}}
@keyframes v31HibooWorried{0%,100%{transform:translateX(0)}35%{transform:translateX(-5px) rotate(-4deg)}70%{transform:translateX(5px) rotate(4deg)}}
@keyframes v31HibooCelebrate{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-15px) rotate(12deg) scale(1.12)}}
@keyframes v31Toast{0%{opacity:0;transform:translateX(30px) scale(.96)}12%,82%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(25px) scale(.98)}}
@keyframes v31WeatherFall{from{transform:translate3d(0,-25px,0)}to{transform:translate3d(var(--weather-drift,20px),380px,0)}}
@keyframes v31ScreenShake{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}38%{transform:translateX(6px)}58%{transform:translateX(-4px)}78%{transform:translateX(3px)}}

@media(max-width:860px){
  .bin{min-height:132px !important;padding:11px 6px 10px !important;}
  .bin canvas{width:61px !important;height:61px !important;}
  .bin .de{font-size:12px !important;}
  .bin .fr{font-size:10px !important;}
}

@media(max-width:720px){
  body.game-active .screen{
    grid-template-rows:
      calc(56px + env(safe-area-inset-top,0px))
      minmax(116px,1fr)
      10px
      calc(268px + env(safe-area-inset-bottom,0px));
  }
  body.game-active .bins{gap:6px !important;}
  body.game-active .bin{
    min-height:0;
    grid-template-rows:13px minmax(35px,1fr) minmax(34px,auto);
    padding:3px 3px 6px !important;
  }
  body.game-active .bin canvas{width:clamp(33px,10vw,42px)!important;height:clamp(33px,10vw,42px)!important;}
  body.game-active .bin .de{font-size:8.8px!important;line-height:1.12!important;}
  body.game-active .bin .fr{
    display:-webkit-box!important;
    max-height:2.55em;
    font-size:8.2px!important;
    line-height:1.22!important;
    -webkit-line-clamp:2;
  }
  body.game-active .bin .v31-lid{top:25px;width:36px;height:5px;}
  .v31-hiboo-guide{left:5px;bottom:42px;width:73px;height:73px;}
  .v31-hiboo-img{width:53px;height:53px;}
  .v31-hiboo-bubble{left:42px;bottom:44px;min-width:105px;max-width:180px;font-size:9px;padding:6px 8px;}
  .v31-collection{right:7px;top:7px;font-size:8px;padding:5px 8px;}
  .v31-ambiance-btn{display:none;}
}

@media(max-width:720px) and (max-height:670px) and (orientation:portrait){
  body.game-active .screen{
    grid-template-rows:
      calc(49px + env(safe-area-inset-top,0px))
      minmax(95px,1fr)
      7px
      calc(220px + env(safe-area-inset-bottom,0px));
  }
  body.game-active .bin .de{font-size:7.7px!important;}
  body.game-active .bin .fr{font-size:7.2px!important;-webkit-line-clamp:2;}
}

@media(prefers-reduced-motion:reduce){
  .item canvas,.v31-tree-line,.v31-bird,.v31-leaf,.v31-hiboo-img,.v31-weather-particle{animation:none!important;}
}


/* ===== v3.2 : 220 sprites pixel-art HD individuels ===== */
#itemCanvas{
  image-rendering:pixelated!important;
  image-rendering:crisp-edges!important;
  filter:drop-shadow(0 9px 7px rgba(1,9,20,.48)) drop-shadow(0 0 12px rgba(116,214,255,.22));
  transform-origin:50% 72%;
}
.item.enter #itemCanvas{animation:v32SpriteArrival .52s cubic-bezier(.17,.88,.25,1.22);}
@keyframes v32SpriteArrival{
  0%{transform:translateY(-18px) scale(.62) rotate(-4deg);opacity:0;}
  68%{transform:translateY(2px) scale(1.08) rotate(2deg);opacity:1;}
  100%{transform:translateY(0) scale(1) rotate(0);opacity:1;}
}
#itemCanvas[data-hd-sprite]{border-color:rgba(111,214,246,.82)!important;background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.15),rgba(4,18,35,.73) 68%)!important;}
@media (prefers-reduced-motion:reduce){.item.enter #itemCanvas{animation:none!important;}}


/* ===== HIBOO TRASH RUSH v3.2.4 — DÉCOR ÉPURÉ & VIES LISIBLES =====
   Décor dézoomé : sommet du Blauen, antenne et ville visibles ensemble.
   Le fond étendu et flouté évite les bandes vides sur les écrans très larges.
   Le convoyeur animé inférieur a été supprimé. */
.stage{
  isolation:isolate;
  background:#0b2b43;
}
.stage::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-16px;
  pointer-events:none;
  background:url("trash-rush-bg.webp") center 44% / cover no-repeat;
  image-rendering:auto;
  filter:blur(13px) brightness(.58) saturate(.78);
  transform:scale(1.04);
}
.bg{
  z-index:1;
  background-image:url("trash-rush-bg.webp") !important;
  background-repeat:no-repeat !important;
  background-size:auto 145% !important;
  background-position:center top !important;
  transform:translate3d(calc(var(--v31-parallax-x) * .06),0,0) !important;
  transform-origin:50% 0 !important;
  animation:none !important;
  filter:saturate(1.12) contrast(1.035) brightness(1.08) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.bgshade{z-index:2;}
.belt{display:none !important;}

@media(max-width:860px){
  .bg{background-size:auto 150% !important;}
}
@media(max-width:650px){
  .bg{
    background-size:auto 138% !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  }
}
@media(max-width:390px){
  .bg{background-size:auto 132% !important;}
}

/* ===== v3.2.4 : décor épuré et nombre de vies plus lisible ===== */
/* Sécurité anti-cache : aucun ancien élément routier ne doit réapparaître. */
.v31-ambient-road,
.v31-train,
.v31-cyclist{
  display:none !important;
}

/* Les règles historiques du fichier principal utilisaient 7,5 px.
   Cette surcharge finale rend les informations de difficulté immédiatement lisibles. */
#titleOverlay .difficulty-btn{
  min-height:108px;
  padding-bottom:14px;
}
#titleOverlay .difficulty-btn span{
  font-size:12px !important;
  font-weight:850 !important;
  line-height:1.45 !important;
  letter-spacing:.05px;
  color:#d8edf4;
}

@media(max-width:620px){
  #titleOverlay .difficulty-btn{
    min-height:78px;
  }
  #titleOverlay .difficulty-btn span{
    font-size:11.5px !important;
    line-height:1.45 !important;
  }
}

@media(max-width:390px){
  #titleOverlay .difficulty-btn span{
    font-size:11px !important;
  }
}


/* ===== HIBOO TRASH RUSH v3.2.5 — SUCCÈS MULTILINGUES ===== */
.v325-achievements-btn{
  min-width:190px;
}
.v325-achievements-overlay{
  z-index:92;
  overflow-y:auto;
  justify-content:flex-start;
  padding-top:24px !important;
  padding-bottom:24px !important;
}
.v325-achievements-panel{
  width:min(720px,96%);
  margin:auto 0;
  padding:18px;
  border:3px solid var(--gold);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(15,39,72,.98),rgba(5,14,31,.99));
  box-shadow:0 7px 0 #000;
  text-align:start;
}
.v325-achievements-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin-bottom:10px;
  text-align:center;
}
.v325-achievements-trophy{
  font-size:34px;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.55));
}
.v325-achievements-heading h2{
  margin:0;
  color:var(--gold) !important;
  font-size:14px !important;
  line-height:1.5 !important;
}
.v325-achievements-heading p{
  margin:3px 0 0;
  color:#b9d8e5 !important;
  font-size:9px !important;
  line-height:1.5 !important;
}
.v325-achievements-progress{
  height:10px;
  margin:0 auto 14px;
  overflow:hidden;
  border:2px solid #000;
  border-radius:999px;
  background:#071326;
}
.v325-achievements-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#d7a542,var(--gold),#fff0a2);
  transition:width .25s ease;
}
.v325-achievements-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-bottom:15px;
}
.v325-achievement-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:76px;
  padding:10px;
  border:2px solid #234b70;
  border-radius:9px;
  background:rgba(8,25,48,.9);
  box-shadow:0 3px 0 rgba(0,0,0,.7);
}
.v325-achievement-row.is-unlocked{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(79,61,20,.56),rgba(8,28,52,.94));
}
.v325-achievement-row.is-locked{
  opacity:.7;
  filter:saturate(.55);
}
.v325-achievement-icon{
  font-size:26px;
  text-align:center;
}
.v325-achievement-copy{
  display:grid;
  gap:5px;
  min-width:0;
}
.v325-achievement-copy strong{
  color:#ffe18a;
  font-size:10.5px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.v325-achievement-copy span{
  color:#c0d7e3;
  font-size:8.5px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.v325-achievement-status{
  max-width:94px;
  padding:5px 7px;
  border:1px solid #4d7694;
  border-radius:999px;
  color:#9fc9db;
  font-size:7.5px;
  line-height:1.35;
  text-align:center;
}
.is-unlocked .v325-achievement-status{
  border-color:var(--gold);
  color:#ffe18a;
  background:rgba(214,166,63,.14);
}
#achievementsCloseBtn{
  display:block;
  margin:0 auto;
}
html[dir="rtl"] .v325-achievements-panel,
html[dir="rtl"] .v325-achievement-row{
  direction:rtl;
}

@media(max-width:680px){
  .v325-achievements-overlay{
    padding:12px !important;
  }
  .v325-achievements-panel{
    width:100%;
    padding:13px;
  }
  .v325-achievements-list{
    grid-template-columns:1fr;
  }
  .v325-achievement-row{
    min-height:67px;
    grid-template-columns:34px minmax(0,1fr) auto;
  }
  .v325-achievement-copy strong{font-size:10px;}
  .v325-achievement-copy span{font-size:8px;}
}

@media(max-width:390px){
  .v325-achievement-row{
    grid-template-columns:30px minmax(0,1fr);
  }
  .v325-achievement-status{
    grid-column:2;
    justify-self:start;
  }
}

@media(prefers-reduced-motion:reduce){
  .v325-achievements-progress span{transition:none;}
}

/* ===== HIBOO TRASH RUSH v3.2.7 — MOBILE MENU FIX =====
   L'objet à trier, le HUD, le chronomètre et les dix destinations
   restent visibles simultanément dans la hauteur réellement disponible. */
:root{
  --trashrush-viewport-height:100vh;
}

@media (max-width:720px){
  html{
    width:100%;
    height:100%;
    overflow:hidden;
  }

  body.game-active{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    touch-action:none;
  }

  body.game-active .cab{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  body.game-active .screen{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:
      calc(48px + env(safe-area-inset-top,0px))
      clamp(145px,28vh,210px)
      7px
      minmax(0,1fr) !important;
    grid-template-areas:
      "hud"
      "stage"
      "timer"
      "bins" !important;
  }

  body.game-active .hud{
    gap:2px !important;
    padding:
      calc(3px + env(safe-area-inset-top,0px))
      3px
      3px !important;
  }

  body.game-active .hudbox{
    min-height:0 !important;
    padding:3px 1px !important;
    border-radius:5px !important;
  }

  body.game-active .hudbox .lbl{
    font-size:clamp(4.8px,1.45vw,6px) !important;
  }

  body.game-active .hud .score-v,
  body.game-active .hud .lvl-v,
  body.game-active .streak,
  body.game-active .hearts{
    margin-top:2px !important;
    font-size:clamp(9px,2.8vw,12px) !important;
  }

  body.game-active .cab-head{
    top:calc(50px + env(safe-area-inset-top,0px)) !important;
    right:calc(4px + env(safe-area-inset-right,0px)) !important;
  }

  body.game-active #pauseBtn,
  body.game-active #muteBtn{
    width:34px !important;
    min-width:34px !important;
    height:32px !important;
    min-height:32px !important;
    border-radius:8px !important;
  }

  body.game-active .stage{
    position:relative;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* Présentation horizontale beaucoup moins haute : objet à gauche, nom à droite. */
  body.game-active .item{
    top:50% !important;
    bottom:auto !important;
    left:50% !important;
    width:min(94%,430px) !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    transform:translate(-50%,-50%) !important;
    animation:none !important;
  }

  body.game-active .item > br,
  body.game-active .plaque > br{
    display:none !important;
  }

  body.game-active .item canvas{
    width:clamp(58px,18vw,76px) !important;
    height:clamp(58px,18vw,76px) !important;
    margin:0 !important;
  }

  body.game-active .item::before{
    display:none !important;
  }

  body.game-active .plaque{
    width:100%;
    min-width:0;
    margin:0 !important;
    padding:8px 9px !important;
    border-radius:10px !important;
    text-align:center;
  }

  body.game-active .item .fr{
    display:block !important;
    font-size:clamp(10px,3.1vw,13px) !important;
    line-height:1.35 !important;
    overflow-wrap:anywhere;
  }

  /* Une seule langue pendant l'action : davantage d'espace pour les commandes. */
  body.game-active .item .de{
    display:none !important;
  }

  body.game-active .timerwrap{
    width:auto !important;
    height:7px !important;
    margin:0 3px !important;
    padding:1px !important;
  }

  body.game-active .bins{
    min-height:0 !important;
    height:100% !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:
      3px
      3px
      calc(3px + env(safe-area-inset-bottom,0px)) !important;
    overflow:hidden !important;
  }

  body.game-active .bin{
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:12px minmax(30px,1fr) minmax(23px,auto) !important;
    align-content:center !important;
    align-items:center !important;
    justify-items:center !important;
    padding:2px 1px 3px !important;
    border-radius:6px !important;
    touch-action:manipulation;
  }

  body.game-active .bin .num{
    width:15px !important;
    height:15px !important;
    font-size:6px !important;
  }

  body.game-active .bin canvas{
    width:clamp(28px,9.5vw,40px) !important;
    height:clamp(28px,9.5vw,40px) !important;
  }

  body.game-active .bin .v31-lid{
    top:22px !important;
    width:32px !important;
    height:4px !important;
  }

  body.game-active .bin .de{
    display:none !important;
  }

  body.game-active .bin .fr{
    display:-webkit-box !important;
    width:100% !important;
    max-height:2.7em !important;
    margin:0 !important;
    padding:0 1px;
    overflow:hidden;
    font-size:clamp(5.8px,1.8vw,7.7px) !important;
    line-height:1.28 !important;
    text-align:center !important;
    overflow-wrap:anywhere;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2 !important;
  }

  /* Les éléments décoratifs ne doivent plus masquer la zone utile sur téléphone. */
  body.game-active .v31-hiboo-guide,
  body.game-active .v3-cloud,
  body.game-active .v3-sky-glow,
  body.game-active .v31-tree-line,
  body.game-active .v31-bird-layer,
  body.game-active .v31-leaf-layer{
    display:none !important;
  }

  body.game-active .v31-collection{
    top:5px !important;
    left:5px !important;
    right:auto !important;
    max-width:46%;
    padding:4px 6px !important;
    overflow:hidden;
    font-size:7px !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Téléphones très bas : l'objet demeure visible sans sacrifier les dix bacs. */
@media (max-width:720px) and (max-height:590px) and (orientation:portrait){
  body.game-active .screen{
    grid-template-rows:
      calc(43px + env(safe-area-inset-top,0px))
      132px
      6px
      minmax(0,1fr) !important;
  }

  body.game-active .cab-head{
    top:calc(44px + env(safe-area-inset-top,0px)) !important;
  }

  body.game-active #pauseBtn,
  body.game-active #muteBtn{
    width:30px !important;
    min-width:30px !important;
    height:28px !important;
    min-height:28px !important;
  }

  body.game-active .item canvas{
    width:52px !important;
    height:52px !important;
  }

  body.game-active .item .fr{
    font-size:9px !important;
  }

  body.game-active .bin{
    grid-template-rows:10px minmax(24px,1fr) minmax(19px,auto) !important;
  }

  body.game-active .bin canvas{
    width:26px !important;
    height:26px !important;
  }

  body.game-active .bin .fr{
    font-size:5.4px !important;
  }
}

/* Paysage mobile : objet à gauche, dix bacs à droite, sans défilement. */
@media (max-width:950px) and (max-height:540px) and (orientation:landscape){
  body.game-active{
    position:fixed !important;
    inset:0 !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    overflow:hidden !important;
  }

  body.game-active .cab{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    max-height:none !important;
  }

  body.game-active .screen{
    height:100% !important;
    min-height:0 !important;
    grid-template-columns:minmax(190px,38%) minmax(0,62%) !important;
    grid-template-rows:
      calc(43px + env(safe-area-inset-top,0px))
      minmax(0,1fr)
      6px !important;
    grid-template-areas:
      "hud hud"
      "stage bins"
      "timer bins" !important;
  }

  body.game-active .item{
    top:50% !important;
    bottom:auto !important;
    width:92% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    transform:translate(-50%,-50%) !important;
    animation:none !important;
  }

  body.game-active .item canvas{
    width:clamp(44px,14vh,62px) !important;
    height:clamp(44px,14vh,62px) !important;
  }

  body.game-active .plaque{
    padding:5px 6px !important;
  }

  body.game-active .item .fr{
    font-size:clamp(8px,2.2vh,10px) !important;
  }

  body.game-active .item .de{
    display:none !important;
  }

  body.game-active .bins{
    height:100% !important;
    gap:3px !important;
    padding:3px calc(3px + env(safe-area-inset-right,0px)) 3px 3px !important;
  }

  body.game-active .bin{
    min-height:0 !important;
    grid-template-rows:10px minmax(24px,1fr) minmax(18px,auto) !important;
    padding:2px 1px !important;
  }

  body.game-active .bin canvas{
    width:clamp(24px,9vh,34px) !important;
    height:clamp(24px,9vh,34px) !important;
  }

  body.game-active .bin .fr{
    font-size:clamp(5px,1.65vh,6.7px) !important;
  }
}


/* ===== HIBOO TRASH RUSH v3.2.8 — MENU MOBILE / PLEIN ÉCRAN =====
   Le menu redevient une vraie page verticale défilable. Le verrouillage
   de la fenêtre est réservé à la partie en cours. */
@media (max-width:720px){
  html.menu-active{
    width:100% !important;
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-x:none !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
  }

  html.menu-active body.menu-active{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    padding:0 !important;
    overflow:visible !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
    background:#071427;
  }

  html.menu-active body.menu-active .cab{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    overflow:visible !important;
    border-left-width:0 !important;
    border-right-width:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  html.menu-active body.menu-active .screen{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    isolation:auto !important;
  }

  html.menu-active body.menu-active .hud,
  html.menu-active body.menu-active .stage,
  html.menu-active body.menu-active .timerwrap,
  html.menu-active body.menu-active .bins{
    display:none !important;
  }

  html.menu-active body.menu-active #titleOverlay{
    position:relative !important;
    inset:auto !important;
    z-index:50 !important;
    width:100% !important;
    height:auto !important;
    min-height:calc(100svh - 104px) !important;
    max-height:none !important;
    overflow:visible !important;
    overscroll-behavior:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start !important;
    padding:8px 10px calc(26px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* Le bouton est dans le flux du menu et reste collé en haut pendant le défilement. */
  html.menu-active body.menu-active #mobileStartBtn{
    display:block !important;
    position:sticky !important;
    top:calc(6px + env(safe-area-inset-top,0px)) !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    z-index:90 !important;
    width:min(100%,520px) !important;
    min-height:50px !important;
    margin:0 auto 6px !important;
    padding:12px 14px !important;
    font-size:12px !important;
    box-shadow:0 5px 0 #000,0 10px 24px rgba(5,11,24,.48) !important;
  }

  /* Un second bouton normal reste disponible en fin de menu. */
  html.menu-active body.menu-active #titleActions{
    position:relative !important;
    width:min(100%,520px) !important;
    max-width:520px !important;
    margin:2px auto 0 !important;
  }

  html.menu-active body.menu-active #titleActions #startBtn{
    display:block !important;
    width:100% !important;
  }

  html.menu-active body.menu-active.help-open #mobileStartBtn{
    display:none !important;
  }
}


/* ===== HIBOO TRASH RUSH v3.2.9 — MOBILE GAMEPLAY FIX =====
   Correctif prioritaire : les bacs gardent une hauteur limitée, l'objet reste
   visible et les panneaux pédagogiques ne peuvent plus laisser un écran sombre
   sans commande accessible. Ces règles sont volontairement placées en dernier. */
@media (max-width:720px){
  html:not(.menu-active){
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }

  body.game-active{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:manipulation !important;
    background:#0e1a33 !important;
  }

  body.game-active .cab{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }

  /* Les bacs ne prennent plus toute la hauteur : 168 à 186 px selon l'écran. */
  body.game-active .screen{
    display:grid !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:
      calc(48px + env(safe-area-inset-top,0px))
      minmax(150px,1fr)
      7px
      calc(clamp(168px,22vh,186px) + env(safe-area-inset-bottom,0px)) !important;
    grid-template-areas:
      "hud"
      "stage"
      "timer"
      "bins" !important;
    overflow:hidden !important;
    background:#0e1a33 !important;
  }

  body.game-active .stage{
    grid-area:stage !important;
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.game-active .bg,
  body.game-active .bgshade{
    display:block !important;
  }

  body.game-active .item{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    left:50% !important;
    width:min(92%,430px) !important;
    max-height:calc(100% - 12px) !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
    opacity:1;
    animation:none !important;
    z-index:20 !important;
  }

  body.game-active .item canvas{
    width:clamp(58px,18vw,76px) !important;
    height:clamp(58px,18vw,76px) !important;
    margin:0 !important;
    flex:none !important;
  }

  body.game-active .plaque{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:8px 9px !important;
  }

  body.game-active .item .fr{
    display:block !important;
    font-size:clamp(10px,3vw,13px) !important;
    line-height:1.35 !important;
  }

  body.game-active .item .de{
    display:none !important;
  }

  body.game-active .timerwrap{
    grid-area:timer !important;
    width:auto !important;
    height:7px !important;
    min-height:7px !important;
    margin:0 4px !important;
    padding:1px !important;
  }

  body.game-active .bins{
    grid-area:bins !important;
    display:grid !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px)) !important;
    overflow:hidden !important;
    touch-action:manipulation !important;
    background:linear-gradient(180deg,rgba(16,31,61,.98),rgba(8,21,43,.98)) !important;
  }

  body.game-active .bin{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:11px 34px minmax(18px,1fr) !important;
    align-content:center !important;
    align-items:center !important;
    justify-items:center !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:2px 1px 3px !important;
    overflow:hidden !important;
    border-radius:6px !important;
    touch-action:manipulation !important;
    user-select:none !important;
  }

  body.game-active .bin .num{
    position:static !important;
    width:14px !important;
    height:14px !important;
    min-height:0 !important;
    font-size:6px !important;
    line-height:14px !important;
  }

  body.game-active .bin canvas{
    width:32px !important;
    height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
    margin:0 !important;
  }

  body.game-active .bin .v31-lid{
    top:20px !important;
    width:30px !important;
    height:4px !important;
  }

  body.game-active .bin .de{
    display:none !important;
  }

  body.game-active .bin .fr,
  :is(html[lang="tr"],html[lang="ro"],html[lang="uk"],html[lang="ar"],html[lang="ja"],html[lang="el"]) body.game-active .bin .fr{
    display:-webkit-box !important;
    width:100% !important;
    max-height:2.5em !important;
    margin:0 !important;
    padding:0 1px !important;
    overflow:hidden !important;
    font-size:clamp(5.4px,1.65vw,7px) !important;
    line-height:1.22 !important;
    text-align:center !important;
    overflow-wrap:anywhere !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
  }

  html[lang="ar"] body.game-active .bin .fr{
    font-size:6.4px !important;
    line-height:1.35 !important;
  }

  /* Après un retard ou une erreur, le bouton Continuer reste toujours visible. */
  body.game-active #tipOverlay:not(.hidden){
    position:fixed !important;
    inset:0 !important;
    z-index:160 !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    align-items:stretch !important;
    justify-items:center !important;
    gap:8px !important;
    width:100vw !important;
    height:var(--trashrush-viewport-height,100dvh) !important;
    max-height:none !important;
    padding:
      calc(10px + env(safe-area-inset-top,0px))
      10px
      calc(10px + env(safe-area-inset-bottom,0px)) !important;
    overflow:hidden !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    background:rgba(5,11,24,.96) !important;
  }

  body.game-active #tipOverlay h2{
    margin:0 !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }

  body.game-active #tipOverlay .tip-panel{
    align-self:center !important;
    width:min(100%,520px) !important;
    max-width:520px !important;
    max-height:100% !important;
    margin:0 !important;
    padding:10px !important;
    gap:9px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
  }

  body.game-active #tipOverlay .tip-panel canvas{
    width:48px !important;
    height:48px !important;
  }

  body.game-active #tipOverlay .tip-item,
  body.game-active #tipOverlay .dest{
    font-size:9px !important;
    line-height:1.45 !important;
  }

  body.game-active #tipOverlay .tip{
    margin-top:6px !important;
    font-size:8px !important;
    line-height:1.55 !important;
  }

  body.game-active #tipBtn{
    position:relative !important;
    z-index:2 !important;
    width:min(100%,520px) !important;
    min-height:46px !important;
    margin:0 auto !important;
    padding:10px 14px !important;
    font-size:11px !important;
    touch-action:manipulation !important;
  }

  body.game-active #pauseOverlay,
  body.game-active #overOverlay,
  body.game-active #helpOverlay{
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media (max-width:720px) and (max-height:700px) and (orientation:portrait){
  body.game-active .screen{
    grid-template-rows:
      calc(44px + env(safe-area-inset-top,0px))
      minmax(132px,1fr)
      6px
      calc(158px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.game-active .bin{
    grid-template-rows:9px 29px minmax(16px,1fr) !important;
  }
  body.game-active .bin canvas{
    width:28px !important;
    height:28px !important;
  }
  body.game-active .bin .fr,
  :is(html[lang="tr"],html[lang="ro"],html[lang="uk"],html[lang="ar"],html[lang="ja"],html[lang="el"]) body.game-active .bin .fr{
    font-size:5.2px !important;
  }
  body.game-active .item canvas{
    width:54px !important;
    height:54px !important;
  }
}

/* Paysage : zone objet à gauche, bacs compacts à droite. */
@media (max-width:950px) and (max-height:540px) and (orientation:landscape){
  body.game-active .screen{
    grid-template-columns:minmax(170px,44%) minmax(0,56%) !important;
    grid-template-rows:
      calc(42px + env(safe-area-inset-top,0px))
      minmax(0,1fr)
      6px !important;
    grid-template-areas:
      "hud hud"
      "stage bins"
      "timer bins" !important;
  }

  body.game-active .bins{
    padding:3px calc(3px + env(safe-area-inset-right,0px)) 3px 3px !important;
  }

  body.game-active .item{
    width:92% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
  }

  body.game-active .item canvas{
    width:clamp(44px,15vh,62px) !important;
    height:clamp(44px,15vh,62px) !important;
  }

  body.game-active .bin{
    grid-template-rows:8px 25px minmax(15px,1fr) !important;
  }

  body.game-active .bin canvas{
    width:24px !important;
    height:24px !important;
  }

  body.game-active .bin .fr,
  :is(html[lang="tr"],html[lang="ro"],html[lang="uk"],html[lang="ar"],html[lang="ja"],html[lang="el"]) body.game-active .bin .fr{
    font-size:clamp(4.8px,1.45vh,6px) !important;
  }
}