:root{--cyan:#18a7ff;--green:#25e886;--bg:#05080d;--panel:rgba(5,10,16,.78);--line:rgba(255,255,255,.16);--text:#f4f8ff;--muted:#aab6c7}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#020407;color:var(--text);font-family:Inter,system-ui,Arial,sans-serif}button{font:inherit;color:inherit}.screen{display:none;width:100%;height:100%;position:relative}.screen.active{display:block}
#menu{overflow:auto;background:#030609}.menuBackdrop{position:fixed;inset:0;background:url('assets/menu-bg.webp') center/cover no-repeat;filter:saturate(.9) brightness(.55);transform:scale(1.04);animation:drift 16s ease-in-out infinite alternate}.menuShade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(2,6,10,.15),rgba(2,6,10,.72) 58%,#030609 100%),linear-gradient(90deg,rgba(0,0,0,.32),transparent 45%,rgba(0,0,0,.22))}@keyframes drift{to{transform:scale(1.08) translateX(-1.2%)}}
.menuWrap{position:relative;z-index:2;width:min(1280px,100%);margin:auto;padding:28px 18px 36px}.brandbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.miniBrand{font-size:.72rem;font-weight:900;letter-spacing:.18em;color:#a6dcff}.brandbar h1{margin:6px 0 5px;font-size:clamp(2rem,4.5vw,4rem);line-height:.95;text-shadow:0 5px 28px #000}.brandbar p{margin:0;max-width:750px;color:#d2dbea}.statusLive{margin-top:8px;padding:10px 14px;border:1px solid rgba(37,232,134,.3);border-radius:999px;background:rgba(5,12,16,.72);font-size:.72rem;font-weight:900;letter-spacing:.11em;white-space:nowrap}.statusLive span{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 14px var(--green);margin-right:7px}
.choiceSection{margin:18px 0}.sectionTitle{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:900;letter-spacing:.11em}.sectionTitle b{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:rgba(24,167,255,.15);border:1px solid rgba(24,167,255,.55);color:#8cd3ff}.sectionTitle span{font-size:.82rem}.avatarGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.placeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.gameCard,.placeCard{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;background:#080d13;padding:0;cursor:pointer;min-height:285px;transition:.18s}.placeCard{min-height:150px}.gameCard img,.placeCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.25s}.cardShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18) 48%,rgba(0,0,0,.86) 100%)}.cardText{position:absolute;left:15px;bottom:14px;z-index:2;text-align:left}.cardText strong{display:block;font-size:1.02rem;letter-spacing:.06em}.cardText small{display:block;color:#bdc9d8;margin-top:4px}.check{position:absolute;right:12px;top:12px;z-index:3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#087cc9;border:1px solid #8fd6ff;box-shadow:0 0 18px rgba(24,167,255,.72);font-weight:900}.lock{position:absolute;z-index:3;right:10px;top:10px;background:rgba(0,0,0,.68);padding:7px 9px;border-radius:999px;font-size:.68rem;font-weight:900}.activeCard:hover{transform:translateY(-3px) scale(1.006);border-color:#5fc5ff;box-shadow:0 0 0 2px rgba(24,167,255,.2),0 0 30px rgba(24,167,255,.25)}.activeCard:hover img{transform:scale(1.035);filter:brightness(1.14)}.selected{border-color:#50bfff;box-shadow:0 0 0 2px rgba(24,167,255,.12),0 0 24px rgba(24,167,255,.22)}.disabled{cursor:not-allowed;filter:saturate(.25) brightness(.58)}.disabled::before{content:'';position:absolute;inset:0;z-index:4;background:rgba(2,5,9,.16)}
.launchRow{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(4,9,14,.72);backdrop-filter:blur(8px)}.selectedInfo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.selectedInfo span{font-size:.65rem;letter-spacing:.11em;color:#9eacbf}.selectedInfo strong{font-size:.95rem}.selectedInfo i{font-style:normal;color:#50bfff}.launchBtn{border:0;border-radius:13px;padding:14px 22px;background:linear-gradient(180deg,#31f58c,#13bc61);color:#061109;font-weight:1000;letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 24px rgba(37,232,134,.18)}
#game{overflow:hidden;background:#050a10}
.world{position:absolute;inset:0;overflow:hidden;background:#0a1119}
.horizonPhoto{
  position:absolute;inset:0;
  background:url('assets/colon_horizon.webp') center 43%/cover no-repeat;
  filter:saturate(.88) contrast(1.04) brightness(.82);
  transform:scale(1.03);
}
.sideBuildings{
  position:absolute;top:8%;bottom:0;width:47%;z-index:2;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(.82) contrast(1.04) brightness(.72);
  will-change:transform,background-position;
}
.leftBuildings{
  left:-7%;
  background-image:url('assets/colon_left.webp');
  background-position:right bottom;
  clip-path:polygon(0 0,84% 8%,100% 100%,0 100%);
}
.rightBuildings{
  right:-7%;
  background-image:url('assets/colon_right.webp');
  background-position:left bottom;
  clip-path:polygon(16% 8%,100% 0,100% 100%,0 100%);
}

.worldShade{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,5,9,.05) 0%,rgba(2,5,9,.03) 38%,rgba(2,5,9,.10) 58%,rgba(2,5,9,.28) 100%),
    radial-gradient(circle at 50% 52%,transparent 0 34%,rgba(0,0,0,.20) 72%,rgba(0,0,0,.52) 100%);
}

.playerWrap{position:absolute;left:50%;bottom:18px;width:min(24vw,300px);height:min(62vh,520px);transform:translateX(-50%);transform-origin:center bottom;pointer-events:none;will-change:transform}.playerWrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:1!important;filter:none;will-change:contents,transform}
.hud{position:absolute;top:13px;display:flex;gap:8px;z-index:5}.topLeft{left:13px}.topRight{right:13px}.hud>div{background:var(--panel);border:1px solid var(--line);padding:9px 12px;border-radius:13px;backdrop-filter:blur(7px)}.hud span,.missionBox span{display:block;font-size:.61rem;letter-spacing:.13em;color:#a5b2c4;font-weight:900}.hud strong{font-size:.9rem}.hud button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:24px;cursor:pointer}.missionBox{position:absolute;left:13px;top:76px;max-width:min(520px,75vw);padding:10px 13px;border-radius:13px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(7px);z-index:5}.missionBox strong{font-size:.86rem;line-height:1.35}.controls{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.62);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:.72rem;color:#cbd5e2;white-space:nowrap}
#touchControls{display:none;position:absolute;left:14px;bottom:18px;z-index:9;gap:7px}#touchControls button{width:58px;height:58px;border-radius:15px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.5);font-weight:900}
@media(max-width:800px){.menuWrap{padding:16px 10px 26px}.brandbar{flex-direction:column}.avatarGrid,.placeGrid{grid-template-columns:1fr}.gameCard{min-height:230px}.placeCard{min-height:135px}.launchRow{align-items:stretch;flex-direction:column}.launchBtn{width:100%}.playerWrap{width:min(42vw,270px);height:58vh}.topRight{top:64px}.missionBox{top:118px;max-width:calc(100vw - 26px)}.controls{display:none}#touchControls{display:flex}}

#playerCanvas{width:384px;height:672px;display:block;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));}
#touchControls{display:flex;gap:10px;justify-content:center;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:10}
#touchControls button{width:52px;height:52px;border-radius:14px;background:#0d1522;border:1px solid rgba(255,255,255,.18);color:#fff;font:700 20px/1 system-ui}

.playerWrap{z-index:6}
.hud,.missionBox,.controls,#touchControls{z-index:10}
@media(max-width:800px){
  .sideBuildings{width:58%;top:14%}
  .leftBuildings{left:-20%}
  .rightBuildings{right:-20%}
  
}

/* V33: corredor visual sin imagen de calle */
.world{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    linear-gradient(180deg,#7e8da0 0%,#596879 34%,#303942 47%,#191f25 48%,#0d1116 100%);
}
.horizonPhoto{
  position:absolute;
  left:0;right:0;top:0;height:50%;
  background:url('assets/colon_horizon.webp') center 40%/cover no-repeat;
  filter:saturate(.78) contrast(1.02) brightness(.67);
  opacity:.68;
  transform:scale(1.03);
}
.sideBuildings{
  position:absolute;
  top:5%;
  bottom:0;
  width:47%;
  z-index:3;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(.82) contrast(1.05) brightness(.74);
  transform-origin:center bottom;
  will-change:transform;
}
.leftBuildings{
  left:-5%;
  background-image:url('assets/colon_left.webp');
  background-position:right bottom;
  clip-path:polygon(0 0,80% 7%,100% 100%,0 100%);
}
.rightBuildings{
  right:-5%;
  background-image:url('assets/colon_right.webp');
  background-position:left bottom;
  clip-path:polygon(20% 7%,100% 0,100% 100%,0 100%);
}
/* piso neutro sin textura de calle */
.world::after{
  content:'';
  position:absolute;
  left:0;right:0;top:47%;bottom:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(28,33,39,.82),rgba(8,11,15,.98)),
    radial-gradient(ellipse at 50% 0%,rgba(130,145,158,.18),transparent 55%);
}
.worldShade{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,5,9,.02) 0%,rgba(2,5,9,.04) 40%,rgba(2,5,9,.18) 100%),
    radial-gradient(circle at 50% 50%,transparent 0 32%,rgba(0,0,0,.16) 70%,rgba(0,0,0,.45) 100%);
}
.playerWrap{z-index:6}

/* V34: la escala nace desde los pies para que no parezca que el personaje vuela */
.playerWrap{transform-origin:center bottom !important;}


/* ===== V36: fondo único ===== */
.singleBackgroundWorld{
  background:
    linear-gradient(180deg, rgba(3,8,14,.08), rgba(3,8,14,.22) 58%, rgba(3,8,14,.18) 100%),
    url('assets/colon_single_bg.webp') center center / cover no-repeat;
}
.singleBackgroundWorld .worldShade{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12) 56%, rgba(0,0,0,.18) 100%),
    radial-gradient(circle at center 72%, rgba(0,0,0,0) 0, rgba(0,0,0,.04) 44%, rgba(0,0,0,.10) 100%);
}

.singleBackgroundWorld .horizonPhoto,
.singleBackgroundWorld .sideBuildings,
.horizonPhoto,
.sideBuildings,
.leftBuildings,
.rightBuildings{
  display:none !important;
}


/* ===== V37 FIX ===== */
/* Quita por completo la franja gris heredada de versiones anteriores */
.singleBackgroundWorld::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* El fondo se ve limpio, sin panel gris sobre la calle */
.singleBackgroundWorld{
  background:
    url('assets/colon_single_bg.webp') center center / cover no-repeat !important;
}

/* Sombra muy suave solamente, sin bandas horizontales */
.singleBackgroundWorld .worldShade{
  background:
    radial-gradient(circle at 50% 76%, transparent 0 48%, rgba(0,0,0,.08) 78%, rgba(0,0,0,.16) 100%) !important;
}

/* La escala siempre nace desde los pies */
.playerWrap{
  transform-origin:center bottom !important;
}

/* Photographed street sequence. Camera has no scale/zoom transform. */
.singleBackgroundWorld{background:#071019 !important}
.backgroundFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}

#loading{background:linear-gradient(180deg,rgba(3,9,17,.85),#030912),url('assets/menu-colon.webp') center/cover}
#loading.active{display:grid;place-items:center;padding:22px}
.loadingPanel{width:min(520px,100%);padding:clamp(24px,5vw,44px);border:1px solid #284253;border-radius:22px;background:rgba(5,15,25,.94);box-shadow:0 20px 80px #0008}
.loadingBrand{color:#8ed5ff;font-size:12px;font-weight:800;letter-spacing:.17em}
.loadingPanel h1{font-size:clamp(30px,5vw,42px);margin:16px 0 12px;line-height:1.05}
.loadingPanel p{color:#b9c8d9;line-height:1.5}
.loadingProgressHead{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:28px}
#loadPercent{font-size:25px;color:#70d2ff;font-variant-numeric:tabular-nums}
#loadProgress{appearance:none;width:100%;height:12px;margin:16px 0 4px;border:0;border-radius:10px;overflow:hidden;background:#1d2a39;accent-color:#26cfff}
#loadProgress::-webkit-progress-bar{background:#1d2a39;border-radius:10px}
#loadProgress::-webkit-progress-value{background:linear-gradient(90deg,#188ddf,#39efc4);border-radius:10px}
#loadProgress::-moz-progress-bar{background:#29cacf;border-radius:10px}
#loadDetail{font-size:13px;font-variant-numeric:tabular-nums;min-height:40px}
.loadingPanel .launchBtn{width:100%;margin-top:18px}
.loadingPanel .launchBtn:disabled{background:#253440;color:#8293a4;box-shadow:none;cursor:wait}
#retryLoad{width:100%;margin-top:12px;padding:12px;border-radius:12px;border:1px solid #5acaff;background:transparent;color:#bceaff;cursor:pointer}

/* V76: one viewport canvas owns all character positioning. */
#game #playerWrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;pointer-events:none;z-index:6}
#game #playerCanvas{position:absolute;inset:0;width:100%!important;height:100%!important;transform:none!important;filter:none!important}
#game .missionBox,#game .controls{display:none}
#game .hud{z-index:10;pointer-events:none}
#game #exitBtn{pointer-events:auto}
#game #touchControls{display:flex;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:20;gap:8px}
#game #touchControls button{touch-action:none;user-select:none;width:48px;height:48px}
@media(max-width:800px){#game .topRight{top:64px}#game .hud{font-size:11px}}