:root {
    --accent: #00e5a0;
    --accent-glow: rgba(0,229,160,0.3);
    --bg-dark: #0a0c12;
    --text-primary: #e0e8f0;
    --text-muted: rgba(255,255,255,0.35);
  }
  @font-face {
    font-family:"Azim Medium";
    src:url("../shared/assets/fonts/azim-medium.otf") format("opentype");
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }
  * {
    margin:0; padding:0; box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
  }
  input,
  textarea {
    user-select:text;
    -webkit-user-select:text;
  }
  body { overflow:hidden; background:#000; font-family:'Rajdhani',sans-serif; color:var(--text-primary); }
  canvas { display:block; }
  #canvas-container { width:100vw; height:100vh; position:relative; }

  /* ── Loading Screen ── */
  #loading-overlay {
    position:fixed; inset:0; z-index:9999;
    background: linear-gradient(135deg, #0a0c12 0%, #121620 50%, #0a0c12 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition: opacity 0.6s ease, visibility 0.6s;
  }
  #loading-overlay.hidden { display:none; }

  .load-logo {
    font-family:'Orbitron',sans-serif; font-size:2.2rem; font-weight:900;
    letter-spacing:6px; text-transform:uppercase;
    background: linear-gradient(135deg, var(--accent), #00b8ff);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-bottom:8px;
  }
  .load-sub {
    font-family:'Rajdhani',sans-serif; font-size:0.85rem; color:var(--text-muted);
    letter-spacing:3px; text-transform:uppercase; margin-bottom:40px;
  }
  .load-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius:16px; padding:32px 40px;
    text-align:center; backdrop-filter:blur(20px);
    max-width:520px; width:92%;
  }
  .load-card h3 {
    font-family:'Orbitron',sans-serif; font-size:0.7rem; letter-spacing:2px;
    text-transform:uppercase; color:var(--accent); margin-bottom:16px;
  }
  .load-card p {
    font-size:0.75rem; color:var(--text-muted); margin-bottom:16px; line-height:1.6;
  }
  .load-zones { display:flex; gap:12px; margin-bottom:12px; }
  .load-drop {
    border:2px dashed rgba(255,255,255,0.12); border-radius:12px;
    padding:20px 16px; cursor:pointer; transition:all 0.3s;
    position:relative; overflow:hidden; flex:1; text-align:center;
  }
  .load-drop:hover { border-color:var(--accent); background:rgba(0,229,160,0.04); }
  .load-drop.dragover { border-color:var(--accent); background:rgba(0,229,160,0.08); }
  .load-drop.loaded { border-color:var(--accent); border-style:solid; background:rgba(0,229,160,0.06); }
  .load-drop.loaded .drop-icon { color:var(--accent); }
  .load-drop .drop-icon { font-size:1.6rem; color:rgba(255,255,255,0.25); display:block; margin-bottom:8px; transition:color 0.3s; }
  .load-drop span { font-size:0.7rem; color:var(--text-muted); display:block; }
  .load-drop small { font-size:0.55rem; color:rgba(255,255,255,0.2); display:block; margin-top:4px; }
  .load-drop .drop-check { display:none; position:absolute; top:8px; right:10px; font-size:0.8rem; color:var(--accent); }
  .load-drop.loaded .drop-check { display:block; }
  .load-drop .drop-filename {
    display:none; font-size:0.55rem; color:var(--accent); margin-top:6px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:'Orbitron',sans-serif; letter-spacing:0.5px;
  }
  .load-drop.loaded .drop-filename { display:block; }
  .load-drop.ui-zone { border-color:rgba(167,139,250,0.2); }
  .load-drop.ui-zone:hover { border-color:#a78bfa; background:rgba(167,139,250,0.04); }
  .load-drop.ui-zone.dragover { border-color:#a78bfa; background:rgba(167,139,250,0.08); }
  .load-drop.ui-zone.loaded { border-color:#a78bfa; border-style:solid; background:rgba(167,139,250,0.06); }
  .load-drop.ui-zone.loaded .drop-icon, .load-drop.ui-zone.loaded .drop-check,
  .load-drop.ui-zone.loaded .drop-filename { color:#a78bfa; }
  /* Fully hide file inputs — no tooltip, no text, no interaction leak */
  .load-drop input[type="file"] {
    position:absolute; inset:0; opacity:0; cursor:pointer;
    width:100%; height:100%; font-size:0 !important;
    -webkit-appearance:none; appearance:none;
  }
  .load-start-wrap { text-align:center; margin-top:4px; }
  #btn-start-game {
    display:none; padding:12px 48px; border-radius:10px; border:none;
    background:linear-gradient(135deg, var(--accent) 0%, #00b8ff 100%);
    color:#000; font-family:'Orbitron',sans-serif; font-size:0.75rem;
    font-weight:700; letter-spacing:3px; text-transform:uppercase;
    cursor:pointer; transition:all 0.3s; box-shadow:0 0 20px rgba(0,229,160,0.3);
  }
  #btn-start-game:hover { transform:scale(1.04); box-shadow:0 0 30px rgba(0,229,160,0.5); }
  #btn-start-game.visible { display:inline-block; animation:fadeInUp 0.4s ease; }
  @keyframes fadeInUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  .load-or {
    font-size:0.5rem; color:rgba(255,255,255,0.15); margin:6px 0;
    font-family:'Orbitron',sans-serif; letter-spacing:2px; text-align:center;
  }
  @media (max-width:500px) {
    .load-zones { flex-direction:column; }
  }

  #loading-status {
    margin-top:20px; font-family:'Orbitron',sans-serif; font-size:0.6rem;
    letter-spacing:1px; color:var(--accent); display:none;
  }

  .load-progress {
    width:100%; height:3px; background:rgba(255,255,255,0.06);
    border-radius:2px; margin-top:12px; overflow:hidden; display:none;
  }
  .load-progress-bar {
    height:100%; background:linear-gradient(90deg, var(--accent), #00b8ff);
    border-radius:2px; width:0%; transition:width 0.3s;
  }

  /* ── Game HUD ── */
  #game-hud {
    position:fixed; top:0; left:0; right:0;
    display:flex; justify-content:flex-end; align-items:flex-start;
    padding:12px 16px; z-index:100; pointer-events:none;
  }
  #game-hud > * { pointer-events:auto; }

  .hud-panel {
    background:rgba(10,12,18,0.7); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.06); border-radius:10px;
    padding:8px 14px;
  }

  #hud-clock {
    text-align:right;
  }
  #clock-time {
    font-family:'Orbitron',sans-serif; font-size:1rem;
    font-weight:700; color:var(--text-primary); letter-spacing:2px;
  }
  #clock-date {
    font-size:0.55rem; color:var(--text-muted); margin-top:1px;
    font-family:'Orbitron',sans-serif; letter-spacing:1px;
  }

  /* ── Toast ── */
  #toast-container {
    position:fixed; top:60px; left:50%; transform:translateX(-50%);
    z-index:200; display:flex; flex-direction:column; gap:6px; align-items:center;
  }
  .game-toast {
    background:rgba(10,12,18,0.85); backdrop-filter:blur(12px);
    border:1px solid rgba(0,229,160,0.2); border-radius:8px;
    padding:6px 16px; font-size:0.7rem; color:var(--accent);
    display:flex; align-items:center; gap:6px;
    animation: toast-in 0.3s ease, toast-out 0.3s ease 2s forwards;
  }
  .game-toast.error { color:#ff6b6b; border-color:rgba(255,107,107,0.2); }
  @keyframes toast-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
  @keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }
  @keyframes dialog-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

  /* ── HUD Buttons ── */
  .hud-btn {
    width:26px; height:26px; border:1px solid rgba(255,255,255,0.1);
    border-radius:6px; background:rgba(255,255,255,0.05); color:var(--text-muted);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:0.6rem; transition:all 0.2s; padding:0;
  }
  .hud-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(0,229,160,0.08); }
  .hud-btn.active { color:var(--accent); border-color:var(--accent); }

  /* ── Camera Nav Bar ── */
  #camera-nav {
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
    z-index:100; display:flex; align-items:center; justify-content:center;
  }
  #camera-nav-inner {
    display:flex; align-items:center; gap:4px;
    background:rgba(10,12,18,0.75); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.07); border-radius:12px;
    padding:5px 8px;
  }
  .cam-nav-btn {
    display:flex; align-items:center; gap:5px;
    padding:6px 12px; border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; background:transparent; color:var(--text-muted);
    cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:0.68rem;
    font-weight:600; transition:all 0.2s; white-space:nowrap;
  }
  .cam-nav-btn i { font-size:0.7rem; }
  .cam-nav-btn:hover { border-color:rgba(0,204,255,0.4); color:#ccc; background:rgba(255,255,255,0.04); }
  .cam-nav-btn.active {
    border-color:rgba(0,204,255,0.6); color:#00ccff;
    background:rgba(0,204,255,0.1); box-shadow:0 0 10px rgba(0,204,255,0.15);
  }
  .cam-nav-arrow {
    width:28px; height:28px; border:1px solid rgba(255,255,255,0.08);
    border-radius:7px; background:transparent; color:var(--text-muted);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:0.7rem; transition:all 0.2s; padding:0; flex-shrink:0;
  }
  .cam-nav-arrow:hover { border-color:rgba(0,204,255,0.4); color:#00ccff; background:rgba(255,255,255,0.04); }
  /* ── Game UI Overlay ── */
  #game-ui-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:100; overflow:hidden;
  }
  .gui-el {
    position:absolute; pointer-events:auto;
    transition: opacity 0.2s;
  }
  .gui-el.gui-hidden { display:none; }
  .gui-progressbar-track {
    width:100%; overflow:hidden; position:relative;
  }
  .gui-progressbar-fill {
    height:100%; transition:width 0.3s ease;
  }
  .gui-progressbar-label {
    position:absolute; left:6px; top:50%; transform:translateY(-50%);
    font-family:'Rajdhani',sans-serif; font-size:0.55rem; font-weight:700;
    color:rgba(255,255,255,0.8); text-shadow:0 1px 2px rgba(0,0,0,0.5); z-index:1;
  }
  /* Responsive game UI */
  @media (max-width:768px) {
    .gui-el.gui-mobile-hidden { display:none !important; }
  }

  /* KADKOT static main menu */
  #kadkot-main-menu {
    position:fixed; inset:0; z-index:10050;
    display:block;
    background:#e8ecd7;
    font-family:"Azim Medium",'Rajdhani',sans-serif; color:#30291f;
    overflow:hidden;
  }
  body.kadkot-static-menu #loading-overlay { display:none !important; }
  #kadkot-main-menu.hidden { display:none; }
  .kadkot-main-background-video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:0;
    pointer-events:none;
  }
  .kadkot-tag {
    position:absolute; top:16px; left:16px;
    font-size:1rem; font-weight:700; letter-spacing:0;
    z-index:1;
  }
  .kadkot-panel {
    position:absolute;
    top:54%; right:clamp(52px,7vw,96px);
    transform:translateY(-50%);
    width:clamp(360px,31vw,500px);
    min-height:clamp(410px,36vw,565px);
    padding:clamp(32px,3vw,46px) clamp(42px,4vw,62px) clamp(34px,3vw,48px);
    background:#fff;
    border-radius:clamp(28px,3vw,42px);
    box-shadow:0 24px 44px rgba(0,0,0,0.34);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    z-index:1;
  }
  .kadkot-title {
    margin:0 0 clamp(22px,2.2vw,34px);
    color:#2f2a22;
    font:900 clamp(3.25rem,5.9vw,5.8rem)/0.9 "Azim Medium",'Rajdhani',sans-serif;
    letter-spacing:0;
  }
  .kadkot-subtitle {
    margin:0 0 clamp(30px,3vw,46px);
    color:#302a24;
    font:800 clamp(1.45rem,2.15vw,2.25rem)/1.18 "Azim Medium",'Rajdhani',sans-serif;
    letter-spacing:0;
  }
  .kadkot-menu-actions {
    width:100%;
    display:flex; flex-direction:column; gap:clamp(12px,1.25vw,18px);
  }
  .kadkot-menu-btn {
    width:100%;
    min-height:clamp(46px,4vw,64px); border:0; border-radius:999px;
    color:#fff; font:800 clamp(1rem,1.45vw,1.35rem) "Azim Medium",'Rajdhani',sans-serif;
    text-transform:lowercase; cursor:pointer;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,0.16);
    transition:transform 0.16s ease, filter 0.16s ease;
  }
  .kadkot-menu-btn:hover { transform:translateY(-1px); filter:brightness(1.06); }
  .kadkot-menu-btn:active { transform:translateY(1px); }
  .kadkot-menu-btn.primary { background:#9b9f25; }
  .kadkot-menu-btn.secondary { background:#2f3d0d; }
  .kadkot-menu-btn.tertiary { background:#a8ad2f; }
  .kadkot-menu-status {
    min-height:16px; text-align:center; color:#5a2f16;
    font-size:0.78rem; font-weight:700;
  }
  @media (max-width:760px) {
    #kadkot-main-menu {
      background-position:38% center;
    }
    .kadkot-tag { top:12px; left:12px; font-size:0.9rem; }
    .kadkot-panel {
      top:auto; right:50%; bottom:18px; transform:translateX(50%);
      width:min(92vw,420px);
      min-height:auto;
      padding:30px 38px 34px;
    }
    .kadkot-title { font-size:3.4rem; margin-bottom:20px; }
    .kadkot-subtitle { font-size:1.45rem; margin-bottom:28px; }
    .kadkot-menu-actions { gap:10px; }
    .kadkot-menu-btn { min-height:44px; font-size:1rem; }
  }

@keyframes exp-spin{to{transform:rotate(360deg)}}

@keyframes exp-dot{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}