/* Mobile-first urban comic system. Existing gameplay IDs and API contracts preserved. */
#map{touch-action:none}
@media(max-height:500px){body[data-view=missions] #hud,body[data-view=neighborhood] #hud,body[data-view=missions] #res,body[data-view=neighborhood] #res{display:none}body[data-view=missions] #panel,body[data-view=neighborhood] #panel{top:8px;left:10px;right:10px;width:auto;bottom:76px}.panel-heading{padding:8px 14px 4px}.panel-heading h2{font-size:22px}.tabs button{min-height:34px}#btn-account{min-height:34px}.welcome-content h1{font-size:36px}.welcome-content .eyebrow{margin-bottom:0}.welcome-content p{font-size:13px}.welcome-content button{min-height:40px;margin-bottom:6px}.welcome-content small{font-size:10px}.welcome-content{padding:15px 22px}}
#map canvas{touch-action:none}#mobile-map-tools{display:none}body.playing #mobile-map-tools{display:flex;position:fixed;z-index:550;left:10px;top:120px;flex-direction:column;gap:6px}#mobile-map-tools button{width:44px;padding:8px;background:#162228f5}.profile-record{display:flex;justify-content:space-around;gap:8px;margin:12px 0 18px;text-align:center;font-size:11px;color:var(--muted)}.profile-record b{display:block;color:var(--gold);font-size:25px}#territory-map{background:repeating-linear-gradient(35deg,#293b3f,#293b3f 24px,#1b2c31 25px,#1b2c31 30px);border:1px solid #728689;border-radius:10px}#territory-map svg{width:100%;height:150px}#territory-description{font-size:13px;line-height:1.7}#territory-attack{width:100%}@media(min-width:1024px){body.playing #mobile-map-tools{display:none}}
:root{--bg:#121c20;--panel:#172226;--panel2:#243237;--text:#f4eee2;--muted:#b3bcb5;--accent:#ff762f;--gold:#f7c456;--blue:#45d8df;--green:#58d497;--radius:12px;--font:'Segoe UI',system-ui,sans-serif}
body{overscroll-behavior:none}button,input,a{touch-action:manipulation}button{min-height:44px;font-weight:650;border:1px solid #ffffff20;border-radius:10px;background:linear-gradient(145deg,#2a373b,#1c282d)}button.primary{background:linear-gradient(110deg,#ff682c,#ff8b35);color:#191d1d;border:1px solid #ffbd7445;font-weight:800}button:disabled{opacity:.5;filter:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}button.ghost{background:#101a2040;border-color:#7c8d8e70}input{min-height:46px;border-color:#66767770;background:#101a1e;border-radius:9px;font-size:16px;color:var(--text)}h1,h2,h3,.arena-name,.eyebrow{font-family:'Arial Narrow','Impact','Trebuchet MS',sans-serif}h1{font-size:38px;font-style:normal;letter-spacing:-.03em;color:var(--text);text-shadow:none;line-height:1.02}h2{font-size:27px;letter-spacing:-.03em}h3{font-size:23px}small,.hint{line-height:1.5}.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--gold);display:block;margin-bottom:10px}.ui-icon{height:22px;width:22px;vertical-align:middle;flex:none}.sheet{background:linear-gradient(145deg,#1c282d,#121d22);border:1px solid #72818260;padding:22px;border-radius:16px;box-shadow:0 18px 70px #0009}.overlay{background:#050d12cc;backdrop-filter:blur(4px);padding:12px}.sheet.small{max-width:440px}.hidden{display:none!important}
/* Entry: a real illustrated cover, all words/buttons remain accessible HTML. */
#create[data-step=character] h1{font-size:30px;margin:0}#create[data-step=character] .tag,#create[data-step=character] .tagline{display:none}#create[data-step=character] .sheet>p{display:none}#create[data-step=character] .creation-steps{margin:14px 0 10px}#create[data-step=character] .create-preview .big-avatar{height:150px;width:140px}#create[data-step=character] .stat-list{padding:9px;gap:6px}#create[data-step=character] .create-preview{gap:8px}#create[data-step=character] .create-form>label:first-child{margin-bottom:6px}
#welcome{z-index:1050;background:#111b20}.welcome-card{position:relative;max-width:420px;width:100%;height:min(850px,100dvh - 24px);overflow:hidden;border:1px solid #60777970;border-radius:18px;background:#172226}.welcome-art{position:absolute;inset:0;background:linear-gradient(0deg,#0b161b 0%,#0b161b11 55%,#0b161b44 100%),url('art/welcome.webp') center/cover}.welcome-content{position:relative;height:100%;padding:34px 24px 22px;display:flex;flex-direction:column;align-items:flex-start}.welcome-content h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:64px;transform:rotate(-3deg);text-shadow:4px 5px #111b20;letter-spacing:-.04em}.welcome-content h1 em{color:var(--accent);font-style:normal}.welcome-content p{font-weight:700;text-shadow:0 2px 6px #000}.welcome-content button{width:100%;font-size:18px;min-height:54px;margin-bottom:10px}.welcome-content button:first-of-type{margin-top:auto}.welcome-content small{text-align:center;font-size:12px;color:#cad2cb;width:100%;margin-top:5px}.welcome-content .eyebrow{font-family:var(--font);background:#111b2090;padding:7px;border-radius:4px}
#create{background:#0c161bea;pointer-events:auto;align-items:center}#create .sheet{margin:0;max-width:440px}.create-grid{display:block}.create-preview{gap:10px}.create-preview .big-avatar{width:170px;height:190px;background:radial-gradient(ellipse at bottom,#f8763230,transparent 70%),url('art/arena.webp') center/cover;border:1px solid #84918b40;border-radius:12px;padding:12px}.create-preview #btn-face,.create-preview #btn-reroll{width:100%;font-size:14px}.create-preview #create-next{width:100%;margin-top:8px;min-height:49px}.create-form{gap:12px}#create .tag{font-size:12px;margin:9px 0 14px}.creation-steps{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:13px;font-weight:700}.creation-steps button{padding:0;width:40px}.creation-steps span{flex:1;border-bottom:2px solid #ffffff16;padding-bottom:8px}.creation-steps span.active{color:var(--accent);border-color:var(--accent)}#create[data-step=character] .create-form{display:none}#create[data-step=neighborhood] .create-preview{display:none}#create[data-step=neighborhood] .create-form{display:flex}#create[data-step=character] .create-preview{display:flex}#create-name{margin-bottom:2px}#create[data-step=character] .create-preview::before{content:'CREA TU BRUTO';font-weight:800;font-size:17px;letter-spacing:.04em}#create[data-step=character] .create-grid{display:flex;flex-direction:column}#create[data-step=character] .create-form>label:first-child{display:flex}#create[data-step=character] .create-form{display:contents}#create[data-step=character] .create-form>*:not(:first-child){display:none}.create-preview{order:2}#create[data-step=character] .create-form>label:first-child{order:1;margin-bottom:12px}.stat-list{padding:12px;background:#0c171980;border:1px solid #697b7f50;border-radius:10px;gap:9px;font-size:13px}.stat-list .bar{height:6px}.stat-list .bar span{background:var(--blue)}.chip{border:1px solid #677e8055;padding:6px 9px;font-size:12px;border-radius:7px}.place{padding:12px;background:#44d8df12;border:1px solid #44d8df40;border-radius:10px;font-size:13px}#account .account-art{height:120px;background:linear-gradient(0deg,#172226,transparent),url('art/welcome.webp') center 60%/cover;margin:-22px -22px 20px}#account-form small{color:var(--muted);font-size:11px;display:block;margin-top:7px}#account-submit{width:100%;min-height:50px}
/* Compact mobile HUD and persistent thumb navigation. */
#hud{top:max(8px,env(safe-area-inset-top));left:8px;right:8px;align-items:center;gap:4px;z-index:500}.hud-card{padding:5px 8px 5px 4px;border:1px solid #6e848660;background:#162228f5;max-width:calc(100vw - 74px)!important;gap:7px}.hud-info{min-width:90px;max-width:160px}.hud-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.hud-info span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-avatar{width:42px;height:44px;background:#25373c;border-radius:8px}.xpbar{background:#61727540;height:4px;margin-top:3px}.xpbar span{background:var(--accent)}.hud-actions{max-width:none;flex-wrap:nowrap}.hud-actions button{padding:9px;min-width:44px;background:#162228f5;border:1px solid #637e8060}.hud-actions #btn-move,.hud-actions #btn-sv,.hud-actions #btn-home,.hud-actions #btn-center{display:none}.hud-actions #btn-panel{font-size:18px}#res{top:max(72px,calc(env(safe-area-inset-top) + 70px));left:8px;padding:5px 8px;gap:10px;font-size:12px;border:1px solid #6e848650;background:#162228f5;border-radius:9px}#res button{min-height:30px;font-size:12px}#res .enbar{width:35px;margin-left:2px}#en-next{display:none}#game-nav{position:fixed;bottom:0;left:0;right:0;z-index:800;height:calc(65px + env(safe-area-inset-bottom));padding:5px 8px calc(5px + env(safe-area-inset-bottom));display:flex;background:#111d23f7;border-top:1px solid #78909160;gap:4px;box-shadow:0 -8px 24px #0003}#game-nav button{flex:1;min-width:0;background:transparent;border:none;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--muted);padding:4px}#game-nav button.active{background:#ff792720;color:var(--accent)}#game-nav button.active::after{content:'';height:2px;width:26px;border-radius:2px;background:var(--accent)}#game-nav .ui-icon{height:23px;width:23px}#connection-status{position:fixed;z-index:950;top:110px;left:12px;right:12px;font-size:12px;background:#513b1bef;border:1px solid var(--gold);padding:10px 14px;border-radius:8px;pointer-events:none}
/* Contextual map tools and territories. */
body:has(#home-banner:not(.hidden)) #mobile-map-tools{top:238px}body[data-view=missions] #home-banner,body[data-view=neighborhood] #home-banner,body[data-view=missions] #mobile-map-tools,body[data-view=neighborhood] #mobile-map-tools{display:none!important}#res .ui-icon{width:16px;height:16px;color:var(--gold)}.mission-card progress{appearance:none;border:0;background:#4a6266;border-radius:8px;overflow:hidden}.mission-card progress::-webkit-progress-bar{background:#4a6266}.mission-card progress::-webkit-progress-value{background:var(--blue)}.mission-card progress::-moz-progress-bar{background:var(--blue)}
.map-local-controls{bottom:calc(84px + env(safe-area-inset-bottom));left:10px;flex-direction:column}.map-local-controls button{min-width:44px;background:#17272cef;border-color:#82969660}.map-local-credit{bottom:calc(69px + env(safe-area-inset-bottom));right:7px;background:#142124c0;padding:2px 4px;font-size:9px}.map-local-label{display:none}.hv-pin .lbl{font-size:10px;border-width:1px;border-color:#e3dfbd;background:#132128f0;max-width:150px;overflow:hidden;text-overflow:ellipsis;padding:3px 7px;border-radius:6px;box-shadow:0 2px 4px #0005}.hv-pin.me .lbl{color:#f7cc66;border-color:#f7cc66}.hv-pin.npc .lbl{border-color:#ed886f}.hv-pin .fig{width:42px;height:55px}.hv-pin.me .fig{width:48px;height:63px}.hv-pin .shadow{background:#0a121980}.hv-pin .bubble{border:1px solid #88999a}#home-banner{top:120px;max-width:calc(100vw - 24px);border:1px solid #f7c45680;border-radius:10px;padding:11px 13px;background:#18282bee;line-height:1.45;font-size:12px}#home-banner b{font-size:15px}#zone{bottom:calc(78px + env(safe-area-inset-bottom));max-height:170px;width:calc(100vw - 78px);left:auto;right:10px;transform:none;padding:4px 8px;border:1px solid #758d8f60;background:#16252bed;border-radius:11px;overflow:auto;overscroll-behavior:contain}#zone-list{gap:0}.zrow{padding:8px 3px;gap:5px;border-bottom:1px solid #ffffff12;flex-wrap:wrap}.zrow:last-child{border-bottom:0}.zinfo{font-size:12px;flex:1;min-width:135px}.zinfo small{font-size:10px}.zrow button{font-size:11px;min-height:36px;padding:8px}.zrow .sw{width:7px;height:7px}.home-mark span{font-size:25px}.home-mark small{font-size:10px}body[data-view=missions] #zone,body[data-view=neighborhood] #zone{display:none}#toasts{top:115px;width:calc(100vw - 24px)}.toast{font-size:12px;border:1px solid #92a29a60;background:#1b2c30f5;line-height:1.5;max-width:100%;padding:12px 16px}
/* Browsable screens, rather than a mobile half-height desktop sidebar. */
.arena-hp{display:block;font-family:var(--font);font-size:11px;color:var(--blue);font-weight:600;margin-top:5px}.arena-head{align-items:center}.arena-foot{flex-shrink:0}.stage{flex-shrink:1;min-height:160px}.arena-box{overflow:auto;max-height:calc(100dvh - 24px)}
#panel{top:120px;bottom:calc(76px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;max-width:none;height:auto;border:1px solid #778c8f60;background:#15242bf9;z-index:700;border-radius:13px;box-shadow:0 12px 50px #0008}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 8px;gap:8px}.panel-heading small{font-size:9px;letter-spacing:.13em;color:var(--accent)}.panel-heading h2{margin:4px 0;font-size:26px}.panel-heading button{padding:0;width:38px;min-height:38px;font-size:25px;background:transparent}.tabs{padding:0 12px;gap:5px;flex-wrap:nowrap!important}.tabs button{font-size:12px;border-radius:8px;min-height:40px;border:1px solid #677b7d50;padding:6px}.tabs button.active{color:#161d20;background:var(--accent);border-color:var(--accent)}.tab{padding:12px 16px;overscroll-behavior:contain}#tab-missions{padding:10px 16px}.mvp-intro{padding:0}.mvp-intro h3{display:none}.mvp-intro p{margin:8px 0 14px}.mvp-intro small{display:none}.section-intro{color:var(--muted);font-size:12px;margin:2px 0 14px}#near-list li{padding:10px 0;gap:10px;border-bottom:1px solid #72848630;border-radius:0}#near-list .mini-avatar{width:43px;height:45px;flex:none}#near-list .who b{font-size:13px;color:var(--text);white-space:normal}#near-list .who small{font-size:10px}.fight-btn{color:#172025;background:var(--accent);font-size:12px;min-height:38px}#near-list li>button{font-size:12px;min-height:38px}.mission-card{margin-top:10px;padding:13px;background:#202f3455;border-color:#71878755;border-radius:10px}.mission-card h4{font-size:15px;margin:0}.mission-card p{font-size:11px;margin:6px 0}.mission-card small{color:#d4dfd7;font-size:12px}.mission-card progress{accent-color:var(--blue);height:8px}.mission-card button{min-height:38px;font-size:12px}.mission-card.completed{border-color:#5ed99a80;background:#58d4970a}.mission-card.completed button{background:var(--gold);color:#172025;border:none}.training-card{display:flex;align-items:center;gap:12px;width:100%;padding:13px;text-align:left;border-color:#ed813b99;background:#68382333}.training-card span{flex:1}.training-card strong{font-size:16px;display:block}.training-card small{font-size:10px;display:block;color:var(--muted);line-height:1.5}.training-card b{background:var(--accent);color:#172025;padding:10px;border-radius:7px}.history-row{font-size:12px;padding:10px;border:1px solid #71878740;border-radius:7px;margin:8px 0}.history-row small{font-size:10px}#rank-list{list-style:none;padding:0;counter-reset:rank}#rank-list li{counter-increment:rank;position:relative;min-height:62px;border:1px solid #7b8e8f40;border-radius:9px;padding:12px 10px 10px 42px;margin-bottom:8px;font-size:14px;background:#23343966}#rank-list li::before{content:counter(rank);position:absolute;left:12px;top:15px;width:20px;font-weight:800;color:var(--gold);font-size:21px}#rank-list small{display:block;font-size:11px;margin-top:3px}#rank-list li:has(b){border-color:var(--accent)}#chat-list{gap:10px;padding-bottom:10px}#chat-list li{font-size:13px;line-height:1.6;background:#293a3e;padding:12px;border-radius:10px}#chat-list b{display:block;font-size:11px;color:var(--blue)}#chat-list li.sys{background:#44382550;border:1px solid #88704655;font-size:11px;font-style:normal;color:#dacfb7}#chat-form input{min-width:0}#chat-form button{background:var(--accent);color:#172025;padding:9px}#btn-account{margin:0;border-radius:0;min-height:45px;border-width:1px 0 0;font-size:11px;background:#101d2290}.sheet-head{align-items:flex-start;flex-direction:column}.sheet-head .big-avatar{width:100%;height:200px;background:linear-gradient(0deg,#172226,transparent),url('art/arena.webp') center/cover;border-radius:10px;padding:18px}.sheet-head .big-avatar svg{max-width:150px;display:block;margin:auto}.sheet-head h2{font-size:30px;margin:8px 0}#sheet .sheet{max-width:450px}#sheet .close{min-height:44px;font-size:13px}.lu-options{gap:12px}.lu-options button{padding:20px;border-radius:11px;font-size:16px;text-align:left}.lu-options button.selected{border-color:var(--blue);background:#45d8df18}#lu-confirm{margin-top:18px;width:100%;min-height:48px}#levelup h2{font-size:38px;color:var(--gold)}.daily-streak{display:flex;justify-content:center;gap:12px;margin:22px 0}.daily-streak>div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 20px;border:1px solid #83949450;border-radius:10px}.daily-streak>div.earned{border-color:var(--gold);background:#f7c45612;color:var(--gold)}.daily-streak small{font-size:11px}#daily-btn{width:100%;min-height:48px}.mini-bar{height:38px;border:2px solid #7e9092;background:#432e2e}#mini-zone{background:linear-gradient(90deg,#56843c,#56c583,#56843c)}#mini h2{font-size:38px}#mini-btn{min-height:54px;color:#1d2529;font-size:19px}#mini-text{font-size:13px}.mini-bar+#mini-hits{margin-top:16px}#facepick .gen-btns button{min-height:49px;font-size:13px}#facepick-app{font-size:11px!important}#face-zoom{accent-color:var(--accent)}.arena-box{border:1px solid #87929270;background:#15242a;border-radius:14px;max-width:940px}.arena-head{background:#102025;padding:14px;gap:10px}.arena-name{font-size:16px;min-width:0}.vs{font-size:19px}.stage{height:290px;background:url('art/arena.webp') center bottom/cover}.stage::before,.stage-street{display:none}.ftr{width:120px;height:160px}.ftr .hpb{height:8px;border:1px solid #b5c4ba50}.log{height:95px;font-size:11px;border-top:1px solid #ffffff15}.arena-foot{padding:12px;justify-content:space-between;gap:6px}.arena-foot button{min-height:40px;font-size:12px}.result-banner{font-family:Impact,sans-serif;font-size:40px;align-items:flex-start;padding-top:20px;text-shadow:3px 3px #132128}.result-banner.win{color:var(--gold)}#arena-summary{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:16px;background:#0e1b21;border-top:1px solid #83959240}.reward-chip{padding:10px 16px;background:#27373b;border:1px solid #f7c45660;border-radius:8px;color:var(--gold);font-size:14px;font-weight:700}.arena-replay{border-color:#647f7f!important}.arena-box:has(#arena-summary:not(.hidden)) .log{display:none}
@media(min-width:1024px){#hud{top:16px;left:18px;right:18px}.hud-card{min-width:220px;padding:7px 12px 7px 5px}.hud-info{max-width:230px}.hud-info strong{font-size:16px}.hud-info span{font-size:11px}.hud-actions #btn-center,.hud-actions #btn-home:not(.hidden),.hud-actions #btn-move{display:block}.hud-actions #btn-sv{display:none}#res{left:auto;right:200px;top:21px;padding:8px 14px;gap:17px;font-size:13px}#res .enbar{width:60px}#game-nav{left:50%;transform:translateX(-50%);right:auto;width:520px;bottom:12px;height:66px;border:1px solid #748e8e60;border-radius:13px;padding:5px 10px}#game-nav button{flex-direction:row;gap:10px;font-size:13px}#game-nav button.active::after{display:none}#panel{top:94px;right:18px;left:auto;bottom:98px;width:340px;max-height:790px}body[data-view=missions] #panel{width:440px}#zone{width:430px;right:auto;left:50%;transform:translateX(-50%);bottom:91px;max-height:210px}.zrow{flex-wrap:nowrap}.zinfo{font-size:13px}.zinfo small{font-size:11px}.map-local-controls{bottom:100px;left:18px}.map-local-label{display:block;bottom:205px;left:18px;font-size:10px;pointer-events:none}.map-local-credit{bottom:7px;right:10px}#home-banner{top:94px;width:440px}.stage{height:390px}.ftr{width:125px;height:175px}.arena-name{font-size:22px}#connection-status{width:420px;left:50%;transform:translateX(-50%)}#toasts{width:auto;max-width:540px}.toast{font-size:13px}#create .sheet{max-width:510px;padding:28px}#create .big-avatar{height:210px;width:185px}.welcome-card{max-width:470px}.overlay{padding:22px}}
@media(max-height:680px){.welcome-content{padding:22px}.welcome-content h1{font-size:48px}.create-preview .big-avatar{height:135px;width:125px}#create .sheet{padding:16px}.stat-list{gap:5px}.stage{height:215px}.sheet-head .big-avatar{height:145px}#home-banner span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}