* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #87c8f0; font-family: system-ui, Arial, sans-serif; }
#game { position: relative; width: 100%; height: 100%; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#sky-label { position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%); color: white; font-weight: 900; letter-spacing: 2px; font-size: clamp(14px, 2.5vw, 22px); text-shadow: 2px 3px 0 #426b37; pointer-events: none; white-space: nowrap; }
#crosshair { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font: 28px/1 monospace; text-shadow: 1px 1px 2px #222; pointer-events: none; }
#hint { position: absolute; z-index: 2; left: 50%; top: 58%; transform: translateX(-50%); color: white; background: #0007; padding: 8px 12px; border-radius: 8px; font-size: 13px; text-align: center; pointer-events: none; }
#toolbar { position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; padding: 7px; background: #2229; border: 2px solid #fff9; border-radius: 9px; }
.slot { position: relative; width: 54px; height: 54px; border: 2px solid #aaa; border-radius: 5px; background: #555b; font-size: 25px; cursor: pointer; }
.slot.selected { border: 3px solid white; background: #ffffff55; transform: translateY(-4px); }
.slot small { position: absolute; bottom: 1px; right: 4px; color: white; font-size: 10px; text-shadow: 1px 1px #000; }
#loading { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: #78bde8; color: white; font-size: 20px; font-weight: bold; }
#loading.done { display: none; }
#debug-status { position: absolute; z-index: 6; top: 48px; left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 6px; background: #17351dcc; color: white; font: 11px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
#error { position: absolute; z-index: 8; inset: 15px; padding: 20px; background: #fff; color: #8b1717; overflow: auto; }
#mobile-controls { display: none; }
@media (pointer: coarse) {
  #hint { display: none; }
  #mobile-controls { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  #joystick { position: absolute; bottom: 100px; left: 24px; width: 116px; height: 116px; border: 2px solid #ffffff99; border-radius: 50%; background: #2225; pointer-events: auto; touch-action: none; }
  #stick { position: absolute; width: 48px; height: 48px; left: 32px; top: 32px; border-radius: 50%; background: #ffffffaa; border: 2px solid white; }
  #look-zone { position: absolute; right: 0; top: 15%; width: 48%; height: 65%; pointer-events: auto; touch-action: none; }
  #mobile-actions { position: absolute; right: 18px; bottom: 95px; display: grid; grid-template-columns: 58px 58px; gap: 10px; pointer-events: auto; }
  #mobile-actions button { width: 58px; height: 58px; border: 2px solid white; border-radius: 50%; background: #3339; color: white; font-size: 25px; touch-action: none; }
  #jump { grid-column: 2; }
  #toolbar { bottom: 12px; }
  .slot { width: 45px; height: 45px; font-size: 20px; }
}
@media (max-width: 420px) { #toolbar { gap: 1px; padding: 3px; } .slot { width: 33px; height: 39px; font-size: 17px; } }

/* Disposition dédiée aux téléphones en mode paysage. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  #sky-label { top: 8px; font-size: 15px; }
  #debug-status { top: 30px; font-size: 10px; }
  #crosshair { font-size: 24px; }
  #joystick {
    left: 18px;
    bottom: 18px;
    width: 92px;
    height: 92px;
  }
  #stick {
    left: 24px;
    top: 24px;
    width: 40px;
    height: 40px;
  }
  #look-zone {
    top: 8%;
    right: 18%;
    width: 64%;
    height: 84%;
  }
  #mobile-actions {
    right: 14px;
    bottom: 18px;
    grid-template-columns: 50px 50px;
    gap: 7px;
  }
  #mobile-actions button {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
  #toolbar {
    bottom: 12px;
    gap: 3px;
    padding: 4px;
  }
  .slot {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }
}

/* Icônes et quantités des objets récoltés. */
.slot { color: white; }
.item-icon { display: block; width: 32px; height: 32px; margin: 2px auto 0; image-rendering: pixelated; filter: drop-shadow(1px 2px 1px #111); }
.item-count { position: absolute; left: 3px; bottom: 2px; color: #fff; font: 700 11px/1 system-ui, sans-serif; text-shadow: 1px 1px 2px #000, -1px -1px 2px #000; }
.slot small { z-index: 1; }
@media (pointer: coarse) { .item-icon { width: 27px; height: 27px; } .item-count { font-size: 10px; } }
@media (max-width: 420px) { .item-icon { width: 23px; height: 23px; } .item-count { font-size: 9px; } }


/* La barre d'inventaire doit rester au-dessus des zones tactiles de caméra en paysage. */
#toolbar { z-index: 7; pointer-events: auto; }
#toolbar .slot { pointer-events: auto; touch-action: manipulation; }