/* 0vunque: dark, neon, faceted. The HUD is sized by --hud (Impostazioni › Dimensione dei comandi), kept off the
   notch and the home bar by the safe areas, and laid out for two thumbs: the left one flies (the joystick lands where
   it touches), the right one looks round and reaches up / down / fast, talk, chat and the emotes. */
:root {
  --bg: #05030d;
  --panel: rgba(11, 8, 26, 0.94);
  --panel-2: rgba(30, 22, 62, 0.92);
  --glass: rgba(14, 10, 34, 0.58);
  --line: rgba(140, 220, 255, 0.26);
  --line-2: rgba(140, 220, 255, 0.12);
  --text: #edf5ff;
  --dim: #a3aed0;
  --accent: #7fe8ff;
  --accent-2: #ff7ad9;
  --danger: #ff6b7a;
  --ok: #7dffb0;
  --hud: 1;
  --kb: 0px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --b: calc(52px * var(--hud));
  --b-small: calc(46px * var(--hud));
  --b-big: calc(74px * var(--hud));
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: none;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- over the Navis: names, bubbles */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 650; letter-spacing: .01em;
  color: var(--c, #fff); padding: 1px 7px; border-radius: 9px; background: rgba(5, 3, 13, .42);
  text-shadow: 0 0 6px rgba(0, 0, 0, .9); will-change: transform; }
.label.host { --c: var(--accent-2); }
.label.portal { font-size: 13px; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.label.talk::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok); vertical-align: 1px; }
.bubble { position: absolute; left: 0; top: 0; max-width: min(240px, 70vw); white-space: normal; padding: 6px 11px;
  border-radius: 14px 14px 14px 4px; background: rgba(15, 10, 35, .9); border: 1px solid var(--line); font-size: 14px;
  line-height: 1.3; box-shadow: 0 2px 14px rgba(0, 0, 0, .45); will-change: transform; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.round { width: var(--b); height: var(--b); border-radius: 50%; border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 0;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); transition: background .12s, border-color .12s, transform .08s; }
.round.small { width: var(--b-small); height: var(--b-small); }
.round.big { width: var(--b-big); height: var(--b-big); }
.round.big svg { width: calc(30px * var(--hud)); height: calc(30px * var(--hud)); }
.round:active, .round.on { background: rgba(127, 232, 255, .3); border-color: var(--accent); transform: scale(.96); }

#menu-btn { position: absolute; left: calc(12px + var(--safe-l)); top: calc(12px + var(--safe-t)); }
#status { position: absolute; left: calc(20px + var(--b) + var(--safe-l)); top: calc(12px + var(--safe-t) + (var(--b) - 34px) / 2);
  height: 34px; display: flex; gap: 7px; align-items: center; padding: 0 12px 0 11px; border-radius: 17px;
  border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
#status svg { width: 17px; height: 17px; color: var(--dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
#host-badge { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 8px; background: var(--accent-2); color: #1a0520; letter-spacing: .04em; }
#mic-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #03140b; }
#mic-badge svg { width: 14px; height: 14px; color: #03140b; stroke-width: 2.4; }

/* the last chat lines: over the joystick, newest at the bottom */
#ticker { position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(196px * var(--hud) + var(--safe-b));
  width: min(62vw, 340px); display: flex; flex-direction: column; gap: 4px; pointer-events: none !important; }
#ticker div { align-self: flex-start; max-width: 100%; background: rgba(8, 5, 22, .62); padding: 4px 10px; border-radius: 11px;
  font-size: 13.5px; animation: fade 9s forwards; overflow-wrap: anywhere; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#ticker b { color: var(--accent); font-weight: 650; }
@keyframes fade { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }

/* the stick: where the left thumb lands (its rest place shown faintly) */
#stick-zone { position: absolute; left: 0; bottom: 0; width: 46vw; height: 58%; touch-action: none; }
#stick-base { position: absolute; width: calc(128px * var(--hud)); height: calc(128px * var(--hud));
  margin: calc(-64px * var(--hud)) 0 0 calc(-64px * var(--hud)); border-radius: 50%; border: 1px solid var(--line);
  background: radial-gradient(circle, rgba(127, 232, 255, .12), rgba(127, 232, 255, .02) 70%);
  left: calc(86px * var(--hud) + var(--safe-l)); top: calc(100% - 104px * var(--hud) - var(--safe-b)); opacity: .5; transition: opacity .2s; }
#stick-base.active { opacity: 1; transition: none; }
#stick-knob { position: absolute; left: 50%; top: 50%; width: calc(56px * var(--hud)); height: calc(56px * var(--hud));
  margin: calc(-28px * var(--hud)) 0 0 calc(-28px * var(--hud)); border-radius: 50%; background: rgba(127, 232, 255, .32);
  border: 1px solid var(--accent); box-shadow: 0 0 18px rgba(127, 232, 255, .45); }
#look-zone { position: absolute; right: 0; top: 0; width: 54vw; height: 100%; touch-action: none; }

/* the right thumb: up, down, fast over the corner; talk in the corner, chat and emotes beside it */
#fly-buttons { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(32px + var(--b-big) + 18px * var(--hud) + var(--safe-b));
  display: flex; flex-direction: column; gap: calc(12px * var(--hud)); align-items: center; width: var(--b-big); }
#action-buttons { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); display: flex;
  gap: calc(12px * var(--hud)); align-items: center; }
#mic-btn { position: relative; }
#mic-btn .slash { display: none; }
#mic-btn.on { background: rgba(125, 255, 176, .3); border-color: var(--ok); box-shadow: 0 0 24px rgba(125, 255, 176, .55); }
#mic-btn.off, #mic-btn.paused { opacity: .55; }
#mic-btn.off .slash, #mic-btn.paused .slash { display: inline; }
#mic-btn.vad:not(.paused) { border-color: var(--ok); }
#mic-ring { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; transform: scale(calc(.9 + var(--lv, 0) * .25));
  transition: opacity .1s; pointer-events: none; }
#mic-btn.on #mic-ring { opacity: calc(.3 + var(--lv, 0) * .7); }
#emote-wheel { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(36px + var(--b-big) + var(--safe-b)); display: grid;
  grid-template-columns: repeat(3, calc(64px * var(--hud))); gap: 8px; padding: 10px; border-radius: 20px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
#emote-wheel button { height: calc(62px * var(--hud)); border-radius: 15px; border: 1px solid var(--line-2); background: var(--panel-2);
  display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 0; cursor: pointer; }
#emote-wheel button span { font-size: calc(24px * var(--hud)); line-height: 1; }
#emote-wheel button small { font-size: 11px; color: var(--dim); }
#emote-wheel button:active { border-color: var(--accent); }

#chat-bar { position: absolute; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: calc(10px + var(--safe-b) + var(--kb));
  display: flex; gap: 8px; padding: 7px; border-radius: 28px; background: var(--panel); border: 1px solid var(--accent);
  box-shadow: 0 0 22px rgba(127, 232, 255, .25); max-width: 640px; margin: 0 auto; }
#chat-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; padding: 0 12px;
  -webkit-user-select: text; user-select: text; }
body.chatting #action-buttons, body.chatting #fly-buttons, body.chatting #stick-base, body.chatting #emote-wheel { display: none; }
body.emoting #fly-buttons { visibility: hidden; }

/* the hint (connecting, tap for sound): in the middle of the sky; the toasts: under the top row */
#hint { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); padding: 10px 18px; border-radius: 22px; background: var(--panel);
  border: 1px solid var(--line); font-size: 15px; text-align: center; max-width: 84vw; pointer-events: none; z-index: 4;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .45); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { border-color: var(--accent); box-shadow: 0 0 24px rgba(127, 232, 255, .25); } }
#toast { position: fixed; left: 50%; top: calc(76px * var(--hud) + var(--safe-t)); transform: translate(-50%, -6px); padding: 9px 16px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--line); opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; z-index: 9; font-size: 14px; max-width: 86vw; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#fps { position: fixed; right: calc(12px + var(--safe-r)); top: calc(12px + var(--safe-t)); max-width: calc(100vw - 240px); text-align: right;
  font: 11.5px/1.35 ui-monospace, monospace; color: var(--dim); pointer-events: none; text-shadow: 0 0 4px #000; }

/* ---------------------------------------------------------------- the menu */
#drawer { position: fixed; left: 0; top: 0; bottom: 0; width: min(400px, 100vw); background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: var(--safe-t) 0 0 var(--safe-l); z-index: 5;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); touch-action: pan-y; box-shadow: 8px 0 40px rgba(0, 0, 0, .45);
  animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(-24px); opacity: 0; } }
#drawer header { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; min-height: 64px; }
#drawer header b { flex: 1; font-size: 19px; font-weight: 750; letter-spacing: .01em; }
#drawer-back:not([hidden]) + b { margin-left: 0; }
#page { flex: 1; overflow-y: auto; padding: 2px 16px calc(28px + var(--safe-b)); -webkit-overflow-scrolling: touch; touch-action: pan-y;
  overscroll-behavior: contain; }
#page h3 { margin: 22px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 750; }
#page h3:first-child { margin-top: 6px; }
#page p { color: var(--dim); margin: 6px 0; }
#page p.hint { font-size: 13px; }
#page > input[type=text] { width: 100%; }
#page input[type=text] { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; outline: 0; }
#page input[type=text]:focus { border-color: var(--accent); }

/* the entries */
.me-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 2px 0 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(127, 232, 255, .1), rgba(255, 122, 217, .08)); border: 1px solid var(--line-2); }
.me-card i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); flex: none; }
.me-card div { display: flex; flex-direction: column; }
.me-card b { font-size: 16px; }
.me-card small { color: var(--dim); }
.entries { display: flex; flex-direction: column; gap: 8px; }
.entry { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border-radius: 16px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03); text-align: left; cursor: pointer; }
.entry:active, .entry:hover { border-color: var(--accent); background: rgba(127, 232, 255, .07); }
.entry > svg:first-child { width: 26px; height: 26px; color: var(--accent); }
.entry span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.entry b { font-size: 16px; font-weight: 650; }
.entry small { color: var(--dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .chev { width: 18px; height: 18px; color: var(--dim); }

/* the controls of the pages */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.row > label:first-child { flex: 1; min-width: 0; }
.row input[type=range] { width: 44%; flex: none; }
.row select { width: 50%; padding: 9px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; }
.row output { width: 46px; flex: none; text-align: right; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 30px; background: transparent; margin: 0; touch-action: pan-x; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--p, 50%), rgba(255, 255, 255, .14) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: #0b0820; border: 2px solid var(--accent); box-shadow: 0 0 10px rgba(127, 232, 255, .55); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #0b0820; border: 2px solid var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0 10px; }
.chips button { min-height: 38px; padding: 7px 13px; border-radius: 19px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--dim); cursor: pointer; }
.chips button.on { background: var(--panel-2); color: var(--text); border-color: var(--accent); box-shadow: 0 0 12px rgba(127, 232, 255, .25); }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; padding: 6px 0 12px; align-items: center; }
.swatches button, .swatches .pick { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12);
  padding: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.swatches button.on, .swatches .pick.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--c); }
.swatches .pick { background: conic-gradient(#ff7ad9, #ffd166, #8aff80, #7fe8ff, #b58cff, #ff7ad9); overflow: hidden; }
.swatches .pick::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .3); }
.swatches .pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.switch { position: relative; width: 48px; height: 28px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 14px; background: #2a2545; border: 1px solid var(--line-2); transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; border-radius: 50%; background: #cfd8f0; transition: .2s; }
.switch input:checked + span { background: var(--accent); box-shadow: 0 0 12px rgba(127, 232, 255, .4); }
.switch input:checked + span::before { transform: translateX(20px); background: #062030; }
.btn { min-height: 40px; padding: 9px 15px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.btn:active { border-color: var(--accent); }
.btn.accent { border-color: var(--accent); color: var(--accent); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.small { min-height: 34px; padding: 5px 11px; font-size: 13px; border-radius: 11px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.meter { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 4px 0 8px; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--ok), var(--accent)); }
.meter b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.log { display: flex; flex-direction: column; gap: 6px; }
.log div { padding: 7px 11px; border-radius: 11px; background: rgba(255, 255, 255, .04); overflow-wrap: anywhere; }
.log b { color: var(--accent); }
form.send { position: sticky; bottom: calc(-28px - var(--safe-b)); display: flex; gap: 8px; padding: 12px 0 calc(16px + var(--safe-b));
  background: linear-gradient(transparent, var(--panel) 30%); }
form.send input { flex: 1; min-width: 0; }
.person { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.person i { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 8px var(--c); }
.person.host i { --c: var(--accent-2); }
.person span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person small { color: var(--dim); font-variant-numeric: tabular-nums; }
.link { color: var(--accent); }
kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; font-family: inherit; }

/* the menu open: the HUD steps aside (looking round still works: Personalizza turns round your Navi) */
body.menu-open #hud > *:not(#look-zone), body.menu-open #ticker { display: none; }
body.menu-open #look-zone { width: 100vw; }
body.menu-open #toast { top: auto; bottom: calc(20px + var(--safe-b)); transform: translate(-50%, 6px); }
body.menu-open #toast.show { transform: translate(-50%, 0); }

/* a phone held upright: the menu is the whole screen, Personalizza a sheet under your Navi */
@media (max-width: 720px) and (orientation: portrait) {
  #drawer { width: 100vw; border-right: 0; }
  #drawer.sheet { top: auto; height: 60%; height: 60dvh; border-radius: 24px 24px 0 0; border-top: 1px solid var(--line); padding-top: 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); animation: rise .2s ease-out; }
  #drawer.sheet header { min-height: 56px; padding-top: 6px; }
  #drawer.sheet header::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 2px; background: rgba(255, 255, 255, .22); }
  @keyframes rise { from { transform: translateY(30px); opacity: 0; } }
}

/* ---------------------------------------------------------------- the overlay (thrown away, the portal, errors) */
#overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(3, 2, 10, .55); z-index: 8; }
#overlay .card { padding: 24px 30px; border-radius: 22px; background: var(--panel); border: 1px solid var(--accent); text-align: center;
  max-width: 86vw; box-shadow: 0 0 40px rgba(127, 232, 255, .2); }
#overlay-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
#overlay-text { color: var(--dim); font-size: 16px; font-variant-numeric: tabular-nums; }
#overlay-btn { margin-top: 16px; }
body.shake #view { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(6px, -4px); } 40% { transform: translate(-5px, 3px); }
  60% { transform: translate(4px, 2px); } 80% { transform: translate(-3px, -2px); } }

/* lefty: the stick on the right, the buttons on the left */
body.lefty #stick-zone { left: auto; right: 0; }
body.lefty #stick-base { left: auto; right: calc(86px * var(--hud) + var(--safe-r)); margin: calc(-64px * var(--hud)) calc(-64px * var(--hud)) 0 0; }
body.lefty #look-zone { right: auto; left: 0; }
body.lefty #fly-buttons { right: auto; left: calc(16px + var(--safe-l)); }
body.lefty #action-buttons { right: auto; left: calc(16px + var(--safe-l)); flex-direction: row-reverse; }
body.lefty #emote-wheel { right: auto; left: calc(16px + var(--safe-l)); }
body.lefty #ticker { left: auto; right: calc(12px + var(--safe-r)); align-items: flex-end; }
body.lefty #ticker div { align-self: flex-end; }

/* a mouse and a keyboard: no stick, no fly buttons (WASD, Space, Shift); the look covers everything */
@media (hover: hover) and (pointer: fine) {
  #stick-zone, #fly-buttons { display: none; }
  #look-zone { width: 100vw; }
  #ticker { bottom: calc(24px + var(--safe-b)); }
}