/* ORBIT Arcade
   This stylesheet intentionally consumes the canonical ORBIT design tokens and UI language.
   Do not introduce a parallel Arcade palette or typography system. */

body.arcade-page{
  background:var(--deep-space);
  color:var(--stardust);
  font-family:var(--font-body);
}

.arcade-shell{
  max-width:1200px;
  margin:0 auto;
  padding:150px 32px 130px;
}

.arcade-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:64px;
  align-items:end;
  padding:0 0 76px;
  border-bottom:1px solid rgba(231,228,234,.14);
}

.arcade-hero::after{
  content:"";
  position:absolute;
  width:min(620px,58vw);
  height:360px;
  right:-140px;
  top:-120px;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(ellipse at center,rgba(118,99,154,.32),rgba(100,126,166,.08) 42%,transparent 72%);
  filter:blur(4px);
}

.arcade-hero-copy{max-width:840px}
.arcade-hero .eyebrow{margin-bottom:18px}

.arcade-hero h1{
  margin:0;
  max-width:900px;
  font-family:var(--font-display);
  font-size:clamp(52px,7vw,104px);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.arcade-hero h1 span{
  display:block;
  color:var(--pink);
}

.arcade-intro{
  max-width:600px;
  margin:24px 0 0;
  color:var(--lavender);
  font-size:16px;
  line-height:1.618;
}

.arcade-player-card{
  position:relative;
  background:var(--stardust);
  color:var(--ink);
  border:2.5px solid var(--ink);
  box-shadow:8px 8px 0 var(--nebula);
  padding:24px;
  transform:rotate(.5deg);
}

.arcade-player-label,
.arcade-player-id,
.arcade-game-index,
.arcade-game-meta,
.arcade-modal-step,
.arcade-field label,
.arcade-field-note,
.arcade-chip,
.arcade-back{
  font-family:var(--font-body);
}

.arcade-player-label{
  margin:0 0 18px;
  color:var(--plum);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.arcade-player-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.arcade-player-meta{min-width:0;flex:1}
.arcade-player-name{
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.arcade-player-id{
  margin:6px 0 0;
  color:var(--plum);
  font-size:10px;
  letter-spacing:.05em;
}

.arcade-text-button{
  appearance:none;
  border:0;
  padding:0;
  background:none;
  color:var(--plum);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}

.arcade-avatar{
  --avatar-accent:var(--pink);
  position:relative;
  flex:0 0 auto;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--deep-space);
}
.arcade-avatar::before,.arcade-avatar::after{
  content:"";
  position:absolute;
  border:1px solid var(--avatar-accent);
}
.arcade-avatar::before{width:22px;height:28px;border-radius:48% 48% 42% 42%;top:11px}
.arcade-avatar::after{width:31px;height:12px;border-radius:50%;bottom:6px;border-bottom:0}
.arcade-avatar[data-avatar="avatar-02"]{--avatar-accent:var(--lavender)}
.arcade-avatar[data-avatar="avatar-03"]{--avatar-accent:var(--cosmic-blue)}
.arcade-avatar[data-avatar="avatar-04"]{--avatar-accent:var(--stardust)}
.arcade-avatar[data-avatar="avatar-05"]{--avatar-accent:var(--nebula)}
.arcade-avatar[data-avatar="avatar-06"]{--avatar-accent:var(--pink)}
.avatar-mark{
  position:absolute;
  z-index:2;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--avatar-accent);
  box-shadow:10px 0 0 var(--avatar-accent),-10px 0 0 var(--avatar-accent);
}

.arcade-section{padding-top:112px}
.arcade-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:42px;
}
.arcade-section-heading h2{
  margin:0;
  max-width:760px;
  font-family:var(--font-display);
  font-size:clamp(32px,4.6vw,52px);
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
}
.arcade-section-heading p{
  margin:0;
  max-width:430px;
  color:var(--lavender);
  font-size:16px;
  line-height:1.618;
}

.arcade-game-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.arcade-game-card{
  position:relative;
  min-height:440px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  color:var(--stardust);
  text-decoration:none;
  border:1.5px solid rgba(231,228,234,.15);
  background:
    linear-gradient(160deg,rgba(118,99,154,.08),rgba(9,9,13,0)),
    var(--deep-space-2);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.arcade-game-card:hover,
.arcade-game-card:focus-visible{
  transform:translate(-4px,-4px);
  border-color:rgba(231,228,234,.3);
  box-shadow:9px 9px 0 var(--plum);
}

.arcade-game-card[data-game="stay-in-orbit"]{
  background:
    radial-gradient(circle at 74% 24%,rgba(214,160,164,.24),transparent 27%),
    linear-gradient(160deg,rgba(118,99,154,.12),rgba(9,9,13,0)),
    var(--deep-space-2);
}
.arcade-game-card[data-game="ludo"]{
  background:
    radial-gradient(circle at 78% 22%,rgba(100,126,166,.22),transparent 28%),
    linear-gradient(160deg,rgba(118,99,154,.1),rgba(9,9,13,0)),
    var(--deep-space-2);
}
.arcade-game-card[data-game="x-o"]{
  background:
    radial-gradient(circle at 78% 22%,rgba(181,168,200,.18),transparent 28%),
    linear-gradient(160deg,rgba(68,57,82,.24),rgba(9,9,13,0)),
    var(--deep-space-2);
}

.arcade-game-card::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-72px;
  bottom:-72px;
  border:1px solid rgba(231,228,234,.1);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(231,228,234,.018),0 0 0 68px rgba(231,228,234,.01);
  pointer-events:none;
}
.arcade-game-card[data-game="ludo"]::after{border-radius:0;transform:rotate(28deg)}
.arcade-game-card[data-game="x-o"]::after{border-radius:0;transform:rotate(45deg)}

.arcade-game-top,.arcade-game-footer{position:relative;z-index:1}
.arcade-game-index{
  display:inline-block;
  margin-bottom:20px;
  color:var(--pink);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.arcade-game-card h3{
  margin:0;
  max-width:300px;
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,42px);
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
}
.arcade-game-card p{
  margin:16px 0 0;
  max-width:310px;
  color:var(--lavender);
  font-size:15px;
  line-height:1.618;
}
.arcade-game-footer{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
}
.arcade-game-meta{
  color:var(--lavender);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.arcade-game-enter{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--stardust);
  color:var(--stardust);
  font-size:18px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.arcade-game-card:hover .arcade-game-enter{
  background:var(--pink);
  border-color:var(--pink);
  color:var(--ink);
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--nebula);
}

/* Player setup: styled as an ORBIT pass / ticket rather than a generic product modal. */
.arcade-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
  place-items:center;
  padding:20px;
}
.arcade-modal.open{display:grid}
.arcade-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,9,13,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.arcade-modal-dialog{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  padding:32px;
  background:var(--stardust);
  color:var(--ink);
  border:2.5px solid var(--ink);
  box-shadow:12px 12px 0 var(--nebula);
}
.arcade-modal-dialog::before,
.arcade-modal-dialog::after{
  content:"";
  position:absolute;
  top:51%;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--deep-space);
}
.arcade-modal-dialog::before{left:-12px}
.arcade-modal-dialog::after{right:-12px}

.arcade-modal-step{
  color:var(--plum);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.arcade-modal h2{
  margin:14px 0 12px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(34px,6vw,52px);
  font-weight:700;
  line-height:.98;
  text-transform:uppercase;
}
.arcade-modal-copy{
  margin:0 0 26px;
  max-width:500px;
  color:#403b48;
  font-size:15px;
  line-height:1.618;
}

.arcade-field label{
  display:block;
  margin-bottom:8px;
  color:var(--plum);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.arcade-field input{
  width:100%;
  min-height:54px;
  box-sizing:border-box;
  padding:0 15px;
  border:2px solid var(--ink);
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
}
.arcade-field input:focus{
  box-shadow:4px 4px 0 var(--pink);
}
.arcade-field-note{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:8px;
  color:#5a5365;
  font-size:10px;
}

.arcade-avatar-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  margin:22px 0 4px;
}
.arcade-avatar-option{
  position:relative;
  appearance:none;
  min-height:78px;
  display:grid;
  place-items:center;
  border:1.5px solid rgba(9,9,13,.24);
  background:transparent;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.arcade-avatar-option:hover{
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 rgba(68,57,82,.22);
}
.arcade-avatar-option.selected{
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--pink);
}
.arcade-avatar-option .arcade-avatar{width:48px;height:48px}
.avatar-check{
  position:absolute;
  top:6px;
  right:7px;
  opacity:0;
  color:var(--plum);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
}
.arcade-avatar-option.selected .avatar-check{opacity:1}

.arcade-profile-actions{
  display:flex;
  gap:12px;
  margin-top:26px;
}
.arcade-profile-actions .btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.arcade-profile-actions .btn-pink{flex:1}

.arcade-privacy{
  margin:16px 0 0;
  color:#625b6d;
  font-size:10px;
  line-height:1.5;
}
.arcade-form-error{
  min-height:18px;
  margin:8px 0 0;
  color:#8b3947;
  font-size:11px;
  font-weight:600;
}

/* Game route foundations */
.arcade-game-shell{
  max-width:1200px;
  margin:0 auto;
  padding:150px 32px 130px;
}
.arcade-game-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px;
  margin-bottom:44px;
}
.arcade-game-header h1{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-size:clamp(42px,7vw,78px);
  font-weight:700;
  line-height:.95;
  text-transform:uppercase;
}
.arcade-back{
  color:var(--lavender);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.arcade-back:hover{color:var(--pink)}

.arcade-placeholder{
  min-height:500px;
  display:grid;
  place-items:center;
  padding:40px;
  border:1.5px solid rgba(231,228,234,.15);
  background:
    radial-gradient(ellipse 700px 320px at 50% 0%,rgba(118,99,154,.26),transparent 65%),
    var(--deep-space-2);
  text-align:center;
}
.arcade-placeholder-inner{max-width:620px}
.arcade-placeholder h2{
  margin:16px 0 14px;
  font-family:var(--font-display);
  font-size:clamp(30px,4.6vw,52px);
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
}
.arcade-placeholder p{
  color:var(--lavender);
  font-size:16px;
  line-height:1.618;
}
.arcade-chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:24px;
}
.arcade-chip{
  padding:8px 11px;
  border:1px solid rgba(231,228,234,.2);
  color:var(--lavender);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:900px){
  .arcade-hero{grid-template-columns:1fr;gap:42px}
  .arcade-player-card{max-width:440px}
  .arcade-game-grid{grid-template-columns:1fr}
  .arcade-game-card{min-height:350px}
}
@media(max-width:640px){
  .arcade-shell,.arcade-game-shell{padding:112px 20px 90px}
  .arcade-hero{padding-bottom:54px}
  .arcade-hero h1{font-size:clamp(43px,13.5vw,70px)}
  .arcade-section{padding-top:90px}
  .arcade-section-heading{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:30px}
  .arcade-game-card{min-height:330px;padding:24px 22px}
  .arcade-modal{padding:12px}
  .arcade-modal-dialog{padding:24px 20px}
  .arcade-avatar-grid{grid-template-columns:repeat(3,1fr)}
  .arcade-profile-actions{flex-direction:column}
  .arcade-game-header{align-items:flex-start;flex-direction:column-reverse}
}
@media(prefers-reduced-motion:reduce){
  .arcade-game-card,.arcade-game-enter,.arcade-avatar-option{transition:none!important}
}
/* =========================================================
   v1.3 interface corrections
   - Player setup is inline on /arcade, not a viewport overlay.
   - Avatar selection does not translate on hover.
   - No modal overflow/scroll locking.
   - Cancel button is legible on the light ORBIT pass surface.
   ========================================================= */

.arcade-player-panel{
  min-width:0;
  align-self:end;
}

/* Summary keeps the existing ORBIT ticket treatment. */
.arcade-player-card{
  transform:none;
}

/* Inline identity setup: part of the Arcade page, never fixed to the viewport. */
.arcade-profile-setup{
  position:relative;
  width:100%;
  min-width:0;
  padding:28px;
  background:var(--stardust);
  color:var(--ink);
  border:2.5px solid var(--ink);
  box-shadow:8px 8px 0 var(--nebula);
  overflow:visible;
}

.arcade-profile-setup[hidden],
.arcade-player-card[hidden]{
  display:none !important;
}

.arcade-profile-setup::before{
  content:"PLAYER PASS";
  display:block;
  margin-bottom:14px;
  color:var(--plum);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.arcade-profile-setup h2{
  margin:10px 0 12px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
}

/* Remove the old overlay/modal behaviour completely. */
.arcade-modal,
.arcade-modal-backdrop,
.arcade-modal-dialog{
  display:none !important;
}

/* Avatar grid must remain geometrically stable on hover and selection. */
.arcade-avatar-grid{
  width:100%;
  min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}

.arcade-avatar-option{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:78px;
  padding:8px;
  transform:none !important;
  overflow:hidden;
}

.arcade-avatar-option:hover,
.arcade-avatar-option:focus-visible{
  transform:none !important;
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}

.arcade-avatar-option.selected{
  transform:none !important;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--pink);
}

/* Prevent the selected shadow from causing horizontal overflow in the final column. */
.arcade-avatar-option:nth-child(3n).selected{
  box-shadow:-4px 4px 0 var(--pink);
}

/* Light-surface secondary action. Canonical .btn defaults are for the dark site surface. */
.arcade-cancel-btn{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}

.arcade-cancel-btn:hover,
.arcade-cancel-btn:focus-visible{
  color:var(--ink);
  background:transparent;
  box-shadow:5px 5px 0 var(--plum);
}

/* The form must never create an internal scroller. */
.arcade-profile-setup,
.arcade-profile-setup form,
.arcade-avatar-grid{
  max-height:none;
  overflow:visible;
}

/* Protect the page from decorative overflow without introducing a horizontal scroller. */
body.arcade-page{
  overflow-x:hidden;
}

@media(max-width:900px){
  .arcade-player-panel{
    width:min(100%,520px);
  }
}

@media(max-width:640px){
  .arcade-profile-setup{
    padding:22px 18px;
    box-shadow:6px 6px 0 var(--nebula);
  }

  .arcade-avatar-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .arcade-avatar-option{
    min-height:70px;
  }

  .arcade-profile-actions{
    flex-direction:column-reverse;
  }

  .arcade-profile-actions .btn{
    width:100%;
  }
}
/* =========================================================
   v1.4 - Arcade landing + game-entry UX
   ========================================================= */

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

.arcade-hero-actions{
  margin-top:32px;
}

.arcade-hero-actions .btn{
  min-width:170px;
  text-align:center;
}

/* Hero visual anchor: abstract ORBIT gaming language, not controller clip-art. */
.arcade-visual{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border:1.5px solid rgba(231,228,234,.16);
  background:
    radial-gradient(circle at 66% 34%,rgba(214,160,164,.16),transparent 25%),
    radial-gradient(circle at 30% 72%,rgba(100,126,166,.18),transparent 30%),
    var(--deep-space-2);
}

.arcade-visual::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(231,228,234,.08);
  pointer-events:none;
}

.arcade-visual-orbit{
  position:absolute;
  left:50%;
  top:48%;
  border:1px solid rgba(231,228,234,.22);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
}

.arcade-visual .orbit-a{width:300px;height:150px}
.arcade-visual .orbit-b{width:390px;height:220px;transform:translate(-50%,-50%) rotate(42deg)}

.arcade-visual-core{
  position:absolute;
  left:50%;
  top:48%;
  width:150px;
  height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%) rotate(-4deg);
  background:var(--pink);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--nebula);
}

.arcade-visual-core span,
.arcade-visual-core strong,
.arcade-visual-caption,
.arcade-visual-token{
  font-family:var(--font-body);
}

.arcade-visual-core span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}
.arcade-visual-core strong{
  margin-top:4px;
  font-size:18px;
  letter-spacing:.03em;
}

.arcade-visual-tile,
.arcade-visual-token{
  position:absolute;
  display:grid;
  place-items:center;
  border:1.5px solid rgba(231,228,234,.38);
  color:var(--stardust);
  background:var(--deep-space);
}

.arcade-visual-tile{
  width:58px;
  height:58px;
  font-family:var(--font-display);
  font-size:30px;
}

.arcade-visual .tile-x{left:11%;top:17%;transform:rotate(-8deg)}
.arcade-visual .tile-o{right:12%;bottom:17%;transform:rotate(7deg)}

.arcade-visual-token{
  right:12%;
  top:13%;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--nebula);
  font-size:10px;
  font-weight:700;
}

.arcade-visual-die{
  position:absolute;
  left:13%;
  bottom:14%;
  width:66px;
  height:66px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:10px;
  box-sizing:border-box;
  transform:rotate(12deg);
  border:1.5px solid var(--stardust);
  background:var(--stardust);
  box-shadow:6px 6px 0 var(--plum);
}
.arcade-visual-die span{
  width:6px;
  height:6px;
  place-self:center;
  border-radius:50%;
  background:var(--ink);
}
.arcade-visual-die span:nth-child(1){grid-area:1/1}
.arcade-visual-die span:nth-child(2){grid-area:1/3}
.arcade-visual-die span:nth-child(3){grid-area:2/2}
.arcade-visual-die span:nth-child(4){grid-area:3/1}
.arcade-visual-die span:nth-child(5){grid-area:3/3}

.arcade-visual-caption{
  position:absolute;
  left:20px;
  top:20px;
  padding:7px 9px;
  color:var(--lavender);
  border:1px solid rgba(231,228,234,.14);
  font-size:9px;
  letter-spacing:.08em;
}

/* Returning-player identity sits beside game selection, never dominates the hero. */
.arcade-section-heading > div:first-child{
  max-width:650px;
}

.arcade-section-heading > div:first-child p{
  margin-top:14px;
}

.arcade-player-mini{
  min-width:250px;
  padding:14px 16px;
  border:1px solid rgba(231,228,234,.16);
  background:var(--deep-space-2);
}

.arcade-player-mini[hidden]{display:none!important}

#arcadePlayerMiniSlot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
}

.arcade-player-mini .arcade-avatar{
  width:40px;
  height:40px;
}

.arcade-player-mini .arcade-player-meta{
  display:grid;
  gap:1px;
}

.arcade-player-mini .arcade-player-label{
  margin:0;
  color:var(--lavender);
  font-size:8px;
}

.arcade-player-mini strong{
  font-family:var(--font-display);
  font-size:13px;
  text-transform:uppercase;
}

.arcade-player-mini small{
  color:var(--lavender);
  font-family:var(--font-body);
  font-size:8px;
}

/* ---------------------------------------------------------
   Player Pass: intentional transactional overlay
   --------------------------------------------------------- */
.arcade-pass-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  display:grid;
  place-items:center;
  padding:28px 20px;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.arcade-pass-overlay[hidden]{display:none!important}

.arcade-pass-backdrop{
  position:fixed;
  inset:0;
  border:0;
  background:rgba(9,9,13,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:default;
}

.arcade-pass-card{
  position:relative;
  z-index:1;
  width:min(660px,100%);
  margin:auto;
  padding:30px;
  box-sizing:border-box;
  background:var(--stardust);
  color:var(--ink);
  border:2.5px solid var(--ink);
  box-shadow:12px 12px 0 var(--nebula);
}

.arcade-pass-card::before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  width:20px;
  height:20px;
  margin-top:-10px;
  border-radius:50%;
  background:var(--deep-space);
}

.arcade-pass-card::after{
  content:"";
  position:absolute;
  right:-12px;
  top:50%;
  width:20px;
  height:20px;
  margin-top:-10px;
  border-radius:50%;
  background:var(--deep-space);
}

.arcade-pass-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
}

.arcade-pass-kicker{
  color:var(--plum);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.arcade-pass-card h2{
  margin:10px 0 0;
  max-width:520px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,46px);
  line-height:.96;
  text-transform:uppercase;
}

.arcade-pass-copy{
  margin:14px 0 24px;
  max-width:520px;
  color:#4c4654;
  font-size:14px;
  line-height:1.55;
}

.arcade-pass-close{
  appearance:none;
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font-size:23px;
  line-height:1;
}

.arcade-pass-close:hover,
.arcade-pass-close:focus-visible{
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--pink);
}

.arcade-pass-avatar-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
  color:var(--plum);
  font-family:var(--font-body);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.arcade-pass-card .arcade-avatar-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:9px;
}

.arcade-pass-card .arcade-avatar-option{
  min-height:82px;
  grid-template-columns:48px 1fr;
  gap:8px;
  justify-items:start;
  padding:10px;
}

.arcade-pass-card .arcade-avatar-name{
  color:var(--plum);
  font-family:var(--font-body);
  font-size:8px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.arcade-pass-card .arcade-avatar-option:hover,
.arcade-pass-card .arcade-avatar-option:focus-visible{
  transform:none!important;
  box-shadow:inset 0 0 0 1px var(--ink);
}

.arcade-pass-card .arcade-avatar-option.selected{
  box-shadow:4px 4px 0 var(--pink);
}

.arcade-pass-card .arcade-profile-actions{
  align-items:stretch;
}

.arcade-pass-card .arcade-profile-actions .btn{
  flex:1;
}

body.arcade-pass-open{
  overflow:hidden;
}

/* ---------------------------------------------------------
   Game landing pages
   --------------------------------------------------------- */
.arcade-game-header{
  display:block;
  margin-bottom:48px;
}

.arcade-game-header .arcade-back{
  display:inline-block;
  margin:0 0 42px;
}

.arcade-game-title{
  max-width:820px;
}

.arcade-game-title h1{
  margin:12px 0 16px;
}

.arcade-game-title > p:last-child{
  max-width:660px;
  margin:0;
  color:var(--lavender);
  font-size:16px;
  line-height:1.618;
}

.arcade-game-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:24px;
  align-items:stretch;
}

.arcade-game-preview{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border:1.5px solid rgba(231,228,234,.16);
  background:var(--deep-space-2);
}

.arcade-game-config{
  padding:30px;
  border:1.5px solid rgba(231,228,234,.16);
  background:var(--deep-space-2);
}

.arcade-game-config .arcade-pass-kicker{
  color:var(--pink);
}

.arcade-choice-group{
  min-width:0;
  margin:28px 0 0;
  padding:0;
  border:0;
}

.arcade-choice-group legend{
  width:100%;
  margin-bottom:10px;
  color:var(--lavender);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.arcade-choice-grid{
  display:grid;
  gap:10px;
}

.arcade-choice-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.arcade-choice-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.arcade-choice{
  min-width:0;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  padding:15px;
  border:1.5px solid rgba(231,228,234,.2);
  background:transparent;
  color:var(--stardust);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.arcade-choice:hover,
.arcade-choice:focus-visible{
  border-color:rgba(231,228,234,.5);
  box-shadow:4px 4px 0 var(--plum);
}

.arcade-choice.selected{
  border-color:var(--pink);
  background:rgba(214,160,164,.08);
  box-shadow:4px 4px 0 var(--pink);
}

.arcade-choice span{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
}

.arcade-choice small{
  margin-top:8px;
  color:var(--lavender);
  font-family:var(--font-body);
  font-size:8px;
  line-height:1.45;
}

.arcade-choice-mark span{
  font-size:32px;
}

.arcade-play-btn{
  width:100%;
  margin-top:28px;
}

.arcade-play-btn:disabled{
  opacity:.32;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
}

.arcade-play-ready{
  background:var(--stardust)!important;
  color:var(--ink)!important;
  border-color:var(--stardust)!important;
}

.arcade-play-hint{
  min-height:18px;
  margin:10px 0 0;
  color:var(--lavender);
  font-family:var(--font-body);
  font-size:9px;
}

.arcade-game-player{
  margin-top:20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding-top:18px;
  border-top:1px solid rgba(231,228,234,.12);
}

.arcade-game-player[hidden]{display:none!important}
.arcade-game-player .arcade-avatar{width:40px;height:40px}
.arcade-game-player > div{display:grid;gap:2px}
.arcade-game-player span{
  color:var(--lavender);
  font-family:var(--font-body);
  font-size:8px;
  text-transform:uppercase;
}
.arcade-game-player strong{
  font-family:var(--font-display);
  font-size:12px;
  text-transform:uppercase;
}

.arcade-how-to{
  padding-top:110px;
}

.arcade-how-to h2{
  max-width:780px;
  margin:12px 0 38px;
  font-family:var(--font-display);
  font-size:clamp(32px,4.5vw,52px);
  line-height:1;
  text-transform:uppercase;
}

.arcade-how-to-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(231,228,234,.14);
  border-bottom:1px solid rgba(231,228,234,.14);
}

.arcade-how-to-grid article{
  min-height:220px;
  padding:26px;
  border-right:1px solid rgba(231,228,234,.14);
}
.arcade-how-to-grid article:last-child{border-right:0}

.arcade-how-to-grid article > span{
  color:var(--pink);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
}

.arcade-how-to-grid h3{
  margin:54px 0 9px;
  font-family:var(--font-display);
  font-size:19px;
  text-transform:uppercase;
}

.arcade-how-to-grid p{
  margin:0;
  color:var(--lavender);
  font-size:14px;
  line-height:1.6;
}

/* Game-specific abstract art */
.ludo-art,
.xo-art{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.ludo-art-label,.xo-art-label{
  position:absolute;
  left:22px;
  bottom:22px;
  color:var(--lavender);
  font-family:var(--font-body);
  font-size:9px;
  letter-spacing:.08em;
}

.ludo-art{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 30%,rgba(214,160,164,.16),transparent 25%),
    radial-gradient(circle at 70% 70%,rgba(100,126,166,.16),transparent 27%);
}
.ludo-board-mini{
  position:relative;
  width:min(62%,330px);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:16px;
  transform:rotate(7deg);
  border:1.5px solid rgba(231,228,234,.3);
}
.ludo-board-mini > span{
  border:1px solid rgba(231,228,234,.16);
  background:rgba(231,228,234,.025);
}
.ludo-board-mini i{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:4px 4px 0 var(--plum);
}
.ludo-board-mini i:nth-of-type(1){left:22%;top:22%}
.ludo-board-mini i:nth-of-type(2){right:22%;top:22%;background:var(--cosmic-blue)}
.ludo-board-mini i:nth-of-type(3){left:22%;bottom:22%;background:var(--lavender)}
.ludo-board-mini i:nth-of-type(4){right:22%;bottom:22%;background:var(--nebula)}

.xo-art{
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(118,99,154,.2),transparent 48%);
}
.xo-grid{
  width:min(64%,350px);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
}
.xo-grid span{
  display:grid;
  place-items:center;
  border-right:1px solid rgba(231,228,234,.24);
  border-bottom:1px solid rgba(231,228,234,.24);
  color:var(--stardust);
  font-family:var(--font-display);
  font-size:clamp(28px,5vw,54px);
}
.xo-grid span:nth-child(3n){border-right:0}
.xo-grid span:nth-last-child(-n+3){border-bottom:0}

@media(max-width:900px){
  .arcade-hero{
    grid-template-columns:1fr;
  }
  .arcade-visual{
    min-height:380px;
  }
  .arcade-section-heading{
    align-items:flex-start;
  }
  .arcade-game-intro-grid{
    grid-template-columns:1fr;
  }
  .arcade-game-preview{
    min-height:430px;
  }
}

@media(max-width:640px){
  html{scroll-padding-top:90px}

  .arcade-visual{
    min-height:330px;
  }
  .arcade-visual .orbit-a{width:230px;height:120px}
  .arcade-visual .orbit-b{width:290px;height:175px}
  .arcade-visual-core{
    width:120px;
    height:120px;
  }

  .arcade-player-mini{
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .arcade-pass-overlay{
    place-items:start center;
    padding:14px 12px;
  }

  .arcade-pass-card{
    padding:22px 18px;
    box-shadow:7px 7px 0 var(--nebula);
  }

  .arcade-pass-card::before,
  .arcade-pass-card::after{
    display:none;
  }

  .arcade-pass-card .arcade-avatar-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .arcade-pass-card .arcade-avatar-option{
    grid-template-columns:42px 1fr;
    min-height:70px;
  }

  .arcade-pass-card .arcade-profile-actions{
    flex-direction:column-reverse;
  }

  .arcade-game-header .arcade-back{
    margin-bottom:32px;
  }

  .arcade-game-preview{
    min-height:350px;
  }

  .arcade-game-config{
    padding:22px 18px;
  }

  .arcade-choice-grid-2,
  .arcade-choice-grid-3{
    grid-template-columns:1fr;
  }

  .arcade-choice{
    min-height:78px;
  }

  .arcade-how-to{
    padding-top:84px;
  }

  .arcade-how-to-grid{
    grid-template-columns:1fr;
  }

  .arcade-how-to-grid article{
    min-height:0;
    border-right:0;
    border-bottom:1px solid rgba(231,228,234,.14);
  }

  .arcade-how-to-grid article:last-child{
    border-bottom:0;
  }

  .arcade-how-to-grid h3{
    margin-top:30px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
/* =========================================================
   v1.5 - Compact Player Pass
   Mirrors the existing Join ORBIT form field treatment.
   ========================================================= */

/* Match the existing Join ORBIT field exactly:
   2px ink border, transparent background, 11x12 padding,
   14px body type, 3px nebula focus shadow. */
.arcade-pass-card .arcade-field label{
  display:block;
  margin-bottom:6px;
  color:#332e3c;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.arcade-pass-card .arcade-field input{
  width:100%;
  min-height:0;
  box-sizing:border-box;
  padding:11px 12px;
  border:2px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  transition:box-shadow .2s ease;
}

.arcade-pass-card .arcade-field input:focus{
  outline:none;
  box-shadow:3px 3px 0 var(--nebula);
}

/* Keep the Player Pass inside common laptop/mobile viewports. */
.arcade-pass-overlay{
  padding:16px;
}

.arcade-pass-card{
  width:min(560px,100%);
  padding:24px 24px 22px;
  box-shadow:9px 9px 0 var(--nebula);
}

.arcade-pass-card h2{
  margin-top:7px;
  font-size:clamp(27px,4vw,38px);
}

.arcade-pass-copy{
  margin:9px 0 18px;
  font-size:13px;
  line-height:1.5;
}

.arcade-pass-close{
  width:32px;
  height:32px;
  font-size:19px;
}

.arcade-pass-card .arcade-field-note{
  margin-top:6px;
  font-size:9px;
}

/* Six avatars in one compact row on desktop.
   Names remain accessible through aria-labels but are not visually displayed. */
.arcade-pass-avatar-head{
  margin-top:16px;
}

.arcade-pass-card .arcade-avatar-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin-top:7px;
}

.arcade-pass-card .arcade-avatar-option{
  min-width:0;
  min-height:64px;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  padding:7px;
}

.arcade-pass-card .arcade-avatar{
  width:42px;
  height:42px;
}

.arcade-pass-card .arcade-avatar-name{
  display:none!important;
}

.arcade-pass-card .avatar-check{
  top:4px;
  right:5px;
  font-size:9px;
}

.arcade-pass-card .arcade-form-error{
  min-height:14px;
  margin-top:5px;
}

.arcade-pass-card .arcade-profile-actions{
  gap:9px;
  margin-top:15px;
}

.arcade-pass-card .arcade-profile-actions .btn{
  min-height:44px;
  padding:10px 16px;
}

.arcade-pass-card .arcade-privacy{
  margin-top:10px;
  font-size:9px;
  line-height:1.45;
}

/* The overlay itself may scroll only as a last-resort viewport fallback.
   The card never has its own nested scrollbar. */
.arcade-pass-card,
.arcade-pass-card form,
.arcade-pass-card .arcade-avatar-grid{
  max-height:none;
  overflow:visible;
}

@media(max-width:640px){
  .arcade-pass-overlay{
    padding:10px;
  }

  .arcade-pass-card{
    padding:20px 16px 18px;
    box-shadow:6px 6px 0 var(--nebula);
  }

  .arcade-pass-card h2{
    font-size:clamp(25px,8vw,34px);
  }

  .arcade-pass-copy{
    margin-bottom:15px;
  }

  .arcade-pass-card .arcade-avatar-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px;
  }

  .arcade-pass-card .arcade-avatar-option{
    min-height:54px;
    padding:4px;
  }

  .arcade-pass-card .arcade-avatar{
    width:36px;
    height:36px;
  }

  .arcade-pass-card .arcade-profile-actions{
    flex-direction:row;
  }

  .arcade-pass-card .arcade-profile-actions .btn{
    width:auto;
    min-width:0;
  }

  .arcade-pass-card .arcade-profile-actions .arcade-cancel-btn{
    flex:0 0 auto;
  }
}

@media(max-width:390px){
  .arcade-pass-card .arcade-avatar-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .arcade-pass-card .arcade-avatar-option{
    min-height:50px;
  }

  .arcade-pass-card .arcade-avatar{
    width:34px;
    height:34px;
  }
}

@media(max-height:700px) and (min-width:391px){
  .arcade-pass-overlay{
    align-items:start;
    padding-top:10px;
    padding-bottom:10px;
  }

  .arcade-pass-card{
    padding-top:18px;
    padding-bottom:16px;
  }

  .arcade-pass-card h2{
    font-size:30px;
  }

  .arcade-pass-copy{
    margin:7px 0 13px;
  }

  .arcade-pass-avatar-head{
    margin-top:12px;
  }

  .arcade-pass-card .arcade-avatar-option{
    min-height:54px;
  }

  .arcade-pass-card .arcade-avatar{
    width:36px;
    height:36px;
  }

  .arcade-pass-card .arcade-profile-actions{
    margin-top:11px;
  }

  .arcade-pass-card .arcade-privacy{
    margin-top:7px;
  }
}
/* =========================================================
   v1.6 - exact shared behaviour + exact Join ORBIT field
   ========================================================= */

/* Player Pass now uses the homepage's native .field markup.
   Do not restyle .field here: orbit-theme.css is the source of truth. */
.arcade-pass-card .field{
  margin:0;
}

/* Keep browser autofill from introducing an opaque fill over the native transparent field. */
.arcade-pass-card .field input:-webkit-autofill,
.arcade-pass-card .field input:-webkit-autofill:hover,
.arcade-pass-card .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--stardust) inset;
  transition:background-color 9999s ease-out 0s;
}

/* Ensure shared navigation sits above Arcade decorative art. */
.arcade-page nav,
.arcade-page .mobile-menu-backdrop,
.arcade-page .mobile-menu-sheet{
  isolation:isolate;
}


/* =========================================================
   Arcade Gameplay Mode v3.0 - Clean / Fullscreen / Locked
   ========================================================= */

body.arcade-runtime-active{
  overflow:hidden!important;
  background:#050509;
}

body.arcade-runtime-active > nav,
body.arcade-runtime-active > header,
body.arcade-runtime-active > footer,
body.arcade-runtime-active > .site-footer,
body.arcade-runtime-active .arcade-game-shell,
body.arcade-runtime-active .sound-toggle,
body.arcade-runtime-active .join-modal{
  visibility:hidden!important;
  pointer-events:none!important;
}

body.arcade-runtime-active .arcade-runtime-screen{
  visibility:visible!important;
  pointer-events:auto!important;
}

.arcade-runtime-screen{
  position:fixed!important;
  inset:0!important;
  z-index:9990!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#050509!important;
}

.arcade-runtime-screen[hidden]{
  display:none!important;
}

.arcade-runtime-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(100,126,166,.10),transparent 28%),
    radial-gradient(ellipse at 72% 24%,rgba(118,99,154,.10),transparent 20%),
    linear-gradient(180deg,#040408 0%,#080810 56%,#020204 100%)!important;
}

.arcade-runtime-bar{
  position:absolute;
  z-index:30;
  top:max(18px,env(safe-area-inset-top));
  left:max(18px,env(safe-area-inset-left));
  right:max(18px,env(safe-area-inset-right));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  pointer-events:none;
}

.arcade-runtime-id{
  display:grid;
  gap:4px;
  padding:10px 12px;
  background:rgba(5,5,9,.38);
  backdrop-filter:blur(10px);
  border:1px solid rgba(231,228,234,.08);
}

.arcade-runtime-id span{
  font:700 8px/1 'JetBrains Mono',monospace;
  letter-spacing:.17em;
  color:rgba(231,228,234,.42);
}

.arcade-runtime-id strong{
  font:700 11px/1 var(--font-display);
  letter-spacing:.08em;
  color:rgba(231,228,234,.82);
}

.arcade-runtime-actions{
  display:flex;
  gap:7px;
  pointer-events:auto;
}

.arcade-runtime-action{
  appearance:none;
  min-width:72px;
  height:36px;
  padding:0 13px;
  border:1px solid rgba(231,228,234,.16);
  background:rgba(5,5,9,.52);
  backdrop-filter:blur(12px);
  color:rgba(231,228,234,.76);
  font:700 9px/1 'JetBrains Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.arcade-runtime-action:hover{
  border-color:rgba(231,228,234,.35);
  color:#fff;
}

.arcade-runtime-exit{
  color:var(--pink);
  border-color:rgba(214,160,164,.24);
}

/* Ludo and X/O clean gameplay canvases */
.arcade-runtime-center{
  position:absolute;
  inset:70px 20px 20px;
  display:grid;
  place-items:center;
}

.runtime-ludo-board{
  position:relative;
  width:min(72vh,72vw);
  aspect-ratio:1;
  border:1px solid rgba(231,228,234,.16);
  background:#0b0b11;
  box-shadow:0 35px 90px rgba(0,0,0,.45);
}

.runtime-ludo-home{
  position:absolute;
  width:34%;height:34%;
  border:1px solid rgba(231,228,234,.12);
}

.home-a{left:5%;top:5%;background:rgba(214,160,164,.14)}
.home-b{right:5%;top:5%;background:rgba(100,126,166,.14)}
.home-c{left:5%;bottom:5%;background:rgba(181,168,200,.12)}
.home-d{right:5%;bottom:5%;background:rgba(118,99,154,.14)}

.runtime-ludo-cross{
  position:absolute;
  left:42%;top:5%;width:16%;height:90%;
  background:rgba(231,228,234,.035);
  border-left:1px solid rgba(231,228,234,.12);
  border-right:1px solid rgba(231,228,234,.12);
}
.runtime-ludo-cross::after{
  content:"";
  position:absolute;
  left:-231%;top:41.1%;width:562%;height:17.8%;
  background:rgba(231,228,234,.035);
  border-top:1px solid rgba(231,228,234,.12);
  border-bottom:1px solid rgba(231,228,234,.12);
}

.runtime-ludo-core{
  position:absolute;
  left:42%;top:42%;
  width:16%;height:16%;
  display:grid;place-items:center;
  background:var(--pink);
  color:var(--ink);
  font:800 9px/1 'JetBrains Mono',monospace;
  letter-spacing:.08em;
  z-index:2;
}

.runtime-xo-board{
  width:min(68vh,68vw);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
}

.runtime-xo-board button{
  border:0;
  border-right:1px solid rgba(231,228,234,.22);
  border-bottom:1px solid rgba(231,228,234,.22);
  background:transparent;
}
.runtime-xo-board button:nth-child(3n){border-right:0}
.runtime-xo-board button:nth-last-child(-n+3){border-bottom:0}

@media(max-width:700px){
  .arcade-runtime-bar{
    top:max(10px,env(safe-area-inset-top));
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
  }
  .arcade-runtime-id{padding:8px 9px}
  .arcade-runtime-action{min-width:62px;height:34px;padding:0 10px}
  .arcade-runtime-center{inset:62px 12px 12px}
  .runtime-ludo-board,.runtime-xo-board{width:min(88vw,64vh)}
}


/* =========================================================
   v3.1.1 - Arcade hero anchor motion repair
   Targeted only at the /arcade hero visual.
   Does not change gameplay, Player Pass, nav, footer or parallax.
   ========================================================= */

@keyframes arcadeOrbitA {
  from { transform:translate(-50%,-50%) rotate(-18deg); }
  to   { transform:translate(-50%,-50%) rotate(342deg); }
}

@keyframes arcadeOrbitB {
  from { transform:translate(-50%,-50%) rotate(42deg); }
  to   { transform:translate(-50%,-50%) rotate(-318deg); }
}

@keyframes arcadeCoreBreathe {
  0%,100% {
    transform:translate(-50%,-50%) rotate(-4deg) scale(1);
    box-shadow:8px 8px 0 var(--nebula),0 0 0 rgba(214,160,164,0);
  }
  50% {
    transform:translate(-50%,-50%) rotate(-4deg) scale(1.035);
    box-shadow:8px 8px 0 var(--nebula),0 0 34px rgba(214,160,164,.20);
  }
}

@keyframes arcadeTileXFloat {
  0%,100% { transform:translate3d(0,0,0) rotate(-8deg); }
  50%     { transform:translate3d(0,-9px,0) rotate(-4deg); }
}

@keyframes arcadeTileOFloat {
  0%,100% { transform:translate3d(0,0,0) rotate(7deg); }
  50%     { transform:translate3d(-5px,8px,0) rotate(11deg); }
}

@keyframes arcadeTokenDrift {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg); }
  50%     { transform:translate3d(7px,-8px,0) rotate(7deg); }
}

@keyframes arcadeDieDrift {
  0%,100% { transform:translate3d(0,0,0) rotate(12deg); }
  50%     { transform:translate3d(-7px,7px,0) rotate(17deg); }
}

.arcade-page .arcade-visual .orbit-a{
  animation:arcadeOrbitA 26s linear infinite;
  transform-origin:center;
  will-change:transform;
}

.arcade-page .arcade-visual .orbit-b{
  animation:arcadeOrbitB 34s linear infinite;
  transform-origin:center;
  will-change:transform;
}

.arcade-page .arcade-visual-core{
  animation:arcadeCoreBreathe 4.8s ease-in-out infinite;
  transform-origin:center;
  will-change:transform,box-shadow;
}

.arcade-page .arcade-visual .tile-x{
  animation:arcadeTileXFloat 5.2s ease-in-out infinite;
  will-change:transform;
}

.arcade-page .arcade-visual .tile-o{
  animation:arcadeTileOFloat 5.8s ease-in-out infinite .35s;
  will-change:transform;
}

.arcade-page .arcade-visual-token{
  animation:arcadeTokenDrift 6.4s ease-in-out infinite .7s;
  will-change:transform;
}

.arcade-page .arcade-visual-die{
  animation:arcadeDieDrift 6.8s ease-in-out infinite .15s;
  will-change:transform;
}

@media(prefers-reduced-motion:reduce){
  .arcade-page .arcade-visual .orbit-a,
  .arcade-page .arcade-visual .orbit-b,
  .arcade-page .arcade-visual-core,
  .arcade-page .arcade-visual .tile-x,
  .arcade-page .arcade-visual .tile-o,
  .arcade-page .arcade-visual-token,
  .arcade-page .arcade-visual-die{
    animation:none!important;
  }
}

/* ---------- ARCADE HERO PARALLAX ----------
   Same scroll-parallax contract as the ORBIT landing page:
   .parallax + data-speed, moved by /js/parallax.js.
   These layers give the arcade hero the same depth as index.html. */
.arcade-hero-glow{
  position:absolute; z-index:-1; pointer-events:none;
  left:-14%; right:-14%; top:-170px; height:540px;
  background:
    radial-gradient(ellipse 760px 420px at 68% 0%, rgba(118,99,154,.34), transparent 60%),
    radial-gradient(ellipse 520px 360px at 6% 74%, rgba(100,126,166,.22), transparent 58%);
  filter:blur(2px);
}
.arcade-hero-deco{
  position:absolute; z-index:-1; pointer-events:none;
  right:34%; top:-120px; width:300px; height:300px; opacity:.55;
}
@media(max-width:1180px){
  .arcade-hero-deco{ right:-40px; top:-90px; }
}
.arcade-hero-deco-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed rgba(181,168,200,.42);
  animation:spin 30s linear infinite;
}
.arcade-hero-deco-ring.ring-2{
  inset:40px; border-color:rgba(214,160,164,.4);
  animation-duration:20s; animation-direction:reverse;
}
.arcade-hero-deco-ring.ring-3{
  inset:84px; border-color:rgba(100,126,166,.38);
  animation-duration:38s;
}
@media(max-width:900px){
  .arcade-hero-deco{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .arcade-hero-deco-ring{ animation:none; }
}