:root{--bg:#08100d;--panel:#101a16;--panel2:#15211b;--stroke:#29372e;--text:#e6ebdb;--muted:#90a092;--accent:#d5e68b;--warn:#e6ae68;--red:#d76556;--teal:#6aa89b;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans)}body{overflow:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.42;cursor:not-allowed}#app{height:100dvh;min-height:510px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 25% -20%,#233224 0%,transparent 36%),var(--bg)}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--stroke);padding:0 24px;background:#0d1612;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px;min-width:285px}.brand-mark{background:#dbe9a4;color:#142019;font-weight:1000;letter-spacing:-3px;font-size:23px;padding:8px 7px;border-radius:2px;transform:skew(-8deg)}.brand-mark span{color:#638071}.brand strong{font-size:13px;letter-spacing:1.7px;display:block}.brand small{font-size:9px;color:#889990;letter-spacing:1.5px}.top-status{display:flex;gap:24px;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted);white-space:nowrap}.signal{color:var(--accent)}.signal i,.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #b9d77c;margin-right:6px}.top-buttons{display:flex;gap:7px;align-items:center}.top-buttons button,.sidebar-footer button{background:transparent;border:1px solid var(--stroke);padding:10px 12px;font-size:10px;font-weight:800;letter-spacing:.9px;border-radius:3px}.top-buttons button:hover,.sidebar-footer button:hover{background:#243128;border-color:var(--accent)}.top-buttons .icon-btn{font-size:16px;padding:7px 12px}.top-buttons .outline{border-color:#69765c;color:var(--accent)}.layout{display:flex;min-height:0;flex:1}.game-area{position:relative;flex:1;min-width:0;overflow:hidden;background:#202a23}#game{width:100%;height:100%;display:block;outline:none;cursor:crosshair}.scene-title{position:absolute;left:20px;top:18px;display:flex;align-items:center;gap:8px;background:#101a16de;border:1px solid #53624d5e;padding:10px 13px;font-size:10px;font-weight:900;letter-spacing:1.5px;pointer-events:none}.scene-title .pill{border-left:1px solid #53624d;padding-left:9px;color:var(--accent);font-size:9px;margin-left:5px}.quest-toast{position:absolute;top:75px;left:20px;background:linear-gradient(95deg,#14211ce8,#14211cb5);border-left:3px solid var(--accent);padding:14px 16px;display:flex;flex-direction:column;gap:5px;max-width:345px;box-shadow:0 12px 35px #06110b80;pointer-events:none}.quest-index{font-size:9px;letter-spacing:1.5px;color:var(--accent);font-weight:900}.quest-toast strong{font-size:15px}.quest-toast span{color:#c1cbbc;font-size:12px;line-height:1.4}#quest-distance{color:var(--accent);font-weight:700;font-size:11px}.compass{position:absolute;right:22px;top:20px;border:1px solid #b4c49b66;background:#0e1915dc;width:55px;height:55px;display:grid;place-items:center;border-radius:50%;font-weight:800;font-size:10px;color:var(--accent)}.controls-hint{position:absolute;bottom:20px;left:20px;color:#e3eacf;font-size:10px;letter-spacing:.6px;background:#111d17d9;border:1px solid #65735640;padding:10px 13px}.controls-hint b,.bottom b{color:var(--accent);padding:0 6px}.interaction-hint{position:absolute;bottom:68px;left:50%;transform:translateX(-50%);background:var(--accent);color:#1c2a1c;font-size:12px;letter-spacing:1.2px;font-weight:900;padding:11px 20px;box-shadow:0 4px 30px #10150e80}.hidden{display:none!important}#damage-flash{position:absolute;inset:0;pointer-events:none;background:#d83e3459;opacity:0;transition:opacity .2s}.sidebar{width:316px;flex:0 0 316px;overflow-y:auto;background:linear-gradient(#111d17,#0b1511);border-left:1px solid #38453c;padding:20px 18px 18px;scrollbar-width:thin;scrollbar-color:#3c4e3d transparent}.section-caption{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:1.2px;margin-bottom:14px}.section-caption span{font-size:9px;color:#758679;font-weight:650}.avatar-line{display:flex;align-items:center;gap:11px;margin-bottom:24px}.portrait{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;color:#1c291e;background:linear-gradient(135deg,#b9d48c,#647f69);font-weight:900;font-size:21px}.avatar-line strong{font-size:14px;display:block}.avatar-line small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.chip{margin-left:auto;font-size:9px;border:1px solid #607358;padding:6px;color:var(--accent)}.meters{display:grid;gap:13px}.stat-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.1px;color:#bbc7b9;margin-bottom:6px}.stat-label b{color:#e5e9d9}.meter{height:6px;background:#2a3b32;overflow:hidden}.meter i{display:block;height:100%;width:100%;transition:width .2s}.health{background:#add27c}.food{background:#d6b678}.water{background:#6faeb0}.infection{background:#c2645d}.resources-title{margin-top:25px;padding-top:17px;border-top:1px solid #2b3c30}.resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.resource-grid button{display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px 2px;background:#192720;border:1px solid #39493c}.resource-grid button:hover{border-color:var(--accent)}.resource-grid span{color:var(--accent);font-size:20px}.resource-grid b{font-size:16px}.resource-grid small{font-size:8px;color:var(--muted);font-weight:800;letter-spacing:.7px}.relations{display:grid;gap:8px}.relation{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:11px}.relation .name{min-width:56px}.relation .track{height:4px;background:#25392d;flex:1}.relation .track i{display:block;height:100%;background:#9db985}.relation .score{font-size:10px;width:29px;text-align:right;color:var(--accent)}.log{display:flex;flex-direction:column;gap:8px;max-height:140px;overflow-y:auto}.log-item{font-size:11px;color:#b3c0af;line-height:1.45;border-left:2px solid #567051;padding-left:9px}.sidebar-footer{display:flex;gap:6px;margin-top:20px}.sidebar-footer button{flex:1;padding:9px 2px;font-size:9px}.bottom{flex-shrink:0;border-top:1px solid var(--stroke);background:#0c1511;height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:9px;letter-spacing:1.1px;color:#798b7c}.mobile-controls{display:none}.close-sidebar{display:none}.overlay{position:fixed;inset:0;z-index:10;background:#050a08d9;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.overlay.hidden{display:none}.modal{width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:30px;background:linear-gradient(145deg,#19261d,#0c1712);border:1px solid #66775b;box-shadow:0 30px 100px #000d;position:relative}.modal:before{content:'TRANSMISSÃO RECEBIDA';position:absolute;top:0;left:0;font-size:9px;letter-spacing:2px;font-weight:900;color:#122018;background:var(--accent);padding:5px 15px}.modal h1{font-size:clamp(30px,5vw,48px);line-height:1.02;margin:25px 0 10px;letter-spacing:-1.4px}.modal h2{font-size:28px;line-height:1.15;margin:25px 0 12px}.modal h3{font-size:16px;line-height:1.3;margin:14px 0 7px}.modal p{line-height:1.65;font-size:14px;color:#c8d1c5}.modal .eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--accent)}.modal .lead{font-size:15px;color:#e5e9dd}.modal .hero-divider{height:2px;background:linear-gradient(90deg,var(--accent),transparent);margin:20px 0}.modal .choices{display:grid;gap:10px;margin-top:22px}.modal button.primary,.modal button.choice,.modal button.secondary{padding:15px 16px;text-align:left;background:#d6e596;border:1px solid #d6e596;color:#132218;font-weight:900;letter-spacing:.5px;font-size:12px;transition:transform .15s,filter .15s;border-radius:2px}.modal button.primary:hover,.modal button.choice:hover,.modal button.secondary:hover{filter:brightness(1.1);transform:translateY(-1px)}.modal button.secondary{background:#192921;color:#d6e596;border:1px solid #748763}.modal button.choice{display:block;width:100%;background:#203027;color:#e2e9d9;border-color:#52624f}.modal button.choice span{font-size:13px;display:block}.modal button.choice small{display:block;color:#9caf9c;font-weight:500;font-size:11px;line-height:1.5;margin-top:5px;letter-spacing:0}.modal button.choice:hover{border-color:var(--accent)}.modal .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.modal .row button{flex:1}.modal .field{display:grid;gap:6px;margin:13px 0}.modal .field label{font-size:11px;letter-spacing:1px;color:#bdcdb5;font-weight:800}.modal input{width:100%;background:#0a1510;color:#ecf1e2;border:1px solid #546a54;padding:13px;font-size:14px}.modal .error{color:#ffb3a6;font-size:12px}.modal .note{font-size:11px;color:#94a696}.modal .info{background:#1a2a20;padding:14px;border-left:3px solid #b8cb88;font-size:12px;color:#c6d3bc;margin:16px 0}.modal .scroll-list{max-height:330px;overflow:auto}.modal .scroll-list p{padding:8px 0;border-bottom:1px solid #304032;font-size:12px;margin:0}.modal .tag{display:inline-block;margin:4px 4px 0 0;border:1px solid #5a6e53;padding:7px 9px;font-size:11px;color:#d0debf}.map-preview{width:100%;border:1px solid #50604f;background:#1e2a20;aspect-ratio:1.6;display:block}.vote-status{margin-top:14px;border:1px solid #557050;padding:14px;font-size:12px;line-height:1.6}.narrative-flavor{font-style:italic;color:#abbc9e!important}.ending{color:var(--accent)!important}.room-players{display:flex;gap:5px;flex-wrap:wrap}.room-players span{border:1px solid #677c5e;padding:8px 10px;font-size:12px;background:#22342a}#toast-container{position:fixed;z-index:20;left:50%;transform:translateX(-50%);top:82px;display:grid;gap:6px;pointer-events:none;max-width:min(90vw,460px)}.toast{background:#d9e6ac;color:#17271b;padding:12px 18px;font-size:12px;font-weight:850;box-shadow:0 8px 30px #0009;text-align:center}.toast.warn{background:#eead86}
@media(max-width:1080px){.top-status{display:none}.sidebar{width:280px;flex-basis:280px}.brand{min-width:0}.topbar{padding:0 12px}.top-buttons button{padding:10px 8px}.quest-toast{max-width:285px}}
@media(max-width:740px){body{overflow:hidden}#app{min-height:0}.topbar{height:56px}.brand-mark{font-size:18px}.brand strong{font-size:10px;letter-spacing:.7px}.brand small{font-size:7px;letter-spacing:.3px}.brand{gap:7px}.top-buttons{gap:4px}.top-buttons .quiet{display:none}.top-buttons button{font-size:9px;padding:8px}.layout{position:relative}.game-area{width:100%}.sidebar{position:absolute;z-index:4;right:0;top:0;height:100%;width:min(300px,84vw);transform:translateX(100%);transition:transform .2s;box-shadow:-10px 0 40px #0006}.sidebar.open{transform:translateX(0)}.close-sidebar{display:block;width:100%;margin:0 0 18px;background:#2a3d2c;border:1px solid #8ea878;color:#e3f0c5;font-size:11px;font-weight:900;padding:10px}.scene-title{left:9px;top:8px;padding:8px;font-size:9px}.quest-toast{left:9px;top:49px;padding:9px 11px;max-width:255px}.quest-toast strong{font-size:13px}.quest-toast span{font-size:10px}.quest-index{font-size:8px}.compass{right:8px;top:9px;width:43px;height:43px}.controls-hint{display:none}.mobile-controls{display:flex;position:absolute;left:0;right:0;bottom:9px;justify-content:space-between;align-items:flex-end;padding:0 10px;pointer-events:none}.mobile-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#18291fc7;color:#e4efce;border:1px solid #a4bf90a1;font-size:12px;font-weight:850;border-radius:4px;min-width:48px;height:47px}.dpad{display:flex;flex-direction:column;align-items:center;gap:3px}.dpad>div{display:flex;gap:4px}.mobile-actions{display:flex;flex-direction:column;gap:5px}.mobile-actions button{min-width:65px}.interaction-hint{bottom:175px;font-size:10px;white-space:nowrap}.bottom{font-size:8px;padding:0 7px}.bottom #coordinates{display:none}.modal{padding:22px}.modal h1{font-size:32px}.modal p{font-size:13px}}
@media(max-height:650px){.quest-toast{top:58px}.modal{padding:20px}.modal h1{margin:14px 0 7px}.modal .choices{margin-top:12px}}
/* ===== CINEMA NARRATIVO / V5.0 ===== */
.modal:has(.cinema-stage){width:min(830px,100%);padding:12px;background:#090f11;border-color:#536859}
.modal:has(.cinema-stage)::before{display:none}
.cinema-stage{position:relative;min-height:min(470px,64vh);overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 58% 80%,#9f55491b,transparent 49%),linear-gradient(165deg,#0c151a,#111e1b 48%,#080b0d);border:1px solid #344a49;display:flex;align-items:flex-end}
.cinema-stage:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 5px,#0002 6px),linear-gradient(90deg,#02100b99,transparent 55%);pointer-events:none;z-index:2}
.cinema-stage:after{content:'';position:absolute;left:-18%;top:-32%;width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse,#d8a76b11,transparent 62%);animation:cinema-sweep 9s ease-in-out infinite alternate;z-index:0}
.cinema-skyline{position:absolute;bottom:0;left:0;right:0;height:70%;opacity:.67;background:linear-gradient(to top,#06090d 0 18%,transparent 18%),linear-gradient(90deg,transparent 0 5%,#090f11 5% 15%,transparent 15% 20%,#0c1718 20% 34%,transparent 34% 39%,#071016 39% 46%,transparent 46% 51%,#101b1a 51% 59%,transparent 59% 63%,#0b1218 63% 76%,transparent 76% 80%,#0b1415 80% 94%,transparent 94%);filter:drop-shadow(0 0 12px #000);animation:cinema-zoom 10s ease-out both}
.cinema-signal{position:absolute;top:9%;right:9%;font-size:clamp(16px,2.5vw,28px);color:#b9d6bc80;letter-spacing:7px;animation:cinema-blink 2.4s infinite}
.cinema-caption{position:relative;z-index:3;width:100%;padding:40px clamp(23px,6vw,55px) 42px;background:linear-gradient(transparent,#050b0ae8 26%,#050a0bf5);animation:cinema-slide .42s ease-out both}
.cinema-kicker{font-size:10px;letter-spacing:2px;font-weight:900;color:#a0b89f;text-transform:uppercase;margin-bottom:16px}
.cinema-speaker{font-size:12px;font-weight:1000;letter-spacing:3px;color:#e4eaa9;margin-bottom:9px;text-transform:uppercase}
.modal .cinema-dialogue{color:#f1f0dd;font-size:clamp(18px,2.8vw,26px);font-weight:650;line-height:1.5;max-width:720px;margin:0;min-height:90px;text-wrap:balance;text-shadow:0 2px 10px #000}
.cinema-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 5px 0}
.cinema-actions>span{margin-right:auto;font-size:10px;letter-spacing:2px;color:#9fb4a8}
.cinema-actions button{min-width:130px;min-height:42px}
.tone-hospital{background:radial-gradient(circle at 22% 30%,#b7c8b733,transparent 42%),linear-gradient(130deg,#13242c,#0a1113 75%)}
.tone-street{background:radial-gradient(circle at 74% 24%,#d9aa6a23,transparent 45%),linear-gradient(140deg,#1b2319,#0a1216)}
.tone-industrial{background:radial-gradient(circle at 56% 20%,#ca6e5130,transparent 53%),linear-gradient(120deg,#17211e,#0a0c0e)}
.tone-shelter{background:radial-gradient(circle at 48% 26%,#c6b26930,transparent 54%),linear-gradient(160deg,#263023,#0b1314)}
.tone-tower{background:radial-gradient(circle at 60% 18%,#d4584040,transparent 48%),linear-gradient(145deg,#192431,#0b1216)}
.tone-road{background:radial-gradient(circle at 85% 8%,#a6957324,transparent 52%),linear-gradient(155deg,#1a2927,#0a1017)}
.tone-laboratory{background:radial-gradient(circle at 10% 15%,#90c7d12b,transparent 54%),linear-gradient(150deg,#14252b,#0a1415)}
.tone-siege{background:radial-gradient(circle at 60% 25%,#d14d2934,transparent 48%),linear-gradient(155deg,#291f1a,#12191c)}
@keyframes cinema-zoom{from{transform:scale(1.09) translateX(-2%)}to{transform:scale(1) translateX(0)}}
@keyframes cinema-sweep{from{transform:translateX(0)}to{transform:translateX(22%)}}
@keyframes cinema-blink{50%{opacity:.35}}
@keyframes cinema-slide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.after-quote{border-left:3px solid #d5e68b;background:linear-gradient(90deg,#d5e68b12,transparent);padding:26px 22px;color:#f1efda;font-size:clamp(17px,2.3vw,22px);line-height:1.6;margin:25px 0}
.cast-list{display:grid;gap:12px;max-height:52vh;overflow:auto;padding-right:4px;margin-top:15px}
.cast-entry{display:flex;gap:13px;border:1px solid #3e5244;padding:14px;background:#101d18}
.cast-monogram{background:#293d34;color:#e7eeaa;font-weight:950;min-width:48px;height:48px;display:grid;place-items:center;font-size:26px}
.cast-entry strong{font-size:15px;display:block}.cast-entry small{display:block;color:#b3c19f;margin:3px 0 5px;font-size:11px;letter-spacing:.5px}
.modal .cast-entry p{margin:0;color:#b7c6b7;font-size:12px;line-height:1.55}
.chapter-list{display:grid;gap:6px;max-height:180px;overflow:auto}.chapter-progress{padding:10px 12px;border:1px solid #3b4d42;background:#0b1712;display:flex;justify-content:space-between;gap:8px}.chapter-progress b{font-size:11px}.chapter-progress span{font-size:9px;color:#a6b4a6;white-space:nowrap}.chapter-progress.active{border-color:#bcd48b;background:#233429}
.memory-list{max-height:250px;overflow:auto;display:grid;gap:8px}.memory-entry{padding:10px 12px;background:#15231b;border-left:2px solid #94ad88}.memory-entry small{display:block;font-size:10px;color:#a4bc97;margin-bottom:6px}.memory-entry b{font-size:12px}.modal .memory-entry p{font-size:12px;margin:5px 0 0}
.final-art{background:linear-gradient(135deg,#141d1a,#212b28);padding:22px;border:1px solid #516450;margin:15px 0}.final-art>span{font-size:10px;letter-spacing:3px;color:#d6ddaa}.modal .final-art h1{font-size:clamp(27px,4vw,40px);line-height:1.18;margin:12px 0}.epilogue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:290px;overflow:auto}.epilogue-person{display:grid;align-content:start;gap:6px;padding:11px;background:#101c16;border:1px solid #354536}.epilogue-person b{color:#cce19a;font-size:12px}.epilogue-person span{font-size:12px;line-height:1.5;color:#bccab9}
.sidebar .relations{max-height:188px;overflow-y:auto;padding-right:3px}
@media(max-width:740px){.cinema-stage{min-height:52vh}.cinema-caption{padding:28px 19px 30px}.modal .cinema-dialogue{font-size:18px;min-height:80px}.cinema-actions>span{flex-basis:100%;margin-right:0}.cinema-actions button{flex:1;padding:12px!important}.epilogue-grid{grid-template-columns:1fr}.chapter-progress{display:grid}.cast-list{max-height:56vh}}
@media(prefers-reduced-motion:reduce){.cinema-stage:after,.cinema-signal,.cinema-caption,.cinema-skyline{animation:none!important}}