:root {
  --ink:#151923; --navy:#101521; --navy-2:#1d2534; --paper:#f5f2eb; --cream:#fffdf8;
  --muted:#777777; --line:#dfd9ce; --gold:#d69d3d; --gold-light:#f4d896; --orange:#e86c47;
  --green:#5ba684; --blue:#6c9bc8; --red:#c65858; --shadow:0 14px 34px rgba(27,29,34,.12);
}
[hidden] { display:none !important; }
.setup-screen { min-height:100vh; background:#101521; color:#fff9ed; padding:32px 18px; }
.setup-card { max-width:720px; margin:auto; }
.setup-card h1 { font:700 clamp(32px,6vw,48px) "Playfair Display",serif; line-height:1.13; margin:12px 0; }
.setup-intro { font-size:16px; color:#bdc7d5; }
.setup-names { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0; }
.setup-names label { font-size:14px; color:#e4d7ba; }
.setup-names input { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #657185; border-radius:7px; background:#202b3e; color:white; font:inherit; }
.setup-card fieldset { border:0; padding:0; margin:24px 0; }
.setup-card legend { font:700 22px "Playfair Display",serif; margin-bottom:12px; }
.setup-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.setup-option { display:flex; align-items:flex-start; gap:10px; padding:16px; background:#1d283b; border:1px solid #45536a; border-radius:10px; cursor:pointer; }
.setup-option:has(input:checked) { border-color:#e9b75f; background:#303344; box-shadow:0 0 0 1px #e9b75f; }
.setup-option input { accent-color:#e9b75f; margin-top:5px; }
.setup-option strong,.setup-option small,.setup-option b { display:block; }
.setup-option strong { font-size:17px; margin-bottom:8px; }
.setup-option small { font-size:14px; line-height:1.5; color:#c0cbdc; }
.setup-option b { font-size:14px; line-height:1.4; margin-top:9px; font-weight:500; }
.benefit { color:#a9e0be; }.drawback { color:#ffb8a1; }
.setup-summary { border-left:3px solid #e9b75f; padding:16px; background:#222d40; font-size:16px; line-height:1.6; }
#setupNotice { color:#bec9d9; font-size:14px; line-height:1.5; }
.setup-actions { display:flex; gap:12px; padding:16px 0; }.setup-actions button { padding:15px; border-radius:8px; font-size:16px; flex:1; }
.brand strong { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#founderSummary { margin-bottom:16px; line-height:1.6; }
@media(max-width:500px) { .setup-names,.setup-options { grid-template-columns:1fr; } .setup-actions { flex-direction:column; } }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100vh; background:#d9d8d2; color:var(--ink); font-family:"DM Sans",system-ui,sans-serif; }
button { font:inherit; border:0; cursor:pointer; color:inherit; }
.app-shell { width:100%; max-width:590px; min-height:100vh; margin:auto; background:var(--paper); padding-bottom:82px; position:relative; overflow:hidden; }
.topbar { height:76px; padding:12px 17px; background:var(--navy); color:white; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:11px; box-shadow:0 2px 10px rgba(0,0,0,.22); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:8px; min-width:0; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-light); font-family:"Playfair Display",serif; font-size:19px; }
.brand strong { display:block; font-family:"Playfair Display",serif; font-size:15px; line-height:15px; letter-spacing:.15px; }.brand span { color:#a6adba; font:500 7px "DM Mono",monospace; letter-spacing:2px; }
.date-card { background:#263147; border:1px solid #41506c; color:white; border-radius:7px; min-width:82px; height:51px; position:relative; line-height:1; padding:7px 17px 7px 11px; text-align:left; }.date-card span { display:block; font:500 9px "DM Mono",monospace; color:#aebbd4; letter-spacing:1px; }.date-card strong { display:block; font-size:16px; margin-top:3px; }.date-card i { position:absolute; right:8px; top:17px; color:var(--gold-light); font-size:21px; font-style:normal; }
.cash { text-align:right; min-width:0; }.cash small { display:block; color:#a6adba; font:500 8px "DM Mono",monospace; letter-spacing:.7px; }.cash strong { display:block; color:var(--gold-light); font:600 16px "DM Mono",monospace; margin-top:4px; white-space:nowrap; }
.main-view { min-height:calc(100vh - 158px); }.screen { display:none; padding:20px 16px; animation:enter .25s ease both; }.screen.active { display:block; }.screen#studioScreen { padding-bottom:10px; }.studio-header,.page-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:15px; }.eyebrow { color:#898277; font:500 10px "DM Mono",monospace; letter-spacing:1.25px; margin:0 0 5px; }.studio-header h1,.page-header h1 { margin:0; font:700 27px "Playfair Display",serif; letter-spacing:-.7px; }.round-button { height:33px; width:33px; display:grid; place-items:center; background:#e9e5dd; color:#766f66; border-radius:50%; font-weight:700; }
.status-strip { background:var(--cream); border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:1fr 1.1fr 1fr; overflow:hidden; box-shadow:0 2px 8px rgba(40,33,21,.04); }.status-strip>div { padding:11px 10px; border-right:1px solid var(--line); min-width:0; }.status-strip>div:last-child { border:0; }.status-strip span { display:block; color:#8d877d; font:500 8px "DM Mono",monospace; letter-spacing:.5px; white-space:nowrap; }.status-strip strong { display:block; margin-top:5px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.status-strip strong em { font:400 10px "DM Mono",monospace; color:#a8a197; }
.map-wrap { position:relative; margin:17px -16px 14px; height:min(52vh,410px); min-height:342px; overflow:hidden; background:linear-gradient(135deg,#9cc998,#83b584); border-top:1px solid #70a572; border-bottom:1px solid #70a572; }.map-wrap:before { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(30deg,#fff 12%,transparent 12.5%,transparent 87%,#fff 87.5%,#fff),linear-gradient(150deg,#fff 12%,transparent 12.5%,transparent 87%,#fff 87.5%,#fff); background-size:42px 72px; background-position:0 0,0 0; }.map { width:420px; height:420px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(53deg) rotateZ(45deg) scale(1.05); transform-style:preserve-3d; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:5px; transition:transform .2s ease; }.tile { position:relative; border:1px solid rgba(32,83,52,.22); background:rgba(82,161,82,.2); min-width:0; }.tile.owned { background:#abc985; border-color:#71975f; }.tile.owned:after { content:""; position:absolute; inset:5px; border:1px dashed rgba(66,105,56,.4); }.tile.buildable { outline:3px solid var(--gold); outline-offset:-4px; box-shadow:inset 0 0 26px rgba(245,202,87,.5); }.tile.land-select { outline:3px solid #ffffff; outline-offset:-4px; }.tile.locked { background:rgba(26,101,60,.13); }.tile>button { inset:0; position:absolute; width:100%; height:100%; background:transparent; z-index:3; }.plot-price { position:absolute; z-index:4; background:#244837; color:#eaf6d4; font:500 8px "DM Mono",monospace; padding:2px 4px; border-radius:3px; right:3px; bottom:3px; transform:rotate(-45deg); pointer-events:none; }
.building { position:absolute; z-index:2; inset:14%; transform:translateZ(25px); border:2px solid rgba(255,255,255,.45); border-radius:3px; box-shadow:-8px 10px 0 rgba(15,55,43,.25), inset 0 -12px rgba(0,0,0,.1); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff9e8; text-shadow:0 1px 2px rgba(0,0,0,.4); font-size:8px; font-weight:700; line-height:1.1; padding:3px; pointer-events:none; }.building.office { background:#c57655; }.building.stage { background:#536d91; }.building.workshop { background:#a88245; }.building.costume { background:#91708e; }.building.editing { background:#668c84; }.building.large-stage { background:#384f7b; }.building.backlot { background:#9b6b4c; }.building.rotated { transform:translateZ(25px) rotate(90deg); }
.map-hint { position:absolute; bottom:11px; left:50%; transform:translateX(-50%); background:rgba(16,21,33,.81); color:#fff; padding:7px 11px; border-radius:20px; font-size:11px; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.18); }
.build-dock { display:flex; gap:9px; align-items:stretch; overflow:hidden; }.land-action { flex:0 0 73px; background:var(--navy); color:#fff; border-radius:8px; font-size:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; }.land-action span { color:var(--gold-light); font-size:18px; line-height:14px; }.land-action.active { background:var(--green); box-shadow:0 0 0 3px #b8dcb5; }.build-list { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; }.build-list::-webkit-scrollbar,.talent-scroll::-webkit-scrollbar { display:none; }.build-option { flex:0 0 94px; min-height:58px; border-radius:8px; background:var(--cream); border:1px solid var(--line); padding:7px; text-align:left; }.build-option strong,.build-option small { display:block; }.build-option strong { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.build-option small { color:#8c867c; font:500 9px "DM Mono",monospace; margin-top:5px; }.build-option.selected { border:2px solid var(--gold); background:#fffbf1; }
.primary-button { padding:10px 13px; color:#fff; background:var(--orange); border-radius:7px; font-size:12px; font-weight:700; box-shadow:0 4px 10px rgba(206,79,41,.2); }.section-title { display:flex; align-items:baseline; justify-content:space-between; margin:24px 1px 11px; }.section-title h2 { font:700 19px "Playfair Display",serif; margin:0; }.section-title>span { color:#948d83; font:500 10px "DM Mono",monospace; }.text-button { color:#bb6843; background:transparent; font-size:11px; font-weight:700; padding:0; }
.film-summary { min-height:92px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--navy); padding:1px; border-radius:10px; overflow:hidden; }.film-summary>div { padding:15px 12px; background:#1d2637; color:#fff; }.film-summary span { display:block; color:#a9b4c7; font:500 9px "DM Mono",monospace; letter-spacing:.6px; }.film-summary strong { margin-top:9px; display:block; font:600 20px "DM Mono",monospace; color:var(--gold-light); }.film-summary .summary-note { grid-column:1/-1; background:#293448; padding:8px 12px; color:#d9e1ea; font-size:11px; }.card-list { display:flex; flex-direction:column; gap:9px; }.empty-state { text-align:center; background:var(--cream); border:1px dashed #cfc8bc; color:#8e887e; border-radius:10px; padding:29px 18px; font-size:12px; line-height:1.5; }.film-card { display:grid; grid-template-columns:53px 1fr auto; gap:11px; align-items:center; padding:10px; background:var(--cream); border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 8px rgba(40,33,21,.035); }.poster { width:53px; height:67px; display:flex; justify-content:center; align-items:center; padding:4px; text-align:center; color:#fff5d2; font:700 10px "Playfair Display",serif; background:linear-gradient(150deg,#324265,#b65348); box-shadow:inset 0 0 0 2px rgba(255,255,255,.15); }.poster.western { background:linear-gradient(150deg,#ae7047,#4a3930); }.poster.comedy { background:linear-gradient(150deg,#e4943a,#9b4460); }.poster.drama { background:linear-gradient(150deg,#384a62,#7a5865); }.film-info { min-width:0; }.film-info h3 { font:700 15px "Playfair Display",serif; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.film-info p { color:#8d867c; font-size:10px; margin:0 0 8px; }.progress-line { height:5px; background:#e5e0d7; border-radius:8px; overflow:hidden; }.progress-line i { display:block; height:100%; background:var(--green); border-radius:8px; }.film-action { align-self:end; background:var(--navy); color:#fff; padding:7px 8px; border-radius:5px; font-size:10px; font-weight:700; white-space:nowrap; }.film-action.release { background:var(--orange); }.film-action.disabled { background:#e2ded6; color:#9b9489; cursor:not-allowed; }.compact .film-card { grid-template-columns:41px 1fr auto; padding:8px; }.compact .poster { height:51px; width:41px; font-size:8px; }.result-number { font:600 12px "DM Mono",monospace; color:var(--green); }.result-number.loss { color:var(--red); }
.market-card { border-radius:11px; background:var(--navy); padding:17px; color:#fff; box-shadow:var(--shadow); }.market-chart-head { display:flex; justify-content:space-between; align-items:center; }.market-chart-head span { color:#abb8c8; font:500 9px "DM Mono",monospace; letter-spacing:.7px; }.market-chart-head strong { display:block; color:var(--gold-light); font:700 31px "Playfair Display",serif; margin-top:2px; }.market-chart-head .trend { color:#9cd7b7; font-size:10px; }.bar-chart { display:flex; align-items:end; gap:7px; height:70px; margin-top:10px; padding-top:8px; border-bottom:1px solid #46536b; }.bar { flex:1; background:#596b89; min-height:4px; position:relative; border-radius:3px 3px 0 0; }.bar.you { background:var(--gold); }.bar i { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); color:#a8b1c1; font:500 7px "DM Mono",monospace; font-style:normal; }
.finance-warning { background:#7b2832; color:#fff; border-color:#9d4450; }
.poster { flex-direction:column; gap:3px; background:linear-gradient(145deg,var(--poster-primary,#324265),var(--poster-accent,#b65348)); overflow:hidden; position:relative; }
.poster::after { content:""; position:absolute; inset:0; background:linear-gradient(25deg,transparent 45%,rgba(255,255,255,.18) 46%,transparent 51%); }
.poster b { font:700 20px "Playfair Display",serif; line-height:1; position:relative; z-index:1; }.poster span { font-size:7px; line-height:1.05; text-transform:uppercase; position:relative; z-index:1; }
.ip-actions { display:flex; gap:5px; margin:5px 0 7px; }.ip-actions button { padding:4px 6px; border-radius:4px; background:#9b693c; color:#fff; font-size:8px; font-weight:700; }
.leaderboard { background:var(--cream); border:1px solid var(--line); border-radius:10px; overflow:hidden; }.leader-row { display:grid; grid-template-columns:22px 1fr 45px; align-items:center; gap:7px; padding:11px; border-bottom:1px solid var(--line); font-size:12px; }.leader-row:last-child { border-bottom:0; }.leader-row .rank { color:#9d968c; font:500 11px "DM Mono",monospace; }.leader-row strong { font-size:12px; }.leader-row.you { background:#fff5df; }.leader-row.you strong { color:#9d5c24; }.leader-row b { text-align:right; font:500 11px "DM Mono",monospace; }.talent-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; }.talent-card { flex:0 0 137px; padding:11px; background:var(--cream); border:1px solid var(--line); border-radius:9px; }.talent-card .portrait { height:43px; width:43px; border-radius:50%; background:linear-gradient(135deg,#e6bd81,#a76355); display:grid; place-items:center; color:#fff; font:700 17px "Playfair Display",serif; margin-bottom:8px; }.talent-card strong { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.talent-card small { color:#938c81; font-size:9px; }.talent-card span { display:block; color:#ad6d38; margin-top:5px; font:500 10px "DM Mono",monospace; }
.more-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.more-card { min-height:116px; background:var(--cream); border:1px solid var(--line); border-radius:11px; padding:13px; text-align:left; box-shadow:0 2px 7px rgba(40,33,21,.03); }.more-card span,.more-card strong,.more-card small { display:block; }.more-icon { color:#bb7140; font:500 25px "Playfair Display",serif; height:34px; }.more-card strong { font:700 16px "Playfair Display",serif; }.more-card small { color:#8e877d; margin-top:4px; font-size:10px; }.timeline-card { margin-top:21px; border-radius:11px; padding:15px; color:#f8f3e8; background:linear-gradient(115deg,#25304a,#776046); display:flex; gap:16px; align-items:center; }.timeline-card h2 { font:700 18px "Playfair Display",serif; margin:0 0 5px; }.timeline-card p:not(.eyebrow) { font-size:11px; color:#d8d8d1; line-height:1.4; margin:0; }.timeline-card .eyebrow { color:#c8bdad; }.timeline-year { font:700 23px "DM Mono",monospace; color:var(--gold-light); }.danger-button { background:transparent; color:#a15a58; font-size:11px; font-weight:700; margin-top:25px; padding:5px 0; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,590px); height:82px; background:#fffdf9; border-top:1px solid var(--line); z-index:8; display:grid; grid-template-columns:repeat(4,1fr); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); }.nav-item { color:#827c73; background:transparent; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; font-size:10px; }.nav-item span { font-size:19px; line-height:17px; }.nav-item.active { color:#b8653c; font-weight:700; }.nav-item.active span { color:#d47d47; }
.modal-backdrop { position:fixed; z-index:20; inset:0; background:rgba(10,14,21,.6); display:flex; align-items:flex-end; justify-content:center; transition:opacity .2s; }.modal-backdrop.hidden { opacity:0; pointer-events:none; }.modal { width:min(100%,590px); max-height:90vh; overflow:auto; background:#f7f4ee; border-radius:18px 18px 0 0; padding:18px 17px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.22); animation:sheet .25s ease both; }.modal-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.modal h2 { margin:0; font:700 24px "Playfair Display",serif; }.modal h3 { font:700 17px "Playfair Display",serif; margin:17px 0 8px; }.modal-copy { color:#716b63; font-size:12px; line-height:1.55; margin:5px 0 0; }.close-button { width:30px; height:30px; border-radius:50%; background:#e7e2da; color:#6f685f; font-size:20px; }.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.choice { padding:11px; background:#fffdf8; border:1px solid var(--line); border-radius:8px; text-align:left; }.choice strong,.choice small { display:block; }.choice strong { font-size:12px; }.choice small { color:#8e877e; font-size:10px; margin-top:4px; }.choice.selected { border:2px solid var(--orange); background:#fff5ea; }.person-row { display:grid; grid-template-columns:37px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }.person-row:last-child { border-bottom:0; }.mini-portrait { width:37px; height:37px; border-radius:50%; display:grid; place-items:center; color:white; background:linear-gradient(135deg,#e5b67b,#90604e); font:700 14px "Playfair Display",serif; }.person-row strong { font-size:12px; }.person-row small { display:block; color:#8b8479; font-size:10px; margin-top:2px; }.hire-button { background:var(--navy); color:#fff; border-radius:5px; padding:6px 8px; font-size:10px; font-weight:700; }.hire-button.hired { background:#e3e0da; color:#888177; }.form-label { display:block; color:#7e786f; font:500 9px "DM Mono",monospace; letter-spacing:.6px; margin:16px 0 6px; }.title-input { width:100%; border:1px solid var(--line); border-radius:7px; background:#fffdf8; padding:11px; font:600 15px "Playfair Display",serif; outline:none; }.budget-slider { width:100%; accent-color:var(--orange); }.range-output { float:right; color:#ab603a; font:500 11px "DM Mono",monospace; }.info-panel { background:#ece8de; padding:10px; border-radius:7px; color:#6f685e; font-size:11px; line-height:1.45; }.modal-footer { display:flex; gap:9px; margin-top:19px; }.modal-footer button { flex:1; padding:12px; border-radius:7px; font-weight:700; font-size:12px; }.secondary-button { background:#e5e1d9; color:#686158; }.confirm-button { background:var(--orange); color:white; }.research-row { background:#fffdf8; border:1px solid var(--line); border-radius:9px; padding:11px; margin-top:8px; }.research-row.locked { opacity:.55; }.research-row .research-head { display:flex; justify-content:space-between; gap:9px; }.research-row strong { font-size:13px; }.research-row p { color:#827b71; font-size:10px; line-height:1.4; margin:4px 0 7px; }.research-row button { background:var(--navy); color:#fff; padding:6px 8px; border-radius:5px; font-size:10px; font-weight:700; }.research-row .complete { color:#4e9a73; font:600 10px "DM Mono",monospace; }.finance-stat { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.finance-stat>div { border:1px solid var(--line); background:#fffdf8; border-radius:8px; padding:11px; }.finance-stat span,.finance-stat strong { display:block; }.finance-stat span { color:#867f74; font:500 9px "DM Mono",monospace; }.finance-stat strong { margin-top:5px; font:600 17px "DM Mono",monospace; }.event-log { list-style:none; padding:0; margin:8px 0 0; }.event-log li { border-left:2px solid #d7a450; padding:3px 0 3px 9px; color:#716a60; font-size:11px; line-height:1.4; margin-bottom:7px; }.release-result { text-align:center; padding:4px 0; }.result-score { font:700 48px "Playfair Display",serif; color:var(--gold); line-height:1; }.release-result p { font-size:12px; color:#746d64; }.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:15px; text-align:left; }.result-grid div { background:#ece7dc; padding:9px; border-radius:7px; }.result-grid span,.result-grid strong { display:block; }.result-grid span { font:500 8px "DM Mono",monospace; color:#8d8579; }.result-grid strong { font:600 14px "DM Mono",monospace; margin-top:4px; }.toast { position:fixed; z-index:50; left:50%; bottom:94px; transform:translate(-50%,20px); max-width:calc(100% - 40px); background:#202938; color:#fff; padding:10px 14px; border-radius:7px; opacity:0; pointer-events:none; font-size:11px; box-shadow:0 5px 20px rgba(0,0,0,.24); transition:.25s; text-align:center; }.toast.show { opacity:1; transform:translate(-50%,0); }
.people-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }.people-tabs::-webkit-scrollbar { display:none; }.people-tabs-primary { margin-top:14px; }.people-tabs-roles { margin-top:8px; padding-bottom:5px; }.people-tab { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:8px 11px; background:#fffdf8; color:#766f65; font-size:10px; font-weight:700; white-space:nowrap; }.people-tabs-primary .people-tab { flex:1; font-size:11px; }.people-tab span { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:4px; border-radius:999px; background:#e8e3da; font:600 9px "DM Mono",monospace; }.people-tab.selected { border-color:var(--orange); background:#fff1e4; color:#a5522d; }.people-tab.selected span { background:var(--orange); color:#fff; }.people-section-head { display:flex; justify-content:space-between; align-items:baseline; margin-top:4px; }.people-section-head small { color:#91897e; font:500 9px "DM Mono",monospace; }
@keyframes enter { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} } @keyframes sheet { from{transform:translateY(30px)} to{transform:translateY(0)} }
@media (min-width:700px) { body { padding:12px; } .app-shell { min-height:calc(100vh - 24px); border-radius:16px; box-shadow:0 20px 60px rgba(20,20,20,.18); } .bottom-nav { bottom:12px; border-radius:0 0 16px 16px; } .modal { border-radius:18px; margin-bottom:30px; } .map-wrap { height:390px; } }

/* Direct mobile controls for a compact studio map. */
#studioMap { --map-zoom:1.05; --map-x:0px; --map-y:0px; }
.map { transform:translate(calc(-50% + var(--map-x)),calc(-50% + var(--map-y))) rotateX(53deg) rotateZ(45deg) scale(var(--map-zoom)) !important; touch-action:none; }
.map-controls { position:absolute; top:10px; right:11px; z-index:5; display:flex; flex-direction:column; overflow:hidden; border-radius:7px; box-shadow:0 3px 11px rgba(0,0,0,.2); }
.map-controls button { height:27px; width:29px; background:rgba(255,255,255,.91); color:#47604a; font-size:19px; line-height:1; border-bottom:1px solid #b5c7ae; }
.map-controls button:last-child { border-bottom:0; }
.rotate-action { flex:0 0 52px; background:var(--navy); color:#fff; border-radius:8px; font-size:9px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; }
.rotate-action span { color:var(--gold-light); font-size:18px; line-height:14px; }
.rotate-action.active { background:var(--green); box-shadow:0 0 0 3px #b8dcb5; }

/* Primary monthly progress keeps the main loop one tap away. */
.topbar { grid-template-columns:minmax(0,1fr) auto auto auto; gap:8px; }
.date-card { min-width:66px; padding-right:9px; }
.date-card i { right:6px; top:19px; font-size:10px; letter-spacing:0; }
.progress-button { height:51px; min-width:47px; padding:4px 6px; background:var(--orange); color:#fff; border-radius:7px; display:flex; flex-direction:column; justify-content:center; align-items:center; line-height:1; box-shadow:0 3px 9px rgba(213,88,48,.25); }
.progress-button span { font:700 15px "DM Mono",monospace; }.progress-button small { margin-top:4px; font:500 7px "DM Mono",monospace; letter-spacing:.4px; }
.film-actions { display:flex; gap:6px; align-items:center; }.secondary-header-button { padding:9px 8px; color:#aa623e; background:#fff9ed; border:1px solid #d8b476; border-radius:7px; font-size:11px; font-weight:700; }.secondary-header-button:disabled { color:#a39c91; background:#ebe7df; border-color:#d9d3c9; }
.series-section:empty { display:none; }.series-section { margin-top:16px; }.series-card { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:10px; background:#edf1f4; border:1px solid #cbd5db; border-radius:10px; }.series-badge { width:42px; height:42px; border-radius:6px; display:grid; place-items:center; background:#3f6070; color:#e6e7de; font:700 14px "Playfair Display",serif; }.series-card h3 { margin:0 0 3px; font:700 15px "Playfair Display",serif; }.series-card p { margin:0; color:#6f7f83; font-size:10px; }.series-income { text-align:right; color:#4e9071; font:600 11px "DM Mono",monospace; }.series-income span { display:block; color:#7e898b; font-size:8px; margin-top:3px; }
.leader-row strong small { display:block; color:#938b7f; font-size:9px; font-weight:400; margin-top:2px; }
.building.tv { background:#5b7f86; }.building.vfx { background:#75588e; }.building.streaming { background:#49667f; }.building.virtual { background:#605a87; }.building.set { background:#94694b; }.building.research { background:linear-gradient(145deg,#456b69,#263f52); }

/* Research facilities turn an adjustable monthly budget into technology progress. */
.rd-dashboard { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:13px; }
.rd-dashboard>div { min-width:0; background:#233047; color:#fff; border-radius:8px; padding:9px; }
.rd-dashboard span,.rd-dashboard strong { display:block; }
.rd-dashboard span { color:#aeb9c8; font:500 7px "DM Mono",monospace; letter-spacing:.35px; }
.rd-dashboard strong { color:var(--gold-light); margin-top:5px; font:600 12px "DM Mono",monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.research-actions { display:flex; gap:7px; margin-top:8px; }
.research-row button:disabled { background:#d8d4cc; color:#918a80; cursor:not-allowed; }
.research-row .license-button { background:#9b693c; }
.research-row .progress-line { margin:8px 0 6px; }
.license-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fffdf8; border:1px solid var(--line); border-radius:9px; padding:11px; margin-top:8px; }
.license-row strong,.license-row small { display:block; }
.license-row strong { font-size:12px; }
.license-row small { color:#8a8378; font-size:9px; margin-top:3px; }
.license-row button { flex:0 0 auto; background:#9b693c; color:#fff; border-radius:6px; padding:7px 9px; font:600 10px "DM Mono",monospace; }
.hire-button:disabled,.person-row.unavailable { opacity:.58; }
.prestige-result { display:inline-block; margin:4px 0 11px; padding:6px 10px; border-radius:20px; background:#dcecdf; color:#3f7959; font:700 11px "DM Mono",monospace; }
.prestige-result.loss { background:#f2deda; color:#a04742; }
.prestige-history { list-style:none; padding:0; margin:0; }
.prestige-history li { display:grid; grid-template-columns:43px 1fr; gap:8px; align-items:start; padding:9px 0; border-bottom:1px solid var(--line); }
.prestige-history li>strong { color:#4e9770; font:700 12px "DM Mono",monospace; }
.prestige-history li>strong.prestige-loss { color:#b6534e; }
.prestige-history li>span { font-size:11px; font-weight:600; }
.prestige-history small { display:block; margin-top:3px; color:#8b847a; font-size:9px; font-weight:400; }
.poaching-alert { grid-column:1/-1; padding:9px; background:#fff0d5; border:1px solid #d8b476; border-radius:6px; font-size:11px; line-height:1.5; }
.poaching-alert button { display:block; margin-top:7px; }
.building.academy { background:#836c97; }.building.equipment { background:#537c91; }
.equipment-warning { width:100%; margin-top:10px; border:1px solid #ba7138; border-radius:7px; padding:10px; background:#fff0d5; color:#703b16; font-size:12px; line-height:1.5; text-align:left; }
.equipment-warning[hidden] { display:none; }
.equipment-low { border-color:#ba7138; background:#fff0d5; }
.traffic-lane { position:absolute;left:4%;right:4%;bottom:20px;height:16px;border-top:1px dashed #d8c9a3;background:#657079;pointer-events:none;overflow:hidden;z-index:2; }
.traffic-lane i,.campus-road i { position:absolute;top:3px;left:-20px;width:17px;height:8px;border-radius:3px;background:#e6b36a;border:2px solid #363c43;animation:lot-traffic 12s linear infinite; }
.traffic-lane i:nth-child(2),.campus-road i:nth-child(2) { animation-delay:-5s;background:#7fa2aa; }.traffic-lane i:nth-child(3){animation-delay:-9s;background:#b87669;}
@keyframes lot-traffic { to { left:110%; } }
.building.constructing { animation:construct-building 2.4s ease-out; }.building.constructing::after { content:'⚒';position:absolute;top:-20px;left:30%;font-size:25px;color:#d69c48;animation:crane-work .4s alternate infinite; }
@keyframes construct-building { 0% { opacity:.3;filter:sepia(1);transform:translateY(-24px) scale(.3); } 70% { opacity:1;transform:translateY(0) scale(1.06); } 100% { transform:scale(1); } }
@keyframes crane-work { to { transform:rotate(20deg); } }
.rival-lots { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px; }.rival-lot-card { background:#fffaf2;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:left;min-width:0; }.rival-lot-card strong,.rival-lot-card small { display:block;margin-top:6px;font-size:11px; }.rival-lot-card small { font-size:10px;color:#7c7569; }.rival-campus { position:relative;min-height:130px;background:linear-gradient(145deg,#d3d5b3,#e8dfc1);border-radius:8px;overflow:hidden;padding:18px 9px 35px; }.campus-buildings { display:flex;flex-wrap:wrap;gap:9px;align-items:end; }.campus-building { display:grid;place-items:center;min-width:35px;height:39px;padding:4px;background:var(--rival-color);color:white;font-size:9px;box-shadow:5px 6px 0 #0003;border-top:7px solid #ffffff40;transform:skewY(-5deg); }.campus-building:first-child { height:53px; }.campus-road { position:absolute;bottom:8px;left:0;right:0;height:15px;background:#697477;border-top:1px dashed #dccbaa; }.campus-sign { position:absolute;bottom:27px;left:6px;right:6px;font:700 8px 'DM Mono',monospace;text-transform:uppercase; }.rival-talent { display:block;width:100%;text-align:left;padding:12px;margin:6px 0;background:#ece6da;border-radius:7px; }.save-slot { margin-top:12px;padding:12px;background:#fffaf2;border:1px solid var(--line);border-radius:8px; }.save-slot p { font-size:12px; }.save-slot button { padding:9px;margin-right:6px;background:var(--navy);color:white;border-radius:5px; }.backup-reminder { width:100%;padding:12px;margin-top:12px;text-align:left;background:#f2dfb5;border:1px solid #cfad63;border-radius:7px;font-size:12px; }
@media (prefers-reduced-motion:reduce) { .traffic-lane i,.campus-road i,.building.constructing,.building.constructing::after { animation:none; } }