* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --gold:#e9c46a; --ink:#0e0d13; --panel:rgba(14,12,20,.85); --line:rgba(233,196,106,.32); }
html, body { width:100%; height:100%; overflow:hidden; background:#0a0910; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#f4efe6; user-select:none; touch-action:none; }
#scene { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

/* ---- gate ---- */
#gate { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #171326 0%, #0a0910 70%); padding:24px; }
.gate-card { max-width:470px; text-align:center; background:rgba(24,20,34,.75); border:1px solid var(--line);
  border-radius:22px; padding:32px 28px; backdrop-filter:blur(10px); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.gate-logo { font-size:38px; color:var(--gold); filter:drop-shadow(0 0 14px rgba(233,196,106,.6)); }
.gate-card h1 { font-size:32px; margin:4px 0 10px; letter-spacing:1px;
  background:linear-gradient(90deg,#f6e6b8,#e9c46a,#d8a24a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gate-card p { font-size:14.5px; line-height:1.55; color:#d9d2c4; margin-bottom:14px; }
.gate-tips { list-style:none; text-align:left; font-size:13px; color:#b7b0a2; margin:0 auto 18px; max-width:320px; }
.gate-tips li { padding:3px 0 3px 22px; position:relative; }
.gate-tips li::before { content:"✦"; position:absolute; left:0; color:var(--gold); }
#enterBtn { width:100%; padding:15px; font-size:17px; font-weight:700; color:#201a10; cursor:pointer;
  background:linear-gradient(90deg,#f6e6b8,#e9c46a); border:none; border-radius:14px; box-shadow:0 10px 30px rgba(233,196,106,.35); }
#enterBtn:active { transform:translateY(1px); }
.gate-note { font-size:12px; color:#8a8478; margin-top:10px; min-height:16px; }

/* ---- HUD ---- */
#hud { position:fixed; inset:0; z-index:20; pointer-events:none; }
#hud button, #hud input { pointer-events:auto; }
#status { position:fixed; top:10px; left:12px; font-size:11px; color:rgba(255,255,255,.4); }
#roomLabel { position:fixed; top:24px; left:12px; font-size:11.5px; color:var(--gold); font-weight:600; text-shadow:0 2px 8px #000; }
#repBadge { position:fixed; top:8px; right:122px; font-size:12px; color:var(--gold); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px 12px; }

/* sottotitoli con nome */
#subtitle { position:fixed; left:50%; bottom:88px; transform:translateX(-50%); max-width:min(480px,84vw);
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px 20px;
  font-size:14.5px; line-height:1.35; text-align:center; backdrop-filter:blur(6px); box-shadow:0 12px 40px rgba(0,0,0,.5); }
#subName { color:var(--gold); font-weight:700; margin-right:10px; }

#toast { position:fixed; left:50%; top:56px; transform:translateX(-50%); background:rgba(20,30,20,.9);
  border:1px solid rgba(140,220,140,.4); color:#dfffe0; padding:9px 18px; border-radius:12px; font-size:14px; z-index:24; }
#toofar { position:fixed; left:50%; top:96px; transform:translateX(-50%); background:rgba(60,20,20,.85);
  border:1px solid rgba(255,120,120,.4); color:#ffd9d9; padding:8px 16px; border-radius:12px; font-size:13px; }

/* etichette attività NPC (posizionate da JS) */
.npc-tag { position:fixed; display:none; transform:translate(-50%,-100%); white-space:nowrap;
  background:var(--panel); border:1px solid var(--line); color:#f4e6c0;
  padding:4px 11px; border-radius:11px; font-size:12.5px; font-style:italic; pointer-events:none; z-index:19; }

/* minimappa */
#minimap { position:fixed; top:8px; right:8px; width:106px; height:106px; border-radius:14px;
  border:1px solid var(--line); background:rgba(10,9,16,.8); z-index:21; }

/* quest log */
#quests { position:fixed; top:42px; left:10px; width:196px; max-width:46vw; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:9px 11px; z-index:21; }
#quests li.hint { font-size:10.5px; color:#b7b0a2; font-style:italic; padding:1px 0 4px; }
#quests li.sub { font-size:11px; color:#cfc8ba; padding:1px 0 1px 12px; }
#quests li.sub.done { color:#8fce8f; }
#quests h4 { color:var(--gold); font-size:13px; margin-bottom:6px; }
#quests li { list-style:none; font-size:11.5px; padding:3px 0; color:#d9d2c4; }
#quests li.done { color:#8fce8f; text-decoration:line-through; }

/* inventario */
#invBar { position:fixed; left:50%; bottom:58px; transform:translateX(-50%); display:flex; gap:8px; z-index:21; }
.inv-chip { background:var(--panel); border:1px solid var(--line); color:#f4e6c0; border-radius:999px;
  padding:6px 12px; font-size:12.5px; pointer-events:auto; cursor:pointer; }
.inv-chip:hover { border-color:var(--gold); }

/* menu azioni */
#actionMenu { position:fixed; right:10px; bottom:96px; width:246px; max-width:78vw; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:14px 16px; backdrop-filter:blur(8px); z-index:23; pointer-events:auto; }
#actionMenu h3 { color:var(--gold); font-size:16px; margin-bottom:5px; }
#actionMenu p { font-size:12.5px; line-height:1.45; color:#c9c2b4; margin-bottom:9px; max-height:70px; overflow:auto; }
#amButtons { display:flex; flex-direction:column; gap:6px; }
#amButtons button { text-align:left; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#f4efe6; font-size:13px; cursor:pointer; }
#amButtons button:hover { border-color:var(--gold); background:rgba(233,196,106,.12); }
#amButtons button.give { border-color:rgba(140,220,140,.4); }

/* prompt contestuale + barra azione */
#prompt { position:fixed; left:50%; bottom:62px; transform:translateX(-50%); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:13.5px; color:#f4e6c0; z-index:22; }
#prompt b { color:var(--gold); }
#actBar { position:fixed; left:50%; bottom:62px; transform:translateX(-50%); width:230px; height:22px; background:var(--panel);
  border:1px solid var(--line); border-radius:999px; overflow:hidden; z-index:22; }
#actFill { height:100%; width:0%; background:linear-gradient(90deg,#f6e6b8,#e9c46a); transition:width .2s linear; }
#actBar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; text-shadow:0 1px 2px #000; }

/* chat bar */
#chatToggle { position:fixed; left:10px; bottom:10px; width:42px; height:42px; border-radius:50%; z-index:23;
  background:var(--panel); border:1px solid var(--line); font-size:18px; pointer-events:auto; cursor:pointer; }
#chatbar { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:6px; width:min(420px,78vw); z-index:24; }
#chatInput { flex:1; padding:9px 13px; font-size:13.5px !important; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background:var(--panel); color:#fff; font-size:15px; outline:none; }
#chatInput:focus { border-color:var(--gold); }
#sendBtn, #micBtn { padding:9px 12px; border-radius:999px; border:none; font-size:14px; cursor:pointer; font-weight:700; }
#sendBtn { background:linear-gradient(90deg,#f6e6b8,#e9c46a); color:#201a10; }
#micBtn { background:var(--panel); border:1px solid rgba(255,255,255,.15); }
#micBtn.live { background:#d64545; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(214,69,69,.55)} 70%{box-shadow:0 0 0 14px rgba(214,69,69,0)} 100%{box-shadow:0 0 0 0 rgba(214,69,69,0)} }
#help { transition:opacity 1.5s; position:fixed; bottom:4px; left:50%; transform:translateX(-50%); font-size:10.5px; color:rgba(255,255,255,.42); text-align:center; width:92vw; }

/* mobile */
#mobileControls { position:fixed; inset:0; z-index:21; pointer-events:none; }
.joy { position:fixed; display:none; width:124px; height:124px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); pointer-events:none; z-index:20; }
.joy.active { display:block; }
#moveZone { position:fixed; left:0; top:0; width:45%; height:82%; pointer-events:auto; }
.joy-stick { position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:rgba(233,196,106,.75); box-shadow:0 4px 14px rgba(0,0,0,.4); }
#lookZone { position:fixed; right:0; top:0; width:55%; height:72%; pointer-events:auto; }
.btn-col { position:fixed; right:12px; bottom:74px; display:flex; flex-direction:column; gap:10px; pointer-events:auto; }
.rbtn { width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.18); font-size:20px;
  background:var(--panel); color:#fff; }
.rbtn.talk { background:rgba(70,30,90,.8); }
.rbtn.talk.live { background:#d64545; }

.pc-only { display:inline; } .touch-only { display:none; }
body.touch .pc-only { display:none; } body.touch .touch-only { display:inline; }
body.touch #quests { display:none; } /* su mobile: spazio prezioso, toast bastano */
body.touch #actionMenu { right:50%; transform:translateX(50%); bottom:180px; }

/* proposta di missione */
#offer { position:fixed; left:50%; bottom:110px; transform:translateX(-50%); width:min(300px,84vw);
  background:var(--panel); border:1px solid var(--gold); border-radius:16px; padding:12px 14px;
  backdrop-filter:blur(8px); z-index:25; pointer-events:auto; box-shadow:0 14px 44px rgba(0,0,0,.55); }
#offer h3 { color:var(--gold); font-size:14.5px; margin-bottom:4px; }
#offer p { font-size:12px; color:#cfc8ba; line-height:1.4; margin-bottom:9px; }
.offer-btns { display:flex; gap:8px; }
.offer-btns button { flex:1; padding:8px 10px; border-radius:10px; border:none; font-size:13px; font-weight:700; cursor:pointer; }
#offerYes { background:linear-gradient(90deg,#f6e6b8,#e9c46a); color:#201a10; }
#offerNo { background:rgba(255,255,255,.08); color:#d9d2c4; border:1px solid rgba(255,255,255,.16); }

/* su mobile la lista missioni si apre col bottone 📜 */
body.touch #quests.force { display:block !important; }
#questToggle { display:none; }
body.touch #questToggle { display:block; position:fixed; top:120px; right:8px; width:36px; height:36px;
  border-radius:50%; background:var(--panel); border:1px solid var(--line); font-size:16px; z-index:22; pointer-events:auto; }