:root{
  --glass: rgba(16,14,22,.58);
  --glass-hi: rgba(36,31,44,.66);
  --line: rgba(255,240,220,.12);
  --text: #f3ede4;
  --dim: rgba(243,237,228,.55);
  --gold: #e9c47c;
  --gold2: #b98a3e;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#050409;color:var(--text);overflow:hidden;
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline:none}
#ui{position:fixed;inset:0;pointer-events:none}
#ui > *{pointer-events:auto}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg{width:18px;height:18px;fill:currentColor}

.glass{background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);}

.topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:calc(16px + var(--safe-t)) 18px 0;pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:14px}
.logo-mark{width:22px;height:22px;border-radius:7px;background:radial-gradient(circle at 35% 30%,#fff3cf 0,#f2c66f 38%,#b07a2a 100%);
  box-shadow:0 0 14px rgba(240,190,100,.55)}
.logo-mark.big{width:54px;height:54px;border-radius:16px;margin:0 auto 14px}
.brand-name{font-family: "Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:17px;letter-spacing:.2px}
.divider{width:1px;height:16px;background:var(--line)}
.city{font-size:11px;letter-spacing:1.6px;font-weight:600}
.dim{color:var(--dim);font-weight:500}
.city .short{display:none}

.seg{display:flex;padding:4px;border-radius:12px;gap:2px;margin-left:auto}
.seg button{padding:7px 13px;border-radius:9px;font-size:12px;letter-spacing:.4px;color:var(--dim);transition:.2s}
.seg button.on{background:linear-gradient(180deg,rgba(233,196,124,.28),rgba(233,196,124,.12));color:var(--text);box-shadow:inset 0 0 0 1px rgba(233,196,124,.45)}
.actions{display:flex;gap:8px}
.icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.pill{height:40px;border-radius:12px;padding:0 14px;display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.4px}
.pill.auto.on{background:linear-gradient(180deg,rgba(233,196,124,.34),rgba(233,196,124,.14));box-shadow:inset 0 0 0 1px rgba(233,196,124,.55)}
.pill.ar{color:#14110c;background:linear-gradient(180deg,#f5d999,#d7a752);border-color:rgba(255,230,170,.6);font-weight:700}
.pill.ar svg{fill:none}
#soundBtn .snd-off{display:none}
#soundBtn.muted .snd-on{display:none}
#soundBtn.muted .snd-off{display:block}

.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + var(--safe-b));
  padding:8px 14px;border-radius:999px;font-size:12.5px;color:var(--text);transition:opacity .6s;white-space:nowrap}
.hint kbd{font:600 10px ui-monospace,monospace;letter-spacing:1px;margin-left:8px;padding:3px 7px;border-radius:6px;color:var(--gold);
  border:1px solid rgba(233,196,124,.4);text-transform:uppercase}
.hint.hide{opacity:0;pointer-events:none}

.dock{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--safe-b));
  width:min(980px,calc(100vw - 32px));border-radius:18px;padding:10px 10px 10px}
.types{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.type{height:58px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:10.5px;letter-spacing:1.2px;font-weight:600;color:rgba(243,237,228,.78);transition:.18s}
.type svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.type:hover{background:rgba(255,255,255,.07)}
.type.on{background:linear-gradient(180deg,rgba(233,196,124,.26),rgba(233,196,124,.08));border-color:rgba(233,196,124,.6);color:#fff3da;
  box-shadow:0 0 22px rgba(233,196,124,.15) inset}
.colors-row{display:flex;align-items:center;gap:12px;padding:10px 6px 2px}
.lbl{font-size:10px;letter-spacing:1.6px;color:var(--dim);font-weight:600}
.colors{display:flex;gap:9px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chip{width:22px;height:22px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:.15s;position:relative}
.chip.on{transform:scale(1.15);box-shadow:0 0 0 2px #0d0b12,0 0 0 3.5px var(--gold),0 0 14px currentColor}
.chip.multi{background:conic-gradient(#ffd479,#ff7ab8,#b28cff,#66e3ff,#7dffb0,#ffd479)}

.toast{position:absolute;left:50%;top:calc(76px + var(--safe-t));transform:translateX(-50%) translateY(-8px);opacity:0;
  background:var(--glass-hi);border:1px solid var(--line);padding:8px 14px;border-radius:12px;font-size:12.5px;transition:.35s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}

#loader{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 70%,#1a1220,#060509 70%);z-index:10;transition:opacity .8s}
#loader.done{opacity:0;pointer-events:none}
.loader-card{text-align:center}
.loader-title{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:30px}
.loader-sub{font-size:11px;letter-spacing:3px;color:var(--dim);margin:6px 0 18px;text-transform:uppercase}
.loader-bar{width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin:0 auto}
.loader-bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .3s}

.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,4,9,.55);z-index:20}
.modal[hidden]{display:none}
.modal-card{width:min(560px,calc(100vw - 28px));border-radius:18px;padding:14px}
.modal-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:10px}
#mvHost{height:min(60vh,440px);border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#2a1d2c,#0b0910)}
#mvHost model-viewer{width:100%;height:100%;--poster-color:transparent}
.modal-note{font-size:12px;color:var(--dim);margin:10px 2px 2px;line-height:1.45}

/* phones */
@media (max-width: 760px){
  .topbar{padding:calc(10px + var(--safe-t)) 10px 0;flex-wrap:wrap;gap:8px}
  .brand{padding:7px 11px 7px 8px;gap:8px}
  .brand-name{font-size:15px}
  .city .dim{display:none}
  .city{font-size:10px;letter-spacing:1.2px}
  .divider{display:none}
  .city .full{display:none}
  .city .short{display:inline}
  .topbar{flex-wrap:wrap}
  .brand{order:1}
  .actions{order:2;margin-left:auto}
  .topbar{justify-content:space-between}
  .actions{gap:6px}
  .icon{width:34px;height:34px;border-radius:10px}
  .pill{height:34px;padding:0 10px;border-radius:10px}
  .pill.auto{width:34px;padding:0;justify-content:center}
  .pill.auto span{display:none}
  .seg{order:3;margin:0 auto;}
  .seg button{padding:6px 14px;font-size:11.5px}
  .dock{width:calc(100vw - 16px);bottom:calc(8px + var(--safe-b));padding:8px;border-radius:16px}
  .types{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;scroll-snap-type:x mandatory}
  .types::-webkit-scrollbar,.colors::-webkit-scrollbar{display:none}
  .type{flex:0 0 74px;height:52px;font-size:9.5px;scroll-snap-align:start}
  .colors-row{padding:8px 4px 0}
  .hint{bottom:calc(122px + var(--safe-b));font-size:12px}
  .hint kbd{display:none}
}
@media (max-width: 760px) and (max-height: 500px){ .dock{display:none} }