/* NEUROSCAPE v2 — World Labs 3D 월드 (0.1 alpha) */
:root{
  --bg:#030e16; --cyan:#28e0e8; --ink:#bfe9ee; --mag:#e056b0;
  --line:rgba(40,224,232,.25); --glow:0 0 12px rgba(40,224,232,.45); --gold:#ffd23f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(ellipse at 50% -10%, #07223a 0%, var(--bg) 55%, #01060c 100%);
  color:var(--ink); font:14px/1.5 "Segoe UI",-apple-system,system-ui,sans-serif; min-height:100%; overflow-x:hidden}
.bg-net{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 15% 20%, rgba(40,224,232,.10), transparent 42%),
             radial-gradient(circle at 85% 70%, rgba(224,86,176,.08), transparent 46%)}
header,main,section,details{position:relative;z-index:1}

/* 상단바 */
.topbar{display:flex;align-items:center;gap:24px;padding:16px 26px}
.brand{font-weight:800;letter-spacing:.34em;color:var(--cyan);text-shadow:var(--glow);font-size:20px;text-decoration:none}
.brand:hover{filter:brightness(1.2)}
.search{flex:1;display:flex;align-items:center;max-width:680px;margin:0 auto;
  background:rgba(3,20,33,.7);border:1px solid var(--line);border-radius:22px;padding:4px 6px 4px 18px;
  box-shadow:inset 0 0 18px rgba(40,224,232,.08)}
.search input{flex:1;background:transparent;border:0;color:var(--ink);font-size:14px;outline:none}
.search input::placeholder{color:#5e8a93}
.icon{background:transparent;border:0;color:var(--cyan);font-size:18px;cursor:pointer;width:36px;height:36px;border-radius:50%;transition:.15s}
.icon:hover{background:rgba(40,224,232,.12);box-shadow:var(--glow)}
.rev{color:var(--mag);font-weight:700;letter-spacing:.08em;font-size:11px}

/* 스테이지 */
.stage{padding:4px 26px 0;display:flex;flex-direction:column;gap:14px}
.screen{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#02080e;
  box-shadow:0 0 50px rgba(40,224,232,.12),inset 0 0 80px rgba(0,0,0,.7)}
#worldCanvas{display:block;width:100%;height:62vh;min-height:340px;cursor:crosshair;touch-action:none}
#worldCanvas:active{cursor:grabbing}
/* 소리 입자 클릭 리플 */
.ripple{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
  border:2px solid rgba(40,224,232,.85);pointer-events:none;z-index:4;animation:ripple .65s ease-out forwards}
.ripple.hit{border-color:#ffd23f;box-shadow:0 0 12px rgba(255,210,63,.6)}
@keyframes ripple{from{width:8px;height:8px;opacity:.95}to{width:84px;height:84px;opacity:0}}

/* 투영 오버레이 */
.proj-overlay{position:absolute;inset:0;pointer-events:none}
.proj-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font:10px/1 ui-monospace,monospace;letter-spacing:.18em;color:var(--cyan);text-shadow:var(--glow);
  background:rgba(3,20,33,.55);border:1px solid var(--line);padding:5px 12px;border-radius:20px}
/* single: 살짝 프레임 */
.proj-overlay.single{box-shadow:inset 0 0 0 1px rgba(40,224,232,.06)}
/* cube: 1/3 · 2/3 분할선 + 면 라벨 */
.proj-overlay.cube{background:
  linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(40,224,232,.55) 33.333%, transparent calc(33.333% + 1px)),
  linear-gradient(90deg, transparent calc(66.666% - 1px), rgba(40,224,232,.55) 66.666%, transparent calc(66.666% + 1px))}
.proj-overlay.cube::before{content:"LEFT WALL        FRONT WALL        RIGHT WALL";position:absolute;bottom:10px;left:0;right:0;
  text-align:center;font:9px/1 ui-monospace,monospace;letter-spacing:.1em;color:rgba(40,224,232,.5);white-space:pre}
/* festival: 5분할 심리스 + 좌우 비네트 */
.proj-overlay.festival{background:
  repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(40,224,232,.18) calc(20% - 1px), transparent calc(20% + 1px));
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.proj-overlay.festival::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(2,8,14,.85), transparent 12%, transparent 88%, rgba(2,8,14,.85)),
             radial-gradient(120% 80% at 50% 120%, transparent 60%, rgba(224,86,176,.10))}

.caption{position:absolute;left:14px;right:14px;bottom:34px;font-size:11px;color:#9fc6cd;
  max-height:48px;overflow:hidden;text-shadow:0 1px 4px #000;line-height:1.45}
.status{position:absolute;left:14px;bottom:10px;font-size:11px;color:var(--cyan);text-shadow:var(--glow);letter-spacing:.03em}

/* 컨트롤 */
.controls{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;padding:2px 2px 8px}
.ctl-label{display:block;font:9px/1 ui-monospace,monospace;letter-spacing:.16em;color:#6f9aa2;margin-bottom:8px}
.modes{display:flex;flex-direction:column;gap:8px}
.modes>.mode:first-of-type{margin-top:0}
.mode{display:inline-block;background:rgba(3,20,33,.6);border:1px solid var(--line);color:var(--ink);
  padding:9px 16px;border-radius:7px;cursor:pointer;font-size:13px;letter-spacing:.04em;transition:.15s;margin-right:8px}
.modes{flex-direction:row;flex-wrap:wrap;align-items:center}
.mode:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.mode.active{border-color:var(--cyan);background:rgba(40,224,232,.12);color:#eaffff}
.worlds-wrap{flex:1;min-width:240px}
.worlds{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;background:rgba(3,20,33,.6);border:1px solid var(--line);
  color:var(--ink);padding:5px 12px 5px 5px;border-radius:8px;cursor:pointer;transition:.15s;font-size:12px}
.chip img{width:46px;height:30px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.chip:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.chip.active{border-color:var(--gold);box-shadow:0 0 12px rgba(255,210,63,.5)}
.muted{color:#5e8a93;font-size:12px}

/* instruction & settings */
.instruction{margin:10px 26px 0;border-top:1px solid var(--line);padding:14px 0;color:#7fa9b1}
.instruction h3{margin:0 0 8px;color:var(--cyan);font-size:13px;letter-spacing:.06em}
.instruction ol{margin:0;padding-left:18px;font-size:12px}
.instruction li{margin:3px 0}
.instruction code,.settings code{background:rgba(40,224,232,.1);padding:1px 5px;border-radius:3px;color:var(--cyan);font-size:11px}
.settings{margin:8px 26px 40px;color:#9fc6cd}
.settings summary{cursor:pointer;color:var(--cyan);font-size:12px;letter-spacing:.05em}
.setgrid{margin-top:12px}
.setgrid label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#79a4ac;max-width:420px}
.setgrid input{background:rgba(3,20,33,.7);border:1px solid var(--line);color:var(--ink);padding:6px 8px;border-radius:5px;font-size:12px;outline:none}
.sethint{margin:8px 0 0;font-size:10.5px;color:#6f9aa2;line-height:1.6}

/* embedded inside cosm.os Stage Editor */
body.embed{height:100vh;overflow:hidden;background:#02080e}
body.embed .bg-net,
body.embed .topbar,
body.embed .controls,
body.embed .instruction,
body.embed .settings{display:none}
body.embed .stage{height:100vh;padding:0}
body.embed .screen{height:100vh;border:0;border-radius:0;box-shadow:none}
body.embed #worldCanvas{height:100vh;min-height:0}
body.embed .caption{bottom:30px}
body.embed .status{bottom:10px}