* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #08111f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
}

#gameShell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #1d3554 0%, #08101c 58%, #050914 100%);
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  z-index: 20;
  background:
    radial-gradient(circle at 20% 20%, rgba(63, 170, 255, 0.18), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(88, 255, 174, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(3, 10, 20, 0.72), rgba(4, 10, 16, 0.92));
  backdrop-filter: blur(8px);
}

.screen.active {
  display: grid;
}

.hero-card {
  width: min(760px, 92vw);
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
    rgba(6, 13, 25, 0.75);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-align: center;
}

.hero-card h1 {
  margin: 12px 0 16px;
  font-size: clamp(42px, 7vw, 78px);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.hero-card h1 span {
  color: #70ffc7;
  text-shadow: 0 0 26px rgba(112, 255, 199, 0.25);
}

.hero-card p {
  margin: 0 auto 26px;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.65;
}

.label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(112, 255, 199, 0.12);
  color: #a2ffe0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  font-weight: 800;
}

.label.success {
  background: rgba(112, 255, 199, 0.17);
}

.controls-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 30px;
}

.controls-card div {
  padding: 15px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
}

.controls-card b {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.controls-card span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.67);
}

.main-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 16px 28px;
  background: linear-gradient(135deg, #6cffc3, #42a5ff);
  color: #04111c;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(54, 191, 255, 0.28);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.main-button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
}

.secondary-button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 14px 24px;
  margin-left: 10px;
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
}

.glass {
  border: 3px solid rgba(20, 128, 72, 0.9);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(250,255,246,0.92), rgba(221,242,226,0.88));
  color: #102c1c;
  box-shadow: 0 14px 0 rgba(15,89,50,0.22), 0 22px 55px rgba(0,0,0,0.24), inset 0 3px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
}

#hud {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 10;
  display: grid;
  grid-template-columns: 190px 1fr 170px;
  gap: 14px;
  pointer-events: none;
}

.hud-left,
.hud-right,
.hud-center {
  padding: 14px 16px;
}

.hud-center {
  text-align: center;
}

.small-label {
  color: #167342;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.big-number {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.05em;
  color: #102c1c;
  text-shadow: 2px 2px 0 #ffe36d;
}

#streetTitle {
  font-size: 27px;
  font-weight: 950;
  letter-spacing: -0.05em;
  color: #0d6f3f;
  text-shadow: 2px 2px 0 #ffe36d;
}

#missionText {
  margin-top: 3px;
  color: #355243;
  font-weight: 850;
  font-size: 13px;
}

#streetStateWrap {
  width: min(420px, 80%);
  height: 9px;
  margin: 9px auto 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(14,98,54,0.16);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

#streetStateBar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffcf5b, #6cffc3);
  box-shadow: 0 0 18px rgba(108,255,195,0.35);
  transition: width 0.25s ease;
}

#streetStateText {
  color: #1f5d3b;
  font-size: 12px;
  font-weight: 800;
}

.prompt {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 11;
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(8, 18, 31, 0.78);
  border: 1px solid rgba(112, 255, 199, 0.34);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.32), 0 0 32px rgba(112, 255, 199, 0.12);
  color: #effff9;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.prompt b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  margin: 0 3px;
  border-radius: 8px;
  background: rgba(112, 255, 199, 0.18);
  color: #9dffdc;
}



.sort-panel {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 35;
  width: min(980px, calc(100vw - 28px));
  padding: 14px 16px 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(245, 250, 247, 0.96), rgba(223, 235, 228, 0.94));
  border: 2px solid rgba(35, 132, 77, 0.45);
  box-shadow: 0 30px 90px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.8);
  color: #102018;
  text-align: center;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: rgba(35, 132, 77, 0.12);
  color: #167342;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fkf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #168248, #f2cf31);
  box-shadow: 0 0 0 3px rgba(22,130,72,0.12);
}

.sort-question {
  font-size: 20px;
  font-weight: 950;
  margin: 0 0 8px;
  color: #102018;
}

.sort-stage {
  height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  position: relative;
}

.carried-item {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: #ffffff;
  border: 4px solid rgba(20, 128, 72, 0.35);
  box-shadow: 0 18px 0 rgba(20,128,72,0.18), 0 26px 45px rgba(0,0,0,0.22);
  font-size: 68px;
  animation: itemFloat 1.05s ease-in-out infinite;
  transform-origin: center bottom;
}

.carried-item.dropping {
  animation: itemDrop 0.68s cubic-bezier(.2,.85,.25,1.15) forwards;
}

.carried-label {
  position: absolute;
  top: 112px;
  font-size: 12px;
  font-weight: 900;
  color: #355243;
}


.trash-dom-icon {
  position: relative;
  width: 62px;
  height: 70px;
  display: block;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.12));
}

.trash-dom-icon::before,
.trash-dom-icon::after {
  content: '';
  position: absolute;
  display: block;
}

.trash-dom-icon.bottle::before {
  left: 21px; top: 5px; width: 20px; height: 55px;
  border-radius: 9px 9px 12px 12px;
  background: linear-gradient(180deg, #bde9ff, #46a8ff);
  border: 3px solid #176da8;
}
.trash-dom-icon.bottle::after {
  left: 25px; top: 0; width: 12px; height: 10px;
  border-radius: 4px 4px 1px 1px;
  background: #eaf7ff;
  border: 2px solid #176da8;
}

.trash-dom-icon.cup::before {
  left: 14px; top: 13px; width: 34px; height: 48px;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
  background: linear-gradient(180deg, #ffcf5b, #ff9138);
  border: 3px solid #a85517;
}
.trash-dom-icon.cup::after {
  left: 10px; top: 7px; width: 42px; height: 9px;
  border-radius: 99px;
  background: #fff8d9;
  border: 2px solid #a85517;
}

.trash-dom-icon.paper::before {
  left: 12px; top: 11px; width: 42px; height: 52px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #dfeeff);
  border: 3px solid #6096c8;
  transform: rotate(-8deg);
}
.trash-dom-icon.paper::after {
  left: 20px; top: 26px; width: 26px; height: 4px;
  background: #87b9e8;
  box-shadow: 0 10px 0 #87b9e8, 0 20px 0 #87b9e8;
  transform: rotate(-8deg);
}

.trash-dom-icon.can::before {
  left: 15px; top: 12px; width: 34px; height: 48px;
  border-radius: 14px / 8px;
  background: linear-gradient(180deg, #ff7777, #d94141);
  border: 3px solid #8e1e1e;
}
.trash-dom-icon.can::after {
  left: 22px; top: 26px; width: 20px; height: 15px;
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
}

.trash-dom-icon.bag::before {
  left: 10px; top: 17px; width: 44px; height: 42px;
  border-radius: 17px 17px 20px 20px;
  background: linear-gradient(180deg, #6dffa6, #23b963);
  border: 3px solid #0f7138;
}
.trash-dom-icon.bag::after {
  left: 25px; top: 6px; width: 13px; height: 18px;
  border-radius: 9px 9px 2px 2px;
  background: #1fa85a;
  border: 2px solid #0f7138;
}

.trash-dom-icon.box::before {
  left: 9px; top: 14px; width: 48px; height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffd56a, #c98a30);
  border: 3px solid #8a5b20;
  transform: rotate(5deg);
}
.trash-dom-icon.box::after {
  left: 17px; top: 28px; width: 32px; height: 4px;
  background: rgba(70,42,12,0.35);
  transform: rotate(5deg);
}

.trash-dom-icon.battery::before {
  left: 11px; top: 13px; width: 42px; height: 48px;
  border-radius: 8px;
  background: linear-gradient(180deg, #c88cff, #7d4eff);
  border: 3px solid #48228e;
}
.trash-dom-icon.battery::after {
  left: 26px; top: 0; width: 11px; height: 13px;
  border-radius: 3px 3px 0 0;
  background: #efe2ff;
  border: 2px solid #48228e;
}

.bin-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 10px;
  align-items: end;
}

.bin {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  min-height: 142px;
  perspective: 700px;
}

.bin-lid {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 1px;
  height: 24px;
  border-radius: 11px 11px 6px 6px;
  background: var(--bin-color);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.28), 0 7px 14px rgba(0,0,0,0.16);
  transform-origin: left center;
  transition: transform 0.24s ease, top 0.24s ease;
}

.bin-body {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 112px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-radius: 10px 10px 24px 24px;
  clip-path: polygon(8% 0%, 92% 0%, 84% 100%, 16% 100%);
  background: var(--bin-color);
  color: var(--bin-text, white);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.2), inset 0 -9px 0 rgba(0,0,0,0.12), 0 13px 26px rgba(0,0,0,0.20);
  overflow: hidden;
}

.bin-body::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
}

.bin-body b {
  position: relative;
  z-index: 1;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.bin-body small {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 850;
  opacity: 0.9;
}

.bin-body em {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  min-width: 46px;
  height: 38px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid rgba(16, 32, 24, 0.72);
  color: #102018;
  font-style: normal;
  font-weight: 1000;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18);
}

.bin:hover .bin-body,
.bin.selected .bin-body {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.bin.opening .bin-lid {
  top: -12px;
  transform: rotateX(68deg) translateY(-12px);
}

.paper-bin { --bin-color: #1976d2; }
.plastic-bin { --bin-color: #f4c430; --bin-text: #2b2608; }
.metal-bin { --bin-color: #9aa4ad; --bin-text: #17202a; }
.hazard-bin { --bin-color: #d94141; }
.mixed-bin { --bin-color: #18804b; }

.sort-hint {
  margin-top: 10px;
  color: #4a6255;
  font-size: 12px;
  font-weight: 800;
}


.bin-body::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
}

.bin::before,
.bin::after {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #172018;
  z-index: 2;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18);
}

.bin::before { left: 24px; }
.bin::after { right: 24px; }

.bin.success .bin-body {
  animation: binSuccess 0.62s ease;
}

@keyframes binSuccess {
  0% { transform: translateY(-2px) scale(1); }
  45% { transform: translateY(-8px) scale(1.08); }
  100% { transform: translateY(-2px) scale(1); }
}

.bin.invalid {
  animation: binShake 0.34s ease-in-out;
}

.bin.invalid .bin-body {
  filter: saturate(0.75) brightness(0.92);
}

@keyframes binShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

@keyframes itemFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes itemDrop {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  45% { transform: translate(calc(var(--drop-x, 0px) * 0.65), 26px) rotate(12deg) scale(0.92); opacity: 1; }
  78% { transform: translate(var(--drop-x, 0px), 96px) rotate(-8deg) scale(0.52); opacity: 0.95; }
  100% { transform: translate(var(--drop-x, 0px), 132px) rotate(0deg) scale(0.18); opacity: 0; }
}

@media (max-width: 760px) {
  .sort-panel { bottom: 8px; padding: 12px; }
  
.trash-dom-icon {
  position: relative;
  width: 62px;
  height: 70px;
  display: block;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.12));
}

.trash-dom-icon::before,
.trash-dom-icon::after {
  content: '';
  position: absolute;
  display: block;
}

.trash-dom-icon.bottle::before {
  left: 21px; top: 5px; width: 20px; height: 55px;
  border-radius: 9px 9px 12px 12px;
  background: linear-gradient(180deg, #bde9ff, #46a8ff);
  border: 3px solid #176da8;
}
.trash-dom-icon.bottle::after {
  left: 25px; top: 0; width: 12px; height: 10px;
  border-radius: 4px 4px 1px 1px;
  background: #eaf7ff;
  border: 2px solid #176da8;
}

.trash-dom-icon.cup::before {
  left: 14px; top: 13px; width: 34px; height: 48px;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
  background: linear-gradient(180deg, #ffcf5b, #ff9138);
  border: 3px solid #a85517;
}
.trash-dom-icon.cup::after {
  left: 10px; top: 7px; width: 42px; height: 9px;
  border-radius: 99px;
  background: #fff8d9;
  border: 2px solid #a85517;
}

.trash-dom-icon.paper::before {
  left: 12px; top: 11px; width: 42px; height: 52px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #dfeeff);
  border: 3px solid #6096c8;
  transform: rotate(-8deg);
}
.trash-dom-icon.paper::after {
  left: 20px; top: 26px; width: 26px; height: 4px;
  background: #87b9e8;
  box-shadow: 0 10px 0 #87b9e8, 0 20px 0 #87b9e8;
  transform: rotate(-8deg);
}

.trash-dom-icon.can::before {
  left: 15px; top: 12px; width: 34px; height: 48px;
  border-radius: 14px / 8px;
  background: linear-gradient(180deg, #ff7777, #d94141);
  border: 3px solid #8e1e1e;
}
.trash-dom-icon.can::after {
  left: 22px; top: 26px; width: 20px; height: 15px;
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
}

.trash-dom-icon.bag::before {
  left: 10px; top: 17px; width: 44px; height: 42px;
  border-radius: 17px 17px 20px 20px;
  background: linear-gradient(180deg, #6dffa6, #23b963);
  border: 3px solid #0f7138;
}
.trash-dom-icon.bag::after {
  left: 25px; top: 6px; width: 13px; height: 18px;
  border-radius: 9px 9px 2px 2px;
  background: #1fa85a;
  border: 2px solid #0f7138;
}

.trash-dom-icon.box::before {
  left: 9px; top: 14px; width: 48px; height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffd56a, #c98a30);
  border: 3px solid #8a5b20;
  transform: rotate(5deg);
}
.trash-dom-icon.box::after {
  left: 17px; top: 28px; width: 32px; height: 4px;
  background: rgba(70,42,12,0.35);
  transform: rotate(5deg);
}

.trash-dom-icon.battery::before {
  left: 11px; top: 13px; width: 42px; height: 48px;
  border-radius: 8px;
  background: linear-gradient(180deg, #c88cff, #7d4eff);
  border: 3px solid #48228e;
}
.trash-dom-icon.battery::after {
  left: 26px; top: 0; width: 11px; height: 13px;
  border-radius: 3px 3px 0 0;
  background: #efe2ff;
  border: 2px solid #48228e;
}

.bin-row { grid-template-columns: repeat(2, 1fr); }
  .bin { min-height: 100px; }
  .bin-body { height: 78px; }
  .sort-stage { height: 74px; }
  .carried-item { width: 78px; height: 78px; font-size: 48px; }
  .carried-label { top: 76px; }
}


.correct-burst,
.wrong-burst {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  z-index: 60;
  padding: 18px 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, #20b96a, #f4cf30);
  border: 4px solid #ffffff;
  color: #082313;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 1000;
  letter-spacing: -0.04em;
  box-shadow: 0 16px 0 rgba(15,89,50,0.28), 0 28px 80px rgba(0,0,0,0.35);
  pointer-events: none;
  animation: correctBurst 0.9s ease forwards;
}

.wrong-burst {
  background: linear-gradient(135deg, #ff3f3f, #ff8a8a);
  color: #ffffff;
  text-shadow: 2px 2px 0 rgba(90,0,0,0.35);
  box-shadow: 0 16px 0 rgba(135,0,0,0.28), 0 28px 80px rgba(0,0,0,0.35);
  animation: wrongBurst 0.78s ease forwards;
}

@keyframes wrongBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(8deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(-4deg); }
  45% { transform: translate(-50%, -50%) scale(1) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -38%) scale(0.9) rotate(0deg); }
}

@keyframes correctBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-8deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(0.92); }
}

.toast {
  position: absolute;
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
  z-index: 12;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(112, 255, 199, 0.16);
  border: 1px solid rgba(112, 255, 199, 0.27);
  color: #dffff3;
  font-weight: 850;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.mute {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 15;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 16, 28, 0.62);
  color: white;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.pause-button {
  position: absolute;
  right: 82px;
  bottom: 18px;
  z-index: 15;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(7,16,28,0.62);
  color: white;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.pause-card .main-button, .pause-card .secondary-button {
  margin-top: 10px;
}

.mobile-controls {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 15;
  display: none;
  gap: 8px;
  user-select: none;
}

.stick-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.mobile-controls button {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 16, 28, 0.62);
  color: white;
  font-size: 18px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

#mobilePickup {
  margin-left: 14px;
  background: rgba(112, 255, 199, 0.24);
}

.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  #hud {
    grid-template-columns: 1fr 1fr;
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .hud-center {
    grid-column: 1 / 3;
    order: -1;
  }

  .controls-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-card {
    padding: 26px;
  }

  .mobile-controls {
    display: block;
  }
}


/* --- cartoon TeFeszt / FKF refresh --- */
.cartoon-start {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.24), transparent 20%),
    radial-gradient(circle at 85% 18%, rgba(255,240,167,0.28), transparent 18%),
    linear-gradient(180deg, #dff6ee, #f5ffcb 48%, #ddf7ff 100%);
  border: 4px solid #17854d;
  color: #17301f;
  box-shadow: 0 18px 0 rgba(23,133,77,0.25), 0 34px 110px rgba(0,0,0,0.24);
  position: relative;
  overflow: hidden;
}
.cartoon-start::before, .cartoon-start::after {
  content: '✦'; position: absolute; font-size: 30px; color: #ffcf2f; opacity: 0.9;
}
.cartoon-start::before { left: 24px; top: 22px; }
.cartoon-start::after { right: 26px; top: 26px; }
.cartoon-start h1 { color: #103a23; text-shadow: 3px 3px 0 #fff39f; }
.cartoon-start p { color: #244132; }
.cartoon-start .controls-card div {
  background: rgba(255,255,255,0.72); border: 2px solid rgba(23,133,77,0.18); color: #17301f;
}

.guide-button {
  position: absolute; right: 18px; bottom: 18px; z-index: 19;
  border: 0; border-radius: 999px; padding: 13px 18px; cursor: pointer;
  background: linear-gradient(180deg,#fffef7,#ffef98); color:#17301f; font-weight: 1000;
  box-shadow: 0 8px 0 rgba(0,0,0,0.18), 0 16px 28px rgba(0,0,0,0.22);
}
.guide-panel {
  position: absolute; right: 18px; bottom: 70px; z-index: 36; width: min(380px, calc(100vw - 32px));
}
.guide-card {
  border-radius: 24px; background: linear-gradient(180deg,#fbfff8,#edf8f2); padding: 18px 18px 16px;
  color: #163322; border: 3px solid #19844b; box-shadow: 0 28px 70px rgba(0,0,0,0.28);
}
.guide-head { font-size: 20px; font-weight: 1000; color:#10663a; text-shadow:2px 2px 0 #ffe36d; }
.guide-note { margin: 8px 0 10px; font-size: 12px; color:#486456; font-weight: 700; }
.guide-card ul { margin: 0; padding-left: 18px; display:grid; gap:8px; font-size:14px; line-height:1.35; }
.guide-card li b { font-weight: 1000; }
.guide-close { margin-top: 14px; margin-left: 0; }

.sort-panel { border-width: 3px; border-color: #19844b; background: linear-gradient(180deg,#f9fff8,#e6f7ec 56%, #edf2e8 100%); }
.sort-question { color:#0d6f3f; text-shadow: 2px 2px 0 #ffe36d; }
.sort-stage { height: 180px; margin-bottom: 10px; }
.carried-item {
  width: 156px; height: 156px; border-radius: 38px;
  background: linear-gradient(180deg, #ffffff, #effcf4);
  border: 4px solid rgba(23, 133, 77, 0.42);
  box-shadow: 0 16px 0 rgba(23,133,77,0.18), 0 28px 54px rgba(0,0,0,0.2);
  font-size: 0; position: relative; isolation: isolate; overflow: visible;
}
.carried-item::before {
  content:''; position:absolute; inset: 18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,105,0.5) 0%, rgba(112,255,199,0.34) 38%, rgba(112,255,199,0) 72%);
  z-index: 0;
}
.carried-item .trash-dom-icon { transform: scale(1.9); filter: drop-shadow(0 10px 0 rgba(0,0,0,0.12)) drop-shadow(0 18px 16px rgba(0,0,0,0.2)); }
.trash-choice-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  font-size: 76px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 9px 0 rgba(0,0,0,0.10)) drop-shadow(0 16px 15px rgba(0,0,0,0.18));
}
.carried-label { top: 142px; font-size: 14px; color: #244132; }

.bin-row { gap: 14px; }
.bin { min-height: 152px; }
.bin-lid { left: 16px; right: 16px; top: 0; height: 22px; border-radius: 12px 12px 5px 5px; }
.bin-body { left: 10px; right: 10px; height: 118px; border-radius: 12px 12px 28px 28px; }
.bin-body b { font-size: 15px; margin-top: 6px; text-shadow: 1px 1px 0 rgba(255,255,255,0.18); }
.bin-body em { bottom: 12px; min-width: 54px; height: 42px; font-size: 24px; }
.bin-body::after { display:none; }
.sort-hint { font-size: 13px; font-weight: 900; color:#355243; }

@media (max-width: 760px) {
  .sort-stage { height: 104px; }
  .carried-item { width: 90px; height: 90px; border-radius: 24px; }
  .trash-choice-icon { width: 70px; height: 70px; font-size: 48px; }
  .carried-label { top: 88px; font-size: 12px; }
  .bin { min-height: 104px; }
  .bin-body { height: 82px; }
}

.correct-burst, .wrong-burst { font-size: 34px; font-weight: 1000; text-shadow: 0 6px 16px rgba(0,0,0,0.22); }

.trash-dom-icon { width: 70px; height: 82px; }
.trash-dom-icon.flyer::before { left: 10px; top: 16px; width: 46px; height: 54px; border-radius: 7px; background: linear-gradient(180deg,#ffffff,#dceeff); border: 3px solid #6096c8; transform: rotate(10deg); }
.trash-dom-icon.flyer::after { left: 18px; top: 30px; width: 26px; height: 4px; background: #89bbe5; box-shadow: 0 10px 0 #89bbe5, 0 20px 0 #89bbe5; transform: rotate(10deg); }
.trash-dom-icon.carton::before { left: 8px; top: 15px; width: 48px; height: 44px; border-radius: 10px; background: linear-gradient(180deg,#fff4bb,#d6a34a); border: 3px solid #8a5b20; }
.trash-dom-icon.carton::after { left: 16px; top: 22px; width: 32px; height: 4px; background: rgba(70,42,12,0.35); box-shadow:0 10px 0 rgba(70,42,12,0.28); }
.trash-dom-icon.foil::before { left: 10px; top: 18px; width: 48px; height: 34px; border-radius: 12px; background: linear-gradient(180deg,#d7dbe0,#949ea9); border: 3px solid #4e5964; transform: rotate(-7deg); }
.trash-dom-icon.foil::after { left: 16px; top: 26px; width: 32px; height: 10px; border-radius: 99px; background: rgba(255,255,255,0.42); transform: rotate(-7deg); }
.trash-dom-icon.apple::before { left: 14px; top: 18px; width: 38px; height: 38px; border-radius: 50% 50% 46% 46%; background: linear-gradient(180deg,#ffb362,#db6e1b); border: 3px solid #8b430d; }
.trash-dom-icon.apple::after { left: 30px; top: 8px; width: 5px; height: 14px; border-radius: 3px; background: #5e3416; box-shadow: 7px 2px 0 1px #4aa550; }
.trash-dom-icon.napkin::before { left: 12px; top: 14px; width: 44px; height: 40px; border-radius: 10px; background: linear-gradient(180deg,#fff9ef,#d8d4cc); border: 3px solid #8d8376; transform: rotate(-12deg); }
.trash-dom-icon.napkin::after { left: 24px; top: 24px; width: 14px; height: 8px; border-radius: 50%; background: rgba(210,150,85,0.45); transform: rotate(-12deg); }

@media (max-width: 760px) {
  .guide-panel { right: 10px; left: 10px; width: auto; }
  .guide-button { right: 10px; bottom: 10px; }
}


/* --- fix: bin text higher, menu colors better, longer wrong animation --- */
.cartoon-start {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.28), transparent 18%),
    radial-gradient(circle at 86% 14%, rgba(255,220,90,0.34), transparent 20%),
    linear-gradient(180deg, #e7f6ff 0%, #c7efff 28%, #eefcc7 58%, #ffe88f 100%);
}
.cartoon-start .label {
  background: rgba(24,128,75,0.12);
  color: #12713f;
}
.main-button {
  background: linear-gradient(135deg, #f4c430, #1f85d8);
  color: #0f2418;
}
.bin-body {
  align-content: start;
  padding-top: 42px;
}
.bin-body b {
  margin-top: 0;
  line-height: 1.05;
}
.bin-body em {
  bottom: 6px;
}
.wrong-burst {
  animation: wrongBurst 1.25s ease forwards;
}
@keyframes wrongBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(8deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(-4deg); }
  36% { opacity: 1; transform: translate(-50%, -50%) scale(1.03) rotate(2deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -38%) scale(0.92) rotate(0deg); }
}


/* --- start menu contrast fix + smaller road trash --- */
.cartoon-start {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.42), transparent 18%),
    radial-gradient(circle at 86% 16%, rgba(244,196,48,0.28), transparent 22%),
    linear-gradient(180deg, #f3fff8 0%, #e4f6ee 48%, #fff2a8 100%) !important;
  border-color: #137645 !important;
}
.cartoon-start h1 {
  color: #113c25 !important;
  text-shadow: 3px 3px 0 #ffe36d !important;
}
.cartoon-start h1 span {
  color: #168248 !important;
  text-shadow: 3px 3px 0 #fff1a6 !important;
}
.cartoon-start p {
  color: #1f3b2c !important;
  font-weight: 650;
}
.cartoon-start .label {
  background: rgba(19,118,69,0.16) !important;
  color: #12633b !important;
}
.cartoon-start .controls-card div {
  background: rgba(255,255,255,0.84) !important;
  border: 2px solid rgba(19,118,69,0.22) !important;
  color: #102c1c !important;
  box-shadow: 0 8px 0 rgba(19,118,69,0.10);
}
.cartoon-start .controls-card b { color: #102c1c !important; }
.cartoon-start .controls-card span { color: #345342 !important; font-weight: 750; }
.cartoon-start .main-button {
  background: linear-gradient(135deg, #f4c430, #168248) !important;
  color: #102018 !important;
  box-shadow: 0 12px 0 rgba(19,118,69,0.25), 0 22px 46px rgba(0,0,0,0.22) !important;
}


/* --- ensure bin lower labels stay hidden --- */
.bin-body small { display: none !important; }
.bin-body b { position: relative; z-index: 3; }


/* guide helper */
.guide-panel {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(7, 18, 24, 0.40);
  backdrop-filter: blur(5px);
}
.guide-panel.hidden { display: none; }
.guide-card {
  width: min(760px, calc(100vw - 32px));
  background: linear-gradient(180deg, #f8fff9 0%, #eef8f2 58%, #fff4bf 100%);
  border: 4px solid #17854d;
  border-radius: 28px;
  color: #153022;
  padding: 22px 24px 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  animation: guidePop .28s ease;
}
.guide-topline {
  display:inline-block; padding:8px 14px; border-radius:999px;
  background: rgba(23,133,77,0.14); color:#12703f; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: 12px;
}
.guide-card h3 {
  margin: 12px 0 8px; font-size: 34px; line-height: 1; color:#113c25; text-shadow: 3px 3px 0 #ffe36d;
}
.guide-card p { margin: 0 0 16px; color:#355242; font-weight:700; }
.guide-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
.guide-item {
  border-radius: 20px; padding: 14px 16px; background: rgba(255,255,255,0.82); border: 2px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.04);
}
.guide-item b { display:block; font-size: 18px; margin-bottom: 5px; }
.guide-item span { color:#355242; font-size: 14px; line-height:1.35; font-weight:700; }
.guide-item.paper { border-color:#2b78cf; }
.guide-item.plastic { border-color:#f0bf29; }
.guide-item.metal { border-color:#99a3af; }
.guide-item.hazard { border-color:#de4040; }
.guide-item.mixed { border-color:#218c4a; grid-column: span 2; }
@keyframes guidePop {
  0% { opacity:0; transform: translateY(18px) scale(.95); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@media (max-width: 700px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-item.mixed { grid-column: auto; }
  .guide-card h3 { font-size: 28px; }
}

.trash-dom-icon.wig::before {
  left: 12px; top: 18px; width: 38px; height: 24px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, #ffb6e4, #f07cc1);
  border: 3px solid #a23f78;
}
.trash-dom-icon.wig::after {
  left: 15px; top: 34px; width: 32px; height: 12px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #f48dca, #d65aa9);
  border: 3px solid #a23f78;
  border-top: 0;
}
.trash-dom-icon.glasses::before {
  left: 10px; top: 24px; width: 14px; height: 14px;
  border-radius: 5px; border: 3px solid #1f6ea2; background: rgba(105,220,255,0.4);
  box-shadow: 24px 0 0 0 rgba(105,220,255,0.4), 24px 0 0 3px #1f6ea2;
}
.trash-dom-icon.glasses::after {
  left: 24px; top: 29px; width: 10px; height: 3px; background: #1f6ea2;
}
.trash-dom-icon.banana::before {
  left: 14px; top: 18px; width: 34px; height: 22px;
  border-radius: 0 0 18px 18px; border: 4px solid #a87418; border-top: 0; transform: rotate(-15deg);
}
.trash-dom-icon.pizza::before {
  left: 14px; top: 15px; width: 0; height: 0;
  border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 38px solid #ffcb66;
  transform: rotate(180deg);
}
.trash-dom-icon.pizza::after {
  left: 17px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: #d44835;
  box-shadow: 10px -6px 0 #d44835, 12px 8px 0 #d44835;
}
.trash-dom-icon.mask::before {
  left: 12px; top: 22px; width: 38px; height: 22px;
  border-radius: 10px; background: linear-gradient(180deg, #cbf0ff, #8ad1f5); border: 3px solid #5a99b4;
}
.trash-dom-icon.mask::after {
  left: 7px; top: 28px; width: 48px; height: 8px; border-top: 2px solid #5a99b4; border-bottom: 2px solid #5a99b4;
}
.trash-dom-icon.shoe::before {
  left: 10px; top: 28px; width: 40px; height: 16px;
  border-radius: 10px 14px 8px 8px; background: linear-gradient(180deg, #9a765f, #654535); border: 3px solid #4a3025;
}
.trash-dom-icon.shoe::after {
  left: 34px; top: 34px; width: 14px; height: 8px; border-radius: 0 10px 8px 0; background: #f0f0f0; border: 2px solid #4a3025;
}
.trash-dom-icon.banner::before {
  left: 12px; top: 14px; width: 42px; height: 34px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18% 52%);
  background: linear-gradient(180deg, #fffaf0, #ffeab0); border: 3px solid #d29a1e;
}
.trash-dom-icon.banner::after {
  left: 16px; top: 28px; width: 24px; height: 4px; background: rgba(160,117,19,0.4); box-shadow: 0 8px 0 rgba(160,117,19,0.3);
}
.trash-dom-icon.balloon::before {
  left: 19px; top: 10px; width: 24px; height: 28px;
  border-radius: 50% 50% 48% 48%; background: linear-gradient(180deg, #ff8faf, #e44974); border: 3px solid #9d2f4f;
}
.trash-dom-icon.balloon::after {
  left: 29px; top: 38px; width: 2px; height: 18px; background: #9d2f4f;
}


/* visible guide close button */
.guide-card .secondary-button,
#guideClose {
  margin-left: 0;
  border: 2px solid #17854d;
  background: linear-gradient(180deg, #17854d, #0d6a38);
  color: #fff8d1;
  box-shadow: 0 8px 0 rgba(11, 92, 49, 0.22), 0 12px 22px rgba(0,0,0,0.16);
}
.guide-card .secondary-button:hover,
#guideClose:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}


.pause-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.pause-help {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  max-width: 640px;
}
.pause-help.hidden { display:none; }
.pause-help-title {
  font-size: 24px;
  font-weight: 1000;
  color: #113c25;
  text-shadow: 2px 2px 0 #ffe36d;
  margin-bottom: 12px;
}
.pause-help-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px 14px;
}
.pause-help-grid div {
  background: rgba(255,255,255,0.78);
  border: 2px solid rgba(19,118,69,0.18);
  border-radius: 16px;
  padding: 12px 14px;
}
.pause-help-grid b {
  display:block;
  font-size: 18px;
  color:#133520;
  margin-bottom:4px;
}
.pause-help-grid span {
  color:#355242;
  font-weight:800;
  font-size: 14px;
}
@media (max-width: 700px) {
  .pause-help-grid { grid-template-columns: 1fr; }
}


.hero-logo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: block;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  border: 4px solid rgba(255,255,255,0.5);
}
.hud-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}
.hud-logo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
  border: 2px solid rgba(255,255,255,0.45);
}
#streetTitle { display:inline-block; }


/* fixed FKF helper, always visible during gameplay */
.fkf-helper {
  position: absolute;
  left: 18px;
  bottom: 88px;
  z-index: 44;
  width: 92px;
  height: 118px;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.28));
}
.fkf-helper.hidden { display: none; }
.helper-person {
  position: absolute;
  left: 20px;
  top: 8px;
  width: 52px;
  height: 82px;
}
.helper-head {
  position: absolute;
  left: 15px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f0bd8c;
  border: 2px solid rgba(0,0,0,0.12);
}
.helper-cap {
  position: absolute;
  left: 12px;
  top: -5px;
  width: 28px;
  height: 9px;
  border-radius: 7px 7px 3px 3px;
  background: #14733f;
}
.helper-body {
  position: absolute;
  left: 9px;
  top: 24px;
  width: 34px;
  height: 38px;
  border-radius: 10px;
  background: #17854d;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.12);
}
.helper-body::before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 8px;
  height: 11px;
  border-radius: 6px;
  background: #f4c430;
}
.helper-body b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  color: #fff;
  font: 900 10px system-ui;
  text-align: center;
}
.helper-leg {
  position: absolute;
  top: 60px;
  width: 7px;
  height: 24px;
  border-radius: 4px;
  background: #1d2a26;
}
.leg-left { left: 15px; transform: rotate(7deg); }
.leg-right { right: 15px; transform: rotate(-7deg); }
.helper-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  color: #17422c;
  border: 3px solid #17854d;
  font: 1000 14px system-ui;
  box-shadow: 0 6px 0 rgba(23,133,77,0.22);
}
.fkf-helper:hover .helper-label {
  transform: translateY(-2px);
  background: #fff7b5;
}


/* extra 30-item version trash icons */
.trash-dom-icon.ticket::before {
  left: 10px; top: 22px; width: 44px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, #fff59d, #ffd43b); border: 3px solid #b88900;
}
.trash-dom-icon.ticket::after {
  left: 30px; top: 24px; width: 4px; height: 22px; background: #b88900; box-shadow: 10px 6px 0 -1px #b88900;
}
.trash-dom-icon.confetti::before {
  left: 12px; top: 16px; width: 10px; height: 5px; background:#ff4fa3;
  box-shadow: 16px -5px 0 #43c3ff, 28px 6px 0 #ffe36d, 7px 22px 0 #8cff70, 32px 28px 0 #b06cff;
  transform: rotate(-18deg);
}
.trash-dom-icon.confetti::after {
  left: 18px; top: 42px; width: 8px; height: 5px; background:#ff9f3f; transform: rotate(22deg);
  box-shadow: 18px -18px 0 #ff4fa3, 26px 5px 0 #43c3ff;
}
.trash-dom-icon.glowstick::before {
  left: 26px; top: 9px; width: 12px; height: 52px; border-radius: 99px;
  background: linear-gradient(180deg, #dfff90, #7dff52); border: 3px solid #2d8b19; transform: rotate(-22deg);
}
.trash-dom-icon.glowstick::after {
  left: 31px; top: 16px; width: 4px; height: 36px; background:rgba(255,255,255,0.55); transform: rotate(-22deg);
}
.trash-dom-icon.coffee::before {
  left: 15px; top: 14px; width: 34px; height: 48px; clip-path: polygon(0 0,100% 0,80% 100%,20% 100%);
  background: linear-gradient(180deg, #c98b4c, #7a431f); border: 3px solid #513019;
}
.trash-dom-icon.coffee::after {
  left: 12px; top: 8px; width: 40px; height: 9px; border-radius:99px; background:#f4e2c5; border:2px solid #513019;
}
.trash-dom-icon.bracelet::before {
  left: 11px; top: 22px; width: 40px; height: 26px; border-radius: 50%;
  border: 7px solid #43c3ff; transform: rotate(-15deg);
}
.trash-dom-icon.bracelet::after {
  content:'VIP'; left: 20px; top: 30px; font: 900 11px system-ui; color:#08415c;
}
.trash-dom-icon.popcorn::before {
  left: 12px; top: 22px; width: 40px; height: 38px; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%);
  background: repeating-linear-gradient(90deg, #fff 0 8px, #e84242 8px 16px); border: 3px solid #8b1d1d;
}
.trash-dom-icon.popcorn::after {
  left: 13px; top: 9px; width: 10px; height: 10px; border-radius:50%; background:#ffe36d;
  box-shadow: 11px -3px 0 #ffe36d, 22px 0 0 #ffe36d, 31px -2px 0 #ffe36d;
}
.trash-dom-icon.umbrella::before {
  left: 9px; top: 16px; width: 46px; height: 25px; border-radius: 46px 46px 0 0;
  background: linear-gradient(135deg, #8b7bff, #5440d9); border: 3px solid #2f238a;
}
.trash-dom-icon.umbrella::after {
  left: 31px; top: 39px; width: 4px; height: 24px; background:#3f345f; border-radius:99px;
}
.trash-dom-icon.microphone::before {
  left: 22px; top: 8px; width: 20px; height: 25px; border-radius:50%;
  background: linear-gradient(180deg, #cfd8dc, #68737d); border: 3px solid #30363b;
}
.trash-dom-icon.microphone::after {
  left: 28px; top: 33px; width: 8px; height: 30px; border-radius:6px;
  background:#2f343a; border: 2px solid #171a1d;
}
.trash-dom-icon.fan::before {
  left: 12px; top: 18px; width: 40px; height: 36px; clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(135deg, #ffc6f2, #f070c6); border: 3px solid #ad3f87;
}
.trash-dom-icon.fan::after {
  left: 30px; top: 44px; width: 4px; height: 18px; background:#ad3f87; transform: rotate(18deg);
}
.trash-dom-icon.sticker::before {
  left: 13px; top: 15px; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, #fffad1, #ffe66b); border: 3px solid #b88900; transform: rotate(-8deg);
}
.trash-dom-icon.sticker::after {
  content:'★'; left: 24px; top: 22px; font: 900 24px system-ui; color:#ff9f00;
}


.level-select {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 16px;
}
.level-card {
  appearance: none;
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 20px;
  padding: 14px 12px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10);
}
.level-card b {
  display: block;
  font-size: 17px;
  font-weight: 1000;
  margin-bottom: 5px;
}
.level-card span {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  opacity: .88;
  font-weight: 750;
}
.level-card.active {
  background: linear-gradient(180deg, rgba(108,255,195,0.35), rgba(66,165,255,0.26));
  border-color: rgba(108,255,195,0.9);
  box-shadow: 0 10px 26px rgba(66,165,255,0.18), inset 0 -4px 0 rgba(0,0,0,0.12);
}
@media (max-width: 760px) {
  .level-select { grid-template-columns: 1fr; }
}


/* Responsive opening screen: the start button must remain reachable on small windows. */
html,
body,
#gameShell {
  min-height: 100%;
  height: 100dvh;
}

.screen {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#startScreen.active {
  min-height: 100dvh;
}

#startScreen .hero-card {
  flex: 0 0 auto;
}

@media (max-height: 780px), (max-width: 680px) {
  #startScreen.active,
  #winScreen.active,
  #pauseScreen.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
  }

  #startScreen .hero-card,
  #winScreen .hero-card,
  #pauseScreen .hero-card {
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 22px;
    border-radius: 24px;
  }

  #startScreen .hero-logo {
    width: 82px;
    height: 82px;
    margin-bottom: 8px;
  }

  #startScreen .label {
    padding: 6px 10px;
    font-size: 11px;
  }

  #startScreen .hero-card h1 {
    margin: 9px 0 11px;
    font-size: clamp(34px, 9vw, 54px);
    line-height: 0.96;
  }

  #startScreen .hero-card p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.42;
  }

  #startScreen .controls-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
  }

  #startScreen .controls-card div {
    padding: 9px 8px;
    border-radius: 14px;
  }

  #startScreen .controls-card b {
    margin-bottom: 1px;
    font-size: 15px;
  }

  #startScreen .controls-card span {
    font-size: 11px;
  }

  #startButton {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
  }
}

@media (max-height: 520px) {
  #startScreen .hero-card {
    padding: 14px 18px 18px;
  }

  #startScreen .hero-logo {
    width: 58px;
    height: 58px;
    border-width: 3px;
  }

  #startScreen .label {
    display: none;
  }

  #startScreen .hero-card h1 {
    font-size: clamp(29px, 8vw, 42px);
    margin: 5px 0 8px;
  }

  #startScreen .hero-card p {
    font-size: 12px;
    margin-bottom: 8px;
  }

  #startScreen .controls-card {
    margin: 8px 0 10px;
  }
}

/* Mobilos játéktér: a vezérlés külön alsó sávot kap, így semmit nem takar ki. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  html, body, #gameShell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #gameCanvas {
    inset: 0 0 118px 0;
    width: 100%;
    height: calc(100dvh - 118px);
    object-fit: contain;
    background: #102034;
  }

  .mobile-controls:not(.hidden) {
    position: fixed;
    display: grid;
    grid-template-columns: 174px minmax(72px, 1fr);
    align-items: center;
    gap: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 118px;
    padding: 8px 132px max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    z-index: 45;
    background: linear-gradient(180deg, rgba(8, 24, 40, .98), rgba(3, 10, 18, .99));
    border-top: 2px solid rgba(112, 255, 199, .58);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .5);
    touch-action: none;
  }

  .mobile-controls .stick-row {
    gap: 5px;
  }

  .mobile-controls button {
    width: 52px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    border: 2px solid rgba(255, 255, 255, .24);
  }

  #mobilePickup {
    width: 72px;
    height: 72px;
    margin: 0;
    justify-self: center;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(86, 239, 178, .95), rgba(27, 142, 94, .96));
    color: #052519;
    font-size: 24px;
  }

  .pause-button, .mute {
    position: fixed;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 18px));
    z-index: 50;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .14);
  }

  .pause-button { right: 70px; }
  .mute { right: 14px; }
  .guide-button { bottom: 130px; right: 10px; }

  .sort-panel {
    bottom: 126px;
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 138px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 18px;
    touch-action: pan-y;
  }

  .sort-stage { height: 96px; }
  .carried-item { width: 78px; height: 78px; border-radius: 20px; font-size: 46px; }
  .carried-label { top: 76px; font-size: 12px; }
  .sort-buttons { grid-template-columns: repeat(5, minmax(58px, 1fr)); gap: 5px; overflow-x: auto; padding-bottom: 4px; }
  .bin { min-width: 58px; transform: scale(.9); transform-origin: center bottom; }
  .sort-question { font-size: 17px; }

  #hud {
    top: 6px;
    left: 6px;
    right: 6px;
    gap: 5px;
  }

  .hud-left, .hud-right { padding: 7px; }
  .hud-center { padding: 7px; }
  .hud-logo { width: 30px; height: 30px; }
  #streetTitle { font-size: 12px; }
  #missionText, #streetStateText { font-size: 9px; }
}

@media (max-width: 390px) {
  .mobile-controls:not(.hidden) { padding-right: 124px; grid-template-columns: 160px 1fr; gap: 5px; }
  .mobile-controls button { width: 48px; }
}