:root{
  --bg:#09090b;--paper:#f5f3ef;--muted:#a8a6b0;--line:#282731;
  --purple:#a935f1;--purple-soft:#cf9eff;--panel:#0f0f14;--panel-2:#15151d;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper);font-family:Inter,Arial,sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none}
.fuga-shell{width:min(1180px,100%);margin:0 auto;padding:24px clamp(18px,4vw,48px) 36px}
.fuga-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}
.brand{color:var(--paper);font-weight:900;letter-spacing:-.06em;font-size:clamp(24px,4vw,44px)}
.arcade-code,.eyebrow,.scoreboard span,.hud span,footer,.player-box label,.player-box small,.note-label{font:600 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.13em}
.arcade-code,.eyebrow,.note-label{color:var(--purple)}
.intro{padding:clamp(24px,7vw,72px) 0 22px}
.intro-copy{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;border-bottom:1px solid var(--line);padding-bottom:24px;align-items:end}
.intro h1{margin:0;font-size:clamp(76px,19vw,220px);line-height:.78;letter-spacing:-.085em;font-weight:900}
.intro p{margin:14px 0 0;font-weight:600;letter-spacing:.08em;font-size:clamp(12px,2vw,16px)}
.intro-note{border:1px solid var(--line);background:linear-gradient(180deg,#101018,#0d0d12);padding:18px;display:flex;flex-direction:column;gap:8px;align-self:stretch;justify-content:flex-end;box-shadow:0 0 0 1px rgba(169,53,241,.08) inset}
.intro-note strong{font-size:14px;letter-spacing:.08em}
.intro-note small{color:var(--muted);font:500 11px/1.5 "IBM Plex Mono",monospace}
.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);border-bottom:1px solid var(--line)}
.personal,.global{padding:22px 0}
.personal{border-right:1px solid var(--line)}
.personal strong{display:block;color:var(--purple);font:700 clamp(42px,8vw,92px)/.95 "IBM Plex Mono",monospace;margin-top:10px;text-shadow:0 0 24px rgba(169,53,241,.16)}
.global{padding-left:28px}
.global ol{padding:0;margin:12px 0 0;list-style:none}
.global li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:9px 0;border-top:1px solid #1d1c21;font:600 13px/1.2 "IBM Plex Mono",monospace}
.global li b{color:var(--purple)}
.player-box{padding:20px 0 14px}
.alias-row{display:flex;gap:0;max-width:640px;margin-top:10px}
.alias-row input{flex:1;min-width:0;border:1px solid var(--line);background:#111115;color:var(--paper);padding:14px 15px;text-transform:uppercase;outline:none}
.alias-row input:focus{border-color:var(--purple)}
.alias-row button,.start-button,.overlay-card button,.touch-controls button{border:0;background:var(--purple);color:#fff;font-weight:800;letter-spacing:.05em;padding:14px 18px}
.player-box small{display:block;color:var(--muted);margin-top:8px;letter-spacing:.02em;line-height:1.5}
.start-button{width:100%;min-height:76px;display:flex;align-items:center;justify-content:space-between;text-align:left;margin-top:10px;background:linear-gradient(90deg,var(--purple),#8f2ee5);box-shadow:0 12px 30px rgba(169,53,241,.14)}
.start-button:disabled{opacity:.35;cursor:not-allowed}
.start-button small{font:500 10px/1.3 "IBM Plex Mono",monospace}
.game-wrap{display:none;border-top:1px solid var(--line);padding-top:14px}
.game-wrap.active{display:block}
.hud{display:flex;justify-content:space-between;gap:20px;margin:4px 0 10px}
.hud div{display:flex;gap:10px;align-items:baseline;padding:10px 0}
.hud strong{font:600 18px/1 "IBM Plex Mono",monospace}
.canvas-stage{position:relative}
canvas{display:block;width:100%;height:auto;aspect-ratio:1100/420;background:#0d0d11;border:1px solid var(--line);touch-action:none;border-radius:2px;box-shadow:0 18px 48px rgba(0,0,0,.38)}
.overlay-card[hidden]{display:none!important}
.overlay-card{position:absolute;inset:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;background:rgba(10,10,14,.84);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);padding:22px}
.final-score{display:block;font:800 clamp(64px,14vw,150px)/.9 "IBM Plex Mono",monospace;color:var(--purple);letter-spacing:-.08em;margin:0;text-shadow:0 0 30px rgba(169,53,241,.2)}
.overlay-card p{font-weight:700;letter-spacing:.08em;margin:0}
.gameover-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.overlay-card button.secondary{background:#17171c;color:var(--paper);border:1px solid var(--line)}
.touch-controls{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.touch-controls button{min-height:58px;background:#121217;color:var(--paper);transition:background .16s ease, transform .16s ease}
.touch-controls button:active,.touch-controls button.is-active{background:var(--purple);transform:translateY(1px)}
footer{display:flex;justify-content:space-between;gap:20px;color:#6f6e76;border-top:1px solid var(--line);padding-top:16px;margin-top:28px}
body.embed .fuga-shell{padding-top:18px;padding-bottom:18px}
body.embed .fuga-header,body.embed footer{display:none}
body.embed .intro{padding-top:10px}
body.embed .intro h1{font-size:clamp(68px,16vw,150px)}
body.embed .intro p{margin-top:8px}
@media(max-width:800px){.intro-copy{grid-template-columns:1fr}}
@media(max-width:700px){
  .scoreboard{grid-template-columns:1fr}
  .personal{border-right:0;border-bottom:1px solid var(--line)}
  .global{padding-left:0}
  .alias-row{flex-direction:column}
  .start-button{align-items:flex-start;flex-direction:column;gap:7px}
  .overlay-card{inset:12px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:560px){
  .hud{grid-template-columns:1fr 1fr}
  .hud-status{grid-column:1/-1;grid-row:2}
}


/* BUILD 0.5 */
.hud-status{display:flex;flex-direction:column;gap:4px}
.hud-status small{font:600 9px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:#5f5d68}
.canvas-stage.is-impact canvas{animation:fuga-impact .14s ease-out}
@keyframes fuga-impact{
  0%{filter:brightness(1)}
  48%{filter:brightness(1.12)}
  100%{filter:brightness(1)}
}
.game-toast[hidden],.pause-card[hidden]{display:none!important}
.game-toast{
  position:absolute;top:22%;left:50%;transform:translate(-50%,-50%);
  color:#f5f3ef;font:800 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
  background:rgba(11,10,15,.72);border:1px solid rgba(207,158,255,.24);
  padding:10px 14px;pointer-events:none;backdrop-filter:blur(5px)
}
.game-toast.is-visible{animation:fuga-toast .52s ease-out both}
@keyframes fuga-toast{
  0%{opacity:0;transform:translate(-50%,-25%) scale(.94)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-82%) scale(.98)}
}
.pause-card{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:rgba(9,9,12,.68);backdrop-filter:blur(4px);z-index:3;text-align:center
}
.pause-card span{font:800 16px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:#f5f3ef}
.pause-card small{font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;color:#c7c4ce}
.overlay-card:not([hidden]){animation:fuga-overlay .2s ease-out both}
@keyframes fuga-overlay{
  from{opacity:0;transform:scale(.992)}
  to{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .game-toast.is-visible,.overlay-card:not([hidden]),.canvas-stage.is-impact canvas{animation:none!important}
}


/* BUILD 0.6 */
.hud-status small{transition:color .18s ease, letter-spacing .18s ease}
.hud-status.is-phase-hot small{color:#cf9eff;letter-spacing:.16em}
.game-toast{
  border-color:rgba(207,158,255,.30);
  box-shadow:0 10px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(169,53,241,.06) inset;
}
.pause-card{
  background:linear-gradient(180deg,rgba(9,9,12,.52),rgba(9,9,12,.72));
}


/* BUILD 0.7 · MADRIGUERA + PERFORMANCE */
.burrow-label[hidden]{display:none!important}
.burrow-label{
  position:absolute;left:22px;bottom:86px;z-index:2;pointer-events:none;
  font:800 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;
  color:#f5f3ef;background:#09090b;border:1px solid rgba(245,243,239,.16);
  padding:9px 11px;mix-blend-mode:difference
}
.canvas-stage.is-burrow canvas{
  box-shadow:0 18px 48px rgba(0,0,0,.48),0 0 0 1px rgba(169,53,241,.08)
}


/* BUILD 0.8 · POLISH PASS */
.sound-toggle{
  margin-left:8px;border:1px solid #2d2b35;background:#111116;color:#8e8b97;
  padding:6px 8px;font:700 9px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
  min-width:auto
}
.sound-toggle.is-on{color:#f5f3ef;border-color:#a935f1}
.phase-splash[hidden]{display:none!important}
.phase-splash{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;text-align:center;background:radial-gradient(circle at center,rgba(169,53,241,.09),rgba(9,9,11,0) 54%)
}
.phase-splash small{
  color:#cf9eff;font:700 10px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;margin-bottom:8px
}
.phase-splash strong{
  color:#f5f3ef;font:900 clamp(30px,7vw,78px)/.85 Inter,sans-serif;letter-spacing:-.06em
}
.phase-splash.is-visible{animation:fuga-phase .68s ease-out both}
@keyframes fuga-phase{
  0%{opacity:0;transform:scale(.96)}
  20%{opacity:1;transform:scale(1)}
  72%{opacity:1}
  100%{opacity:0;transform:scale(1.015)}
}
.canvas-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.10)
}
@media(prefers-reduced-motion:reduce){
  .phase-splash.is-visible{animation:none!important}
}


/* BUILD 0.9 · PERFORMANCE + MADRIGUERA 2.0 */
canvas{
  contain:strict;
  transform:translateZ(0);
}
.burrow-label{
  transition:opacity .18s ease,transform .18s ease;
}
.burrow-label.is-enter{
  border-color:rgba(169,53,241,.48);
  color:#cf9eff;
}
.burrow-label.is-exit{
  border-color:rgba(245,243,239,.32);
  color:#f5f3ef;
}


/* BUILD 0.10 · MOBILE + CINEMATIC BURROW */
.fullscreen-toggle{
  margin-left:5px;border:1px solid #2d2b35;background:#111116;color:#f5f3ef;
  padding:6px 8px;font:700 12px/1 "IBM Plex Mono",monospace;min-width:30px
}
.fullscreen-toggle:hover{border-color:#a935f1}
.rotate-hint[hidden]{display:none!important}
.rotate-hint{
  position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;
  background:rgba(9,9,11,.90);backdrop-filter:blur(8px);pointer-events:none
}
.rotate-hint strong{
  font:900 clamp(20px,7vw,34px)/1 Inter,sans-serif;letter-spacing:-.04em;color:#f5f3ef
}
.rotate-hint small{
  font:700 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.14em;color:#cf9eff
}
.hud strong,.final-score{font-variant-numeric:tabular-nums}
.hud-score--right{white-space:nowrap}

/* Touch layout is intentionally large; no tiny mobile buttons. */
@media (pointer:coarse){
  .touch-controls button{min-height:68px;font-size:13px}
  .fullscreen-toggle{display:inline-flex;align-items:center;justify-content:center}
}

/* When the phone is rotated, FUGA becomes a viewport game. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body.mobile-playing{overflow:hidden}
  body.mobile-playing .fuga-shell{
    width:100%;max-width:none;height:100vh;margin:0;padding:0;background:#09090b
  }
  body.mobile-playing .game-wrap.active{
    position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
    padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
            max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    background:#09090b;border:0
  }
  body.mobile-playing .hud{
    flex:0 0 auto;margin:0 4px 3px;min-height:39px;gap:8px;
    display:grid;grid-template-columns:1fr auto 1fr
  }
  body.mobile-playing .hud-score{padding:6px 0}
  body.mobile-playing .hud strong{font-size:15px}
  body.mobile-playing .hud-status{padding:5px 0}
  body.mobile-playing .hud-status>span{font-size:9px}
  body.mobile-playing .hud-status small{font-size:8px}
  body.mobile-playing .canvas-stage{
    flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
    overflow:hidden;background:#09090b
  }
  body.mobile-playing canvas{
    width:min(100vw,calc((100vh - 96px) * 2.619));
    max-width:100vw;height:auto;max-height:calc(100vh - 96px);
    border:0;box-shadow:none
  }
  body.mobile-playing .touch-controls{
    position:absolute;z-index:6;left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    bottom:max(7px,env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1.35fr .65fr;gap:10px;background:transparent;
    pointer-events:none
  }
  body.mobile-playing .touch-controls button{
    min-height:52px;border:1px solid rgba(245,243,239,.14);
    background:rgba(9,9,13,.54);backdrop-filter:blur(5px);
    color:rgba(245,243,239,.76);pointer-events:auto;border-radius:3px
  }
  body.mobile-playing .touch-controls button:active,
  body.mobile-playing .touch-controls button.is-active{
    background:rgba(169,53,241,.75);color:#fff
  }
  body.mobile-playing .overlay-card{inset:5px;padding:12px}
  body.mobile-playing .final-score{font-size:clamp(48px,15vh,96px)}
  body.mobile-playing footer,body.mobile-playing .fuga-header{display:none!important}
}

/* Portrait does not start killing you while you rotate. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:900px){
  body.mobile-playing .canvas-stage{min-height:210px}
  body.mobile-playing .touch-controls button{min-height:72px}
}


/* BUILD 0.11 · MOBILE ENGINE 2 + PURPLE NEGATIVE */
.rotate-fullscreen{
  margin-top:8px;border:1px solid rgba(169,53,241,.55);background:#a935f1;color:#fff;
  padding:11px 15px;font:800 10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
  pointer-events:auto
}
body.mobile-game-active{overscroll-behavior:none}
body.mobile-game-active .fuga-shell{max-width:none}
body.mobile-game-active .game-wrap.active{touch-action:none}
body.mobile-game-active .canvas-stage{touch-action:none}

/* This class is set by JS from real viewport dimensions, not media query orientation. */
body.mobile-landscape-play{
  overflow:hidden!important;
  background:#09090b!important
}
body.mobile-landscape-play .fuga-shell{
  width:100%!important;max-width:none!important;height:100dvh!important;
  min-height:100dvh!important;margin:0!important;padding:0!important
}
body.mobile-landscape-play .game-wrap.active{
  position:fixed!important;inset:0!important;z-index:2147483000!important;
  width:100vw!important;height:100dvh!important;max-width:none!important;
  display:flex!important;flex-direction:column!important;
  padding:max(3px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right))
          max(3px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;
  margin:0!important;border:0!important;background:#09090b!important
}
body.mobile-landscape-play .fuga-header,
body.mobile-landscape-play footer{display:none!important}
body.mobile-landscape-play .hud{
  flex:0 0 36px!important;min-height:36px!important;margin:0 4px 2px!important;
  display:grid!important;grid-template-columns:1fr auto 1fr!important;
  gap:6px!important;align-items:center!important
}
body.mobile-landscape-play .hud-score{padding:3px 0!important}
body.mobile-landscape-play .hud-score span{font-size:7px!important}
body.mobile-landscape-play .hud strong{font-size:14px!important}
body.mobile-landscape-play .hud-status{padding:2px 0!important}
body.mobile-landscape-play .hud-status>span{font-size:8px!important}
body.mobile-landscape-play .hud-status small{font-size:7px!important}
body.mobile-landscape-play .sound-toggle,
body.mobile-landscape-play .fullscreen-toggle{
  padding:4px 5px!important;font-size:8px!important
}
body.mobile-landscape-play .canvas-stage{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;background:#09090b!important
}
body.mobile-landscape-play canvas{
  display:block!important;margin:auto!important;
  max-width:none!important;max-height:none!important;
  border:0!important;box-shadow:none!important
}
body.mobile-landscape-play .touch-controls{
  position:absolute!important;left:max(8px,env(safe-area-inset-left))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
  z-index:10!important;display:grid!important;grid-template-columns:1.35fr .65fr!important;
  gap:8px!important;pointer-events:none!important
}
body.mobile-landscape-play .touch-controls button{
  pointer-events:auto!important;min-height:48px!important;
  border:1px solid rgba(245,243,239,.15)!important;
  background:rgba(9,9,13,.46)!important;backdrop-filter:blur(4px)!important;
  color:rgba(245,243,239,.78)!important;border-radius:3px!important
}
body.mobile-landscape-play .touch-controls button:active,
body.mobile-landscape-play .touch-controls button.is-active{
  background:rgba(169,53,241,.72)!important;color:#fff!important
}
body.mobile-landscape-play .overlay-card{
  inset:4px!important;padding:10px!important
}
body.mobile-landscape-play .final-score{
  font-size:clamp(44px,16dvh,94px)!important
}

/* Portrait hint must sit above absolutely everything. */
body.mobile-portrait-play .rotate-hint{
  position:fixed!important;inset:0!important;z-index:2147483640!important
}


/* BUILD 0.12 · SEMESTRE / PERTENENCIA */
.global li{
  grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center
}
.global li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.semester-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;padding:4px 7px;border:1px solid rgba(169,53,241,.38);
  background:rgba(169,53,241,.09);color:#cf9eff;
  font:800 9px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;
  font-style:normal;white-space:nowrap
}
.semester-badge.is-legacy{
  border-color:#292730;background:#111116;color:#5f5d68
}
.semester-war{
  margin-top:14px;padding-top:13px;border-top:1px solid #1d1c21
}
.semester-war-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px
}
.semester-war-head>span{
  color:#f5f3ef;font:700 10px/1.2 "IBM Plex Mono",monospace;letter-spacing:.13em
}
.semester-war-head small{
  color:#5f5d68;font:600 8px/1.2 "IBM Plex Mono",monospace;letter-spacing:.05em
}
.semester-war-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px
}
.semester-war-grid>div{
  min-width:0;border:1px solid #1f1e25;background:#101015;
  padding:8px 9px;display:grid;grid-template-columns:auto 1fr;gap:3px 7px;align-items:center
}
.semester-war-grid b{
  color:#a935f1;font:700 8px/1 "IBM Plex Mono",monospace
}
.semester-war-grid strong{
  color:#f5f3ef;font:900 13px/1 "IBM Plex Mono",monospace
}
.semester-war-grid small{
  grid-column:1/-1;color:#777480;
  font:600 8px/1.15 "IBM Plex Mono",monospace;letter-spacing:.02em
}
.semester-picker{margin-top:16px;max-width:780px}
.semester-picker-label{
  display:block;margin-bottom:8px;
  font:600 11px/1.2 "IBM Plex Mono",monospace;letter-spacing:.13em
}
.semester-options{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px
}
.semester-options button{
  min-height:40px;border:1px solid #292730;background:#111115;color:#8c8994;
  font:800 10px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;
  transition:border-color .12s ease,background .12s ease,color .12s ease,transform .12s ease
}
.semester-options button:hover{
  border-color:rgba(169,53,241,.62);color:#f5f3ef
}
.semester-options button.is-selected{
  border-color:#a935f1;background:#a935f1;color:#fff;
  box-shadow:0 0 0 1px rgba(169,53,241,.14),0 8px 18px rgba(169,53,241,.12)
}
.semester-options button:active{transform:translateY(1px)}
@media(max-width:700px){
  .semester-options{grid-template-columns:repeat(4,minmax(0,1fr))}
  .semester-war-head{align-items:flex-start;flex-direction:column;gap:4px}
}
@media(max-width:420px){
  .semester-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .global li{grid-template-columns:28px minmax(0,1fr) auto auto;gap:6px;font-size:11px}
  .semester-badge{min-width:31px;padding:4px 5px;font-size:8px}
  .semester-war-grid{gap:4px}
  .semester-war-grid>div{padding:7px 6px}
}


/* BUILD 0.12.1 · MOBILE CONTROL FIX */
body.mobile-landscape-play .touch-controls{
  position:fixed!important;
  left:max(8px,env(safe-area-inset-left))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(6px,env(safe-area-inset-bottom))!important;
  z-index:2147483500!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(110px,.42fr)!important;
  gap:8px!important;
  padding:0!important;
  margin:0!important;
  pointer-events:none!important;
}
body.mobile-landscape-play .touch-controls button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  min-height:52px!important;
  padding:0 14px!important;
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}
body.mobile-landscape-play #duckButton{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}

body.mobile-landscape-play .canvas-stage{
  padding-bottom:58px!important;
  box-sizing:border-box!important
}


/* BUILD 0.13 · MOBILE GESTURES */
.gesture-hint[hidden]{display:none!important}
.gesture-hint{
  position:absolute;left:50%;bottom:12px;z-index:12;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border:1px solid rgba(245,243,239,.11);
  background:rgba(9,9,12,.54);backdrop-filter:blur(5px);
  color:rgba(245,243,239,.72);
  font:700 8px/1 "IBM Plex Mono",monospace;
  letter-spacing:.08em;white-space:nowrap;pointer-events:none
}
.gesture-hint b{color:#cf9eff;font-weight:800}
.gesture-hint i{width:1px;height:12px;background:rgba(245,243,239,.14)}
.gesture-hint.is-fading{animation:fuga-gesture-hint 2.65s ease both}
@keyframes fuga-gesture-hint{
  0%{opacity:0;transform:translate(-50%,6px)}
  12%,68%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-3px)}
}

/* In landscape mobile the game itself is the controller. */
body.mobile-landscape-play .touch-controls{
  display:none!important;
}
body.mobile-landscape-play .game-wrap.active{
  padding:0!important;
}
body.mobile-landscape-play .hud{
  position:absolute!important;
  top:max(4px,env(safe-area-inset-top))!important;
  left:max(7px,env(safe-area-inset-left))!important;
  right:max(7px,env(safe-area-inset-right))!important;
  z-index:20!important;
  width:auto!important;
  height:34px!important;min-height:34px!important;
  margin:0!important;padding:0 7px!important;
  background:linear-gradient(90deg,rgba(9,9,12,.52),rgba(9,9,12,.28),rgba(9,9,12,.52))!important;
  border:1px solid rgba(245,243,239,.07)!important;
  backdrop-filter:blur(4px)!important;
  pointer-events:auto!important
}
body.mobile-landscape-play .canvas-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  padding:0!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  touch-action:none!important;
}
body.mobile-landscape-play canvas{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important
}
body.mobile-landscape-play .gesture-hint{
  bottom:max(8px,env(safe-area-inset-bottom))!important
}

/* Undo the previous reserved button space. */
body.mobile-landscape-play .canvas-stage{
  padding-bottom:0!important
}

@media(pointer:coarse) and (max-height:430px){
  body.mobile-landscape-play .hud{
    height:31px!important;min-height:31px!important
  }
  body.mobile-landscape-play .hud strong{font-size:13px!important}
  body.mobile-landscape-play .sound-toggle,
  body.mobile-landscape-play .fullscreen-toggle{padding:3px 4px!important}
}


/* =========================================================
   BUILD 0.14 · SIGNAL RUN
   La interfaz adopta el lenguaje espacial de MANADA sin
   convertir FUGA en otra landing. El juego sigue mandando.
   ========================================================= */

/* El intro ahora tiene un objeto 3D propio. */
.intro{perspective:1400px;position:relative}
.fuga-depth-scene{
  --mx:0;--my:0;
  position:relative;height:clamp(190px,28vw,330px);margin:18px 0 0;
  overflow:hidden;isolation:isolate;border:1px solid rgba(245,243,239,.08);
  background:
    radial-gradient(circle at 70% 42%,rgba(169,53,241,.20),transparent 24%),
    linear-gradient(180deg,#0d0c13,#07070a 74%);
  perspective:920px;transform-style:preserve-3d;
  box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 0 80px rgba(169,53,241,.04)
}
.fuga-depth-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  background:linear-gradient(90deg,rgba(9,9,11,.80),transparent 20% 78%,rgba(9,9,11,.50)),
             linear-gradient(180deg,transparent 65%,rgba(9,9,11,.76));
}
.depth-haze{position:absolute;inset:8% 22%;background:rgba(169,53,241,.16);filter:blur(55px);transform:translateZ(-140px)}
.depth-grid{
  position:absolute;left:-15%;right:-15%;bottom:-46%;height:95%;
  background-image:linear-gradient(rgba(207,158,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(207,158,255,.09) 1px,transparent 1px);
  background-size:52px 38px;transform:rotateX(67deg) translateZ(-80px);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 88%);mask-image:linear-gradient(to top,#000,transparent 88%);
  animation:fuga-grid-run 7s linear infinite
}
.depth-gate{position:absolute;left:50%;top:50%;border:1px solid rgba(207,158,255,.28);transform-style:preserve-3d;box-shadow:0 0 30px rgba(169,53,241,.04)}
.depth-gate--1{width:11%;height:24%;transform:translate(-50%,-50%) translateZ(-260px)}
.depth-gate--2{width:24%;height:45%;transform:translate(-50%,-50%) translateZ(-150px)}
.depth-gate--3{width:46%;height:70%;transform:translate(-50%,-50%) translateZ(-55px)}
.depth-gate--4{width:76%;height:100%;transform:translate(-50%,-50%) translateZ(60px);opacity:.42}
.depth-monolith{
  position:absolute;z-index:8;left:50%;top:50%;width:min(43%,430px);aspect-ratio:1.35;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:18px;
  background:linear-gradient(145deg,#a935f1,#5b0b85 62%,#16091d);
  border:1px solid rgba(255,255,255,.25);box-shadow:0 26px 70px rgba(0,0,0,.40),0 0 50px rgba(169,53,241,.16);
  transform:translate(-50%,-50%) rotateY(calc(-14deg + var(--mx) * 9deg)) rotateX(calc(5deg - var(--my) * 7deg)) translateZ(72px);
  transition:transform .18s ease-out;transform-style:preserve-3d
}
.depth-monolith::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.16);transform:translateZ(18px);pointer-events:none}
.depth-monolith span,.depth-monolith small{font:700 clamp(7px,.8vw,10px)/1.2 "IBM Plex Mono",monospace;letter-spacing:.13em;color:rgba(255,255,255,.72)}
.depth-monolith strong{font:900 clamp(42px,7.4vw,100px)/.78 Inter,sans-serif;letter-spacing:-.085em;color:#fff;margin:8px 0 10px;transform:translateZ(34px)}
.depth-orbit{position:absolute;z-index:4;left:50%;top:50%;border:1px solid rgba(245,243,239,.14);border-radius:50%;transform-style:preserve-3d}
.depth-orbit--a{width:62%;aspect-ratio:1;transform:translate(-50%,-50%) rotateX(69deg) rotateZ(12deg);animation:fuga-orbit 13s linear infinite}
.depth-orbit--b{width:44%;aspect-ratio:1;transform:translate(-50%,-50%) rotateY(68deg) rotateZ(-18deg);animation:fuga-orbit 9s linear infinite reverse}
.depth-marker{position:absolute;z-index:10;font:700 9px/1 "IBM Plex Mono",monospace;letter-spacing:.15em;color:rgba(245,243,239,.44)}
.depth-marker--a{left:18px;top:18px}.depth-marker--b{right:18px;bottom:18px}

/* El marco del juego parece un instrumento, pero no altera la hitbox visual. */
.canvas-stage{perspective:1200px;isolation:isolate}
.canvas-stage::before{
  content:"";position:absolute;inset:-8px;z-index:-1;pointer-events:none;
  border:1px solid rgba(169,53,241,.10);transform:translateZ(-20px);
  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.02) inset
}
.canvas-stage::after{box-shadow:inset 0 0 90px rgba(0,0,0,.14),inset 0 -55px 80px rgba(169,53,241,.025)!important}

/* Cambio de dificultad como evento, no como simple texto de HUD. */
.phase-splash[hidden]{display:none!important}
.phase-splash{
  position:absolute;inset:0;z-index:18;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none;text-align:center;background:radial-gradient(circle at center,rgba(169,53,241,.16),rgba(9,9,11,0) 54%);
  perspective:900px
}
.phase-splash-depth{position:absolute;inset:0;transform-style:preserve-3d}
.phase-splash-depth i{position:absolute;left:50%;top:50%;border:1px solid rgba(244,241,235,.22);transform:translate(-50%,-50%);aspect-ratio:2.6/1}
.phase-splash-depth i:nth-child(1){width:28%;transform:translate(-50%,-50%) translateZ(-120px)}
.phase-splash-depth i:nth-child(2){width:56%;transform:translate(-50%,-50%) translateZ(-20px)}
.phase-splash-depth i:nth-child(3){width:92%;transform:translate(-50%,-50%) translateZ(80px)}
.phase-splash small{position:relative;z-index:2;color:#cf9eff;font:800 10px/1 "IBM Plex Mono",monospace;letter-spacing:.22em}
.phase-splash strong{position:relative;z-index:2;color:#fff;font:900 clamp(42px,10vw,112px)/.80 Inter,sans-serif;letter-spacing:-.075em;margin:9px 0}
.phase-splash>span{position:relative;z-index:2;color:rgba(245,243,239,.58);font:700 8px/1 "IBM Plex Mono",monospace;letter-spacing:.18em}
.phase-splash.is-visible{animation:fuga-phase-014 .92s cubic-bezier(.2,.75,.18,1) both}
.phase-splash.is-visible .phase-splash-depth{animation:fuga-phase-depth .92s cubic-bezier(.2,.75,.18,1) both}

/* Fullscreen sin glifo Unicode dependiente del sistema. */
.fullscreen-toggle{display:inline-grid;place-items:center}
.fullscreen-glyph{position:relative;width:13px;height:13px;display:block;background:
  linear-gradient(#f5f3ef,#f5f3ef) 0 0/5px 1px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 0 0/1px 5px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 100% 0/5px 1px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 100% 0/1px 5px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 0 100%/5px 1px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 0 100%/1px 5px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 100% 100%/5px 1px no-repeat,
  linear-gradient(#f5f3ef,#f5f3ef) 100% 100%/1px 5px no-repeat
}

@keyframes fuga-grid-run{to{background-position:0 76px,104px 0}}
@keyframes fuga-orbit{to{rotate:1turn}}
@keyframes fuga-phase-014{
  0%{opacity:0;transform:scale(.96)}
  14%{opacity:1;transform:scale(1)}
  64%{opacity:1}
  100%{opacity:0;transform:scale(1.025)}
}
@keyframes fuga-phase-depth{
  0%{transform:translateZ(-220px) scale(.72);opacity:.1}
  38%{opacity:1}
  100%{transform:translateZ(120px) scale(1.18);opacity:0}
}

@media(max-width:700px){
  .fuga-depth-scene{height:220px;margin-top:14px}
  .depth-monolith{width:58%;padding:13px;transform:translate(-50%,-50%) rotateY(-9deg) rotateX(4deg) translateZ(52px)}
  .depth-monolith strong{font-size:clamp(42px,17vw,76px)}
  .depth-orbit--a{width:82%}.depth-orbit--b{width:58%}
  .depth-marker--b{display:none}
  .phase-splash strong{font-size:clamp(44px,15vw,82px)}
}

@media(max-width:430px){
  .fuga-shell{padding-left:14px;padding-right:14px}
  .fuga-depth-scene{height:190px;margin-left:-14px;margin-right:-14px;border-left:0;border-right:0}
  .depth-monolith{width:64%;aspect-ratio:1.15;padding:11px}
  .depth-monolith strong{font-size:50px}
  .depth-monolith span,.depth-monolith small{font-size:6.5px}
  .phase-splash small{font-size:8px}.phase-splash>span{font-size:7px}
}

@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  /* En juego móvil manda la legibilidad: el 3D vive dentro del canvas, no inclina la superficie. */
  body.mobile-playing .canvas-stage::before{inset:0;border:0;box-shadow:none}
  body.mobile-playing .phase-splash strong{font-size:clamp(44px,13vh,86px)}
}

@media(prefers-reduced-motion:reduce){
  .depth-grid,.depth-orbit,.phase-splash.is-visible,.phase-splash.is-visible .phase-splash-depth{animation:none!important}
  .depth-monolith{transition:none!important;transform:translate(-50%,-50%) rotateY(-10deg) rotateX(4deg)!important}
}


/* =========================================================
   BUILD 0.15 · RUSH FIELD
   El juego deja de "anunciar" la dificultad y la hace sentir.
   Más ritmo, más profundidad, menos texto durante la carrera.
   ========================================================= */

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ENTRY OBJECT — a runner suspended inside a moving escape corridor */
.fuga-depth-scene{height:clamp(230px,34vw,390px);border-color:rgba(255,255,255,.06);background:radial-gradient(circle at 54% 48%,rgba(169,53,241,.22),transparent 23%),linear-gradient(180deg,#0b0910,#050507 78%);perspective:1050px}
.depth-grid{opacity:.8;background-size:42px 34px;animation-duration:4.7s}
.depth-haze{inset:16% 28%;filter:blur(78px);opacity:.8}
.rush-vanish{position:absolute;left:50%;top:48%;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 26px #fff,0 0 70px rgba(169,53,241,.75);transform:translate(-50%,-50%) translateZ(-320px);z-index:1}
.rush-gate{position:absolute;left:50%;top:48%;border:1px solid rgba(207,158,255,.23);transform-style:preserve-3d;aspect-ratio:2.2/1;animation:rushGate 5.2s linear infinite;box-shadow:0 0 35px rgba(169,53,241,.04)}
.rush-gate--1{width:15%;animation-delay:-4.1s}.rush-gate--2{width:28%;animation-delay:-3.15s}.rush-gate--3{width:45%;animation-delay:-2.2s}.rush-gate--4{width:66%;animation-delay:-1.25s}.rush-gate--5{width:92%;animation-delay:-.3s}
.rush-track{position:absolute;left:50%;top:48%;height:1px;width:74%;background:linear-gradient(90deg,transparent,rgba(207,158,255,.38),transparent);transform-origin:50% 50%;z-index:2}
.rush-track--a{transform:translate(-50%,-50%) rotate(19deg) translateZ(-90px)}.rush-track--b{transform:translate(-50%,-50%) rotate(-19deg) translateZ(-70px)}
.runner-token{position:absolute;z-index:8;left:50%;top:48%;width:min(22%,180px);aspect-ratio:1;transform-style:preserve-3d;transform:translate(-50%,-50%) translateZ(100px) rotateY(calc(var(--mx)*10deg)) rotateX(calc(var(--my)*-7deg));transition:transform .12s linear;filter:drop-shadow(0 26px 45px rgba(169,53,241,.28))}
.runner-token img{position:absolute;z-index:4;inset:14%;width:72%;height:72%;object-fit:contain;filter:brightness(0) invert(1);transform:translateZ(42px);animation:runnerFloat 2.8s ease-in-out infinite}
.runner-token__halo{position:absolute;inset:4%;border:1px solid rgba(255,255,255,.28);border-radius:50%;box-shadow:inset 0 0 0 12px rgba(169,53,241,.04),0 0 70px rgba(169,53,241,.2);animation:runnerHalo 3.4s ease-in-out infinite}
.runner-token>i{position:absolute;left:-52%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(207,158,255,.75));transform-origin:right center}
.runner-token>i:nth-of-type(1){width:76%;transform:rotate(-11deg)}.runner-token>i:nth-of-type(2){width:98%;transform:rotate(0)}.runner-token>i:nth-of-type(3){width:68%;transform:rotate(12deg)}
.rush-title{position:absolute;z-index:9;left:5%;bottom:8%;display:flex;flex-direction:column;transform:translateZ(125px);pointer-events:none}
.rush-title span{font:700 7px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;color:rgba(255,255,255,.45)}
.rush-title strong{margin-top:4px;font:900 clamp(44px,8vw,100px)/.75 Inter,sans-serif;letter-spacing:-.085em;color:#fff}

/* During play, the canvas feels like a physical field rather than a framed video. */
.game-wrap.active{position:relative}
.canvas-stage{overflow:hidden;background:#08080b;box-shadow:0 34px 90px rgba(0,0,0,.34),0 0 0 1px rgba(169,53,241,.05)}
.runfield-chrome{position:absolute;inset:0;z-index:11;pointer-events:none;mix-blend-mode:screen}
.runfield-chrome>i{position:absolute;width:24px;height:24px;opacity:.44}
.runfield-chrome>i::before,.runfield-chrome>i::after{content:"";position:absolute;background:#cf9eff}
.runfield-chrome>i::before{width:18px;height:1px}.runfield-chrome>i::after{width:1px;height:18px}
.runfield-chrome>i:nth-child(1){left:10px;top:10px}.runfield-chrome>i:nth-child(2){right:10px;top:10px;transform:rotate(90deg)}.runfield-chrome>i:nth-child(3){right:10px;bottom:10px;transform:rotate(180deg)}.runfield-chrome>i:nth-child(4){left:10px;bottom:10px;transform:rotate(-90deg)}
.runfield-chrome>b{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#a935f1,transparent);box-shadow:0 0 20px rgba(169,53,241,.5);animation:runfieldScan 3.1s ease-in-out infinite}

/* Phase is a six-step physical rail, not a sentence. */
.hud-status{min-width:min(260px,34vw);align-items:center!important;justify-content:center}
.phase-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:min(210px,30vw);height:4px;margin-top:3px}
.phase-rail i{display:block;background:#26232d;transform-origin:left center;transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.phase-rail i.is-active{background:rgba(169,53,241,.52)}
.phase-rail i.is-current{background:#cf9eff;transform:scaleY(1.75);box-shadow:0 0 14px rgba(169,53,241,.55)}
#scoreNow{transition:transform .12s ease,color .12s ease,text-shadow .12s ease}
#scoreNow.is-flow{transform:scale(1.08);color:#cf9eff;text-shadow:0 0 18px rgba(169,53,241,.45)}

/* Difficulty cue: pure motion. No words to read mid-run. */
.phase-splash{background:radial-gradient(circle at center,rgba(169,53,241,.13),transparent 56%)}
.phase-iris{position:absolute;inset:0;perspective:900px;transform-style:preserve-3d}
.phase-iris i{position:absolute;left:50%;top:50%;border:1px solid rgba(207,158,255,.26);aspect-ratio:2.4/1;transform:translate(-50%,-50%);box-shadow:0 0 28px rgba(169,53,241,.04)}
.phase-iris i:nth-child(1){width:16%}.phase-iris i:nth-child(2){width:30%}.phase-iris i:nth-child(3){width:48%}.phase-iris i:nth-child(4){width:70%}.phase-iris i:nth-child(5){width:96%}
.phase-splash.is-visible{animation:phaseFlash015 .64s cubic-bezier(.2,.8,.2,1) both}
.phase-splash.is-visible .phase-iris{animation:phaseIris015 .64s cubic-bezier(.16,.8,.18,1) both}

/* Buttons become control surfaces, not generic buttons. */
.touch-controls{gap:6px;background:transparent;margin-top:7px}
.touch-controls button{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#131219,#0e0e13);min-height:64px;color:#f5f3ef}
.touch-controls button::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:1px;background:linear-gradient(90deg,#a935f1,transparent);transform:scaleX(.35);transform-origin:left;transition:transform .18s ease}
.touch-controls button:active::after,.touch-controls button.is-active::after{transform:scaleX(1)}

.sound-toggle.is-on{box-shadow:0 0 0 1px rgba(169,53,241,.24) inset,0 0 18px rgba(169,53,241,.09)}

@keyframes rushGate{0%{transform:translate(-50%,-50%) translateZ(-360px) scale(.35);opacity:0}18%{opacity:.2}76%{opacity:.7}100%{transform:translate(-50%,-50%) translateZ(180px) scale(1.16);opacity:0}}
@keyframes runnerFloat{0%,100%{transform:translateZ(42px) translateY(3px) rotate(-1deg)}50%{transform:translateZ(58px) translateY(-5px) rotate(1deg)}}
@keyframes runnerHalo{0%,100%{transform:rotateX(68deg) rotateZ(0);opacity:.48}50%{transform:rotateX(72deg) rotateZ(180deg);opacity:.9}}
@keyframes runfieldScan{0%,100%{top:5%;opacity:0}10%{opacity:.8}76%{opacity:.5}90%{top:95%;opacity:0}}
@keyframes phaseFlash015{0%{opacity:0}15%{opacity:1}68%{opacity:.55}100%{opacity:0}}
@keyframes phaseIris015{0%{transform:translateZ(-260px) scale(.44);opacity:.25}52%{opacity:1}100%{transform:translateZ(180px) scale(1.35);opacity:0}}

@media(max-width:700px){
  .fuga-depth-scene{height:250px;margin-top:14px}
  .runner-token{width:34%}
  .rush-title{left:14px;bottom:14px}.rush-title strong{font-size:clamp(50px,18vw,76px)}
  .depth-marker--b{display:none}
  .phase-rail{width:150px;max-width:45vw}
  .hud-status{min-width:0}
}
@media(max-width:430px){
  .fuga-depth-scene{height:220px}
  .runner-token{width:38%}
  .rush-title strong{font-size:54px}.rush-title span{font-size:6px}
  .phase-rail{width:116px;gap:3px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body.mobile-playing .phase-rail{width:105px}
  body.mobile-playing .runfield-chrome>i{width:17px;height:17px}
  body.mobile-playing .phase-splash{z-index:12}
}
@media(prefers-reduced-motion:reduce){
  .rush-gate,.runner-token img,.runner-token__halo,.runfield-chrome>b,.phase-splash.is-visible,.phase-splash.is-visible .phase-iris{animation:none!important}
}

/* =========================================================
   BUILD 0.16 · BREACH
   FUGA deja de sentirse como un runner incrustado y se
   convierte en una cámara de escape. Mobile-first.
   ========================================================= */

:root{
  --fuga-ink:#060608;
  --fuga-paper:#f4f1eb;
  --fuga-violet:#a935f1;
  --fuga-lilac:#cf9eff;
}

body{
  background:
    radial-gradient(circle at 50% -10%,rgba(169,53,241,.08),transparent 32%),
    #070709;
}

/* ---------- INTRO / THRESHOLD ---------- */
.intro{padding-top:clamp(22px,5vw,54px)}
.intro-copy{
  position:relative;z-index:4;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  border-bottom:0;padding-bottom:12px;
}
.intro-copy::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--fuga-violet),rgba(255,255,255,.10) 28%,transparent 88%);
}
.intro h1{
  position:relative;z-index:2;
  font-size:clamp(88px,19vw,230px);
  letter-spacing:-.095em;line-height:.72;
  text-shadow:0 28px 80px rgba(0,0,0,.35);
}
.intro p{max-width:620px;color:rgba(244,241,235,.72)}
.intro-note{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  backdrop-filter:blur(14px);box-shadow:none;
}
.desktop-mechanics,.mobile-mechanics{display:flex;flex-direction:column;gap:7px}
.mobile-mechanics{display:none}

.breach-intro{
  height:clamp(330px,43vw,560px);
  margin-top:10px;
  border:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(169,53,241,.14),transparent 26%),
    linear-gradient(180deg,#070709,#09090c);
  box-shadow:0 50px 110px rgba(0,0,0,.38);
}
.intro-space-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.95;pointer-events:none}
.breach-aperture{
  position:absolute;z-index:3;left:50%;top:50%;width:min(44vw,470px);aspect-ratio:1;
  transform:translate(-50%,-50%);transform-style:preserve-3d;perspective:1100px;
  filter:drop-shadow(0 0 38px rgba(169,53,241,.18));
}
.breach-aperture::before{
  content:"";position:absolute;inset:31%;border-radius:50%;
  background:radial-gradient(circle,#050507 0 27%,rgba(244,241,235,.82) 30%,rgba(244,241,235,.16) 34%,rgba(169,53,241,.16) 43%,transparent 62%);
  box-shadow:0 0 80px rgba(169,53,241,.30),inset 0 0 45px rgba(207,158,255,.16);
}
.breach-aperture i{
  position:absolute;left:50%;top:50%;border:1px solid rgba(244,241,235,.22);
  transform:translate(-50%,-50%);aspect-ratio:2.2/1;
  animation:breachFrame 5.8s linear infinite;
}
.breach-aperture i:nth-child(1){width:18%;animation-delay:-4.6s}
.breach-aperture i:nth-child(2){width:34%;animation-delay:-3.5s}
.breach-aperture i:nth-child(3){width:54%;animation-delay:-2.4s}
.breach-aperture i:nth-child(4){width:76%;animation-delay:-1.3s}
.breach-aperture i:nth-child(5){width:104%;animation-delay:-.2s}
@keyframes breachFrame{
  0%{opacity:0;transform:translate(-50%,-50%) translateZ(-260px) scale(.32) rotateZ(-2deg)}
  22%{opacity:.68}
  78%{opacity:.16}
  100%{opacity:0;transform:translate(-50%,-50%) translateZ(230px) scale(1.18) rotateZ(2deg)}
}

/* Let the old scene pieces become secondary texture instead of the hero. */
.breach-intro .depth-grid{opacity:.22}
.breach-intro .rush-gate{opacity:.34}
.breach-intro .rush-title{opacity:.42;mix-blend-mode:screen}
.breach-intro .runner-token{z-index:6;transform:translate(-50%,-50%) translateZ(140px) scale(1.08)}
.breach-intro .runner-token img{
  filter:brightness(0) invert(1) drop-shadow(0 18px 28px rgba(255,255,255,.10)) drop-shadow(0 30px 44px rgba(0,0,0,.48));
}
.breach-intro .runner-token{filter:drop-shadow(0 24px 52px rgba(0,0,0,.46))}
.breach-intro .runner-token__halo{border-color:rgba(255,255,255,.42);box-shadow:inset 0 0 0 10px rgba(255,255,255,.025),0 0 60px rgba(169,53,241,.18)}

.scoreboard,.player-box,.start-button{
  position:relative;z-index:4;
}
.scoreboard{
  margin-top:18px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.018);
}
.personal,.global{padding-left:18px;padding-right:18px}
.player-box{
  margin-top:10px;border:1px solid rgba(255,255,255,.07);
  padding:18px;background:rgba(255,255,255,.015)
}
.start-button{
  margin-top:10px;min-height:74px;
  background:linear-gradient(90deg,var(--fuga-violet),#7a1dc2 58%,#4d116f);
  overflow:hidden;isolation:isolate;
}
.start-button::before{
  content:"";position:absolute;inset:-40% auto -40% -26%;width:24%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg);animation:startSweep 3.7s ease-in-out infinite;z-index:-1
}
@keyframes startSweep{0%,62%{left:-28%}100%{left:120%}}

/* ---------- GAME / ZERO-CHROME ESCAPE CHAMBER ---------- */
.game-wrap.active{
  position:relative;
  border:0;padding-top:0;
  background:#050507;
}
.canvas-stage{
  min-height:clamp(430px,65vh,720px);
  overflow:hidden;
  background:#050507;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 42px 120px rgba(0,0,0,.52),0 0 0 1px rgba(169,53,241,.025);
}
.escape-space{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;
  pointer-events:none;mix-blend-mode:screen;opacity:.82;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.30),#000 14% 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.30),#000 14% 100%);
}
#gameCanvas{position:relative;z-index:2}
.runfield-chrome{z-index:5;opacity:.58}

.breach-chaser{
  position:absolute;left:-9%;top:50%;z-index:3;width:28%;height:140%;
  transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 18% 50%,rgba(169,53,241,.30),rgba(169,53,241,.08) 31%,transparent 70%);
  filter:blur(2px);opacity:.64;
}
.breach-chaser::after{
  content:"";position:absolute;left:10%;top:50%;width:1px;height:65%;transform:translateY(-50%);
  background:linear-gradient(transparent,var(--fuga-lilac),transparent);box-shadow:0 0 24px 4px rgba(169,53,241,.36)
}
.breach-chaser i{
  position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(169,53,241,.68),transparent);
  animation:chaserLine 1.9s linear infinite
}
.breach-chaser i:nth-child(1){top:28%;animation-delay:-.4s}.breach-chaser i:nth-child(2){top:51%;animation-delay:-1.2s}.breach-chaser i:nth-child(3){top:72%;animation-delay:-.8s}
@keyframes chaserLine{0%{transform:translateX(-30%);opacity:0}22%{opacity:.75}100%{transform:translateX(92%);opacity:0}}

/* HUD is instrumentation, not a banner. */
.hud{
  position:absolute;top:14px;left:14px;right:14px;z-index:30;
  border:0!important;background:transparent!important;
  pointer-events:none;
}
.hud-score,.hud-status{background:rgba(6,6,8,.34);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.07);padding:8px 10px}
.hud-status{min-width:106px;display:flex;align-items:center;justify-content:center}
.hud-status>span{display:none}
.phase-rail{display:flex!important;gap:5px;align-items:center}
.phase-rail i{width:16px!important;height:2px!important;border-radius:0!important;background:rgba(255,255,255,.16)!important}
.phase-rail i.is-active{background:var(--fuga-violet)!important;box-shadow:0 0 10px rgba(169,53,241,.34)}
.hud-score strong{font-size:clamp(16px,2vw,24px)}
.sound-toggle,.fullscreen-toggle{pointer-events:auto!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(6,6,8,.42)!important;backdrop-filter:blur(8px)}
.fullscreen-toggle{display:none!important}

/* There are no gameplay buttons anymore. */
.touch-controls{display:none!important}

/* Gesture tutorial is visual/minimal. */
.gesture-hint{
  bottom:18px;gap:14px;padding:9px 14px;
  background:rgba(5,5,8,.36);border-color:rgba(255,255,255,.08);backdrop-filter:blur(12px);
  font-size:7px;letter-spacing:.11em
}
.gesture-hint::before{
  content:"";width:18px;height:18px;border:1px solid var(--fuga-lilac);border-radius:50%;
  box-shadow:0 0 0 0 rgba(207,158,255,.28);animation:tapPulse 1.15s ease-out infinite
}
@keyframes tapPulse{0%{box-shadow:0 0 0 0 rgba(207,158,255,.28)}100%{box-shadow:0 0 0 12px rgba(207,158,255,0)}}

/* ---------- MOBILE ORIENTATION GATE ---------- */
.mobile-launch-gate[hidden]{display:none!important}
.mobile-launch-gate{
  position:fixed;inset:0;z-index:2147483645;
  display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;
  padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 38%,rgba(169,53,241,.25),transparent 22%),
    radial-gradient(circle at 50% 42%,#101016 0 13%,#08080b 34%,#050507 72%);
  overflow:hidden;
}
.launch-noise{position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.36) 0 1px,transparent 1.2px);background-size:9px 9px;-webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%)}
.launch-device{
  position:relative;width:min(34vw,150px);aspect-ratio:.52/1;border:2px solid rgba(244,241,235,.80);border-radius:22px;
  transform:rotate(0deg);animation:phoneTurn 2.3s cubic-bezier(.6,0,.2,1) infinite;
  box-shadow:0 0 0 1px rgba(169,53,241,.25),0 0 70px rgba(169,53,241,.24)
}
.launch-device::before{content:"";position:absolute;left:50%;top:8px;width:24%;height:4px;border-radius:4px;background:rgba(244,241,235,.38);transform:translateX(-50%)}
.launch-device span{position:absolute;inset:14%;border:1px solid rgba(244,241,235,.22);background:radial-gradient(circle,rgba(169,53,241,.24),transparent 54%)}
.launch-device i{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;border:1px solid var(--fuga-violet);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 36px rgba(169,53,241,.28)}
@keyframes phoneTurn{0%,18%{transform:rotate(0deg) scale(.92)}48%,78%{transform:rotate(90deg) scale(1.08)}100%{transform:rotate(90deg) scale(.92)}}
.launch-copy{position:relative;z-index:4;width:min(620px,100%);text-align:center}
.launch-copy>span{color:var(--fuga-lilac);font:700 8px/1 "IBM Plex Mono",monospace;letter-spacing:.18em}
.launch-copy strong{display:block;margin:10px auto 8px;font-size:clamp(2.6rem,14vw,5.6rem);line-height:.82;letter-spacing:-.07em;max-width:9ch}
.launch-copy p{max-width:35ch;margin:0 auto 18px;color:rgba(244,241,235,.62);font-size:.82rem;line-height:1.45}
.launch-copy button{width:min(420px,100%);min-height:54px;border:1px solid rgba(255,255,255,.16);background:var(--fuga-violet);color:#fff;font-weight:900;font-size:11px;letter-spacing:.07em}
.launch-copy small{display:block;margin-top:13px;color:rgba(244,241,235,.42);font:600 7px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em}
.mobile-launch-gate.is-resume .launch-device{animation-duration:1.65s}

/* ---------- MOBILE GAME IS THE SCREEN ---------- */
@media(pointer:coarse){
  .mobile-mechanics{display:flex}.desktop-mechanics{display:none}
  .fuga-shell{padding-left:14px;padding-right:14px}
  .intro h1{font-size:clamp(72px,26vw,150px)}
  .breach-intro{height:54svh;min-height:360px;max-height:560px;margin-left:-14px;margin-right:-14px}
  .breach-aperture{width:min(90vw,440px)}
  .runner-token{width:min(31vw,150px)!important}
  .scoreboard{grid-template-columns:1fr}.personal{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .start-button{min-height:64px}
  .fullscreen-toggle{display:none!important}
}

@media(pointer:coarse) and (orientation:landscape){
  html,body{width:100%;height:100%;overflow:hidden!important;background:#050507!important}
  body.mobile-landscape-play .fuga-shell{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important;padding:0!important;margin:0!important}
  body.mobile-landscape-play .game-wrap.active{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:#050507!important}
  body.mobile-landscape-play .canvas-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;border:0!important;box-shadow:none!important}
  body.mobile-landscape-play .hud{top:max(7px,env(safe-area-inset-top))!important;left:max(9px,env(safe-area-inset-left))!important;right:max(9px,env(safe-area-inset-right))!important;height:auto!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important;grid-template-columns:auto 1fr auto!important}
  body.mobile-landscape-play .hud-score,body.mobile-landscape-play .hud-status{padding:5px 8px!important;background:rgba(5,5,8,.25)!important;border-color:rgba(255,255,255,.055)!important}
  body.mobile-landscape-play .hud-score span{font-size:6px!important;opacity:.48}body.mobile-landscape-play .hud strong{font-size:13px!important}
  body.mobile-landscape-play .hud-status{justify-self:center;width:auto!important;min-width:92px!important}
  body.mobile-landscape-play .phase-rail i{width:11px!important}
  body.mobile-landscape-play .sound-toggle{min-width:35px!important;height:28px!important;padding:0 6px!important;font-size:6px!important;letter-spacing:.05em!important}
  body.mobile-landscape-play .escape-space{opacity:.72}
  body.mobile-landscape-play .runfield-chrome{opacity:.32}
  body.mobile-landscape-play .breach-chaser{width:24%;opacity:.54}
  body.mobile-landscape-play .gesture-hint{bottom:max(9px,env(safe-area-inset-bottom))!important}
}

@media(pointer:coarse) and (orientation:portrait){
  /* The game never starts in portrait; the dedicated gate owns this moment. */
  body.mobile-portrait-play .rotate-hint{display:none!important}
}

@media(max-width:560px){
  .fuga-header{padding-bottom:11px}.arcade-code{font-size:8px}
  .intro{padding-top:20px}.intro-copy{display:block}.intro-note{margin-top:18px}
  .breach-intro{margin-top:14px}
  .scoreboard{margin-top:12px}.player-box{padding:14px}
  .alias-row{grid-template-columns:minmax(0,1fr) auto}
  .semester-options{grid-template-columns:repeat(4,minmax(0,1fr))}
  footer{font-size:7px}
}

@media(prefers-reduced-motion:reduce){
  .breach-aperture i,.launch-device,.gesture-hint::before,.start-button::before,.breach-chaser i{animation:none!important}
  .escape-space,.intro-space-canvas{display:none!important}
}
.canvas-stage[data-phase="1"] .breach-chaser{opacity:.62;width:26%}
.canvas-stage[data-phase="2"] .breach-chaser{opacity:.68;width:28%}
.canvas-stage[data-phase="3"] .breach-chaser{opacity:.72;width:30%}
.canvas-stage[data-phase="4"] .breach-chaser{opacity:.78;width:32%}
.canvas-stage[data-phase="5"] .breach-chaser{opacity:.86;width:35%}


/* =========================================================
   BUILD 0.16.1 · MONO BREACH
   El zorro deja de competir con el violeta: blanco/negro
   como figura principal; morado sólo como energía/señal.
   ========================================================= */
.breach-intro .rush-gate{border-color:rgba(244,241,235,.19)!important;box-shadow:0 0 28px rgba(255,255,255,.025)!important}
.breach-intro .rush-track{background:linear-gradient(90deg,transparent,rgba(244,241,235,.34),rgba(169,53,241,.22),transparent)!important}
.breach-intro .rush-vanish{background:#f4f1eb!important;box-shadow:0 0 22px rgba(255,255,255,.78),0 0 68px rgba(169,53,241,.34)!important}
.breach-intro .depth-haze{background:rgba(244,241,235,.045)!important}
.breach-intro::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(255,255,255,.035) 18%,transparent 31%);mix-blend-mode:screen}

/* SFX becomes easier to read on phone without adding HUD noise. */
.sound-toggle{min-width:46px!important}
.sound-toggle.is-on{color:#050507!important;background:#f4f1eb!important;border-color:#f4f1eb!important;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 20px rgba(255,255,255,.10)!important}
@media(pointer:coarse) and (orientation:landscape){
  body.mobile-landscape-play .sound-toggle{min-width:42px!important;color:#f4f1eb!important}
  body.mobile-landscape-play .sound-toggle.is-on{color:#050507!important;background:#f4f1eb!important}
}


/* =========================================================
   BUILD 0.16.2 · ENDLESS PRESSURE
   ========================================================= */

/* Difficulty is a quiet instrument, not a six-step checklist. */
.phase-rail{
  --pressure-progress:0;
  position:relative!important;
  display:block!important;
  width:clamp(76px,10vw,118px)!important;
  height:1px!important;
  margin-top:4px!important;
  overflow:visible!important;
  background:rgba(244,241,235,.10)!important;
  opacity:.48;
}
.phase-rail i{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:1px!important;
  display:block!important;
  background:linear-gradient(90deg,rgba(169,53,241,.24),rgba(207,158,255,.82))!important;
  box-shadow:0 0 8px rgba(169,53,241,.20)!important;
  transform:scaleX(var(--pressure-progress))!important;
  transform-origin:left center!important;
  transition:transform .09s linear,opacity .18s ease!important;
}
.phase-rail b{
  position:absolute;
  top:50%;
  left:calc(var(--pressure-progress) * 100%);
  width:3px;height:3px;border-radius:50%;
  background:rgba(244,241,235,.75);
  box-shadow:0 0 8px rgba(207,158,255,.42);
  transform:translate(-50%,-50%);
  opacity:.46;
  transition:left .09s linear,opacity .18s ease;
}
.phase-rail.is-near{opacity:.66}
.phase-rail.is-step{animation:pressureStep .42s ease-out both}
@keyframes pressureStep{
  0%{filter:brightness(1.8);opacity:.86}
  100%{filter:brightness(1);opacity:.48}
}

/* The result card must live above WebGL, canvas chrome and HUD on every device. */
.overlay-card{
  z-index:120!important;
  isolation:isolate;
}
body.gameover-open .phase-splash,
body.gameover-open .gesture-hint{display:none!important}
body.gameover-open .mobile-launch-gate{display:none!important}

@media(pointer:coarse){
  body.gameover-open .overlay-card{
    position:fixed!important;
    z-index:2147483646!important;
    inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
    min-height:0!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:
      radial-gradient(circle at 50% 42%,rgba(169,53,241,.12),transparent 34%),
      rgba(5,5,8,.94)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    overflow:auto!important;
  }
  body.gameover-open .gameover-actions{
    width:min(520px,92vw);
    display:grid!important;
    grid-template-columns:1fr 1fr;
  }
  body.gameover-open .gameover-actions button{
    min-height:48px;
  }
  body.gameover-open .final-score{
    font-size:clamp(58px,18vmin,118px)!important;
  }
}

@media(pointer:coarse) and (orientation:landscape){
  body.mobile-landscape-play .phase-rail{
    width:74px!important;
    opacity:.34;
  }
}


/* =========================================================
   BUILD 0.16.3 · QUIET HUD + RELIABLE REPLAY
   ========================================================= */

/* HUD: información presente, nunca protagonista. */
.hud{
  display:grid!important;
  grid-template-columns:auto minmax(56px,1fr) auto!important;
  align-items:start!important;
  gap:12px!important;
  top:12px!important;
  left:14px!important;
  right:14px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.hud-score,.hud-status{
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
.hud-score{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  opacity:.58;
}
.hud-score::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background:linear-gradient(90deg,rgba(244,241,235,.18),transparent 86%);
  opacity:.55;
}
.hud-score span{
  font-size:6px!important;
  line-height:1!important;
  letter-spacing:.11em!important;
  opacity:.42!important;
}
.hud-score strong{
  font-size:13px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.035em!important;
  color:rgba(244,241,235,.82)!important;
  text-shadow:none!important;
}
.hud-score--right{
  justify-self:end;
}
.hud-score--right::after{
  background:linear-gradient(270deg,rgba(244,241,235,.18),transparent 86%);
}
.hud-status{
  justify-self:center!important;
  align-self:center!important;
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  justify-content:center!important;
  opacity:.62;
}
.phase-rail{
  width:clamp(52px,6vw,74px)!important;
  height:1px!important;
  margin:6px 0 0!important;
  background:rgba(244,241,235,.075)!important;
  opacity:.30!important;
}
.phase-rail i{
  height:1px!important;
  background:linear-gradient(90deg,rgba(169,53,241,.18),rgba(207,158,255,.62))!important;
  box-shadow:0 0 5px rgba(169,53,241,.13)!important;
}
.phase-rail b{
  width:2px!important;
  height:2px!important;
  background:rgba(244,241,235,.64)!important;
  box-shadow:0 0 5px rgba(207,158,255,.22)!important;
  opacity:.42!important;
}
.phase-rail.is-near{opacity:.48!important}
.phase-rail.is-step{animation:quietPressureStep .34s ease-out both!important}
@keyframes quietPressureStep{
  0%{opacity:.62;filter:brightness(1.45)}
  100%{opacity:.30;filter:brightness(1)}
}

.sound-toggle{
  position:relative;
  margin-left:2px!important;
  min-width:28px!important;
  width:28px!important;
  height:22px!important;
  padding:0!important;
  border:1px solid rgba(244,241,235,.08)!important;
  border-radius:999px!important;
  background:rgba(5,5,8,.12)!important;
  color:rgba(244,241,235,.38)!important;
  font-size:5.5px!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  box-shadow:none!important;
}
.sound-toggle::after{
  content:"";
  position:absolute;
  right:4px;
  top:4px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(244,241,235,.20);
}
.sound-toggle.is-on{
  color:rgba(244,241,235,.60)!important;
  border-color:rgba(207,158,255,.18)!important;
  background:rgba(5,5,8,.16)!important;
}
.sound-toggle.is-on::after{
  background:rgba(207,158,255,.88);
  box-shadow:0 0 6px rgba(169,53,241,.62);
}

/* RESULT PORTAL
   Fuera del canvas/WebGL: evita los bugs de fixed + transform de WebKit/iOS. */
.overlay-card.result-layer{
  position:fixed!important;
  inset:0!important;
  z-index:2147483646!important;
  display:grid!important;
  place-items:center!important;
  padding:
    max(16px,env(safe-area-inset-top))
    max(16px,env(safe-area-inset-right))
    max(16px,env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left))!important;
  background:
    radial-gradient(circle at 50% 46%,rgba(169,53,241,.11),transparent 31%),
    rgba(4,4,7,.76)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  overflow:auto!important;
  isolation:isolate;
}
.overlay-card.result-layer[hidden]{display:none!important}
.result-panel{
  width:min(520px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:clamp(22px,4vw,42px);
  text-align:center;
  background:
    linear-gradient(180deg,rgba(18,18,24,.97),rgba(7,7,10,.98));
  border:1px solid rgba(244,241,235,.10);
  box-shadow:
    0 34px 100px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(169,53,241,.035);
  position:relative;
  overflow:hidden;
}
.result-panel::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(207,158,255,.58),transparent);
}
.result-panel .eyebrow{
  font-size:7px!important;
  letter-spacing:.18em!important;
  opacity:.72;
}
.result-panel .final-score{
  font-size:clamp(64px,11vw,126px)!important;
  color:#f4f1eb!important;
  text-shadow:0 0 34px rgba(169,53,241,.18)!important;
}
.result-panel p{
  color:rgba(244,241,235,.58);
  font:600 9px/1.35 "IBM Plex Mono",monospace;
  letter-spacing:.11em;
}
.result-panel .gameover-actions{
  width:100%;
  margin-top:10px;
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:8px!important;
}
.result-panel .gameover-actions button{
  min-height:50px;
  padding:0 14px!important;
  border:1px solid rgba(244,241,235,.10)!important;
  background:#f4f1eb!important;
  color:#07070a!important;
  font-size:9px!important;
  letter-spacing:.08em!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.result-panel .gameover-actions button.secondary{
  background:rgba(244,241,235,.035)!important;
  color:rgba(244,241,235,.72)!important;
  border-color:rgba(244,241,235,.08)!important;
}
.result-panel .gameover-actions button:active{
  transform:scale(.985);
}

/* No capa del juego puede interceptar el resultado. */
body.gameover-open .fuga-shell,
body.gameover-open .game-wrap,
body.gameover-open .canvas-stage{
  pointer-events:none!important;
}
body.gameover-open .result-layer,
body.gameover-open .result-layer *{
  pointer-events:auto!important;
}

/* Móvil horizontal: HUD todavía más silencioso y resultado sin rotar. */
@media(pointer:coarse) and (orientation:landscape){
  body.mobile-landscape-play .hud{
    top:max(7px,env(safe-area-inset-top))!important;
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    height:24px!important;
    min-height:24px!important;
    grid-template-columns:auto 1fr auto!important;
    gap:10px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.mobile-landscape-play .hud-score,
  body.mobile-landscape-play .hud-status{
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }
  body.mobile-landscape-play .hud-score{opacity:.46}
  body.mobile-landscape-play .hud-score span{
    font-size:5px!important;
    opacity:.34!important;
  }
  body.mobile-landscape-play .hud-score strong{
    font-size:10px!important;
    color:rgba(244,241,235,.72)!important;
  }
  body.mobile-landscape-play .hud-score::after{bottom:-3px;opacity:.38}
  body.mobile-landscape-play .hud-status{
    min-width:0!important;
    width:auto!important;
    opacity:.44;
  }
  body.mobile-landscape-play .phase-rail{
    width:48px!important;
    margin-top:5px!important;
    opacity:.22!important;
  }
  body.mobile-landscape-play .sound-toggle{
    min-width:26px!important;
    width:26px!important;
    height:20px!important;
    padding:0!important;
    font-size:5px!important;
    color:rgba(244,241,235,.34)!important;
    border-color:rgba(244,241,235,.06)!important;
    background:rgba(5,5,8,.08)!important;
  }
  body.mobile-landscape-play .sound-toggle.is-on{
    color:rgba(244,241,235,.52)!important;
    background:rgba(5,5,8,.10)!important;
  }

  .overlay-card.result-layer{
    padding:
      max(8px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left))!important;
  }
  .result-panel{
    width:min(720px,96vw);
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));
    display:grid;
    grid-template-columns:minmax(150px,.72fr) minmax(220px,1fr);
    grid-template-rows:auto auto 1fr;
    align-items:center;
    gap:6px 24px;
    padding:16px 22px;
    overflow:auto;
  }
  .result-panel .eyebrow{
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }
  .result-panel .final-score{
    grid-column:1;
    grid-row:2 / span 2;
    justify-self:start;
    font-size:clamp(54px,15dvh,96px)!important;
    line-height:.82!important;
  }
  .result-panel p{
    grid-column:2;
    grid-row:1;
    justify-self:start;
    margin:0!important;
    text-align:left;
  }
  .result-panel .gameover-actions{
    grid-column:2;
    grid-row:2 / span 2;
    align-self:center;
    margin:0!important;
  }
  .result-panel .gameover-actions button{
    min-height:46px;
  }
}

@media(pointer:coarse) and (orientation:portrait){
  .result-panel{
    width:min(460px,100%);
  }
  .result-panel .gameover-actions{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px) and (pointer:fine){
  .hud-score span{display:none!important}
  .hud-score strong{font-size:12px!important}
}


/* =========================================================
   BUILD 0.16.4 · RESULT LOCK
   ========================================================= */

.overlay-card.result-layer{
  width:var(--fuga-vvw,100vw)!important;
  height:var(--fuga-vvh,100dvh)!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  contain:layout paint;
}

.result-panel{
  max-width:calc(var(--fuga-vvw,100vw) - 32px)!important;
  max-height:calc(var(--fuga-vvh,100dvh) - 32px)!important;
}

.result-panel .gameover-actions button{
  position:relative;
  z-index:2;
  pointer-events:auto!important;
  -webkit-touch-callout:none;
}

@media(pointer:coarse) and (orientation:landscape){
  .overlay-card.result-layer{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:
      max(6px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(6px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
    background:
      radial-gradient(circle at 24% 50%,rgba(169,53,241,.12),transparent 34%),
      rgba(4,4,7,.92)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .result-panel{
    width:min(760px,calc(var(--fuga-vvw,100vw) - 28px))!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(var(--fuga-vvh,100dvh) - 20px)!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:minmax(136px,.72fr) minmax(240px,1.28fr)!important;
    grid-template-rows:auto auto auto!important;
    gap:4px 20px!important;
    align-items:center!important;
    padding:12px 16px!important;
  }

  .result-panel .eyebrow{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:end!important;
    margin:0!important;
    font-size:6px!important;
  }

  .result-panel .final-score{
    grid-column:1!important;
    grid-row:2 / span 2!important;
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
    font-size:clamp(46px,19dvh,82px)!important;
    line-height:.78!important;
  }

  .result-panel p{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:stretch!important;
    align-self:end!important;
    margin:0 0 2px!important;
    text-align:left!important;
    font-size:7px!important;
    line-height:1.2!important;
  }

  .result-panel .gameover-actions{
    grid-column:2!important;
    grid-row:2 / span 2!important;
    align-self:center!important;
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }

  .result-panel .gameover-actions button{
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    padding:0 10px!important;
    font-size:7px!important;
  }
}

@media(pointer:coarse) and (orientation:landscape) and (max-height:390px){
  .result-panel{
    width:min(720px,calc(var(--fuga-vvw,100vw) - 20px))!important;
    max-height:calc(var(--fuga-vvh,100dvh) - 12px)!important;
    grid-template-columns:minmax(108px,.58fr) minmax(230px,1.42fr)!important;
    gap:2px 14px!important;
    padding:8px 12px!important;
  }
  .result-panel .final-score{
    font-size:clamp(38px,18dvh,66px)!important;
  }
  .result-panel .gameover-actions button{
    min-height:38px!important;
    height:38px!important;
  }
}

body.gameover-open .game-wrap,
body.gameover-open .canvas-stage,
body.gameover-open .escape-space,
body.gameover-open .runfield-chrome{
  pointer-events:none!important;
}


/* =========================================================
   BUILD 0.16.5 · CLEAN START / INSTANT RESULT
   ========================================================= */

/* El resultado no necesita filtros caros: prioridad a respuesta táctil. */
body.gameover-open .overlay-card.result-layer{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  touch-action:manipulation!important;
}

body.gameover-open .result-panel{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

body.gameover-open .gameover-actions button{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  cursor:pointer;
}

/* Feedback inmediato: el dedo debe sentir que el toque sí entró. */
@media(pointer:coarse){
  body.gameover-open .gameover-actions button{
    transition:transform .07s ease,background .07s ease,color .07s ease!important;
  }
  body.gameover-open .gameover-actions button:active{
    transform:scale(.965)!important;
  }
}