* { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background: #87ceeb;
    font-family: 'Courier New', Courier, monospace;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    touch-action: none;
  }
  #canvas-container { position: absolute; inset: 0; touch-action: none; }
  canvas { display: block; }

  .panel {
    background: rgba(20,18,16,0.82);
    border: 3px solid #050505;
    box-shadow: inset 0 0 0 2px #6b6b6b;
    color: #fff;
  }

  /* Crosshair */
  #crosshair {
    position: absolute; top: 50%; left: 50%;
    width: 18px; height: 18px; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 20;
  }
  #crosshair::before, #crosshair::after {
    content: ''; position: absolute; background: rgba(255,255,255,0.85);
    box-shadow: 0 0 1px rgba(0,0,0,0.8);
  }
  #crosshair::before { top: 8px; left: 0; width: 18px; height: 2px; }
  #crosshair::after { top: 0; left: 8px; width: 2px; height: 18px; }
  #crosshair.error::before, #crosshair.error::after { background: #ff4444; }

  /* Hotbar */
  #hotbar {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; padding: 6px; z-index: 20;
  }
  .hotbar-slot {
    width: 54px; height: 54px; position: relative;
    background: rgba(0,0,0,0.55);
    border: 2px solid #444; box-shadow: inset 0 0 0 1px #222;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
  }
  .hotbar-slot.selected { border-color: #fff; box-shadow: 0 0 6px #fff, inset 0 0 0 1px #222; }
  .hotbar-swatch { width: 28px; height: 28px; border: 1px solid rgba(0,0,0,0.6); }
  .hotbar-count { position: absolute; bottom: 2px; right: 4px; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000; }
  .hotbar-key { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #ccc; text-shadow: 1px 1px 0 #000; }
  .hotbar-slot.empty .hotbar-swatch { opacity: 0.25; }

  /* Resources readout */
  #resources {
    position: absolute; top: 14px; left: 14px; padding: 10px 12px;
    z-index: 20; font-size: 13px; line-height: 1.7;
  }
  #resources .title { font-weight: bold; margin-bottom: 4px; color: #ffd76a; }
  .res-row { display: flex; align-items: center; gap: 6px; }
  .res-swatch { width: 12px; height: 12px; display: inline-block; border: 1px solid rgba(0,0,0,0.6); }

  /* Tool badge */
  #tool-badge {
    position: absolute; top: 14px; right: 14px; padding: 10px 14px;
    z-index: 20; font-size: 13px; text-align: right;
  }
  #tool-badge .title { color: #9ad3ff; font-weight: bold; margin-bottom: 2px; }

  /* Toast */
  #toast {
    position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
    padding: 8px 16px; z-index: 30; font-size: 14px;
    opacity: 0; transition: opacity 0.25s;
    pointer-events: none;
  }
  #toast.show { opacity: 1; }
  #toast.error { color: #ff8888; }
  #toast.ok { color: #a8ffb0; }

  /* Hint */
  #hint {
    position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
    z-index: 20; font-size: 12px; padding: 6px 12px; color: #ddd;
    background: rgba(0,0,0,0.4);
  }

  /* Start / pause overlays */
  #start-screen, #pause-screen {
    position: absolute; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55);
  }
  #pause-screen { display: none; cursor: pointer; }
  .overlay-box {
    padding: 28px 36px; max-width: 460px; text-align: center;
    /* On short/narrow viewports (e.g. an embedded preview panel) this box can
       be taller than the visible area. Without its own scroll region, flex
       centering just lets it overflow top and bottom equally - with the page
       itself non-scrollable (see html/body overflow:hidden above), that
       silently pushes the Start button below the visible area with no way to
       reach it. Capping height and scrolling internally keeps it reachable
       no matter how small the viewport is. */
    max-height: 92vh; overflow-y: auto;
    box-sizing: border-box;
  }
  .overlay-box h1 { margin: 0 0 12px; font-size: 30px; color: #ffd76a; letter-spacing: 1px; }
  .overlay-box p { margin: 6px 0; font-size: 14px; color: #eee; line-height: 1.6; }
  .overlay-box .controls-list { text-align: left; margin: 14px auto; display: inline-block; font-size: 13px; color: #cde; }
  .overlay-box .controls-list div { margin: 3px 0; }
  .overlay-box .controls-list b { color: #fff; display: inline-block; min-width: 118px; }
  #start-btn {
    margin-top: 16px; padding: 12px 28px; font-size: 16px; cursor: pointer;
    background: #4a7c33; color: #fff; border: 3px solid #050505;
    box-shadow: inset 0 0 0 2px #7ab255; font-family: inherit;
  }
  #start-btn:hover { background: #588f3d; }

  /* Crafting panel */
  #crafting-panel {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 40; width: 460px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
    padding: 18px 20px; display: none;
  }
  #crafting-panel h2 { margin: 0 0 4px; color: #ffd76a; }
  #crafting-panel .sub { font-size: 12px; color: #bbb; margin-bottom: 12px; }
  .recipe {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 6px; border-bottom: 1px solid #333;
    gap: 10px;
  }
  .recipe:last-child { border-bottom: none; }
  .recipe-info { flex: 1; }
  .recipe-info .rname { font-weight: bold; font-size: 14px; }
  .recipe-info .rcost { font-size: 12px; color: #bbb; margin-top: 2px; }
  .recipe-info .rdesc { font-size: 11px; color: #8fd1ff; margin-top: 2px; }
  .craft-btn {
    padding: 8px 14px; font-size: 12px; cursor: pointer; font-family: inherit;
    background: #3a6ea5; color: #fff; border: 2px solid #050505;
    box-shadow: inset 0 0 0 1px #6a9fd8; white-space: nowrap;
  }
  .craft-btn:disabled { background: #444; color: #888; cursor: not-allowed; box-shadow: inset 0 0 0 1px #333; }
  .craft-btn.done { background: #2f7a3f; }
  #close-crafting, #close-trading {
    margin-top: 14px; width: 100%; padding: 8px; cursor: pointer; font-family: inherit;
    background: #555; color: #fff; border: 2px solid #050505; font-size: 12px;
  }

  /* Trade hint + panel (reuses .recipe / .craft-btn styles above) */
  #trade-hint {
    position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
    z-index: 20; font-size: 13px; padding: 6px 14px; color: #ffe9a8;
    background: rgba(0,0,0,0.55); display: none;
  }
  #trade-panel {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 40; width: 460px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
    padding: 18px 20px; display: none;
  }
  #trade-panel h2 { margin: 0 0 4px; color: #ffd76a; }
  #trade-panel .sub { font-size: 12px; color: #bbb; margin-bottom: 12px; }

  /* Bed sleep hint (reuses the trade-hint look) */
  #bed-hint {
    position: absolute; top: 65%; left: 50%; transform: translateX(-50%);
    z-index: 20; font-size: 13px; padding: 6px 14px; color: #bcd4ff;
    background: rgba(0,0,0,0.55); display: none;
  }

  /* Scrollable overlays need their own touch-action so the page-wide
     touch-action:none (needed to stop scroll/pinch during gameplay) doesn't
     also block scrolling inside them on a phone. */
  .overlay-box, #crafting-panel, #trade-panel { touch-action: pan-y; }

  /* ============== Mobile / touch controls ============== */
  /* Hidden by default; JS adds .touch-device to <body> when it detects a
     touch-capable device, which is the only thing that reveals these. */
  #mobile-controls { display: none; }
  body.touch-device #mobile-controls { display: block; }
  body.touch-device #hint { display: none; }

  #joystick-zone {
    position: absolute; left: 0; bottom: 95px; width: 46vw; height: 42vh;
    z-index: 25; touch-action: none;
  }
  #joystick-base {
    position: absolute; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px;
    border-radius: 50%; background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.35); display: none; pointer-events: none;
  }
  #joystick-knob {
    position: absolute; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px;
    border-radius: 50%; background: rgba(255,255,255,0.42);
    border: 2px solid rgba(255,255,255,0.65); display: none; pointer-events: none;
  }

  #mobile-action-buttons {
    position: absolute; right: 10px; bottom: 95px; z-index: 26;
    width: 200px; height: 170px; touch-action: none;
  }
  .mbtn {
    position: absolute; border-radius: 50%; cursor: pointer;
    background: rgba(20,18,16,0.75); border: 2px solid rgba(255,255,255,0.45);
    color: #fff; font-size: 11px; font-weight: bold; line-height: 1.15;
    display: flex; align-items: center; justify-content: center; text-align: center;
    -webkit-user-select: none; user-select: none; touch-action: none;
  }
  .mbtn:active, .mbtn.pressed { background: rgba(255,255,255,0.35); }
  #mbtn-mine  { width: 78px; height: 78px; right: 0; bottom: 0; font-size: 12px; background: rgba(150,45,35,0.7); }
  #mbtn-jump  { width: 58px; height: 58px; right: 90px; bottom: 6px; }
  #mbtn-place { width: 58px; height: 58px; right: 2px; bottom: 92px; }

  #mobile-util-buttons {
    position: absolute; top: 92px; right: 12px; z-index: 26;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  }
  .mbtn-util {
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    background: rgba(20,18,16,0.75); border: 2px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 11px; text-align: center;
    -webkit-user-select: none; user-select: none; touch-action: none;
  }
  .mbtn-util:active, .mbtn-util.pressed { background: rgba(255,255,255,0.35); }

  #landscape-tip { display: none; font-size: 11px; color: #ffcf7a; margin-top: 8px; }
  @media (orientation: portrait) and (pointer: coarse) {
    #landscape-tip { display: block; }
  }

  /* Shrink the HUD a bit on small phone screens so it doesn't crowd the
     on-screen touch controls. */
  @media (max-width: 700px), (max-height: 480px) {
    .hotbar-slot { width: 42px; height: 42px; }
    .hotbar-swatch { width: 22px; height: 22px; }
    .hotbar-count { font-size: 10px; }
    #resources { font-size: 11px; padding: 7px 9px; }
    #tool-badge { font-size: 11px; padding: 7px 9px; }
    .overlay-box { padding: 16px 18px; }
    .overlay-box h1 { font-size: 22px; }
    .overlay-box p { font-size: 12px; }
    #mobile-action-buttons { width: 170px; height: 150px; }
    #mbtn-mine { width: 68px; height: 68px; }
    #mbtn-jump, #mbtn-place { width: 50px; height: 50px; }
  }

/* ============== Loading screen ============== */
/* Covers everything while three.min.js (~600KB) and game.js download and
   parse - on a slow mobile connection that can take a moment, and without
   this the page would just sit blank/inert until the Start button's click
   handler is actually attached. */
#loading-screen {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #87ceeb;
  gap: 18px;
}
#loading-screen .logo-img { width: min(70vw, 420px); height: auto; }
#loading-screen .spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.5); border-top-color: #4a7c33;
  animation: spin 0.8s linear infinite;
}
#loading-screen .loading-label { color: #234; font-size: 13px; letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Start-screen logo (replaces the plain text heading) */
.logo-img { display: block; margin: 0 auto 10px; max-width: 100%; height: auto; }

/* ============== Install / fullscreen app buttons ============== */
#app-buttons {
  display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.app-btn {
  padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
  background: #3a6ea5; color: #fff; border: 3px solid #050505;
  box-shadow: inset 0 0 0 2px #6a9fd8;
}
.app-btn:hover { background: #4780bd; }
#install-hint { display: none; font-size: 11px; color: #9ad3ff; margin-top: 8px; }

/* Small in-game fullscreen toggle, top-center - every other HUD corner is
   already taken (resources top-left, tool badge top-right, hotbar/hint
   bottom-center, joystick/buttons bottom corners on touch) */
#fullscreen-toggle {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 21;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: #fff; border-radius: 6px;
  background: rgba(20,18,16,0.55); border: 2px solid rgba(255,255,255,0.35);
}
#fullscreen-toggle:hover, #fullscreen-toggle:active { background: rgba(255,255,255,0.25); }