:root {
  --ink: #08211d;
  --ink-2: #173b34;
  --paper: #f5f2e8;
  --cream: #ebe7dc;
  --white: #fffefa;
  --green: #00c98b;
  --green-bright: #62f3b7;
  --green-dark: #0d5b49;
  --gold: #ffbf2f;
  --coral: #ff5d5d;
  --purple: #946cff;
  --blue: #3d9cff;
  --pink: #ff67b3;
  --muted: #73827c;
  --line: rgba(9, 39, 33, .11);
  --shadow: 0 20px 60px rgba(15, 45, 39, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; min-height: 100vh; }
button, input, select { font: inherit; }
button { color: inherit; }
button, .choice, label.upload-box { cursor: pointer; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: 10; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.topbar { height: 78px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(244, 241, 233, .88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.brand { border: 0; background: none; display: flex; gap: 12px; align-items: center; padding: 0; text-align: left; }
.brand-mark { width: 43px; height: 43px; border-radius: 14px; background: var(--ink); color: white; display: grid; place-items: center; font: 800 15px "Manrope"; letter-spacing: -1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.brand-mark span { color: var(--green-bright); }
.brand b, .brand small, .user-chip b, .user-chip small { display: block; }
.brand b { font: 800 15px "Manrope"; }
.brand small, .user-chip small { font-size: 10px; color: var(--muted); letter-spacing: .4px; }
.main-nav { display: flex; gap: 5px; padding: 5px; border-radius: 14px; background: rgba(8,33,29,.05); }
.nav-item { border: 0; background: transparent; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #6c7c76; transition: .25s ease; }
.nav-item span { margin-right: 6px; }
.nav-item i { font-size: 8px; background: var(--gold); color: #4a3404; border-radius: 5px; padding: 2px 4px; margin-left: 4px; font-style: normal; }
.nav-item:hover, .nav-item.active { color: var(--ink); background: var(--white); box-shadow: 0 3px 12px rgba(8,33,29,.07); }
.user-chip { justify-self: end; display: flex; align-items: center; gap: 9px; }
.avatar { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #f0c872, #c9863c); color: #fff; border: 2px solid white; box-shadow: 0 4px 12px rgba(82,51,12,.18); font-weight: 800; }
.user-chip b { font-size: 12px; }
.user-chip button { background: none; border: 0; }
.user-chip .logout-button{width:30px;height:30px;border-radius:9px;background:#ebe9e1;color:#7b8984;font-size:14px}.user-chip .logout-button:hover{background:#ffe2de;color:#a43b30}
main { min-height: calc(100vh - 78px); }
.view { display: none; padding: 38px 4vw 55px; animation: viewIn .45s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }
.game-heading, .section-heading { display: flex; justify-content: space-between; align-items: end; margin: 0 auto 26px; max-width: 1460px; }
.eyebrow { font-size: 10px !important; letter-spacing: 1.8px; font-weight: 800; color: var(--green-dark) !important; margin: 0 0 10px !important; }
.live-dot { display: inline-block; width: 7px; height: 7px; background: var(--green); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 4px rgba(43,191,132,.12); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(43,191,132,0); } }
h1, h2, h3 { font-family: "Manrope"; letter-spacing: -.04em; }
h1 { font-size: clamp(36px, 4vw, 59px); line-height: 1.04; margin: 0 0 9px; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--green-dark); }
.game-heading p, .section-heading p, .planner-title p { margin: 0; color: var(--muted); font-size: 14px; }
.phase-card { width: 275px; display: grid; grid-template-columns: 42px 1fr; column-gap: 10px; align-items: center; }
.phase-card > span { grid-row: span 2; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; border-radius: 50%; font-size: 20px; }
.phase-card small, .phase-card b { display: block; }
.phase-card small { color: var(--muted); font-size: 10px; }
.phase-card b { font-size: 13px; }
.phase-progress { grid-column: 2; height: 4px; border-radius: 4px; background: #dcd9d0; overflow: hidden; }
.phase-progress i { display: block; height: 100%; width: 3%; background: var(--green); transition: width .5s; }
.game-layout { max-width: 1460px; margin: auto; display: grid; grid-template-columns: minmax(235px, 270px) minmax(550px, 1fr) minmax(230px, 260px); gap: 28px; align-items: center; }
.glass-card, .feature-card { background: rgba(255, 254, 250, .72); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow); border-radius: 22px; }
.metrics-panel { padding: 22px; }
.panel-label { text-transform: uppercase; font-size: 9px; letter-spacing: 1.4px; font-weight: 800; color: #81908b; margin-bottom: 17px; }
.money-block { padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.money-block small, .money-block strong, .money-block span { display: block; }
.money-block small { color: var(--muted); font-size: 11px; }
.money-block strong { font: 800 29px "Manrope"; letter-spacing: -.05em; margin: 2px 0; color: var(--green-dark); }
.money-block span { color: var(--green-dark); font-size: 10px; }
.metric-list { padding: 15px 0; border-bottom: 1px solid var(--line); display: grid; gap: 13px; }
.metric > div:first-child { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; margin-bottom: 7px; }
.metric b { font-size: 11px; }
.metric strong { font: 700 11px "Manrope"; }
.metric-icon { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; font-size: 10px; font-weight: bold; }
.metric-icon.wealth { color: #157551; background: #d9f4e7; }
.metric-icon.stress { color: #a74035; background: #fbe0db; }
.metric-icon.family { color: #795612; background: #f9e9c6; }
.bar { height: 5px; background: #e6e3dc; border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; transition: width .65s cubic-bezier(.2,.8,.2,1); }
.green { background: var(--green); }.coral { background: var(--coral); }.gold { background: var(--gold); }.purple { background: var(--purple); }
.balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 7px; padding: 17px 0; }
.balance-grid small, .balance-grid b { display: block; }
.balance-grid small { font-size: 9px; color: var(--muted); }
.balance-grid b { font: 700 12px "Manrope"; margin-top: 2px; }
.soft-button { width: 100%; border: 0; border-radius: 10px; background: #e8eee9; padding: 11px 12px; font-size: 10px; font-weight: 800; text-align: left; }
.soft-button span { float: right; }
.board-wrap { min-width: 0; }
.board { position: relative; width: min(37vw, 525px); aspect-ratio: 1; margin: auto; filter: drop-shadow(0 24px 30px rgba(26,47,40,.18)); }
.board::after { content:""; position:absolute; inset:4%; border-radius:50%; background:radial-gradient(circle,transparent 52%,rgba(255,255,255,.32) 53% 54%,transparent 55%); pointer-events:none; animation:boardGlow 4s ease-in-out infinite; }
.track { position: absolute; border-radius: 50%; inset: 0; background: conic-gradient(from -10deg, #ff5d5d 0 22.5deg, #ffbf2f 22.5deg 45deg, #00d49a 45deg 67.5deg, #26b8ff 67.5deg 90deg, #946cff 90deg 112.5deg, #ff67b3 112.5deg 135deg, #ff7955 135deg 157.5deg, #25d4a1 157.5deg 180deg, #3d9cff 180deg 202.5deg, #a86fff 202.5deg 225deg, #ff596f 225deg 247.5deg, #00c98b 247.5deg 270deg, #ffd04d 270deg 292.5deg, #3d9cff 292.5deg 315deg, #35db92 315deg 337.5deg, #ff8f3d 337.5deg 360deg); -webkit-mask: radial-gradient(transparent 53%, #000 54% 78%, transparent 79%); mask: radial-gradient(transparent 53%, #000 54% 78%, transparent 79%); box-shadow:inset 0 0 35px rgba(255,255,255,.35); animation:trackBreathe 5s ease-in-out infinite; }
.track::after { content:""; position:absolute; inset: 7%; border-radius:50%; background: repeating-conic-gradient(rgba(255,255,255,.7) 0 1deg, transparent 1deg 22.5deg); -webkit-mask: radial-gradient(transparent 53%,#000 54% 76%,transparent 77%); }
.inner-track { inset: 8%; opacity: .23; transform: rotate(10deg); filter:saturate(1.25); animation:trackRotate 45s linear infinite; }
.board::before { content:""; position:absolute; inset:20%; border:1px dashed rgba(13,91,73,.17); border-radius:50%; }
.board-center { position: absolute; inset: 29%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #163d35, #071c19); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 0 45px rgba(100,225,173,.06), 0 10px 30px rgba(4,24,20,.18); }
.center-kicker { font-size: 8px; letter-spacing: 1.5px; color: #8faaa3; margin-bottom: 6px; text-transform: uppercase; }
.fiq-ring, .score-ring { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green-bright) 56%, rgba(255,255,255,.11) 0); position: relative; }
.fiq-ring::before, .score-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--ink); }
.fiq-ring div, .score-ring div { position:relative; z-index:1; }
.fiq-ring strong, .fiq-ring small { display:block; }
.fiq-ring strong { font: 800 28px "Manrope"; line-height:1; }
.fiq-ring small { font-size:7px; letter-spacing:1.5px; color:#91aaa4; }
.board-center p { font-size: 8px; color: #94aaa5; line-height: 1.5; margin: 7px 0 0; }
.board-center p b { color: var(--green-bright); font-size: 9px; }
.player-token { --angle: 0deg; --radius: -200px; position: absolute; left: 50%; top: 50%; width: 42px; height: 48px; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(var(--radius)) rotate(calc(-1 * var(--angle))); transform-origin: center; z-index: 5; transition: transform 1.1s cubic-bezier(.2,.85,.24,1.15); }
.player-token::after { content:""; position:absolute; width:16px; height:9px; background:rgba(0,0,0,.2); filter:blur(4px); border-radius:50%; bottom:0; left:13px; }
.player-token span { width:33px; height:33px; display:grid; place-items:center; border-radius:50% 50% 50% 8px; transform:rotate(-45deg); background:linear-gradient(145deg,#ffe0a3,#d09038); color:white; border:3px solid white; font-weight:800; box-shadow:0 4px 10px rgba(74,44,5,.25); }
.player-token span::first-letter { transform:rotate(45deg); }
.turn-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: -8px; }
.turn-copy { text-align: right; max-width: 165px; }
.turn-copy span { color: var(--green-dark); font-size: 8px; letter-spacing: 1.6px; font-weight: 800; }
.turn-copy p { font-size: 10px; color: var(--muted); margin: 3px 0; }
.roll-button { min-width: 190px; border: 0; background: var(--ink); color: white; border-radius: 16px; padding: 10px 18px 10px 11px; display: flex; align-items: center; gap: 11px; text-align: left; box-shadow: 0 11px 26px rgba(8,33,29,.22); transition: transform .2s; }
.roll-button:hover { transform: translateY(-2px); }
.roll-button:disabled { opacity: .55; transform:none; }
.dice { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--green); font-size: 25px; }
.dice.rolling { animation: diceRoll .55s ease infinite; }
@keyframes diceRoll { 50% { transform: rotate(25deg) scale(.8); } }
.roll-button b, .roll-button small { display:block; }
.roll-button b { font-size: 11px; }
.roll-button small { font-size: 8px; color: #9db0ab; margin-top:2px; }
.activity-panel { display: grid; gap: 15px; }
.family-mini, .next-card, .streak-card { padding: 18px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; }
.panel-heading small, .panel-heading b { display:block; }
.panel-heading small { color:var(--muted); font-size:9px; }
.panel-heading b { font:700 12px "Manrope"; margin-top:2px; }
.panel-heading button { border:0; background:none; color:var(--green-dark); font-size:9px; font-weight:800; }
.family-faces { display:flex; margin:14px 0 9px; }
.family-faces span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; margin-right:-6px; border:2px solid var(--white); background:#d8b173; color:white; font-size:10px; font-weight:800; }
.family-faces span:nth-child(2n) { background:#598c7e; }.family-faces span:nth-child(3n) { background:#c96d64; }
.family-mini p, .next-card p { margin:0; font-size:9px; color:var(--muted); }
.event-peek { display:flex; align-items:center; gap:10px; padding:4px 0 13px; }
.peek-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,#d5d1c6,#f2efe7); color:#a19d93; font:700 18px "Manrope"; }
.event-peek small, .event-peek b { display:block; }
.event-peek small { font-size:8px; color:var(--muted); }
.event-peek b { font-size:10px; }
.streak-card { display:grid; grid-template-columns:35px 1fr; align-items:center; column-gap:9px; }
.streak-icon { grid-row:span 2; width:33px; height:33px; border-radius:10px; display:grid; place-items:center; background:#f8e7b9; color:#976b10; }
.streak-card small,.streak-card b { display:block; }.streak-card small{font-size:8px;color:var(--muted)}.streak-card b{font-size:11px}
.streak-dots { grid-column:2; display:flex; gap:3px; margin-top:6px; }.streak-dots i{width:18%;height:3px;background:var(--gold);border-radius:3px}.streak-dots i:nth-child(n+4){background:#ddd9cf}
.section-heading { align-items:center; margin-top:12px; }
.primary-button,.outline-button { border-radius:12px; padding:13px 18px; font-size:11px; font-weight:800; }
.primary-button { border:0; background:var(--ink); color:white; box-shadow:0 10px 22px rgba(8,33,29,.15); }
.primary-button span{margin-left:10px}.primary-button.wide{width:100%;margin-top:18px}
.outline-button{border:1px solid var(--line);background:rgba(255,255,255,.5)}
.circle-layout { max-width:1460px; margin:auto; display:grid; grid-template-columns:minmax(600px,1.5fr) minmax(290px,.7fr); gap:24px; }
.feature-card { background:var(--ink); color:white; border-color:rgba(255,255,255,.08); }
.lobby-card { padding:30px; min-height:610px; }
.lobby-top,.lobby-actions{display:flex;justify-content:space-between;align-items:center}
.status-pill,.learning-pill,.pro-pill { font-size:8px; letter-spacing:1.4px; font-weight:800; color:var(--green-bright); }
.lobby-top h2{font-size:26px;margin:9px 0 4px}.lobby-top p{font-size:10px;color:#8da39d;margin:0}
.icon-button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:white}
.lobby-table{position:relative;height:430px;max-width:650px;margin:auto}
.table-orbit{position:absolute;inset:54px 105px;border:1px dashed rgba(99,225,173,.22);border-radius:50%;transform:rotate(-8deg)}
.table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:105px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#1b5145,#0d3029);border:1px solid rgba(99,225,173,.15);display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 25px 40px rgba(0,0,0,.2)}
.table-center span{font:400 34px Georgia;color:var(--gold)}.table-center b{font-size:9px;letter-spacing:1.5px;color:#9cb2ac}
.seat{position:absolute;width:96px;text-align:center;background:none;border:0;color:white}.seat span{width:52px;height:52px;margin:auto auto 5px;border-radius:50%;display:grid;place-items:center;background:#c48744;border:3px solid var(--ink);outline:2px solid var(--green);font-weight:800}
.seat b,.seat small{display:block}.seat b{font-size:10px}.seat small{font-size:8px;color:var(--green-bright)}.seat.waiting span{background:#a76558;outline-color:var(--gold)}.seat.waiting small{color:var(--gold)}.seat.guest span{background:#785fa7;outline-color:#bca9e3}.seat.guest small{color:#bca9e3}.seat.empty span{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.25);outline:0;color:#758a84}.seat.empty small{color:#71847f}
.seat-1{left:calc(50% - 48px);top:18px}.seat-2{right:60px;top:105px}.seat-3{right:80px;bottom:50px}.seat-4{left:80px;bottom:50px}.seat-5{left:60px;top:105px}.seat-6{left:calc(50% - 48px);bottom:0}
.lobby-actions{border-top:1px solid rgba(255,255,255,.08);padding-top:18px}.lobby-actions>div{display:flex;align-items:center;gap:12px}.lobby-actions p{font-size:9px;color:#8da39d}.lobby-actions .primary-button{background:var(--green);color:var(--ink)}
.avatars-stack{display:flex}.avatars-stack i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-right:-7px;border:2px solid var(--ink);background:#8a6043;font-style:normal;font-size:8px}
.circle-side{display:grid;gap:20px}.invite-card,.history-card{padding:22px}.link-icon{font-size:22px;color:var(--green)}
.invite-link{display:flex;background:#edf0e9;border-radius:10px;margin:17px 0 12px;padding:6px 6px 6px 11px;align-items:center}.invite-link span{font-size:9px;flex:1;color:#52635d;white-space:nowrap;overflow:hidden}.invite-link button{border:0;background:var(--ink);color:white;border-radius:7px;padding:8px 10px;font-size:8px;font-weight:800}
.invite-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}.invite-methods button{border:1px solid var(--line);background:white;border-radius:10px;padding:12px 8px;font-size:8px;font-weight:700}.invite-methods span{display:block;font-size:16px;margin-bottom:5px;color:var(--green-dark)}
.history-card{min-height:280px}.history-entry{display:grid;grid-template-columns:33px 1fr auto;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.history-entry>span{width:32px;height:32px;border-radius:9px;background:#e7ede7;display:grid;place-items:center;font-size:12px}.history-entry b,.history-entry small{display:block}.history-entry b{font-size:10px}.history-entry small{font-size:8px;color:var(--muted)}.history-entry strong{font:800 11px "Manrope";color:var(--green-dark)}
.insight-grid{max-width:1460px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}.score-card{grid-column:span 2;padding:30px;display:flex;align-items:center;gap:32px;min-height:240px}.score-ring{width:150px;height:150px;flex:0 0 auto;background:conic-gradient(var(--green-bright) 56%,rgba(255,255,255,.1) 0)}.score-ring::before{inset:10px}.score-ring strong,.score-ring small{display:block;text-align:center}.score-ring strong{font:800 48px "Manrope"}.score-ring small{font-size:8px;letter-spacing:1.5px;color:#91aaa4}.score-copy h2{font-size:24px;margin:8px 0}.score-copy p{font-size:11px;color:#9aafa9;max-width:480px;line-height:1.6}.score-scale{display:flex;gap:3px;margin-top:17px}.score-scale i{width:19%;height:5px;background:rgba(255,255,255,.12);border-radius:5px}.score-scale i:first-child{background:var(--coral)}.score-scale i:nth-child(2){background:#d49a55}.score-scale i.active{background:var(--gold)}.scale-labels{display:flex;justify-content:space-between;color:#78908a;font-size:7px;margin-top:5px}
.trend-card{padding:22px}.trend-up{font-size:10px;color:var(--green-dark);font-weight:800}.trend-card svg{width:100%;margin-top:12px}.grid-line{stroke:#deddd5;stroke-width:1}.trend-area{fill:url(#area)}.trend-line{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round}.chart-dots circle{fill:var(--white);stroke:var(--green);stroke-width:3}
.habit-card{padding:25px}.habit-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#e0f3e9;font-size:22px}.habit-card h3{font-size:20px;margin:16px 0 8px}.habit-card p{font-size:10px;line-height:1.6;color:var(--muted)}.habit-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.habit-tags span{padding:6px 8px;border:1px solid var(--line);border-radius:20px;font-size:7px;font-weight:800}
.roadmap-card{grid-column:span 2;padding:25px}.route-icon{font-size:28px;color:var(--green-bright)}.roadmap{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:24px;position:relative}.roadmap::before{content:"";position:absolute;left:8%;right:8%;top:20px;border-top:1px dashed rgba(255,255,255,.2)}.road-step{position:relative;z-index:1}.road-step>span{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#1a3e36;border:1px solid rgba(255,255,255,.12);font-size:10px}.road-step.done>span{background:var(--green);color:var(--ink)}.road-step.current>span{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 5px rgba(233,182,77,.08)}.road-step div{margin-top:13px}.road-step b,.road-step small{display:block}.road-step b{font-size:9px;max-width:130px}.road-step small{font-size:7px;color:#80968f;margin-top:4px}.road-step strong{font-size:6px;color:var(--gold);position:absolute;top:14px;left:48px;letter-spacing:1px}
.badges-card{padding:24px}.badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.badges div{display:flex;align-items:center;gap:9px;background:#f0eee7;border-radius:11px;padding:10px}.badges span{font-size:20px}.badges b{font-size:8px}.badges .locked{filter:grayscale(1);opacity:.4}
.planner-hero{margin:-38px -4vw 0;background:var(--ink);color:white;padding:58px 8vw 130px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative}.planner-hero::after{content:"";position:absolute;width:500px;height:500px;right:10%;top:-260px;border:1px solid rgba(99,225,173,.1);border-radius:50%;box-shadow:0 0 0 80px rgba(99,225,173,.02),0 0 0 160px rgba(99,225,173,.02)}.planner-title{position:relative;z-index:1}.pro-pill{color:var(--gold)}.planner-title h1{font-size:52px;margin-top:15px}.planner-title h1 em{color:var(--green-bright)}.planner-title p{color:#91a7a1}.freedom-orb{width:180px;height:180px;border-radius:50%;border:1px solid rgba(99,225,173,.25);background:radial-gradient(circle,rgba(43,191,132,.13),transparent 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1}.freedom-orb span{font-size:7px;letter-spacing:1.4px;color:#8da39d;text-align:center}.freedom-orb strong{font:800 42px "Manrope";color:var(--green-bright)}.freedom-orb small{font-size:7px;color:#8da39d}
.planner-shell{max-width:1180px;margin:-80px auto 40px;position:relative;background:var(--white);border-radius:24px;box-shadow:0 25px 70px rgba(8,33,29,.17);overflow:hidden;min-height:600px}.planner-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#ebe9e1;border-bottom:1px solid var(--line)}.planner-tabs button{border:0;background:none;padding:18px;font-size:10px;font-weight:800;color:#80908a;border-bottom:2px solid transparent}.planner-tabs button.active{color:var(--ink);background:var(--white);border-color:var(--green)}
.plan-panel{display:none;padding:38px 45px}.plan-panel.active{display:block;animation:viewIn .35s}.plan-intro{display:flex;justify-content:space-between;align-items:start;margin-bottom:28px}.plan-intro span{font-size:8px;letter-spacing:1.5px;color:var(--green-dark);font-weight:800}.plan-intro h2{font-size:28px;margin:7px 0}.plan-intro p{font-size:10px;color:var(--muted)}.privacy-note{border:1px solid var(--line);border-radius:20px;padding:8px 12px;font-size:8px;color:var(--green-dark)}
.planner-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px}.planner-form label,.modal label{display:block}.planner-form label>span,.modal label>span{display:block;font-size:9px;font-weight:700;margin-bottom:7px;color:#586963}.planner-form input,.planner-form select,.modal input,.modal select{width:100%;border:1px solid #d8d8d0;background:#faf9f5;border-radius:10px;padding:12px 13px;outline:none;font-size:11px;color:var(--ink)}.planner-form input:focus,.planner-form select:focus,.modal input:focus,.modal select:focus{border-color:var(--green)}.money-input{position:relative}.money-input i{position:absolute;left:13px;top:11px;font-style:normal;color:var(--muted)}.money-input input{padding-left:29px}.full-field{grid-column:span 2}.choice-row{display:flex;gap:8px}.choice{border:1px solid var(--line);background:white;border-radius:9px;padding:9px 13px;font-size:9px}.choice.active{background:#e3f5ec;border-color:#9dd9c0;color:var(--green-dark)}.consent{display:flex!important;align-items:start;gap:9px;border-top:1px solid var(--line);padding-top:17px}.consent input{width:14px}.consent span{font-weight:400!important;line-height:1.5}.consent a{color:var(--green-dark)}.form-footer{display:flex;justify-content:space-between;align-items:center}.form-footer>span{font-size:8px;color:var(--muted)}
.goal-list{display:grid;gap:10px}.goal-item{display:grid;grid-template-columns:45px 1fr 50px;align-items:center;gap:14px;padding:17px;border:1px solid var(--line);border-radius:14px}.goal-emoji{width:43px;height:43px;border-radius:12px;background:#edf3ec;display:grid;place-items:center;font-size:20px}.goal-item b,.goal-item small{display:block}.goal-item b{font-size:11px}.goal-item small{font-size:8px;color:var(--muted);margin:3px 0 8px}.goal-item>strong{text-align:right;font:800 14px "Manrope"}.add-goal{border:1px dashed #bdc7c2;background:none;border-radius:12px;padding:14px;color:var(--green-dark);font-size:9px;font-weight:800}
.income-lab{display:grid;grid-template-columns:1fr 1.2fr;gap:30px}.upload-box{min-height:260px;border:1px dashed #aabbb4;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f7f3}.upload-box input{display:none}.upload-box>span{font-size:30px;color:var(--green-dark)}.upload-box b{font-size:12px;margin:12px 0 4px}.upload-box small{font-size:8px;color:var(--muted)}.skill-results>small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.skill-card{display:grid;grid-template-columns:33px 1fr auto;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:17px 0}.skill-card>span{width:31px;height:31px;border-radius:9px;background:var(--ink);color:var(--green-bright);display:grid;place-items:center;font-size:8px}.skill-card b{font-size:10px}.skill-card p{font-size:8px;color:var(--muted);margin:2px 0}.skill-card strong{font-size:10px;color:var(--green-dark)}
.plan-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.summary-stat{padding:20px;border:1px solid var(--line);border-radius:14px}.summary-stat small,.summary-stat strong,.summary-stat span{display:block}.summary-stat small{font-size:8px;color:var(--muted)}.summary-stat strong{font:800 22px "Manrope";margin:5px 0}.summary-stat span{font-size:8px;color:var(--green-dark)}.action-plan{margin-top:20px;display:grid;gap:8px}.action-plan div{display:grid;grid-template-columns:100px 1fr 1fr;gap:15px;padding:15px 18px;border-radius:12px;background:#f0f2ec;align-items:center}.action-plan span{font-size:8px;color:var(--green-dark);font-weight:800;text-transform:uppercase}.action-plan b{font-size:10px}.action-plan small{font-size:8px;color:var(--muted)}
.paywall{position:absolute;inset:0;background:rgba(244,241,233,.52);backdrop-filter:blur(9px);display:grid;place-items:center;z-index:5}.paywall.hidden{display:none}.paywall-card{width:min(430px,90%);text-align:center;background:var(--ink);color:white;border-radius:22px;padding:37px;box-shadow:0 30px 80px rgba(8,33,29,.3)}.paywall-spark{font-size:30px;color:var(--gold)}.paywall-card>p:first-of-type{font-size:8px;letter-spacing:1.5px;color:var(--gold)}.paywall-card h2{font-size:27px;margin:8px}.paywall-card>p:nth-of-type(2){font-size:10px;color:#95aaa4;line-height:1.6}.price{display:flex;justify-content:center;align-items:center;margin:22px}.price strong{font:800 36px "Manrope"}.price span{text-align:left;font-size:9px;color:#9cb0aa;margin-left:7px}.price small{font-size:7px}.paywall-card .primary-button{display:block;width:100%;background:var(--green);color:var(--ink);margin-bottom:12px}.paywall-card>small{color:#7d938d;font-size:8px}
.modal-backdrop{position:fixed;inset:0;background:rgba(3,20,17,.62);backdrop-filter:blur(8px);z-index:100;display:none;place-items:center;padding:20px}.modal-backdrop.open{display:grid;animation:fadeIn .25s}.modal{position:relative;width:min(570px,96vw);max-height:90vh;overflow:auto;background:var(--white);border-radius:24px;padding:34px;box-shadow:0 30px 100px rgba(0,0,0,.3);animation:modalIn .35s cubic-bezier(.2,.8,.2,1)}@keyframes fadeIn{from{opacity:0}}@keyframes modalIn{from{transform:translateY(18px) scale(.97);opacity:0}}
.modal-close{position:absolute;right:17px;top:17px;width:30px;height:30px;border:0;background:#eceae3;border-radius:50%;font-size:18px}.modal h2{font-size:28px;margin:7px 0}.modal>p:not(.eyebrow):not(.event-month):not(.decision-note){font-size:10px;color:var(--muted);line-height:1.6}.modal form{margin-top:24px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.access-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.access-choice button{border:1px solid var(--line);background:white;border-radius:12px;padding:14px;text-align:left}.access-choice button.active{border-color:var(--green);background:#e8f6ef}.access-choice span,.access-choice b,.access-choice small{display:block}.access-choice span{color:var(--green-dark)}.access-choice b{font-size:10px;margin:5px 0}.access-choice small{font-size:8px;color:var(--muted)}
.auth-tabs{display:flex;background:#eeece5;border-radius:11px;padding:4px;margin:-8px 38px 24px 0}.auth-tabs button{flex:1;border:0;background:transparent;border-radius:8px;padding:9px;font-size:9px;font-weight:800;color:#7d8b86}.auth-tabs button.active{background:white;color:var(--ink);box-shadow:0 3px 10px rgba(8,33,29,.07)}#loginForm label+label{margin-top:14px}.verification-modal{text-align:center}.verification-modal label{text-align:left;margin-top:20px}.verification-modal input{text-align:center;font:800 25px "Manrope";letter-spacing:8px}.verification-modal #localCodeHint{display:block;color:var(--green-dark);font-size:9px;margin-top:8px}
.event-modal{text-align:center;padding:0 34px 32px;overflow:hidden}.event-banner{height:120px;margin:0 -34px 25px;background:linear-gradient(135deg,#d96958,#b74439);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white}.event-banner.opportunity{background:linear-gradient(135deg,#edae3e,#c27c1a)}.event-banner.windfall{background:linear-gradient(135deg,#42c48c,#147257)}.event-banner.crisis{background:linear-gradient(135deg,#5b85a8,#31546e)}.event-banner>span{font-size:35px}.event-banner small{font-size:8px;letter-spacing:2px;font-weight:800;margin-top:5px}.event-month{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.event-modal h2{font-size:30px}.decision-prompt{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin:20px 0 10px}.decision-list{display:grid;gap:9px}.decision-option{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);background:white;border-radius:12px;padding:12px;text-align:left;transition:.2s}.decision-option:hover{border-color:var(--green);transform:translateX(3px)}.decision-option>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#edf1eb}.decision-option b,.decision-option small{display:block}.decision-option b{font-size:10px}.decision-option small{font-size:8px;color:var(--muted);margin-top:2px}.decision-option>strong{font-size:15px;color:#9aaaa5}.decision-note{font-size:8px;color:var(--muted);margin-top:15px}.small-modal label{margin-top:14px}
.event-banner { position:relative; overflow:hidden; }
.event-banner::before,.event-banner::after { content:""; position:absolute; width:90px; height:90px; border:1px solid rgba(255,255,255,.32); border-radius:24px; transform:rotate(35deg); animation:eventFloat 3.4s ease-in-out infinite; }
.event-banner::before { left:35px; top:-48px; }.event-banner::after { right:35px; bottom:-55px; animation-delay:-1.3s; }
.event-banner>span { position:relative; z-index:1; animation:eventIconPop 1.6s ease-in-out infinite; filter:drop-shadow(0 8px 12px rgba(0,0,0,.2)); }
.event-banner small { position:relative; z-index:1; }
.registration-grid{display:grid;grid-template-columns:1fr 100px;gap:13px}.registration-grid .registered-only{grid-column:span 2}.verify-field{display:flex;gap:7px}.verify-field button{border:0;background:var(--ink);color:white;border-radius:9px;padding:0 14px;font-size:9px;font-weight:800}.verification-state{display:block;margin-top:5px;color:var(--coral);font-size:8px}.verification-state.verified{color:var(--green-dark)}
.planner-form textarea{width:100%;min-height:80px;resize:vertical;border:1px solid #d8d8d0;background:#faf9f5;border-radius:10px;padding:12px 13px;outline:none;font:11px "DM Sans";color:var(--ink)}.form-section-title{display:flex;align-items:center;gap:11px;margin-top:12px;padding:13px 15px;background:linear-gradient(90deg,#e8f7ef,#f5f2e8);border-radius:12px;border-left:3px solid var(--green)}.form-section-title>span{width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--green-bright)!important;display:grid!important;place-items:center;margin:0!important}.form-section-title b,.form-section-title small{display:block}.form-section-title b{font-size:10px}.form-section-title small{font-size:8px;color:var(--muted)}
.ledger-modal{width:min(1000px,96vw);padding:34px}.ledger-modal>h2{margin-right:35px}.ledger-modal>p{margin-bottom:22px}.ledger-section{border:1px solid var(--line);border-radius:16px;padding:17px;margin-bottom:12px;background:#fff}.ledger-heading{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;margin-bottom:14px}.ledger-heading>span{width:40px;height:40px;border-radius:12px;background:#e8f6ef;display:grid;place-items:center;font-size:19px}.debt-section .ledger-heading>span{background:#ffe4e1}.insurance-section .ledger-heading>span{background:#e3edff}.vehicle-section .ledger-heading>span{background:#fff0cf}.expense-section .ledger-heading>span{background:#f3e6ff}.investment-section .ledger-heading>span{background:#dcf8ea}.ledger-heading b,.ledger-heading small{display:block}.ledger-heading b{font:700 12px "Manrope"}.ledger-heading small{font-size:8px;color:var(--muted)}.ledger-heading strong{font:800 14px "Manrope";color:var(--green-dark)}.ledger-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ledger-fields.four{grid-template-columns:repeat(4,1fr)}.ledger-fields label{font-size:8px;color:var(--muted)}.ledger-fields input{margin-top:5px}.ledger-footer{display:flex;justify-content:space-between;align-items:center;padding-top:8px}.ledger-footer>span{font-size:8px;color:var(--muted)}
.transaction-animation{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,24,20,.68);backdrop-filter:blur(5px);color:white;opacity:0;pointer-events:none;transition:.25s}.transaction-animation.show{opacity:1}.transaction-burst{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--green) 0 27%,rgba(0,201,139,.22) 28% 48%,transparent 49%);animation:burstPulse 1s ease both}.transaction-animation.expense .transaction-burst{background:radial-gradient(circle,var(--coral) 0 27%,rgba(255,93,93,.22) 28% 48%,transparent 49%)}.transaction-main-icon{font-size:48px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.2))}.orbit-icon{position:absolute;width:32px;height:32px;border-radius:50%;background:white;color:var(--ink);display:grid;place-items:center;font-weight:800;animation:orbitPop 1.2s ease both}.o1{left:3px;top:58px}.o2{right:9px;top:18px;animation-delay:.1s}.o3{right:15px;bottom:6px;animation-delay:.2s}.transaction-animation>strong{font:800 38px "Manrope";margin-top:10px}.transaction-animation>p{font-size:11px;color:#a9c0ba;margin:5px}
@keyframes trackBreathe{50%{filter:saturate(1.25) brightness(1.08);transform:scale(1.012)}}@keyframes trackRotate{to{transform:rotate(370deg)}}@keyframes boardGlow{50%{opacity:.45;transform:scale(1.03)}}@keyframes eventFloat{50%{transform:rotate(55deg) translateY(12px)}}@keyframes eventIconPop{50%{transform:translateY(-5px) scale(1.12)}}@keyframes burstPulse{0%{transform:scale(.35) rotate(-20deg);opacity:0}70%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1)}}@keyframes orbitPop{0%{transform:scale(0) translate(20px,20px)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);display:flex;align-items:center;gap:10px;background:var(--ink);color:white;border-radius:12px;padding:12px 18px;z-index:200;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast span{color:var(--green-bright)}.toast p{font-size:10px;margin:0}
@media(max-width:1100px){.game-layout{grid-template-columns:230px 1fr}.activity-panel{display:none}.board{width:min(50vw,510px)}.insight-grid{grid-template-columns:1fr 1fr}.habit-card,.badges-card{grid-column:span 1}.circle-layout{grid-template-columns:1fr}.circle-side{grid-template-columns:1fr 1fr}.main-nav .nav-item{padding:10px}.nav-item span{display:none}}
@media(max-width:760px){.topbar{height:auto;padding:10px 14px;grid-template-columns:1fr auto}.brand small,.user-chip>div,.user-chip button{display:none}.main-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;border-radius:0;justify-content:space-around;background:rgba(244,241,233,.95);backdrop-filter:blur(15px);border-top:1px solid var(--line)}.nav-item{font-size:9px;padding:10px 8px}.nav-item span{display:block;margin:0 auto 3px}.premium-nav i{display:none}.view{padding:27px 16px 85px}.game-heading,.section-heading{align-items:start}.phase-card{display:none}.game-heading h1,.section-heading h1{font-size:38px}.game-layout{display:flex;flex-direction:column}.board-wrap{order:1;width:100%}.metrics-panel{order:2;width:100%}.board{width:min(92vw,500px)}.turn-copy{display:none}.circle-layout{display:block}.lobby-card{padding:20px;min-height:560px}.lobby-table{transform:scale(.85);margin:-20px}.circle-side{display:grid;grid-template-columns:1fr;margin-top:18px}.insight-grid{display:block}.insight-grid>*{margin-bottom:16px}.score-card{display:block;text-align:center}.score-ring{margin:auto}.score-copy p{margin:auto}.roadmap{grid-template-columns:1fr}.roadmap::before{display:none}.road-step{display:grid;grid-template-columns:45px 1fr}.road-step div{margin:0}.road-step strong{display:none}.planner-hero{padding:45px 25px 125px}.planner-title h1{font-size:38px}.freedom-orb{display:none}.planner-tabs button{font-size:0}.planner-tabs button::first-letter{font-size:11px}.plan-panel{padding:27px 20px}.planner-form{grid-template-columns:1fr}.full-field{grid-column:span 1}.income-lab,.plan-summary{grid-template-columns:1fr}.action-plan div{grid-template-columns:1fr}.form-two,.access-choice,.registration-grid{grid-template-columns:1fr}.registration-grid .registered-only{grid-column:span 1}.circle-side{display:grid}.section-heading>button{margin-left:15px;white-space:nowrap}.ledger-fields,.ledger-fields.four{grid-template-columns:1fr 1fr}.ledger-modal{padding:24px}.choice-row{flex-wrap:wrap}}