html:has(body[data-page="balance"]),
body[data-page="balance"] { width: 100%; min-height: 100%; margin: 0; background: #090a0d; }
body[data-page="balance"] { min-height: 100dvh; overflow: hidden; }

.balance-game-page {
  --balance-safe-gap: clamp(.5rem, 1.5vmin, 1.25rem);
  display: grid;
  width: 100%;
  min-height: 100dvh;
  padding: var(--balance-safe-gap);
  box-sizing: border-box;
  place-items: center;
}

.balance-shell { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; }

.balance-stage {
  --balance-accent: #d94b39;
  --balance-accent-soft: rgb(217 75 57 / .32);
  --balance-energy: .25;
  --balance-timer-scale: 1;
  --balance-timer-glow: .35rem;
  --balance-pulse-duration: 2.8s;
  --yz-experience-hud-side: clamp(7rem, 25vw, 13.5rem);
  position: relative;
  width: min(100%, 70rem, calc((100dvh - var(--balance-safe-gap) * 2) * 4 / 3));
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 1.5rem;
  color: #fff;
  background: radial-gradient(circle at 50% 32%, rgb(62 63 68 / .9), rgb(12 13 16) 72%);
  box-shadow: 0 1.4rem 3.4rem rgb(21 19 20 / .2), inset 0 1px rgb(255 255 255 / .1);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.balance-stage::before,
.balance-stage::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.balance-stage::before {
  opacity: calc(.14 + var(--balance-energy) * .2);
  background:
    linear-gradient(90deg, transparent 49.8%, var(--balance-accent-soft) 50%, transparent 50.2%),
    repeating-linear-gradient(0deg, transparent 0 2.2rem, rgb(255 255 255 / .04) 2.25rem 2.3rem);
}

.balance-stage::after {
  opacity: calc(.08 + var(--balance-energy) * .26);
  background: radial-gradient(ellipse at 50% 100%, var(--balance-accent-soft), transparent 56%);
  filter: blur(1.1rem);
  animation: balance-stage-breathe var(--balance-pulse-duration) ease-in-out infinite;
}

.balance-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.balance-stage__watermark { position: absolute; z-index: 1; top: clamp(1.15rem, 3vw, 2.1rem); left: clamp(1.2rem, 3.3vw, 2.5rem); width: clamp(4.8rem, 11vw, 8.25rem); max-height: 24%; object-fit: contain; object-position: top left; opacity: .34; filter: blur(.7px) saturate(.9); pointer-events: none; user-select: none; }
.balance-joystick { --stick-x: 0px; --stick-y: 0px; position: absolute; z-index: 4; width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; border: 1px solid rgb(255 255 255 / .16); border-radius: 50%; background: rgb(255 255 255 / .018); box-shadow: inset 0 0 .8rem rgb(255 255 255 / .025); opacity: .46; pointer-events: none; }
.balance-joystick__axis, .balance-joystick__axis::after { position: absolute; display: block; content: ""; background: rgb(255 255 255 / .42); }
.balance-joystick__axis { inset: 50% .5rem auto; height: 1px; }
.balance-joystick__axis::after { top: calc(-3rem + .5rem); left: 50%; width: 1px; height: 5rem; }
.balance-joystick__thumb { position: absolute; top: 50%; left: 50%; width: .8rem; height: .8rem; margin: -.4rem; border: 1px solid rgb(255 255 255 / .66); border-radius: 50%; background: rgb(255 255 255 / .1); box-shadow: 0 0 .65rem var(--balance-accent-soft); transform: translate(var(--stick-x), var(--stick-y)); transition: transform 32ms linear; }
.balance-joystick__thumb::before, .balance-joystick__thumb::after { position: absolute; top: 50%; left: 50%; display: block; content: ""; background: rgb(255 255 255 / .76); transform: translate(-50%, -50%); }
.balance-joystick__thumb::before { width: 1.3rem; height: 1px; }
.balance-joystick__thumb::after { width: 1px; height: 1.3rem; }

.balance-stage__hud { position: absolute; z-index: 2; inset: 0; padding: clamp(.8rem, 2vw, 1.25rem); pointer-events: none; }
.balance-stage__top { display: grid; width: min(100%, 28rem); justify-items: center; gap: .15rem; }
.balance-stage__phase { margin: 0; color: rgb(255 255 255 / .76); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.balance-time { display: block; color: #fff; font-family: var(--font-data); font-size: clamp(2rem, 7vmin, 5.6rem); font-weight: 800; letter-spacing: -.08em; line-height: .9; text-shadow: 0 0 var(--balance-timer-glow) var(--balance-accent), 0 .18rem .8rem rgb(0 0 0 / .42); transform: scale(var(--balance-timer-scale)); transform-origin: center top; transition: color .45s ease, text-shadow .45s ease, transform .45s var(--ease-emphasized); animation: balance-time-pulse var(--balance-pulse-duration) ease-in-out infinite; }
.balance-calm-meter { display: grid; justify-items: center; gap: .26rem; min-width: min(11rem, 38vw); margin-top: .28rem; color: #65cfff; font-size: .62rem; font-weight: 800; letter-spacing: .14em; line-height: 1; text-shadow: 0 0 .65rem rgb(84 201 255 / .72); text-transform: uppercase; }
.balance-calm-meter[hidden] { display: none; }
.balance-calm-meter > i { display: block; width: 100%; height: .3rem; overflow: hidden; border: 1px solid rgb(101 207 255 / .55); border-radius: 999px; background: rgb(47 132 190 / .24); box-shadow: inset 0 0 .4rem rgb(67 172 255 / .25), 0 0 .6rem rgb(67 172 255 / .24); }
.balance-calm-meter b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #52bfff, #aeeaff); box-shadow: 0 0 .55rem #54c9ff; transform: scaleX(1); transform-origin: left; transition: transform 90ms linear; }
.balance-stage__status { align-self: start; justify-self: start; max-width: min(20rem, 34%); margin: .7rem 0 0; padding: .34rem .7rem; border: 1px solid rgb(255 255 255 / .12); border-radius: .8rem; color: rgb(255 255 255 / .76); background: rgb(8 9 12 / .28); font-size: .7rem; line-height: 1.3; text-align: left; }

.balance-stage__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; }
.balance-regions { display: flex; flex-wrap: wrap; gap: .4rem; }
.balance-region { min-width: 3.35rem; padding: .34rem .46rem; border: 1px solid var(--region-glow, rgb(255 255 255 / .12)); border-radius: .65rem; color: rgb(255 255 255 / .68); background: rgb(10 11 14 / .36); box-shadow: 0 0 .7rem var(--region-glow, transparent); font-size: .64rem; line-height: 1.1; text-align: center; }
.balance-region b { display: block; margin-top: .12rem; color: #fff; font-size: .68rem; font-weight: 700; }
.balance-region[data-state="strained"] { color: #fff; box-shadow: 0 0 1.15rem var(--region-glow, var(--balance-accent-soft)); }
.balance-input-hint { margin: 0; color: rgb(255 255 255 / .65); font-size: .68rem; text-align: right; text-shadow: 0 1px .3rem rgb(0 0 0 / .4); }

.balance-stage__controls { position: absolute; z-index: 3; top: clamp(.7rem, 1.5vw, 1rem); right: clamp(.7rem, 1.5vw, 1rem); gap: .38rem; }
.balance-stage__pause, .balance-stage__sound, .balance-stage__fullscreen, .balance-stage__calibrate, .balance-stage__help { display: grid; min-height: 2rem; place-items: center; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; color: rgb(255 255 255 / .86); background: rgb(8 9 12 / .42); font: inherit; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.balance-stage__back { position: absolute; z-index: 3; top: clamp(.7rem, 1.5vw, 1rem); left: clamp(.7rem, 1.5vw, 1rem); display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; color: rgb(255 255 255 / .9); background: rgb(8 9 12 / .42); font: 800 1.15rem/1 var(--font-data); text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.balance-stage__pause { padding: .3rem .62rem; font-size: .7rem; }
.balance-stage__sound, .balance-stage__fullscreen { width: 2rem; height: 2rem; padding: 0; font-size: .82rem; }
.balance-stage__calibrate { padding: .3rem .55rem; font-size: .66rem; font-weight: 760; }
.balance-stage__controls > [hidden] { display: none; }
.balance-stage__pause:hover, .balance-stage__sound:hover, .balance-stage__fullscreen:hover, .balance-stage__calibrate:hover, .balance-stage__help:hover { border-color: var(--balance-accent-soft); color: #fff; }
.balance-stage__back:hover { border-color: var(--balance-accent-soft); color: #fff; }
.balance-gm { position: absolute; z-index: 5; right: clamp(.7rem, 1.5vw, 1rem); bottom: clamp(.7rem, 1.5vw, 1rem); width: min(14rem, calc(100% - 1.4rem)); padding: .68rem; border: 1px solid rgb(111 235 170 / .56); border-radius: .85rem; color: #eafff2; background: rgb(8 20 15 / .88); box-shadow: 0 .8rem 2rem rgb(0 0 0 / .34), 0 0 1.2rem rgb(75 240 145 / .16); font-size: .68rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.balance-gm[hidden] { display: none; }
.balance-gm__heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: #7cf5b0; font-size: .72rem; letter-spacing: .14em; }
.balance-gm__heading button { width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%; color: inherit; background: rgb(255 255 255 / .1); font: 800 1rem/1 var(--font-ui); cursor: pointer; }
.balance-gm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .58rem; }
.balance-gm__actions button { min-height: 2rem; padding: .35rem .45rem; border: 1px solid rgb(121 242 175 / .32); border-radius: .48rem; color: #edfff4; background: rgb(73 183 118 / .13); font: inherit; font-weight: 760; cursor: pointer; }
.balance-gm__actions button[aria-pressed="true"] { color: #102218; background: #77efaa; border-color: #c8ffdc; }
.balance-gm__actions button:hover, .balance-gm__heading button:hover { filter: brightness(1.15); }
.balance-gm p { margin: .52rem 0 0; color: rgb(217 255 231 / .62); font-size: .6rem; text-align: right; }
.balance-stage__start { position: absolute; z-index: 3; top: clamp(6.2rem, 13vw, 8.5rem); left: clamp(.8rem, 2vw, 1.25rem); display: grid; gap: .16rem; min-width: 10.4rem; padding: .72rem .9rem; border: 1px solid color-mix(in srgb, var(--balance-accent) 72%, #fff); border-radius: .9rem; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--balance-accent) 86%, #101116), rgb(12 13 17 / .92)); box-shadow: 0 .7rem 1.7rem rgb(0 0 0 / .28), 0 0 1.25rem var(--balance-accent-soft); font: inherit; text-align: left; cursor: pointer; transition: transform .2s var(--ease-emphasized), filter .2s ease; }
.balance-stage__start:hover { filter: brightness(1.12); transform: translateY(-2px); }
.balance-stage__start b { font-size: 1rem; line-height: 1; }
.balance-stage__start span { color: rgb(255 255 255 / .78); font-size: .68rem; }
.balance-stage__help { width: 2rem; height: 2rem; padding: 0; font: 800 .88rem/1 var(--font-data); }
.balance-stage__start[hidden], .balance-stage__help[hidden] { display: none; }
.balance-stage[data-low-stimulus="true"]::after,
.balance-stage[data-low-stimulus="true"] .balance-time { animation: none; }

@keyframes balance-time-pulse { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(1.2) brightness(1.08); } }
@keyframes balance-stage-breathe { 0%, 100% { transform: scale(.98); opacity: .45; } 50% { transform: scale(1.04); opacity: 1; } }

html[data-embed="motion"],
html[data-embed="motion"] body { width: 100%; height: 100%; min-height: 0; margin: 0; overflow: hidden; background: #090a0d; }
html[data-embed="motion"] .balance-game-page { height: 100%; min-height: 0; }
html[data-embed="motion"] .balance-stage { width: min(100%, calc((100dvh - var(--balance-safe-gap) * 2) * 4 / 3)); border-radius: 1.1rem; }
html[data-embed="motion"] .balance-stage__back { display: none; }

@media (max-width: 42rem) {
  .balance-stage { border-radius: 1.1rem; }
  .balance-stage__status { justify-self: center; max-width: min(31rem, 90%); text-align: center; }
  .balance-stage__start { top: 28%; left: 50%; transform: translateX(-50%); text-align: center; }
  .balance-stage__start:hover { transform: translateX(-50%) translateY(-2px); }
  .balance-stage__bottom { grid-template-columns: 1fr; }
  .balance-input-hint { text-align: left; }
  .balance-region { flex: 1 1 3rem; }
}

@media (max-height: 30rem) and (orientation: landscape) {
  .balance-game-page { height: 100dvh; min-height: 0; padding: max(.35rem, env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) max(.35rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left)); }
  .balance-shell, .balance-stage { width: 100%; height: 100%; min-height: 0; }
  .balance-stage { aspect-ratio: auto; max-width: none; border-radius: .85rem; }
  .balance-stage { --yz-experience-hud-side: 2.8rem; }
  .balance-stage__controls { gap: .25rem; }
  .balance-stage__top { width: min(100%, 24rem); }
  .balance-stage__start { top: 50%; left: 50%; min-width: 9.2rem; transform: translate(-50%, -50%) scale(.88); transform-origin: center; }
  .balance-stage__start:hover { transform: translate(-50%, calc(-50% - 2px)) scale(.88); }
}

@media (max-height: 30rem) and (orientation: landscape) {
  .balance-stage__watermark { top: .68rem; left: .78rem; width: clamp(3.5rem, 10vw, 5.5rem); max-height: 28%; opacity: .4; filter: blur(.55px) saturate(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .balance-stage::after,
  .balance-time { animation: none; }
  .balance-stage { transform: none !important; }
}