:root { 
    --bg: #0c0614; 
    --panel: #180a28; 
    --accent: #ff6600; 
    --text: #f3e8ff; 
    --muted: #a892bf; 
    --border: #4a154b; 
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }

  body { 
    margin: 0; 
    font-family: 'Montserrat', sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    background-image: url('/background-spooky.png'); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
  }

  body, input, button, textarea, select {
    font-family: "Montserrat", sans-serif;
  }

  /* Spooky Custom Cursors */
  body {
    cursor: url('/dd_static/cursor.png'), auto;
  }
  a, button, button.primary, [role="button"], .clickable {
    cursor: url('/dd_static/pointer.png'), pointer;
  }
  input, input[type="text"], textarea, [contenteditable="true"], .text, span, p {
    cursor: url('/dd_static/ibeam.png'), text;
  }

  .show_smth_block { display: block; }
  .show_smth_flex { display: flex; }

  #online_users {
    background-color: #6b059b;
  }

  .userCard {
    background-color: #6b059b;
  }

  #map3dPane {
    border: 1px solid var(--border);
    background: #120620;
    padding: 8px;
    margin-top: 8px;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
  }

  #map3dToolbar {
    margin-bottom: 4px;
  }

  #map3dToolbar button {
    margin-right: 4px;
    background: #2a0e45;
    color: #f3e8ff;
    border: 1px solid #6b1d82;
  }

  #map3dCanvas {
    border: 1px solid #7b2cbf;
    background: #0d0318;
    display: block;
  }

  #map3dHelp {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
  }

  .handle-mode-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.6);
  }

  header { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #1a082e; 
    border-bottom: 2px solid var(--accent);
    height: 52px; 
    display: none; 
    align-items: center; 
    gap: 12px; 
    padding: 0 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  }

  header .brand { color: var(--accent); font-weight: 700; text-shadow: 0 0 8px rgba(255, 102, 0, 0.5); }
  header .spacer { flex: 1; }

  .pill { 
    padding: 6px 10px; 
    border-radius: 999px; 
    background: #39114d; 
    color: #ff9933; 
    border: 1px solid #7b2cbf;
    font-size: 12px; 
  }

  input.primary { 
    width: 100%; 
    padding: 10px; 
    margin: 6px 0; 
    background: #0a0412; 
    color: var(--text); 
    border: 1px solid #5e186e; 
    border-radius: 8px; 
  }

  button { 
    padding: 10px; 
    margin: 6px 0; 
    background: #2b0d42; 
    color: var(--text); 
    border: 1px solid #5e186e; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.2s ease;
  }

  button:hover {
    background: #421366;
    border-color: var(--accent);
  }

  button.primary { 
    background: var(--accent); 
    color: #ffffff; 
    border: none; 
    font-weight: 700; 
    cursor: pointer; 
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
  }

  button.primary:hover {
    background: #ff7714;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.7);
  }

  .notice { color: var(--muted); font-size: 12px; }

  /* App layout */
  #app { display: none; height: calc(100% - 52px); }
  #appLayout { display: grid; grid-template-columns: 320px 1fr 420px; grid-template-rows: 1fr; height: 100%; }

  .panel { 
    background: var(--panel); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 12px; 
    display: flex; 
    flex-direction: column; 
    min-height: 0; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  }

  .panel h3 { margin: 0 0 8px; font-size: 16px; color: var(--accent); text-shadow: 0 0 5px rgba(255, 102, 0, 0.3); }

  .list { 
    flex: 1; 
    overflow: auto; 
    border-radius: 8px; 
    background: #090310; 
    border: 1px solid #2e0c38;
    padding: 8px; 
  }

  .row { display: flex; gap: 8px; }

  .log { 
    height: 140px; 
    overflow: auto; 
    background: #090310; 
    border: 1px solid #2e0c38;
    border-radius: 8px; 
    padding: 8px; 
    font-size: 12px; 
    color: #d1b3ea; 
  }

  /* Editor + play */
  #editorArea { display: grid; grid-template-rows: 48px 1fr 220px; gap: 8px; }
  #toolbar { display: flex; align-items: center; gap: 8px; }
  #blocklyArea { position: relative; min-height: 300px; }
  #blocklyDiv { inset: 0; }

  #codeOutput { 
    background: #090310; 
    border: 1px solid #2e0c38;
    border-radius: 8px; 
    padding: 8px; 
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 
    color: #39ff14;
    overflow: auto; 
  }

  #playArea { height: 100%; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

  iframe { 
    width: 100%; 
    height: 100%; 
    border: 2px solid var(--accent); 
    border-radius: 8px;
    background: #08020d; 
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.25);
  }

  /* Chat */
  #chatLog { 
    flex: 1; 
    overflow: auto; 
    background: #090310; 
    border: 1px solid #2e0c38;
    border-radius: 8px; 
    padding: 8px; 
    color: var(--text);
  }

  #chatInput { width: 100%; }

  .webview-container {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    border: none;
    background: #0c0614;
    z-index: 105;
    display: flex;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .toolbar {
    background: #19072e;
    color: #ff9933;
    padding: 10px;
    border-bottom: 1px solid var(--border);
  }

  #editor {
    display: flex;
    height: calc(100vh - 100px);
    width: 100%;
    overflow: hidden;
  }

  #left_sidebar, #right_sidebar {
    flex-shrink: 0;
  }

  #blocklyDiv, #map3dPane, #ui-editor, #test-game {
    flex-grow: 1;
    height: 100%;
    position: relative;
    min-width: 0;
  }

  #map3dCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  #stage { 
    border-radius: 8px; 
    background: #11051f; 
    border: 1px solid var(--accent); 
    width: 50%; 
    height: 65vh; 
    margin-left: 20px; 
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.2);
  }

  #sprites { margin-top: 10px; }
  #pfp { display: none; }

  #avatar-editor {
    padding: 20px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
  }

  #avatar-editor label {
    display: block;
    margin-top: 10px;
    color: #ff9933;
  }

  #avatar-editor select,
  #avatar-editor input[type=color] {
    width: 100%;
    margin-top: 5px;
    background: #090310;
    color: var(--text);
    border: 1px solid #5e186e;
    border-radius: 6px;
    padding: 6px;
  }

  #avatarPreview {
    margin-top: 20px;
    background: #090310;
    border: 1px solid #7b2cbf;
    border-radius: 10px;
  }

  #catalog-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .catalog-item {
    width: 180px;
    padding: 10px;
    border: 2px solid #6b1d82;
    border-radius: 10px;
    background: #150726;
    color: var(--text);
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }

  .catalog-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
  }

  .catalog-item button {
    margin-top: 10px;
    padding: 6px 12px;
    background: #39ff14;
    border: none;
    color: #0c0614;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
  }

  .catalog-item button:disabled {
    background: #3e3845;
    color: #888;
    cursor: not-allowed;
  }

  #giftcard {
    padding: 20px;
    color: var(--text);
  }

  #giftcard input {
    width: 250px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 6px;
    border: 1px solid #5e186e;
    background: #090310;
    color: var(--text);
  }

  #giftcard button {
    padding: 10px 20px;
    margin-left: 10px;
    background: var(--accent);
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
  }

  #giftcard_status {
    margin-top: 15px;
    font-size: 16px;
    color: #ff9933;
  }

  #admin-giftcards input {
    padding: 10px;
    width: 250px;
    border-radius: 6px;
    border: 1px solid #5e186e;
    background: #090310;
    color: var(--text);
  }

  #admin-giftcards button {
    padding: 10px 20px;
    margin-left: 10px;
    background: #7b2cbf;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
  }

  .side-menu {
    position: fixed;
    left: 0;
    top: 52px;
    width: 200px;
    height: calc(100vh - 52px);
    background-color: #120521;
    border-right: 1px solid #320d40;
    display: none;
    flex-direction: column;
    padding-top: 20px;
    z-index: 5;
    overflow-y: auto;
  }

  @media (min-width: 1400px) {
    .webview-container {
      width: 60%;
      height: 80vh;
      border: none;
      background: #0c0614;
      position: static;
      display: block;
      z-index: 105;
    }

    .side-menu {
      position: fixed;
      left: 0;
      top: 52px;
      width: 200px;
      height: calc(100vh - 52px);
      background-color: #120521;
      display: flex;
      flex-direction: column;
      padding-top: 20px;
      z-index: 5;
      overflow-y: auto;
    }

    .main_pages {
      position: fixed;
      left: 200px;
      top: 52px;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      padding: 20px;
      box-sizing: border-box;
      background: var(--bg);
    }
  }

  .side-menu button {
    background: #1b082e;
    border: none;
    border-left: 3px solid transparent;
    color: var(--text);
    padding: 15px 20px;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    width: 90%;
    margin: 4px auto;
    border-radius: 0 8px 8px 0;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: left;
  }

  .side-menu button:hover {
    background: #2a0c47;
    border-left: 3px solid var(--accent);
    color: #ff9933;
  }

  #admin_gift_status {
    margin-top: 15px;
    color: #39ff14;
    text-shadow: 0 0 5px #39ff14;
  }

  #toolbar button {
    background: #2b0d42;
    color: var(--text);
    border: 1px solid #5e186e;
  }

  #toptoolbar button {
    background: #140524;
    border: 0px;
    color: #ff9933;
  }

  .block-list-item.selected {
    background: #4a125e;
    border-left: 4px solid var(--accent);
    color: #ffffff;
  }

  .game_btn {
    background-color: #1d0933;
    color: var(--text);
    border-radius: 5px;
    box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--accent);
  }

  .main_pages {
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    background: var(--bg);
  }

  .cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #18062b;
    border-top: 2px solid var(--accent);
    color: var(--text);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    display: none;
  }

  .banner-buttons button {
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    font-weight: bold;
  }

  #acceptBtn { background: #39ff14; color: #0c0614; }
  #rejectBtn { background: #ff0055; color: white; }

  /* Login gate */
  #loginGate { 
    max-width: 420px; 
    margin: 80px auto; 
    background: rgba(20, 8, 33, 0.95); 
    border: 2px solid var(--accent);
    border-radius: 8px; 
    padding: 16px; 
    position: fixed; 
    top: 0px; 
    right: 130px; 
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.4);
  }

  #loginGate h2 { 
    margin: 0 0 12px; 
    color: var(--accent); 
    font-size: 18px; 
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
  }

  #loginGate button {
    width: 100%; 
    background-color: var(--accent); 
    color: #ffffff;
    font-weight: bold;
    border: none;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
  }

  #loginGate button:hover {
    background-color: #ff7714;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.7);
  }

  #loginGate input {
    background-color: #090310; 
    color: var(--text); 
    border: 1px solid #7b2cbf; 
    border-radius: 6px;
  }