:root { --void:#090b0d; --paper:#d8d0bd; --muted:#8e918c; --gold:#c49a52; --gold-light:#f1d28b; --red:#b75e52; --green:#91b17a; --line:rgba(216,208,189,.16); --panel:rgba(13,17,20,.79); }
* { box-sizing:border-box; } html,body { margin:0; min-width:320px; min-height:100%; background:var(--void); color:var(--paper); font-family:'Space Grotesk',sans-serif; } body { overflow-x:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#scene-stage { position:fixed; inset:0; z-index:0; overflow:hidden; background:#090b0d; }
#scene-stage .scene-photo { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.92) contrast(1.06); }
.scene-stage.tone-teal { background:#0b1c22; }
.scene-stage.tone-wine { background:#1a0c10; }
.scene-stage.tone-green { background:#0b140e; }
.scene-stage.tone-amber { background:#1a1208; }
.scene-stage.tone-red { background:#140808; }
.vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,.72) 100%); }
.scene-hero { position:fixed; z-index:8; left:clamp(18px,5vw,70px); top:26vh; width:min(220px,26vw); margin:0; }
.scene-hero img { display:block; width:100%; height:min(48vh,380px); object-fit:cover; border:2px solid var(--gold); box-shadow:0 18px 50px rgba(0,0,0,.55); }
.scene-hero .portrait-fallback { display:none; width:100%; height:min(48vh,380px); border-radius:0; }
.scene-hero img[hidden] { display:none; }
.scene-hero:has(img[hidden]) .portrait-fallback { display:grid; place-items:center; border:2px solid var(--gold); background:linear-gradient(145deg,#27313a,#111519); color:var(--gold-light); font:700 42px Cinzel,serif; }
.scene-hero figcaption { margin-top:8px; color:var(--gold-light); font:600 12px Cinzel,serif; text-shadow:0 2px 12px #000; }
#place-stamp { display:block; margin-bottom:4px; color:var(--gold-light); }
.online { color:var(--green); } .crt-overlay { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.16; background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 4px),linear-gradient(90deg,rgba(255,0,0,.025),transparent 45%,rgba(0,140,255,.025)); mix-blend-mode:screen; }
.game-shell { position:relative; z-index:2; min-height:100vh; padding:14px 18px; pointer-events:none; } .game-shell > * { pointer-events:auto; }
.glass-panel { border:1px solid var(--line); background:var(--panel); box-shadow:0 20px 60px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(12px); }
.hud { display:flex; align-items:center; gap:18px; padding:10px 14px; max-width:min(920px, calc(100vw - 80px)); } .brand-block { min-width:180px; border-right:1px solid var(--line); padding-right:16px; } .eyebrow { color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; } .brand-block h1 { margin:4px 0 0; font-family:Cinzel,serif; font-size:clamp(16px,1.8vw,22px); line-height:1; letter-spacing:.03em; } .brand-block h1 span { color:var(--gold-light); } .brand-block p { color:var(--muted); font-size:9px; letter-spacing:.12em; text-transform:uppercase; margin:4px 0 0; } .brand-block b { display:block; color:var(--paper); margin-top:4px; font-size:8px; font-weight:500; }
.meter-grid { display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)); flex:1; gap:0; } .meter { padding:0 10px; border-right:1px solid var(--line); } .meter:last-child { border:0; } .meter-top { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:9px; } .meter-top strong { color:var(--gold-light); font-size:10px; } .meter-name { color:var(--muted); font-size:8px; margin:4px 0 6px; text-transform:uppercase; letter-spacing:.1em; } .meter-track { position:relative; height:4px; background:rgba(255,255,255,.1); } .meter-fill { height:100%; background:var(--gold); transition:width .35s ease,background .35s ease; } .meter-fill.good { background:var(--green); } .meter-fill.danger { background:var(--red); } .meter-fill.preview { position:absolute; top:0; left:0; height:100%; opacity:.45; background:var(--gold-light); } .meter-fill.preview.drop { background:var(--red); } .meter.cracked { outline:1px solid var(--red); box-shadow:0 0 12px rgba(183,94,82,.45); }
.scene-copy { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); width:min(720px,calc(100% - 48px)); animation:rise .7s ease both; background:rgba(9,11,13,.82); border:1px solid var(--line); padding:14px 16px; } .scene-copy h2 { margin:4px 0 6px; color:var(--gold-light); font-family:Cinzel,serif; font-size:clamp(18px,2.4vw,28px); line-height:1.1; text-shadow:0 3px 20px #000; } .scene-copy>p:not(.feedback) { max-width:none; color:var(--paper); font-family:Cinzel,serif; font-size:14px; line-height:1.4; } .choice-list { display:grid; gap:8px; margin-top:12px; } .choice { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:1px solid var(--line); color:var(--paper); background:rgba(10,12,13,.72); text-align:left; cursor:pointer; transition:.2s ease; } .choice:hover,.choice.risk-collapse { border-color:var(--gold); background:rgba(196,154,82,.15); } .choice.risk-collapse { border-color:var(--red); } .choice strong { display:block; font-size:12px; } .choice small { display:block; color:var(--muted); margin-top:3px; font-size:10px; } .choice em { color:var(--gold-light); font-size:9px; font-style:normal; text-transform:uppercase; white-space:nowrap; } .choice-deltas { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; } .choice-deltas span { padding:2px 6px; border:1px solid var(--line); color:var(--gold-light); font-size:8px; letter-spacing:.06em; } .choice-deltas span.gain { color:var(--gold-light); border-color:rgba(196,154,82,.45); } .choice-deltas span.bad { color:#d77b6e; border-color:rgba(183,94,82,.5); } .feedback { border-left:2px solid var(--gold); padding:10px 12px; color:var(--paper); background:rgba(196,154,82,.11); font-size:11px; }
.radar { display:none; }
.encrypted-phone { position:fixed; right:28px; bottom:27px; width:290px; padding:12px; } .phone-head { display:flex; justify-content:space-between; padding:2px 4px 10px; border-bottom:1px solid var(--line); } .online { font-size:8px; } .phone-screen { margin-top:10px; padding:12px; background:linear-gradient(135deg,#18251e,#0c1110); } .phone-contact { display:flex; align-items:center; gap:9px; } .avatar { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--gold); border-radius:50%; color:var(--gold-light); font-size:9px; } .phone-contact strong { display:block; font-size:10px; letter-spacing:.08em; } .phone-contact small { display:block; margin-top:2px; color:var(--green); font-size:8px; } .phone-message,.phone-reply { margin:14px 0 0; padding:10px; color:var(--paper); background:rgba(216,208,189,.1); font-size:11px; line-height:1.4; } .phone-reply { color:var(--gold-light); border:1px solid rgba(196,154,82,.3); background:rgba(196,154,82,.1); } .phone-actions { display:grid; gap:6px; margin-top:10px; } .phone-actions button { padding:7px; border:1px solid var(--line); color:var(--muted); background:transparent; font-size:9px; text-align:left; cursor:pointer; } .phone-actions button:hover { color:var(--gold-light); border-color:var(--gold); } .phone-actions button:disabled { opacity:.45; cursor:default; }
.mission-tag { position:fixed; right:28px; bottom:31px; display:grid; gap:7px; color:var(--muted); font-size:9px; letter-spacing:.12em; text-align:right; } .stamp { width:max-content; justify-self:end; padding:4px 7px; border:1px solid var(--red); color:#d77b6e; transform:rotate(-4deg); font-size:8px; letter-spacing:.18em; } .modal-backdrop { position:fixed; inset:0; z-index:30; overflow:auto; padding:24px 16px; background:rgba(0,0,0,.83); } .game-over-modal { width:min(640px,100%); max-height:none; overflow:visible; margin:0 auto; padding:28px; text-align:center; } .game-over-modal h2 { margin:12px 0; color:var(--gold-light); font-family:Cinzel,serif; font-size:clamp(26px,4vw,40px); } .game-over-modal p { color:var(--muted); font-size:13px; } .gold-button { margin-top:20px; padding:12px 16px; border:1px solid var(--gold); color:#17130c; background:var(--gold); font-size:10px; font-weight:700; letter-spacing:.14em; cursor:pointer; } .gold-button:hover,.gold-button:focus-visible { background:#17130c; color:var(--gold-light); }
@keyframes rise { from { opacity:0; transform:translateX(-50%) translateY(14px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.area-nav { position:fixed; z-index:18; left:clamp(18px,5vw,76px); top:108px; padding:7px 11px; border:1px solid var(--line); background:rgba(9,11,13,.78); color:var(--gold-light); font:600 11px Cinzel,serif; }
.vn-portrait.navy { background:linear-gradient(145deg,#24344a,#10141a); }
.vn-portrait.steel { background:linear-gradient(145deg,#3a4248,#121416); }
.ledger-drawer { position:fixed; z-index:25; top:118px; right:0; width:min(340px,calc(100vw - 28px)); min-height:440px; transform:translateX(calc(100% - 38px)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.ledger-drawer.open { transform:translateX(0); }
.ledger-toggle { position:absolute; top:18px; left:0; display:grid; place-items:center; width:38px; height:42px; border:1px solid var(--gold); border-right:0; color:var(--gold-light); background:rgba(18,20,20,.96); font-size:25px; line-height:1; cursor:pointer; transform:translateX(-39px); }
.ledger-drawer.open .ledger-toggle span:first-child { transform:rotate(180deg); }
.ledger-content { padding:20px 20px 22px 26px; }
.ledger-heading { position:relative; padding-bottom:13px; border-bottom:1px solid var(--line); }
.ledger-heading h2 { margin:7px 0 5px; color:var(--gold-light); font:600 22px/1 Cinzel,serif; }
.ledger-status { color:var(--green); font-size:8px; letter-spacing:.12em; }
.wallet-balance { display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); }
.wallet-balance small,.wallet-balance span,.section-heading span,.transaction-list small,.achievement-list small { color:var(--muted); font-size:9px; }
.wallet-balance strong { color:var(--paper); font:600 25px Cinzel,serif; }
.wallet-balance span { color:var(--green); }
.ledger-section { padding-top:17px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px; }
.section-heading h3 { margin:0; color:var(--paper); font:600 12px Cinzel,serif; text-transform:uppercase; letter-spacing:.1em; }
.transaction-list,.achievement-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.transaction-list li,.achievement-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.transaction-list strong,.achievement-list strong { display:block; color:var(--paper); font-size:10px; }
.transaction-list small,.achievement-list small { display:block; margin-top:3px; }
.transaction-list b { color:var(--green); font-size:9px; white-space:nowrap; }
.achievement-list li > span { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--line); color:var(--muted); font-size:8px; }
.achievement-list li > div { flex:1; }
.achievement-list li > b { color:var(--muted); font-size:14px; font-weight:400; }
.achievement-list li.unlocked { border-color:rgba(145,177,122,.45); }
.achievement-list li.unlocked > span,.achievement-list li.unlocked > b { color:var(--green); }
.ranking-teaser { margin:0; padding:0; list-style:none; color:var(--paper); font-size:10px; line-height:1.5; }
.ranking-teaser li { padding:6px 0; border-bottom:1px solid var(--line); }
.ledger-actions { display:grid; gap:6px; margin-top:10px; }
.ledger-actions button { padding:8px; border:1px solid var(--gold); color:var(--gold-light); background:rgba(196,154,82,.1); font-size:9px; letter-spacing:.1em; cursor:pointer; }
@media (max-width:1100px) {
	.hud { max-width:calc(100vw - 52px); gap:10px; }
	.scene-hero { width:min(160px,22vw); top:22vh; }
	.scene-hero img { height:min(36vh,280px); }
	.scene-copy { width:min(640px,calc(100% - 48px)); }
}
@media (max-width:900px) {
	.game-shell {
		display:flex;
		flex-direction:column;
		min-height:100dvh;
		padding:8px 8px calc(58px + env(safe-area-inset-bottom));
	}
	.hud { display:block; max-width:none; width:100%; padding:8px 10px; flex:0 0 auto; }
	.brand-block { border:0; padding:0 0 6px; min-width:0; }
	.brand-block h1 { font-size:17px; }
	.brand-block p { margin:2px 0 0; font-size:0; letter-spacing:0; }
	.brand-block b { font-size:8px; letter-spacing:.12em; }
	.meter-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
	.meter { padding:0 4px; }
	.meter-name { display:none; }
	.meter-top { font-size:8px; }
	.area-nav { display:none; }
	.scene-hero { display:none; }
	.mission-tag { display:none; }
	.scene-copy {
		position:relative;
		left:auto;
		right:auto;
		bottom:auto;
		width:auto;
		transform:none;
		animation:none;
		flex:1 1 auto;
		margin-top:8px;
		max-height:none;
		overflow:auto;
		padding:12px 28px 20px 12px;
		-webkit-overflow-scrolling:touch;
	}
	.scene-copy h2 { font-size:clamp(18px, 5.2vw, 24px); }
	.choice { flex-wrap:wrap; padding:12px; min-height:44px; }
	.choice em { white-space:normal; }
	.encrypted-phone { display:none !important; }
	.scene-copy.vn-choice-ready ~ .encrypted-phone { display:none !important; }
	.ledger-drawer {
		top:96px;
		bottom:0;
		right:0;
		left:auto;
		width:min(340px, calc(100vw - 28px));
		min-height:0;
		max-height:none;
		transform:translateX(100%);
		z-index:24;
		pointer-events:none;
		overflow:visible;
	}
	.ledger-drawer.open {
		transform:translateX(0);
		pointer-events:auto;
	}
	.ledger-toggle {
		position:absolute;
		top:18%;
		left:0;
		width:22px;
		height:72px;
		padding:0;
		transform:translateX(-100%);
		border:1px solid rgba(196,154,82,.35);
		border-right:0;
		background:rgba(12,14,16,.72);
		color:rgba(241,210,139,.55);
		font-size:16px;
		letter-spacing:0;
		z-index:24;
		pointer-events:auto;
		opacity:.7;
		box-shadow:none;
	}
	.ledger-toggle span:first-child { display:block; font-size:18px; }
	.ledger-toggle::after { content:none; }
	.ledger-drawer.open .ledger-toggle {
		position:absolute;
		top:18px;
		right:auto;
		left:0;
		bottom:auto;
		transform:translateX(-100%);
		opacity:1;
		color:var(--gold-light);
		border-color:var(--gold);
	}
	.ledger-drawer.open .ledger-toggle::after { content:none; }
	.dubai-mode { right:12px; width:calc(100% - 24px); }
	#feedback-toggle {
		left:max(10px, env(safe-area-inset-left));
		bottom:max(10px, env(safe-area-inset-bottom));
		z-index:22;
	}
	#minuta-04b { display:none; }
	.cast-strip, .character-dossier { display:none !important; }
	.crisis-hint { bottom:calc(58px + env(safe-area-inset-bottom)); }
}
@media (max-width:640px) {
	.hud { padding:7px 8px; }
	.brand-block h1 { font-size:16px; }
	.meter-grid { overflow:visible; }
	.meter { min-width:0; border:0; }
	.game-over-modal { padding:18px; }
	.game-over-modal h2 { font-size:26px; }
	.vn-dialogue { grid-template-columns:56px 1fr; gap:10px; }
	.vn-portrait { width:56px; height:72px; }
	.ledger-content { padding:16px 14px 18px 20px; }
	.ledger-heading h2 { font-size:19px; }
}
@media (max-width:580px) {
	.game-shell { padding:6px 6px calc(56px + env(safe-area-inset-bottom)); }
	.ranking-columns { grid-template-columns:1fr; }
}
@media (hover:none) {
	.choice:hover { transform:none; }
	.gold-button, .choice, .vn-next { min-height:44px; }
}
.crisis-hint { position:fixed; z-index:45; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); width:min(420px, calc(100% - 28px)); padding:14px 16px; transform:translate(-50%, 12px); opacity:0; pointer-events:none; border:1px solid var(--gold); background:rgba(9,11,13,.94); box-shadow:0 12px 40px rgba(0,0,0,.45); }
.crisis-hint.hint-visible { animation:hint-in 4.4s ease both; }
.crisis-hint strong, .crisis-hint span { display:block; }
.crisis-hint strong { margin:6px 0 4px; color:var(--gold-light); font:600 16px Cinzel,serif; }
.crisis-hint span:last-child { color:var(--muted); font-size:11px; line-height:1.4; }
@keyframes hint-in { 0% { opacity:0; transform:translate(-50%, 12px); } 10%, 78% { opacity:1; transform:translate(-50%, 0); } 100% { opacity:0; transform:translate(-50%, 8px); } }
.ending-next { margin: 0 0 12px; color: var(--paper); font-size: 14px; line-height: 1.45; }
.ending-decisions { max-height: none; overflow: visible; }
.arrest-scene { margin: 12px 0 6px; }
.arrest-scene img { display: block; width: 100%; max-height: min(220px, 28vh); object-fit: cover; object-position: center 35%; border: 1px solid var(--gold); filter: sepia(.28) contrast(1.08) saturate(.85); }
.arrest-scene figcaption { margin-top: 6px; color: #d77b6e; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 640px), (max-height: 800px) {
	.arrest-scene img { max-height: min(140px, 22vh); }
	.game-over-modal { padding: 18px; }
}