/* SPACEBOYCT.COM ARCADE HUB -------------------------------------------------- */
:root {
  --sb-panel: rgba(12, 14, 24, .94);
  --sb-line: rgba(139, 220, 255, .55);
  --sb-text: #f7fbff;
  --sb-accent: #61ddff;
  --sb-pink: #ff5cac;
  --sb-gold: #ffe36e;
}

#arcadeMenuButton,
#clickerToggle {
  position: fixed;
  z-index: 9000;
  top: max(12px, env(safe-area-inset-top));
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  padding: 10px 16px;
  color: #fff;
  background: linear-gradient(135deg, rgba(42,103,142,.95), rgba(93,24,114,.95));
  font: 900 13px/1 Arial, sans-serif;
  letter-spacing: .07em;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.25);
  cursor: pointer;
  user-select: none;
}
#arcadeMenuButton { left: max(12px, env(safe-area-inset-left)); }
#clickerToggle { right: max(12px, env(safe-area-inset-right)); background: linear-gradient(135deg, rgba(174,50,67,.96), rgba(225,121,42,.96)); }
#arcadeMenuButton:hover,#clickerToggle:hover { transform: translateY(-1px); filter: brightness(1.12); }

body.micro-active #arcadeMenuButton,
body.mega-active #arcadeMenuButton,
body.fps-active #arcadeMenuButton,
body.arcade-active #arcadeMenuButton,
body.beatz-active #arcadeMenuButton,
body.rpg-active #arcadeMenuButton,
body.cinema-active #arcadeMenuButton,
body.micro-active #clickerToggle,
body.mega-active #clickerToggle,
body.fps-active #clickerToggle,
body.arcade-active #clickerToggle,
body.beatz-active #clickerToggle,
body.rpg-active #clickerToggle,
body.cinema-active #clickerToggle { display: none; }

#arcadeMenu {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  overflow: auto;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: var(--sb-text);
  background:
    radial-gradient(circle at 14% 10%, rgba(59,210,255,.17), transparent 30%),
    radial-gradient(circle at 87% 22%, rgba(255,71,183,.15), transparent 28%),
    linear-gradient(145deg, #080a12, #12091d 60%, #070910);
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#arcadeMenu.active { display: block; }
#arcadeMenu::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px);
  opacity: .7;
}

.arcadeMenuInner { position: relative; max-width: 1180px; margin: 0 auto; }
.arcadeMenuTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.arcadeMenuTop h1 { margin: 0; font: 1000 clamp(32px, 7vw, 78px)/.9 Impact, 'Arial Black', sans-serif; letter-spacing: .035em; text-shadow: 0 0 20px rgba(92,221,255,.35), 5px 5px 0 #000; }
.arcadeMenuTop p { margin: 12px 0 0; max-width: 760px; color: #c8d6e6; font-size: clamp(13px, 1.5vw, 17px); line-height: 1.45; }
.arcadeCloseButton { border: 2px solid #fff; border-radius: 12px; background: #a9283d; color:#fff; min-width: 48px; min-height: 48px; font: 900 22px Arial; cursor:pointer; }
.arcadeTabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.arcadeTab { border: 1px solid rgba(255,255,255,.36); border-radius: 999px; padding: 9px 14px; background: rgba(255,255,255,.065); color:#fff; font-weight: 800; cursor:pointer; }
.arcadeTab.active { background: linear-gradient(135deg,#26a6d8,#c146ac); border-color:#fff; }
.arcadeSection { display:none; }
.arcadeSection.active { display:block; }
.arcadeGrid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 13px; }
.arcadeCard { position:relative; min-height: 150px; overflow:hidden; border:1px solid rgba(255,255,255,.23); border-radius:18px; padding:16px; color:#fff; background:linear-gradient(145deg,rgba(28,37,58,.92),rgba(19,16,30,.94)); box-shadow:0 14px 34px rgba(0,0,0,.26); cursor:pointer; text-align:left; }
.arcadeCard::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 84% 15%,var(--card-glow,rgba(74,213,255,.25)),transparent 40%); }
.arcadeCard:hover,.arcadeCard:focus-visible { transform:translateY(-3px); border-color:rgba(255,255,255,.7); box-shadow:0 18px 40px rgba(0,0,0,.38),0 0 24px var(--card-glow,rgba(74,213,255,.18)); }
.arcadeCard h3 { position:relative; z-index:1; margin:0 0 7px; font:900 20px/1.05 'Arial Black',Arial,sans-serif; }
.arcadeCard p { position:relative; z-index:1; margin:0; color:#c7d4e4; line-height:1.35; font-size:13px; }
.arcadeCard .arcadeTag { position:relative; z-index:1; display:inline-block; margin-top:14px; border-radius:999px; padding:5px 9px; background:rgba(255,255,255,.11); color:#fff1a8; font:800 11px Arial; text-transform:uppercase; letter-spacing:.05em; }
.arcadeSettingRow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 0; padding:14px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.045); }
.arcadeSettingRow label { font-weight:800; }
.arcadeSettingRow input[type='range'] { width:min(360px,48vw); }
.arcadeSettingRow input[type='checkbox'] { width:24px; height:24px; }
.arcadeFineprint { margin-top:18px; color:#8d9aad; font-size:12px; line-height:1.45; }

#clickerPanel {
  position: fixed;
  z-index: 9100;
  top: 66px;
  right: max(10px, env(safe-area-inset-right));
  width: min(310px, calc(100vw - 20px));
  max-height: calc(100vh - 84px);
  overflow:auto;
  display:none;
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
  border-radius:18px;
  padding:14px;
  box-sizing:border-box;
  background:linear-gradient(155deg,rgba(25,12,20,.97),rgba(35,24,12,.97));
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  font-family:Arial,sans-serif;
}
#clickerPanel.active { display:block; }
#clickerPanel h2 { margin:0 0 4px; font:900 22px 'Arial Black',Arial; }
#clickerStats { color:#ffe790; font-weight:800; line-height:1.5; }
#clickerFace { display:block; width:min(190px,70%); aspect-ratio:1; object-fit:cover; object-position:center; margin:12px auto; border-radius:50%; border:4px solid #fff; cursor:pointer; box-shadow:0 0 28px rgba(255,126,72,.38); transition:transform 80ms ease; }
#clickerFace:active { transform:scale(.91); }
.clickerUpgrade { width:100%; margin:7px 0; padding:10px; text-align:left; border:1px solid rgba(255,255,255,.28); border-radius:12px; color:#fff; background:rgba(255,255,255,.07); cursor:pointer; }
.clickerUpgrade:disabled { opacity:.44; cursor:not-allowed; }
.clickerUpgrade strong { display:block; }
.clickerUpgrade small { color:#d6c9bf; }
#clickerClose { position:absolute; top:8px; right:9px; border:0; border-radius:50%; width:30px; height:30px; color:#fff; background:#8b2634; font-weight:900; cursor:pointer; }

/* Shared extra-game takeover */
body.arcade-active { background:#020308!important; filter:none!important; cursor:crosshair; }
body.arcade-active > .bouncer,
body.arcade-active > #ghostFace,
body.arcade-active > #noiseOverlay,
body.arcade-active > #blackout,
body.arcade-active > #flashText,
body.arcade-active > #statusHint { visibility:hidden!important; }
#arcadeTakeover { position:fixed; inset:0; z-index:12500; display:none; overflow:hidden; background:#020308; color:#fff; font-family:'Arial Black',Impact,Arial,sans-serif; touch-action:none; user-select:none; }
#arcadeTakeover.active { display:block; }
#arcadeCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#arcadeFx { position:absolute; inset:0; pointer-events:none; z-index:2; background:radial-gradient(circle at 50% 44%,transparent 32%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.72) 100%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px); }
#arcadeHud { position:absolute; inset:0; z-index:4; pointer-events:none; text-shadow:3px 3px 0 #000,0 0 10px #000; }
#arcadeHudLeft,#arcadeHudCenter,#arcadeHudRight { position:absolute; top:max(12px,env(safe-area-inset-top)); white-space:pre-line; font:900 clamp(12px,1.6vw,21px)/1.25 'Courier New',monospace; }
#arcadeHudLeft { left:max(14px,env(safe-area-inset-left)); }
#arcadeHudCenter { left:50%; transform:translateX(-50%); text-align:center; color:#fff0a8; }
#arcadeHudRight { right:max(14px,env(safe-area-inset-right)); text-align:right; }
#arcadeMessage { position:absolute; z-index:7; top:15%; left:50%; transform:translateX(-50%); width:min(92vw,900px); text-align:center; font:1000 clamp(32px,7vw,86px)/.92 Impact,'Arial Black',sans-serif; color:#fff; text-shadow:5px 5px 0 #000,0 0 30px rgba(82,214,255,.5); opacity:0; pointer-events:none; }
#arcadeMessage.active { animation:arcadeMsg 1.3s ease both; }
#arcadeMessage small { display:block; margin-top:10px; font:900 clamp(12px,2vw,22px)/1.2 Arial,sans-serif; letter-spacing:.06em; }
#arcadeHint { position:absolute; z-index:5; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(92vw,900px); text-align:center; color:#dae8f6; font:800 clamp(11px,1.5vw,16px)/1.25 Arial,sans-serif; text-shadow:2px 2px 0 #000; pointer-events:none; }
#arcadeExit { position:absolute; z-index:10; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); border:2px solid #fff; border-radius:12px; min-width:44px; min-height:44px; color:#fff; background:rgba(139,28,50,.92); font-weight:900; cursor:pointer; }
#arcadeTouch { position:absolute; z-index:8; inset:auto 0 max(12px,env(safe-area-inset-bottom)) 0; display:none; justify-content:space-between; align-items:flex-end; padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); pointer-events:none; }
#arcadeTouch.active { display:flex; }
.arcadePad,.arcadeActions { display:grid; gap:7px; pointer-events:auto; }
.arcadePad { grid-template-columns:repeat(3,56px); grid-template-rows:repeat(2,56px); }
.arcadePad button:nth-child(1){grid-column:2}.arcadePad button:nth-child(2){grid-column:1;grid-row:2}.arcadePad button:nth-child(3){grid-column:2;grid-row:2}.arcadePad button:nth-child(4){grid-column:3;grid-row:2}
.arcadeActions { grid-template-columns:repeat(2,64px); }
.arcadeTouchButton { border:2px solid rgba(255,255,255,.75); border-radius:16px; min-width:54px; min-height:54px; background:rgba(22,29,43,.78); color:#fff; font:900 21px Arial; box-shadow:0 8px 18px rgba(0,0,0,.36); }
.arcadeTouchButton.pressed { transform:scale(.93); background:rgba(74,161,204,.9); }
@keyframes arcadeMsg { 0%{opacity:0;transform:translateX(-50%) scale(.75)}15%,72%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(.94)} }

/* Photosensitivity-safe chaos event: motion/chromatic distortion without rapid full-screen luminance flashes. */
#chaosWarning { position:fixed; inset:0; z-index:25000; display:none; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px; color:#ff1818; background:rgba(0,0,0,.96); font:1000 clamp(38px,9vw,110px)/.86 Impact,'Arial Black',sans-serif; letter-spacing:.025em; text-shadow:0 0 28px rgba(255,0,0,.75); }
#chaosWarning.active { display:flex; }
#chaosWarning small { display:block; max-width:760px; margin-top:22px; color:#fff; font:800 clamp(12px,1.6vw,18px)/1.4 Arial,sans-serif; letter-spacing:0; text-shadow:none; }
#chaosSkip { margin-top:20px; border:2px solid #fff; border-radius:12px; padding:11px 18px; background:#59151e; color:#fff; font-weight:900; cursor:pointer; }
body.safe-chaos .bouncer { animation:safeBouncerChaos .5s steps(2,end) infinite!important; filter:hue-rotate(var(--chaosHue,0deg)) saturate(1.8) contrast(1.18) drop-shadow(0 0 15px rgba(255,0,80,.8)); }
body.safe-chaos { background:#08000b!important; }
@keyframes safeBouncerChaos { 0%{opacity:1}50%{opacity:.72}100%{opacity:1} }

/* SPACEBOYBEATZ ------------------------------------------------------------ */
body.beatz-active,body.rpg-active,body.cinema-active { background:#05060b!important; filter:none!important; overflow:hidden!important; }
#beatzStudio,#rpgTakeover,#cinemaTakeover { position:fixed; inset:0; z-index:13500; display:none; overflow:auto; color:#fff; background:linear-gradient(145deg,#060812,#151027 62%,#05070d); font-family:Arial,sans-serif; box-sizing:border-box; }
#beatzStudio.active,#rpgTakeover.active,#cinemaTakeover.active { display:block; }
.studioTop,.rpgTop,.cinemaTop { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(10px,env(safe-area-inset-top)) 14px 10px; background:rgba(5,7,14,.93); border-bottom:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); }
.studioTop h2,.rpgTop h2,.cinemaTop h2 { margin:0; font:900 clamp(22px,4vw,42px)/1 'Arial Black',Arial; }
.studioClose,.rpgClose,.cinemaClose { border:2px solid #fff; border-radius:12px; min-width:44px; min-height:44px; background:#92243a; color:#fff; font-weight:900; cursor:pointer; }

#beatzBody { padding:16px; min-width:880px; }
.beatzToolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:14px; }
.beatzToolbar button,.beatzToolbar select,.beatzToolbar input { border:1px solid rgba(255,255,255,.36); border-radius:9px; padding:8px 11px; background:#1d2232; color:#fff; font-weight:800; }
#beatzPlay.playing { background:#248a54; }
#beatzGrid { display:grid; grid-template-columns:150px repeat(16,minmax(34px,1fr)); gap:4px; align-items:center; }
.beatzTrackLabel { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:36px; padding:0 8px; border-radius:8px; background:rgba(255,255,255,.06); font-weight:900; }
.beatzTrackLabel input { width:58px; }
.beatzStep { aspect-ratio:1; min-height:32px; border:1px solid rgba(255,255,255,.19); border-radius:7px; background:#151925; cursor:pointer; }
.beatzStep.active { background:linear-gradient(145deg,#43ddff,#b64cff); box-shadow:0 0 12px rgba(84,214,255,.5); }
.beatzStep.playhead { outline:3px solid #ffe76d; }
#beatzPiano { margin-top:14px; display:flex; gap:4px; height:110px; }
.beatzKey { flex:1; border:1px solid #555; border-radius:0 0 8px 8px; color:#111; background:#fff; font-weight:900; cursor:pointer; }
.beatzKey.black { margin:0 -2%; z-index:2; height:68%; color:#fff; background:#141722; }
#beatzStatus { margin-top:12px; color:#b9c9dc; }

#rpgBody { display:grid; grid-template-columns:minmax(0,1fr) min(360px,38vw); gap:12px; padding:12px; height:calc(100vh - 68px); box-sizing:border-box; }
#rpgCanvas { width:100%; height:100%; min-height:420px; border:1px solid rgba(255,255,255,.25); border-radius:16px; background:#071018; touch-action:none; }
#rpgPanel { overflow:auto; padding:14px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(255,255,255,.055); }
#rpgPanel h3 { margin:0 0 8px; }
.rpgButton { width:100%; margin:5px 0; padding:10px; border:1px solid rgba(255,255,255,.35); border-radius:10px; background:#202a3a; color:#fff; font-weight:900; cursor:pointer; }
.rpgPartyCard { display:grid; grid-template-columns:56px 1fr; gap:8px; margin:8px 0; padding:8px; border-radius:12px; background:rgba(255,255,255,.06); }
.rpgPartyCard img { width:56px; height:56px; object-fit:cover; border-radius:10px; }
#rpgTouch { display:none; position:absolute; z-index:6; left:16px; bottom:max(16px,env(safe-area-inset-bottom)); grid-template-columns:repeat(3,54px); grid-template-rows:repeat(2,54px); gap:5px; }
#rpgTouch.active { display:grid; }
#rpgTouch button { border:2px solid #fff; border-radius:14px; background:rgba(20,31,48,.8); color:#fff; font-size:22px; }
#rpgTouch button:nth-child(1){grid-column:2}#rpgTouch button:nth-child(2){grid-column:1;grid-row:2}#rpgTouch button:nth-child(3){grid-column:2;grid-row:2}#rpgTouch button:nth-child(4){grid-column:3;grid-row:2}

#cinemaBody { min-height:calc(100vh - 68px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; box-sizing:border-box; }
#cinemaCanvas { width:min(1120px,96vw); aspect-ratio:16/9; max-height:72vh; border:3px solid #fff; border-radius:16px; background:#000; box-shadow:0 18px 50px rgba(0,0,0,.6); }
#cinemaCaption { width:min(1050px,92vw); min-height:54px; margin-top:10px; text-align:center; font:900 clamp(16px,2.4vw,28px)/1.3 Arial,sans-serif; text-shadow:3px 3px 0 #000; }
#cinemaControls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
#cinemaControls button,#cinemaControls select { border:1px solid rgba(255,255,255,.45); border-radius:10px; padding:9px 12px; background:#1c2634; color:#fff; font-weight:900; }

@media (max-width:720px) {
  #arcadeMenuButton,#clickerToggle { top:max(8px,env(safe-area-inset-top)); padding:9px 12px; font-size:11px; }
  .arcadeMenuTop { align-items:flex-start; }
  .arcadeGrid { grid-template-columns:1fr 1fr; gap:9px; }
  .arcadeCard { min-height:128px; padding:12px; }
  .arcadeCard h3 { font-size:16px; }
  .arcadeCard p { font-size:11px; }
  #arcadeTouch { display:flex; }
  #rpgBody { grid-template-columns:1fr; grid-template-rows:minmax(360px,1fr) auto; height:auto; min-height:calc(100vh - 62px); }
  #rpgPanel { max-height:38vh; }
  #rpgTouch { display:grid; }
  #beatzStudio { overflow:auto; }
  #beatzBody { transform-origin:top left; }
}

@media (max-width:470px) {
  .arcadeGrid { grid-template-columns:1fr; }
  .arcadePad { grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px); }
  .arcadeActions { grid-template-columns:repeat(2,54px); }
  .arcadeTouchButton { min-width:48px;min-height:48px;font-size:18px; }
}

@media (prefers-reduced-motion: reduce) {
  .arcadeCard,#arcadeMenuButton,#clickerToggle { transition:none!important; }
  body.safe-chaos .bouncer,body.safe-chaos { animation:none!important; }
}

/* Persistent clicker tab and safe bouncer-extra effects. */
#clickerOpenButton {
  position: fixed;
  right: max(0px, env(safe-area-inset-right, 0px));
  top: 48%;
  z-index: 8998;
  transform: translateY(-50%);
  min-width: 42px;
  min-height: 104px;
  padding: 8px 7px;
  border: 2px solid rgba(255,255,255,.6);
  border-right: 0;
  border-radius: 15px 0 0 15px;
  background: linear-gradient(180deg, rgba(70,34,100,.95), rgba(8,9,15,.96));
  color: #fff3a7;
  font: 900 11px/1.15 "Arial Black", Impact, sans-serif;
  writing-mode: vertical-rl;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: -8px 8px 24px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.18);
}
body.hub-open #clickerOpenButton,
body.micro-active #clickerOpenButton,
body.mega-active #clickerOpenButton,
body.fps-active #clickerOpenButton,
body.arcade-active #clickerOpenButton,
body.beatz-active #clickerOpenButton,
body.rpg-active #clickerOpenButton,
body.story-active #clickerOpenButton { display:none; }

.safe-chaos-face {
  animation: safeFaceColourCycle 480ms steps(2,end) infinite !important;
}
@keyframes safeFaceColourCycle {
  0% { filter:hue-rotate(0deg) saturate(1.2) contrast(1.05) drop-shadow(0 0 6px #ff405c); }
  50% { filter:hue-rotate(145deg) saturate(1.65) contrast(1.15) drop-shadow(0 0 15px #50ddff); }
  100% { filter:hue-rotate(290deg) saturate(1.35) contrast(1.1) drop-shadow(0 0 10px #ffe06c); }
}
.disco-bouncer { filter:saturate(1.45) drop-shadow(0 0 13px rgba(126,229,255,.78)); }
.bouncer-extra-trail {
  position: fixed;
  z-index: 3;
  pointer-events: none;
  object-fit: contain;
  opacity: .32;
  animation: bouncerExtraTrail 900ms ease-out forwards;
}
@keyframes bouncerExtraTrail { to { opacity:0; transform:scale(.55) rotate(22deg); filter:hue-rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .safe-chaos-face { animation:none !important; filter:saturate(1.5) drop-shadow(0 0 12px #ffe06c); }
  .bouncer-extra-trail { animation:none; opacity:.12; }
}

/* BOUNCER EXTRAS ------------------------------------------------------------ */
#bouncerSpeech,#achievementToast,#arcadeToast{position:fixed;z-index:10020;left:50%;transform:translateX(-50%) translateY(10px);max-width:min(760px,90vw);padding:12px 17px;border:2px solid rgba(255,255,255,.72);border-radius:14px;color:#fff;background:rgba(6,8,13,.93);font:900 clamp(13px,2vw,20px)/1.25 Arial,sans-serif;text-align:center;box-shadow:0 14px 38px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;pointer-events:none}
#bouncerSpeech{bottom:max(48px,calc(env(safe-area-inset-bottom) + 42px));color:#fff08d}
#achievementToast,#arcadeToast{top:max(68px,calc(env(safe-area-inset-top) + 58px));bottom:auto}
#arcadeToast{color:#8ee9ff}
#bouncerSpeech.active,#achievementToast.active,#arcadeToast.active{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.bouncerHat{position:fixed;z-index:8;transform:translate(-50%,-86%);filter:drop-shadow(0 5px 5px rgba(0,0,0,.6));pointer-events:none}
.bouncerPortal{position:fixed;z-index:3;width:clamp(72px,10vw,138px);aspect-ratio:.62;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:portalPulse .8s ease-in-out infinite alternate}
.bouncerPortal.portalA{border:7px solid #64dfff;box-shadow:0 0 18px #42dfff,inset 0 0 26px #42dfff;background:radial-gradient(ellipse,rgba(0,0,0,.8),rgba(37,126,255,.3))}
.bouncerPortal.portalB{border:7px solid #ff9a32;box-shadow:0 0 18px #ff8b31,inset 0 0 26px #ff8b31;background:radial-gradient(ellipse,rgba(0,0,0,.8),rgba(255,86,31,.3))}
@keyframes portalPulse{from{filter:brightness(.85);transform:translate(-50%,-50%) scale(.96)}to{filter:brightness(1.4);transform:translate(-50%,-50%) scale(1.04)}}
.boingRain{position:fixed;inset:0;z-index:7;overflow:hidden;pointer-events:none}
.boingRain img{position:absolute;top:-110px;height:auto;border-radius:50%;animation:boingFall linear forwards;filter:drop-shadow(0 6px 9px rgba(0,0,0,.55))}
@keyframes boingFall{0%{transform:translateY(-100px) rotate(0)}100%{transform:translateY(calc(100vh + 220px)) rotate(900deg)}}
body.bouncer-disco{animation:discoBackdrop 1.25s linear infinite}
body.bouncer-disco .bouncer{filter:saturate(1.7) drop-shadow(0 0 18px #fff)!important}
@keyframes discoBackdrop{0%{background:#090014}25%{background:#001427}50%{background:#210006}75%{background:#002013}100%{background:#090014}}
body.bouncer-mirror>.bouncer{filter:hue-rotate(180deg) saturate(1.25);mix-blend-mode:screen}
body.bouncer-mirror{transform:scaleX(-1)}
body.bouncer-mirror #arcadeMenuButton,body.bouncer-mirror #clickerToggle,body.bouncer-mirror #bouncerSpeech,body.bouncer-mirror #achievementToast{transform:scaleX(-1)}
body.bouncer-slow>.bouncer{filter:blur(.4px) drop-shadow(8px 0 8px rgba(88,205,255,.35))}
body.arcade-menu-active>.bouncer,body.arcade-menu-active>#ghostFace,body.arcade-menu-active>#noiseOverlay{visibility:hidden!important}
@media(prefers-reduced-motion:reduce){.bouncerPortal,.boingRain img,body.bouncer-disco{animation:none!important}}

/* Extra bouncer laboratory events. */
.bouncerTether{position:fixed;z-index:3;height:7px;transform-origin:0 50%;pointer-events:none;border-radius:9px;background:linear-gradient(90deg,#ff70c9,#ffe86c,#70eaff);box-shadow:0 0 16px rgba(255,255,255,.65)}
.bouncerBumper{position:fixed;z-index:3;width:clamp(58px,8vw,108px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle at 35% 28%,#fff 0 8%,#ffeb70 14%,#ff4f9b 43%,#4c0c8a 74%,#090012 100%);border:5px solid rgba(255,255,255,.82);box-shadow:0 0 15px #ff54bc,0 0 38px rgba(91,222,255,.5),inset 0 0 20px rgba(255,255,255,.5)}
.bouncerLaserCanvas{position:fixed;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.bouncerZ{position:fixed;z-index:7;pointer-events:none;color:#a9dfff;font:1000 clamp(28px,5vw,62px)/1 Arial,sans-serif;text-shadow:0 0 12px #65bfff;animation:bouncerZFloat 1.6s ease-in-out infinite alternate}
@keyframes bouncerZFloat{from{transform:translateY(4px) rotate(-7deg);opacity:.45}to{transform:translateY(-15px) rotate(8deg);opacity:1}}
.bouncerBlackHole{position:fixed;left:50%;top:50%;z-index:3;width:clamp(70px,12vw,170px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,#000 0 35%,#34104e 42%,#ff5fca 53%,#58e9ff 61%,transparent 72%);box-shadow:0 0 25px #000,0 0 70px rgba(237,63,255,.7);animation:blackHoleSpin 1.2s linear infinite}
@keyframes blackHoleSpin{to{filter:hue-rotate(360deg);transform:translate(-50%,-50%) rotate(360deg) scale(1.12)}}
.bouncerPaintTrail{position:fixed;z-index:2;pointer-events:none;opacity:.48;animation:bouncerPaintFade .9s ease-out forwards}
@keyframes bouncerPaintFade{to{opacity:0;transform:scale(.35) rotate(28deg);filter:hue-rotate(220deg) blur(5px)}}
@media (prefers-reduced-motion:reduce){.bouncerZ,.bouncerBlackHole,.bouncerPaintTrail{animation:none!important}}

/* Individual microgame practice list inside the all-games hub. */
#microPracticeSection {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(6,7,13,.48);
}
#microPracticeSection h3 {
  margin: 0 0 5px;
  font: 900 18px/1 "Arial Black", Impact, sans-serif;
  color: #fff0a1;
}
#microPracticeSection > p {
  margin: 0 0 12px;
  color: rgba(255,255,255,.58);
  font: 700 12px/1.35 Arial, sans-serif;
}
#microPracticeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px,1fr));
  gap: 7px;
}
.microPracticeButton {
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 11px;
  background: linear-gradient(145deg,rgba(48,52,75,.62),rgba(10,11,18,.82));
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: 900 11px/1.18 "Arial Black",Impact,sans-serif;
}
.microPracticeButton small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.5);
  font: 700 9px/1.15 Arial,sans-serif;
}
#clickerPrestige{width:100%;margin:10px 0 2px;padding:11px;text-align:left;border:2px solid #ffe768;border-radius:12px;color:#fff7ae;background:linear-gradient(180deg,rgba(126,72,0,.72),rgba(43,15,0,.88));cursor:pointer;box-shadow:0 0 18px rgba(255,199,55,.14)}
#clickerPrestige:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.7)}
#clickerPrestige strong,#clickerPrestige small{display:block}#clickerPrestige small{margin-top:4px;color:#f2d8a8;line-height:1.25}

/* Drag, throw, double-click clone and right-click costume interactions. */
.bouncer.dragging { z-index:999!important; cursor:grabbing!important; filter:brightness(1.16) saturate(1.25) drop-shadow(0 0 22px rgba(111,225,255,.92))!important; }
body.bouncer-dragging,body.bouncer-dragging * { cursor:grabbing!important; }
.bouncer { touch-action:none; }

/* Optional lower-intensity presentation without disabling gameplay. */
body.reduced-effects #arcadeFx,
body.reduced-effects #fpsVignette,
body.reduced-effects #megaBloom,
body.reduced-effects #megaNoise { opacity:.22!important; animation:none!important; }
body.reduced-effects .bouncer,
body.reduced-effects .bouncer.shiny { animation:none!important; filter:none!important; }
body.reduced-effects #jumpscare.active { animation:none!important; }
body.reduced-effects.safe-chaos .bouncer { animation:none!important; filter:saturate(1.18)!important; opacity:1!important; }