:root {
  --yellow:#FFD100;--red:#E8001A;--dark:#0A0A0A;--mid:#141414;--panel:#111;
  --border:#242424;--text:#E8E8E8;--muted:#555;--green:#00C853;--orange:#FF6B00;
  --blue:#0066FF;--purple:#8B00FF;--subway-blue:#0039A6;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--dark);color:var(--text);font-family:'IBM Plex Mono',monospace;overflow:hidden;height:100vh;width:100vw;}

/* ── SCREENS ── */
#screen-intro,#screen-game,#screen-event,#screen-fullmap{position:absolute;inset:0;display:none;}
#screen-intro.active,#screen-game.active,#screen-event.active,#screen-fullmap.active{display:flex;}

/* ── INTRO ── */
#screen-intro{flex-direction:column;align-items:center;justify-content:center;background:var(--dark);overflow:hidden;}
.skyline-bg{position:absolute;bottom:0;left:0;right:0;height:55vh;background:linear-gradient(to top,#0A0A0A 0%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Crect x='0' y='200' width='40' height='200' fill='%23111'/%3E%3Crect x='50' y='150' width='60' height='250' fill='%23131313'/%3E%3Crect x='120' y='80' width='35' height='320' fill='%23111'/%3E%3Crect x='220' y='50' width='80' height='350' fill='%230E0E0E'/%3E%3Crect x='465' y='60' width='90' height='340' fill='%230F0F0F'/%3E%3Crect x='475' y='40' width='25' height='25' fill='%23FFD100' opacity='0.6'/%3E%3Crect x='740' y='50' width='100' height='350' fill='%230D0D0D'/%3E%3Crect x='755' y='30' width='15' height='25' fill='%23E8001A' opacity='0.8'/%3E%3Crect x='910' y='80' width='65' height='320' fill='%23111'/%3E%3Crect x='1035' y='110' width='75' height='290' fill='%230E0E0E'/%3E%3C/svg%3E") bottom/cover no-repeat;}
.intro-content{position:relative;z-index:2;text-align:center;}
.intro-logo{font-family:'Bebas Neue',cursive;font-size:clamp(60px,12vw,140px);color:var(--yellow);letter-spacing:8px;line-height:0.9;text-shadow:4px 4px 0 var(--red),8px 8px 0 rgba(232,0,26,0.3);}
.intro-sub{font-family:'IBM Plex Sans',sans-serif;font-size:13px;letter-spacing:6px;color:var(--muted);margin:12px 0 16px;text-transform:uppercase;}
.intro-tagline{font-family:'IBM Plex Sans',sans-serif;font-style:italic;font-size:16px;color:var(--text);margin-bottom:30px;opacity:0.6;}

/* Character Creation */
.char-create{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px;width:460px;}
.cc-row{display:flex;gap:8px;align-items:center;width:100%;}
.cc-label{font-size:9px;letter-spacing:3px;color:var(--muted);width:90px;text-align:right;flex-shrink:0;}
.skin-opt,.style-opt{font-size:22px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);cursor:pointer;transition:border-color .15s;}
.skin-opt.selected,.style-opt.selected{border-color:var(--yellow);background:rgba(255,209,0,.08);}
.origin-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:10px;padding:5px 10px;cursor:pointer;transition:all .15s;letter-spacing:1px;}
.origin-btn.selected{border-color:var(--yellow);color:var(--yellow);background:rgba(255,209,0,.06);}

#name-input-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
#name-input-wrap label{font-size:10px;letter-spacing:4px;color:var(--muted);}
#player-name{background:transparent;border:none;border-bottom:2px solid var(--yellow);color:var(--yellow);font-family:'Bebas Neue',cursive;font-size:30px;letter-spacing:4px;text-align:center;width:280px;outline:none;padding:6px 0;}
#player-name::placeholder{color:#222;}
.btn-start{background:var(--yellow);color:var(--dark);border:none;font-family:'Bebas Neue',cursive;font-size:22px;letter-spacing:4px;padding:12px 56px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:transform .1s,background .1s;margin-top:8px;}
.btn-start:hover{background:var(--red);transform:scale(1.03);}

/* ── GAME LAYOUT ── */
#screen-game{flex-direction:row;height:100vh;}

/* LEFT PANEL */
#panel-left{width:250px;min-width:250px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.player-card{padding:14px 16px 10px;border-bottom:1px solid var(--border);background:var(--mid);}
.char-portrait-wrap{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
#char-portrait{font-size:36px;}
.player-info{}
.player-name-display{font-family:'Bebas Neue',cursive;font-size:20px;color:var(--yellow);letter-spacing:2px;line-height:1;}
.player-title{font-size:9px;color:var(--muted);letter-spacing:1.5px;margin-top:2px;}
#display-origin{font-size:8px;color:var(--border);letter-spacing:2px;margin-top:1px;}

.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px;}
.stat-label{color:var(--muted);letter-spacing:1px;font-size:9px;}
.stat-value{color:var(--yellow);font-weight:700;font-size:13px;}
.stat-value.green{color:var(--green);}
.stat-value.red{color:var(--red);}
.stat-value.orange{color:var(--orange);}

.rating-bar-wrap{padding:8px 14px;border-bottom:1px solid var(--border);}
.rating-label{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-bottom:5px;align-items:center;}
#rating-tier{font-size:8px;color:var(--yellow);letter-spacing:1px;}
.rating-bar{height:5px;background:var(--border);}
.rating-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green));background-size:400%;transition:width .5s ease;}

.metro-indicator{display:flex;align-items:center;gap:6px;padding:6px 14px;border-bottom:1px solid var(--border);font-size:9px;color:var(--muted);}
.metro-dot{width:8px;height:8px;border-radius:50%;background:var(--subway-blue);}
.metro-dot.active{background:var(--green);}

#wanted-row{display:none;align-items:center;gap:8px;padding:5px 14px;border-bottom:1px solid var(--border);font-size:9px;color:var(--muted);}
#wanted-stars{font-size:11px;}

.section-title{font-size:8px;letter-spacing:3px;color:var(--muted);padding:10px 14px 5px;border-bottom:1px solid var(--border);text-transform:uppercase;}
.resume-entry{padding:7px 14px;border-bottom:1px solid #111;font-size:10px;}
.resume-entry .job-name{color:var(--text);font-weight:600;font-size:11px;}
.job-rating{display:inline-block;padding:1px 5px;font-size:8px;margin-top:2px;}
.job-rating.good{background:var(--green);color:#000;}
.job-rating.ok{background:var(--orange);color:#000;}
.job-rating.bad{background:var(--red);color:#fff;}
#inventory-list{padding:6px 0;flex:1;overflow-y:auto;}
.inv-item{display:flex;justify-content:space-between;padding:4px 14px;font-size:9px;color:var(--muted);}

/* Minimap */
#minimap-wrap{position:relative;border-bottom:1px solid var(--border);cursor:pointer;overflow:hidden;}
#minimap-canvas{display:block;width:100%;height:auto;}
.minimap-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);transition:background .2s;}
#minimap-wrap:hover .minimap-overlay{background:rgba(0,0,0,0.4);}
.minimap-label{font-size:9px;letter-spacing:3px;color:transparent;transition:color .2s;}
#minimap-wrap:hover .minimap-label{color:var(--yellow);}
.minimap-clock{position:absolute;top:6px;right:8px;font-size:9px;color:var(--yellow);opacity:0.7;}
.minimap-day{position:absolute;top:6px;left:8px;font-size:9px;color:var(--muted);}

/* CENTER */
#map-area{flex:1;position:relative;overflow:hidden;background:#0A0A0A;}
#time-bar{background:var(--dark);border-bottom:1px solid var(--border);padding:7px 14px;display:flex;align-items:center;gap:20px;font-size:10px;flex-shrink:0;}
.time-segment{display:flex;align-items:center;gap:7px;}
.time-icon{font-size:13px;}
.time-val{color:var(--yellow);font-weight:700;font-size:12px;}
.time-label{color:var(--muted);font-size:8px;letter-spacing:1px;}
#t-location{font-size:10px;color:var(--muted);}

/* Location context bar */
#loc-context{background:var(--mid);border-bottom:1px solid var(--border);padding:6px 14px;display:flex;align-items:center;gap:12px;font-size:10px;flex-shrink:0;}
#loc-ctx-name{color:var(--yellow);font-weight:700;font-size:11px;letter-spacing:1px;}
#loc-ctx-desc{color:var(--muted);font-size:9px;flex:1;}
#loc-ctx-actions{display:flex;gap:5px;}
#loc-ctx-actions .action-btn{font-size:8px;padding:3px 7px;}

.map-center-area{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;}
#map-placeholder{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:radial-gradient(ellipse at center,#0D1520 0%,#060606 100%);cursor:pointer;user-select:none;}
#map-placeholder:hover .open-map-btn{border-color:var(--yellow);color:var(--yellow);}
.open-map-btn{border:1px solid var(--border);color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:10px 24px;letter-spacing:2px;background:transparent;cursor:pointer;}
.map-placeholder-text{font-size:10px;color:var(--muted);letter-spacing:3px;}
.map-placeholder-hint{font-size:9px;color:#222;letter-spacing:1px;}

.map-overlay-ui{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;}
.map-btn{background:rgba(10,10,10,.92);border:1px solid var(--border);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:10px;padding:7px 12px;cursor:pointer;letter-spacing:.5px;transition:border-color .2s,color .2s;}
.map-btn:hover{border-color:var(--yellow);color:var(--yellow);}

#ticker{position:absolute;bottom:0;left:0;right:0;height:26px;background:var(--yellow);color:var(--dark);overflow:hidden;z-index:5;display:flex;align-items:center;}
.ticker-inner{display:flex;gap:60px;animation:ticker-scroll 50s linear infinite;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:1px;}
@keyframes ticker-scroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* RIGHT PANEL */
#panel-right{width:280px;min-width:280px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
#log-area{flex:1;overflow-y:auto;padding:6px 0;}
.log-entry{padding:5px 12px;font-size:9px;line-height:1.5;border-bottom:1px solid #0E0E0E;animation:fadeInLog .25s ease;}
@keyframes fadeInLog{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.log-entry .log-time{color:var(--muted);font-size:8px;margin-bottom:1px;}
.log-entry .log-msg{color:var(--text);}
.log-entry.log-good .log-msg{color:var(--green);}
.log-entry.log-bad .log-msg{color:var(--red);}
.log-entry.log-warn .log-msg{color:var(--orange);}
.log-entry.log-info .log-msg{color:var(--blue);}
.log-entry.log-money .log-msg{color:var(--yellow);}

#action-panel{border-top:1px solid var(--border);padding:10px;background:var(--mid);}
.action-title{font-size:8px;letter-spacing:3px;color:var(--muted);margin-bottom:8px;}
#action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.action-btn{background:transparent;border:1px solid var(--border);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:9px;padding:7px 5px;cursor:pointer;letter-spacing:.3px;text-align:center;transition:all .12s;}
.action-btn:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(255,209,0,.04);}
.action-btn.primary{border-color:var(--yellow);color:var(--yellow);}
.action-btn.primary:hover{background:var(--yellow);color:var(--dark);}
.action-btn.danger{border-color:var(--red);color:var(--red);}
.action-btn:disabled{opacity:.3;pointer-events:none;}

/* ── FULL MAP SCREEN ── */
#screen-fullmap{flex-direction:column;background:#060A10;z-index:50;}
#fullmap-bar{background:var(--panel);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:16px;flex-shrink:0;}
#fullmap-bar .time-val{font-size:13px;}
#fullmap-location{flex:1;text-align:center;font-size:11px;color:var(--muted);}
.fullmap-controls{display:flex;gap:6px;}
.fmap-btn{background:var(--mid);border:1px solid var(--border);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:10px;padding:6px 12px;cursor:pointer;letter-spacing:1px;transition:all .15s;}
.fmap-btn:hover{border-color:var(--yellow);color:var(--yellow);}
#fullmap-canvas-wrap{flex:1;position:relative;overflow:hidden;}
#map-canvas{position:absolute;inset:0;cursor:grab;}
#map-canvas:active{cursor:grabbing;}
#player-marker{position:absolute;z-index:15;transform:translate(-50%,-50%);pointer-events:none;}
.player-dot{width:10px;height:10px;background:var(--yellow);border-radius:50%;border:2px solid var(--dark);animation:pulse-player 2s infinite;position:relative;z-index:2;}
@keyframes pulse-player{0%,100%{box-shadow:0 0 0 0 rgba(255,209,0,.7)}50%{box-shadow:0 0 0 8px rgba(255,209,0,0)}}
.location-tooltip{position:absolute;background:rgba(10,10,10,.97);border:1px solid var(--yellow);padding:8px 13px;font-size:10px;pointer-events:none;display:none;z-index:20;white-space:nowrap;}
.location-tooltip .loc-name{color:var(--yellow);font-weight:700;letter-spacing:1px;}
.location-tooltip .loc-type{color:var(--muted);font-size:9px;}
.location-tooltip .loc-action{color:var(--green);font-size:9px;margin-top:3px;}

/* Subway legend */
#map-legend{position:absolute;bottom:10px;right:14px;background:rgba(10,10,10,.9);border:1px solid var(--border);padding:8px 12px;z-index:10;pointer-events:none;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted);margin:2px 0;}
.legend-line{width:18px;height:3px;border-radius:2px;}

/* ── EVENT MODAL ── */
#screen-event{position:fixed;inset:0;background:rgba(0,0,0,.87);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
#event-modal{background:var(--panel);border:1px solid var(--border);width:min(560px,92vw);max-height:88vh;overflow-y:auto;}
.event-header{background:var(--mid);padding:18px 22px 14px;border-bottom:1px solid var(--border);}
.event-type-tag{font-size:8px;letter-spacing:3px;color:var(--muted);margin-bottom:5px;}
.event-title{font-family:'Bebas Neue',cursive;font-size:30px;color:var(--yellow);letter-spacing:2px;line-height:1;}
.event-location{font-size:9px;color:var(--muted);margin-top:3px;}
.event-body{padding:18px 22px;}
.event-description{font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:1.7;color:#CCC;margin-bottom:16px;}
.event-character{display:flex;align-items:flex-start;gap:12px;background:var(--mid);border:1px solid var(--border);padding:12px;margin-bottom:16px;}
.char-avatar{font-size:32px;flex-shrink:0;}
.char-name{font-size:13px;font-weight:700;}
.char-desc{font-size:10px;color:var(--muted);margin-top:2px;font-family:'IBM Plex Sans',sans-serif;font-style:italic;}
.task-box{background:rgba(255,209,0,.04);border:1px solid rgba(255,209,0,.18);padding:12px;margin-bottom:14px;}
.task-title{font-size:9px;letter-spacing:2px;color:var(--yellow);margin-bottom:6px;}
.task-desc{font-size:12px;font-family:'IBM Plex Sans',sans-serif;color:var(--text);line-height:1.5;}
.event-stakes{display:flex;gap:10px;margin-bottom:16px;}
.stake-item{flex:1;padding:9px;background:var(--mid);border:1px solid var(--border);text-align:center;}
.stake-val{font-size:15px;font-weight:700;}
.stake-val.pos{color:var(--green);}
.stake-val.neg{color:var(--red);}
.stake-label{font-size:8px;color:var(--muted);letter-spacing:1px;margin-top:2px;}
.event-choices{display:flex;flex-direction:column;gap:7px;}
.choice-btn{background:transparent;border:1px solid var(--border);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:11px 14px;cursor:pointer;text-align:left;transition:all .12s;display:flex;align-items:center;gap:10px;}
.choice-btn:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(255,209,0,.04);}
.choice-btn:disabled{opacity:.35;pointer-events:none;}
.choice-key{font-size:8px;border:1px solid currentColor;padding:2px 5px;flex-shrink:0;opacity:.65;}

/* Minigame */
#minigame-wrap{padding:0 22px 18px;}
#minigame-area{background:var(--dark);border:1px solid var(--border);height:150px;position:relative;overflow:hidden;cursor:pointer;user-select:none;}
.mg-instruction{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:var(--muted);text-align:center;pointer-events:none;}
.mg-target{position:absolute;width:38px;height:38px;border:2px solid var(--yellow);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;animation:mg-appear .18s ease;}
@keyframes mg-appear{from{transform:scale(0)}to{transform:scale(1)}}
.mg-target:hover{background:rgba(255,209,0,.1);transform:scale(1.1);}
.mg-bar-wrap{margin-top:7px;display:flex;align-items:center;gap:10px;font-size:9px;color:var(--muted);}
.mg-bar{flex:1;height:3px;background:var(--border);}
.mg-bar-fill{height:100%;background:var(--yellow);transition:width .1s;}

/* Shop grid */
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px 22px;}
.shop-item{background:var(--mid);border:1px solid var(--border);padding:11px;cursor:pointer;transition:border-color .2s;}
.shop-item:hover{border-color:var(--yellow);}
.shop-item-icon{font-size:22px;margin-bottom:5px;}
.shop-item-name{font-size:10px;color:var(--text);margin-bottom:2px;}
.shop-item-desc{font-size:8px;color:var(--muted);margin-bottom:7px;font-family:'IBM Plex Sans',sans-serif;}
.shop-item-price{font-size:13px;color:var(--yellow);font-weight:700;}
.shop-item.cant-afford{opacity:.35;pointer-events:none;}

/* Notifications */
#notif-area{position:fixed;top:14px;right:295px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.notif{background:var(--mid);border-left:3px solid var(--yellow);padding:9px 13px;font-size:10px;animation:notif-in .25s ease,notif-out .3s ease 3.1s forwards;max-width:240px;}
.notif.green{border-color:var(--green);}
.notif.red{border-color:var(--red);}
.notif.orange{border-color:var(--orange);}
@keyframes notif-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes notif-out{from{opacity:1}to{opacity:0}}

/* Scrollbar */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--border);}