html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #000;
        font-family: Arial, sans-serif;
        overflow: hidden;
      }
      #container {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      .info-overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 6px;
        font-size: 12px;
        z-index: 10;
        max-width: 300px;
      }

      #player-inventory {
        margin-top: 10px;
      }
      #player-inventory h4 {
        margin: 0 0 5px 0;
        font-size: 14px;
        color: #ffa726;
      }
      #inventory-list {
        font-style: italic;
        color: #ddd;
      }

      #loading,
      #error {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        z-index: 1000;
      }
      #error {
        display: none;
        background: #111;
        text-align: center;
        padding: 20px;
        line-height: 1.4;
      }

      #editor-panel {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 320px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid #444;
        border-radius: 8px;
        padding: 15px;
        color: #fff;
        font-size: 12px;
        z-index: 100;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        display: none;
      }
      #editor-panel h3 {
        margin: 0 0 15px 0;
        color: #4caf50;
        border-bottom: 1px solid #444;
        padding-bottom: 5px;
      }
      .tool-group {
        margin-bottom: 15px;
      }
      .tool-group h4 {
        margin: 0 0 8px 0;
        color: #ffa726;
        font-size: 11px;
      }

      button {
        background: #4caf50;
        color: white;
        border: none;
        padding: 8px 12px;
        margin: 2px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
        transition: background 0.2s;
      }
      button:hover {
        background: #45a049;
      }
      button.active {
        background: #2196f3;
      }
      button.danger {
        background: #f44336;
      }
      button.danger:hover {
        background: #da190b;
      }

      input,
      textarea,
      select {
        width: 100%;
        box-sizing: border-box;
        padding: 6px;
        margin: 4px 0;
        background: #333;
        color: #fff;
        border: 1px solid #555;
        border-radius: 3px;
        font-size: 11px;
      }
      .checkbox-label {
        display: flex;
        align-items: center;
        margin: 10px 0;
      }
      input[type="checkbox"] {
        width: auto;
        margin-right: 8px;
      }

      .item-list {
        max-height: 150px;
        overflow-y: auto;
        background: #222;
        border: 1px solid #444;
        border-radius: 4px;
        margin-top: 5px;
      }
      .item {
        padding: 8px;
        border-bottom: 1px solid #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .item > span {
        flex-grow: 1;
      }
      .item > div {
        display: flex;
        gap: 5px;
      }

      .modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }
      .modal-content {
        background: #222;
        padding: 20px;
        border-radius: 8px;
        width: 450px;
        max-width: 90vw;
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        max-height: 90vh;
      }

      #alert-modal {
        position: fixed;
        inset: 0;
        background: rgba(9, 9, 9, 0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2000;
      }
      #alert-modal .modal-content {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        color: #222;
        max-width: 400px;
        text-align: center;
      }

      #alert-modal .modal-content p {
        font-size: 22px; /* bigger text */
        line-height: 1.4;
      }

      #alert-modal .modal-content button {
        margin-top: 15px;
        padding: 20px 40px; /* bigger clickable area */
        font-size: 30px; /* bigger label */
        background: #4caf50; /* same button style as rest of game */
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }

      #alert-modal .modal-content button:hover {
        background: #45a049;
      }
      #modal-form,
      #create-modal-form {
        overflow-y: auto;
        flex-grow: 1;
        padding-right: 15px;
        margin-right: -15px;
      }

      .item-fields-container {
        border-top: 1px solid #555;
        margin-top: 10px;
        padding-top: 10px;
        text-align: left;
      }
      #game-menu {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 101;
      }

      /* ==== Bigger "Load world" modal (splash-screen) ==== */
#splash-screen .modal-content {
  width: 50vw;         /* ~half the screen */
  max-width: 50vw;
  min-width: 640px;     /* keeps it usable on desktops */
  max-height: 85vh;     /* tall but not full */
  padding: 32px;        /* larger inner padding */
  border-radius: 16px;  /* softer corners */
}

/* Headline & lead text */
#splash-screen h1 {
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 6px 0;
}
#splash-screen p {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 14px !important;
}

/* The worlds list (select) */
#splash-screen #picker-worlds {
  height: 40vh;         /* makes the list tall & the slider long */
  font-size: 18px;      /* bigger options text */
  padding: 10px;
}

/* Bigger buttons (and keep them tidy in the flex row) */
#splash-screen button {
  font-size: 18px;
  padding: 14px 22px;
  border-radius: 10px;
  flex: 1 1 auto;       /* allow wrap while keeping similar widths */
}

/* Bigger scrollbar for the list (WebKit) */
#splash-screen #picker-worlds::-webkit-scrollbar { width: 14px; }
#splash-screen #picker-worlds::-webkit-scrollbar-track { background: #1a1a1a; }
#splash-screen #picker-worlds::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
  border: 2px solid #1a1a1a;
}
/* Bigger scrollbar for Firefox */
#splash-screen #picker-worlds {
  scrollbar-width: auto;            /* makes it thicker */
  scrollbar-color: #555 #1a1a1a;    /* thumb / track */
}

/* Mobile safety net: fall back to near-full width */
@media (max-width: 900px) {
  #splash-screen .modal-content {
    width: 90vw;
    max-width: 90vw;
    min-width: 0;
  }
  #splash-screen h1 { font-size: 34px; }
  #splash-screen p,
  #splash-screen button,
  #splash-screen #picker-worlds { font-size: 16px; }
}