@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url(../fonts/Montserrat-800.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 900; font-display: swap; src: url(../fonts/Montserrat-900.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fonts/Inter-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(../fonts/Inter-800.woff2) format('woff2'); }

:root {
  --ink: #13203d;
  --glass: rgba(14, 20, 46, 0.78);
  --glass2: rgba(14, 20, 46, 0.9);
  --line: rgba(255, 255, 255, 0.12);
  --gold: #ffd256;
  --teal: #2ab3b0;
  --cream: #fff6e2;
  --muted: #b9bfd6;
  --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%; overflow: hidden; background: #0d1530; color: var(--cream); font: 600 15px/1.4 Inter, system-ui, sans-serif; overscroll-behavior: none; }
canvas#city { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; cursor: grab; }
canvas#city:active { cursor: grabbing; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.top { position: fixed; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 5; }
.brand { pointer-events: auto; display: flex; align-items: center; gap: 9px; background: var(--glass); padding: 9px 14px 9px 11px; border-radius: 14px; font: 800 13px Montserrat, sans-serif; letter-spacing: .02em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.star { width: 16px; height: 16px; position: relative; display: inline-block; }
.star::before, .star::after { content: ''; position: absolute; inset: 2px; background: var(--teal); }
.star::after { transform: rotate(45deg); }
.pop { pointer-events: auto; background: var(--glass); border-radius: 14px; padding: 6px 14px 7px; text-align: center; min-width: 84px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pop small { display: block; color: var(--gold); font: 800 10px Montserrat, sans-serif; letter-spacing: .08em; }
.pop b { font: 900 24px Montserrat, sans-serif; letter-spacing: -.01em; }
.sample { position: fixed; top: calc(62px + var(--safe-t)); left: 12px; z-index: 5; background: #8c1f2a; color: #fff; font: 800 11px Montserrat, sans-serif; padding: 5px 9px; border-radius: 8px; letter-spacing: .03em; }

body.intro .ctl { display: none; }
.ctl { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.ctl button { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); font: 800 24px Montserrat, sans-serif; line-height: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ctl button.ico { font-size: 18px; }
.ctl button.on { background: var(--gold); color: var(--ink); }
.ctl #vote { background: var(--gold); color: var(--ink); font-size: 20px; }

.search { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); display: flex; gap: 8px; z-index: 6; max-width: 520px; margin: 0 auto; }
.search input, .wcard input { flex: 1; min-width: 0; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass2); padding: 0 16px; font: 800 16px Montserrat, sans-serif; outline: none; color: #fff; }
.search input::placeholder, .wcard input::placeholder { color: #8f97b8; font-weight: 800; }
.search input:focus, .wcard input:focus { border-color: var(--gold); }
.search > button { height: 50px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--gold); color: var(--ink); font: 900 16px Montserrat, sans-serif; }
.sugg { position: absolute; left: 0; right: 0; bottom: 58px; margin: 0; padding: 6px; list-style: none; background: var(--glass2); border: 1px solid var(--line); border-radius: 14px; }
.sugg li { padding: 10px 12px; border-radius: 10px; font: 800 15px Montserrat, sans-serif; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.sugg li small { color: var(--muted); font: 600 12px Inter, sans-serif; }
.sugg li:hover, .sugg li.sel { background: rgba(255, 255, 255, .1); }

.welcome { position: fixed; inset: 0; z-index: 10; display: grid; place-items: end center; padding: 16px 16px calc(24px + var(--safe-b)); background: linear-gradient(180deg, rgba(13, 21, 48, 0) 30%, rgba(13, 21, 48, .55) 60%, rgba(13, 21, 48, .92)); transition: opacity .45s; }
.welcome.out { opacity: 0; pointer-events: none; }
.wcard { width: 100%; max-width: 480px; text-align: center; }
.kicker { display: inline-block; background: var(--gold); color: var(--ink); font: 900 13px Montserrat, sans-serif; padding: 6px 12px; border-radius: 10px; letter-spacing: .02em; }
.wcard h1 { font: 900 32px/1.08 Montserrat, sans-serif; margin: 14px 0 10px; letter-spacing: -.01em; text-shadow: 0 3px 18px rgba(0, 0, 0, .45); }
.wcard p { margin: 0 auto 16px; color: #e3e6f3; max-width: 400px; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.wcard form { display: flex; flex-direction: column; gap: 10px; }
.wcard input { flex: none; border: 2px solid rgba(255, 210, 86, .55); height: 54px; text-align: center; }
.primary { height: 52px; border: 0; border-radius: 14px; background: var(--gold); color: var(--ink); font: 900 17px Montserrat, sans-serif; padding: 0 20px; box-shadow: 0 8px 24px rgba(255, 210, 86, .25); }
.link { margin-top: 12px; background: none; border: 0; color: #dfe3f5; font: 800 14px Montserrat, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.wpop { margin-top: 10px; color: var(--muted); font-size: 13px; }
.wpop b { color: var(--gold); font-family: Montserrat; }

.sheet { position: fixed; left: 10px; right: 10px; bottom: calc(72px + var(--safe-b)); z-index: 7; max-width: 520px; margin: 0 auto; background: var(--glass2); border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: up .3s ease-out; max-height: calc(100dvh - 150px); overflow: auto; }
@keyframes up { from { transform: translateY(16px); opacity: 0; } }
.sheet .x, .mcard .x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 22px; line-height: 1; }
.sheet .nick { font: 900 24px Montserrat, sans-serif; margin: 2px 40px 4px 0; word-break: break-all; display: flex; align-items: center; gap: 8px; }
.sheet .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.sheet .addr { font: 800 15px Montserrat, sans-serif; color: var(--gold); }
.sheet .meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.sheet .warn { margin-top: 8px; background: rgba(140, 31, 42, .45); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.nb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.nb button { text-align: left; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-height: 52px; }
.nb button small { display: block; color: var(--muted); font-size: 11px; }
.nb button span { font: 800 13px Montserrat, sans-serif; word-break: break-all; }
.nb button:disabled { opacity: .45; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); font: 800 15px Montserrat, sans-serif; color: var(--cream); text-decoration: none; padding: 0 14px; }
.lvl { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.lvl .bar { height: 8px; background: rgba(255, 255, 255, .1); border-radius: 6px; overflow: hidden; margin: 8px 0; }
.lvl .bar i { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, var(--teal), var(--gold)); }
.lvl h3 { margin: 0; font: 900 14px Montserrat, sans-serif; }
.lvl p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.ghost h2 { font: 900 22px Montserrat, sans-serif; margin: 0 40px 6px 0; }
.ghost p { margin: 0 0 12px; color: #e3e6f3; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(6, 10, 26, .6); }
.mcard { position: relative; width: 100%; max-width: 440px; background: #121b3c; border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.mcard h2 { font: 900 22px Montserrat, sans-serif; margin: 0 40px 6px 0; }
.mcard p { color: var(--muted); margin: 0 0 12px; font-size: 14px; }
#vform { display: flex; flex-direction: column; gap: 8px; }
#vform label { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: 800 15px Montserrat, sans-serif; }
#vform label input[type=radio] { accent-color: var(--gold); width: 18px; height: 18px; }
#vother { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); outline: none; font: 800 15px Montserrat, sans-serif; color: #fff; }
.msg { margin-top: 10px; background: rgba(42, 179, 176, .18); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.story img { width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 14px; display: block; margin-bottom: 12px; background: #000; }
.toast { position: fixed; left: 50%; top: calc(80px + var(--safe-t)); transform: translateX(-50%); z-index: 30; background: var(--gold); color: var(--ink); font: 800 14px Montserrat, sans-serif; padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }

@media (min-width: 760px) {
  .wcard h1 { font-size: 44px; }
  .sheet { left: auto; right: 74px; bottom: 84px; width: 380px; }
  .search { left: 50%; right: auto; width: 460px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .welcome { transition: none; } }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.chips button { border: 1px solid var(--line); background: rgba(14, 20, 46, .72); color: var(--cream); border-radius: 999px; padding: 7px 11px; font: 800 12px Montserrat, sans-serif; }
.chips button:first-child { border-color: #3ff0ff; color: #9ffaff; }
.chips button:nth-child(2) { border-color: #ff4f86; color: #ffc2d4; }
.star-badge { font: 800 11px Montserrat, sans-serif; background: #f2b51d; color: var(--ink); padding: 3px 7px; border-radius: 8px; white-space: nowrap; }
.sheet .special { margin-top: 8px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #e6e9f5; }