:root {
  --navy: #07182c;
  --navy-2: #102844;
  --blue: #17395d;
  --cream: #f6f1e8;
  --gold: #d9a441;
  --gold-light: #ffd77b;
  --ink: #0c1d31;
  --white: #ffffff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--white);
  background: var(--navy);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; touch-action: none; background: var(--navy); }
button, a { font: inherit; }
button { color: inherit; }

#app { position: relative; isolation: isolate; background: linear-gradient(#173454, #07182c); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#marker-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.glass {
  background: rgba(7, 24, 44, .72);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar { position: absolute; z-index: 10; top: max(14px, env(safe-area-inset-top)); left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; }
.topbar button { pointer-events: auto; border: 0; }
.brand { display: flex; align-items: center; gap: 10px; border-radius: 18px; padding: 8px 13px 8px 8px; text-align: left; cursor: pointer; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--navy); background: var(--gold); font: 900 18px Georgia, serif; transform: rotate(-3deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 13px; letter-spacing: .02em; }
.brand small { font-size: 9px; color: rgba(255,255,255,.65); margin-top: 1px; text-transform: uppercase; letter-spacing: .12em; }
.list-button { display: flex; align-items: center; gap: 9px; border-radius: 18px; padding: 8px 8px 8px 14px; cursor: pointer; }
.list-button span { font-size: 12px; font-weight: 700; }
.list-button strong { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--gold); color: var(--navy); }

.location-tools { position: absolute; z-index: 9; top: 74px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; }
.room-chip { padding: 7px 12px; border-radius: 999px; color: rgba(255,255,255,.86); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.map-button { border-radius: 999px; border: 1px solid rgba(255,255,255,.15); padding: 7px 11px; color: rgba(255,255,255,.86); font-size: 10px; font-weight: 850; letter-spacing: .04em; cursor: pointer; }
.map-button span { color: var(--gold-light); margin-right: 3px; }
.map-panel { position: absolute; z-index: 12; top: 112px; left: 50%; width: min(360px, calc(100% - 28px)); padding: 13px; border-radius: 22px; transform: translate(-50%, -12px) scale(.97); transform-origin: top center; opacity: 0; visibility: hidden; pointer-events: none; transition: .22s ease; }
.map-panel.open { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
.map-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; }
.map-head small, .map-head strong { display: block; }
.map-head small { color: var(--gold-light); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.map-head strong { margin-top: 2px; font: 700 16px Georgia, serif; }
.map-head button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: white; background: rgba(255,255,255,.06); font-size: 20px; line-height: 1; cursor: pointer; }
#map-canvas { display: block; width: 100%; height: auto; border-radius: 14px; background: #0b2038; }
.map-legend { display: flex; justify-content: center; gap: 16px; padding: 9px 2px 0; color: rgba(255,255,255,.67); font-size: 9px; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.you-dot { background: white; box-shadow: 0 0 0 2px var(--gold); }
.repair-dot { border: 2px solid var(--gold); }
.added-dot { background: #5fd0a7; }
.reticle { position: absolute; z-index: 4; left: 50%; top: 47%; width: 30px; height: 30px; transform: translate(-50%,-50%); display: grid; place-items: center; pointer-events: none; opacity: .58; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgba(255,255,255,.7); }
.reticle::before { width: 16px; height: 1px; }
.reticle::after { height: 16px; width: 1px; }
.reticle span { width: 4px; height: 4px; border: 1px solid white; border-radius: 50%; }

.world-marker { position: absolute; width: 56px; height: 56px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; pointer-events: auto; cursor: pointer; color: var(--navy); background: transparent; padding: 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.world-marker::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255,215,123,.9); border-radius: 50%; animation: beacon 1.8s ease-out infinite; }
.world-marker .marker-core { position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #ffe09a, var(--gold)); border: 2px solid rgba(255,255,255,.8); box-shadow: inset 0 0 0 2px rgba(7,24,44,.12); font-size: 17px; font-weight: 900; }
.world-marker.selected .marker-core { background: #fff; }
.world-marker.selected::after { content: "✓"; position: absolute; right: -1px; top: -1px; width: 19px; height: 19px; display: grid; place-items: center; color: white; background: #268267; border: 2px solid white; border-radius: 50%; font-size: 11px; font-weight: 900; }
.world-marker[hidden] { display: none; }
@keyframes beacon { from { opacity: .9; transform: scale(.72); } to { opacity: 0; transform: scale(1.45); } }

.focus-card { position: absolute; z-index: 8; left: 50%; bottom: 118px; width: min(360px, calc(100% - 156px)); transform: translateX(-50%); border-radius: 20px; padding: 10px 10px 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.focus-card[hidden] { display: none; }
.focus-card small, .focus-card strong { display: block; }
.focus-card small { color: var(--gold-light); font-size: 9px; font-weight: 900; letter-spacing: .13em; margin-bottom: 2px; }
.focus-card strong { font-size: 14px; }
.focus-card button { border: 0; border-radius: 12px; min-width: 64px; padding: 11px 13px; font-weight: 900; color: var(--navy); background: var(--gold); cursor: pointer; }

.controls { position: absolute; z-index: 6; inset: auto 0 calc(12px + var(--safe-bottom)); display: flex; justify-content: space-between; align-items: end; padding: 0 22px; pointer-events: none; }
.joystick-wrap { display: grid; justify-items: center; gap: 6px; pointer-events: auto; }
.control-label { font-size: 8px; font-weight: 900; letter-spacing: .22em; color: rgba(255,255,255,.6); }
.joystick { width: 86px; height: 86px; border-radius: 50%; position: relative; touch-action: none; background: rgba(7,24,44,.36); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 0 0 12px rgba(255,255,255,.025), 0 9px 24px rgba(0,0,0,.2); backdrop-filter: blur(6px); }
.joystick::before, .joystick::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.16); transform: translate(-50%,-50%); }
.joystick::before { width: 44px; height: 1px; }
.joystick::after { width: 1px; height: 44px; }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.86); border: 4px solid rgba(217,164,65,.55); box-shadow: 0 5px 13px rgba(0,0,0,.28); }
.desktop-hint { display: none; position: absolute; z-index: 6; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 9px 13px; border-radius: 999px; font-size: 10px; letter-spacing: .04em; color: rgba(255,255,255,.76); }

.scrim { position: absolute; z-index: 19; inset: 0; background: rgba(3,12,23,.56); backdrop-filter: blur(2px); }
.scrim[hidden] { display: none; }
.drawer { position: absolute; z-index: 20; right: 0; top: 0; height: 100%; width: min(430px, 100%); padding: max(26px, env(safe-area-inset-top)) 24px calc(22px + var(--safe-bottom)); color: var(--ink); background: var(--cream); box-shadow: -20px 0 80px rgba(0,0,0,.3); transform: translateX(104%); transition: transform .35s cubic-bezier(.22,.8,.24,1); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.drawer.open { transform: translateX(0); }
.drawer-handle { display: none; }
.drawer-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid rgba(12,29,49,.12); }
.drawer-head small { font-size: 9px; font-weight: 900; letter-spacing: .17em; color: #8e6720; }
.drawer-head h2 { margin: 4px 0 0; font: 800 clamp(26px, 7vw, 38px)/.98 Georgia, serif; letter-spacing: -.03em; }
.icon-button { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(12,29,49,.15); background: transparent; color: var(--ink); font-size: 27px; line-height: 1; cursor: pointer; }
.empty-state { text-align: center; padding: 70px 20px; color: #5f6b77; }
.empty-state > span { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; color: var(--navy); background: #ebdfc8; font-size: 28px; }
.empty-state h3 { color: var(--ink); margin: 0 0 6px; font-size: 17px; }
.empty-state p { margin: 0; font-size: 13px; }
.service-items { list-style: none; padding: 8px 0 154px; margin: 0; }
.service-item { display: grid; grid-template-columns: 42px 1fr 34px; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(12,29,49,.1); }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--navy); background: #ead7b4; font-weight: 900; }
.service-item strong, .service-item small { display: block; }
.service-item strong { font-size: 14px; }
.service-item small { margin-top: 3px; color: #68717a; font-size: 11px; }
.remove-item { width: 32px; height: 32px; border: 0; background: transparent; color: #7d848b; cursor: pointer; font-size: 20px; }
.drawer-actions { position: sticky; bottom: calc(-22px - var(--safe-bottom)); margin: 0 -24px calc(-22px - var(--safe-bottom)); padding: 16px 24px calc(22px + var(--safe-bottom)); background: linear-gradient(transparent 0, var(--cream) 13%); }
.drawer-actions > p { margin: 0 0 13px; padding-top: 15px; color: #56616d; font-size: 11px; line-height: 1.5; }
.drawer-actions > p strong { color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 8px; }
.contact { min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; text-decoration: none; font-size: 12px; font-weight: 900; }
.contact.secondary { color: var(--navy); border: 1px solid rgba(12,29,49,.18); background: white; }
.contact.primary { color: white; background: var(--navy); }
.contact span { color: var(--gold); font-size: 16px; }

.info-copy { margin: 22px 0; font: 20px/1.45 Georgia, serif; color: #324154; }
.browse-button { width: 100%; border: 0; border-radius: 14px; padding: 15px 18px; color: white; background: var(--navy); font-weight: 850; cursor: pointer; }
.info-links { display: grid; gap: 0; margin-top: 20px; border-top: 1px solid rgba(12,29,49,.12); }
.info-links a { display: flex; justify-content: space-between; padding: 16px 1px; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(12,29,49,.12); font-weight: 750; font-size: 13px; }
.info-links span { color: #956d26; }
.service-area { margin: 24px 0 0; color: #6b747d; font-size: 11px; line-height: 1.55; }
.browse-list { display: grid; gap: 8px; padding-top: 16px; }
.browse-row { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid rgba(12,29,49,.1); border-radius: 15px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.browse-row .service-icon { width: 38px; height: 38px; }
.browse-row strong, .browse-row small { display: block; }
.browse-row strong { font-size: 13px; }
.browse-row small { color: #727980; margin-top: 2px; font-size: 10px; }
.browse-row > span:last-child { color: #8d6620; font-weight: 900; }
.browse-row.selected > span:last-child { color: #268267; }

.welcome { position: absolute; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: radial-gradient(circle at 50% 34%, rgba(38,84,128,.8), transparent 38%), linear-gradient(150deg, #07182c, #102e4e 58%, #07182c); transition: opacity .6s ease, visibility .6s ease; }
.welcome.dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(217,164,65,.25); border-radius: 28px; pointer-events: none; }
.welcome-orbit { width: 94px; height: 94px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid rgba(255,215,123,.45); border-radius: 50%; box-shadow: 0 0 0 13px rgba(217,164,65,.05), 0 0 0 27px rgba(217,164,65,.025); }
.welcome-orbit span { color: var(--gold-light); font-size: 40px; transform: translateY(-2px); }
.eyebrow { margin: 0 0 10px; color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .24em; }
.welcome h1 { margin: 0; font: 800 clamp(39px, 9vw, 68px)/.94 Georgia, serif; letter-spacing: -.045em; }
.welcome h1 em { color: var(--gold-light); font-weight: 400; }
.welcome > p:not(.eyebrow) { max-width: 440px; margin: 19px 0 25px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.welcome > button { min-width: 210px; border: 0; border-radius: 16px; padding: 16px 18px; display: flex; justify-content: center; gap: 28px; color: var(--navy); background: var(--gold); font-weight: 900; box-shadow: 0 12px 32px rgba(0,0,0,.24); cursor: pointer; }
.welcome > small { margin-top: 14px; color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .05em; }
.toast { position: absolute; z-index: 40; left: 50%; top: 90px; transform: translate(-50%, -14px); padding: 10px 15px; border-radius: 12px; opacity: 0; visibility: hidden; color: var(--navy); background: white; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 12px; font-weight: 850; transition: .25s ease; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.rotate-note { display: none; }

@media (min-width: 800px) and (pointer: fine) {
  .controls { display: none; }
  .desktop-hint { display: block; }
  .focus-card { bottom: 62px; }
  .world-marker { width: 62px; height: 62px; }
}

@media (max-width: 640px) {
  .drawer { top: auto; bottom: 0; height: min(82%, 720px); width: 100%; border-radius: 25px 25px 0 0; transform: translateY(104%); padding-top: 16px; }
  .drawer.open { transform: translateY(0); }
  .drawer-handle { display: block; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(12,29,49,.18); }
  .brand small { display: none; }
  .brand { border-radius: 15px; }
  .brand-mark { width: 31px; height: 31px; }
  .list-button { border-radius: 15px; }
  .list-button span { display: none; }
  .list-button strong { width: 31px; height: 31px; }
  .location-tools { top: 68px; }
  .map-panel { top: 105px; }
}

@media (orientation: portrait) and (max-width: 520px) {
  .rotate-note { display: block; position: absolute; z-index: 5; left: 50%; bottom: calc(8px + var(--safe-bottom)); transform: translateX(-50%); width: max-content; max-width: 62%; color: rgba(255,255,255,.45); font-size: 8px; text-align: center; pointer-events: none; }
  .controls { bottom: calc(27px + var(--safe-bottom)); padding-inline: 14px; }
  .joystick { width: 78px; height: 78px; }
  .focus-card { bottom: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}