:root{--ui-bg:rgba(5,6,5,.72);--ui-border:rgba(210,174,65,.35);--ui-gold:#d7b64e;--ui-text:#ece2bd;--ui-muted:#b5a77a;--ui-dark:rgba(0,0,0,.62)}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#050505;color:var(--ui-text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}#world,#particles,#fallback{position:fixed;inset:0;width:100%;height:100%;display:block}#world{cursor:grab}#particles{pointer-events:none;z-index:5;opacity:.96;mix-blend-mode:screen}#world:active{cursor:grabbing}#fallback{display:none;background-position:center;background-size:cover;filter:saturate(.95) contrast(1.05);transform:scale(1.02)}
.topbar{position:fixed;z-index:10;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;transition:opacity .2s}.brand{color:var(--ui-gold);letter-spacing:.08em;font-weight:700;text-shadow:0 0 12px rgba(215,182,78,.35);font-size:clamp(15px,2vw,28px)}.scene-title{margin-top:4px;color:var(--ui-muted);font-size:clamp(12px,1.2vw,15px);text-shadow:0 1px 2px #000}.small{padding:8px 10px;font-size:11px}
.controls{position:fixed;z-index:10;left:18px;bottom:18px;width:min(360px,calc(100vw - 36px));padding:14px;border:1px solid var(--ui-border);background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(10,9,5,.48));backdrop-filter:blur(6px);box-shadow:0 0 34px rgba(0,0,0,.45);transition:opacity .2s}.nav-row{display:flex;gap:8px;margin-bottom:10px}.nav-row button{flex:1}.look-pad{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:42px 42px 42px;gap:6px;margin-bottom:10px}.pad.up{grid-column:2;grid-row:1}.pad.left{grid-column:1;grid-row:2}.pad.center{grid-column:2;grid-row:2}.pad.right{grid-column:3;grid-row:2}.pad.down{grid-column:2;grid-row:3}.auto-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:8px}.speed-label{font-size:11px;color:var(--ui-muted);letter-spacing:.08em;text-transform:uppercase}input[type=range]{width:100%;accent-color:var(--ui-gold)}
button{border:1px solid var(--ui-border);background:rgba(20,16,8,.85);color:var(--ui-text);padding:10px 12px;font:inherit;font-size:12px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;pointer-events:auto}button:hover{background:rgba(70,54,20,.9);border-color:rgba(255,213,93,.55)}button:active{transform:translateY(1px)}button.active{color:#fff;border-color:var(--ui-gold);background:rgba(120,85,20,.45)}.ghost{background:rgba(0,0,0,.45)}.wide{width:100%}.scene-menu{position:fixed;z-index:12;top:78px;right:18px;bottom:18px;width:min(430px,calc(100vw - 36px));overflow:auto;padding:12px;border:1px solid var(--ui-border);background:rgba(3,3,3,.9);backdrop-filter:blur(8px)}.scene-menu button{display:block;width:100%;margin-bottom:6px;text-align:left;color:var(--ui-muted)}.scene-menu button.active{color:#fff;border-color:var(--ui-gold);background:rgba(120,85,20,.35)}.hidden{display:none!important}.ui-hidden .topbar,.ui-hidden .controls,.ui-hidden .help{opacity:0;pointer-events:none}.help{position:fixed;z-index:10;right:18px;bottom:18px;color:rgba(236,226,189,.65);font-size:12px;text-shadow:0 1px 2px #000;transition:opacity .2s}.grain{pointer-events:none;position:fixed;inset:0;z-index:3;opacity:.08;mix-blend-mode:overlay;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.9) 0 1px,transparent 1px),radial-gradient(circle at 80% 70%,rgba(255,255,255,.6) 0 1px,transparent 1px);background-size:3px 3px,5px 5px;animation:grainShift .55s steps(2) infinite}.vignette{pointer-events:none;position:fixed;inset:0;z-index:4;box-shadow:inset 0 0 190px 65px rgba(0,0,0,.78)}
.intro-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 35%,rgba(34,29,13,.92),rgba(0,0,0,.96) 58%,#000 100%);backdrop-filter:blur(7px)}.intro-card{width:min(850px,calc(100vw - 32px));max-height:min(86vh,860px);overflow:auto;border:1px solid rgba(215,182,78,.38);background:linear-gradient(180deg,rgba(9,8,5,.92),rgba(0,0,0,.82));box-shadow:0 0 80px rgba(0,0,0,.8),0 0 34px rgba(215,182,78,.08);padding:clamp(22px,4vw,42px)}.intro-kicker{color:var(--ui-gold);letter-spacing:.16em;font-size:12px;font-weight:700;text-shadow:0 0 12px rgba(215,182,78,.4)}.intro-card h1{margin:10px 0 18px;color:#fff;font-size:clamp(26px,5vw,48px);letter-spacing:.04em}.intro-text{color:rgba(236,226,189,.88);font-family:Georgia,serif;font-size:clamp(15px,1.55vw,18px);line-height:1.58}.intro-text p{margin:0 0 14px}.intro-text strong{color:#fff}.intro-manifesto{margin-top:20px!important;color:var(--ui-gold);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.05em;font-size:.95em}.enter-btn{margin-top:12px;min-width:180px;font-size:14px;border-color:rgba(215,182,78,.6);background:rgba(95,70,20,.5);color:#fff}.intro-overlay.hidden{display:none!important}@keyframes grainShift{from{transform:translate(0,0)}to{transform:translate(-3px,2px)}}@media(max-width:760px){.controls{padding:12px}.help{display:none}.scene-menu{top:92px}}


/* V15 — mobile/interface polish */
.scene-fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 40;
}

.scene-fade.active {
  opacity: 0.82;
}

.controls-toggle {
  display: none;
  position: fixed;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 60;
  border: 1px solid rgba(211, 174, 77, 0.75);
  background: rgba(5, 4, 2, 0.72);
  color: #f1d77e;
  padding: 10px 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font: inherit;
  backdrop-filter: blur(8px);
}

.controls.compact-hidden {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .topbar {
    left: 18px;
    right: 18px;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
  }

  .brand {
    font-size: clamp(18px, 6vw, 30px);
    letter-spacing: 0.18em;
  }

  .scene-title {
    font-size: clamp(13px, 3.6vw, 19px);
    letter-spacing: 0.10em;
  }

  .controls-toggle {
    display: block;
  }

  .controls {
    left: 14px;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
    width: auto;
    max-width: none;
    padding: 12px;
    gap: 10px;
    z-index: 55;
    max-height: 52vh;
    overflow-y: auto;
    background: rgba(4, 3, 1, 0.66);
    backdrop-filter: blur(10px);
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .nav-row {
    gap: 8px;
  }

  .nav-row button,
  .controls button,
  .wide {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 15px;
    letter-spacing: 0.10em;
  }

  .look-pad {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
    max-width: 250px;
    margin: 0 auto;
  }

  .look-pad .pad {
    min-height: 40px;
    padding: 6px;
  }

  .auto-row {
    gap: 7px;
  }

  .speed-label {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  input[type="range"] {
    height: 28px;
  }

  .scene-menu {
    left: 14px;
    right: 14px;
    top: calc(env(safe-area-inset-top, 0px) + 90px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
    max-height: none;
    overflow-y: auto;
  }

  .intro-card {
    width: min(92vw, 760px);
    max-height: 82vh;
    overflow-y: auto;
    padding: 22px;
  }

  .intro-text {
    font-size: 14px;
    line-height: 1.55;
  }
}

@media (max-width: 480px) {
  .controls {
    max-height: 46vh;
  }

  .nav-row button,
  .controls button,
  .wide {
    font-size: 14px;
  }

  .brand {
    max-width: 90vw;
  }
}