:root {
  --bg: #17153b; --bg2: #1f1c4d; --card: #2a2663; --card2: #343074; --line: #433d92; --text: #f5f3ff; --muted: #b2acdf; --dim: #8079c0;
  --gold: #ffc23d; --gold2: #ff9f1c; --green: #34d399; --red: #fb7185; --blue: #60a5fa; --purple: #a78bfa; --pink: #f472b6; --orange: #fb923c; --teal: #2dd4bf;
  --r: 16px; --r2: 12px; --sh: 0 6px 0 rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.25);
  --font: ui-rounded, "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(1200px 600px at 20% -10%, #3b2f8f 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #4a1f6e 0%, transparent 60%), var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .45; }
b, strong { font-weight: 800; }
.hidden { display: none !important; }

/* ---------- layout ---------- */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: 210px 1fr; grid-template-rows: auto 1fr; }
#hud { grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(23,21,59,.85); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); z-index: 5; min-height: 60px; }
#nav { grid-row: 2; display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; background: rgba(31,28,77,.6); border-right: 2px solid var(--line); overflow-y: auto; }
#view { grid-row: 2; overflow-y: auto; overflow-x: hidden; padding: 18px; scroll-behavior: smooth; }
#gamearter-toolbar { flex: 0 0 auto; }

.navbtn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-weight: 800; color: var(--muted); transition: background .15s, color .15s, transform .1s; text-align: left; }
.navbtn .ic { font-size: 20px; width: 26px; text-align: center; }
.navbtn:hover { background: var(--card); color: var(--text); }
.navbtn.on { background: var(--card2); color: var(--text); box-shadow: inset 4px 0 0 var(--gold); }
.navbtn:active { transform: scale(.97); }
.endbtn { margin-top: auto; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a1d00; justify-content: center; font-size: 17px; padding: 16px 10px; box-shadow: 0 5px 0 #b45309; border-radius: 16px; }
.endbtn:hover { background: linear-gradient(180deg, #ffd36b, var(--gold)); color: #3a1d00; }
.endbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b45309; }
.endbtn .sub { display: block; font-size: 11px; font-weight: 700; opacity: .75; }

/* hud */
.hud-title { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; margin-left: 250px; }
.hud-title .t1 { font-weight: 900; font-size: 16px; color: var(--gold); white-space: nowrap; }
.hud-title .t2 { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hud-stats { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.chip { display: flex; align-items: center; gap: 7px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 5px 10px; min-width: 0; }
.chip .ic { font-size: 17px; }
.chip .lb { font-size: 10px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.chip .vl { font-weight: 900; font-size: 15px; white-space: nowrap; }
.chip .col { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.chip .lb, .chip .vl { overflow: hidden; text-overflow: ellipsis; }
.lbl-short { display: none; }
.chip.fm { min-width: 140px; }
.mini-bar { height: 6px; background: rgba(255,255,255,.12); border-radius: 6px; overflow: hidden; margin-top: 3px; }
.mini-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); border-radius: 6px; transition: width .6s; }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; background: var(--card); border: 2px solid var(--line); font-size: 18px; display: grid; place-items: center; flex: 0 0 auto; }
.iconbtn:hover { background: var(--card2); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.card { background: linear-gradient(180deg, var(--card), #262259); border: 2px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: 0 4px 0 rgba(0,0,0,.18); min-width: 0; }
.card h2 { margin: 0 0 12px; font-size: 17px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.card h2 .ic { font-size: 20px; }
.card h2 .right { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 700; }
.card h3 { margin: 14px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: 13px; } .tiny { font-size: 11px; }
.pos { color: var(--green); } .neg { color: var(--red); } .gold { color: var(--gold); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.sp { flex: 1; }
.sep { height: 2px; background: var(--line); margin: 10px 0; border-radius: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 12px; font-weight: 800; background: var(--card2); border: 2px solid var(--line); box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: transform .08s, background .15s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: #3f3a88; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn.pri { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a1d00; border-color: #e08a00; box-shadow: 0 3px 0 #b45309; }
.btn.go { background: linear-gradient(180deg, #4ade80, #16a34a); color: #052e16; border-color: #15803d; box-shadow: 0 3px 0 #14532d; }
.btn.bad { background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; border-color: #be123c; box-shadow: 0 3px 0 #881337; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.on { background: var(--purple); color: #1e1b4b; border-color: #8b5cf6; }
.seg { display: inline-flex; background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { padding: 6px 11px; border-radius: 9px; font-weight: 800; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--card2); color: var(--text); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; background: var(--card2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tag.g { background: rgba(52,211,153,.18); color: var(--green); } .tag.r { background: rgba(251,113,133,.18); color: var(--red); } .tag.y { background: rgba(255,194,61,.18); color: var(--gold); } .tag.b { background: rgba(96,165,250,.18); color: var(--blue); } .tag.p { background: rgba(167,139,250,.2); color: var(--purple); }

.bar { height: 10px; background: rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 10px; transition: width .6s; background: var(--green); }
.bar.big { height: 18px; border-radius: 12px; }
.bar.big > i { background: linear-gradient(90deg, #f59e0b, #ffd166, #fff3b0); box-shadow: 0 0 18px rgba(255,194,61,.6); }

.kpi { padding: 14px; }
.kpi .lb { font-size: 12px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.kpi .vl { font-size: 22px; font-weight: 900; margin-top: 4px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.lines { display: flex; flex-direction: column; gap: 4px; }
.line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: 14px; }
.line .k { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.line .v { font-weight: 800; white-space: nowrap; }
.line.tot { border-bottom: 0; border-top: 2px solid var(--line); padding-top: 8px; margin-top: 4px; font-size: 15px; }
.line.tot .k { color: var(--text); font-weight: 900; }

/* ---------- home ---------- */
.home { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.scene { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; border: 2px solid var(--line); box-shadow: var(--sh); }
.scene svg { display: block; width: 100%; height: 100%; }
.wheel-spin { animation: spin var(--spd, 2s) linear infinite; }
.wheel-stop { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.hammy-run { animation: bob calc(var(--spd, 2s) / 4) ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.footA, .footB { animation: step calc(var(--spd, 2s) / 5) ease-in-out infinite alternate; }
.footB { animation-direction: alternate-reverse; }
@keyframes step { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
.sweat { animation: drip 1.2s ease-in infinite; }
@keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
.zzz { animation: zz 2s ease-in-out infinite; }
@keyframes zz { 0% { transform: translate(0,0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px,-20px); opacity: 0; } }
.sunglow { animation: glow 3s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: .55; } }
.scene-badge { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.scene-badge .tag { background: rgba(23,21,59,.75); color: var(--text); backdrop-filter: blur(4px); }
.fm-card .big { font-size: 34px; font-weight: 900; color: var(--gold); line-height: 1; }
.fm-card .row { align-items: flex-end; }
.advisor { display: flex; gap: 12px; align-items: flex-start; }
.advisor .face { font-size: 34px; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; border: 2px solid var(--line); }
.advisor .bubble { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; position: relative; }

.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.slot { background: var(--bg2); border: 2px dashed var(--line); border-radius: 14px; padding: 10px 8px; text-align: center; transition: transform .1s, border-color .15s; min-height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.slot:hover { border-color: var(--gold); transform: translateY(-2px); }
.slot .ic { font-size: 28px; }
.slot .nm { font-weight: 800; font-size: 13px; line-height: 1.15; }
.slot .wk { font-size: 10px; color: var(--dim); text-transform: uppercase; font-weight: 800; letter-spacing: .05em; }
.slot.locked { opacity: .6; border-style: solid; }
.fx { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.fx span { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.08); }
.fx .u { color: var(--green); } .fx .d { color: var(--red); }

.news-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.news-item { display: flex; gap: 8px; font-size: 13px; padding: 7px 10px; background: var(--bg2); border-radius: 10px; border-left: 4px solid var(--line); }
.news-item.good { border-left-color: var(--green); } .news-item.bad { border-left-color: var(--red); } .news-item.headline { border-left-color: var(--blue); font-style: italic; }
.news-item .m { color: var(--dim); font-weight: 800; white-space: nowrap; }

/* ---------- invest ---------- */
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.asset { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) 90px 104px minmax(70px, .8fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.asset:last-child { border-bottom: 0; }
.asset .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--bg2); display: grid; place-items: center; font-size: 22px; border: 2px solid var(--line); }
.asset .nm { font-weight: 900; }
.asset .ds { font-size: 12px; color: var(--muted); line-height: 1.3; }
.asset .pr { font-weight: 800; text-align: right; }
.asset .hd { font-size: 13px; text-align: right; }
.asset .act { display: flex; gap: 6px; }
.asset.locked { opacity: .5; }
.spark { width: 90px; height: 30px; display: block; }
.econ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.econ .box { background: var(--bg2); border-radius: 12px; padding: 10px; border: 2px solid var(--line); }
.econ .box .lb { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 800; }
.econ .box .vl { font-size: 18px; font-weight: 900; margin-top: 2px; }

.prop { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.prop .top { display: flex; gap: 10px; align-items: center; }
.prop .ic { font-size: 30px; }
.prop .nm { font-weight: 900; }
.prop .kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; }
.prop .kv .k { color: var(--muted); }
.prop .kv .v { font-weight: 800; text-align: right; }
.prop .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.prop.bargain { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,194,61,.25); }

/* ---------- life ---------- */
.skill { margin-bottom: 12px; }
.skill .row { margin-bottom: 4px; }
.skill .lv { margin-left: auto; font-weight: 900; color: var(--gold); }
.ls-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.ls-row .cur { display: flex; align-items: center; gap: 8px; font-weight: 800; min-width: 0; }
.ls-row .cur .ic { font-size: 24px; }
.ls-row .step { display: flex; gap: 6px; align-items: center; }
.ls-row .step .btn { width: 36px; padding: 6px 0; }
.dots { display: flex; gap: 3px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); }
.dots i.on { background: var(--gold); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.toggle .ic { font-size: 22px; }
.switch { width: 50px; height: 28px; border-radius: 28px; background: var(--bg2); border: 2px solid var(--line); position: relative; flex: 0 0 auto; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: left .15s, background .15s; }
.switch.on { background: var(--green); border-color: #059669; }
.switch.on::after { left: 24px; background: #fff; }
.unlock-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: 13px; }
.unlock-list .u { display: flex; gap: 6px; align-items: center; }
.unlock-list .u.ok { color: var(--green); }
.unlock-list .u.no { color: var(--dim); }

/* ---------- journal ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tile { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 104px; justify-content: center; transition: transform .1s; }
.tile:hover { transform: translateY(-2px); }
.tile .ic { font-size: 30px; }
.tile .nm { font-size: 12px; font-weight: 800; line-height: 1.2; }
.tile.off { opacity: .35; filter: grayscale(1); }
.tile.ever { opacity: .7; }
.tile.run { border-color: var(--gold); }

/* ---------- modal ---------- */
#modal-root { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(10,8,30,.72); backdrop-filter: blur(4px); }
#modal-root.open { display: flex; }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: linear-gradient(180deg, #332e7a, #28245f); border: 3px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--sh); animation: pop .22s cubic-bezier(.2,1.4,.4,1); position: relative; }
.modal.wide { width: min(820px, 100%); }
@keyframes pop { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.modal h1 { margin: 0 0 8px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.modal p { line-height: 1.5; margin: 8px 0; }
.modal .x { position: absolute; right: 12px; top: 12px; }
.ev-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ev-icon { font-size: 46px; width: 74px; height: 74px; border-radius: 20px; background: var(--bg2); border: 3px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; }
.ev-text { font-size: 16px; line-height: 1.55; }
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.choice { text-align: left; padding: 13px 14px; border-radius: 14px; background: var(--card2); border: 2px solid var(--line); font-weight: 800; box-shadow: 0 3px 0 rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; transition: transform .08s, background .15s, border-color .15s; }
.choice:hover:not(:disabled) { background: #413b8e; border-color: var(--gold); }
.choice:active:not(:disabled) { transform: translateY(2px); }
.choice .n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background: var(--bg2); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.warnbox { background: rgba(251,113,133,.14); border: 2px solid rgba(251,113,133,.5); color: #ffd1d9; padding: 10px 12px; border-radius: 12px; font-size: 14px; margin-top: 10px; }
.lesson-card { text-align: center; }
.lesson-card .big { font-size: 64px; }
.lesson-card .kicker { color: var(--gold); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.amount-input { width: 100%; font: inherit; font-size: 22px; font-weight: 900; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); outline: none; }
.amount-input:focus { border-color: var(--gold); }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.act-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.act-opt { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: border-color .15s, transform .1s; }
.act-opt:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.act-opt.on { border-color: var(--gold); background: #3a3480; }
.act-opt .ic { font-size: 28px; }
.act-opt .nm { font-weight: 900; font-size: 13px; }
.act-opt .ds { font-size: 11px; color: var(--muted); line-height: 1.3; }

/* ---------- toast ---------- */
#toast-root { position: fixed; right: 16px; top: 72px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: #3a3480; border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 14px; box-shadow: var(--sh); animation: tin .3s ease-out; display: flex; gap: 8px; align-items: center; }
.toast.good { border-color: var(--green); } .toast.bad { border-color: var(--red); } .toast.gold { border-color: var(--gold); }
.toast.out { animation: tout .3s ease-in forwards; }
@keyframes tin { from { transform: translateX(40px); opacity: 0; } }
@keyframes tout { to { transform: translateX(40px); opacity: 0; } }
.float-num { position: fixed; z-index: 70; font-weight: 900; font-size: 22px; pointer-events: none; animation: floatup 1.4s ease-out forwards; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
@keyframes floatup { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -60px); opacity: 0; } }
.confetti { position: fixed; z-index: 80; width: 10px; height: 14px; pointer-events: none; top: -20px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- title / scenario ---------- */
.screen { position: fixed; inset: 0; z-index: 20; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 40px; background: radial-gradient(1000px 600px at 50% -10%, #4c3bb0 0%, transparent 60%), var(--bg); }
.title-wrap { width: min(920px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; margin: auto 0; }
.logo { text-align: center; }
.logo .w1 { font-size: clamp(40px, 8vw, 76px); font-weight: 900; line-height: .95; color: var(--gold); text-shadow: 0 5px 0 #b45309, 0 10px 30px rgba(255,159,28,.4); letter-spacing: -.01em; }
.logo .w2 { font-size: clamp(15px, 2.6vw, 19px); color: var(--muted); margin-top: 12px; font-weight: 700; }
.title-scene { width: min(560px, 100%); }
.menu { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
.menu .btn { padding: 15px; font-size: 18px; }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(1000px, 100%); }
.sc { background: linear-gradient(180deg, var(--card), #262259); border: 3px solid var(--line); border-radius: 18px; padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: transform .12s, border-color .15s; min-height: 170px; }
.sc:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); }
.sc .ic { font-size: 38px; }
.sc .nm { font-weight: 900; font-size: 18px; }
.sc .ds { font-size: 13px; color: var(--muted); line-height: 1.4; }
.sc.locked { opacity: .55; }
.sc .lock { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--gold); }
.perk { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.perk .ic { font-size: 26px; text-align: center; }
.end-hero { text-align: center; }
.end-hero .big { font-size: 64px; }
.score-lines .line .v { color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip.nw { display: none; }
}
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  #hud { grid-column: 1; flex-wrap: wrap; padding: 6px 10px; gap: 6px; min-height: 0; }
  .hud-title { margin-left: 8px; flex: 1; }
  .hud-stats { width: 100%; margin-left: 0; display: grid; grid-template-columns: 1.35fr 1.35fr .75fr .75fr; gap: 6px; order: 5; }
  .chip.st .lb, .chip.hp .lb { display: none; }
  .chip.st, .chip.hp { gap: 4px; }
  .chip { padding: 4px 7px; gap: 5px; }
  .chip.fm { min-width: 0; }
  .chip .ic { font-size: 15px; }
  .chip .vl { font-size: 13px; }
  .chip .lb { font-size: 9px; }
  .chip.st, .chip.hp { justify-content: center; }
  .chip.st .col, .chip.hp .col { align-items: center; }
  #view { grid-row: 2; padding: 12px; padding-bottom: 20px; }
  #nav { grid-row: 3; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 2px solid var(--line); gap: 2px; overflow: visible; background: rgba(23,21,59,.95); }
  .navbtn { flex: 1; flex-direction: column; gap: 1px; padding: 6px 2px; font-size: 10.5px; text-align: center; border-radius: 10px; min-width: 0; }
  .navbtn .ic { font-size: 20px; width: auto; }
  .navbtn.on { box-shadow: inset 0 -3px 0 var(--gold); }
  .navbtn .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .navbtn[data-t=home] { order: 1; } .navbtn[data-t=money] { order: 2; } .navbtn[data-t=invest] { order: 4; } .navbtn[data-t=life] { order: 5; } .navbtn[data-t=journal] { order: 6; }
  .endbtn { order: 3; margin: -16px 2px 0; flex: 1.25; font-size: 12px; padding: 8px 2px; border-radius: 16px; }
  .endbtn .ic { font-size: 24px; }
  .endbtn .sub { display: none; }
  .home, .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  .g4, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .econ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset { display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .asset .ic { width: 40px; height: 40px; flex: 0 0 40px; }
  .asset .nmw { flex: 1 1 calc(100% - 170px); min-width: 0; }
  .asset .spark { display: none; }
  .asset .pr { flex: 0 0 auto; min-width: 70px; }
  .asset .hd { flex: 1 1 auto; text-align: left; padding-left: 50px; }
  .asset .act { flex: 0 0 auto; justify-content: flex-end; margin-left: auto; }
  .lbl-long { display: none; } .lbl-short { display: inline !important; }
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #toast-root { top: auto; bottom: 86px; right: 10px; left: 10px; max-width: none; align-items: center; }
  .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ls-row .lab { grid-column: 1 / 3; font-size: 12px; color: var(--muted); }
}
@media (max-width: 480px) {
  html, body { font-size: 14px; }
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .slot { min-height: 88px; padding: 8px 4px; }
  .slot .ic { font-size: 24px; }
  .modal { padding: 16px; border-radius: 18px; }
  .ev-icon { width: 60px; height: 60px; font-size: 36px; }
  .unlock-list { grid-template-columns: minmax(0, 1fr); }
  .kpi .vl { font-size: 19px; }
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 900px) {
  .hud-stats { display: none; }
  .scene { aspect-ratio: 21 / 9; }
}

/* =================== v2: town, real-time clock, panels =================== */
#app { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr auto !important; }
#hud { grid-column: 1 !important; }
#view { grid-row: 2 !important; padding: 14px 16px; }
button.chip { cursor: pointer; text-align: left; transition: transform .1s, border-color .15s; }
button.chip:hover { border-color: var(--gold); transform: translateY(-1px); }

#dock { grid-row: 3; display: flex; align-items: center; gap: 12px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: rgba(23,21,59,.95); border-top: 2px solid var(--line); z-index: 5; }
.speeds { display: flex; gap: 6px; background: var(--bg2); border: 2px solid var(--line); border-radius: 16px; padding: 4px; }
.spd { width: 46px; height: 42px; border-radius: 12px; font-size: 20px; font-weight: 900; color: var(--muted); display: grid; place-items: center; transition: background .15s, transform .1s; }
.spd:hover { background: var(--card2); color: var(--text); }
.spd.on { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a1d00; box-shadow: 0 3px 0 #b45309; }
.spd.pulse { animation: pulse 1.1s ease-in-out infinite; color: var(--gold); }
@keyframes pulse { 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255,194,61,.35); } }
.clock { flex: 1; min-width: 0; }
.clock-top { display: flex; gap: 8px; align-items: baseline; font-size: 14px; white-space: nowrap; overflow: hidden; }
.clock-top b { text-transform: capitalize; font-size: 16px; }
.clock-top #clock-day { color: var(--muted); font-weight: 800; }
.clock .pz { margin-left: auto; color: var(--gold); font-weight: 900; font-size: 12px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.clock.is-paused .pz { opacity: 1; }
.clock-bar { height: 12px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 5px; }
.clock-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6); border-radius: 8px; }
.clock.is-paused .clock-bar i { background: #6b67a8; }
.dockbtn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: var(--card2); border: 2px solid var(--line); font-weight: 800; }
.dockbtn:hover { border-color: var(--gold); }
.dockbtn .ic { font-size: 20px; }

.town-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr); gap: 16px; max-width: 1500px; margin: 0 auto; }
.tg-main, .tg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.town { padding: 0; overflow: hidden; position: relative; }
.town-svg { display: block; width: 100%; height: auto; }
.bld { cursor: pointer; }
.bld .bi { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .15s ease, filter .15s; }
.bld:hover .bi, .bld:focus .bi { transform: scale(1.04); filter: brightness(1.12) drop-shadow(0 0 8px rgba(255,194,61,.6)); }
.bld:active .bi { transform: scale(.98); }
.bld.locked { cursor: not-allowed; }
.bld:focus { outline: none; }
.bang { animation: bang 1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bang { 50% { transform: translateY(-8px); } }
.cloud { animation: drift 40s linear infinite alternate; }
.cloud.c2 { animation-duration: 55s; }
@keyframes drift { to { transform: translateX(120px); } }
.smoke { animation: smoke 3s ease-out infinite; }
@keyframes smoke { from { transform: translateY(6px); opacity: .9; } to { transform: translateY(-14px); opacity: 0; } }
.ticker { position: absolute; left: 10px; right: 10px; top: 10px; max-width: 70%; background: rgba(15,12,45,.78); border-radius: 12px; padding: 7px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

.mission { border-color: var(--gold); background: linear-gradient(180deg, #3b2f7a, #2a2463); }
.mission .m-top { display: flex; align-items: center; gap: 12px; }
.mission .m-ic { font-size: 30px; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,194,61,.15); display: grid; place-items: center; flex: 0 0 auto; }
.mission .m-title { font-size: 17px; display: block; }
.mission .m-desc { margin: 8px 0; line-height: 1.4; }
.only-mobile { display: none !important; }

.jars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jar { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s, border-color .15s; min-width: 0; }
.jar:hover { transform: translateY(-2px); border-color: var(--gold); }
.jar-svg { width: 52px; height: 78px; }
.jar-lb { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jar-vl { font-size: 16px; font-weight: 900; }
.jar-sub { font-size: 11px; color: var(--dim); font-weight: 700; }

.weekcard { text-align: left; width: 100%; cursor: pointer; }
.weekcard:hover { border-color: var(--gold); }
.weekbar { display: flex; height: 16px; border-radius: 10px; overflow: hidden; gap: 2px; background: rgba(255,255,255,.08); }
.weekbar i { display: flex; align-items: center; justify-content: center; min-width: 3px; }
.weekbar.big { height: 30px; border-radius: 12px; }
.weekbar.big i span { font-size: 11px; font-weight: 900; color: #10102a; }
.weekleg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 8px; font-weight: 700; }
.miniSlots { display: flex; gap: 6px; margin-top: 10px; }
.miniSlots span { width: 38px; height: 38px; border-radius: 12px; background: var(--bg2); border: 2px solid var(--line); display: grid; place-items: center; font-size: 20px; }

.flyer { position: fixed; z-index: 90; font-size: 24px; pointer-events: none; transition: transform .8s cubic-bezier(.4,-0.3,.6,1), opacity .8s; margin: -14px 0 0 -12px; }

/* panels */
.modal.sheet { width: min(1060px, 100%); max-height: calc(100dvh - 32px); padding: 18px; }
.panel-head { display: flex; align-items: center; gap: 14px; margin: 0 40px 14px 0; }
.panel-head h1 { margin: 0; }
.panel-head .p-ic { font-size: 40px; width: 64px; height: 64px; border-radius: 18px; background: var(--bg2); border: 3px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; }
.stat { margin-bottom: 8px; }
.stat .row { margin-bottom: 3px; }
.partner-face { font-size: 34px; width: 58px; height: 58px; border-radius: 50%; background: rgba(244,114,182,.18); border: 2px solid var(--pink); display: grid; place-items: center; flex: 0 0 auto; }
.mood { display: flex; gap: 10px; align-items: center; background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; font-size: 14px; font-style: italic; margin-bottom: 8px; }
.mood-ic { font-size: 26px; font-style: normal; }
.ls-cards { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.ls-card { flex: 0 0 150px; scroll-snap-align: start; background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: transform .1s, border-color .15s; }
.ls-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.ls-card.now, .ls-card.now:disabled { border-color: var(--gold); background: #3a3480; opacity: 1; cursor: default; }
.ls-card .ic { font-size: 30px; }
.ls-card .nm { font-weight: 900; font-size: 13px; line-height: 1.2; }
.ls-card .cost { font-size: 12px; color: var(--muted); font-weight: 800; }
.career-ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.career-ladder span { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--bg2); color: var(--dim); }
.career-ladder span.past { color: var(--green); }
.career-ladder span.cur { background: var(--gold); color: #3a1d00; }

@media (max-width: 900px) {
  .town-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .only-mobile { display: block !important; }
  .only-desktop { display: none !important; }
  .mission .m-desc { font-size: 13px; }
  #dock { gap: 8px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .spd { width: 40px; height: 40px; font-size: 18px; }
  .dockbtn .lbl { display: none; }
  .dockbtn { padding: 8px 10px; }
  .jars { gap: 6px; }
  .jar-vl { font-size: 14px; }
  .jar-svg { width: 40px; height: 60px; }
  .modal.sheet { max-height: calc(100dvh - 16px); padding: 14px; border-radius: 18px; }
  #modal-root { padding: 8px; }
  .panel-head .p-ic { width: 50px; height: 50px; font-size: 30px; }
  .ticker { font-size: 11px; top: 6px; left: 6px; right: 6px; max-width: none; padding: 5px 8px; }
  .ls-card { flex-basis: 132px; }
}
@media (max-width: 420px) {
  .speeds { gap: 2px; padding: 3px; }
  .spd { width: 34px; height: 36px; font-size: 16px; }
  .jar-lb { font-size: 10px; }
}

/* ---------- v3: simplicity ---------- */
#coach { position: fixed; z-index: 75; pointer-events: none; display: none; animation: coachIn .25s ease-out; }
#coach .coach-bub { position: relative; background: linear-gradient(180deg, #fff3b0, #ffc23d); color: #3a1d00; font-weight: 900; font-size: 15px; padding: 9px 14px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 3px rgba(255,194,61,.35); white-space: nowrap; margin-top: 30px; }
#coach .finger { position: absolute; top: -34px; font-size: 30px; animation: tapme .9s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
#coach.up .coach-bub { margin-top: 0; margin-bottom: 30px; }
#coach.up .finger { top: auto; bottom: -34px; transform: rotate(180deg); animation-name: tapdown; }
@keyframes tapme { 50% { transform: translateY(-8px); } }
@keyframes tapdown { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-8px); } }
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } }
.modal.introm { width: min(440px, 100%); text-align: center; }
.intro h1 { font-size: 28px; margin: 4px 0; }
.intro-goal { font-size: 18px; font-weight: 800; color: var(--gold); line-height: 1.4; }
.btn.big { padding: 15px; font-size: 18px; margin-top: 12px; }
.mission .m-title { font-size: 18px; }
.mission .m-desc { margin: 2px 0 0; font-size: 13px; line-height: 1.35; }
.m-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.m-prog .bar { flex: 1; }
.m-prog span { font-size: 12px; font-weight: 900; color: var(--muted); white-space: nowrap; }
.subtabs { margin-bottom: 12px; }
.spd.on[data-v="0"] { background: #4b4690; color: #fff; box-shadow: none; }

/* ---------- v4: natural flow of time ---------- */
#dock { display: none !important; }
.timectl { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; }
.tbtn { width: 40px; height: 40px; border-radius: 50%; background: rgba(15,12,45,.72); border: 2px solid rgba(255,255,255,.25); font-size: 17px; color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); transition: transform .1s, background .15s; }
.tbtn:hover { transform: scale(1.08); background: rgba(15,12,45,.9); }
.tbtn.on { background: var(--gold); color: #3a1d00; border-color: #fff3b0; }
.daybar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.25); }
.daybar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(255,255,255,.35), #ffe08a); }
.pause-ov { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(15,12,45,.85); color: #fff; font-weight: 900; font-size: 16px; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--gold); z-index: 3; white-space: nowrap; }
.town.stopped .pause-ov { display: block; }
.town.stopped .town-svg { filter: saturate(.55) brightness(.8); }
.ticker { right: auto; }
.snow { animation: snowfall 6s linear infinite; }
@keyframes snowfall { from { transform: translate(0, -20px); } to { transform: translate(30px, 580px); } }
.leaf { animation: leaffall 8s ease-in-out infinite; }
@keyframes leaffall { 0% { transform: translate(0, -20px) rotate(0); } 50% { transform: translate(40px, 280px) rotate(180deg); } 100% { transform: translate(-10px, 580px) rotate(360deg); } }
.bird { animation: fly 22s linear infinite; }
@keyframes fly { from { transform: translateX(-120px); } to { transform: translateX(1100px); } }
@media (max-width: 900px) { .tbtn { width: 34px; height: 34px; font-size: 14px; } .timectl { top: 6px; right: 6px; } .pause-ov { font-size: 13px; padding: 9px 14px; } }

/* =================== v5: living room scene & dialogue =================== */
.scene-tabs { display: flex; gap: 6px; background: var(--bg2); border: 2px solid var(--line); border-radius: 16px; padding: 4px; align-self: flex-start; }
.scene-tabs button { padding: 8px 18px; border-radius: 12px; font-weight: 900; color: var(--muted); font-size: 15px; }
.scene-tabs button.on { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #3a1d00; box-shadow: 0 3px 0 #b45309; }

.room { padding: 0; overflow: hidden; position: relative; border-width: 3px; }
.room-svg { display: block; width: 100%; height: auto; }
.room .daytag { position: absolute; left: 12px; bottom: 14px; background: rgba(15,12,45,.78); color: #fff; font-weight: 900; font-size: 14px; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.room.shake { animation: shake .5s ease-in-out 2; }
@keyframes shake { 20% { transform: translateX(-6px) rotate(-.4deg); } 40% { transform: translateX(6px) rotate(.4deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.obj { cursor: pointer; }
.obj .oi { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .15s, filter .15s; }
.obj:hover .oi { transform: scale(1.03); filter: brightness(1.12) drop-shadow(0 0 10px rgba(255,214,102,.8)); }
.obj.dim .oi { filter: grayscale(.6) brightness(.85); }
[data-o="piggy"], [data-o="books"], [data-o="trophy"] { cursor: pointer; }
.lab { cursor: pointer; }
.olabel { opacity: .92; transition: opacity .2s; }
.room-svg.night .olabel { opacity: .8; }

#ham { transition: transform 1.25s ease-in-out, opacity .4s; }
#ham.gone { opacity: 0; }
#ham.walking #ham-inner { animation: hop .32s ease-in-out infinite alternate; }
@keyframes hop { to { transform: translateY(-8px); } }
.emote { animation: emote 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 30% 100%; }
@keyframes emote { 0% { transform: scale(0); } 12% { transform: scale(1.12); } 20%, 85% { transform: scale(1); } 100% { transform: scale(1); } }
.emote-p { animation: bob 1.6s ease-in-out infinite alternate; }

.room-svg.night .winlight { opacity: .9 !important; }
.winlight { transition: opacity 1s; }
#win-night, #room-night { transition: opacity 1s linear; }
.rain { animation: rain .55s linear infinite; }
@keyframes rain { from { transform: translate(0, 0); } to { transform: translate(-30px, 300px); } }
.bolt { animation: bolt 3.2s steps(1) infinite; opacity: 0; }
@keyframes bolt { 0%, 88%, 100% { opacity: 0; } 90%, 93% { opacity: 1; } }
.sparkle { animation: twinkle 1.6s ease-in-out infinite alternate; }
.sparkle.s2 { animation-delay: .8s; }
@keyframes twinkle { from { opacity: .2; transform: scale(.8); } to { opacity: 1; transform: scale(1.1); } }
.sway { animation: sway 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.coinfruit { animation: glint 2s ease-in-out infinite; }
@keyframes glint { 50% { filter: brightness(1.5); } }
.grow { animation: grow .8s cubic-bezier(.3,1.6,.5,1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes grow { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.chomp { animation: chomp 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes chomp { 50% { transform: scaleY(.9) rotate(-3deg); } }
.fire { animation: fire .4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fire { to { transform: scaleY(1.2) scaleX(.9); } }
.chandelier { animation: sway 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.pet { animation: wag 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wag { to { transform: rotate(5deg); } }
.kid { animation: hop .5s ease-in-out infinite alternate; }
.exitglow { animation: glow 2s ease-in-out infinite alternate; }
.screenline { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }

.tonight { text-align: left; width: 100%; cursor: pointer; }
.tonight:hover { border-color: var(--gold); }
.tn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tn { display: flex; align-items: center; gap: 6px; background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: 13px; font-weight: 800; }
.tn b { font-size: 20px; }

/* dialogue cards */
.modal.dialog { width: min(600px, 100%); }
.dlg { display: flex; gap: 14px; align-items: flex-start; }
.dlg-who { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; }
.dlg-port { animation: talk 1.4s ease-in-out infinite alternate; }
@keyframes talk { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
.dlg-name { font-size: 12px; font-weight: 900; text-align: center; color: var(--gold); line-height: 1.2; }
.dlg-bubble { position: relative; flex: 1; background: #fffdf5; color: #1f1c4d; border-radius: 20px; padding: 14px 16px; box-shadow: 0 5px 0 rgba(0,0,0,.25); border: 3px solid #1f1c4d; }
.dlg-bubble::before { content: ''; position: absolute; left: -16px; top: 36px; border: 10px solid transparent; border-right: 14px solid #1f1c4d; }
.dlg-bubble::after { content: ''; position: absolute; left: -10px; top: 38px; border: 8px solid transparent; border-right: 11px solid #fffdf5; }
.dlg-title { font-weight: 900; font-size: 17px; margin-bottom: 6px; }
.dlg-text { font-size: 15px; line-height: 1.5; }
.dlg-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 18px; }
.portrait { display: block; }
.modal.dialog .choice { background: linear-gradient(180deg, #3f3990, #322d79); }

@media (max-width: 900px) {
  .scene-tabs { align-self: stretch; }
  .scene-tabs button { flex: 1; padding: 7px 8px; }
  .room .daytag { font-size: 11px; padding: 4px 9px; bottom: 9px; left: 8px; }
  .dlg { flex-direction: column; align-items: center; }
  .dlg-who { flex-direction: row; width: auto; }
  .dlg-port svg { width: 64px; height: 64px; }
  .dlg-bubble::before, .dlg-bubble::after { display: none; }
  .dlg-name { font-size: 14px; text-align: left; }
}

.bulb { opacity: .35; transition: opacity 1s; }
.room-svg.night .bulb { opacity: 1; filter: drop-shadow(0 0 6px currentColor); animation: twinkle 1.4s ease-in-out infinite alternate; }
.town-grid { grid-template-columns: minmax(0, 2.3fr) minmax(270px, .9fr); }
@media (max-width: 900px) { .town-grid { grid-template-columns: minmax(0, 1fr); } }

.room-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.room-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .room-scroll .room-svg { width: 760px; max-width: none; } }

/* =================== v6: clarity – HUD money power, labelled bottom bar =================== */
.scene-tabs { display: none !important; }
.hud-stats.v5 { gap: 8px; }
.chip .sub { font-size: 11px; color: var(--muted); font-weight: 800; white-space: nowrap; }
.chip.power { min-width: 150px; }
.chip.power .vl { font-size: 18px; }
.chip.mood { gap: 10px; }
.chip.mood .mo { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 15px; }
.chip.mood .mo b { font-size: 18px; }

#app #dock.v5 { display: flex !important; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(23,21,59,.97); border-top: 2px solid var(--line); justify-content: center; grid-row: 3; z-index: 6; }
.nav5 { position: relative; flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); font-weight: 900; transition: transform .1s, border-color .15s, background .15s; min-width: 0; }
.nav5:hover { border-color: var(--gold); background: var(--card2); transform: translateY(-2px); }
.nav5 .ic { font-size: 26px; line-height: 1; }
.nav5 .lbl { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav5.locked { opacity: .55; }
.nav5.town { background: linear-gradient(180deg, #4c3bb0, #3b2f8f); }
.nav5 .nb { position: absolute; top: -8px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #3b1a00; font-style: normal; font-weight: 900; font-size: 15px; display: grid; place-items: center; border: 2px solid #3b1a00; animation: bang 1s ease-in-out infinite; }
.nav5 .nb.urgent { background: var(--red); color: #fff; }

.weekbar5 { display: flex; height: 44px; border-radius: 14px; overflow: hidden; gap: 3px; }
.weekbar5 i { display: flex; align-items: center; justify-content: center; min-width: 22px; font-style: normal; overflow: hidden; }
.weekbar5 i span { font-size: 13px; font-weight: 900; color: #10102a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.weekcard .weekbar5 { height: 34px; }
.weekcard .weekbar5 i span { font-size: 11px; }

.shape-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; flex-wrap: wrap; }
.shape-ic { font-size: 22px; }

@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: 1fr 1.5fr 1fr .9fr; }
  .chip.power { min-width: 0; }
  .chip.power .vl { font-size: 14px; }
  .chip .sub { font-size: 9px; }
  .chip.mood { flex-direction: column; gap: 0; padding: 3px 4px; }
  .chip.mood .mo { font-size: 12px; } .chip.mood .mo b { font-size: 14px; }
  #app #dock.v5 { gap: 3px; padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); }
  .nav5 { padding: 5px 1px; border-radius: 11px; }
  .nav5 .ic { font-size: 21px; }
  .nav5 .lbl { font-size: 10px; }
  .weekbar5 { height: 40px; }
  .weekbar5 i span { font-size: 11px; padding: 0 3px; }
}

.mission .m-top { flex-wrap: wrap; }
.mission .m-top .btn { margin-left: auto; }
.roomie { animation: bob 1.2s ease-in-out infinite alternate; }
.fly { animation: buzz 1s ease-in-out infinite alternate; }
@keyframes buzz { to { transform: translate(14px, -8px); } }
.drip circle { animation: drip 1.6s ease-in infinite; }
@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: .8fr 1.5fr 1.1fr .8fr; }
  .chip.fm .lb, .chip.month .lb { font-size: 8px; }
  .chip.fm .ic, .chip.month .ic, .chip.power .ic { display: none; }
  .chip.month .vl { font-size: 12px; }
}

/* ---------- vitals ---------- */
.vitals, .vitals-m { text-align: left; width: 100%; cursor: pointer; display: block; }
.vitals:hover, .vitals-m:hover { border-color: var(--gold); }
.vitals.warn { border-color: var(--red); box-shadow: 0 0 0 3px rgba(251,113,133,.2); }
.v-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.v-title { font-size: 17px; }
.vm { display: grid; grid-template-columns: 22px 78px minmax(0, 1fr) 46px; align-items: center; gap: 6px; margin: 5px 0; }
.vm-ic { font-size: 16px; text-align: center; }
.vm-lb { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-bar { position: relative; height: 10px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: visible; }
.vm-bar i { display: block; height: 100%; border-radius: 8px; transition: width .6s; }
.vm-bar b { position: absolute; top: -3px; width: 3px; height: 16px; background: #fff; border-radius: 2px; transform: translateX(-50%); opacity: .8; }
.vm-v { font-weight: 900; font-size: 14px; text-align: right; }
.vm-v.sm { font-size: 11px; }
.vm.bad .vm-lb, .vm.bad .vm-v { color: var(--red); }
.vm.bad { animation: pulseBad 1.4s ease-in-out infinite; }
@keyframes pulseBad { 50% { opacity: .65; } }
.wbar { background: linear-gradient(90deg, #f87171 0%, #fbbf24 18%, #34d399 32%, #34d399 62%, #fbbf24 74%, #f87171 90%); }
.wbar .okzone { display: none; }
.wbar .wdot { top: -4px !important; width: 12px !important; height: 18px !important; border-radius: 6px !important; background: #fff !important; border: 2px solid #1f1c4d; opacity: 1 !important; }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vc { background: rgba(251,113,133,.18); color: #ffd1d9; border: 1px solid rgba(251,113,133,.6); padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.vitals-m { padding: 8px 10px; }
.vitals-m .vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vitals-m .vm { grid-template-columns: 18px minmax(0, 54px) minmax(0, 1fr) 30px; margin: 3px 0; gap: 4px; }
.vitals-m .vm-lb { font-size: 10px; }
.vitals-m .vm-v { font-size: 12px; }
.vitals-m .vm-v.sm { font-size: 9px; }
.room.sad .room-svg { filter: saturate(.35) brightness(.82); transition: filter 1s; }

/* choice previews */
.choice > span:last-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fxp { display: flex; flex-wrap: wrap; gap: 4px; }
.fxp span { font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.09); white-space: nowrap; }
.fxp .u { color: #6ee7b7; background: rgba(52,211,153,.14); }
.fxp .d { color: #fda4af; background: rgba(251,113,133,.14); }
.fxp .n { color: #c7d2fe; }

/* wealth hub */
.wtabs { margin-bottom: 14px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.wtabs::-webkit-scrollbar { display: none; }
.wtabs button { white-space: nowrap; }
.wh-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(180deg, #3b2f7a, #2a2463); border: 2px solid var(--gold); border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.wh-big { font-size: 40px; font-weight: 900; line-height: 1.1; }
.wlab { text-transform: uppercase; font-weight: 800; letter-spacing: .05em; }
.wh-rows { display: flex; flex-direction: column; gap: 6px; }
.wh-row { display: grid; grid-template-columns: 30px minmax(110px, 190px) minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; text-align: left; transition: border-color .15s, transform .1s; }
.wh-row:hover { border-color: var(--gold); transform: translateX(3px); }
.wh-row.bad { border-color: rgba(251,113,133,.5); }
.wh-ic { font-size: 20px; }
.wh-nm { font-weight: 800; font-size: 14px; }
.wh-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.wh-bar i { display: block; height: 100%; border-radius: 6px; }
.wh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 700px) { .wh-big { font-size: 30px; } .wh-row { grid-template-columns: 26px minmax(0, 1fr) auto; } .wh-bar { display: none; } }

.xch-tools { margin-top: 18px; padding-top: 12px; border-top: 2px dashed var(--line); }
.xch-h { font-size: 16px; font-weight: 900; margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.nav5.big4 { max-width: 220px; padding: 10px 6px; }
.nav5.big4 .ic { font-size: 28px; }
.nav5.big4 .lbl { font-size: 14px; }
@media (max-width: 900px) { .nav5.big4 .ic { font-size: 24px; } .nav5.big4 .lbl { font-size: 12px; } }

/* day plan */
.plan { margin-bottom: 14px; }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.prow:last-child { border-bottom: 0; }
.prow.dim { opacity: .7; }
.pic { font-size: 26px; width: 38px; text-align: center; flex: 0 0 auto; }
.pmain { flex: 1; min-width: 0; }
.pt { font-weight: 900; font-size: 15px; }
.stp { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.stp b { font-size: 20px; min-width: 34px; text-align: center; }
.stp .btn { width: 38px; padding: 6px 0; font-size: 18px; }
.prow.free { background: rgba(52,211,153,.08); border-radius: 12px; padding: 10px; margin-top: 4px; border: 0; }
@media (max-width: 700px) { .prow { flex-wrap: wrap; } .stp, .prow .seg { margin-left: 50px; } }
@media (max-width: 700px) {
  .prow { align-items: flex-start; }
  .prow .pmain { flex: 1 1 calc(100% - 60px); }
  .stp, .prow .seg { margin-left: 50px; }
  .prow .pt { white-space: normal; }
}

/* free cash */
.chip.free { border-color: rgba(52,211,153,.6); background: linear-gradient(180deg, rgba(52,211,153,.14), var(--card)); min-width: 150px; }
.chip.free .vl { font-size: 21px; }
.chip.free .sub.pos { color: var(--green); } .chip.free .sub.neg { color: var(--red); }
.wh-tiles { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wh-tile { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.wh-tile.free { border-color: var(--green); background: linear-gradient(180deg, rgba(52,211,153,.16), var(--card)); }
.wh-tile .tl { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wh-tile .tv { font-size: 30px; font-weight: 900; line-height: 1.15; margin: 2px 0; }
.wh-tile .ts { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.wh-tile .ts.ok { color: #6ee7b7; margin-top: 4px; }
.free-banner { display: flex; flex-wrap: wrap; gap: 6px 18px; background: rgba(52,211,153,.12); border: 2px solid rgba(52,211,153,.5); border-radius: 12px; padding: 8px 14px; margin-bottom: 12px; font-size: 14px; font-weight: 800; }
.free-banner b { color: #6ee7b7; font-size: 16px; }
@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: .7fr 1.2fr 1.2fr .6fr; }
  .chip.free { min-width: 0; } .chip.free .vl { font-size: 15px; } .chip.free .ic { display: none; }
  .wh-tiles { grid-template-columns: 1fr 1fr; } .wh-tile.free { grid-column: 1 / 3; } .wh-tile .tv { font-size: 24px; }
}

/* allocation + percentages */
.wh-row { grid-template-columns: 30px minmax(110px, 190px) minmax(0, 1fr) 52px auto !important; }
.wh-pct { font-weight: 900; font-size: 13px; color: var(--gold); text-align: right; }
.wh-pct.neg { color: var(--red); }
.wh-total { display: grid; grid-template-columns: 1fr 52px auto; gap: 10px; margin: 8px 12px 0; padding-top: 8px; border-top: 2px solid var(--line); font-weight: 900; align-items: center; }
.alloc { margin-bottom: 14px; border-color: var(--gold); }
.al-bar { display: flex; height: 14px; border-radius: 10px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.al-row { display: grid; grid-template-columns: 10px 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.al-row.keep { opacity: .85; }
.al-dot { width: 10px; height: 10px; border-radius: 50%; }
.al-ic { font-size: 22px; text-align: center; }
.al-m b { font-size: 14px; }
.al-amt { text-align: right; display: flex; flex-direction: column; line-height: 1.15; }
.al-amt span { font-size: 11px; color: var(--gold); font-weight: 900; }
.al-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.12); }
@media (max-width: 700px) {
  .wh-row { grid-template-columns: 26px minmax(0, 1fr) 40px auto !important; }
  .wh-pct { font-size: 12px; }
  .al-row { grid-template-columns: 10px 26px minmax(0, 1fr) auto; }
  .al-row .btn { grid-column: 3 / 5; }
  .wh-total { grid-template-columns: 1fr 40px auto; }
}

/* overview v3 */
.wh-tiles { grid-template-columns: 1.35fr 1.15fr .9fr 1fr; }
.wh-tile.bad { border-color: rgba(251,113,133,.7); background: linear-gradient(180deg, rgba(251,113,133,.12), var(--card)); }
.wh-tile.good { border-color: rgba(52,211,153,.5); }
.tbtns { gap: 6px; margin-top: 8px; }
.cmp { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cmp-chart { flex: 0 0 auto; }
.cmp-leg { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.cmp-row { display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) 50px auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: transparent; text-align: left; border: 2px solid transparent; }
button.cmp-row:hover { border-color: var(--gold); background: var(--bg2); }
.cmp-row i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.cmp-ic { font-size: 18px; text-align: center; }
.cmp-nm { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-pct { color: var(--gold); text-align: right; font-size: 14px; }
.cmp-v { font-weight: 800; font-size: 13px; color: var(--muted); text-align: right; min-width: 64px; }
@media (max-width: 900px) {
  .wh-tiles { grid-template-columns: 1fr 1fr; }
  .wh-tile.free, .wh-tile.bad, .wh-tile.good { grid-column: 1 / 3; }
  .cmp-leg { min-width: 0; width: 100%; }
  .cmp-row { grid-template-columns: 12px 22px minmax(0, 1fr) 42px auto; gap: 6px; padding: 6px 4px; }
  .cmp-v { min-width: 0; }
}
/* sticky free cash strip in My money */
.free-banner { position: sticky; top: 0; z-index: 8; background: #2a2766; margin: 0 -2px 12px; box-shadow: 0 6px 14px rgba(10,8,30,.55); align-items: center; justify-content: space-between; }
.wh-tiles { grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 900px) { .wh-tiles { grid-template-columns: 1fr 1fr; } }

.cmp-chart { position: relative; }
.cmp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.cmp-center span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cmp-center b { font-size: 28px; line-height: 1.1; }
.cmp-row.bad .cmp-nm { color: #fda4af; }
.cmp-pct.neg, .cmp-v.neg { color: var(--red); }

.dring { display: block; }
.dfull { animation: pulseBad 1.4s ease-in-out infinite; }
.cmp-center em { font-style: normal; font-size: 11px; font-weight: 900; color: #fda4af; max-width: 120px; line-height: 1.2; margin-top: 3px; }
.cmp-row i.ol { background: transparent; border: 3px solid #ef4444; box-sizing: border-box; }
.cmp-nm small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; white-space: normal; }

/* informational top bar */
.chip.static { pointer-events: none; cursor: default; }
.chip.static:hover { transform: none; border-color: var(--line); }
.chip.free.static:hover { border-color: rgba(52,211,153,.6); }
.nav5.big4 { max-width: 260px; }
/* top bar: free cash + cashflow */
.chip.free { min-width: 190px; }
.chip.free .vl { font-size: 24px; }
.chip.free .sub { font-size: 13px; font-weight: 900; text-transform: none; }
@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: .75fr 1.7fr .55fr; }
  .chip.free .vl { font-size: 19px; }
  .chip.free .sub { font-size: 11px; }
}

.cmpn { color: var(--muted); }
.prop .kv .v b.pos { color: var(--green); } .prop .kv .v b.neg { color: var(--red); }
/* whole-day donut */
.dayc { text-align: left; width: 100%; cursor: pointer; display: block; }
.dayc:hover { border-color: var(--gold); }
.dy { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dy-chart { position: relative; flex: 0 0 auto; }
.dy-chart .cmp-center b { font-size: 22px; }
.dy-leg { flex: 1; min-width: 190px; }
.dy-h { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 6px 0 2px; }
.dy-row { display: grid; grid-template-columns: 10px 22px minmax(0, 1fr) auto 38px; gap: 6px; align-items: center; padding: 2px 0; font-size: 13px; }
.dy-row i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dy-ic { text-align: center; }
.dy-nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-pct { color: var(--gold); font-weight: 900; font-size: 12px; text-align: right; }
/* compact goal strip */
.goal { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #3b2f7a, #2a2463); border: 2px solid var(--gold); border-radius: 16px; padding: 8px 12px; min-width: 0; }
.goal.done { justify-content: center; }
.g-ic { font-size: 24px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,194,61,.15); display: grid; place-items: center; flex: 0 0 auto; }
.g-main { flex: 1; min-width: 0; }
.g-row { display: flex; align-items: baseline; gap: 8px; }
.g-t { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-n { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--gold); white-space: nowrap; }
.g-d { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 4px; }
.g-bar { display: flex; align-items: center; gap: 8px; }
.g-bar .bar { flex: 1; height: 7px; }
.g-bar span { font-size: 11px; font-weight: 900; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .g-d { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .goal { padding: 7px 10px; gap: 10px; } .g-ic { width: 34px; height: 34px; font-size: 20px; } }

/* title screen: buttons first, picture shrinks with the window */
.screen { padding-top: 14px; }
.title-wrap { gap: 12px; margin: 0 auto; }
.logo .w1 { font-size: clamp(34px, min(8vw, 11vh), 72px); }
.logo .w2 { margin-top: 8px; font-size: clamp(13px, 2.2vh, 18px); }
.menu { gap: 8px; }
.menu .btn { padding: clamp(9px, 1.8vh, 15px); font-size: clamp(15px, 2.4vh, 18px); }
.title-scene { width: min(560px, 100%, calc(32vh * 1.78)); flex: 0 1 auto; }
@media (max-height: 640px) { .logo .w1 br { display: none; } .title-scene { width: min(420px, 100%, calc(24vh * 1.78)); } }
@media (max-height: 480px) { .title-scene { display: none; } }

/* ---------- header goal ---------- */
#hud { flex-wrap: wrap; row-gap: 6px; }
.hud-goal { order: 30; flex: 1 0 100%; display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #3b2f7a, #2a2463); border: 2px solid var(--gold); border-radius: 12px; padding: 4px 10px; min-width: 0; }
.hud-goal .g-ic { width: 30px; height: 30px; font-size: 18px; border-radius: 9px; }
.hud-goal .g-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.hud-goal .g-t { font-size: 14px; }
.hud-goal .g-d { color: var(--muted); font-weight: 600; }
.hud-goal .g-prog { display: flex; align-items: center; gap: 8px; flex: 0 0 220px; }
.hud-goal .g-prog .bar { flex: 1; height: 7px; }
.hud-goal .g-prog span { font-size: 11px; font-weight: 900; color: var(--muted); white-space: nowrap; }
.hud-goal .g-n { font-size: 11px; font-weight: 900; color: var(--gold); white-space: nowrap; }
.hud-goal .btn { padding: 4px 10px; }
@media (max-width: 900px) {
  .hud-goal { flex-wrap: wrap; row-gap: 3px; padding: 4px 8px; }
  .hud-goal .g-txt { flex: 1 1 calc(100% - 120px); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; }
  .hud-goal .g-prog { flex: 1 1 100%; order: 5; }
  .hud-goal .g-n { display: none; }
}
/* ---------- compact layout: room scales with window height, news under it ---------- */
.town-grid { grid-template-columns: minmax(0, calc(54vh * 1.765)) minmax(290px, 1fr); justify-content: center; }
.town-grid .tg-main { max-width: 100%; }
.newsstrip { display: flex; flex-direction: column; gap: 4px; }
.newsstrip .nl { display: flex; gap: 8px; align-items: center; background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 5px 10px; font-size: 13px; border-left-width: 5px; min-width: 0; }
.newsstrip .nl.good { border-left-color: var(--green); } .newsstrip .nl.bad { border-left-color: var(--red); } .newsstrip .nl.headline { border-left-color: var(--blue); font-style: italic; }
.newsstrip .nl:not(.new) { opacity: .7; }
.newsstrip .nt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dy-chart .cmp-center em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
@media (max-width: 760px) { .town-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 900px) { .town-grid { grid-template-columns: minmax(0, calc(54vh * 1.765)) minmax(250px, 1fr); } .only-desktop { display: block !important; } .only-mobile { display: none !important; } }

/* mood / stress meters in the header */
.chip.mood { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; min-width: 150px; padding: 6px 10px; }
.chip.mood .mrow { display: grid; grid-template-columns: 20px 46px minmax(40px, 1fr) 24px; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; }
.chip.mood .mi { font-size: 15px; text-align: center; }
.chip.mood .ml { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.chip.mood .mbar { height: 7px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.chip.mood .mbar i { display: block; height: 100%; border-radius: 6px; transition: width .6s; }
.chip.mood b { text-align: right; font-size: 13px; }
.chip.mood .mrow.bad b, .chip.mood .mrow.bad .ml { color: var(--red); }
@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: .62fr 1.25fr 1.1fr; }
  .chip.mood { min-width: 0; padding: 4px 6px; gap: 3px; }
  .chip.mood .mrow { grid-template-columns: 14px 32px minmax(18px, 1fr) 20px; gap: 3px; font-size: 11px; }
  .chip.mood .mi { font-size: 12px; } .chip.mood .ml { font-size: 8px; } .chip.mood b { font-size: 11px; }
}
@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: .72fr 1.1fr 1.18fr; gap: 5px; }
  .chip.mood { overflow: hidden; padding: 4px 6px; }
  .chip.mood .mrow { grid-template-columns: 13px 31px minmax(12px, 1fr) 17px; gap: 3px; }
  .chip.fm { padding: 4px 6px; }
  .chip.fm .lb { font-size: 8px; letter-spacing: 0; }
}
@media (max-width: 900px) {
  .hud-stats.v5 { grid-template-columns: .66fr 1.02fr 1.32fr; }
  .chip.free .vl { font-size: 17px; }
}

/* ---------- goal inside the header row ---------- */
.hud-goal { padding: 3px 8px; gap: 10px; }
.hg-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hg-r1 { display: flex; align-items: baseline; gap: 8px; }
.hg-r1 .g-t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-d { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-bar { display: flex; align-items: center; gap: 8px; }
.hg-bar .bar { flex: 1; height: 6px; }
.hg-bar span { font-size: 11px; font-weight: 900; color: var(--muted); white-space: nowrap; }
.hud-goal .g-ic { width: 32px; height: 32px; flex: 0 0 auto; }
@media (min-width: 1000px) {
  #hud { flex-wrap: nowrap; }
  .hud-title { order: 1; margin-left: 120px; flex: 0 0 auto; }
  .hud-goal { order: 2; flex: 1 1 0; min-width: 240px; max-width: 640px; margin: 0 auto; }
  .hud-stats.v5 { order: 3; margin-left: 0; }
  #hud > .iconbtn, #hud-in > .iconbtn { order: 4; }
}
@media (min-width: 1000px) and (max-width: 1180px) { .hg-d { display: none; } }
@media (max-width: 999px) {
  .hud-goal { order: 30; flex: 1 0 100%; }
  .hg-d { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hud-stats.v5 { grid-template-columns: .7fr 1.3fr; }
}