/* arcade.css — the cabinet every arcade game sits in (js/lib/arcade.js), in
   Aurora Glass: a strip with the score, the screen in a frosted frame, and
   on touch screens a pad of big buttons under it. The page never scrolls. */

body.arc-page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none;box-sizing:border-box;
  /* an installed app can draw right to the screen's edges, under the phone's
     status and gesture bars: keep the game and its pad clear of them */
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* …and some Android phones don't say so (arcade.js sets this in the installed app) */
body.arc-page.is-android-app{padding-bottom:max(env(safe-area-inset-bottom,0px),48px)}
body.arc-page::after{opacity:.5}
body.arc-page .site-header::before{opacity:1}
body.arc-page #app{flex:1;min-height:0;display:flex}

.arc{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:960px;margin:0 auto;
  padding:8px max(12px,var(--sal)) max(12px,var(--sab)) max(12px,var(--sar));
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none
}

/* ---- the strip ---- */
.arc-hud{
  display:flex;align-items:center;gap:6px 18px;padding:6px 8px 6px 18px;border-radius:18px;
  background:rgba(8,14,36,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px var(--glass-line),var(--glass-hi)
}
.arc-hud__cell{display:flex;align-items:baseline;gap:8px}
.arc-hud__label{font:800 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.arc-hud__num{font:800 21px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--snow)}
.arc-hud__level{font:800 13px/1 var(--font-body);color:var(--cyan);white-space:nowrap}
.arc-hud__lives{display:inline-flex;align-items:center;gap:2px;color:var(--coral)}
.arc-hud__lives svg{width:18px;height:18px}
.arc-hud__lives em{font:800 13px/1 var(--font-body);font-style:normal;color:var(--snow);margin-left:3px}
.arc-hud__pause{margin-left:auto;width:42px;height:42px}
.arc-hud__pause svg{width:18px;height:18px}
.arc-hud__tilt{margin-left:auto;width:42px;height:42px}
.arc-hud__tilt svg{width:20px;height:20px}
.arc-hud__tilt[aria-pressed="true"]{color:#06122A;background:var(--mint);box-shadow:0 0 18px -4px rgba(92,242,176,.7)}
.arc-hud__tilt + .arc-hud__full,.arc-hud__tilt + .arc-hud__pause{margin-left:0}
.arc-hud__full{margin-left:auto;width:42px;height:42px}
.arc-hud__full + .arc-hud__pause{margin-left:0}
.arc-hud__full svg{width:18px;height:18px}

/* widescreen on a computer: room for the wide layout */
.arc.is-wide{max-width:1500px}

/* full screen: the cabinet fills the screen, on the page's own sky */
.arc:fullscreen{max-width:none;width:100%;height:100%;margin:0;padding:14px 22px 18px;background:radial-gradient(120% 90% at 50% 0%,#12224A 0%,#070D1F 60%,#04070F 100%)}
.arc:-webkit-full-screen{max-width:none;width:100%;height:100%;margin:0;padding:14px 22px 18px;background:#070D1F}
.arc:fullscreen .arc-keys{display:none}

/* ---- the screen ---- */
.arc-stage{flex:1;min-height:0;min-width:0;display:grid;place-items:center}
.arc-frame{
  position:relative;padding:6px;box-sizing:border-box;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),var(--glass-hi),0 30px 60px -30px rgba(1,4,16,.95),0 0 60px -20px rgba(79,216,240,.25)
}
.arc-screen{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#132656,#070D24 60%,#050A18)}
.arc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}

.arc-overlay{position:absolute;inset:0;z-index:5;display:flex;border-radius:18px;overflow-y:auto;overscroll-behavior:contain;padding:16px;background:rgba(5,9,26,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.arc-overlay[hidden]{display:none}
.arc-card{
  display:grid;justify-items:center;gap:12px;width:min(340px,100%);margin:auto;padding:24px 22px;border-radius:24px;text-align:center;
  background:var(--surface-sheet);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),var(--glass-hi),var(--shadow-hi);
  animation:arcIn .32s var(--ease-spring)
}
@keyframes arcIn{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
:root[data-calm] .arc-card{animation:none}
.arc-card__title{margin:0;font:800 clamp(26px,5vw,32px)/1.1 var(--font-display);letter-spacing:-.015em}
.arc-card__line{margin:0;color:#C9D5EA;font:600 15.5px/1.5 var(--font-body);text-wrap:balance}
.arc-card__best{margin:0;font:800 14px/1 var(--font-body);color:var(--gold-hi)}
.arc-card__keys{margin:2px 0 0;font:600 12.5px/1.45 var(--font-body);color:var(--dim)}
.arc-card__note{margin:0;max-width:34ch;font:600 13.5px/1.45 var(--font-body);color:var(--mist);text-align:center}
.arc-card__note:empty{display:none}
.arc-card__note a{color:var(--cyan)}
.arc-card__resume{display:grid;justify-items:center;gap:6px}
.arc-card__resume:empty{display:none}
.arc-card__skip{margin:-8px 0 -4px}
.arc-card__stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.arc-card__stats div{display:grid;gap:6px;padding:12px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.arc-card__stats span{font:800 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.arc-card__stats b{font:800 24px/1 var(--font-display);font-variant-numeric:tabular-nums}
.arc-card .btn--lg{width:100%}
.arc-play{min-width:200px}
/* short screens: the end card keeps to the essentials so Play again and Get the app both fit */
@media (max-height:820px){.arc-card .join-invite span,.arc-card__skip{display:none}.arc-card{gap:10px;padding:18px 16px}}

/* ---- the pad (touch screens) ---- */
.arc-pad{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 6px}
.arc-pad[hidden]{display:none}
.arc-pad.is-solo{justify-content:center}
.arc-btn{
  display:grid;place-items:center;padding:0;border:0;border-radius:20px;color:var(--snow);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -12px rgba(1,4,16,.9);
  touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .08s,background-color .08s
}
.arc-btn.is-down{transform:scale(.93);background:rgba(92,242,176,.22);box-shadow:inset 0 0 0 1.5px var(--mint)}
.arc-btn svg{width:28px;height:28px}
.arc-btn--dir{width:62px;height:62px}
/* the pad's buttons grow with the screen: a share of its width, held back by
   its height so the game keeps most of the room (--bw: a d-pad key, --lr: a
   steering key, --act: a round action button) */
.arc{--bw:clamp(58px,min(24vw,12.5vh),124px);--lr:clamp(62px,min(21vw,13vh),132px);--act:clamp(66px,min(23vw,13.5vh),136px)}
/* the d-pad is laid out like a keyboard's arrow keys: up on its own, then left, down, right */
.arc-dpad{display:grid;grid-template-columns:repeat(3,var(--bw));grid-template-rows:repeat(2,calc(var(--bw) * .76));gap:6px}
.arc-dpad .arc-btn--dir{width:var(--bw);height:calc(var(--bw) * .76)}
.arc-dpad .arc-btn--up{grid-column:2;grid-row:1}
.arc-dpad .arc-btn--left{grid-column:1;grid-row:2}
.arc-dpad .arc-btn--down{grid-column:2;grid-row:2}
.arc-dpad .arc-btn--right{grid-column:3;grid-row:2}
.arc-pad:has(.arc-dpad){justify-content:center}
.arc-lr{display:flex;gap:12px}
.arc-lr .arc-btn--dir{width:var(--lr);height:calc(var(--lr) * .88)}
.arc-btn--mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font:800 11.5px/1 var(--font-display);color:var(--mint)}
.arc-btn--mid svg{width:22px;height:22px}
.arc-acts{display:flex;gap:12px}
.arc-btn--act{
  width:var(--act);height:var(--act);border-radius:50%;font:800 clamp(14px,calc(var(--act) * .18),20px)/1 var(--font-display);
  background:radial-gradient(circle at 35% 30%,rgba(255,224,154,.95),rgba(255,203,107,.85) 45%,rgba(214,150,50,.85));color:var(--on-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 26px -10px rgba(255,203,107,.55)
}
.arc-btn--act.is-down{background:radial-gradient(circle at 35% 30%,#FFF0C2,#FFCB6B)}
.arc-keys{margin:0;text-align:center;font:600 13px/1.4 var(--font-body);color:var(--dim)}

/* short screens (phones on their side): a slimmer strip and pad */
@media (max-height:540px){
  .arc{gap:6px;padding-top:4px}
  .arc-hud{padding:3px 6px 3px 14px}
  .arc-hud__pause{width:36px;height:36px}
  .arc{--bw:clamp(50px,15vh,96px);--lr:clamp(56px,17vh,104px);--act:clamp(62px,19vh,110px)}
}

/* shorter phones held upright (most phones once the browser's bars are in):
   a slightly smaller d-pad, and a slimmer strip and buttons, so the game gets the room */
@media (orientation:portrait) and (max-height:760px){

  .arc{gap:6px;padding-top:4px}
  .arc-hud{padding:3px 6px 3px 12px}
  .arc-hud__pause{width:36px;height:36px}

}

/* phones on their side: the pad moves to the sides of the screen, so the game
   gets the whole height (direction buttons on the left, the action buttons on the right) */
@media (max-height:540px) and (orientation:landscape){
  .arc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:6px 14px;max-width:none}
  .arc-hud{grid-column:1/-1}
  .arc-stage{grid-column:2;grid-row:2}
  .arc-pad{display:contents}
  .arc-pad>.arc-dpad,.arc-pad>.arc-lr{grid-column:1;grid-row:2;align-self:center}
  .arc-pad>.arc-acts{grid-column:3;grid-row:2;align-self:center;flex-direction:column}
  .arc-keys{display:none}
  .arc-card{width:min(600px,100%);padding:14px 16px}
  .arc-card:has(.arc-card__stats){grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px 20px;align-items:center}
}

/* small phones: the strip and the pad squeeze rather than overflow */
@media (max-width:440px){
  .arc-hud{gap:6px 12px;padding-left:12px}
  .arc-hud__cell{flex-direction:column;align-items:flex-start;gap:3px}
  .arc-hud__num{font-size:19px}
  .arc-hud__lives svg{width:16px;height:16px}
  .arc-pad{gap:10px;padding:2px 0}
  .arc-acts{gap:8px}
  .arc-lr{gap:8px}
  .arc-lr:has(.arc-btn--mid){--lr:clamp(58px,min(20vw,13vh),110px)}
}
@media (max-width:380px){
  .arc-hud{gap:6px 10px}
  .arc-hud__num{font-size:18px}

}

/* a follow game (Brick Smash) in full screen on a computer: no mouse pointer over the play */
.arc.is-follow:fullscreen .arc-stage,.arc.is-follow:-webkit-full-screen .arc-stage{cursor:none}

/* an aiming game (Space Rocks) with a mouse: a crosshair, and none at all while held (the reticle is the pointer then) */
.arc.is-aim .arc-canvas{cursor:crosshair}
.arc.is-aim .arc-canvas.is-aiming{cursor:none}

/* full screen on a phone: a game that plays by touch alone (.is-bare) loses
   its pad, so the board gets the whole screen; and keep clear of the camera
   cut-out and the rounded corners */
.arc.is-bare:fullscreen .arc-pad,.arc.is-bare:-webkit-full-screen .arc-pad{display:none}
@media (pointer:coarse){
  .arc:fullscreen{padding:max(8px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))}
}

/* small phones with a full strip (Moon Lander: tilt, full screen and pause): slimmer buttons and hearts */
@media (max-width:420px){
  .arc-hud .iconbtn{width:38px;height:38px}
  .arc-hud__lives svg{width:14px;height:14px}
  .arc-hud__level{font-size:13px}
  .arc-hud{gap:6px 9px}
}