.arcade-page{--ink:#102a43;--muted:#627d98;--line:#d9e5ef;--panel:#fff;--navy:#071a2f;--blue:#2f80ed;--cyan:#31d6ff;--violet:#7458ff}.arcade-hero .arcade-kicker{display:inline-flex;margin-bottom:8px;padding:6px 10px;border-radius:999px;background:#eaf7ff;color:#096b9c;font-size:.72rem;font-weight:900;letter-spacing:.12em}.arcade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.arcade-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:250px;padding:22px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 16px 40px rgba(15,39,67,.08)}.arcade-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-70px;background:radial-gradient(circle,rgba(49,214,255,.16),transparent 66%)}.arcade-card-icon{font-size:2.8rem;line-height:1;margin-bottom:16px;filter:drop-shadow(0 6px 12px rgba(15,39,67,.12))}.arcade-card-copy{position:relative;z-index:1;flex:1}.arcade-card h3{margin:4px 0 8px;font-size:1.35rem}.arcade-card p{margin:0;color:var(--muted);line-height:1.6}.arcade-tag{font-size:.69rem;font-weight:900;letter-spacing:.11em;color:#39739c}.arcade-play{position:relative;z-index:1;align-self:flex-start;margin-top:18px}.arcade-shell{max-width:980px;margin:0 auto}.arcade-panel{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:16px;box-shadow:0 20px 55px rgba(15,39,67,.10)}.arcade-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}.arcade-stats{display:flex;gap:7px;flex-wrap:wrap}.arcade-pill{padding:7px 10px;border-radius:999px;background:#eef6fb;color:#24435e;font-size:.77rem;font-weight:800}.arcade-pill b{color:#0b253d}.arcade-stage{position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 50% 30%,#102b4f 0,#071628 55%,#030b15 100%);border:1px solid #183b5f;box-shadow:inset 0 0 50px rgba(0,0,0,.35)}.arcade-stage canvas{display:block;width:100%;height:auto;max-height:72vh;touch-action:none;user-select:none}.arcade-overlay{position:absolute;inset:0;z-index:5;display:none;place-items:center;padding:18px;background:linear-gradient(rgba(3,11,21,.68),rgba(3,11,21,.82));backdrop-filter:blur(4px)}.arcade-overlay.show{display:grid}.arcade-modal{width:min(520px,96%);padding:22px;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 28px 70px rgba(0,0,0,.28);text-align:center}.arcade-modal h3{margin:4px 0 8px}.arcade-modal p{color:var(--muted);margin:0 0 16px;line-height:1.55}.arcade-modal-icon{font-size:2.5rem}.arcade-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.arcade-select{width:100%;padding:11px 12px;border:1px solid #cbdbe7;border-radius:12px;background:#fff;margin:8px 0 14px}.arcade-note{text-align:center;color:#6b7f93;font-size:.8rem;margin:12px 0 0}.arcade-hud-right{display:flex;gap:8px;align-items:center}.arcade-chip{padding:5px 8px;border-radius:9px;background:#132f4f;color:#d7efff;font-size:.72rem;font-weight:800}.arcade-chip.hot{background:#5b1c1c;color:#ffd4d4}.math-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.math-choice{border:1px solid #cbdbe7;background:#f7fbfe;color:#17324d;border-radius:14px;padding:13px 8px;font-weight:900;cursor:pointer;transition:.16s}.math-choice:hover{transform:translateY(-1px);background:#e9f8ff;border-color:#84c9e9}.difficulty-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.difficulty-btn{padding:11px 6px;border:1px solid #cbdbe7;border-radius:12px;background:#f8fbfd;font-weight:800;cursor:pointer}.difficulty-btn.active{background:#173b5d;color:#fff;border-color:#173b5d}.mobile-pad{display:none;margin-top:11px;text-align:center}.mobile-pad button{width:52px;height:44px;margin:3px;border:0;border-radius:12px;background:#173b5d;color:#fff;font-size:1rem}.arcade-tipbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.arcade-tipbar span{font-size:.73rem;color:#6c8195;background:#f3f8fb;border:1px solid #e1ebf2;border-radius:999px;padding:5px 8px}.arcade-progress{height:8px;border-radius:999px;background:#e5edf3;overflow:hidden;margin:8px 0}.arcade-progress>span{display:block;height:100%;background:linear-gradient(90deg,#31d6ff,#7458ff);width:0}.arcade-toast{position:absolute;left:50%;top:18%;transform:translate(-50%,-8px);z-index:4;opacity:0;pointer-events:none;padding:8px 12px;border-radius:999px;background:rgba(8,23,41,.86);color:#fff;font-size:.78rem;font-weight:900;transition:.18s}.arcade-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.arcade-grid{grid-template-columns:1fr}.arcade-card{min-height:0}.arcade-panel{padding:10px;border-radius:18px}.arcade-stage{border-radius:16px}.arcade-modal{padding:18px}.arcade-toolbar{align-items:flex-start}.arcade-pill{font-size:.7rem}.mobile-pad{display:block}.math-choices{grid-template-columns:1fr}.difficulty-row{grid-template-columns:repeat(2,1fr)}.arcade-stage canvas{max-height:none}.page-hero.arcade-hero h1{font-size:1.8rem}}
/* v2.2 control hardening: keep game gestures inside the canvas */
.arcade-stage{overscroll-behavior:contain;touch-action:none}
.arcade-stage canvas{touch-action:none!important;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.arcade-stage canvas:focus{outline:none}

/* ========================================================================== */
/* EyeNesia Arcade v2.3 — Mobile responsive canvas + phone fullscreen          */
/* ========================================================================== */
.arcade-toolbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.arcade-fullscreen-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-height:36px}
.arcade-fullscreen-icon{font-size:1.08rem;line-height:1}
html.arcade-page-locked,body.arcade-page-locked{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none}

/* Native fullscreen and CSS fallback share the same layout. */
.arcade-panel:fullscreen,
.arcade-panel:-webkit-full-screen,
.arcade-panel.is-arcade-fullscreen,
.arcade-panel.arcade-pseudo-fullscreen{
  box-sizing:border-box;width:100vw;max-width:none;height:100vh;height:100dvh;margin:0!important;
  padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  border:0;border-radius:0;background:#020914;box-shadow:none;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;touch-action:none
}
.arcade-panel.arcade-pseudo-fullscreen{position:fixed!important;inset:0!important;z-index:2147483000!important;height:var(--arcade-vvh,100dvh)!important}
.arcade-panel:fullscreen .arcade-toolbar,
.arcade-panel:-webkit-full-screen .arcade-toolbar,
.arcade-panel.is-arcade-fullscreen .arcade-toolbar{flex:0 0 auto;margin:0 0 6px;padding:0 2px;min-height:38px}
.arcade-panel:fullscreen .arcade-stage,
.arcade-panel:-webkit-full-screen .arcade-stage,
.arcade-panel.is-arcade-fullscreen .arcade-stage{
  flex:1 1 auto;min-width:0;min-height:0;width:100%;height:auto;display:grid;place-items:center;border-radius:14px;background:#020914
}
.arcade-panel:fullscreen .arcade-stage canvas,
.arcade-panel:-webkit-full-screen .arcade-stage canvas,
.arcade-panel.is-arcade-fullscreen .arcade-stage canvas{
  width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;margin:auto;object-fit:contain;touch-action:none!important
}
.arcade-panel:fullscreen .arcade-tipbar,
.arcade-panel:-webkit-full-screen .arcade-tipbar,
.arcade-panel.is-arcade-fullscreen .arcade-tipbar,
.arcade-panel:fullscreen .arcade-note,
.arcade-panel:-webkit-full-screen .arcade-note,
.arcade-panel.is-arcade-fullscreen .arcade-note{display:none!important}
.arcade-panel:fullscreen .arcade-progress,
.arcade-panel:-webkit-full-screen .arcade-progress,
.arcade-panel.is-arcade-fullscreen .arcade-progress{flex:0 0 7px;margin:5px 2px 0}
.arcade-panel:fullscreen .arcade-overlay,
.arcade-panel:-webkit-full-screen .arcade-overlay,
.arcade-panel.is-arcade-fullscreen .arcade-overlay{border-radius:14px}
.arcade-panel:fullscreen .arcade-modal,
.arcade-panel:-webkit-full-screen .arcade-modal,
.arcade-panel.is-arcade-fullscreen .arcade-modal{max-height:calc(100dvh - 80px);overflow:auto;-webkit-overflow-scrolling:touch}

@media(max-width:760px){
  .section.arcade-page{padding-top:8px!important;padding-bottom:14px!important}
  .arcade-page>.container.arcade-shell,.arcade-page .container.arcade-shell{width:100%!important;max-width:none!important;padding-left:7px!important;padding-right:7px!important}
  .arcade-panel{padding:7px;border-radius:14px}
  .arcade-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;margin-bottom:7px;flex-wrap:nowrap}
  .arcade-stats{min-width:0;display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:1px}
  .arcade-stats::-webkit-scrollbar{display:none}
  .arcade-pill{flex:0 0 auto;padding:6px 8px;font-size:.68rem;white-space:nowrap}
  .arcade-hud-right,.arcade-toolbar-actions{display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
  .arcade-hud-right .arcade-chip{display:none}
  .arcade-toolbar .btn{min-width:38px;min-height:36px;padding:6px 8px;font-size:.72rem}
  .arcade-fullscreen-label{display:none}
  .arcade-fullscreen-btn{min-width:38px!important;padding-left:8px!important;padding-right:8px!important}
  .arcade-stage{width:100%;border-radius:12px;display:block;touch-action:none!important;overscroll-behavior:none}
  .arcade-stage canvas{display:block;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;margin:0 auto}
  .arcade-overlay{padding:8px}
  .arcade-modal{width:min(96%,520px);padding:14px;border-radius:16px;max-height:82dvh;overflow:auto;-webkit-overflow-scrolling:touch}
  .arcade-modal-icon{font-size:2rem}.arcade-modal h3{font-size:1.05rem}.arcade-modal p{font-size:.84rem;line-height:1.45;margin-bottom:10px}
  .difficulty-row{gap:5px;margin:7px 0}.difficulty-btn{padding:8px 5px;font-size:.75rem}.math-choice{padding:10px 7px}
  .arcade-tipbar{gap:4px;margin-top:6px}.arcade-tipbar span{font-size:.65rem;padding:4px 6px}
  .mobile-pad{margin-top:5px}.mobile-pad button{width:48px;height:40px;margin:2px;border-radius:10px;touch-action:manipulation}
  .page-hero.arcade-hero{padding-top:18px!important;padding-bottom:16px!important}.page-hero.arcade-hero h1{font-size:1.5rem;margin-bottom:5px}.page-hero.arcade-hero p{font-size:.84rem;line-height:1.45}.arcade-hero .arcade-kicker{font-size:.62rem;padding:5px 8px}

  /* In fullscreen the HUD stays compact and gameplay receives nearly all space. */
  .arcade-panel:fullscreen,.arcade-panel:-webkit-full-screen,.arcade-panel.is-arcade-fullscreen{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  .arcade-panel:fullscreen .arcade-toolbar,.arcade-panel:-webkit-full-screen .arcade-toolbar,.arcade-panel.is-arcade-fullscreen .arcade-toolbar{grid-template-columns:minmax(0,1fr) auto;margin-bottom:4px;min-height:34px}
  .arcade-panel:fullscreen .arcade-pill,.arcade-panel:-webkit-full-screen .arcade-pill,.arcade-panel.is-arcade-fullscreen .arcade-pill{padding:5px 7px;font-size:.64rem;background:#102a43;color:#dceeff}
  .arcade-panel:fullscreen .arcade-pill b,.arcade-panel:-webkit-full-screen .arcade-pill b,.arcade-panel.is-arcade-fullscreen .arcade-pill b{color:#fff}
  .arcade-panel:fullscreen .arcade-toolbar .btn,.arcade-panel:-webkit-full-screen .arcade-toolbar .btn,.arcade-panel.is-arcade-fullscreen .arcade-toolbar .btn{min-height:32px;padding:4px 7px;background:#0b2138;color:#e9f7ff;border-color:#294a69}
  .arcade-panel:fullscreen .mobile-pad,.arcade-panel:-webkit-full-screen .mobile-pad,.arcade-panel.is-arcade-fullscreen .mobile-pad{position:absolute;left:max(9px,env(safe-area-inset-left));bottom:max(9px,env(safe-area-inset-bottom));z-index:20;margin:0;text-align:left;pointer-events:none}
  .arcade-panel:fullscreen .mobile-pad button,.arcade-panel:-webkit-full-screen .mobile-pad button,.arcade-panel.is-arcade-fullscreen .mobile-pad button{pointer-events:auto;width:44px;height:40px;margin:2px;background:rgba(10,38,65,.72);border:1px solid rgba(153,220,255,.28);backdrop-filter:blur(4px)}
}

@media(max-width:420px){
  .arcade-toolbar .btn:not(.arcade-fullscreen-btn){font-size:0;width:38px;padding:0}
  .arcade-toolbar .btn:not(.arcade-fullscreen-btn)::before{content:'↻';font-size:1rem}
  .arcade-pill{font-size:.64rem;padding:5px 7px}
}

/* Landscape phones: prioritize the canvas and keep menus shallow. */
@media(max-height:520px) and (orientation:landscape){
  .arcade-panel.is-arcade-fullscreen .arcade-modal{max-height:calc(100dvh - 48px);padding:10px}
  .arcade-panel.is-arcade-fullscreen .arcade-modal-icon{display:none}
  .arcade-panel.is-arcade-fullscreen .arcade-modal p{margin-bottom:6px;font-size:.75rem}
  .arcade-panel.is-arcade-fullscreen .difficulty-row{grid-template-columns:repeat(4,1fr);margin:5px 0}
  .arcade-panel.is-arcade-fullscreen .difficulty-btn{padding:6px 4px}
}


/* v2.3.1 — preserve mobile button taps inside the game overlay. */
.arcade-overlay button,.arcade-modal button,.arcade-toolbar button,.mobile-pad button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  position:relative;
  z-index:1;
}
.arcade-overlay{pointer-events:none}
.arcade-overlay.show{pointer-events:auto}
.arcade-modal{pointer-events:auto}


/* ========================================================================== */
/* EyeNesia Arcade v2.3.2 — robust fullscreen viewport / canvas containment    */
/* ========================================================================== */
/*
   Fullscreen is a fixed viewport, not a scrollable page. The stage owns the
   remaining screen and the core script sizes the canvas to its exact logical
   aspect ratio. This avoids clipping the lower half of landscape game canvases
   on portrait phones and keeps the same behaviour across all four games.
*/
.arcade-panel:fullscreen,
.arcade-panel:-webkit-full-screen,
.arcade-panel.is-arcade-fullscreen,
.arcade-panel.arcade-pseudo-fullscreen{
  position:relative!important;
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020914!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}
.arcade-panel.arcade-pseudo-fullscreen{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  height:var(--arcade-vvh,100dvh)!important;
}

/* Toolbar floats above the game; the stage reserves its own safe top inset. */
.arcade-panel:fullscreen .arcade-toolbar,
.arcade-panel:-webkit-full-screen .arcade-toolbar,
.arcade-panel.is-arcade-fullscreen .arcade-toolbar{
  position:absolute!important;
  z-index:45!important;
  top:max(4px,env(safe-area-inset-top))!important;
  left:max(4px,env(safe-area-inset-left))!important;
  right:max(4px,env(safe-area-inset-right))!important;
  width:auto!important;
  min-height:34px!important;
  margin:0!important;
  padding:3px 4px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(2,9,20,.92),rgba(2,9,20,.58),rgba(2,9,20,0))!important;
  backdrop-filter:blur(2px);
}

/* The stage always equals the usable fullscreen viewport. */
.arcade-panel:fullscreen .arcade-stage,
.arcade-panel:-webkit-full-screen .arcade-stage,
.arcade-panel.is-arcade-fullscreen .arcade-stage{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:
    calc(max(4px,env(safe-area-inset-top)) + 44px)
    max(4px,env(safe-area-inset-right))
    max(8px,env(safe-area-inset-bottom))
    max(4px,env(safe-area-inset-left))!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020914!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}

/* Width/height are written in pixels by arcade-core.js while fullscreen. */
.arcade-panel:fullscreen .arcade-stage canvas,
.arcade-panel:-webkit-full-screen .arcade-stage canvas,
.arcade-panel.is-arcade-fullscreen .arcade-stage canvas{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  object-fit:fill!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}

/* Overlays cover the complete stage, never only the canvas' old CSS box. */
.arcade-panel:fullscreen .arcade-overlay,
.arcade-panel:-webkit-full-screen .arcade-overlay,
.arcade-panel.is-arcade-fullscreen .arcade-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:60!important;
  border-radius:0!important;
}

/* Galaxy Defender pulse bar stays available without consuming stage height. */
.arcade-panel:fullscreen .arcade-progress,
.arcade-panel:-webkit-full-screen .arcade-progress,
.arcade-panel.is-arcade-fullscreen .arcade-progress{
  position:absolute!important;
  z-index:46!important;
  left:12%!important;
  right:12%!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  height:6px!important;
  margin:0!important;
}

/* Math Maze d-pad remains an overlay and can never push/crop the arena. */
.arcade-panel:fullscreen .mobile-pad,
.arcade-panel:-webkit-full-screen .mobile-pad,
.arcade-panel.is-arcade-fullscreen .mobile-pad{
  position:absolute!important;
  z-index:55!important;
  left:max(8px,env(safe-area-inset-left))!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  margin:0!important;
  pointer-events:none!important;
}
.arcade-panel:fullscreen .mobile-pad button,
.arcade-panel:-webkit-full-screen .mobile-pad button,
.arcade-panel.is-arcade-fullscreen .mobile-pad button{
  pointer-events:auto!important;
}

/* Portrait phones keep the whole landscape arena visible (letterboxed), rather
   than allowing the lower part of the logical canvas to extend below the stage. */
@media(max-width:760px) and (orientation:portrait){
  .arcade-panel:fullscreen .arcade-stage,
  .arcade-panel:-webkit-full-screen .arcade-stage,
  .arcade-panel.is-arcade-fullscreen .arcade-stage{
    padding-top:calc(max(4px,env(safe-area-inset-top)) + 48px)!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
}

/* Landscape phones get a shallower HUD so more pixels go to gameplay. */
@media(max-height:520px) and (orientation:landscape){
  .arcade-panel:fullscreen .arcade-stage,
  .arcade-panel:-webkit-full-screen .arcade-stage,
  .arcade-panel.is-arcade-fullscreen .arcade-stage{
    padding-top:calc(max(3px,env(safe-area-inset-top)) + 38px)!important;
    padding-bottom:max(4px,env(safe-area-inset-bottom))!important;
  }
  .arcade-panel:fullscreen .arcade-toolbar,
  .arcade-panel:-webkit-full-screen .arcade-toolbar,
  .arcade-panel.is-arcade-fullscreen .arcade-toolbar{
    min-height:30px!important;
    padding:2px 3px!important;
  }
}