:root {
  --ink: #eae4d8;
  --muted: #9ba1ad;
  --night: #070b14;
  --night-2: #0b1120;
  --panel: rgba(17, 24, 39, 0.78);
  --panel-strong: #111827;
  --line: rgba(227, 235, 251, 0.1);
  --line-gold: rgba(246, 202, 116, 0.3);
  --gold: #f7c879;
  --gold-bright: #ffe7aa;
  --cyan: #7fe1e6;
  --mint: #94dbb1;
  --rose: #fa8691;
  --danger: #ec5268;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Aptos", "Trebuchet MS", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
  --radius: 24px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 72% 0%, #17253f 0, transparent 30rem), linear-gradient(135deg, #070b14, #0b1120 50%, #09111b); font-family: var(--sans); min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
img { display: block; width: 100%; }
.hidden { display: none !important; }
.grain { position: fixed; z-index: 50; inset: 0; pointer-events: none; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

/* Authentication */
.auth-screen { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(390px, 0.75fr); overflow: hidden; }
.auth-visual { position: relative; min-height: 680px; padding: clamp(32px, 6vw, 96px); isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 72% 23%, rgba(214, 113, 102, 0.3), transparent 27%), linear-gradient(135deg, #080d17, #111c33 62%, #1c1229); }
.auth-skyline { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.moon { position: absolute; width: clamp(170px, 21vw, 330px); aspect-ratio: 1; top: 10%; right: 10%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff2bd, #ec9f73 52%, #b85d75); box-shadow: 0 0 90px rgba(247, 157, 102, 0.4); animation: moon-breathe 8s ease-in-out infinite; }
.tower { position: absolute; bottom: 0; width: clamp(70px, 10vw, 210px); background: linear-gradient(180deg, rgba(55, 74, 114, 0.84), #0a101d 90%); border: 1px solid rgba(179, 213, 255, 0.12); box-shadow: inset 14px 0 rgba(255,255,255,0.03); }
.tower::after { content: ""; position: absolute; inset: 12% 15% 0; background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(247, 199, 117, 0.24) 15px 18px, transparent 18px 36px), repeating-linear-gradient(0deg, transparent 0 22px, rgba(127, 225, 230, 0.2) 22px 25px, transparent 25px 46px); }
.tower-a { left: 1%; height: 42%; } .tower-b { left: 18%; height: 66%; } .tower-c { left: 42%; height: 49%; } .tower-d { right: -2%; height: 73%; }
.auth-visual__copy { max-width: 680px; position: relative; padding-top: clamp(100px, 14vh, 170px); animation: rise-in 900ms cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { display: inline-flex; gap: 10px; align-items: center; color: var(--gold); font: 700 10px/1.2 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 23px; height: 1px; background: currentColor; }
.auth-visual h1 { margin: 24px 0; max-width: 8ch; font: clamp(64px, 8vw, 128px)/0.86 var(--serif); letter-spacing: -0.065em; }
.auth-visual h1 em { color: var(--gold-bright); font-weight: normal; }
.auth-visual p { max-width: 540px; color: #c3c8d3; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }
.auth-rule { margin-top: 40px; color: var(--muted); font: 12px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.auth-rule span { color: var(--gold); } .auth-rule i { display: inline-block; width: 4px; height: 4px; margin: 0 12px 2px; background: var(--cyan); border-radius: 50%; }
.auth-facts { position: absolute; left: clamp(32px, 6vw, 96px); right: clamp(32px, 6vw, 96px); bottom: 36px; display: flex; justify-content: space-between; color: rgba(238, 235, 225, 0.52); font: 10px var(--mono); letter-spacing: 0.11em; }
.auth-panel { display: flex; flex-direction: column; padding: clamp(32px, 5vw, 88px) clamp(28px, 5vw, 72px); background: rgba(7, 11, 20, 0.93); border-left: 1px solid var(--line); }
.auth-panel__top { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: 0.1em; } .brand-mini { color: var(--gold); }
.auth-tabs { display: flex; gap: 20px; margin-top: auto; border-bottom: 1px solid var(--line); }
.auth-tab { padding: 15px 0; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 700; }
.auth-tab.is-active { color: var(--ink); border-color: var(--gold); }
.auth-form { display: none; gap: 19px; margin-top: 34px; }.auth-form.is-active { display: grid; animation: soft-in .32s ease both; }
.auth-form h2 { margin: 0; font: 40px/1 var(--serif); letter-spacing: -0.04em; }.auth-form p, .auth-note { color: var(--muted); line-height: 1.55; font-size: 14px; }.auth-note { margin-top: auto; padding-top: 40px; }
label { display: grid; gap: 8px; color: var(--muted); font: 10px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
input, select { min-width: 0; border: 1px solid var(--line); outline: none; border-radius: 12px; padding: 13px 14px; color: var(--ink); background: rgba(255,255,255,0.035); transition: border-color .18s, background .18s, box-shadow .18s; }
input:focus, select:focus { border-color: rgba(247, 200, 121, 0.62); background: rgba(247, 200, 121, 0.05); box-shadow: 0 0 0 3px rgba(247, 200, 121, 0.08); }

/* App shell */
.app { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.side-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 16px 18px; border-right: 1px solid var(--line); background: rgba(8, 12, 22, 0.84); backdrop-filter: blur(22px); z-index: 4; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 36px; }.brand__monogram { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #ee8d8a); color: #11121a; font: 700 23px var(--serif); }.brand small, .profile-trigger small { display: block; color: var(--muted); font: 8px var(--mono); letter-spacing: .14em; }.brand strong { display: block; margin-top: 2px; font: 700 18px var(--serif); letter-spacing: -.04em; }
.main-nav { display: grid; gap: 3px; }.nav-item { position: relative; display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px; border: 0; border-radius: 11px; color: var(--muted); background: none; text-align: left; transition: color .18s, background .18s, transform .18s; }.nav-item:hover { color: var(--ink); background: rgba(255,255,255,.04); }.nav-item.is-active { color: var(--ink); background: linear-gradient(90deg, rgba(247,200,121,.13), transparent); }.nav-item.is-active::after { content: ""; position: absolute; left: -16px; height: 22px; width: 2px; border-radius: 0 2px 2px 0; background: var(--gold); box-shadow: 0 0 14px var(--gold); }.nav-item span { color: var(--gold); font: 9px var(--mono); }.nav-item b { font-size: 14px; }
.side-city { margin-top: auto; min-height: 102px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(36, 62, 86, .42), rgba(113, 48, 88, .25)); border: 1px solid rgba(255,255,255,.06); color: var(--muted); font-size: 12px; line-height: 1.4; }.side-city strong { display: block; margin: 4px 0; color: var(--ink); font: 18px var(--serif); }.side-city span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .08em; }
.profile-trigger { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); color: var(--ink); text-align: left; }.profile-trigger:hover { border-color: var(--line-gold); }.profile-trigger strong { display: block; font-size: 13px; }.profile-trigger i { margin-left: auto; color: var(--gold); font-style: normal; }.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: #233349; color: var(--gold-bright); font: 700 15px var(--serif); }
.stage { min-width: 0; padding: 0 clamp(18px, 3vw, 52px) 48px; }.topbar { height: 86px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }.crumb { color: var(--gold); font: 10px var(--mono); letter-spacing: .12em; }.topbar__stats { display: flex; align-items: stretch; gap: 16px; margin-left: auto; }.header-stat { padding-right: 16px; border-right: 1px solid var(--line); }.header-stat:last-child { border: 0; }.header-stat span { display: block; color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; }.header-stat strong { display: block; margin-top: 3px; font: 600 14px var(--sans); }.sleep-button { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: rgba(255,255,255,.035); color: var(--ink); font-size: 12px; }.sleep-button:hover { border-color: var(--line-gold); }.sleep-button__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }
.view { display: none; gap: 26px; padding-top: 32px; }.view.is-active { display: grid; animation: view-in .32s ease both; }

/* Generic components */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: 12px; padding: 13px 17px; color: var(--ink); font-size: 13px; font-weight: 700; transition: transform .16s, box-shadow .16s, border-color .16s, background .16s; }.button:hover { transform: translateY(-2px); }.button--gold { color: #17131a; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 12px 30px rgba(247,200,121,.15); }.button--gold:hover { box-shadow: 0 16px 38px rgba(247,200,121,.25); }.button--quiet { border-color: var(--line); background: rgba(255,255,255,.025); }.button--quiet:hover { border-color: var(--line-gold); background: rgba(247,200,121,.06); }.button--danger { color: #fff4ee; background: linear-gradient(135deg, #c9364c, #e36869); }.text-button { border: 0; color: var(--gold); background: none; font-size: 12px; }.surface { position: relative; overflow: hidden; padding: clamp(19px, 2vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(23, 32, 50, .76), rgba(10, 15, 26, .78)); box-shadow: var(--shadow); }.surface::before, .table-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.045), transparent 30%, transparent 70%, rgba(127,225,230,.025)); }.surface__head, .catalog-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.surface h2, .section-heading h1, .catalog-section h2 { margin: 8px 0 0; font: clamp(28px, 3vw, 42px)/.96 var(--serif); letter-spacing: -.05em; }.surface h3 { margin: 10px 0; font: 25px/1 var(--serif); letter-spacing: -.04em; }.surface p, .section-heading p { color: var(--muted); line-height: 1.6; font-size: 14px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }.section-heading > div:first-child { max-width: 730px; }.section-heading h1 { font-size: clamp(42px, 5vw, 72px); }.section-heading__badge { min-width: 130px; padding: 10px 14px; border: 1px solid var(--line-gold); border-radius: 999px; color: var(--gold); text-align: center; font: 10px var(--mono); letter-spacing: .11em; }.inline-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 18px; }.inline-controls label { min-width: 118px; flex: 1 1 118px; }.inline-controls .button { flex: 0 0 auto; }.cooldown { align-self: center; color: var(--muted); font-size: 12px; }.positive { color: var(--mint) !important; }.negative { color: var(--rose) !important; }.neutral { color: var(--cyan) !important; }

/* Overview */
.city-hero { position: relative; min-height: 396px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(115deg, #0a1424, #172a48 54%, #251735); box-shadow: var(--shadow); }.city-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,10,19,.3), transparent 65%); pointer-events: none; }.city-hero__sky { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 75% 28%, rgba(255, 173, 113, .36), transparent 7%), radial-gradient(circle at 74% 26%, rgba(255, 196, 116, .2), transparent 20%); }.city-orb { position: absolute; top: 11%; right: 17%; width: 150px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #ffe8b1, #f29875); box-shadow: 0 0 80px rgba(249,153,101,.38); animation: moon-breathe 7s ease-in-out infinite; }.city-stars { position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 42px 38px; mask-image: linear-gradient(to bottom, #000, transparent 76%); }.city-building { position: absolute; bottom: 0; width: 12%; min-width: 92px; background: linear-gradient(90deg, #0c192b, #192d49); border: 1px solid rgba(220,230,255,.08); box-shadow: inset 12px 0 rgba(255,255,255,.02); }.city-building::after { content: ""; position: absolute; inset: 15px; background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(244,203,125,.34) 17px 19px, transparent 19px 40px), repeating-linear-gradient(90deg, transparent 0 15px, rgba(126,226,230,.12) 15px 18px, transparent 18px 37px); }.c1 { left: 38%; height: 45%; }.c2 { left: 52%; height: 73%; }.c3 { left: 68%; height: 54%; }.c4 { left: 81%; height: 67%; }.c5 { left: 93%; height: 83%; }.city-hero__content { position: relative; z-index: 1; max-width: 650px; padding: clamp(30px, 5vw, 66px); }.city-hero h1 { margin: 18px 0; font: clamp(42px, 5.3vw, 78px)/.91 var(--serif); letter-spacing: -.065em; }.city-hero p { max-width: 520px; color: #c3c9d4; line-height: 1.6; }.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }.city-hero__ticker { position: absolute; z-index: 2; right: 28px; bottom: 22px; display: grid; gap: 4px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(7, 11, 20, .48); backdrop-filter: blur(10px); }.city-hero__ticker span { color: var(--muted); font: 8px var(--mono); letter-spacing: .12em; }.city-hero__ticker strong { font: 22px var(--serif); }.city-hero__ticker b { color: var(--mint); font: 10px var(--mono); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.metric-card { padding: 18px; border-radius: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: transform .18s, border-color .18s; }.metric-card:hover { transform: translateY(-3px); border-color: var(--line-gold); }.metric-card span { display: block; color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }.metric-card strong { display: block; margin: 8px 0 5px; font: 29px var(--serif); letter-spacing: -.04em; }.metric-card small { color: var(--cyan); font-size: 11px; }.dashboard-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 18px; }.event-feed { display: grid; gap: 10px; margin-top: 20px; }.event-line { position: relative; padding: 13px 14px 13px 28px; border-radius: 11px; background: rgba(255,255,255,.027); color: #cfd3dc; font-size: 13px; line-height: 1.45; }.event-line::before { content: ""; position: absolute; left: 13px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.event-line.positive::before { background: var(--mint); box-shadow: 0 0 8px var(--mint); }.event-line.negative::before { background: var(--rose); box-shadow: 0 0 8px var(--rose); }.event-line time { display: block; margin-bottom: 4px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }.profile-insight { text-align: center; }.condition-ring { display: grid; place-content: center; width: 130px; aspect-ratio: 1; margin: 20px auto 15px; border: 1px solid var(--line-gold); border-radius: 50%; background: conic-gradient(var(--gold) var(--ring, 55%), rgba(255,255,255,.06) 0); box-shadow: inset 0 0 0 12px #141d2d, 0 0 30px rgba(247,200,121,.1); }.condition-ring strong { display: block; font: 42px var(--serif); }.condition-ring small { color: var(--muted); font: 9px var(--mono); }.condition-bars { display: grid; gap: 8px; margin-top: 22px; text-align: left; }.condition-bar { display: grid; grid-template-columns: 60px 1fr 28px; gap: 8px; align-items: center; color: var(--muted); font: 10px var(--mono); }.condition-bar i { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }.condition-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--gold)); }.horizon-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.horizon-card { position: relative; min-height: 132px; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(33, 49, 73,.72), rgba(20, 18, 36,.66)); }.horizon-card::after { content: attr(data-icon); position: absolute; right: 13px; bottom: -18px; color: rgba(255,255,255,.09); font: 100px var(--serif); }.horizon-card span { color: var(--gold); font: 9px var(--mono); letter-spacing: .1em; }.horizon-card strong { display: block; max-width: 11ch; margin-top: 10px; font: 24px/1 var(--serif); }

/* Casino */
.casino-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.025); }.game-tab { flex: 1 0 max-content; border: 1px solid transparent; border-radius: 10px; padding: 11px 15px; color: var(--muted); background: transparent; font-weight: 700; font-size: 12px; }.game-tab.is-active { border-color: rgba(247,200,121,.22); background: rgba(247,200,121,.09); color: var(--gold-bright); }.game-stage { display: none; }.game-stage.is-active { display: block; animation: soft-in .3s ease both; }.table-shell { position: relative; overflow: hidden; padding: clamp(20px, 3vw, 42px); border: 1px solid rgba(222,234,252,.11); border-radius: 28px; background: linear-gradient(135deg, rgba(27,45,66,.75), rgba(16,26,42,.92)); box-shadow: var(--shadow); }.table-shell__top { display: flex; justify-content: space-between; gap: 20px; }.table-shell h2 { margin: 9px 0; font: clamp(32px, 4vw, 57px)/.92 var(--serif); letter-spacing: -.055em; }.table-shell p { color: var(--muted); line-height: 1.55; font-size: 13px; }.roulette-table { background: radial-gradient(circle at 15% 68%, rgba(224,70,77,.22), transparent 25%), radial-gradient(circle at 86% 22%, rgba(247,200,121,.13), transparent 21%), linear-gradient(135deg, #183443, #111e32); }.blackjack-table { background: radial-gradient(circle at 75% 45%, rgba(26,176,137,.18), transparent 29%), linear-gradient(135deg, #092a29, #101b2b); }.poker-table { background: radial-gradient(circle at 78% 25%, rgba(133,95,231,.23), transparent 30%), linear-gradient(135deg, #171536, #121827); }.mines-table { background: radial-gradient(circle at 14% 70%, rgba(70,193,183,.15), transparent 30%), linear-gradient(135deg, #0d2830, #101b2b); }.cases-table { background: radial-gradient(circle at 85% 22%, rgba(247,136,100,.19), transparent 25%), linear-gradient(135deg, #251735, #101827); }.slots-table { background: radial-gradient(circle at 50% 22%, rgba(255,191,88,.22), transparent 33%), linear-gradient(135deg, #251525, #16112b); }.score-box { align-self: start; min-width: 100px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(4,9,16,.22); text-align: right; }.score-box span { display: block; color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; }.score-box strong { display: block; margin-top: 4px; color: var(--gold-bright); font: 25px var(--serif); }.roulette-layout { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(300px, .9fr); gap: 40px; align-items: center; margin-top: 25px; }.roulette-wheel { position: relative; width: min(100%, 320px); aspect-ratio: 1; justify-self: center; border: 15px solid #d3ac66; border-radius: 50%; background: repeating-conic-gradient(#a63240 0 9.73deg, #101520 9.73deg 19.46deg, #2b8d73 19.46deg 29.19deg); box-shadow: 0 0 0 8px #39291e, 0 25px 50px rgba(0,0,0,.36), inset 0 0 42px rgba(0,0,0,.6); transition: transform 1.5s cubic-bezier(.15,.7,.1,1); }.roulette-wheel.is-spinning { transform: rotate(1110deg); }.roulette-wheel::after { content: ""; position: absolute; inset: 18%; border: 7px solid #d3ac66; border-radius: 50%; background: repeating-conic-gradient(#a63240 0 22.5deg, #11151f 22.5deg 45deg); }.roulette-wheel__core { position: absolute; z-index: 1; inset: 37%; display: grid; place-items: center; border: 6px solid #c49a58; border-radius: 50%; background: #0c1720; color: var(--gold-bright); font: 26px var(--serif); }.roulette-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }.roulette-controls .button { grid-column: span 2; }.wheel-result { display: grid; place-items: center; flex: 0 0 auto; width: 70px; height: 70px; border: 1px solid var(--line-gold); border-radius: 50%; color: var(--gold-bright); font: 38px var(--serif); }.result-trail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }.history-ball { display: grid; place-items: center; width: 28px; aspect-ratio: 1; border-radius: 50%; background: #171d2a; font: 10px var(--mono); }.history-ball.red { background: #a53849; }.history-ball.black { background: #12161f; }.history-ball.zero { background: #298d76; }.game-status { margin: 20px 0 0 !important; padding: 13px 15px; border-left: 2px solid var(--cyan); background: rgba(0,0,0,.15); }.hands-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 5px; }.hand-label { display: block; margin-bottom: 10px; color: var(--gold); font: 9px var(--mono); letter-spacing: .1em; }.card-row { display: flex; flex-wrap: wrap; gap: 10px; min-height: 110px; }.play-card { position: relative; width: 76px; height: 106px; overflow: hidden; padding: 8px; border: 0; border-radius: 11px; background: #f0e7da; color: #1a1820; text-align: left; box-shadow: 0 9px 16px rgba(0,0,0,.22); }.play-card.is-held { transform: translateY(-8px); box-shadow: 0 15px 22px rgba(127,225,230,.24); outline: 2px solid var(--cyan); }.play-card.is-back { background: repeating-linear-gradient(45deg,#152a45 0 5px,#1b4062 5px 10px); }.play-card .rank { display: block; font: bold 18px var(--serif); }.play-card .suit { display: block; margin-top: 8px; font: 36px var(--serif); text-align: center; }.play-card .bottom { position: absolute; right: 8px; bottom: 7px; transform: rotate(180deg); font: bold 16px var(--serif); }.play-card.red { color: #bd2444; }.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 580px; margin: 28px auto; }.mine-cell { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: var(--ink); background: linear-gradient(145deg, #183547, #122332); font: 22px var(--serif); transition: transform .14s, border-color .14s, background .14s; }.mine-cell:not(:disabled):hover { transform: translateY(-3px); border-color: var(--cyan); }.mine-cell.safe { background: linear-gradient(145deg, #226d62, #173e43); color: #cefff2; }.mine-cell.bomb { background: linear-gradient(145deg, #8d2e45, #4d182b); color: #ffb9ba; }.case-console { display: grid; grid-template-columns: 1fr .5fr auto; gap: 12px; align-items: end; margin: 26px 0 16px; }.case-odds { display: flex; flex-wrap: wrap; gap: 7px; }.case-odds span, .tag { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 9px var(--mono); letter-spacing: .02em; }.battle-board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 27px; }.drop-list { display: grid; gap: 8px; margin-top: 10px; }.drop-item { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); font-size: 12px; }.drop-item b { color: var(--gold-bright); }.drop-item small { color: var(--muted); }.slot-machine { position: relative; max-width: 780px; margin: 30px auto 20px; padding: 22px; border: 10px solid #6d324c; border-radius: 28px; background: linear-gradient(#250e2a, #130f27); box-shadow: inset 0 0 50px #070710, 0 20px 50px rgba(0,0,0,.36); }.slot-lights { position: absolute; inset: -14px; border: 2px solid var(--gold); border-radius: 32px; filter: drop-shadow(0 0 9px var(--gold)); }.slot-reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }.slot-reel { display: grid; place-items: center; height: 112px; border-radius: 9px; background: linear-gradient(#f9eadd,#cfc2ba); color: #2a172b; font: 60px var(--serif); text-shadow: 0 2px #fff; }.slot-reels.is-spinning .slot-reel { animation: reel .78s cubic-bezier(.2,.8,.3,1) both; }.slot-reels.is-spinning .slot-reel:nth-child(2) { animation-delay: .08s; }.slot-reels.is-spinning .slot-reel:nth-child(3) { animation-delay: .16s; }.slot-reels.is-spinning .slot-reel:nth-child(4) { animation-delay: .24s; }.slot-reels.is-spinning .slot-reel:nth-child(5) { animation-delay: .32s; }.slot-paytable { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }.slot-paytable span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--gold); font: 9px var(--mono); }

/* Life, markets and catalogs */
.life-layout, .finance-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }.finance-grid { grid-template-columns: repeat(3, 1fr); }.career-card { background: linear-gradient(135deg, rgba(33,62,82,.75), rgba(18,24,40,.85)); }.salary-chip { padding: 9px 12px; border-radius: 999px; background: rgba(148,219,177,.12); color: var(--mint); font: 10px var(--mono); }.work-meter { margin-top: 28px; }.work-meter > div { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }.work-meter i { display: block; height: 8px; overflow: hidden; margin-top: 9px; border-radius: 999px; background: rgba(255,255,255,.07); }.work-meter b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width .5s ease; }.credential-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }.credential { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }.credential span { display: block; color: var(--muted); font: 8px var(--mono); }.credential strong { display: block; margin-top: 5px; font: 20px var(--serif); }.catalog-section { min-width: 0; }.catalog-section__head { margin-bottom: 16px; }.catalog-section__head p { max-width: 360px; color: var(--muted); font-size: 12px; line-height: 1.5; }.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 14px; }.split-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.catalog-card { position: relative; overflow: hidden; min-height: 330px; border: 1px solid var(--line); border-radius: 17px; background: #101827; box-shadow: 0 18px 35px rgba(0,0,0,.16); transition: transform .2s, border-color .2s; }.catalog-card:hover { transform: translateY(-5px); border-color: var(--line-gold); }.catalog-card__art { height: 143px; overflow: hidden; }.catalog-card__art img { height: 100%; object-fit: cover; transition: transform .4s ease; }.catalog-card:hover .catalog-card__art img { transform: scale(1.06); }.catalog-card__body { display: flex; flex-direction: column; min-height: 187px; padding: 15px; }.catalog-card h3 { margin: 0; font: 23px/1 var(--serif); letter-spacing: -.04em; }.catalog-card p { margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.catalog-card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }.catalog-card .button { width: 100%; margin-top: 12px; padding: 10px; font-size: 11px; }.owned-ribbon { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 8px; border-radius: 6px; background: var(--mint); color: #0b1a16; font: 8px var(--mono); letter-spacing: .08em; }.finance-card { min-height: 330px; }.finance-number { margin: 16px 0 7px; color: var(--gold-bright); font: clamp(36px, 4vw, 54px)/1 var(--serif); letter-spacing: -.06em; }.finance-card small { display: block; margin-top: 18px; color: var(--cyan); font-size: 11px; }.loan-list { display: grid; gap: 8px; margin-top: 17px; }.loan-row { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 11px; }.loan-row strong { color: var(--ink); }.loan-row button { float: right; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--gold); font-size: 10px; }.portfolio-spark { height: 72px; margin: 22px 0 12px; border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(165deg, transparent 0 40%, rgba(127,225,230,.12) 41% 42%, transparent 43% 100%), repeating-linear-gradient(90deg, transparent 0 35px, rgba(255,255,255,.04) 35px 36px); clip-path: polygon(0 74%,10% 61%,20% 72%,30% 43%,40% 54%,52% 20%,61% 43%,74% 33%,84% 13%,100% 26%,100% 100%,0 100%); background-color: rgba(127,225,230,.08); }.portfolio-stats { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }.stock-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.stock-card { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }.stock-card__mark { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, rgba(247,200,121,.23), rgba(127,225,230,.19)); color: var(--gold-bright); font: 700 14px var(--mono); }.stock-card h3 { margin: 0; font: 22px var(--serif); }.stock-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.stock-card__price { text-align: right; }.stock-card__price strong { display: block; font: 21px var(--serif); }.stock-card__price small { color: var(--mint); font: 10px var(--mono); }.stock-card__actions { grid-column: 2 / 4; display: flex; gap: 8px; }.stock-card__actions button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--gold); font-size: 10px; }

/* Empire & world */
.founder-console { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: center; background: radial-gradient(circle at 92% 9%, rgba(247,200,121,.16), transparent 24%), linear-gradient(135deg, #1a263a, #121729); }.founder-console h2 { margin: 10px 0; font: 34px var(--serif); }.founder-console p { margin: 0; }.founder-console__controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }.company-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(27,42,61,.86), rgba(15,22,36,.88)); }.company-card__banner { min-height: 100px; padding: 17px; background: linear-gradient(135deg, var(--company-a), var(--company-b)); }.company-card__banner span { color: rgba(255,255,255,.75); font: 9px var(--mono); }.company-card__banner h2 { margin: 9px 0 0; font: 30px var(--serif); }.company-card__body { padding: 17px; }.company-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }.company-metric { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); }.company-metric span { display: block; color: var(--muted); font: 8px var(--mono); }.company-metric strong { display: block; margin-top: 4px; font: 17px var(--serif); }.company-actions { display: flex; flex-wrap: wrap; gap: 6px; }.company-actions button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.03); color: var(--ink); font-size: 10px; }.world-map { position: relative; min-height: 345px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: radial-gradient(ellipse at 68% 50%, rgba(76,143,179,.29), transparent 14%), radial-gradient(circle at 10% 20%, rgba(247,200,121,.12), transparent 20%), #0d1828; }.world-map::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(169,218,230,.3) 1px, transparent 1px),linear-gradient(90deg,rgba(169,218,230,.3) 1px, transparent 1px); background-size: 36px 36px; transform: perspective(300px) rotateX(58deg) translateY(-68px) scale(1.4); transform-origin: center top; }.world-map__copy { position: relative; z-index: 2; max-width: 460px; padding: clamp(27px, 5vw, 58px); }.world-map__copy h2 { margin: 14px 0; font: clamp(33px,4vw,55px)/.92 var(--serif); letter-spacing: -.055em; }.world-map__copy p { color: var(--muted); line-height: 1.55; }.map-route { position: absolute; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); transform-origin: left; opacity: .65; }.r1 { left: 50%; top: 45%; width: 32%; transform: rotate(-23deg); }.r2 { left: 51%; top: 48%; width: 27%; transform: rotate(30deg); }.r3 { left: 51%; top: 48%; width: 37%; transform: rotate(11deg); }.r4 { left: 48%; top: 46%; width: 35%; transform: rotate(-53deg); }.r5 { left: 48%; top: 50%; width: 42%; transform: rotate(63deg); }.map-orbit { position: absolute; right: 11%; top: 21%; width: 210px; aspect-ratio: 1; border: 1px dashed rgba(127,225,230,.4); border-radius: 50%; animation: spin 24s linear infinite; }.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.city-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); transition: transform .2s, border-color .2s; }.city-card:hover { transform: translateY(-4px); border-color: var(--line-gold); }.city-card.is-current { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(247,200,121,.15); }.city-card__art { height: 130px; }.city-card__art img { height: 100%; object-fit: cover; }.city-card__body { padding: 15px; }.city-card h3 { margin: 0; font: 26px var(--serif); }.city-card p { color: var(--muted); font-size: 12px; line-height: 1.45; }.city-card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }.city-card button { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); color: var(--gold); font-size: 11px; }

/* Night, journal, overlays */
.night-hero { display: grid; grid-template-columns: 1fr .45fr; min-height: 280px; overflow: hidden; border: 1px solid rgba(235,137,156,.22); border-radius: 26px; background: radial-gradient(circle at 75% 50%, rgba(238,77,128,.25), transparent 24%), linear-gradient(135deg, #161126, #291124 60%, #130e1c); }.night-hero__copy { padding: clamp(27px,4vw,50px); }.night-hero h2 { max-width: 650px; margin: 13px 0; font: clamp(35px,4.5vw,63px)/.9 var(--serif); letter-spacing: -.06em; }.night-hero p { max-width: 600px; color: #c7bdc9; line-height: 1.55; font-size: 13px; }.night-hero__sign { display: grid; place-content: center; color: rgba(255, 191, 204,.85); text-align: center; font: 148px/.65 var(--serif); text-shadow: 0 0 35px #e73572; }.night-hero__sign i { color: var(--gold-bright); font-size: 24px; }.marvila-card { display: grid; grid-template-columns: 1.2fr .7fr auto; gap: 22px; align-items: center; overflow: hidden; background: radial-gradient(circle at 5% 10%, rgba(255,255,255,.16), transparent 18%), linear-gradient(135deg, #251b21, #18161e); }.marvila-card h2 { margin: 10px 0; font: 44px var(--serif); }.marvila-card p { max-width: 670px; margin: 0; }.marvila-card__glow { position: absolute; top: -90px; right: 24%; width: 250px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.13), transparent 65%); }.marvila-card__stats { position: relative; display: grid; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 12px; }.marvila-card__stats strong { color: var(--rose); font: 24px var(--serif); }.journal-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }.event-feed--full { max-height: 690px; overflow: auto; padding-right: 5px; }.rules-card h2 { font-size: 34px; }.rules-list { margin-top: 21px; }.rules-list p { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }.rules-list b { color: var(--gold-bright); }.night-overlay, .run-end { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: #000; }.night-overlay__noise { position: absolute; inset: 0; opacity: .13; background: radial-gradient(circle at 50% 30%, #112239, transparent 30%), repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px); animation: flicker .28s steps(2) infinite; }.night-overlay__content { position: relative; text-align: center; animation: slow-fade 2.8s ease both; }.night-overlay h2 { margin: 18px 0 5px; font: clamp(42px,6vw,90px)/.9 var(--serif); letter-spacing: -.06em; }.night-overlay p { color: var(--muted); }.night-count { margin-top: 26px; color: var(--gold-bright); font: 100px/.8 var(--serif); }.run-end { background: radial-gradient(circle at 50%, rgba(183,45,67,.24), transparent 37%), #07090f; }.run-end__card { width: min(90vw, 540px); padding: 44px; border: 1px solid rgba(250,134,145,.3); border-radius: 24px; background: rgba(19,15,24,.92); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.55); }.run-end h2 { margin: 17px 0; font: 47px/.9 var(--serif); letter-spacing: -.05em; }.run-end p { color: var(--muted); line-height: 1.55; }.toast-stack { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: grid; gap: 9px; width: min(360px, calc(100vw - 48px)); pointer-events: none; }.toast { padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 11px; background: rgba(15,23,37,.95); box-shadow: 0 14px 30px rgba(0,0,0,.28); color: var(--ink); font-size: 12px; line-height: 1.4; animation: toast-in .28s ease both; }.toast.positive { border-left-color: var(--mint); }.toast.negative { border-left-color: var(--rose); }

@keyframes moon-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 120px rgba(247,157,102,.55); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } }
@keyframes soft-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes reel { 0% { transform: translateY(0); filter: blur(0); } 40% { transform: translateY(-45px); filter: blur(3px); } 100% { transform: translateY(0); filter: blur(0); } }
@keyframes flicker { 50% { opacity: .07; } }
@keyframes slow-fade { 0% { opacity: 0; transform: scale(1.05); } 28%,72% { opacity: 1; transform: none; } 100% { opacity: .03; transform: scale(.96); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) { .app { grid-template-columns: 205px 1fr; }.finance-grid { grid-template-columns: 1fr 1fr; }.finance-grid .portfolio-card { grid-column: span 2; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.city-grid { grid-template-columns: repeat(2, 1fr); }.marvila-card { grid-template-columns: 1fr auto; }.marvila-card__stats { grid-column: 1; }.marvila-card .button { grid-column: 2; grid-row: 1 / 3; }.stock-list { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .auth-screen { grid-template-columns: 1fr; }.auth-visual { min-height: 520px; }.auth-panel { min-height: 520px; }.app { grid-template-columns: 1fr; }.side-rail { position: static; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }.brand { padding: 0 7px 13px; }.main-nav { display: flex; overflow-x: auto; }.nav-item { width: auto; flex: 0 0 auto; }.nav-item.is-active::after { display: none; }.side-city, .profile-trigger { display: none; }.stage { padding: 0 18px 35px; }.dashboard-grid, .life-layout, .journal-layout, .split-catalog, .founder-console { grid-template-columns: 1fr; }.hands-layout, .battle-board { grid-template-columns: 1fr; }.roulette-layout { grid-template-columns: 1fr; gap: 20px; }.world-map { min-height: 310px; }.founder-console__controls { grid-template-columns: 1fr 1fr; }.founder-console__controls .button { grid-column: span 2; }.night-hero { grid-template-columns: 1fr; }.night-hero__sign { display: none; } }
@media (max-width: 620px) { .topbar { height: auto; min-height: 70px; flex-wrap: wrap; padding: 13px 0; }.topbar__stats { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }.header-stat { flex: 0 0 auto; }.section-heading { align-items: flex-start; flex-direction: column; }.section-heading__badge { min-width: 0; }.metric-grid, .finance-grid, .city-grid { grid-template-columns: 1fr; }.finance-grid .portfolio-card { grid-column: auto; }.horizon-strip { grid-template-columns: 1fr; }.city-hero { min-height: 430px; }.city-hero__ticker { right: 15px; bottom: 15px; }.roulette-controls, .case-console { grid-template-columns: 1fr; }.roulette-controls .button { grid-column: auto; }.case-console .button { width: 100%; }.slot-reel { height: 72px; font-size: 37px; }.slot-machine { padding: 13px; border-width: 6px; }.card-row { min-height: 0; }.play-card { width: 58px; height: 84px; }.play-card .suit { font-size: 27px; }.catalog-grid { grid-template-columns: 1fr; }.marvila-card { grid-template-columns: 1fr; }.marvila-card .button { grid-column: auto; grid-row: auto; }.auth-facts { font-size: 8px; }.auth-visual h1 { font-size: 65px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }