* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   background: #000;
   overflow: hidden;
   font-family: 'Segoe UI', Arial, sans-serif;
 }

 canvas {
   display: block;
   pointer-events: none;
 }

 /* ── HUD ── */
 #hud {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 10;
 }

 /* Insect counter */
 #insect-counter {
   position: absolute;
   top: .5em;
   left: .5em;
   background: rgba(0, 0, 0, 0.75);
   border-radius: .5em;
   padding: .5em .75em;
   display: flex;
   flex-direction: column;

 }

 .ic-row {
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .ic-row span:first-child {
   font-size: 14px;
   width: 18px;
   text-align: center;
 }

 .ic-count {
   font-weight: bold;
   font-size: 13px;
   color: #ffee88;
   min-width: 36px;
 }

 /* Color palette */
 #color-palette {
   position: absolute;
   top: 12em;
   right: 0em;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
   pointer-events: all;
 }

 #palette-label {
   color: #ffffffaa;
   font-size: 11px;
   letter-spacing: 1px;
   margin-right: 0;
 }

 .color-swatch {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid black;
   position: relative;
   transition: transform 0.2s;
   cursor: pointer;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
 }

 .color-swatch.active {
   border-color: #fff;
 }

 @keyframes pulse {

   0%,
   100% {
     box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5);
   }

   50% {
     box-shadow: 0 0 14px 4px rgba(255, 255, 255, 0.9);
   }
 }


 /* Collection notification */
 #notification {
   position: absolute;
   top: 80px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   padding: 8px 20px;
   border-radius: 20px;
   font-size: 13px;
   letter-spacing: 0.5px;
   opacity: 0;
   transition: opacity 0.4s;
   border: 1px solid rgba(255, 255, 255, 0.2);
   white-space: nowrap;
 }

 #notification.show {
   opacity: 1;
 }

 /* Eat indicator */
 #eat-indicator {
   display: none;
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 25%, transparent 25%);
 }



 /* Partner Chameleon Modal */
 #partner-modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 150;
   background: rgba(0, 0, 0, 0.60);
   align-items: center;
   justify-content: center;
   pointer-events: all;
 }

 #partner-modal.show {
   display: flex;
 }

 #partner-box {
   background: linear-gradient(160deg, #1a1a3a, #0e0e22);
   border: 2px solid rgba(255, 180, 220, 0.45);
   border-radius: 22px;
   padding: 30px 40px;
   max-width: 360px;
   width: 90%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   box-shadow: 0 0 50px rgba(255, 100, 180, 0.3);
   text-align: center;
 }

 #partner-emoji-big {
   font-size: 52px;
 }

 #partner-tagline {
   color: #e8d8f0;
   font-size: 17px;
   line-height: 1.5;
   margin: 0;
 }

 #partner-like-line {
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   margin: 0;
 }

 #partner-color-name {
   color: #ffddaa;
 }

 #partner-swatch-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
 }

 #partner-color-swatch {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   border: 3px solid rgba(255, 255, 255, 0.6);
   box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.3);
 }

 #partner-close-btn {
   margin-top: 6px;
   padding: 12px 28px;
   background: rgba(200, 80, 150, 0.75);
   color: #fff;
   border: none;
   font-size: 15px;
   border-radius: 10px;
   cursor: pointer;
   letter-spacing: 0.5px;
   pointer-events: all;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }

 #partner-close-btn:hover {
   background: rgba(240, 100, 180, 0.9);
 }

 #partner-close-btn:active {
   background: rgba(240, 100, 180, 0.95);
   transform: scale(0.96);
 }

 /* Floating heart */
 #partner-heart {
   display: none;
   position: fixed;
   z-index: 60;
   font-size: 36px;
   pointer-events: none;
   transform: translate(-50%, -100%);
   animation: heartFloat 1.2s ease-in-out infinite alternate;
   filter: drop-shadow(0 0 6px rgba(255, 80, 120, 0.8));
 }

 @keyframes heartFloat {
   from {
     transform: translate(-50%, -100%) scale(1.0);
   }

   to {
     transform: translate(-50%, -120%) scale(1.15);
   }
 }

 /* Quiz Modal */
 #quiz-modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 150;
   background: rgba(0, 0, 0, 0.75);
   align-items: center;
   justify-content: center;
   pointer-events: all;
 }

 #quiz-modal.show {
   display: flex;
 }

 #quiz-box {
   background: linear-gradient(160deg, #1a3a2a, #0d1f1a);
   border: 2px solid rgba(100, 255, 150, 0.4);
   border-radius: 20px;
   padding: 32px 40px;
   max-width: 380px;
   width: 90%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   box-shadow: 0 0 40px rgba(50, 200, 100, 0.3);
 }

 #quiz-box h2 {
   color: #88ffcc;
   font-size: 18px;
   letter-spacing: 1px;
   text-align: center;
   margin: 0;
 }

 #quiz-question {
   font-size: 52px;
   font-weight: bold;
   color: #fff;
   text-shadow: 0 0 20px rgba(100, 255, 180, 0.6);
   margin: 0;
   letter-spacing: 4px;
 }

 #quiz-answers {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   width: 100%;
 }

 .quiz-btn {
   padding: 18px 10px;
   font-size: 28px;
   font-weight: bold;
   border: 2px solid rgba(100, 255, 150, 0.35);
   border-radius: 14px;
   cursor: pointer;
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   transition: background 0.15s, transform 0.1s;
   touch-action: manipulation;
 }

 .quiz-btn:hover {
   background: rgba(100, 255, 150, 0.18);
 }

 .quiz-btn:active {
   transform: scale(0.94);
 }

 .quiz-btn.correct {
   background: rgba(50, 200, 80, 0.55) !important;
   border-color: #44ee88;
 }

 .quiz-btn.wrong {
   background: rgba(220, 40, 40, 0.55) !important;
   border-color: #ff4444;
 }

 .quiz-btn-clock {
   padding: 8px;
   font-size: 0;
   line-height: 0;
 }

 .quiz-btn-clock svg {
   display: block;
   margin: auto;
 }

 /* Minimap */
 #minimap-container {
   position: absolute;
   top: .5em;
   right: .5em;
 }

 #minimap {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   display: block;
 }

 #minimap-legend {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin-top: 5px;
   font-size: 10px;
   color: rgba(255, 255, 255, 0.72);
   align-items: flex-end;
 }

 .ml-row {
   display: flex;
   align-items: center;
   gap: 5px;
 }

 .ml-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
 }

 @media (hover: none) and (pointer: coarse) {
   #minimap {
     width: 110px;
     height: 110px;
   }

   #minimap-legend {
     display: none;
   }
 }

 /* Loading screen */
 #loading {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: #111;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   color: #fff;
 }

 #loading h2 {
   font-size: 24px;
   letter-spacing: 2px;
   color: #88ddaa;
 }

 #loading p {
   color: #888;
   font-size: 14px;
 }

 /* ── Touch Controls ── */
 #touch-controls {
   display: flex;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   pointer-events: none;
   z-index: 20;
   justify-content: space-between;
   align-items: flex-end;
   padding: 0 1em 2em 1em;
 }

 /* D-Pad */
 #dpad {
   display: grid;
   grid-template-areas: ". up ." "left . right" ". down .";
   grid-template-columns: repeat(3, 64px);
   grid-template-rows: repeat(3, 64px);
   gap: 0;
   pointer-events: all;
 }

 .dpad-btn {
   background: rgba(0, 0, 0, 0.65);
   border: transparent;
   border-radius: .75em;
   color: #fff;
   font-size: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }

 .dpad-btn:active,
 .dpad-btn.tc-on {
   background: rgba(255, 255, 255, 0.30);
 }

 #btn-up {
   grid-area: up;
 }

 #btn-left {
   grid-area: left;
 }

 #btn-right {
   grid-area: right;
 }

 #btn-down {
   grid-area: down;
 }

 /* Right side */
 #right-actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1em;
   pointer-events: none;
 }

 /* Camera row */
 #cam-row {
   display: flex;
   gap: 8px;
   pointer-events: all;
 }

 .cam-btn {
   width: 60px;
   height: 44px;
   background: rgba(0, 0, 0, 0.65);
   border: transparent;
   border-radius: .75em;
   color: #fff;
   font-size: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }

 .cam-btn:active,
 .cam-btn.tc-on {
   background: rgba(255, 255, 255, 0.25);
 }

 /* Context button (Farbe/Klettern) */
 #btn-color {
   width: 80px;
   height: 80px;
   background: transparent;
   border: none;
   border-radius: 50%;
   color: #fff;
   font-size: 11px;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   line-height: 1.4;
   pointer-events: all;
   cursor: pointer;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }

 #btn-color.climb-mode {
   background: rgba(20, 120, 40, 0.85);
   border: 3px solid rgba(100, 255, 120, 0.85);
   box-shadow: 0 4px 16px rgba(20, 180, 60, 0.45);
 }

 #btn-color.climb-mode:active {
   background: rgba(30, 180, 60, 0.95);
   transform: scale(0.94);
 }

 #btn-color .btn-icon {
   font-size: 26px;
 }

 /* Action button */
 #btn-action {
   width: 108px;
   height: 108px;
   background: rgba(210, 70, 10, 0.82);
   border: 3px solid rgba(255, 180, 80, 0.9);
   border-radius: 50%;
   color: #fff;
   font-size: 13px;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   line-height: 1.4;
   pointer-events: all;
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
   box-shadow: 0 4px 18px rgba(255, 80, 0, 0.45);
 }

 #btn-action:active,
 #btn-action.tc-on {
   background: rgba(255, 110, 30, 0.92);
   transform: scale(0.94);
 }

 #btn-action .btn-icon {
   font-size: 28px;
 }

 /* Climb button */
 #btn-climb {
   display: none;
   width: 80px;
   height: 80px;
   background: rgba(20, 120, 40, 0.85);
   border: 3px solid rgba(100, 255, 120, 0.85);
   border-radius: 50%;
   color: #fff;
   font-size: 11px;
   font-weight: bold;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   line-height: 1.4;
   pointer-events: all;
   cursor: pointer;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
   box-shadow: 0 4px 16px rgba(20, 180, 60, 0.45);
 }

 #btn-climb.visible {
   display: flex;
 }

 #btn-climb:active {
   background: rgba(30, 180, 60, 0.95);
   transform: scale(0.94);
 }

 #btn-climb .btn-icon {
   font-size: 26px;
 }