/* DaCity Hub in the GTA VI trailer mood (Vice City at dusk): night purple glass, neon pink edges, a sunset
 * stripe and condensed uppercase type, matching the top bar and Online now. Loaded last, after styles.css,
 * city/iso.css and cases/cases.css; it only restyles, it changes no layout or behaviour. */

:root {
  --bg: #13061f;
  --panel: #1c0a2e;
  --panel-2: #2a1042;
  --line: #4b2363;
  --text: #f6ecff;
  --muted: #b9a3d4;
  --pink: #ff3ea5;
  --teal: #3ad7e6;
  --yellow: #ffb347;
  --lime: #7dffb0;
  --orange: #ff8a3d;
  --sunset: linear-gradient(90deg, #ffb347, #ff6a5c 30%, #ff3ea5 55%, #b04dff 80%, #3ad7e6);
  --sunset-btn: linear-gradient(90deg, #ff8a3d, #ff3ea5 55%, #9b4dff);
  --glass: linear-gradient(160deg, rgba(42, 12, 66, .94), rgba(18, 6, 31, .94));
  --edge: rgba(255, 120, 200, .45);
  --glow: 0 0 16px rgba(255, 62, 165, .28), 0 12px 26px -10px rgba(10, 2, 24, .8);
  --head: Oswald, Inter, system-ui, sans-serif;
}
body { background: var(--bg); }
::selection { background: rgba(255, 62, 165, .45); color: #fff; }
* { scrollbar-color: #5a2a78 transparent; }

/* ---------- Shared pieces ---------- */
.btn-primary {
  border: 0; border-radius: 999px; color: #fff; background: var(--sunset-btn);
  font-family: var(--head); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 14px rgba(255, 62, 165, .45);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.12) saturate(1.1); }
.btn-ghost, .back-btn {
  border: 1px solid var(--edge); background: rgba(24, 8, 40, .7); color: var(--text);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover:not(:disabled), .back-btn:hover { border-color: var(--pink); box-shadow: 0 0 12px rgba(255, 62, 165, .45); }
.btn-ghost em { background: rgba(255, 62, 165, .16); color: #ff9ad5; }
.icon-btn:hover { background: rgba(255, 62, 165, .14); color: #fff; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }

/* ---------- City HUD: minimap, zoom, dock, area banner ---------- */
.iso-map, .dock {
  background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glow); backdrop-filter: blur(6px);
}
.iso-map::before { background: none; }
.iso-map-head { font-family: var(--head); font-weight: 600; font-size: 12px; letter-spacing: 2.4px; color: #fff; text-shadow: 0 0 10px rgba(255, 62, 165, .75); border-bottom: 1px solid rgba(255, 120, 200, .3); }
.iso-map-head b { color: #ff9ad5; }
.iso-zoom button {
  color: #fff; background: var(--glass); border: 1px solid var(--edge);
  box-shadow: 0 0 12px rgba(255, 62, 165, .3), 0 6px 14px -6px rgba(10, 2, 24, .8);
}
.iso-zoom button:hover { color: #fff; border-color: var(--pink); box-shadow: 0 0 16px rgba(255, 62, 165, .7); }
.dock { position: absolute; overflow: hidden; border-radius: 18px; }
.dock::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: var(--sunset); box-shadow: 0 0 10px rgba(255, 62, 165, .7);
}
.dock button {
  background: rgba(255, 255, 255, .03); border: 1px solid transparent; box-shadow: none; color: rgba(246, 236, 255, .78);
  font-family: var(--head); font-weight: 500; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
}
.dock button .ico { color: #ff9ad5; filter: none; }
.dock button:hover { background: rgba(255, 62, 165, .12); border-color: rgba(255, 120, 200, .35); color: #fff; }
.dock button:hover .ico { color: #fff; filter: drop-shadow(0 0 6px rgba(255, 62, 165, .9)); }
.dock button[aria-pressed="true"] {
  background: linear-gradient(rgba(255, 62, 165, .22), rgba(176, 77, 255, .12)); border-color: var(--pink); color: #fff;
  box-shadow: inset 0 0 14px rgba(255, 62, 165, .3), 0 0 12px rgba(255, 62, 165, .4);
}
.dock button[aria-pressed="true"] .ico { color: #fff; }
.dock button[data-badge]::after { background: var(--pink); color: #fff; }
.iso-zone {
  font: 700 34px var(--head); letter-spacing: 6px; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 18px rgba(255, 62, 165, .85), 0 2px 0 rgba(18, 6, 31, .8);
}
.iso-zone::before, .iso-zone::after { content: ''; display: inline-block; width: 60px; height: 3px; vertical-align: middle; border-radius: 3px; background: var(--sunset); box-shadow: 0 0 8px rgba(255, 62, 165, .8); }
.iso::after { background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 60%, rgba(40, 8, 56, .32) 100%); }

/* ---------- Drawers (Chat, Ranking), windows, tour, toasts ---------- */
.drawer { background: var(--glass); border-left: 1px solid var(--edge); box-shadow: -24px 0 48px rgba(10, 2, 24, .6), -1px 0 16px rgba(255, 62, 165, .25); backdrop-filter: blur(10px); }
.drawer-head { border-bottom: 1px solid rgba(255, 120, 200, .3); position: relative; }
.drawer-head h2, .modal h2 { font-family: var(--head); font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px rgba(255, 62, 165, .6); }
.panel h3 { font-family: var(--head); font-weight: 600; letter-spacing: 2px; color: #ff9ad5; }
.msg { background: rgba(255, 255, 255, .06); }
.msg.mine { background: rgba(255, 62, 165, .16); }
.chat-form input, .who-name input, .market select, .market input, .builder-name input, .wallet-form input {
  background: rgba(10, 3, 20, .6); border-color: var(--line);
}
.chat-online { color: var(--lime); }
.xp-bar span { background: var(--sunset); }
.modal { background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glow); }
.modal::backdrop { background: rgba(10, 2, 24, .72); }
.login-opt { background: rgba(255, 255, 255, .05); border-color: var(--line); }
.login-opt:hover:not(:disabled) { border-color: var(--pink); box-shadow: 0 0 12px rgba(255, 62, 165, .35); }
.login-legal a, .account-list code { color: #ff9ad5; }
.tour-card { background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--glow); }
.tour-card h3 { font: 700 22px var(--head); letter-spacing: 1.4px; text-transform: uppercase; }
.tour-card small { color: #ff9ad5; }
.tour-spot { border-color: var(--pink); box-shadow: 0 0 0 9999px rgba(10, 2, 24, .74), 0 0 24px var(--pink); }
.toast { background: var(--glass); border: 1px solid var(--edge); box-shadow: 0 0 22px rgba(255, 62, 165, .45); }
.toast small { color: #ffb347; font-family: var(--head); font-weight: 600; letter-spacing: 2px; }
.toast b { font-family: var(--head); font-weight: 600; letter-spacing: .6px; font-size: 18px; }
.wallet-balance b { font-family: var(--head); font-weight: 700; color: #fff; text-shadow: 0 0 14px rgba(255, 62, 165, .7); }
.wallet-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--pink); }
.wallet-address { border-color: var(--pink); }
.wallet-address code { color: #ff9ad5; }

/* ---------- Rooms (Casino, Cases, Marketplace, Games, Launchpad) ---------- */
.room {
  background:
    radial-gradient(70% 45% at 50% 105%, rgba(255, 106, 92, .35), rgba(255, 62, 165, .14) 45%, transparent 70%),
    radial-gradient(110% 70% at 50% -5%, color-mix(in srgb, var(--accent) 34%, #1c0a2e) 0%, #1c0a2e 55%, #0e0418 100%);
}
.room-floor { opacity: .42; }
.room-title {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 6px; transform: skewX(-6deg);
  color: #fff; text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 70%, transparent), 0 3px 0 rgba(18, 6, 31, .8);
}
.room-title::after {
  content: ''; display: block; width: min(280px, 60%); height: 4px; margin: 6px auto 0; border-radius: 4px;
  background: var(--sunset); box-shadow: 0 0 12px rgba(255, 62, 165, .8);
}
.room-sub { color: var(--muted); font-family: var(--head); letter-spacing: 2.4px; text-transform: uppercase; font-size: 14px; }
.room-empty { background: rgba(18, 6, 31, .6); }
.game-card, .collection, .listing, .shop-locked, .shop, .list-form, .unlock, .my-row, .case-card, .builder-preview, .market-tabs, .chip-btn {
  backdrop-filter: blur(6px);
}
.game-card { background: linear-gradient(180deg, color-mix(in srgb, var(--game) 22%, rgba(24, 8, 40, .8)), rgba(16, 5, 28, .88)); }
.game-card strong, .game-bar strong { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.game-card em { border-radius: 999px; font-family: var(--head); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: 0 0 14px color-mix(in srgb, var(--game) 70%, transparent); }
.game-bar { background: var(--glass); border-bottom: 1px solid var(--edge); }
.market-tabs { background: rgba(18, 6, 31, .7); border-color: var(--line); }
.market-tabs button[aria-selected="true"] { background: var(--sunset-btn); color: #fff; }
.chip-btn { background: rgba(18, 6, 31, .6); border-color: var(--line); }
.collection, .listing, .shop-locked, .shop { background: rgba(24, 8, 40, .82); border-color: var(--line); }
.list-form, .unlock, .my-row { background: rgba(18, 6, 31, .6); border-color: var(--line); }
.listing:hover { border-color: var(--edge); box-shadow: 0 0 18px -4px rgba(255, 62, 165, .5); }
.item-art { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--r) 35%, transparent), transparent 70%), #12051f; }
.col-item { background: #12051f; }
.btn-buy { border-radius: 999px; background: var(--sunset-btn); color: #fff; font-family: var(--head); letter-spacing: 1px; text-transform: uppercase; }
.case-card { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), rgba(18, 6, 31, .9); }
.case-card h3, .stage-head strong, .reveal h2, .preview-name { font-family: var(--head); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.case-actions .btn-primary, .stage-foot .btn-primary, .contents-foot .btn-primary, .builder-preview .btn-primary { background: var(--c); }
.cases-demo { background: rgba(18, 6, 31, .7); }
.case-lock { background: rgba(18, 6, 31, .88); }
.case-card.locked .btn-primary { background: #5a4a6e !important; }
/* Case and item art back to full colour (the brown "daylight" filter belonged to the old look). */
.case-svg, .item-art > svg, .col-item svg, .slot svg:not(.ico) { filter: none; }
.listing .item-art > svg.ii { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }

/* ---------- Character window (was a parchment book) ---------- */
.sf-inv { color: var(--text); }
.sf-inv::backdrop { background: rgba(10, 2, 24, .72); }
.sf-book {
  background: var(--glass); border: 1px solid var(--edge);
  box-shadow: 0 0 22px rgba(255, 62, 165, .35), 0 24px 60px -16px rgba(0, 0, 0, .8);
}
.sf-book::before, .sf-book::after { border-color: var(--pink); filter: drop-shadow(0 0 6px rgba(255, 62, 165, .8)); }
.sf-page { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 120, 200, .16); }
.sf-left { border-right: 1px solid rgba(255, 120, 200, .25); }
.sf-close { border: 1px solid rgba(255, 255, 255, .3); background: var(--sunset-btn); box-shadow: 0 0 14px rgba(255, 62, 165, .6); }
.sf-head h2 { font: 700 26px var(--head); letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 0 14px rgba(255, 62, 165, .7); }
.sf-head span { color: var(--muted); }
.sf-slot, .sf-cell {
  background: linear-gradient(180deg, #24103a, #160826); color: #8f73b0;
  box-shadow: inset 0 0 0 1px rgba(255, 120, 200, .2), inset 0 0 0 3px color-mix(in srgb, var(--r) 45%, #2a1042), inset 0 6px 12px rgba(0, 0, 0, .45);
}
.sf-slot.filled, .sf-cell[data-uid] { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 40%, #2a1042), #160826 75%); }
.sf-slot.can-drop { box-shadow: inset 0 0 0 3px var(--lime), 0 0 14px var(--lime); }
.sf-slot.drop-hover, .sf-bag.drop-hover { outline-color: var(--pink); }
.sf-portrait {
  background: radial-gradient(circle at 50% 30%, #ffcf8a, #ff8a7a 35%, #b04dff 75%, #3a1360);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 18px rgba(255, 62, 165, .35);
}
.sf-power { background: rgba(18, 6, 31, .9); color: #ffb347; box-shadow: 0 0 0 1px var(--edge), 0 0 12px rgba(255, 62, 165, .4); }
.sf-power span { color: var(--muted); }
.sf-power b { font-family: var(--head); font-weight: 700; }
.sf-right h3 { font: 600 16px var(--head); letter-spacing: 2px; text-transform: uppercase; color: #ff9ad5; }
.sf-right h3 small { color: var(--muted); }
.sf-stats i { background: rgba(255, 255, 255, .08); box-shadow: none; }
.sf-stats i::after { background: var(--sunset); }
.sf-stats em small { color: var(--lime); }
.sf-sub { background: rgba(255, 255, 255, .05); }
.sf-sort button, .sf-tabs button { border: 1px solid var(--line); background: rgba(18, 6, 31, .7); color: var(--muted); }
.sf-sort button[aria-pressed="true"], .sf-tabs button[aria-selected="true"] { background: var(--sunset-btn); border-color: transparent; color: #fff; }
.sf-bag { background: rgba(0, 0, 0, .18); }
.sf-eq { background: #ffb347; color: #1c0a2e; }
.sf-cell.eq { box-shadow: inset 0 0 0 1px rgba(255, 120, 200, .2), inset 0 0 0 3px #ffb347, inset 0 6px 12px rgba(0, 0, 0, .45); }
.sf-pager button { border: 1px solid var(--edge); background: rgba(18, 6, 31, .8); color: #fff; }
.sf-help { color: var(--muted); }
.sf-tip { background: #1c0a2e; color: var(--text); box-shadow: 0 0 0 1px var(--edge), 0 0 18px rgba(255, 62, 165, .35), 0 16px 30px -10px rgba(0, 0, 0, .7); }
.sf-tip header { background: linear-gradient(180deg, color-mix(in srgb, var(--r) 40%, #2a1042), #1c0a2e); border-bottom: 1px solid rgba(255, 120, 200, .25); }
.sf-tip header b { font: 600 17px var(--head); letter-spacing: 1px; text-transform: uppercase; }
.sf-tip header span, .sf-tip footer { color: var(--muted); }
.sf-tip li b, .sf-tip .up { color: var(--lime); }
.sf-tag { background: rgba(255, 62, 165, .18); color: #ff9ad5; }

/* ---------- Phones ---------- */
/* Phones: the rank chip makes room for the balance and the account button (Ranking stays in the dock). */
@media (max-width: 520px) { .top-actions .chip:not(.wallet-pill) { display: none; } }
@media (max-width: 640px) {
  .room-title { letter-spacing: 3px; }
  .iso-zone { font-size: 22px; letter-spacing: 3px; }
  .iso-zone::before, .iso-zone::after { width: 30px; }
}