:root {
  --ink: #0b1437; --panel: rgba(13, 22, 58, .78); --panel-solid: #111c47; --line: rgba(255, 255, 255, .12);
  --txt: #fff; --dim: #a9b4dd; --green: #2fd36b; --green-d: #159a47; --gold: #ffc62e; --gold-d: #e08a00; --red: #ff5a5f; --blue: #3a86ff;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--txt); font-family: var(--font); -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea { font: inherit; color: var(--txt); -webkit-user-select: text; user-select: text; }
h1, h2, h3, h4, p { margin: 0; }
#map { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, #1b2f7a, #060a22 70%); }
.maplibregl-ctrl-bottom-left { bottom: calc(74px + var(--sb)); opacity: .6; }

.ic { width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-right: .22em; object-fit: contain; }
.i { display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.i-map { --m: url(../img/ui/map.svg); } .i-rank { --m: url(../img/ui/rank.svg); } .i-friends { --m: url(../img/ui/friends.svg); }
.i-shop { --m: url(../img/ui/shop.svg); } .i-profile { --m: url(../img/ui/profile.svg); } .i-world { --m: url(../img/ui/world.svg); }
.i-locate { --m: url(../img/ui/locate.svg); } .i-home { --m: url(../img/ui/home.svg); }
.lk { display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.12em; background: currentColor; -webkit-mask: url(../img/ui/lock.svg) center/contain no-repeat; mask: url(../img/ui/lock.svg) center/contain no-repeat; }
.vb { display: inline-block; width: 1em; height: 1em; margin-left: .25em; vertical-align: -.12em; border-radius: 50%; background: var(--blue) url(../img/ui/check.svg) center/58% no-repeat; }
.vb.big { width: 44px; height: 44px; margin: 0; flex: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.playing #hud { opacity: 1; }
#hud > * { pointer-events: auto; }
#top { position: absolute; top: calc(var(--st) + 10px); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
#top > * { pointer-events: auto; }
.glass, #hud-ava, .pill, .fab, #tabs { background: var(--panel); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(4, 8, 30, .35); }
#hud-ava { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 99px; text-align: left; min-width: 0; }
#hud-ava .who { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
#hud-ava b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
#hud-ava small { font-size: 11px; color: var(--gold); font-weight: 700; }
.ring { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--gold) var(--p), rgba(255, 255, 255, .16) 0); }
.ava { display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; font-weight: 800; font-size: calc(var(--s) * .46); color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pill { padding: 7px 14px 7px 10px; border-radius: 99px; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill.gold { color: var(--gold); padding-right: 6px; display: flex; align-items: center; }
.pill .plus { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-size: 17px; line-height: 1; }
.pill.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.14); } }

#fabs { position: absolute; right: 12px; bottom: calc(92px + var(--sb)); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; transition: transform .3s, opacity .3s; }
.fab { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; transition: transform .12s; }
.fab:active, .btn:active, .slot:active, .item:active, .card:active, .pack:active, .contract:active { transform: scale(.94); }
.fab.collect { width: auto; padding: 0 16px 0 10px; display: flex; gap: 6px; font-weight: 800; font-size: 17px; background: linear-gradient(180deg, #ffd95a, var(--gold-d)); color: #432700; border: 0; animation: pulse 1.2s infinite; }
.fab.collect img { width: 30px; height: 30px; }
.fab[hidden] { display: none; }
@keyframes pulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255, 198, 46, .25); } }
body.sheet-open #fabs, body.scouting #fabs { opacity: 0; pointer-events: none; }

#tabs { position: absolute; left: 12px; right: 12px; bottom: calc(10px + var(--sb)); display: flex; border-radius: 24px; padding: 6px; }
#tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 5px; border-radius: 18px; color: var(--dim); font-size: 10.5px; font-weight: 700; transition: .2s; }
#tabs button.on { color: #fff; background: linear-gradient(180deg, #4f7dff, #2a4fd8); box-shadow: 0 6px 16px rgba(58, 134, 255, .45); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 11px 18px; border-radius: 16px; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(180deg, #49e283, var(--green-d)); box-shadow: 0 4px 0 #0d7335, 0 10px 20px rgba(21, 154, 71, .35); transition: transform .1s; }
.btn.big { width: 100%; padding: 15px; font-size: 17px; border-radius: 18px; }
.btn.gold { background: linear-gradient(180deg, #ffd95a, var(--gold-d)); color: #432700; box-shadow: 0 4px 0 #a86400, 0 10px 20px rgba(224, 138, 0, .3); }
.btn.ghost { background: rgba(255, 255, 255, .1); box-shadow: none; flex: 1; }
.btn.danger { color: #ff9a9d; flex: 0 0 auto; } .btn.danger.sure { background: var(--red); color: #fff; }
.btn.off, .btn:disabled { filter: grayscale(.9) brightness(.8); box-shadow: none; }
.btn.pulse { animation: pulse 1.2s infinite; }

/* ---------- bottom sheet ---------- */
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 8px 16px calc(18px + var(--sb)); border-radius: 28px 28px 0 0; background: var(--panel); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(4, 8, 30, .5); transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); max-height: 72vh; display: flex; flex-direction: column; }
#sheet.open { transform: none; }
.grab { width: 40px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .28); margin: 0 auto 10px; flex: none; }
#sheet-body { overflow: hidden auto; min-height: 0; scrollbar-width: none; padding: 0 2px 6px; }
#sheet-body::-webkit-scrollbar, .panel-body::-webkit-scrollbar { display: none; }
.panel-body { scrollbar-width: none; }
.sh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sh-head small { color: var(--dim); font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-head h3 { flex: 1; }
.x { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 13px; flex: none; }
.chip { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--c); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); white-space: nowrap; }
h3 { font-size: 21px; font-weight: 800; } h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.stats { display: flex; gap: 8px; margin: 12px 0; }
.stats > div { flex: 1; padding: 9px 6px; border-radius: 14px; background: rgba(255, 255, 255, .08); text-align: center; min-width: 0; }
.stats small { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--dim); margin-bottom: 2px; } .stats b { font-size: 15px; white-space: nowrap; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { position: relative; height: 112px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 6px; transition: transform .1s; }
.slot img { height: 78px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); } .slot small { font-size: 11px; font-weight: 700; color: var(--dim); }
.slot.empty { justify-content: center; border-style: dashed; border-color: rgba(255, 255, 255, .3); }
.slot.empty i { font-style: normal; font-size: 34px; font-weight: 300; line-height: 1; color: var(--green); }
.slot.ready { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 198, 46, .35); }
.slot .coinpop { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; animation: bob 1s infinite alternate ease-in-out; }
@keyframes bob { to { transform: translateY(-6px); } }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-bottom: 6px; border-radius: 16px; background: rgba(255, 255, 255, .07); text-align: left; }
.row .go { margin-left: auto; color: var(--dim); font-size: 13px; }
.row.me { background: linear-gradient(90deg, rgba(58, 134, 255, .45), rgba(58, 134, 255, .15)); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .5); }
.menu { padding-bottom: 6px; }
.item, .verify { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; margin-bottom: 7px; border-radius: 16px; background: rgba(255, 255, 255, .08); text-align: left; transition: transform .1s; }
.item > img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.it-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .it-main b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .it-main small { font-size: 12px; color: var(--dim); }
.it-price { font-weight: 800; font-size: 14px; white-space: nowrap; }
.item .it-price { padding: 7px 11px; border-radius: 12px; background: linear-gradient(180deg, #49e283, var(--green-d)); }
.item.poor .it-price { background: rgba(255, 90, 95, .25); color: #ffb3b5; }
.item.locked { opacity: .55; } .item.locked img { filter: grayscale(1) brightness(.7); } .item.locked .it-price { background: rgba(255, 255, 255, .12); }
.bld { display: flex; gap: 14px; align-items: center; margin: 4px 0 12px; }
.bld-img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .35)); flex: none; }
.bld-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.state { font-size: 14px; font-weight: 700; color: var(--dim); }
.prog { height: 10px; border-radius: 9px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #49e283, #b8ff6a); transition: width 1s linear; }
.cd { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.contracts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.contract { padding: 8px 4px; border-radius: 14px; background: linear-gradient(180deg, #4f7dff, #2a4fd8); box-shadow: 0 3px 0 #1b3496; transition: transform .1s; }
.contract small { display: block; font-size: 11px; opacity: .85; } .contract b { font-size: 14px; }
.bld-actions { display: flex; gap: 8px; }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 14px; } .stars em { font-style: normal; color: rgba(255, 255, 255, .22); }

/* ---------- first-land picker ---------- */
#scout { position: absolute; left: 0; right: 0; bottom: calc(84px + var(--sb)); padding: 0 0 6px; }
#scout[hidden] { display: none; }
body.sheet-open #scout { display: none; }
.scout-msg { margin: 0 14px; padding: 16px; border-radius: 20px; background: var(--panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; }
.scout-msg .btn { margin-left: auto; white-space: nowrap; }
.radar { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--green); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.scout-head { margin: 0 14px 8px; padding: 10px 14px; border-radius: 16px; background: var(--panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); }
.scout-head b { display: block; font-size: 16px; } .scout-head small { color: var(--dim); font-size: 12px; line-height: 1.3; display: block; margin-top: 2px; }
.cards { display: flex; gap: 10px; overflow-x: auto; padding: 4px 14px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.card { position: relative; flex: 0 0 132px; scroll-snap-align: start; padding: 10px 8px; border-radius: 20px; background: linear-gradient(180deg, #1f8f47, #116230); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 8px 20px rgba(4, 8, 30, .4); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s; }
.card img:not(.ic) { height: 62px; } .card b { font-size: 16px; } .card small { font-size: 11px; opacity: .85; line-height: 1.2; }
.card .num { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #116230; font-weight: 800; font-size: 13px; display: grid; place-items: center; }

/* ---------- panels ---------- */
#panel { position: fixed; inset: 0; z-index: 6; padding: calc(var(--st) + 14px) 16px calc(92px + var(--sb)); background: linear-gradient(180deg, rgba(14, 24, 66, .96), rgba(8, 13, 40, .98)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform: translateY(100%); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .25s; display: flex; flex-direction: column; pointer-events: none; }
#panel.open { transform: none; opacity: 1; pointer-events: auto; }
#panel header { display: flex; align-items: center; margin-bottom: 12px; } #panel h2 { flex: 1; font-size: 28px; font-weight: 800; }
.panel-body { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 12px; }
body:has(#panel.open) #tabs { z-index: 7; }
.seg { display: flex; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .08); margin-bottom: 12px; }
.seg button { flex: 1; padding: 8px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--dim); } .seg .on { background: #fff; color: var(--ink); }
.myrank { text-align: center; margin: 2px 0 12px; color: var(--dim); font-weight: 700; } .myrank b { color: var(--gold); font-size: 20px; }
.rk { width: 30px; text-align: center; font-weight: 800; color: var(--dim); flex: none; }
.rk.r1, .rk.r2, .rk.r3 { color: #432700; border-radius: 50%; height: 30px; line-height: 30px; }
.rk.r1 { background: linear-gradient(180deg, #ffe680, #f5a800); } .rk.r2 { background: linear-gradient(180deg, #f1f4fa, #a9b4c8); } .rk.r3 { background: linear-gradient(180deg, #ffc396, #c9722f); }
.fl { font-size: 13px; }
.empty, .note { color: var(--dim); font-size: 13px; line-height: 1.4; } .empty { text-align: center; padding: 30px 20px; } .note { margin: 8px 2px 14px; }
.prof { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .prof .stats { width: 100%; } .prof .btn { width: 100%; }
.bio { color: var(--dim); font-size: 14px; } .socs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.field { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.field.col { flex-direction: column; align-items: stretch; padding: 10px 14px; gap: 4px; }
.field span { font-size: 12px; color: var(--dim); font-weight: 700; min-width: 74px; text-transform: capitalize; }
.field input, .field textarea { flex: 1; background: none; border: 0; outline: 0; padding: 13px 0; font-size: 16px; width: 100%; } .field textarea { padding: 0; height: 64px; resize: none; }
.locked-box { width: 100%; padding: 16px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .3); color: var(--dim); font-size: 14px; font-weight: 700; }
.wallet { display: flex; gap: 10px; } .wallet span { flex: 1; text-align: center; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); font-weight: 800; font-size: 18px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .packs.three { grid-template-columns: repeat(3, 1fr); }
.pack { padding: 12px 8px 10px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .1s; }
.pack > img { height: 64px; transform: scale(var(--k)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); } .pack b { font-size: 20px; }
.buy { padding: 6px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; background: linear-gradient(180deg, #49e283, var(--green-d)); white-space: nowrap; } .buy.g { background: linear-gradient(180deg, #ffd95a, var(--gold-d)); color: #432700; }
.verify.has { opacity: .7; }

/* ---------- onboarding / overlays ---------- */
#onboard, #splash, #levelup { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 24px; }
#onboard[hidden] { display: none; }
#onboard { background: radial-gradient(circle at 50% 30%, rgba(40, 70, 190, .35), rgba(6, 10, 34, .82)); }
#splash { background: var(--ink); z-index: 10; gap: 0; align-content: center; } #splash img { width: 120px; border-radius: 28px; margin-bottom: 20px; }
.ob-card { width: min(100%, 360px); padding: 26px 22px; border-radius: 30px; background: var(--panel); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.logo { width: 104px; height: 104px; border-radius: 26px; box-shadow: 0 12px 30px rgba(58, 134, 255, .5); }
.ob-card h1 { font-size: 38px; font-weight: 900; letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #ffd95a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-card p { color: var(--dim); font-size: 15px; margin-bottom: 6px; } .ob-card small { color: var(--dim); font-size: 12px; line-height: 1.35; }
.ob-card input { width: 100%; padding: 15px; border-radius: 16px; border: 2px solid var(--line); background: rgba(255, 255, 255, .08); font-size: 18px; font-weight: 700; text-align: center; outline: 0; } .ob-card input:focus { border-color: var(--blue); }
.ob-err { min-height: 18px; color: #ff9a9d; font-size: 13px; font-weight: 700; }
.loading { width: 34px; height: 34px; margin: 30px auto; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--gold); animation: spin .8s linear infinite; }
#levelup { background: rgba(6, 10, 34, .7); opacity: 0; pointer-events: none; transition: opacity .25s; } #levelup.show { opacity: 1; pointer-events: auto; }
.lu-card { position: relative; width: min(100%, 320px); padding: 26px 22px; border-radius: 30px; background: linear-gradient(180deg, #2a4fd8, #162a86); border: 2px solid rgba(255, 255, 255, .35); text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; transform: scale(.7); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); overflow: hidden; }
.show .lu-card { transform: none; }
.burst { position: absolute; top: -40%; left: 50%; width: 520px; height: 520px; margin-left: -260px; background: repeating-conic-gradient(rgba(255, 255, 255, .1) 0 12deg, transparent 12deg 24deg); animation: spin 14s linear infinite; pointer-events: none; }
.lu-card > :not(.burst) { position: relative; }
.lu-num { font-size: 84px; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 5px 0 var(--gold-d), 0 12px 24px rgba(0, 0, 0, .4); }
.lu-card p { color: #c9d4ff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.lu-rew { display: flex; gap: 10px; margin-bottom: 10px; } .lu-rew span { padding: 8px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); font-weight: 800; }
#toast { position: fixed; top: calc(var(--st) + 112px); left: 50%; z-index: 11; padding: 10px 18px; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transform: translate(-50%, -20px); opacity: 0; transition: .25s; pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#toast.show { transform: translate(-50%, 0); opacity: 1; } #toast.bad { background: var(--red); color: #fff; }
#fx { position: fixed; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; }
.fly { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.plus-label { position: absolute; font-weight: 900; font-size: 26px; color: var(--gold); text-shadow: 0 2px 0 #7a4a00, 0 4px 12px rgba(0, 0, 0, .5); }
.conf { position: absolute; left: 0; top: 0; width: 9px; height: 14px; border-radius: 2px; }

/* stat tile icons */
.si { width: 13px; height: 13px; flex: none; background: var(--k, var(--dim)); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.si-tag { --m: url(../img/ui/tag.svg); --k: #49e283; } .si-graph { --m: url(../img/ui/graph.svg); --k: #6aa5ff; } .si-pin { --m: url(../img/ui/pin.svg); --k: #ff8a5c; }
.si-rank { --m: url(../img/ui/rank.svg); --k: #ffc62e; } .si-star { --m: url(../img/ui/star.svg); --k: #ffc62e; } .si-home { --m: url(../img/ui/home.svg); --k: #49e283; } .si-building { --m: url(../img/ui/building.svg); --k: #c77dff; }

/* ================= season 1 features ================= */
/* avatars and unlockable frames */
.ava { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; padding: calc(var(--s) * .07); background: rgba(255, 255, 255, .35); box-shadow: none; }
.ava-in { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.ava svg { display: block; width: 100%; height: 100%; }
.fr-gold { background: conic-gradient(#fff3b0, #f5a800, #fff3b0, #c97f00, #fff3b0); }
.fr-fire { background: conic-gradient(from var(--a, 0deg), #ff3d00, #ffb300, #ff3d00, #ff006e, #ff3d00); animation: turn 1.6s linear infinite; box-shadow: 0 0 calc(var(--s) * .3) rgba(255, 90, 0, .7); }
.fr-neon { background: conic-gradient(from var(--a, 0deg), #00f0ff, #7a5cff, #ff2bd6, #00f0ff); animation: turn 3s linear infinite; box-shadow: 0 0 calc(var(--s) * .3) rgba(90, 120, 255, .8); }
.fr-royal { background: conic-gradient(from var(--a, 0deg), #ffe680, #9d4edd, #ffe680, #5a189a, #ffe680); animation: turn 4s linear infinite; box-shadow: 0 0 calc(var(--s) * .35) rgba(157, 78, 221, .8); }
.fr-champion { background: conic-gradient(from var(--a, 0deg), #fff, #ffd23f, #2ec4b6, #3a86ff, #ff5a5f, #fff); animation: turn 2s linear infinite; box-shadow: 0 0 calc(var(--s) * .35) rgba(255, 255, 255, .7); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes turn { to { --a: 360deg; } }

/* HUD: round asset buttons, clock, night */
#side { position: absolute; top: calc(var(--st) + 68px); left: 12px; display: grid; grid-template-columns: 52px 52px; gap: 8px; }
.round { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(4, 8, 30, .35); display: grid; place-items: center; transition: transform .12s; }
.round:active { transform: scale(.92); } .round img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.round.help { width: 34px; height: 34px; align-self: center; justify-self: center; font-weight: 900; font-size: 18px; color: var(--gold); }
.round.dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--red); border: 2px solid #fff; animation: pulse 1.2s infinite; }
body.sheet-open #side, body.scouting #side { opacity: .0; pointer-events: none; } #side { transition: opacity .25s; }
.pill.clock { font-size: 13px; padding: 5px 12px 5px 8px; display: flex; align-items: center; gap: 6px; color: #dfe6ff; }
.sky { width: 16px; height: 16px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 8px #ffd23f; }
.sky-evening { background: #ff8a3c; box-shadow: 0 0 8px #ff8a3c; } .sky-night, .sky-dawn { background: transparent; box-shadow: inset -5px -2px 0 0 #e8ecff; }

/* status card (fisherman, prisoner, renewal) */
#status { position: absolute; left: 12px; right: 70px; bottom: calc(86px + var(--sb)); padding: 10px 12px; border-radius: 20px; background: var(--panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(4, 8, 30, .4); display: flex; gap: 10px; align-items: center; }
#status[hidden], body.sheet-open #status, body.scouting #status { display: none; }
#status > img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .st-main b { font-size: 15px; } .st-main small { font-size: 12px; color: var(--dim); line-height: 1.25; }
.st-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .st-acts .btn { padding: 8px 12px; font-size: 13px; border-radius: 12px; box-shadow: none; flex: 0 1 auto; }

/* boats, chests, royal avatars on the map */
.boat { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.boat img { width: 54px; display: block; filter: drop-shadow(0 4px 4px rgba(0, 40, 90, .45)); }
.boat-in { position: relative; animation: float 2.4s ease-in-out infinite alternate; }
.boat small { font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #003; }
.boat i { position: absolute; top: -12px; right: -6px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; opacity: 0; }
.boat[data-state=sleep] .boat-in { animation-duration: 4s; filter: saturate(.5) brightness(.8); } .boat[data-state=sleep] i { opacity: 1; animation: zzz 2s infinite; }
.boat[data-state=sail] .boat-in { animation: sail 6s ease-in-out infinite; }
@keyframes float { to { transform: translateY(-4px) rotate(3deg); } }
@keyframes sail { 0%, 100% { transform: translate(0, 0); } 45%, 55% { transform: translate(70px, -26px) rotate(-4deg); } }
@keyframes zzz { 0% { transform: translate(0, 4px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(6px, -8px); opacity: 0; } }
/* MapLibre places markers with a transform on the outer element, so animations go on an inner one */
.chest { width: 46px; height: 46px; } .chest-in { display: block; width: 100%; height: 100%; animation: bob .7s infinite alternate ease-in-out; filter: drop-shadow(0 0 10px rgba(255, 210, 63, .9)); } .chest img { width: 100%; }
.royal-in { display: block; } body.far .royal { display: none; }
.royal { pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.pose-wave { animation: wave 1.2s ease-in-out infinite; transform-origin: 50% 100%; } .pose-flex { animation: flex 1s ease-in-out infinite; } .pose-king { animation: bob 1.4s infinite alternate; filter: drop-shadow(0 0 10px #ffd23f); }
@keyframes wave { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } @keyframes flex { 50% { transform: scale(1.18); } }

/* marketplace sidebar */
#market { position: fixed; top: 0; bottom: 0; left: 0; z-index: 4; width: min(74vw, 330px); padding: calc(var(--st) + 12px) 12px calc(var(--sb) + 12px); background: linear-gradient(180deg, rgba(14, 24, 66, .97), rgba(8, 13, 40, .98)); border-right: 1px solid var(--line); box-shadow: 14px 0 40px rgba(4, 8, 30, .5); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2, .9, .25, 1); display: flex; flex-direction: column; gap: 8px; }
#market.open { transform: none; }
#market header { display: flex; align-items: center; gap: 8px; } #market header img { width: 38px; } #market h2 { flex: 1; font-size: 20px; font-weight: 800; }
#market input[type=search] { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); font-size: 15px; outline: 0; -webkit-appearance: none; }
#market .seg { margin: 0; } #market .seg button { font-size: 12px; padding: 7px 2px; }
.chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: none; } .chips::-webkit-scrollbar { display: none; } .chips.wrap { flex-wrap: wrap; overflow: visible; }
.chips button { padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, .09); font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.chips button.on { background: #fff; color: var(--ink); } .chips button:disabled { opacity: .55; }
.mk-list { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: none; } .mk-list::-webkit-scrollbar { display: none; }
.mk-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, .07); text-align: left; flex-wrap: wrap; }
.mk-go { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-align: left; } .mk-row .it-price { font-size: 13px; }
.mk-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .mk-acts { display: flex; gap: 6px; width: 100%; } .mk-acts .btn { flex: 1; padding: 7px; font-size: 13px; box-shadow: none; border-radius: 10px; }
.st { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 9px; background: rgba(255, 255, 255, .12); } .st-accepted { background: var(--green-d); } .st-rejected, .st-void { background: #7a2b3a; }
.hot { color: var(--gold); font-weight: 800; }
body.market-open #top, body.market-open #side, body.market-open #tabs, body.market-open #fabs, body.market-open #status { opacity: 0; pointer-events: none; }
body.market-open #sheet { z-index: 5; left: 0; }

/* trade forms in the plot sheet */
.trade, .trade-form { margin-top: 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); padding: 10px 12px; }
.trade { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; } .trade .btn { padding: 8px 12px; font-size: 13px; }
.trade-form summary { font-weight: 800; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; } .trade-form summary::after { content: "+"; color: var(--green); font-size: 18px; line-height: 1; } .trade-form[open] summary::after { content: "–"; }
.tf { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tf input { flex: 1 1 120px; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); font-size: 15px; outline: 0; } .tf .btn { padding: 10px 14px; font-size: 14px; box-shadow: none; }
.keep { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .btn.wide, .wide { width: 100%; margin-top: 8px; }
.contracts.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
.item.lux { background: linear-gradient(90deg, rgba(255, 198, 46, .22), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px rgba(255, 198, 46, .35); }
.item .it-price { max-width: 46%; white-space: normal; text-align: center; font-size: 12px; }
.link { display: block; margin-top: 6px; color: #9fd0ff; font-weight: 800; font-size: 13px; }

/* events, guide, rules, prison, profile editor */
.ev { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-bottom: 8px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.ev > img { width: 58px; height: 58px; object-fit: contain; flex: none; } .ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ev-main b { font-size: 16px; } .ev-main small { font-size: 12.5px; color: var(--dim); }
.x2 { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(180deg, #4f7dff, #2a4fd8); font-weight: 900; font-size: 22px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0 2px; }
.week span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0; border-radius: 10px; background: rgba(255, 255, 255, .08); } .week img { width: 20px; height: 20px; object-fit: contain; } .week small { font-size: 9px; } .week b { font-size: 10px; }
.week .got { opacity: .4; } .week .now { background: linear-gradient(180deg, #ffd95a, var(--gold-d)); color: #432700; } .week .now small { color: #432700; }
.lvl-card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .08); margin-bottom: 12px; } .lvl-card img { width: 60px; } .lvl-card > div { flex: 1; display: flex; flex-direction: column; gap: 5px; } .lvl-card small { color: var(--dim); font-size: 12px; }
.steps { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid rgba(255, 255, 255, .14); }
.steps li { position: relative; padding: 9px 0 9px 16px; font-size: 14px; color: var(--dim); font-weight: 700; } .steps li i { position: absolute; left: -24.5px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: #2b376e; border: 3px solid #101a45; }
.steps li.done { color: #fff; } .steps li.done i { background: var(--green) url(../img/ui/check.svg) center/60% no-repeat; }
.rule-intro { color: var(--dim); font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.rule { border-radius: 16px; background: rgba(255, 255, 255, .07); margin-bottom: 8px; overflow: hidden; }
.rule summary { padding: 14px 16px; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .rule summary::-webkit-details-marker, .trade-form summary::-webkit-details-marker { display: none; }
.rule summary::after { content: "›"; font-size: 22px; line-height: 1; color: var(--gold); transition: transform .2s; } .rule[open] summary::after { transform: rotate(90deg); } .rule[open] summary { background: rgba(255, 255, 255, .06); }
.rule-body { padding: 4px 16px 14px; font-size: 14px; line-height: 1.5; color: #d5dcf7; -webkit-user-select: text; user-select: text; } .rule-body ul { margin: 8px 0; padding-left: 18px; } .rule-body li { margin-bottom: 6px; } .rule-body b { color: #fff; } .rule-body p { margin: 8px 0; }
.rule-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; } .rule-body th, .rule-body td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .rule-body th { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.inmate { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, .07); flex-wrap: wrap; } .inmate .btn { padding: 7px 11px; font-size: 12.5px; box-shadow: none; border-radius: 10px; flex: 0 0 auto; }
.av-edit { display: flex; gap: 12px; align-items: flex-start; } #av-prev { flex: none; padding-top: 4px; } .av-opts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.opt-row { display: flex; align-items: center; gap: 8px; } .opt-row > span { width: 58px; font-size: 11px; font-weight: 700; color: var(--dim); flex: none; }
.opts { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 2px; } .opts::-webkit-scrollbar { display: none; }
.opt { width: 30px; height: 30px; border-radius: 50%; flex: none; padding: 0; overflow: hidden; border: 2px solid transparent; display: grid; place-items: center; } .opt.on { border-color: #fff; box-shadow: 0 0 0 2px var(--blue); } .opt:disabled { opacity: .3; }
.opt i { width: 100%; height: 100%; display: block; } .mini { width: 100%; height: 100%; display: block; } .mini svg { width: 100%; height: 100%; display: block; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 6px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 14px; background: rgba(255, 255, 255, .06); opacity: .35; filter: grayscale(1); } .bdg.has { opacity: 1; filter: none; background: linear-gradient(180deg, rgba(255, 198, 46, .28), rgba(255, 255, 255, .06)); } .bdg img { width: 34px; } .bdg small { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.1; }
.wheel { position: fixed; inset: 0; z-index: 13; display: grid; place-items: center; align-content: center; gap: 18px; background: rgba(6, 10, 34, .82); } .wheel img { width: 200px; animation: spinwheel 1.9s cubic-bezier(.2, .8, .2, 1) forwards; } .wheel b { font-size: 20px; min-height: 28px; text-align: center; padding: 0 20px; }
@keyframes spinwheel { to { transform: rotate(1500deg); } }
#toast img.ic { width: 18px; height: 18px; }

/* friends, presence, chat */
.i-chat { --m: url(../img/ui/chat.svg); } .i-send { --m: url(../img/ui/send.svg); }
.pi { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.pi-ios { --m: url(../img/ui/ios.svg); } .pi-android { --m: url(../img/ui/android.svg); } .pi-pc { --m: url(../img/ui/pc.svg); }
.presence { font-size: 12px; color: var(--dim); } .presence .on { color: #49e283; }
.prof .presence { margin-top: -4px; }
.ava-wrap { position: relative; display: inline-block; flex: none; line-height: 0; }
.live { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: #2fd36b; border: 2.5px solid #111c47; }
.friend { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px 6px 6px 10px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.fr-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; text-align: left; padding: 3px 0; }
.chat-btn { position: relative; width: 44px; height: 44px; flex: none; border-radius: 14px; background: linear-gradient(180deg, #4f7dff, #2a4fd8); display: grid; place-items: center; }
.chat-btn .i { width: 22px; height: 22px; }
.badge-n { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 19px; text-align: center; border: 2px solid #111c47; }
#tabs button { position: relative; } #tabs .badge-n { top: 2px; right: calc(50% - 22px); } .badge-n[hidden] { display: none; }
.row2 { display: flex; gap: 8px; width: 100%; } .row2 .btn { flex: 1; gap: 6px; } .row2 .i { width: 18px; height: 18px; }
.chat-head { display: flex; align-items: center; gap: 10px; } .chat-head > span:last-child { display: flex; flex-direction: column; line-height: 1.15; } .chat-head b { font-size: 19px; }
#panel h2:has(.chat-head) { font-size: inherit; }
.msgs { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 70px; }
.msg { max-width: 78%; align-self: flex-start; display: flex; flex-direction: column; } .msg.mine { align-self: flex-end; align-items: flex-end; }
.msg span { padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .12); font-size: 15px; line-height: 1.35; word-break: break-word; -webkit-user-select: text; user-select: text; }
.msg.mine span { border-radius: 18px 18px 6px 18px; background: linear-gradient(180deg, #4f7dff, #2a4fd8); }
.msg small { font-size: 10px; color: var(--dim); margin: 2px 6px 0; }
.chat-bar { position: absolute; left: 12px; right: 12px; bottom: calc(92px + var(--sb)); display: flex; gap: 8px; padding: 6px; border-radius: 22px; background: rgba(20, 30, 80, .95); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.chat-bar input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; outline: 0; background: none; font-size: 16px; }
.send { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(180deg, #49e283, var(--green-d)); display: grid; place-items: center; flex: none; } .send .i { width: 20px; height: 20px; }
.note.center { text-align: center; position: absolute; left: 16px; right: 16px; bottom: calc(100px + var(--sb)); }

/* landmark traffic */
.traffic { pointer-events: none; } .traffic img { width: 64px; display: block; filter: drop-shadow(0 6px 6px rgba(0, 30, 70, .45)); transition: none; }
.traffic.airport img { width: 58px; filter: drop-shadow(0 18px 8px rgba(0, 0, 0, .25)); }

/* gifts */
#gifts { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; padding: 8px 14px calc(16px + var(--sb)); border-radius: 26px 26px 0 0; background: linear-gradient(180deg, rgba(30, 18, 70, .97), rgba(12, 10, 40, .98)); border-top: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
#gifts.open { transform: none; }
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
.gift { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 16px; border: 2px solid transparent; background: rgba(255, 255, 255, .06); transition: transform .1s; }
.gift:active { transform: scale(.94); } .gift.on { border-color: var(--gold); background: rgba(255, 198, 46, .16); } .gift.poor { opacity: .5; }
.gift > img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .4)); } .gift.on > img { animation: bob .6s infinite alternate; }
.gift small { font-size: 10.5px; font-weight: 700; color: var(--dim); text-align: center; line-height: 1.1; } .gift b { font-size: 12px; color: var(--gold); }
.gift-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gift-foot > span { display: flex; flex-direction: column; font-weight: 800; color: var(--gold); } .gift-foot small { font-size: 11px; color: var(--dim); font-weight: 600; }
.gift-wall { width: 100%; text-align: left; } .gw-head { display: flex; justify-content: space-between; align-items: center; } .gw-head .link { margin: 0; }
.gw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .gw.big { grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
.gw-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 198, 46, .16), rgba(255, 255, 255, .04)); }
.gw-item > img { width: 46px; height: 46px; object-fit: contain; } .gw-item b { font-size: 13px; } .gw-item small { font-size: 11px; color: var(--gold); }
.fans { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .fans > small { width: 100%; color: var(--dim); font-size: 11px; font-weight: 700; }
.fan { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; } .fan .rk { width: 22px; height: 22px; line-height: 22px; font-size: 12px; }
.gift-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); } .gift-row > img { width: 40px; height: 40px; object-fit: contain; }
.gift-ev { align-self: center; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; margin: 4px 0; border-radius: 18px; background: linear-gradient(90deg, rgba(255, 198, 46, .25), rgba(199, 125, 255, .2)); border: 1px solid rgba(255, 198, 46, .45); text-align: left; }
.gift-ev > img { width: 48px; height: 48px; object-fit: contain; animation: bob .9s infinite alternate ease-in-out; } .gift-ev span { display: flex; flex-direction: column; } .gift-ev b { font-size: 15px; } .gift-ev small { font-size: 11px; color: #e4dcff; }
.gift-btn { width: 42px; height: 42px; flex: none; border-radius: 50%; background: linear-gradient(180deg, #ff7ab6, #c2185b); display: grid; place-items: center; } .gift-btn img { width: 30px; height: 30px; }
.gift-fx { position: fixed; inset: 0; z-index: 14; display: grid; place-items: center; background: radial-gradient(circle, rgba(40, 20, 90, .35), rgba(5, 5, 25, .78)); animation: fadein .25s; overflow: hidden; }
.gift-fx.out { opacity: 0; transition: opacity .45s; }
.gift-fx > img { position: absolute; width: 46vmin; max-width: 300px; animation: giftin .9s cubic-bezier(.3, 1.6, .5, 1) both, float 1.6s .9s ease-in-out infinite alternate; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.gift-fx .rays { position: absolute; width: 160vmax; height: 160vmax; background: repeating-conic-gradient(rgba(255, 220, 120, .14) 0 8deg, transparent 8deg 20deg); animation: spin 9s linear infinite; opacity: 0; }
.gift-fx.t2 .rays, .gift-fx.t3 .rays { opacity: 1; } .gift-fx.t3 .rays { background: repeating-conic-gradient(rgba(255, 220, 120, .22) 0 8deg, rgba(199, 125, 255, .12) 8deg 20deg); }
.gift-fx .glow { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 90, .55), transparent 65%); animation: pulse 1.2s infinite; }
.gift-fx i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .gift-fx i img { position: absolute; width: 34px; margin: -17px; opacity: 0; animation: burst 1.4s var(--d) ease-out forwards; transform: rotate(var(--a)) translateY(0); }
.gift-fx.t1 i img { width: 22px; margin: -11px; } .gift-fx.t3 i img { width: 46px; margin: -23px; animation-duration: 2s; }
.gift-fx .cap { position: absolute; bottom: 18vh; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: giftin .6s .4s both; text-align: center; padding: 0 20px; }
.gift-fx .cap b { font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 #7a4a00, 0 6px 20px rgba(0, 0, 0, .6); } .gift-fx .cap span { font-weight: 800; color: var(--gold); }
@keyframes giftin { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes float { to { transform: translateY(-14px) scale(1.03); } }
@keyframes burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-42vmin) scale(1); } }
@keyframes fadein { from { opacity: 0; } }
body.shake #map, body.shake .gift-fx > img { animation: shake .5s; } @keyframes shake { 20%, 60% { transform: translate(-6px, 3px); } 40%, 80% { transform: translate(6px, -3px); } }

/* ================= season 2 ================= */
#side { grid-template-columns: 48px 48px; gap: 7px; } #side .round { width: 48px; height: 48px; } #side .round img { width: 36px; height: 36px; }
#side .round.help { width: 32px; height: 32px; }
.round.is-live { box-shadow: 0 0 0 3px #ff3d6e, 0 0 18px rgba(255, 61, 110, .7); animation: pulse 1.2s infinite; }
/* pass frames and pose */
.fr-silver { background: conic-gradient(#ffffff, #9aa6b8, #f5f7fb, #6d7686, #ffffff); }
.fr-aurora { background: conic-gradient(from var(--a, 0deg), #36f1cd, #3a86ff, #c77dff, #ff6fd8, #36f1cd); animation: turn 5s linear infinite; box-shadow: 0 0 calc(var(--s) * .35) rgba(54, 241, 205, .65); }
.fr-diamond { background: conic-gradient(from var(--a, 0deg), #e8fbff, #7fe7ff, #ffffff, #b9c7ff, #e8fbff); animation: turn 2.5s linear infinite; box-shadow: 0 0 calc(var(--s) * .4) rgba(160, 230, 255, .9), inset 0 0 6px #fff; }
.pose-dance { animation: dance .9s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes dance { 25% { transform: rotate(-10deg) translateY(-4px); } 50% { transform: translateY(0); } 75% { transform: rotate(10deg) translateY(-4px); } }
/* neighbourhood */
.hood { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -4px 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 13px; }
.hood > span { font-weight: 800; } .hood b { color: #49e283; } .hood small { color: var(--dim); width: 100%; } .hood.on { background: rgba(73, 226, 131, .14); box-shadow: inset 0 0 0 1px rgba(73, 226, 131, .4); }
/* missions */
.mission { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.mission .it-main { gap: 5px; } .mission .btn { padding: 9px 14px; font-size: 14px; } .mission.got { opacity: .55; } .mission.bonus { background: linear-gradient(90deg, rgba(255, 198, 46, .2), rgba(255, 255, 255, .05)); }
/* season pass */
.pass-head { display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 10px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 198, 46, .25), rgba(199, 125, 255, .2)); }
.pass-head img { width: 64px; } .pass-head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; } .pass-head small { color: var(--dim); font-size: 12px; }
.pass-cols { display: grid; grid-template-columns: 1fr 40px 1fr; text-align: center; font-size: 12px; font-weight: 800; color: var(--dim); margin: 12px 0 6px; }
.pass-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.pass-tier { width: 32px; height: 32px; margin: auto; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: rgba(255, 255, 255, .1); color: var(--dim); }
.pass-row.open .pass-tier { background: linear-gradient(180deg, #ffd95a, var(--gold-d)); color: #432700; }
.pass-cell { position: relative; min-height: 48px; padding: 8px 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pass-cell.premium { background: linear-gradient(180deg, rgba(199, 125, 255, .18), rgba(255, 255, 255, .04)); }
.pass-cell.ready { box-shadow: 0 0 0 2px var(--gold); animation: pulse 1.4s infinite; } .pass-cell.got { opacity: .45; } .pass-cell:disabled:not(.got) { opacity: .7; }
.pass-cell i { position: absolute; top: 3px; right: 6px; font-style: normal; font-size: 11px; } .pass-cell .cos { color: #ffe08a; font-size: 12px; }
/* auction */
.lot { padding: 10px; margin-bottom: 8px; border-radius: 16px; background: rgba(255, 255, 255, .07); } .lot.mine { box-shadow: inset 0 0 0 2px #49e283; }
.lot-main { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; } .lot-main .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lot .bid-form { display: flex; gap: 6px; margin-top: 8px; } .lot .bid-form input { flex: 1; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); font-size: 15px; outline: 0; }
.lot .bid-form .btn { box-shadow: none; } .lot .lead { margin-top: 8px; color: #49e283; font-weight: 800; font-size: 13px; }
/* clans */
.tag { display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: .04em; background: var(--c); color: #fff; vertical-align: 2px; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.clan-head { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, transparent), rgba(255, 255, 255, .05)); margin-bottom: 8px; }
.clan-head img { width: 60px; } .clan-head > div { display: flex; flex-direction: column; gap: 3px; } .clan-head b { font-size: 18px; } .clan-head small { color: var(--dim); }
.bank-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); margin-bottom: 10px; flex-wrap: wrap; }
.bank-box > span { flex: 1; display: flex; flex-direction: column; } .bank-box small { font-size: 11px; color: var(--dim); } .bank-box .btn { padding: 8px 12px; font-size: 13px; box-shadow: none; }
.clan-form { margin-bottom: 6px; } .lm-ic { width: 40px; height: 40px; object-fit: contain; } .msg .who { font-size: 11px; color: var(--gold); margin: 0 6px 2px; } .contract.clan { background: linear-gradient(180deg, #c77dff, #7b2cbf); box-shadow: 0 3px 0 #4a1a75; }
.clan-msgs { padding-bottom: 80px; }
/* bank loan */
.bank-wrap h4 { margin-top: 4px; } .loan { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); margin-bottom: 6px; }
.loan > img { width: 56px; height: 56px; object-fit: contain; flex: none; } .loan small { color: var(--dim); font-size: 12px; line-height: 1.35; }
/* world events on the map */
.ev-pin { position: relative; width: 54px; height: 54px; } .ev-in { display: block; width: 100%; height: 100%; animation: bob 1.1s infinite alternate ease-in-out; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); } .ev-pin img { width: 100%; }
.ev-pin .ring { position: absolute; left: 50%; bottom: -8px; width: 80px; height: 26px; margin-left: -40px; border-radius: 50%; border: 3px solid rgba(255, 210, 63, .8); animation: ripple 1.8s infinite; pointer-events: none; }
@keyframes ripple { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
button.ev { width: 100%; text-align: left; }
/* wide rule tables scroll sideways on a phone */
.rule-body .tbl { overflow-x: auto; margin: 8px -16px; padding: 0 16px; scrollbar-width: none; } .rule-body .tbl::-webkit-scrollbar { display: none; }
.rule-body .tbl table { margin: 0; min-width: 100%; } .rule-body .tbl td, .rule-body .tbl th { white-space: nowrap; }

/* building view switch: the map button shows a diamond (switch to diagonal) or a square (switch to front) */
.view-fab i { display: none; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 4px; }
.view-fab[data-current="iso"] .vi-front { display: block; } .view-fab[data-current="front"] .vi-iso { display: block; transform: rotate(45deg) scale(.85); }
.view-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.view-pick button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 2px solid transparent; font-size: 13px; font-weight: 700; }
.view-pick button.on { border-color: var(--gold); background: rgba(255, 198, 46, .14); } .view-pick img { width: 72px; height: 72px; object-fit: contain; }