:root {
  --bg: #070814;
  --panel: rgba(12, 14, 28, 0.82);
  --line: rgba(255, 255, 255, 0.08);
  --text: #eef2ff;
  --muted: #9aa3c7;
  --neon: #6cf0ff;
  --gold: #ffd36a;
  --pink: #ff4d8d;
  --ok: #5dffb1;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Manrope, sans-serif; }
body { overflow: hidden; }
h1, h2, h3, .act, .eyebrow { font-family: Unbounded, sans-serif; }
button { font: inherit; cursor: pointer; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.gate { min-height: 100dvh; display: grid; place-items: end center; padding: 24px; position: relative; overflow: hidden; }
.gate-city {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 77, 141, .28), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(108, 240, 255, .18), transparent 32%),
    linear-gradient(#0b1024, #15101c 55%, #1b0d18);
}
.gate-city:before, .gate-city:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: repeating-linear-gradient(90deg, #12182e 0 28px, #0c101f 28px 46px);
  clip-path: polygon(0 40%, 8% 22%, 16% 38%, 24% 10%, 36% 34%, 48% 6%, 60% 30%, 72% 12%, 84% 36%, 100% 8%, 100% 100%, 0 100%);
  opacity: .95;
}
.gate-city:after { height: 28%; background: #0a0d18; opacity: 1; }
.gate-card {
  position: relative; z-index: 2; width: min(520px, 100%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 28px;
  padding: 28px; backdrop-filter: blur(16px);
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
}
.eyebrow { letter-spacing: .16em; font-size: 11px; color: var(--neon); margin: 0 0 8px; }
.gate h1 { margin: 0; font-size: 52px; letter-spacing: -0.04em; }
.lead { color: var(--muted); line-height: 1.5; }
.gate-actions { display: grid; gap: 12px; margin-top: 18px; }
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 48px; border-radius: 14px; border: 0; text-decoration: none; font-weight: 800;
}
.btn.primary { background: linear-gradient(90deg, var(--pink), #7a5cff); color: white; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }

.app { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.hud {
  display: grid; grid-template-columns: 1.2fr .9fr 1.1fr 1.1fr; gap: 10px;
  padding: 12px 14px 8px; background: linear-gradient(#070814, transparent);
  position: relative; z-index: 5;
}
.who { display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(135deg, #2b2148, #6cf0ff); display: grid; place-items: center; font-weight: 800;
}
.who span, .stat small { display: block; color: var(--muted); font-size: 11px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.stat.cash b { color: var(--gold); }
.bar { height: 6px; border-radius: 99px; background: #1b2038; overflow: hidden; margin: 5px 0; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ee6a6, var(--neon)); transition: width .35s; }
.bar.xp i { background: linear-gradient(90deg, #7a5cff, var(--pink)); }

.layout { display: grid; grid-template-columns: 92px 1fr; min-height: 0; }
.jobs-rail {
  overflow: auto; padding: 8px; display: grid; align-content: start; gap: 8px;
}
.job-chip {
  border: 1px solid var(--line); background: rgba(10,12,24,.7); color: var(--text);
  border-radius: 16px; padding: 10px 6px; text-align: center;
}
.job-chip.on { border-color: var(--neon); box-shadow: 0 0 0 1px rgba(108,240,255,.25); }
.job-chip small { display: block; color: var(--muted); font-size: 10px; }
.job-chip.lock { opacity: .45; }

.stage {
  position: relative; overflow: hidden; margin: 0 12px 8px; border-radius: 28px;
  border: 1px solid var(--line);
}
.sky, .skyline, .ground, .props { position: absolute; inset: 0; }
.sky {
  background:
    radial-gradient(circle at 75% 18%, rgba(255, 211, 106, .16), transparent 22%),
    linear-gradient(#14182d, #24131f 70%, #1a1020);
}
.skyline {
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(108,240,255,.08) 18px 19px),
    linear-gradient(transparent 40%, rgba(0,0,0,.2));
}
.skyline:before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 28%; height: 36%;
  background: repeating-linear-gradient(90deg, #171d33 0 22px, #0f1324 22px 40px);
  clip-path: polygon(0 55%, 10% 20%, 18% 48%, 29% 8%, 40% 42%, 52% 14%, 64% 50%, 76% 18%, 88% 46%, 100% 10%, 100% 100%, 0 100%);
  opacity: .9;
}
.ground {
  top: auto; height: 28%;
  background: linear-gradient(transparent, rgba(0,0,0,.55)), repeating-linear-gradient(90deg, #1a1420 0 40px, #22182a 40px 80px);
}

.stage[data-job="miner"] .sky { background: linear-gradient(#0d1018, #2a1d12 60%, #1a120d); }
.stage[data-job="miner"] .ground { background: linear-gradient(#2b2118, #16110d); }
.stage[data-job="builder"] .sky { background: linear-gradient(#1c2438, #c48a4a 80%); }
.stage[data-job="fisher"] .sky { background: linear-gradient(#12304a, #1c6b7a); }
.stage[data-job="fisher"] .ground { background: linear-gradient(#0b3a48, #07222b); }
.stage[data-job="taxi"] .sky { background: linear-gradient(#120818, #2a1030 50%, #1a0b14); }
.stage[data-job="farmer"] .sky { background: linear-gradient(#87b7ff, #f3d48a); }
.stage[data-job="farmer"] .ground { background: linear-gradient(#6aa13a, #35581c); }
.stage[data-job="mushroomer"] .sky { background: linear-gradient(#102018, #163322); }
.stage[data-job="mushroomer"] .ground { background: linear-gradient(#244022, #0f1b10); }

.props:before, .props:after { content: ""; position: absolute; }
.stage[data-job="miner"] .props:before {
  width: 90px; height: 70px; left: 12%; bottom: 26%;
  background: #3a2a20; clip-path: polygon(10% 100%, 30% 30%, 55% 60%, 80% 20%, 100% 100%);
}
.stage[data-job="builder"] .props:before {
  width: 70px; height: 120px; right: 14%; bottom: 26%; background: #c9a36a;
  box-shadow: 20px 30px 0 #8b6a3d, 40px 60px 0 #d7b57a;
}
.stage[data-job="fisher"] .props:before {
  left: 0; right: 0; bottom: 22%; height: 18%;
  background: linear-gradient(180deg, rgba(80, 210, 230, .45), #0a2a33);
  animation: wave 3s linear infinite;
}
.stage[data-job="taxi"] .props:before {
  width: 130px; height: 46px; right: 10%; bottom: 27%;
  background: #ffd36a; border-radius: 18px 18px 8px 8px;
  box-shadow: 14px 18px 0 #111, 90px 18px 0 #111;
}
.stage[data-job="farmer"] .props:before {
  left: 8%; right: 8%; bottom: 26%; height: 28px;
  background: repeating-linear-gradient(90deg, #d8a23a 0 16px, #6aa13a 16px 28px);
}
.stage[data-job="mushroomer"] .props:before {
  width: 34px; height: 38px; left: 16%; bottom: 28%;
  background: radial-gradient(circle at 50% 30%, #ff5d7a 0 16px, #f2d4b0 16px 18px, #f2d4b0 18px);
}

.hero { position: absolute; left: 50%; bottom: 16%; width: 120px; height: 190px; transform: translateX(-50%); z-index: 3; }
.hero-shadow { position: absolute; left: 18px; right: 18px; bottom: 0; height: 16px; background: rgba(0,0,0,.35); filter: blur(6px); border-radius: 50%; }
.hero-figure { position: absolute; inset: 0; animation: idle 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.head {
  position: absolute; left: 38px; top: 18px; width: 42px; height: 42px; border-radius: 50%;
  background: #f0c7a4; box-shadow: inset -6px -6px 0 rgba(0,0,0,.08);
}
.hair { position: absolute; left: 36px; top: 12px; width: 46px; height: 22px; border-radius: 20px 20px 8px 8px; background: #2b1b14; }
.eye { position: absolute; top: 18px; width: 5px; height: 7px; background: #1a1220; border-radius: 50%; animation: blink 5s infinite; }
.eye.l { left: 11px; } .eye.r { right: 11px; }
.torso { position: absolute; left: 36px; top: 58px; width: 48px; height: 58px; border-radius: 16px 16px 10px 10px; background: #3d4dff; }
.arm { position: absolute; top: 62px; width: 16px; height: 48px; background: #f0c7a4; border-radius: 10px; transform-origin: top center; }
.arm.l { left: 24px; } .arm.r { right: 24px; }
.arm i { position: absolute; left: 1px; bottom: -6px; width: 14px; height: 16px; border-radius: 6px; background: #f0c7a4; }
.tool {
  position: absolute !important; left: -2px; bottom: -28px; width: 10px; height: 34px;
  background: #8d6b4a; border-radius: 4px;
}
.tool:after { content: ""; position: absolute; top: -8px; left: -10px; width: 28px; height: 12px; background: #9aa3c7; border-radius: 3px; }
.leg { position: absolute; bottom: 14px; width: 18px; height: 46px; background: #1d2438; border-radius: 8px; }
.leg.l { left: 38px; } .leg.r { right: 38px; }

.stage[data-job="miner"] .torso { background: #4b5568; }
.stage[data-job="builder"] .torso { background: #f59e0b; }
.stage[data-job="fisher"] .torso { background: #0ea5a4; }
.stage[data-job="taxi"] .torso { background: #111827; }
.stage[data-job="farmer"] .torso { background: #65a30d; }
.stage[data-job="mushroomer"] .torso { background: #7c3aed; }

.hero.swing .arm.r { animation: swing .35s ease-in-out; }
.hero.cast .arm.r { animation: cast .45s ease; }
.hero.drive { animation: bounce .4s ease; }
.act.pulse { transform: scale(.96); }

.job-card {
  position: absolute; left: 16px; top: 16px; z-index: 4; max-width: 280px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px;
}
.job-card h2 { margin: 0; font-size: 22px; }
.job-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.job-meta { display: flex; gap: 10px; margin-top: 8px; color: var(--gold); font-size: 12px; }

.act {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  min-width: min(360px, 80%); height: 64px; border: 0; border-radius: 20px; color: #081018;
  background: linear-gradient(180deg, #ffe38a, #f5b942); font-size: 20px; font-weight: 800;
  box-shadow: 0 10px 0 #9a6b14, 0 18px 40px rgba(0,0,0,.35);
}
.act:disabled { opacity: .55; box-shadow: none; }

.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.floater { position: absolute; left: 50%; bottom: 40%; font-weight: 800; color: var(--gold); animation: up 900ms ease forwards; text-shadow: 0 2px 8px #000; }

.dock {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  padding: 8px 10px 14px; background: #070814;
}
.dock button {
  border: 1px solid var(--line); background: #12162a; color: var(--text); border-radius: 14px; padding: 10px 4px;
}
.dock button.on { border-color: var(--neon); color: var(--neon); }

.sheet {
  position: fixed; inset: auto 0 0 0; max-height: 62dvh; overflow: auto; z-index: 7;
  background: #0d1020; border-top: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 14px;
}
.sheet header { display: flex; justify-content: space-between; align-items: center; }
.sheet header button { background: none; border: 0; color: var(--muted); }
.row {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.row button { background: #1b2140; color: white; border: 0; border-radius: 10px; padding: 8px 10px; }

.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 9;
  background: #111827; border: 1px solid var(--line); padding: 10px 14px; border-radius: 12px;
}
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 10; }
.modal-card { width: min(420px, 92vw); background: #12162a; border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.modal-card button { margin: 6px 6px 0 0; background: #2b2148; color: white; border: 0; border-radius: 10px; padding: 10px 12px; }

@keyframes idle { 50% { transform: translateY(-4px); } }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.1); } }
@keyframes swing { 50% { transform: rotate(-55deg); } }
@keyframes cast { 40% { transform: rotate(-70deg); } }
@keyframes bounce { 50% { transform: translateX(-50%) translateY(-8px); } }
@keyframes up { to { transform: translate(-50%, -80px); opacity: 0; } }
@keyframes wave { 50% { transform: translateY(6px); } }

@media (max-width: 720px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .layout { grid-template-columns: 72px 1fr; }
  .job-card { max-width: 70%; }
  .gate h1 { font-size: 40px; }
}