/* THE ANTHILL — THE UNDEADZ */
:root {
  --soil-0: #0b0705; --soil-1: #140d09; --soil-2: #1d140e; --soil-3: #2a1d15; --soil-4: #3a291d;
  --bone: #e8dcc0; --bone-dim: #a99b80; --muted: #7d6f5c;
  --toxic: #9be15d; --toxic-dim: #5f8f35; --amber: #ffb02e; --blood: #c8402f; --ice: #7fb7c9;
  --radius: 14px; --radius-sm: 9px;
  --font-display: 'Creepster', 'Rubik', system-ui, sans-serif;
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --tabs-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--soil-0); color: var(--bone); font-family: var(--font); font-size: 15px; line-height: 1.45; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
a { color: var(--toxic); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
.mono { font-family: var(--mono); font-size: .9em; word-break: break-all; }
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--toxic); font-weight: 700; }
.hint { color: var(--bone-dim); font-size: 13px; margin: .5em 0; }
.ok { color: var(--toxic); } .bad { color: var(--blood); }
.lore { color: var(--bone-dim); font-style: italic; margin: .25em 0 1em; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; letter-spacing: .04em; cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .2s, background .2s, opacity .2s; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #b4f27a, var(--toxic) 55%, var(--toxic-dim)); color: #102006; box-shadow: 0 0 0 1px #c9ff98 inset, 0 6px 22px rgba(155,225,93,.25); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px #c9ff98 inset, 0 8px 30px rgba(155,225,93,.45); }
.btn-ghost { background: transparent; border-color: var(--soil-4); color: var(--bone); }
.btn-ghost:hover { border-color: var(--toxic-dim); color: var(--toxic); }
.btn-big { min-height: 56px; padding: 0 30px; font-size: 17px; letter-spacing: .12em; }
.btn-mini { min-height: 34px; padding: 0 12px; font-size: 13px; background: var(--soil-3); border-color: var(--soil-4); }
.icon-btn { background: none; border: 0; min-width: 44px; min-height: 44px; cursor: pointer; font-size: 18px; color: var(--bone-dim); }
:focus-visible { outline: 2px solid var(--toxic); outline-offset: 2px; }

/* Screens */
.screen { display: none; min-height: 100vh; min-height: 100dvh; }
.screen.active { display: block; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── ENTRY ── */
#boot { position: relative; overflow: hidden; }
.boot-bg { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, #2c1f15 0%, #120b07 55%, #050302 100%); }
.dirt-layer { position: absolute; left: -5%; right: -5%; height: 40%; border-radius: 50%; opacity: .5; }
.dirt-layer.l1 { top: 30%; background: radial-gradient(ellipse at center, #2a1b12, transparent 70%); }
.dirt-layer.l2 { top: 55%; background: radial-gradient(ellipse at center, #1c120c, transparent 70%); }
.dirt-layer.l3 { top: 75%; background: radial-gradient(ellipse at center, rgba(155,225,93,.06), transparent 60%); }
.boot-tunnel { position: absolute; left: 50%; top: 0; width: 120px; height: 100%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.7) 50%, rgba(0,0,0,.55) 70%, transparent); filter: blur(6px); }
.boot-ants span { position: absolute; left: 50%; top: -20px; width: 10px; height: 18px; border-radius: 50%; background: #050302; box-shadow: 0 7px 0 -1px #050302, 0 -6px 0 -2px #050302; animation: march 7s linear infinite; }
.boot-ants span:nth-child(2) { animation-delay: 1.4s; margin-left: -18px; }
.boot-ants span:nth-child(3) { animation-delay: 2.8s; margin-left: 14px; }
.boot-ants span:nth-child(4) { animation-delay: 4.2s; margin-left: -6px; }
.boot-ants span:nth-child(5) { animation-delay: 5.6s; margin-left: 20px; }
@keyframes march { from { transform: translateY(0); } to { transform: translateY(110vh); } }
.boot-inner { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 18px 120px; gap: 10px; }
.title { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 15vw, 150px); line-height: .85; margin: 6px 0 4px; color: var(--bone); letter-spacing: .02em; text-shadow: 0 0 40px rgba(155,225,93,.25), 0 6px 0 #000; }
.title span { display: block; font-size: .38em; color: var(--toxic); letter-spacing: .4em; margin-bottom: .1em; }
.tagline { max-width: 34ch; font-size: clamp(15px, 2.2vw, 19px); color: var(--bone-dim); margin: 0 0 8px; }
.boot-status { font-family: var(--mono); font-size: 13px; color: var(--toxic); min-height: 1.4em; margin: 12px 0 14px; animation: flicker 3s infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .3; } 96% { opacity: 1; } }
.safety { font-size: 12px; }
.boot-foot { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 12px; color: var(--muted); padding: 0 12px; }
.boot-foot a { color: var(--bone-dim); text-decoration: none; }
.boot-foot a:hover { color: var(--toxic); }
.chain-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--bone-dim); }
.net-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.net-dot.ok { background: var(--toxic); box-shadow: 0 0 8px var(--toxic); }
.net-dot.bad { background: var(--blood); box-shadow: 0 0 8px var(--blood); }

/* ── GATE ── */
#gate { position: relative; }
.gate-bg { position: fixed; inset: 0; background: radial-gradient(90% 60% at 50% 30%, #241810, #070403 80%); }
.gate-body { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: center; padding: 40px 20px; gap: 12px; }
.gate-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 7vw, 58px); line-height: 1; margin: 6px 0; letter-spacing: .02em; }
.gate-title.glow { color: var(--toxic); text-shadow: 0 0 30px rgba(155,225,93,.4); }
.big { font-size: 20px; } .big b { font-size: 1.6em; color: var(--toxic); }
.welcome-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px; }
.welcome-face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--toxic-dim); box-shadow: 0 0 18px rgba(155,225,93,.25); animation: rise .6s cubic-bezier(.2,1.4,.4,1) both; }
.welcome-face img { width: 100%; height: 100%; object-fit: cover; }
@keyframes rise { from { transform: translateY(30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.digging { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spinner-ant { width: 56px; height: 56px; border-radius: 50%; border: 3px dashed var(--toxic); animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.not-member .stats { margin: 16px 0; }

/* ── GAME ── */
#game.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.hud { display: flex; align-items: center; gap: 12px; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); background: linear-gradient(180deg, #1a110c, #120b08); border-bottom: 1px solid var(--soil-3); }
.hud-brand { display: flex; align-items: center; gap: 8px; }
.brand-skull { color: var(--toxic); font-size: 20px; }
.brand-name { font-family: var(--font-display); font-size: 24px; letter-spacing: .04em; white-space: nowrap; }
.hud-resources { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.hud-res { display: flex; align-items: baseline; gap: 5px; padding: 4px 10px; background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 999px; font-size: 14px; }
.hud-res i { font-style: normal; } .hud-res b { font-variant-numeric: tabular-nums; }
.hud-res small { color: var(--muted); font-size: 11px; }
.hud-count { display: flex; align-items: baseline; gap: 5px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--toxic-dim); background: rgba(155,225,93,.07); }
.hud-count .eyebrow { font-size: 9px; } .hud-count b { color: var(--toxic); font-size: 18px; } .hud-count small { color: var(--muted); }
.wallet-chip { display: flex; align-items: center; gap: 7px; background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 999px; padding: 0 12px; min-height: 36px; cursor: pointer; font-family: var(--mono); font-size: 12px; }
.community-bar { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #0f0906; border-bottom: 1px solid var(--soil-2); font-size: 12px; }
.cb-level { font-weight: 900; letter-spacing: .1em; color: var(--amber); white-space: nowrap; }
.cb-track { flex: 1; height: 8px; border-radius: 99px; background: var(--soil-3); overflow: hidden; min-width: 60px; }
.cb-fill { height: 100%; background: linear-gradient(90deg, var(--amber), #ffdd7a); box-shadow: 0 0 10px var(--amber); transition: width .8s ease; }
.cb-num { font-variant-numeric: tabular-nums; color: var(--bone-dim); white-space: nowrap; }
.cb-event { color: var(--toxic); white-space: nowrap; font-weight: 700; }
.mode-banner { background: #3a2a10; color: #ffdd9a; font-size: 12px; padding: 6px 14px; text-align: center; }
.playfield { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; }
.world { position: relative; min-height: 0; overflow: hidden; background: var(--soil-0); display: flex; align-items: center; justify-content: center; }
.world-svg { width: 100%; height: 100%; display: block; }
.panel { overflow-y: auto; padding: 16px 16px calc(var(--tabs-h) + 24px); background: linear-gradient(180deg, #170f0b, #100a07); border-left: 1px solid var(--soil-3); overscroll-behavior: contain; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: rgba(13,8,6,.96); border-top: 1px solid var(--soil-3); backdrop-filter: blur(8px); z-index: 20; }
.tabs button { position: relative; flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tabs button i { font-style: normal; font-size: 20px; }
.tabs button[aria-selected="true"] { color: var(--toxic); }
.tabs button[aria-selected="true"]::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--toxic); box-shadow: 0 0 10px var(--toxic); }
.tabs button[data-badge]:not([data-badge=""])::after { content: attr(data-badge); position: absolute; top: 6px; left: calc(50% + 8px); background: var(--soil-4); color: var(--bone); border-radius: 99px; font-size: 10px; padding: 1px 6px; }
.tabs button.has-ready::after { background: var(--toxic) !important; color: #102006 !important; animation: bump 1.2s infinite; }
@keyframes bump { 50% { transform: scale(1.2); } }

/* World SVG */
.stratum { fill: none; stroke: rgba(255,230,190,.04); stroke-width: 2; }
.pebble { fill: rgba(255,230,190,.05); }
.bone { fill: rgba(232,220,192,.08); }
.sky { fill: #0a0705; }
.mound { fill: #3a291b; }
.entrance { fill: #000; }
.grass { stroke: #4a5a2a; stroke-width: 2; fill: none; stroke-linecap: round; }
.tunnel { opacity: .12; transition: opacity .8s; }
.tunnel.dug { opacity: .55; } .tunnel.active { opacity: 1; }
.tunnel-outer { fill: none; stroke: #070403; stroke-width: 34; stroke-linecap: round; }
.tunnel-inner { fill: none; stroke: #2a1d14; stroke-width: 24; stroke-linecap: round; }
.room { cursor: pointer; transition: opacity .6s; }
.room-wall { fill: #070403; transform-box: fill-box; transform-origin: center; transform: scale(1.07); }
.room-floor { fill: url(#roomFill); stroke: #4d3726; stroke-width: 2; transition: fill .4s, stroke .3s; }
.room-scaffold { opacity: 0; transition: opacity .4s; }
.room-glyph { font-size: 34px; text-anchor: middle; dominant-baseline: middle; fill: rgba(232,220,192,.55); }
.room-label { font: 900 14px var(--font); letter-spacing: .12em; text-anchor: middle; fill: var(--bone); paint-order: stroke; stroke: #000; stroke-width: 4px; }
.room-sub { font: 700 11px var(--font); letter-spacing: .1em; text-anchor: middle; fill: var(--amber); paint-order: stroke; stroke: #000; stroke-width: 3px; }
.room-lock { display: none; }
.lock-body { fill: #5a4a3a; stroke: #1a110c; stroke-width: 2; }
.lock-shackle { fill: none; stroke: #8f7a62; stroke-width: 4; }
.build-ring { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.room:hover .room-floor, .room:focus-visible .room-floor { stroke: var(--toxic); }
.room.selected .room-floor { stroke: var(--toxic); stroke-width: 4; filter: drop-shadow(0 0 12px rgba(155,225,93,.6)); }
.room.open .room-glyph { fill: rgba(155,225,93,.7); }
.room.locked .room-floor { fill: #1a120d; stroke: #3a2a1f; stroke-dasharray: 6 5; }
.room.locked .room-glyph { display: none; }
.room.locked .room-lock { display: block; }
.room.building .room-scaffold { opacity: .7; }
.room.building .build-ring { opacity: 1; }
.room.building .room-glyph { fill: var(--amber); }
.room.hidden-room .room-floor { fill: #110b08; stroke: #1d140f; stroke-dasharray: 2 7; }
.room.hidden-room .room-glyph { display: none; }
.room.hidden-room .room-label { fill: var(--muted); }
.room.hidden-room .room-sub { fill: var(--muted); font-style: italic; }
.room.pulse .room-floor { animation: pulse 1s ease; }
@keyframes pulse { 0% { filter: drop-shadow(0 0 0 var(--toxic)); } 40% { filter: drop-shadow(0 0 24px var(--toxic)); } 100% { filter: none; } }
.passage { opacity: 0; transition: opacity 1s; pointer-events: none; }
.passage.rumoured { opacity: .25; }
.passage.found { opacity: 1; pointer-events: auto; }
.passage-hole { fill: #000; stroke: var(--toxic-dim); stroke-width: 2; }
.passage-glow { animation: breathe 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.passage-label { font: 700 10px var(--font); fill: var(--toxic); text-anchor: middle; letter-spacing: .08em; paint-order: stroke; stroke: #000; stroke-width: 3px; display: none; }
.passage.found .passage-label { display: block; }
@keyframes breathe { 50% { transform: scale(1.25); opacity: .6; } }
.ant-body { fill: #0a0604; stroke: #3a2a1f; stroke-width: .8; }
.ant-legs { stroke: #0a0604; stroke-width: 1.4; fill: none; }
.ant-eye { fill: var(--toxic); }
.avatar { animation: bob 2.8s ease-in-out infinite; }
.avatar-ring { fill: #000; stroke: var(--toxic); stroke-width: 2; }
.avatar.busy .avatar-ring { stroke: var(--amber); stroke-dasharray: 4 3; }
.avatar-more { font: 900 13px var(--font); fill: var(--toxic); paint-order: stroke; stroke: #000; stroke-width: 3px; }
@keyframes bob { 50% { transform: translateY(-3px); } }
svg[data-level="1"] .bone { opacity: .5; }

/* Panels */
.panel h3, .room-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: .03em; margin: 2px 0 2px; line-height: 1.05; }
.room-title.mono { font-family: var(--mono); font-size: 20px; }
.sub-head { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); margin: 22px 0 10px; border-bottom: 1px solid var(--soil-3); padding-bottom: 6px; }
.back { margin-bottom: 8px; }
.card { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.card .sub-head { margin-top: 0; }
.locked-card { border: 1px dashed #5a4030; border-radius: var(--radius); padding: 14px; margin: 12px 0; background: repeating-linear-gradient(135deg, #1a110c 0 10px, #1d130e 10px 20px); }
.locked-head { font-weight: 900; letter-spacing: .2em; color: var(--amber); margin-bottom: 8px; }
.blocker p { margin: 6px 0; }
.warn-box { background: #2c1a10; border: 1px solid #6b3b1f; color: #ffcf9e; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.meter { position: relative; height: 22px; border-radius: 99px; background: var(--soil-3); overflow: hidden; margin: 8px 0; }
.meter-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--toxic-dim), var(--toxic)); transition: width .6s ease; }
.meter-build .meter-fill, .meter-community .meter-fill { background: linear-gradient(90deg, #a86c10, var(--amber)); }
.meter-label { position: relative; z-index: 1; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 22px; color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.res-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.res-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: var(--soil-3); border-radius: 99px; font-size: 13px; font-variant-numeric: tabular-nums; }
.res-chip i { font-style: normal; }
.cost .res-chip { background: #2e1712; }
.mission { background: var(--soil-2); border: 1px solid var(--soil-3); border-left: 3px solid var(--toxic-dim); border-radius: var(--radius-sm); padding: 12px; margin: 10px 0; }
.mission.unavailable { border-left-color: #5a4030; opacity: .85; }
.mission.mystery { opacity: .5; }
.mission-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mission-top strong { font-size: 16px; margin-right: auto; }
.mission-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.mission-row .k { width: 40px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.mission .btn, .mission .reasons { margin-top: 10px; }
.reasons p { margin: 4px 0; color: var(--amber); font-size: 13px; }
.tag { font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border-radius: 99px; background: var(--soil-3); color: var(--bone-dim); border: 0; white-space: nowrap; }
.tag-link { cursor: pointer; color: var(--toxic); }
.run { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: var(--radius-sm); padding: 12px; margin: 10px 0; }
.run-top { display: flex; justify-content: space-between; align-items: center; }
.history { list-style: none; padding: 0; margin: 0; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--soil-2); font-size: 13px; }
.history li.bad > span:first-child { color: var(--blood); }
.amt-form { margin-top: 8px; }
.amt-row { display: grid; grid-template-columns: 92px 1fr 44px auto; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; }
.amt-row output { font-variant-numeric: tabular-nums; text-align: right; }
.amt-row input[type=range] { width: 100%; accent-color: var(--toxic); min-height: 30px; }
.amt-form > .btn { width: 100%; margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.stat { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: var(--radius-sm); padding: 9px 11px; text-align: left; }
.stat span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat b { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.event { border-color: var(--toxic-dim); background: linear-gradient(160deg, rgba(155,225,93,.08), var(--soil-2)); }
.event h4 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 4px 0; color: var(--toxic); }
.feed { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.feed li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--soil-2); }
.feed time { color: var(--muted); font-family: var(--mono); font-size: 11px; min-width: 42px; }
.feed-milestone span { color: var(--amber); font-weight: 700; }
.feed-discovery span { color: var(--toxic); }

/* Colony */
.colony-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.colony-head .big { font-size: 18px; } .colony-head .big b { font-size: 40px; font-family: var(--font-display); font-weight: 400; }
.nest-badge { text-align: right; background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: var(--radius-sm); padding: 8px 12px; }
.nest-badge b { display: block; } .nest-badge span { font-size: 12px; color: var(--bone-dim); }
.ladder { margin: 14px 0; }
.ladder-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ladder-steps li { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 8px; padding: 6px 4px; text-align: center; font-size: 10px; color: var(--muted); line-height: 1.15; }
.ladder-steps li b { display: block; font-size: 16px; color: var(--bone-dim); }
.ladder-steps li.on { border-color: var(--toxic-dim); background: rgba(155,225,93,.08); color: var(--bone); }
.ladder-steps li.on b { color: var(--toxic); }
.ladder-next { font-size: 13px; color: var(--bone-dim); }
.ladder-next b { color: var(--amber); }
.undead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.undead { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: var(--radius); overflow: hidden; transition: transform .2s, border-color .2s; }
.undead:hover { transform: translateY(-2px); border-color: var(--c, var(--soil-4)); }
.undead.on_mission { border-color: #6b4a14; }
.undead-art { position: relative; aspect-ratio: 1; background: #000; }
.undead-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.undead-id { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.75); padding: 1px 7px; border-radius: 99px; font-family: var(--mono); font-size: 11px; }
.undead-status { position: absolute; bottom: 6px; left: 6px; right: 6px; background: rgba(40,26,8,.9); color: var(--amber); padding: 2px 7px; border-radius: 99px; font-size: 11px; text-align: center; }
.undead-body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 5px; }
.undead-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rarity { align-self: flex-start; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; color: var(--c); border: 1px solid var(--c); font-weight: 700; }
.ability { font-size: 11px; color: var(--bone-dim); }
.role-select { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
select, input[type=text] { background: var(--soil-1); color: var(--bone); border: 1px solid var(--soil-4); border-radius: 8px; padding: 8px; font: inherit; font-size: 14px; min-height: 40px; width: 100%; }
.meta { font-size: 11px; color: var(--bone-dim); }
.traits summary { font-size: 11px; color: var(--muted); cursor: pointer; }
.traits ul { list-style: none; padding: 0; margin: 4px 0 0; font-size: 11px; }
.traits li { display: flex; justify-content: space-between; gap: 6px; }
.traits li span { color: var(--muted); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.mini-grid figure { margin: 0; text-align: center; font-size: 10px; color: var(--muted); }
.mini-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--soil-3); }
.passages-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; }
.passages-list li { background: var(--soil-2); padding: 6px 8px; border-radius: 8px; color: var(--muted); }
.passages-list li.ok { color: var(--toxic); }

/* Squads & ranks */
.inline-form { display: flex; gap: 8px; }
.members { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.members li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--soil-3); font-family: var(--mono); font-size: 12px; }
.squad-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--soil-2); }
.seg { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--soil-2); padding: 4px; border-radius: 99px; }
.seg button { flex: 1; min-height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: var(--bone-dim); cursor: pointer; font-size: 13px; white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--toxic); color: #102006; font-weight: 700; }
.rows { list-style: none; padding: 0; margin: 12px 0; }
.rows li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--soil-2); }
.rows li.me { background: rgba(155,225,93,.08); border-radius: 8px; }
.rows .pos { font-family: var(--font-display); font-size: 22px; color: var(--amber); text-align: center; }
.rows li:nth-child(n+4) .pos { color: var(--muted); font-size: 18px; }
.rows .who { font-family: var(--mono); font-size: 12px; display: flex; flex-direction: column; }
.rows .who small { color: var(--toxic); font-family: var(--font); }
.rows .own { color: var(--muted); font-size: 12px; }
.rows b { font-variant-numeric: tabular-nums; }

/* Modal, toast, level-up */
.modal-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .2s; }
.modal-wrap.out { opacity: 0; transition: opacity .2s; }
.modal { width: min(460px, 100%); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, #22170f, #160e0a); border: 1px solid var(--soil-4); border-radius: 18px; box-shadow: var(--shadow); animation: rise .3s ease; }
.modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 0 18px; }
.modal-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0; letter-spacing: .03em; }
.modal-body { padding: 8px 18px 18px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; bottom: -18px; background: #170f0b; padding: 12px 0; margin-top: 10px; border-top: 1px solid var(--soil-3); font-size: 13px; }
.wallet-list { display: flex; flex-direction: column; gap: 8px; }
.wallet-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; background: var(--soil-2); border: 1px solid var(--soil-4); border-radius: 12px; cursor: pointer; font-weight: 700; }
.wallet-opt:hover { border-color: var(--toxic); }
.w-dot { width: 28px; height: 28px; border-radius: 8px; background: var(--toxic-dim); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; background: var(--soil-2); border: 2px solid var(--soil-3); border-radius: 12px; cursor: pointer; font-size: 11px; }
.pick.on { border-color: var(--toxic); background: rgba(155,225,93,.1); }
.pick-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.pick-id { font-family: var(--mono); }
.pick-role { color: var(--muted); } .pick-role.match { color: var(--toxic); }
.result { text-align: center; }
.loot { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.loot-item { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 10px; background: var(--soil-2); border: 1px solid var(--soil-4); border-radius: 12px; animation: rise .5s cubic-bezier(.2,1.4,.4,1) both; }
.loot-item i { font-style: normal; font-size: 26px; } .loot-item b { font-size: 22px; color: var(--toxic); } .loot-item span { font-size: 11px; color: var(--muted); }
.result.bad .loot-item b { color: var(--amber); }
.discovery { margin: 12px auto; padding: 12px; border: 1px solid var(--toxic); border-radius: 12px; background: rgba(155,225,93,.08); max-width: 320px; }
.discovery b { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--toxic); }
.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.toast { background: #22170f; border: 1px solid var(--soil-4); border-left: 4px solid var(--bone-dim); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; animation: rise .3s ease; }
.toast-ok { border-left-color: var(--toxic); } .toast-warn { border-left-color: var(--amber); } .toast-error { border-left-color: var(--blood); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .4s; }
.levelup { position: fixed; z-index: 70; top: 18%; left: 50%; transform: translateX(-50%); text-align: center; padding: 22px 30px; background: radial-gradient(circle, rgba(40,26,8,.96), rgba(13,8,6,.96)); border: 2px solid var(--amber); border-radius: 18px; box-shadow: 0 0 60px rgba(255,176,46,.5); animation: rise .6s cubic-bezier(.2,1.4,.4,1); width: min(560px, calc(100vw - 32px)); }
.levelup .eyebrow { color: var(--amber); font-size: 13px; }
.levelup-title { font-family: var(--font-display); font-size: clamp(30px, 6vw, 48px); color: var(--bone); line-height: 1.05; margin-top: 6px; }
.levelup.out { opacity: 0; transition: opacity .8s; }

/* ── Responsive ── */
@media (max-width: 1100px) { .playfield { grid-template-columns: minmax(0, 1fr) 360px; } .hud-res small { display: none; } }
@media (max-width: 900px) {
  #game.active { height: auto; min-height: 100dvh; }
  .hud { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .hud-brand { order: 1; } .hud-count { order: 2; margin-left: auto; } .wallet-chip { order: 3; }
  .hud-resources { order: 4; flex-basis: 100%; justify-content: space-between; gap: 4px; flex-wrap: nowrap; }
  .hud-res { padding: 3px 8px; font-size: 13px; flex: 1; justify-content: center; }
  .brand-name { font-size: 20px; }
  .community-bar { flex-wrap: wrap; }
  .cb-event { flex-basis: 100%; text-align: center; }
  .playfield { display: block; }
  .world { aspect-ratio: 1000 / 780; width: 100%; border-bottom: 1px solid var(--soil-3); }
  .panel { border-left: 0; overflow: visible; padding: 14px 14px calc(var(--tabs-h) + 30px + env(safe-area-inset-bottom)); }
  .room-label { font-size: 18px; } .room-sub { font-size: 14px; }
}
@media (max-width: 520px) {
  .wallet-chip { font-size: 11px; padding: 0 9px; }
  .hud-count small { display: none; }
  .brand-name { display: none; }
  .hud-count .eyebrow { display: none; }
  .ladder-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .undead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amt-row { grid-template-columns: 78px 1fr 36px auto; }
  .tabs button span { font-size: 9px; }
  .rows li { grid-template-columns: 30px 1fr auto; } .rows .own { display: none; }
}
@media (min-width: 901px) { .tabs { position: static; height: var(--tabs-h); } .panel { padding-bottom: 24px; } .toasts { bottom: calc(var(--tabs-h) + 16px); } }

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

/* ═══ INTRO — wake the Undeadz ═══ */
.intro { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; --x: 50%; --y: 55%; touch-action: manipulation; cursor: none; user-select: none; -webkit-user-select: none; }
.intro-dirt { position: absolute; inset: 0; background:
  radial-gradient(60% 40% at 30% 70%, #3a271a 0%, transparent 70%),
  radial-gradient(50% 35% at 75% 40%, #33231a 0%, transparent 70%),
  repeating-linear-gradient(172deg, rgba(255,230,190,.025) 0 2px, transparent 2px 46px),
  linear-gradient(180deg, #1c130d, #2a1c13 55%, #1a110b); }
.intro-dirt::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,230,190,.07) 1.5px, transparent 2px); background-size: 37px 41px; }
.intro-dark { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle 170px at var(--x) var(--y), rgba(5,3,2,0) 0%, rgba(5,3,2,.2) 45%, rgba(5,3,2,.94) 100%); transition: opacity 1s; }
.intro.lit .intro-dark { opacity: 0; }
.intro.crack .intro-dark { opacity: 0; }
.intro.crack .intro-field { animation: quake .9s ease; }
@keyframes quake { 10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } }
.intro-field { position: absolute; inset: 0; z-index: 2; }
.intro-hud { position: absolute; z-index: 4; top: max(24px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; padding: 0 16px; pointer-events: none; }
.intro-prompt { font-size: clamp(16px, 2.4vw, 22px); color: var(--bone); max-width: 30ch; margin: 8px auto 6px; text-shadow: 0 2px 8px #000; }
.intro-count-row { font-family: var(--mono); color: var(--toxic); font-size: 13px; margin: 0; }
.intro-skip { position: absolute; z-index: 5; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); cursor: pointer; background: rgba(13,8,6,.7); }
.buried { position: absolute; width: clamp(130px, 17vw, 210px); aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }
.buried.b0 { left: 18%; top: 66%; } .buried.b1 { left: 40%; top: 46%; } .buried.b2 { left: 62%; top: 70%; } .buried.b3 { left: 83%; top: 48%; }
.buried .hole { position: absolute; left: 4%; right: 4%; bottom: 2%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #000 0%, #0b0705 55%, transparent 72%); }
.buried .grave { position: absolute; inset: 0 8% 14%; overflow: hidden; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 96%); mask-image: linear-gradient(180deg, #000 78%, transparent 96%); }
.buried img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(62%) scale(.92); filter: brightness(.35) saturate(.3) blur(.5px); transition: transform .9s cubic-bezier(.2,1.5,.4,1), filter .6s; }
.buried:hover img, .buried:focus-visible img { transform: translateY(54%) scale(.94); filter: brightness(.55) saturate(.5); }
.buried.awake img { transform: translateY(0) scale(1); filter: none; }
.buried.awake .grave { border-radius: 50%; box-shadow: 0 0 0 3px var(--toxic), 0 0 40px rgba(155,225,93,.45); -webkit-mask-image: none; mask-image: none; transition: box-shadow .6s .3s; }
.buried:not(.awake) .grave::after { content: '✋'; position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-size: 22px; opacity: .0; animation: hintTap 2.6s ease-in-out infinite; }
@keyframes hintTap { 0%, 60%, 100% { opacity: 0; } 70%, 90% { opacity: .8; transform: translate(-50%, -6px); } }
.dust { position: absolute; left: 50%; bottom: 18%; pointer-events: none; }
.dust i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #6b4c33; opacity: 0; }
.buried.awake .dust i { animation: dust .8s ease-out forwards; }
@keyframes dust { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(.4); } }
.bubble { position: absolute; z-index: 6; bottom: 100%; left: 50%; width: min(260px, 70vw); transform: translate(-50%, 10px) scale(.9); background: var(--bone); color: #1a110b; border-radius: 14px; padding: 10px 12px; text-align: left; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--bone); }
.bubble b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #3d6b16; margin-bottom: 3px; }
.buried.talk .bubble { opacity: 1; transform: translate(-50%, -6px) scale(1); }
.buried.b0 .bubble, .buried.b2 .bubble { transition-delay: .35s; }

/* final title screen */
.intro-final { position: relative; min-height: 100vh; min-height: 100dvh; }
.intro-final.rise .boot-inner > * { animation: rise .7s cubic-bezier(.2,1.3,.4,1) both; }
.intro-final.rise .boot-inner > *:nth-child(2) { animation-delay: .08s; } .intro-final.rise .boot-inner > *:nth-child(3) { animation-delay: .16s; }
.intro-final.rise .boot-inner > *:nth-child(4) { animation-delay: .24s; } .intro-final.rise .boot-inner > *:nth-child(5) { animation-delay: .32s; } .intro-final.rise .boot-inner > *:nth-child(n+6) { animation-delay: .4s; }
.intro-final .boot-inner { padding-bottom: 90px; }
.title { font-size: clamp(54px, 12vw, 132px); }
.crew-row { display: flex; justify-content: center; margin: 4px 0 8px; }
.crew-row img { width: clamp(58px, 9vw, 86px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--soil-0); margin-left: -12px; box-shadow: 0 0 0 2px var(--toxic-dim), 0 8px 18px rgba(0,0,0,.6); animation: rise .6s cubic-bezier(.2,1.4,.4,1) both; transition: transform .2s; }
.crew-row img:first-child { margin-left: 0; }
.crew-row img:hover { transform: translateY(-6px) rotate(-4deg); z-index: 1; }
.how { list-style: none; padding: 0; margin: 14px 0 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 900px; width: 100%; text-align: left; }
.how li { background: rgba(29,20,14,.85); border: 1px solid var(--soil-3); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.how b { width: 26px; height: 26px; border-radius: 50%; background: var(--toxic); color: #102006; display: grid; place-items: center; font-size: 13px; }
.how strong { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.how span { font-size: 12.5px; color: var(--bone-dim); }
.boot-links { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.link-btn { background: none; border: 0; color: var(--toxic); cursor: pointer; text-decoration: underline; padding: 6px; font-size: 13px; }
.help-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--toxic-dim); background: rgba(155,225,93,.08); color: var(--toxic); font-weight: 900; cursor: pointer; flex: none; }

/* walkers in the tunnels */
.walker-ring { fill: #0b0705; stroke: var(--toxic); stroke-width: 2; }
.walker-shadow { fill: rgba(0,0,0,.5); }

/* guide */
.guide-crew { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.guide-crew img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--toxic-dim); }
.guide-nav { margin-bottom: 8px; }
.guide { max-height: 58vh; overflow-y: auto; padding-right: 4px; }
.guide-sec h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--toxic); margin: 16px 0 6px; }
.guide-sec p, .guide-sec li { font-size: 14px; color: var(--bone); }
.guide-sec ol { padding-left: 20px; }
.tier-list, .role-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.tier-list li, .role-list li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 10px; padding: 8px 10px; }
.tier-list b { color: var(--amber); }
.role-list li span, .tier-list li span { color: var(--bone-dim); font-size: 13px; }
.flow { display: flex; flex-wrap: wrap; gap: 6px; }
.flow-step { display: flex; align-items: center; gap: 6px; background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 99px; padding: 6px 12px 6px 6px; font-size: 13px; }
.flow-step b { width: 22px; height: 22px; border-radius: 50%; background: var(--toxic); color: #102006; display: grid; place-items: center; font-size: 12px; }
.guide-table { display: flex; flex-direction: column; font-size: 13px; }
.gt-head, .gt-row { display: grid; grid-template-columns: 1.6fr 1fr .7fr .8fr; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--soil-2); align-items: center; }
.gt-head { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.gt-row small { display: block; color: var(--muted); font-size: 11px; }

/* tour */
.tour-veil { position: fixed; inset: 0; z-index: 80; }
.tour-ring { position: fixed; z-index: 81; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.72), 0 0 0 2px var(--toxic), 0 0 24px var(--toxic); pointer-events: none; transition: all .35s ease; }
.tour-card { position: fixed; z-index: 82; width: 320px; max-width: calc(100vw - 24px); background: linear-gradient(180deg, #22170f, #170f0b); border: 1px solid var(--toxic-dim); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); transition: top .35s, left .35s; }
.tour-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 4px 0; letter-spacing: .02em; }
.tour-card p { margin: 0 0 12px; font-size: 14px; color: var(--bone-dim); }
.tour-actions { display: flex; gap: 8px; align-items: center; }

@media (max-width: 900px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .intro { cursor: auto; }
  .buried { width: clamp(120px, 38vw, 170px); }
  .buried.b0 { left: 27%; top: 44%; } .buried.b1 { left: 74%; top: 38%; } .buried.b2 { left: 28%; top: 76%; } .buried.b3 { left: 74%; top: 72%; }
  .buried.b1 .bubble, .buried.b3 .bubble { left: auto; right: -10%; transform: translate(0, 10px) scale(.9); }
  .buried.b1.talk .bubble, .buried.b3.talk .bubble { transform: translate(0, -6px); }
  .buried.b1 .bubble::after, .buried.b3 .bubble::after { left: 70%; }
  .buried.b0 .bubble, .buried.b2 .bubble { left: -10%; transform: translate(0, 10px) scale(.9); }
  .buried.b0.talk .bubble, .buried.b2.talk .bubble { transform: translate(0, -6px); }
  .buried.b0 .bubble::after, .buried.b2 .bubble::after { left: 30%; }
  .intro-dark { background: radial-gradient(circle 130px at var(--x) var(--y), rgba(5,3,2,0) 0%, rgba(5,3,2,.2) 45%, rgba(5,3,2,.93) 100%); }
  .how { grid-template-columns: 1fr; } .how li { flex-direction: row; flex-wrap: wrap; align-items: center; } .how span { flex-basis: 100%; }
  .tier-list li, .role-list li { grid-template-columns: 1fr; gap: 2px; }
  .gt-head, .gt-row { grid-template-columns: 1.5fr 1fr .6fr .8fr; font-size: 12px; }
  .help-btn { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .intro-dark { display: none; } .intro { cursor: auto; } }
@media (max-width: 900px) { .help-btn { order: 3; } .wallet-chip { order: 3; } }

/* ═══ LANDING ═══ */
.landing.active { display: block; }
#boot.landing { background: radial-gradient(120% 60% at 50% 0%, #2c1f15 0%, #120b07 45%, #080504 100%); }
.land-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 10px 18px; padding-top: max(10px, env(safe-area-inset-top)); transition: background .3s, box-shadow .3s; }
.land-nav.scrolled { background: rgba(13,8,6,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--soil-3); }
.land-brand { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; white-space: nowrap; }
.land-brand span { color: var(--toxic); }
.land-links { display: flex; gap: 18px; margin-left: auto; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.land-links a { color: var(--bone-dim); text-decoration: none; } .land-links a:hover { color: var(--toxic); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 16px 0; min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 760px; order: -1; }
.hero .title { font-size: clamp(58px, 12vw, 140px); margin: 4px 0 0; }
.hero .tagline { max-width: 46ch; }
.play-hint { font-family: var(--mono); color: var(--toxic); font-size: 13px; margin: 2px 0 6px; min-height: 1.4em; }
.playground { position: relative; width: 100%; max-width: 1200px; flex: 1; min-height: clamp(240px, 36vh, 400px); margin-top: 14px; border-radius: 28px 28px 0 0; overflow: hidden; touch-action: manipulation;
  background: radial-gradient(70% 90% at 50% 100%, #3a271a, transparent 70%), repeating-linear-gradient(175deg, rgba(255,230,190,.03) 0 2px, transparent 2px 38px), linear-gradient(180deg, rgba(0,0,0,0), #24170f 40%, #1a110b);
  border-top: 1px solid var(--soil-3); }
.playground::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,230,190,.07) 1.5px, transparent 2px); background-size: 41px 37px; pointer-events: none; }
.runner { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
.runner-body { position: absolute; inset: 0; }
.runner-face { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; border: 3px solid var(--toxic-dim); box-shadow: 0 6px 16px rgba(0,0,0,.55); background: #000; transition: border-color .2s; }
.runner-face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.runner:hover .runner-face { border-color: var(--toxic); }
.runner-shadow { position: absolute; left: 15%; right: 15%; bottom: -10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(2px); z-index: -1; }
.runner-it { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--blood); color: #fff; font: 900 11px var(--font); letter-spacing: .12em; padding: 2px 7px; border-radius: 99px; opacity: 0; transition: opacity .2s; box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 2; }
.runner.is-it .runner-it { opacity: 1; }
.runner.is-it .runner-face { border-color: var(--blood); }
.runner.flipping .runner-body { animation: flip .75s cubic-bezier(.3,.7,.3,1); }
@keyframes flip { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-70px) rotate(200deg) scale(1.1); } 100% { transform: translateY(0) rotate(360deg); } }
.heart { position: absolute; z-index: 3; font-size: 20px; pointer-events: none; animation: heart 1.3s ease-out var(--d) both; }
@keyframes heart { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -110px) scale(1.2); } }
.tag-pop { position: absolute; z-index: 3; transform: translate(-50%, -100%); font: 900 14px var(--font); color: var(--amber); letter-spacing: .1em; text-shadow: 0 2px 4px #000; pointer-events: none; animation: tagpop .9s ease-out forwards; }
@keyframes tagpop { from { opacity: 1; transform: translate(-50%, -100%) scale(.8); } to { opacity: 0; transform: translate(-50%, -190%) scale(1.2); } }
.scroll-cue { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--bone-dim); text-decoration: none; font-size: 22px; animation: bob 2s ease-in-out infinite; }
.land-sec { max-width: 1100px; margin: 0 auto; padding: 80px 18px 20px; }
.land-sec h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6vw, 64px); margin: 6px 0 10px; letter-spacing: .02em; line-height: 1; }
.land-sec h3 { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.lead { font-size: clamp(16px, 2vw, 19px); color: var(--bone-dim); max-width: 62ch; line-height: 1.55; }
.lead b { color: var(--bone); }
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.crew-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 26px 0; perspective: 1200px; }
.crew-card { position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; background: none; cursor: pointer; }
.cc-inner { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.3,1.3,.4,1); transform-style: preserve-3d; }
.crew-card:hover .cc-inner { transform: rotateY(12deg) rotateX(4deg); }
.crew-card.flipped .cc-inner { transform: rotateY(180deg); }
.cc-front, .cc-back { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--soil-4); box-shadow: var(--shadow); }
.cc-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; text-align: left; }
.cc-back { transform: rotateY(180deg); background: linear-gradient(160deg, #2a3d17, #142009); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; text-align: left; color: var(--bone); }
.cc-back b { color: var(--toxic); letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.cc-back span { font-size: 15px; line-height: 1.45; }
.cc-back small { color: var(--bone-dim); font-size: 11px; }
.trait-box { background: rgba(29,20,14,.85); border: 1px solid var(--soil-3); border-radius: var(--radius); padding: 18px; }
.trait-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.trait-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--soil-3); border: 1px solid var(--soil-4); font-size: 14px; }
.trait-chip small { color: var(--toxic); font-size: 11px; }
.link-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.card-dark { background: rgba(29,20,14,.85); border: 1px solid var(--soil-3); border-radius: var(--radius); padding: 18px; }
.land-ladder, .land-roles { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.land-ladder li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.land-ladder b { font-family: var(--font-display); font-size: 26px; color: var(--amber); text-align: center; }
.land-ladder strong, .land-roles strong { display: block; font-size: 14px; }
.land-ladder small, .land-roles small { color: var(--bone-dim); font-size: 13px; }
.land-roles li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; }
.land-roles i { font-style: normal; font-size: 22px; text-align: center; }
.live-hill { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.live-hill h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; text-transform: none; letter-spacing: .02em; margin: 2px 0; }
.hill-bar { height: 14px; border-radius: 99px; background: var(--soil-3); overflow: hidden; }
#hill-fill { height: 100%; width: 2%; background: linear-gradient(90deg, #a86c10, var(--amber)); box-shadow: 0 0 12px var(--amber); transition: width 1.2s ease; }
.cta-sec { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 110px; position: relative; }
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-bottom: 40px; text-align: left; }
.why div { background: rgba(29,20,14,.85); border: 1px solid var(--soil-3); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.why b { font-size: 26px; } .why strong { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; } .why span { color: var(--bone-dim); font-size: 14px; }
.cta-sec .boot-foot { position: absolute; bottom: 20px; }
@media (max-width: 900px) {
  .land-links { display: none; }
  .land-nav .btn-sm { margin-left: auto; }
  .stat-strip, .crew-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .why { grid-template-columns: 1fr; }
  .live-hill { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .land-brand { font-size: 18px; }
  .land-sec { padding-top: 56px; }
  .hero .btn-big { width: 100%; max-width: 360px; font-size: 15px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } .crew-card:hover .cc-inner { transform: none; } }

/* ═══ HERO SCENE (night hill, side-view tag) ═══ */
.hero.scene { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0; min-height: 100svh; margin-top: -58px; padding-top: 58px; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #07060d 0%, #120d18 35%, #24160f 75%, #2a1b12 100%); }
.stars { position: absolute; inset: 0 0 40% 0; background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 28% 8%, #fff9, transparent), radial-gradient(1.5px 1.5px at 44% 26%, #fff6, transparent),
  radial-gradient(1px 1px at 62% 12%, #fffa, transparent), radial-gradient(1.5px 1.5px at 78% 30%, #fff7, transparent), radial-gradient(1px 1px at 90% 10%, #fff9, transparent),
  radial-gradient(1px 1px at 6% 40%, #fff6, transparent), radial-gradient(1px 1px at 52% 44%, #fff5, transparent), radial-gradient(1.5px 1.5px at 70% 52%, #fff5, transparent);
  animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .55; } }
.moon { position: absolute; top: 12%; right: 9%; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #f6f0d8, #d9cfa8 60%, #b8ad86); box-shadow: 0 0 60px 18px rgba(240,230,190,.18), 0 0 160px 60px rgba(155,225,93,.06); }
.moon::after { content: ''; position: absolute; width: 18%; height: 18%; left: 55%; top: 50%; border-radius: 50%; background: rgba(150,140,110,.35); box-shadow: -26px -18px 0 -3px rgba(150,140,110,.3); }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.hill-far { fill: #1a1218; } .hill-mid { fill: #22160f; }
.hill-door { fill: #000; filter: drop-shadow(0 0 14px rgba(155,225,93,.55)); }
.graves rect, .graves path { fill: #2e2017; }
.fog { position: absolute; left: -10%; right: -10%; bottom: 18%; height: 22%; background: radial-gradient(50% 60% at 30% 60%, rgba(155,225,93,.08), transparent 70%), radial-gradient(40% 50% at 75% 50%, rgba(200,200,220,.06), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(6%); } }
.hero.scene .hero-copy { position: relative; z-index: 40; margin: 0 auto; padding: clamp(18px, 4vh, 48px) 16px 0; text-align: center; max-width: 820px; }
.hero.scene .title { font-size: clamp(56px, 11vw, 136px); text-shadow: 0 0 50px rgba(155,225,93,.25), 0 6px 0 #000; }
.stage { position: relative; flex: 1; width: 100%; min-height: clamp(270px, 40svh, 440px); margin-top: 8px; z-index: 30; touch-action: manipulation; }
.stage .play-hint { position: absolute; left: 0; right: 0; top: 0; padding: 0 12px; text-align: center; z-index: 50; pointer-events: none; text-shadow: 0 2px 6px #000; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; z-index: 35; pointer-events: none; }
.ground-top { fill: #3a2718; } .ground-front { fill: #24170f; }
.grass { position: absolute; left: 0; right: 0; bottom: 18%; height: 16px; z-index: 36; pointer-events: none; background-image: repeating-linear-gradient(100deg, transparent 0 9px, #3f5a24 9px 11px, transparent 11px 23px), repeating-linear-gradient(75deg, transparent 0 13px, #4c6b2a 13px 15px, transparent 15px 31px); -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); opacity: .8; }
.runner2 { position: absolute; left: 0; bottom: 0; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; transition: filter .3s; }
.runner2 .sprite { position: absolute; inset: 0; display: block; transform-origin: 50% 62%; }
.runner2 .sprite img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; pointer-events: none; user-select: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  -webkit-mask-image: linear-gradient(#000 82%, transparent 100%); mask-image: linear-gradient(#000 82%, transparent 100%); }
.runner2:hover .sprite img { filter: drop-shadow(0 0 14px rgba(155,225,93,.7)) drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.shadow2 { position: absolute; left: 18%; right: 18%; bottom: -4px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(3px); transform: scale(var(--sh, 1)); opacity: var(--sh, 1); }
.it-tag { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); background: var(--blood); color: #fff; font: 900 12px var(--font); letter-spacing: .14em; padding: 3px 9px; border-radius: 99px; box-shadow: 0 3px 8px rgba(0,0,0,.6); opacity: 0; transition: opacity .2s; z-index: 2; }
.runner2.is-it .it-tag { opacity: 1; animation: itpulse 1s ease-in-out infinite; }
@keyframes itpulse { 50% { transform: translateX(-50%) scale(1.12); } }
.quip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 8px) scale(.8); white-space: nowrap; background: var(--bone); color: #1a110b; font: 800 14px var(--font); padding: 6px 12px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 3; }
.quip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--bone); }
.runner2.talking .quip { opacity: 1; transform: translate(-50%, -2px) scale(1); }
.stage .heart { position: absolute; z-index: 45; font-size: 22px; pointer-events: none; animation: heart2 1.4s ease-out var(--d) both; }
@keyframes heart2 { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -140px) scale(1.25); } }
.hero.scene .scroll-cue { z-index: 50; bottom: 8px; }
@media (max-width: 640px) {
  .hero.scene { min-height: calc(100svh - 52px); }
  .stage { min-height: 250px; }
  .moon { top: 60px; right: -10px; width: 46px; }
  .hero.scene .tagline { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .stars, .fog, .runner2.is-it .it-tag { animation: none; } }

/* image loading shimmer (instead of broken-image icons) */
img.img-loading { color: transparent; background: linear-gradient(100deg, #1d140e 30%, #2e2117 50%, #1d140e 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ═══ 3D WORLD ═══ */
.world.world-3d { display: block; background: #0a0605; }
.world-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.world-3d canvas:active { cursor: grabbing; }
.w3-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w3-label { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 10px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(13,8,6,.72); backdrop-filter: blur(4px); color: var(--bone); cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s; will-change: transform; }
.w3-label b { font: 900 11px var(--font); letter-spacing: .14em; }
.w3-label small { font: 700 10px var(--font); letter-spacing: .08em; color: var(--amber); }
.w3-label small[hidden] { display: none; }
.w3-glyph { font-size: 15px; line-height: 1; color: var(--toxic); }
.w3-label.locked .w3-glyph, .w3-label.hidden .w3-glyph { color: var(--bone-dim); font-size: 13px; }
.w3-label.hidden { opacity: .65; } .w3-label.hidden small { color: var(--muted); font-style: italic; }
.w3-label.building small { color: var(--amber); }
.w3-label:hover, .w3-label.hover { border-color: var(--toxic); background: rgba(20,30,10,.85); }
.w3-label.selected { border-color: var(--toxic); box-shadow: 0 0 18px rgba(155,225,93,.45); }
.w3-avatars { display: flex; }
.w3-avatars:empty { display: none; }
.w3-avatars img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--toxic-dim); margin-left: -6px; background: #000; }
.w3-avatars img:first-child { margin-left: 0; }
.w3-avatars img.busy { border-color: var(--amber); border-style: dashed; }
.w3-avatars em { font: 900 11px var(--font); color: var(--toxic); margin-left: 4px; font-style: normal; align-self: center; }
.w3-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.w3-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--soil-4); background: rgba(13,8,6,.8); color: var(--bone); font-size: 18px; cursor: pointer; }
.w3-btn:hover { border-color: var(--toxic); color: var(--toxic); }
.w3-mode { position: absolute; left: 10px; top: 10px; z-index: 5; min-height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--soil-4); background: rgba(13,8,6,.8); color: var(--bone-dim); font: 700 12px var(--font); letter-spacing: .06em; cursor: pointer; }
.w3-mode:hover { color: var(--toxic); border-color: var(--toxic); }
.world { position: relative; }
@media (max-width: 900px) {
  .world.world-3d { aspect-ratio: auto; height: min(64svh, 600px); }
  .w3-label { padding: 2px 6px 3px; gap: 0; border-radius: 8px; }
  .w3-label b { font-size: 8px; letter-spacing: .1em; } .w3-label small { font-size: 8px; }
  .w3-glyph { display: none; }
  .w3-label.hidden small { display: none; }
  .w3-avatars img { width: 14px; height: 14px; margin-left: -4px; border-width: 1px; } .w3-avatars em { font-size: 9px; }
  .w3-btn { width: 32px; height: 32px; font-size: 15px; } .w3-mode { min-height: 30px; font-size: 11px; }
}

/* ═══ TICKER ═══ */
.ticker { display: flex; align-items: center; height: 32px; background: #0d0907; border-bottom: 1px solid var(--soil-3); overflow: hidden; font-size: 13px; }
.ticker[hidden] { display: none; }
.tk-label { flex: none; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--blood); color: #fff; font: 900 11px var(--font); letter-spacing: .16em; }
.tk-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.tk-window { flex: 1; overflow: hidden; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.tk-track { display: flex; width: max-content; height: 100%; animation: ticker linear infinite; }
.ticker:hover .tk-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.tk-row { display: flex; align-items: center; height: 100%; }
.tk-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 22px; white-space: nowrap; color: var(--bone-dim); border-right: 1px solid var(--soil-3); }
.tk-item i { font-style: normal; }
.tk-admin { color: var(--bone); font-weight: 700; }
.tk-achievement { color: var(--toxic); } .tk-milestone { color: var(--amber); font-weight: 700; } .tk-event { color: #ffdd7a; font-weight: 700; } .tk-discovery { color: #b6ff7a; }
.land-ticker { position: relative; z-index: 31; }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } .tk-window { overflow-x: auto; } }

/* banners, respect, admin button */
.alert-banner { padding: 7px 14px; text-align: center; font-size: 13px; font-weight: 700; }
.alert-banner[hidden] { display: none; }
.alert-banner.bad { background: #3a1210; color: #ffb3a8; } .alert-banner.warn { background: #3a2a10; color: #ffdd9a; } .alert-banner.boost { background: linear-gradient(90deg, #1f3410, #2b4a14, #1f3410); color: #d6ffaf; letter-spacing: .04em; }
.hud-respect { border-color: #6b5a1a; background: rgba(255,176,46,.08); cursor: pointer; font: inherit; color: inherit; }
.hud-respect b { color: var(--amber); } .hud-respect:hover { border-color: var(--amber); }
.admin-btn { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid #8a5a1a; background: rgba(255,176,46,.12); color: var(--amber); font: 800 12px var(--font); letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.admin-btn[hidden] { display: none; }
.admin-btn:hover { background: rgba(255,176,46,.22); }
@media (max-width: 900px) { .admin-btn { order: 3; min-height: 32px; padding: 0 10px; } .hud-respect small { display: none; } }

/* news */
.news-sec .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.news-card { background: rgba(29,20,14,.85); border: 1px solid var(--soil-3); border-left: 3px solid var(--toxic-dim); border-radius: var(--radius); padding: 14px; }
.news-card h3 { font-size: 17px; letter-spacing: 0; text-transform: none; margin: 4px 0; }
.news-card p { color: var(--bone-dim); margin: 4px 0; font-size: 14px; }
.news-card.small { padding: 10px 12px; margin: 8px 0; } .news-card.small b { display: block; margin: 2px 0; } .news-card.small p { font-size: 13px; }
.news-card.k-event { border-left-color: var(--amber); } .news-card.k-warning { border-left-color: var(--blood); } .news-card.k-update { border-left-color: var(--ice); }
.land-ev { background: linear-gradient(135deg, rgba(255,176,46,.12), rgba(29,20,14,.9)); border: 1px solid #8a5a1a; border-radius: var(--radius); padding: 16px; margin-top: 10px; }
.land-ev.live { border-color: var(--amber); box-shadow: 0 0 30px rgba(255,176,46,.15); }
.land-ev h3 { font-family: var(--font-display); font-weight: 400; font-size: 34px; text-transform: none; letter-spacing: .02em; margin: 4px 0; color: var(--amber); }
.land-ev p { color: var(--bone-dim); }
.row { display: flex; gap: 8px; align-items: center; } .row.wrap { flex-wrap: wrap; }
.news-pop p { color: var(--bone); line-height: 1.55; }
.res-chip.boost { background: #2b4a14; color: #d6ffaf; } .prize { color: var(--amber); font-weight: 700; margin: 6px 0; }
.tag-boost { background: #2b4a14 !important; color: #d6ffaf !important; }
.ev-next { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 4px 0; }
.ach-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.ach-list li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 10px; padding: 7px 10px; opacity: .55; }
.ach-list li.ok { opacity: 1; border-color: var(--toxic-dim); background: rgba(155,225,93,.06); }
.ach-list i { font-style: normal; font-size: 20px; text-align: center; }
.ach-list b { display: block; font-size: 13px; } .ach-list small { color: var(--bone-dim); font-size: 11px; }

/* ═══ ADMIN CONSOLE ═══ */
.admin-console { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #0e0907; color: var(--bone); animation: fadeIn .2s; }
.ac-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--soil-3); background: linear-gradient(180deg, #24180f, #160e0a); }
.ac-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0; letter-spacing: .03em; }
.ac-head .eyebrow { color: var(--amber); }
.ac-who { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--amber); border: 1px solid #6b4a1a; border-radius: 99px; padding: 6px 10px; }
.ac-main { flex: 1; display: grid; grid-template-columns: 210px 1fr; min-height: 0; }
.ac-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid var(--soil-3); overflow-y: auto; }
.ac-nav button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--bone-dim); cursor: pointer; text-align: left; font-size: 14px; }
.ac-nav button:hover { background: var(--soil-2); color: var(--bone); }
.ac-nav button.on { background: rgba(255,176,46,.12); color: var(--amber); }
.ac-nav b { font-weight: 600; }
.ac-body { overflow-y: auto; padding: 18px; max-width: 1100px; width: 100%; }
.ac-card { background: var(--soil-1); border: 1px solid var(--soil-3); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.ac-card h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); margin: 0 0 10px; }
.ac-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ac-tile { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 12px; padding: 12px; }
.ac-tile span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ac-tile b { font-size: 24px; font-variant-numeric: tabular-nums; } .ac-tile small { display: block; color: var(--bone-dim); font-size: 11px; }
.ac-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac-list { list-style: none; padding: 0; margin: 0; }
.ac-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--soil-2); font-size: 13px; }
.ac-list li small { color: var(--muted); white-space: nowrap; }
ol.ac-list { counter-reset: n; } ol.ac-list li::before { counter-increment: n; content: counter(n); color: var(--amber); font-weight: 900; width: 18px; }
.ac-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--bone-dim); }
.ac-field small { color: var(--muted); font-size: 11px; }
.ac-field input, .ac-field select, .ac-field textarea, .ac-card > input, .ac-grid2 > input, .ac-grid2 > select, .ac-card textarea { background: var(--soil-0); color: var(--bone); border: 1px solid var(--soil-4); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; width: 100%; color-scheme: dark; }
.ac-field textarea { resize: vertical; }
.ac-grid2, .ac-grid3, .ac-grid4, .ac-grid5 { display: grid; gap: 10px; align-items: end; }
.ac-grid2 { grid-template-columns: 1fr 1fr; } .ac-grid3 { grid-template-columns: repeat(3, 1fr); } .ac-grid4 { grid-template-columns: repeat(4, 1fr); } .ac-grid5 { grid-template-columns: repeat(5, 1fr); }
.ac-checks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--bone); margin-bottom: 10px; } .ac-checks.big { font-size: 16px; font-weight: 700; }
.ac-checks input { accent-color: var(--amber); width: 16px; height: 16px; }
.ac-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.ac-items { display: flex; flex-direction: column; gap: 10px; }
.ac-item { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 12px; padding: 12px; }
.ac-item p { margin: 6px 0; color: var(--bone-dim); font-size: 14px; white-space: pre-wrap; }
.ac-item-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ac-item-top b { margin-right: auto; font-size: 15px; }
.ac-item.ev-live { border-color: var(--amber); }
.st-live { background: var(--amber) !important; color: #2a1800 !important; } .st-upcoming { background: #1d3550 !important; color: #a8d4ff !important; }
.ac-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-danger { background: #5a1a14; border-color: #8a2a20; color: #ffd0c8; } .btn-danger:hover { background: #7a241b; }
.btn-mini.on { border-color: var(--amber); color: var(--amber); }
.ac-table { margin-top: 10px; font-size: 13px; overflow-x: auto; }
.ac-tr { display: grid; grid-template-columns: 1.4fr .6fr .8fr .7fr .8fr .8fr auto; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--soil-2); min-width: 640px; }
.ac-th { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ac-tr.banned { background: rgba(200,64,47,.08); }
.ac-confirm { position: fixed; inset: 0; z-index: 98; background: rgba(0,0,0,.65); display: grid; place-items: center; padding: 16px; }
.ac-confirm-box { background: #1f150e; border: 1px solid var(--soil-4); border-radius: 14px; padding: 18px; max-width: 420px; }
.ac-confirm-box p { margin: 0 0 14px; font-size: 15px; }
.ac-confirm-box .row { justify-content: flex-end; }
.ac-player .sub-head { margin-top: 16px; }
@media (max-width: 800px) {
  .ac-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ac-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--soil-3); padding: 8px; }
  .ac-nav button { flex: none; min-height: 36px; } .ac-nav b { display: none; } .ac-nav button.on b { display: inline; }
  .ac-body { padding: 12px; }
  .ac-split, .ac-grid2, .ac-grid3, .ac-grid4, .ac-grid5 { grid-template-columns: 1fr 1fr; }
  .ac-head h2 { font-size: 22px; } .ac-who { display: none; }
}
/* modals & toasts must sit above the admin console */
.modal-wrap { z-index: 95; } .toasts { z-index: 100; }
body.console-open #game.active { display: none; }
label.ac-checks { flex-direction: row; align-items: center; gap: 8px; }

/* ═══ DAILY ═══ */
.card.daily { border-color: #6b4a1a; background: linear-gradient(160deg, rgba(255,176,46,.08), var(--soil-2)); }
.daily-head { display: flex; justify-content: space-between; align-items: center; }
.streak { text-align: right; } .streak b { display: block; font-size: 22px; color: var(--amber); } .streak small { color: var(--bone-dim); font-size: 11px; }
.streak-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0; }
.streak-dots span { height: 24px; border-radius: 6px; background: var(--soil-3); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.streak-dots span.bonus { outline: 1px dashed #8a5a1a; }
.streak-dots span.on { background: linear-gradient(180deg, #ffb02e, #c97a10); color: #2a1800; font-weight: 900; }
.quests { list-style: none; padding: 0; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.quests li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--soil-1); border: 1px solid var(--soil-3); border-radius: 10px; }
.quests li.done { border-color: var(--toxic-dim); } .quests li.claimed { opacity: .55; }
.q-main { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .q-main small { color: var(--bone-dim); font-size: 11px; }
.q-bar { height: 6px; border-radius: 99px; background: var(--soil-3); overflow: hidden; } .q-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--toxic-dim), var(--toxic)); }
.btn-claim { background: var(--toxic); color: #102006; border-color: var(--toxic); animation: bump 1.2s infinite; }
.card.daily > .btn { width: 100%; }
.chest-ready { animation: bump 1.2s infinite; }

/* ═══ SETS ═══ */
.sets { margin: 6px 0 16px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; }
.set-card { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.set-card.active { border-color: var(--toxic-dim); background: linear-gradient(160deg, rgba(155,225,93,.1), var(--soil-2)); }
.set-card.named { border-color: #6b4a1a; } .set-card.named.active { border-color: var(--amber); background: linear-gradient(160deg, rgba(255,176,46,.12), var(--soil-2)); }
.set-top { display: flex; align-items: center; gap: 8px; } .set-top b { display: block; font-size: 13px; } .set-top small { color: var(--bone-dim); font-size: 11px; }
.set-icon { font-size: 22px; } .set-tier { margin-left: auto; font: 900 10px var(--font); letter-spacing: .12em; color: var(--toxic); }
.set-card > small { color: var(--bone-dim); font-size: 11px; }
.set-req { display: flex; align-items: center; gap: 6px; font-size: 12px; } .set-req span { flex: 1; } .set-req.ok { color: var(--toxic); } .set-req small { color: var(--muted); }
.set-bonus { color: var(--amber) !important; }
.btn-find { align-self: flex-start; background: rgba(32,129,226,.15); border-color: #2081e2; color: #9cc8ff; text-decoration: none; }
.btn-find:hover { background: rgba(32,129,226,.3); }

/* ═══ RAID ═══ */
.tabs button.raid-live i { color: var(--blood); animation: bump 1s infinite; }
.tabs button[data-badge="LIVE"]::after { background: var(--blood) !important; color: #fff !important; }
.boss-card { position: relative; text-align: center; background: radial-gradient(120% 80% at 50% 0%, #3a1210, #160c09 70%); border: 1px solid #6b2016; border-radius: 18px; padding: 14px; margin-bottom: 12px; overflow: hidden; }
.boss-card.bs-killed, .boss-card.bs-escaped { filter: saturate(.6); border-color: var(--soil-4); }
.boss-stage { position: relative; height: 210px; display: grid; place-items: end center; }
.boss-art { position: relative; z-index: 1; height: 100%; filter: drop-shadow(0 0 18px rgba(200,64,47,.7)) drop-shadow(0 10px 16px #000); animation: bossIdle 3s ease-in-out infinite; }
.boss-aura { position: absolute; inset: 20% 15% 0; border-radius: 50%; background: radial-gradient(circle, rgba(200,64,47,.55), transparent 65%); animation: breathe 2.4s ease-in-out infinite; }
@keyframes bossIdle { 50% { transform: translateY(-6px) scale(1.02); } }
.boss-card.hit .boss-art { animation: bossHit .5s ease; }
@keyframes bossHit { 0% { transform: translateX(0); filter: brightness(3) drop-shadow(0 0 30px #fff); } 20% { transform: translateX(-12px) rotate(-4deg); } 40% { transform: translateX(10px) rotate(3deg); } 60% { transform: translateX(-6px); } 100% { transform: none; } }
.boss-stamp { position: absolute; z-index: 2; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font: 900 28px var(--font); letter-spacing: .2em; color: var(--blood); border: 4px solid var(--blood); padding: 4px 14px; border-radius: 8px; background: rgba(0,0,0,.55); }
.boss-stamp.esc { color: var(--bone-dim); border-color: var(--bone-dim); }
.boss-name { font-family: var(--font-display); font-weight: 400; font-size: 34px; margin: 4px 0; color: #ffd0c8; letter-spacing: .03em; }
.boss-hp { position: relative; height: 24px; border-radius: 99px; background: #2a0d0a; border: 1px solid #6b2016; overflow: hidden; margin: 8px 0; }
.boss-hp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a1a10, #e0402c); box-shadow: 0 0 14px #e0402c; transition: width .8s ease; }
.boss-hp span { position: relative; z-index: 1; display: block; line-height: 24px; font: 800 12px var(--font); color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.boss-me { color: var(--amber); margin: 6px 0 0; } .boss-me b { font-size: 18px; }
.raid-form { border-color: #6b2016; }
.raid-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.raid-est { text-align: right; } .raid-est small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .raid-est b { font-size: 22px; color: #ff8a78; }
.pick-grid.small { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); max-height: 300px; overflow-y: auto; margin: 8px 0; padding: 2px; }
.btn-raid { width: 100%; background: linear-gradient(180deg, #ff6a50, #c8402f 55%, #8a1a10); color: #fff; box-shadow: 0 0 0 1px #ff8a78 inset, 0 6px 22px rgba(200,64,47,.4); }
.raid-empty { text-align: center; padding: 30px 10px; }
.raid-silhouette { width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2a1d14, #0b0705); box-shadow: inset 0 0 30px #000; }
.boss-ev { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; border-color: #c8402f !important; background: linear-gradient(135deg, rgba(200,64,47,.18), rgba(29,20,14,.9)) !important; }
.boss-ev img { width: 100%; filter: drop-shadow(0 0 16px rgba(200,64,47,.7)); }
.boss-ev h3 { color: #ffb3a8 !important; }
@media (max-width: 640px) { .boss-ev { grid-template-columns: 90px 1fr; } .boss-stage { height: 170px; } .set-grid { grid-template-columns: 1fr; } .tabs button span { font-size: 8px; } }

/* admin additions */
.ac-boss-form { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: start; }
.ac-boss-art { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(200,64,47,.6)); }
.ac-boss-live { display: grid; grid-template-columns: 160px 1fr; gap: 16px; }
.ac-boss-name { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: #ffb3a8; text-transform: none; letter-spacing: .02em; margin: 0 0 8px; }
.ac-hp { position: relative; height: 22px; border-radius: 99px; background: #2a0d0a; overflow: hidden; } .ac-hp div { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a1a10, #e0402c); } .ac-hp span { position: relative; display: block; text-align: center; line-height: 22px; font-size: 12px; font-weight: 800; }
.ac-item.off { opacity: .5; }
@media (max-width: 800px) { .ac-boss-form, .ac-boss-live { grid-template-columns: 1fr; } }

/* ═══ Raid card (compact) + boss on the map ═══ */
.boss-card { text-align: left; }
.boss-head { display: flex; align-items: center; gap: 12px; }
.boss-thumb { position: relative; flex: none; width: 74px; height: 74px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, rgba(200,64,47,.45), #160c09 70%); border: 1px solid #6b2016; overflow: hidden; display: grid; place-items: end center; }
.boss-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.boss-thumb .boss-stamp { font-size: 9px; padding: 1px 4px; border-width: 2px; letter-spacing: .08em; top: 50%; }
.boss-title { min-width: 0; }
.boss-title .boss-name { font-size: 28px; line-height: 1; margin: 2px 0 0; overflow-wrap: anywhere; }
.boss-desc { margin: 8px 0 0; }
.boss-card .res-line { justify-content: flex-start; }
.boss-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; background: radial-gradient(70% 90% at 30% 70%, rgba(80,10,6,.55), rgba(10,4,3,.35) 60%, transparent); animation: fadeIn .4s ease; }
.bo-glow { position: absolute; left: 6%; bottom: 4%; width: 50%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(224,64,44,.5), transparent 65%); animation: breathe 2.6s ease-in-out infinite; }
.bo-art { position: absolute; left: 6%; bottom: 0; height: 82%; max-width: 55%; object-fit: contain; object-position: bottom left; filter: drop-shadow(0 0 26px rgba(224,64,44,.75)) drop-shadow(0 18px 24px #000); animation: bossIdle 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.bo-art.hit { animation: bossHit .55s ease; }
.bo-killed .bo-art { filter: grayscale(.8) brightness(.6) drop-shadow(0 10px 20px #000); animation: none; transform: rotate(-8deg) translateY(6%); }
.bo-escaped .bo-art { opacity: .45; animation: none; filter: blur(1px) grayscale(.5); }
.bo-plate { position: absolute; right: 4%; top: 8%; width: min(44%, 360px); padding: 12px 14px; border-radius: 14px; background: rgba(13,6,5,.78); border: 1px solid #6b2016; backdrop-filter: blur(4px); }
.bo-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 3vw, 38px); color: #ffd0c8; letter-spacing: .03em; line-height: 1.05; margin: 4px 0 8px; overflow-wrap: anywhere; }
.bo-plate .eyebrow { color: #ff8a78; }
.bo-hits { position: absolute; inset: 0; }
.bo-dmg { position: absolute; bottom: 45%; font: 900 clamp(26px, 4vw, 44px) var(--font); color: #ffdd7a; text-shadow: 0 0 12px #e0402c, 0 3px 0 #000; animation: dmgUp 1.5s ease-out forwards; }
.bo-dmg.kill { color: #fff; font-size: clamp(32px, 5vw, 60px); }
@keyframes dmgUp { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-120px) scale(1); } }
@media (max-width: 900px) { .bo-art { height: 78%; max-width: 50%; } .bo-plate { width: 46%; top: 6%; padding: 8px 10px; } .bo-plate .boss-hp { height: 18px; } .bo-plate .boss-hp span { line-height: 18px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .bo-art, .bo-glow { animation: none; } }
/* admin: boss look picker */
.ac-art-picker { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; margin-bottom: 12px; }
.ac-art-picker > img { width: 170px; height: 170px; object-fit: contain; border-radius: 14px; background: radial-gradient(circle at 50% 65%, rgba(200,64,47,.45), #160c09 70%); border: 1px solid #6b2016; filter: drop-shadow(0 0 10px rgba(200,64,47,.5)); }
.ac-art-opts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.ac-art-grid button { aspect-ratio: 1; padding: 3px; border-radius: 10px; border: 2px solid var(--soil-3); background: var(--soil-2); cursor: pointer; }
.ac-art-grid button img { width: 100%; height: 100%; object-fit: contain; }
.ac-art-grid button.on, .ac-art-grid button:hover { border-color: var(--blood); background: #2a0d0a; }
.ac-art-opts input[type=file] { font-size: 12px; color: var(--bone-dim); max-width: 100%; }
.ac-art-opts .row input { flex: 1; min-width: 0; }
@media (max-width: 800px) { .ac-art-picker { grid-template-columns: 1fr; } .ac-art-picker > img { width: 130px; height: 130px; } }

/* ═══ THE GRAND HALL ═══ */
.hall { position: fixed; inset: 0; z-index: 88; background: #07040a; color: var(--bone); user-select: none; -webkit-user-select: none; animation: fadeIn .4s ease; }
body.hall-open #game.active { display: none; }
.hall-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.hall-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: linear-gradient(180deg, rgba(7,4,10,.85), transparent); pointer-events: none; }
.hall-top > * { pointer-events: auto; }
.hall-title { display: flex; flex-direction: column; line-height: 1.1; }
.hall-title b { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: .04em; color: #ffd76a; text-shadow: 0 2px 0 #000; }
.hall-online { font-size: 12px; color: var(--toxic); }
.hall-stats { margin-left: auto; font-size: 12px; background: rgba(13,8,6,.75); border: 1px solid var(--soil-4); border-radius: 99px; padding: 6px 12px; white-space: nowrap; }
.hall-btn { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--soil-4); background: rgba(13,8,6,.8); color: var(--bone); font: 700 13px var(--font); cursor: pointer; }
.hall-btn:hover, .hall-btn.on { border-color: var(--toxic); color: var(--toxic); }
.hall-admin-btn { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid #c9a227; background: linear-gradient(180deg, #ffd76a, #b8860b); color: #2a1800; font: 900 13px var(--font); cursor: pointer; box-shadow: 0 0 18px rgba(255,215,106,.35); }
.hall-admin-btn[hidden] { display: none; }
.hall-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(7,4,10,.88), transparent); flex-wrap: wrap; justify-content: center; }
.hall-emotes { display: flex; gap: 6px; }
.hall-emotes button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--soil-4); background: rgba(13,8,6,.85); font-size: 22px; cursor: pointer; transition: transform .1s; }
.hall-emotes button:hover { transform: translateY(-3px); border-color: var(--toxic); }
.hall-chat { display: flex; gap: 6px; flex: 1; max-width: 460px; min-width: 220px; }
.hall-chat-in { flex: 1; min-width: 0; min-height: 44px; border-radius: 99px; border: 1px solid var(--soil-4); background: rgba(13,8,6,.85); color: var(--bone); padding: 0 16px; font: inherit; font-size: 14px; user-select: text; }
.hall-hint { position: absolute; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 12px; color: var(--bone-dim); background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 99px; pointer-events: none; white-space: nowrap; }
.hall-chatlog { position: absolute; left: 12px; top: 78px; width: min(340px, 70vw); display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.hall-line { font-size: 13px; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 8px; transition: opacity 1s; }
.hall-line b { color: var(--toxic); } .hall-line b.adm { color: #ffd76a; } .hall-line.old { opacity: .35; }
.hall-banner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); max-width: 88vw; text-align: center; font-family: var(--font-display); font-size: clamp(28px, 5vw, 56px); color: #ffd76a; text-shadow: 0 0 30px rgba(255,180,40,.7), 0 4px 0 #000; pointer-events: none; line-height: 1.05; }
.hall-banner[hidden] { display: none; }
.hall-banner.pop { animation: rise .6s cubic-bezier(.2,1.4,.4,1); }
.hall-status { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: rgba(13,8,6,.9); border: 1px solid var(--soil-4); border-radius: 16px; padding: 18px 22px; max-width: 90vw; }
.hall-status[hidden] { display: none; }
.hall-admin { position: absolute; right: 12px; top: 70px; bottom: 90px; width: min(330px, 92vw); overflow-y: auto; background: rgba(20,12,6,.94); border: 1px solid #8a5a1a; border-radius: 16px; padding: 12px; transform: translateX(110%); transition: transform .25s ease; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.hall-admin.open { transform: none; }
.ha-head { display: flex; justify-content: space-between; align-items: center; color: #ffd76a; }
.ha-grp { margin-top: 12px; } .ha-grp .eyebrow { color: #ffd76a; }
.ha-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ha-row button { min-height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--soil-4); background: var(--soil-2); color: var(--bone); font: 600 12px var(--font); cursor: pointer; }
.ha-row button:hover { border-color: #ffd76a; } .ha-row button.on { border-color: #ffd76a; background: rgba(255,215,106,.18); color: #ffd76a; }
.ha-row input { flex: 1; min-width: 0; min-height: 34px; border-radius: 10px; border: 1px solid var(--soil-4); background: var(--soil-0); color: var(--bone); padding: 0 10px; user-select: text; }
.ha-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 6px; min-width: 240px; background: rgba(20,12,6,.96); border: 1px solid #ffd76a; border-radius: 14px; padding: 14px; z-index: 3; }
.ha-pop small { color: var(--bone-dim); margin-bottom: 4px; }
.ha-pop button { min-height: 38px; border-radius: 10px; border: 1px solid var(--soil-4); background: var(--soil-2); color: var(--bone); cursor: pointer; font: 600 13px var(--font); }
.ha-pop button.danger { border-color: #8a2a20; color: #ffb3a8; }
.hall-hud-btn { position: relative; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid #6b4a1a; background: linear-gradient(180deg, rgba(255,215,106,.18), rgba(255,215,106,.06)); color: #ffd76a; font: 800 12px var(--font); letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.hall-hud-btn[data-online]:not([data-online=""])::after { content: attr(data-online); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--toxic); color: #102006; font-size: 10px; line-height: 18px; text-align: center; padding: 0 4px; }
.hall-hud-btn.party { animation: bump 1.2s infinite; }
.hall-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; border: 1px solid #6b4a1a; background: linear-gradient(120deg, rgba(255,215,106,.14), rgba(29,20,14,.9)); color: var(--bone); cursor: pointer; text-align: left; font: inherit; }
.hall-card:hover { border-color: #ffd76a; }
.hall-card.party { box-shadow: 0 0 22px rgba(255,90,200,.35); }
.hc-icon { font-size: 30px; } .hc-text { flex: 1; display: flex; flex-direction: column; } .hc-text b { color: #ffd76a; letter-spacing: .1em; font-size: 13px; } .hc-text small { color: var(--bone-dim); font-size: 12px; }
.hc-go { font-weight: 800; color: #ffd76a; white-space: nowrap; }
.hall-card:not(.open) .hc-go { color: var(--muted); }
.hall-gate { text-align: center; }
.hall-gate h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 6px 0; color: #ffd76a; }
.hall-lock { font-size: 46px; }
.hall-perks { text-align: left; list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hall-perks li { background: var(--soil-2); border: 1px solid var(--soil-3); border-radius: 10px; padding: 8px 10px; }
.hall-pick { max-height: 46vh; }
.hall-pill { display: inline-block; margin-top: 4px; padding: 6px 14px; border-radius: 99px; background: rgba(255,215,106,.12); border: 1px solid #6b4a1a; color: #ffd76a; font-size: 13px; font-weight: 700; }
.hall-pill[hidden] { display: none; }
@media (max-width: 700px) {
  .hall-title b { font-size: 18px; } .hall-stats { font-size: 10px; padding: 4px 8px; }
  .hall-top { flex-wrap: wrap; } .hall-btn { min-height: 34px; padding: 0 10px; font-size: 12px; }
  .hall-emotes button { width: 38px; height: 38px; font-size: 19px; }
  .hall-chat { min-width: 0; max-width: none; flex-basis: 100%; }
  .hall-hint { bottom: calc(118px + env(safe-area-inset-bottom)); font-size: 10px; }
  .hall-chatlog { top: 96px; }
  .hall-hud-btn { order: 3; min-height: 32px; padding: 0 9px; }
}

/* ── Grand Hall 3D ── */
.hall-3d { position: absolute; inset: 0; overflow: hidden; }
.hall-3d[hidden], .hall-cv[hidden], .hall-mode[hidden] { display: none; }
.hall-3d-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.hall-3d-cv:active { cursor: grabbing; }
.h3-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.h3-tag, .h3-sign, .h3-float { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 50% 100%; }
.h3-tag { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.h3-name { font: 700 12px var(--font); color: var(--bone); background: rgba(0,0,0,.62); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.h3-name.you { color: #b6ff7a; } .h3-name.adm { color: #ffd76a; border: 1px solid rgba(255,215,106,.45); }
.h3-emote { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); animation: bump 1.4s ease-in-out infinite; }
.h3-bubble { position: relative; max-width: 220px; font: 600 13px var(--font); color: #1a110b; background: #e8dcc0; padding: 6px 11px; border-radius: 12px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.45); margin-bottom: 6px; overflow-wrap: anywhere; }
.h3-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: #e8dcc0; }
.h3-bubble.adm { background: #ffe9a8; } .h3-bubble.adm::after { border-top-color: #ffe9a8; }
.h3-sign { font: 800 14px var(--font); letter-spacing: .08em; color: rgba(232,220,192,.85); text-shadow: 0 2px 6px #000; white-space: nowrap; }
.h3-sign.gold { color: rgba(255,215,106,.9); }
.h3-float { font: 900 20px var(--font); white-space: nowrap; text-shadow: 0 0 4px #000, 0 2px 0 #000; }
.h3-flash { position: absolute; inset: 0; background: #e6efff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
@media (max-width: 640px) { .h3-name { font-size: 10px; padding: 1px 7px; } .h3-bubble { font-size: 11px; max-width: 160px; } .h3-emote { font-size: 19px; } .h3-sign { font-size: 11px; } }

/* ── Member titles (given by the admin) ── */
.title-badge { --tc: #ffd76a; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 14%, rgba(10,6,4,.85)); color: var(--tc); font: 800 12px var(--font); letter-spacing: .02em; white-space: nowrap; vertical-align: middle; margin-inline-start: 6px; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.title-badge.sm { font-size: 10px; padding: 1px 7px; }
.title-badge.lg { font-size: 14px; padding: 4px 12px; box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 35%, transparent); }
.profile-title { margin: 4px 0 8px; }
.profile-title .title-badge { margin: 0; }
.wallet-chip .title-badge { margin-inline-start: 4px; }
.board .who .title-badge { margin-inline-start: 6px; }
.h3-title { --tc: #ffd76a; font: 800 11px var(--font); color: var(--tc); background: rgba(0,0,0,.72); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); padding: 1px 8px; border-radius: 99px; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.ac-who-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.ac-title-box { border: 1px solid #6b4a1a; border-radius: 14px; padding: 12px; margin: 10px 0; background: linear-gradient(120deg, rgba(255,215,106,.07), transparent); display: flex; flex-direction: column; gap: 8px; }
.ac-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-sw { min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--soil-4); background: rgba(13,8,6,.8); font-size: 18px; cursor: pointer; }
.ac-sw.on { outline: 2px solid #ffd76a; outline-offset: 2px; }
.ac-col { min-width: 30px; width: 30px; height: 30px; border-radius: 99px; }
.ac-title-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--mono, monospace); }
@media (max-width: 640px) { .wallet-chip .title-badge { display: none; } }

/* ── Admin: sweep contests ── */
.ac-sweep-table .ac-tr { grid-template-columns: 44px 1.5fr .55fr .5fr .7fr .55fr 1.6fr auto; min-width: 860px; }
.ac-sweep-table .ac-tr.win { background: rgba(155,225,93,.06); }
.ac-pill { display: inline-block; font: 900 11px var(--font); letter-spacing: .06em; padding: 3px 9px; border-radius: 99px; vertical-align: middle; background: var(--soil-3); color: var(--bone-dim); }
.ac-pill.live { background: #c8402f; color: #fff; animation: bump 1.6s infinite; } .ac-pill.upcoming { background: #6b4a1a; color: #ffd76a; }
.ac-poster { max-width: 100%; max-height: 180px; border-radius: 12px; border: 1px solid var(--soil-4); object-fit: contain; }
.ac-poster.sm { max-height: 110px; max-width: 200px; }
.ac-sweep-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ac-sweep-head h3 { margin: 0 0 4px; }
.ac-pay { font-size: 12px; } .ac-pay.verified { color: var(--toxic); } .ac-pay.owed { color: #ffd76a; font-weight: 800; } .ac-pay.pending { color: var(--bone-dim); } .ac-pay.failed, .ac-pay.not-found { color: #ff6a5a; } .ac-pay.unconfirmed { color: #ffb050; }

/* ── Sweep events (players) — poster style: yellow, pink, toxic green ── */
.alert-banner.sweep { background: linear-gradient(90deg, #f7f06a, #ffe04d, #f7f06a); color: #1a1208; letter-spacing: .02em; }
.alert-banner.clickable { cursor: pointer; } .alert-banner.clickable:hover { filter: brightness(1.06); }
.sweep-card { position: relative; display: block; width: 100%; text-align: left; margin-bottom: 12px; padding: 14px 14px 12px; border-radius: 18px; border: 3px solid #1a1208; background: radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1.5px) 0 0 / 14px 14px, #f7f06a; color: #1a1208; cursor: pointer; font: inherit; box-shadow: 0 6px 0 #1a1208; transition: transform .12s; }
.sweep-card:hover { transform: translateY(-2px); }
.sweep-card.ended { filter: saturate(.55); }
.sw-eyebrow { font: 900 11px var(--font); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw-badge { background: #1a1208; color: #f7f06a; padding: 2px 8px; border-radius: 99px; }
.sweep-card.live .sw-badge, .sweep-modal .sw-badge { background: #e8402f; color: #fff; }
.sw-title { font-family: var(--font-display); font-size: 26px; line-height: 1.05; margin: 8px 0 6px; letter-spacing: .01em; }
.sw-title.big { font-size: clamp(34px, 7vw, 58px); }
.sw-title .pink { color: #ff8ad8; -webkit-text-stroke: 1.5px #1a1208; text-shadow: 0 3px 0 #1a1208; }
.sw-title .green { color: #a6f03c; -webkit-text-stroke: 1.5px #1a1208; text-shadow: 0 3px 0 #1a1208; }
.sw-eq { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 6px 0; }
.sw-tile { position: relative; width: 48px; height: 48px; border-radius: 10px; border: 2.5px solid #1a1208; background: #fffbe6; display: grid; place-items: center; box-shadow: 0 3px 0 #1a1208; }
.sw-tile img { width: 88%; height: 88%; object-fit: contain; }
.sw-tile.free { background: #ff8ad8; transform: rotate(-4deg); width: 56px; height: 56px; }
.sw-tile.free b { position: absolute; top: -10px; right: -16px; background: #a6f03c; border: 2px solid #1a1208; border-radius: 6px; font: 900 10px var(--font); padding: 1px 5px; transform: rotate(10deg); }
.sw-op { font: 900 20px var(--font); color: #1a1208; }
.sw-mini { font-size: 12px; font-weight: 800; margin-top: 4px; }
.sw-go { position: absolute; right: 14px; bottom: 12px; font: 900 12px var(--font); }
.land-ev.sweep-ev { padding: 0; background: none; border: 0; }
.land-ev.sweep-ev .sweep-card { margin: 0; }
.sweep-modal .sw-poster { width: 100%; border-radius: 14px; border: 3px solid #1a1208; margin-bottom: 10px; }
.sweep-modal .sw-hero { border-radius: 18px; border: 3px solid #1a1208; padding: 16px; color: #1a1208; background: radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1.5px) 0 0 / 14px 14px, #f7f06a; box-shadow: 0 6px 0 #1a1208; }
.sweep-modal .sw-hero .lore { color: #3a2a10; margin: 6px 0 0; }
.sweep-modal .sw-tile { width: 64px; height: 64px; } .sweep-modal .sw-tile.free { width: 74px; height: 74px; }
.sw-buy { display: flex; justify-content: center; margin: 14px 0 4px; font-size: 16px; }
.sw-me { border: 1px solid var(--soil-4); border-radius: 12px; padding: 10px 12px; background: var(--soil-2); }
.sw-me-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--bone-dim); }
.sw-me-stats b { color: var(--bone); font-size: 18px; }
.sw-board { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-board li { display: grid; grid-template-columns: 30px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--soil-2); font-size: 13px; }
.sw-board li.win { background: linear-gradient(90deg, rgba(166,240,60,.12), var(--soil-2)); } .sw-board li.me { outline: 1px solid var(--toxic); }
.sw-board .pos { font-weight: 900; text-align: center; } .sw-board .own { color: var(--bone-dim); font-size: 12px; } .sw-board .who { font-family: var(--mono, monospace); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-rules { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
@media (max-width: 640px) { .sw-board li { grid-template-columns: 26px 1fr auto auto; } .sw-board .own { display: none; } .sw-title { font-size: 22px; } }
@media (max-width: 640px) { .sweep-modal .sw-tile { width: 46px; height: 46px; } .sweep-modal .sw-tile.free { width: 54px; height: 54px; } .sw-op { font-size: 16px; } .sw-eq { gap: 3px; } }

/* ── Holder vault ── */
.tabs button[data-badge]:not([data-badge=""])::after { content: attr(data-badge); position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #ffd76a; color: #2a1800; font: 900 10px/16px var(--font); }
.vault-hero { border-radius: 18px; padding: 16px; border: 1px solid #6b4a1a; background: radial-gradient(120% 140% at 0% 0%, rgba(255,215,106,.18), rgba(29,20,14,.95) 60%); }
.vault-bal { font-family: var(--font-display); font-size: clamp(34px, 6vw, 48px); color: #ffd76a; text-shadow: 0 0 24px rgba(255,190,60,.35); line-height: 1.05; margin: 4px 0; }
.vault-stats, .vault-mestats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--bone-dim); align-items: center; }
.vault-stats b, .vault-mestats b { color: var(--bone); }
.vault-me { margin-top: 12px; border-radius: 16px; padding: 14px; border: 1px solid var(--soil-4); background: var(--soil-2); }
.vault-claim { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 8px; }
.vault-claim small { display: block; font-size: 11px; color: var(--bone-dim); text-transform: uppercase; letter-spacing: .08em; }
.vault-claim b { font-size: 26px; color: var(--toxic); font-variant-numeric: tabular-nums; }
.vault-claim-btn { white-space: nowrap; }
.vault-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vault-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--soil-4); background: var(--soil-2); }
.vault-act p { margin: 2px 0 0; } .vault-act.warn { border-color: #c8402f; background: linear-gradient(90deg, rgba(200,64,47,.14), var(--soil-2)); } .vault-act.up { border-color: #6b4a1a; } .vault-act.busy { justify-content: flex-start; border-style: dashed; }
.vault-act .btn { white-space: nowrap; }
.vault-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vt { text-align: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--soil-3); background: var(--soil-2); display: flex; flex-direction: column; gap: 2px; }
.vt b { color: #ffd76a; font-size: 16px; } .vt small { font-size: 10px; color: var(--bone-dim); } .vt em { font-style: normal; font-size: 10px; color: var(--toxic); font-weight: 800; }
.vt.on { border-color: var(--toxic); box-shadow: 0 0 12px rgba(155,225,93,.15); }
.vault-tokens { margin-top: 12px; } .vault-tokens summary { cursor: pointer; font-weight: 800; }
.vault-tokens ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; font-size: 12px; }
.vault-tokens li { display: flex; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--soil-2); } .vault-tokens li.vt-other { color: #ffb3a8; } .vault-tokens li.vt-unregistered { color: var(--bone-dim); }
.vault-confirm ul { padding-left: 18px; }
@media (max-width: 640px) { .vault-tiers { grid-template-columns: repeat(3, 1fr); } .vault-act { flex-direction: column; align-items: stretch; } }
.vault-me .meter { height: 10px; margin: 0 0 10px; }
.stat-vault b { color: #ffd76a; }
.vault-claim { flex-wrap: wrap; } .vault-claim b { white-space: nowrap; }

/* ── Islands & live players ─────────────────────────────── */
.isle-bar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(13,8,6,.78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
.isle-bar::-webkit-scrollbar { display: none; }
.isle-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--bone-dim); cursor: pointer; white-space: nowrap; font-size: 13px; }
.isle-chip b { font-weight: 800; letter-spacing: .04em; }
.isle-chip small { color: var(--toxic); font-weight: 700; }
.isle-chip i { font-style: normal; font-size: 11px; }
.isle-chip:hover { color: var(--bone); border-color: var(--soil-4); }
.isle-chip.on { background: linear-gradient(180deg, #b4f27a, var(--toxic) 60%, var(--toxic-dim)); color: #102006; }
.isle-chip.on small { color: #102006; }
.isle-chip.locked:not(.on) { opacity: .75; }
@media (max-width: 600px) { .isle-chip b { display: none; } .isle-chip { padding: 0 10px; font-size: 15px; } }
.w3-isle { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(127,246,255,.45); background: rgba(8,16,30,.72); color: #dff8ff; cursor: pointer; white-space: nowrap; font-size: 12px; box-shadow: 0 0 18px rgba(127,246,255,.25); }
.w3-isle small { color: var(--toxic); font-weight: 700; }
.w3-isle.locked { border-color: rgba(255,255,255,.2); box-shadow: none; }
.w3-isle:hover { border-color: var(--toxic); }
.w3-peer { position: absolute; left: 0; top: 0; pointer-events: auto; padding: 1px 7px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(13,8,6,.7); color: var(--bone); font: 700 10px var(--font); white-space: nowrap; cursor: pointer; will-change: transform; }
.w3-peer i { font-style: normal; color: var(--amber); }
.w3-peer.me { border-color: var(--toxic); color: var(--toxic); cursor: default; }
.w3-say { position: absolute; left: 0; top: 0; pointer-events: none; padding: 4px 9px; border-radius: 12px 12px 12px 3px; background: #fff8e8; color: #1d140e; font: 700 12px var(--font); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.w3-say[hidden] { display: none; }
.w3-peers { font: 800 10px var(--font); color: var(--toxic); letter-spacing: .04em; }
.w3-peers[hidden], .w3-peers:empty { display: none; }
.room-peers { fill: var(--toxic); font: 800 15px var(--font); text-anchor: middle; paint-order: stroke; stroke: #0b0705; stroke-width: 4px; }
.world-svg.island-crystal { filter: hue-rotate(160deg) saturate(1.2); }
.world-svg.island-sky { filter: hue-rotate(200deg) brightness(1.35) saturate(.8); }
.here-now .here-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.here-p { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--soil-4); background: var(--soil-2); cursor: pointer; font-size: 13px; }
.here-p img, .here-p .pc-none { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--soil-3); }
.here-p:hover { border-color: var(--toxic); }
.social-bar { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.emote-row { display: flex; flex-wrap: wrap; gap: 6px; }
.emote-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--soil-4); background: var(--soil-2); font-size: 19px; cursor: pointer; }
.emote-btn:hover { border-color: var(--toxic); transform: translateY(-1px); }
.quick-chat summary { cursor: pointer; color: var(--bone-dim); font-size: 13px; min-height: 32px; display: flex; align-items: center; }
.quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.player-card .pc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.pc-img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; border: 2px solid var(--soil-4); flex: none; }
.pc-none { display: grid; place-items: center; background: var(--soil-3); font-size: 28px; }
.pc-live { color: var(--toxic); font-size: 12px; font-weight: 700; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.gift-form { display: flex; flex-direction: column; gap: 8px; }
.gift-row { display: grid; grid-template-columns: 1fr 110px; gap: 2px 10px; align-items: center; }
.gift-row small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.gift-row input { min-height: 40px; border-radius: 10px; border: 1px solid var(--soil-4); background: var(--soil-1); color: var(--bone); padding: 0 10px; font: inherit; }
.islands-card { margin: 12px 0; }
.isle-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--soil-3); }
.isle-row:first-of-type { border-top: 0; }
.isle-row .isle-main { flex: 1; min-width: 0; }
.isle-row .isle-main b { margin-right: 6px; }
.isle-row.here .isle-main b { color: var(--toxic); }
.isle-row .btn { flex: none; min-height: 38px; }
.isle-paths { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--bone-dim); }
.isle-paths li.ok { color: var(--toxic); }
.island-lock { border-color: rgba(127,246,255,.35); }
.isle-head { margin: 16px 0 6px; color: #7ff6ff; }
.tag-coop { background: rgba(155,225,93,.16); color: var(--toxic); border-color: var(--toxic-dim); }
.rows li.clickable { cursor: pointer; } .rows li.clickable:hover { background: var(--soil-3); }
.pick-avatar { cursor: pointer; border-radius: 10px; } .pick-avatar.on { outline: 2px solid var(--toxic); }
@media (max-width: 600px) { .gift-row { grid-template-columns: 1fr 90px; } .isle-row { flex-direction: column; } }
.pick-err { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(200,64,47,.15); border: 1px solid var(--blood); color: #ffb4a8; font-weight: 600; }
.pick-err[hidden] { display: none; }

/* ── Goals: the Colony Path ─────────────────────────────── */
.goal-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 12px; border-radius: 14px; border: 1px solid rgba(255,176,46,.45); background: linear-gradient(90deg, rgba(255,176,46,.16), rgba(255,176,46,.04)); }
.goal-bar.ready { border-color: var(--toxic); background: linear-gradient(90deg, rgba(155,225,93,.22), rgba(155,225,93,.05)); animation: goalGlow 2s ease-in-out infinite; }
.goal-bar.done { border-color: var(--soil-4); background: var(--soil-2); }
@keyframes goalGlow { 50% { box-shadow: 0 0 18px rgba(155,225,93,.35); } }
.gb-ico { font-size: 22px; flex: none; }
.gb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gb-txt small { font-size: 10px; letter-spacing: .14em; color: var(--amber); font-weight: 800; }
.goal-bar.ready .gb-txt small { color: var(--toxic); }
.gb-txt b { font-size: 14px; } .gb-txt em { font-style: normal; color: var(--bone-dim); font-size: 12px; }
.gb-go { flex: none; }
.home-sec { margin: 0 0 22px; }
.home-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); border-bottom: 1px solid var(--soil-3); padding-bottom: 6px; }
.home-sec > * + * { margin-top: 10px; }
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-tile { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--soil-4); background: var(--soil-2); cursor: pointer; }
.home-tile:hover { border-color: var(--toxic-dim); }
.home-tile small { font-size: 10px; letter-spacing: .16em; color: var(--toxic); font-weight: 800; }
.home-tile b { font-size: 15px; }
.home-level { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .home-level b { font-size: 22px; }
.home-more summary { cursor: pointer; color: var(--bone-dim); font-size: 13px; min-height: 32px; display: flex; align-items: center; }
.path-card { border-color: rgba(255,176,46,.4); background: linear-gradient(180deg, rgba(255,176,46,.08), transparent 60%), var(--soil-2); }
.path-head { display: flex; gap: 12px; align-items: center; margin: 6px 0 10px; }
.path-head small { font-size: 10px; letter-spacing: .16em; color: var(--amber); font-weight: 800; }
.path-head .room-title { margin: 0; } .path-head p { margin: 2px 0 0; }
.path-icon { font-size: 34px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--soil-3); flex: none; }
.path-steps { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.path-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--soil-1); border: 1px solid var(--soil-3); }
.path-steps li.ok { opacity: .7; } .path-steps li.ok .ps-text { text-decoration: line-through; text-decoration-color: rgba(155,225,93,.6); }
.ps-check { width: 22px; text-align: center; color: var(--bone-dim); flex: none; } li.ok .ps-check { color: var(--toxic); }
.ps-text { flex: 1; min-width: 0; font-size: 14px; } .ps-text small { color: var(--amber); font-weight: 700; }
.ps-bar { display: block; height: 4px; border-radius: 4px; background: var(--soil-4); margin-top: 5px; overflow: hidden; }
.ps-bar i { display: block; height: 100%; background: var(--amber); border-radius: 4px; }
.path-reward { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.path-claim { width: 100%; margin-top: 10px; animation: goalGlow 2s ease-in-out infinite; }
.path-road { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.path-road li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--soil-4); color: var(--muted); }
.path-road li.ok { color: var(--toxic); border-color: var(--toxic-dim); } .path-road li.now { color: var(--amber); border-color: var(--amber); }
.rank-badge { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 12px; border-radius: 999px; background: var(--soil-3); border: 1px solid var(--soil-4); }
.rank-badge small { color: var(--bone-dim); }
.raid-card .hc-icon { color: var(--blood); }
@media (max-width: 600px) { .home-row { grid-template-columns: 1fr; } }
/* passages & squads */
.passage-grid { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.passage-grid li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--soil-1); border: 1px dashed var(--soil-4); }
.passage-grid li b { font-size: 13px; color: var(--muted); } .passage-grid li small { color: var(--bone-dim); font-size: 11px; }
.passage-grid li.ok { border-style: solid; border-color: var(--toxic-dim); } .passage-grid li.ok b { color: var(--toxic); } .passage-grid li.ok small { color: var(--bone); }
.why-squad .perk-list, .perk-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.perk-list li.ok { color: var(--toxic); }
.squad-perk { margin: 8px 0 12px; } .squad-perk p { margin: 2px 0 0; }
.members li.clickable { cursor: pointer; }
@media (max-width: 420px) { .passage-grid { grid-template-columns: 1fr; } }

/* ── Player Handbook ─────────────────────────────────────── */
.hb-wrap { position: fixed; inset: 0; z-index: 96; background: rgba(5,3,2,.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 18px; animation: fadeIn .2s; }
.hb-wrap.out { opacity: 0; transition: opacity .2s; }
.hb { width: min(1080px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid var(--soil-4); background: radial-gradient(1200px 400px at 80% -10%, rgba(155,225,93,.10), transparent 60%), linear-gradient(180deg, #1d140e, #120b08); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .3s ease; }
.hb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--soil-3); }
.hb-brand { display: flex; align-items: center; gap: 12px; }
.hb-brand small { display: block; font-size: 10px; letter-spacing: .24em; color: var(--toxic); font-weight: 800; }
.hb-brand b { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1; }
.hb-crew { display: flex; } .hb-crew img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #120b08; margin-left: -10px; background: var(--soil-3); } .hb-crew img:first-child { margin-left: 0; }
.hb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; }
.hb-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--soil-3); overflow-y: auto; background: rgba(0,0,0,.18); }
.hb-nav button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--bone-dim); cursor: pointer; text-align: left; font-size: 14px; }
.hb-nav button span { width: 24px; text-align: center; font-size: 17px; }
.hb-nav button:hover { color: var(--bone); background: var(--soil-2); }
.hb-nav button.on { color: var(--bone); background: var(--soil-3); border-color: var(--toxic-dim); box-shadow: inset 3px 0 0 var(--toxic); }
.hb-content { overflow-y: auto; padding: 26px 34px 30px; outline: none; scroll-behavior: smooth; }
.hb-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.hb-hero-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; background: linear-gradient(160deg, var(--soil-3), var(--soil-1)); border: 1px solid var(--soil-4); flex: none; }
.hb-hero small { font-size: 11px; letter-spacing: .24em; color: var(--toxic); font-weight: 800; }
.hb-hero h2 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 42px; letter-spacing: .02em; line-height: 1; }
.hb-lead { font-size: 17px; line-height: 1.6; color: var(--bone); max-width: 70ch; margin: 0 0 18px; }
.hb-block { margin: 26px 0 0; }
.hb-block h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.hb-block p, .hb-block li { font-size: 14.5px; line-height: 1.6; color: var(--bone); max-width: 75ch; }
.hb-block ul { padding-left: 20px; margin: 8px 0; }
.hb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.hb-card { padding: 16px; border-radius: 16px; background: var(--soil-2); border: 1px solid var(--soil-4); }
.hb-card-ico { font-size: 24px; display: block; margin-bottom: 6px; }
.hb-card b { display: block; font-size: 15px; margin-bottom: 4px; }
.hb-card p { margin: 0; font-size: 13.5px; color: var(--bone-dim); line-height: 1.5; }
.hb-steps { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.hb-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--soil-2); border: 1px solid var(--soil-3); }
.hb-steps li > div { flex: 1; min-width: 0; } .hb-steps b { font-size: 15px; } .hb-steps p { margin: 2px 0 0; color: var(--bone-dim); font-size: 13.5px; }
.hb-step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #102006; background: linear-gradient(180deg, #b4f27a, var(--toxic)); flex: none; }
.hb-go { flex: none; }
.hb-callout { display: flex; flex-direction: column; gap: 4px; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--toxic-dim); background: rgba(155,225,93,.08); font-size: 14px; line-height: 1.55; }
.hb-callout b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--toxic); }
.hb-callout.safe { border-color: rgba(127,183,201,.5); background: rgba(127,183,201,.08); } .hb-callout.safe b { color: var(--ice); }
.hb-callout.warn { border-color: rgba(255,176,46,.5); background: rgba(255,176,46,.08); } .hb-callout.warn b { color: var(--amber); }
.hb-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--soil-3); margin-top: 8px; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hb-table th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); background: var(--soil-2); padding: 10px 12px; white-space: nowrap; }
.hb-table td { padding: 10px 12px; border-top: 1px solid var(--soil-3); vertical-align: top; color: var(--bone); }
.hb-table tr:hover td { background: rgba(255,255,255,.02); }
.hb-path td:first-child { width: 34px; text-align: center; color: var(--toxic); }
.hb-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; } .hb-chips span { white-space: nowrap; }
.hb-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 8px; }
.hb-ladder div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; background: var(--soil-2); border: 1px solid var(--soil-4); text-align: center; }
.hb-ladder span { font-size: 22px; } .hb-ladder b { font-size: 13px; } .hb-ladder small { color: var(--bone-dim); font-size: 11px; }
.hb-loop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hb-loop div { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--soil-2); border: 1px solid var(--soil-4); font-size: 13.5px; }
.hb-loop div:not(:last-child)::after { content: '→'; margin-left: 6px; color: var(--muted); }
.hb-loop b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soil-4); color: var(--toxic); font-size: 12px; }
.hb-faq { display: flex; flex-direction: column; gap: 8px; }
.hb-faq details { border-radius: 14px; border: 1px solid var(--soil-3); background: var(--soil-2); padding: 0 16px; }
.hb-faq summary { cursor: pointer; min-height: 50px; display: flex; align-items: center; font-weight: 700; font-size: 15px; list-style: none; }
.hb-faq summary::after { content: '+'; margin-left: auto; color: var(--toxic); font-size: 20px; }
.hb-faq details[open] summary::after { content: '−'; }
.hb-faq p { margin: 0 0 14px; color: var(--bone-dim); line-height: 1.6; font-size: 14px; }
.hb-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--soil-3); }
@media (max-width: 760px) {
  .hb-wrap { padding: 0; }
  .hb { height: 100%; border-radius: 0; border: 0; }
  .hb-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .hb-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--soil-3); padding: 8px; scrollbar-width: none; }
  .hb-nav::-webkit-scrollbar { display: none; }
  .hb-nav button { flex: none; min-height: 38px; padding: 0 12px; }
  .hb-nav button.on { box-shadow: inset 0 -3px 0 var(--toxic); }
  .hb-content { padding: 18px 16px 24px; }
  .hb-hero h2 { font-size: 34px; } .hb-hero-ico { width: 52px; height: 52px; font-size: 26px; }
  .hb-lead { font-size: 15.5px; }
  .hb-steps li { flex-wrap: wrap; }
  .hb-brand b { font-size: 21px; }
}
.hb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-steps { width: 100%; } .hb-steps p { max-width: none; }
@media (max-width: 560px) { .hb-cards { grid-template-columns: 1fr; } }

/* ── Live monster events ─────────────────────────────────── */
.alert-banner.live { background: linear-gradient(90deg, #5a0f1c, #a3142f 50%, #5a0f1c); color: #fff; font-weight: 800; letter-spacing: .04em; animation: liveFlash 1.6s ease-in-out infinite; }
.alert-banner.live.ph-scheduled { background: linear-gradient(90deg, #3a1622, #6a2433, #3a1622); animation: none; }
@keyframes liveFlash { 50% { filter: brightness(1.25); } }
.live-hud { position: fixed; z-index: 92; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 20px)); padding: 12px; border-radius: 20px; border: 1px solid #ff3f5f; background: linear-gradient(180deg, rgba(40,6,12,.95), rgba(18,4,8,.96)); box-shadow: 0 0 40px rgba(255,40,70,.35), var(--shadow); color: #fff; animation: rise .3s ease; display: flex; flex-direction: column; gap: 10px; }
.live-hud.ph-gathering { border-color: #ffb02e; box-shadow: 0 0 30px rgba(255,176,46,.25), var(--shadow); }
.live-hud.away { width: min(420px, calc(100vw - 20px)); }
.hall ~ .live-hud, body:has(.hall) .live-hud { bottom: 16px; }
.lh-head { display: flex; gap: 12px; align-items: center; }
.lh-art-wrap { position: relative; width: 92px; height: 92px; flex: none; }
.lh-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,50,80,.7)); }
.ph-gathering .lh-art { filter: brightness(.25) drop-shadow(0 0 10px #ffb02e); }
.lh-art.hit { animation: lhHit .25s ease; }
@keyframes lhHit { 30% { transform: translate(-5px, 2px) rotate(-4deg) scale(.96); filter: brightness(2) drop-shadow(0 0 20px #fff); } 70% { transform: translate(4px, -1px) rotate(3deg); } }
.lh-floats { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.lh-float { position: absolute; top: 30%; font: 900 16px var(--font); color: #ffe27a; text-shadow: 0 2px 6px #000; animation: lhFloat 1.3s ease-out forwards; white-space: nowrap; }
.lh-float.crit { color: #ff5f7f; font-size: 21px; }
@keyframes lhFloat { to { transform: translateY(-70px); opacity: 0; } }
.lh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lh-info .eyebrow { color: #ff8fa3; }
.ph-gathering .lh-info .eyebrow { color: var(--amber); }
.lh-name { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1; }
.lh-hp { position: relative; height: 18px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; }
.lh-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff2f4f, #ff8a3f); transition: width .25s; }
.lh-hp span { position: relative; display: block; text-align: center; font: 800 11px var(--font); line-height: 18px; text-shadow: 0 1px 2px #000; }
.lh-timer { color: rgba(255,255,255,.75); }
.lh-me { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: rgba(255,255,255,.8); flex-wrap: wrap; }
.lh-strike { position: relative; overflow: hidden; min-height: 60px; border-radius: 16px; border: 0; cursor: pointer; font: 900 22px var(--font); letter-spacing: .12em; color: #fff; background: linear-gradient(180deg, #ff5f6f, #c8102f); box-shadow: 0 6px 24px rgba(255,40,70,.5), inset 0 1px 0 rgba(255,255,255,.4); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.lh-strike:active { transform: scale(.97); }
.lh-strike span { position: relative; z-index: 1; }
.lh-strike.cd { filter: saturate(.4) brightness(.8); }
.lh-strike.cd i { position: absolute; inset: 0 auto 0 0; width: 100%; background: rgba(255,255,255,.18); transform-origin: left; animation: lhCd linear forwards; }
@keyframes lhCd { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.lh-go { width: 100%; }
.lh-wait { margin: 0; text-align: center; color: var(--amber); }
.lh-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; font-size: 12px; counter-reset: lt; }
.lh-top li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.05); counter-increment: lt; }
.lh-top li::before { content: counter(lt) '.'; color: #ff8fa3; margin-right: 4px; }
.lh-top li span { flex: 1; } .lh-top li.me { outline: 1px solid var(--toxic); }
.lh-result { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.lh-result h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; }
.lh-result .lh-top { width: 100%; }
@media (max-width: 600px) { .lh-art-wrap { width: 70px; height: 70px; } .lh-name { font-size: 22px; } .lh-strike { min-height: 56px; font-size: 20px; } }
.sound-btn { font-size: 16px; }
.sound-pop { position: fixed; z-index: 97; width: 270px; padding: 14px; border-radius: 16px; border: 1px solid var(--soil-4); background: linear-gradient(180deg, #22170f, #160e0a); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; font-size: 14px; animation: rise .2s ease; }
.sound-pop label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sound-pop .sound-vol { flex-direction: column; align-items: stretch; gap: 4px; }
.sound-pop input[type=range] { accent-color: var(--toxic); width: 100%; }
.sound-pop input[type=checkbox] { accent-color: var(--toxic); width: 18px; height: 18px; }
.live-hud [hidden] { display: none !important; }
.live-hud { z-index: 96; } .hb-wrap { z-index: 98; } .sound-pop { z-index: 99; }
body:has(.hall) .live-hud { top: 64px; bottom: auto; }