:root {
  color-scheme: dark;
  --tm-ink: #02070d;
  --tm-panel: rgba(3, 14, 26, 0.92);
  --tm-cyan: #25d4e8;
  --tm-orange: #ff641f;
  --tm-white: #f4f1e9;
  --tm-muted: #8aa5b4;
  --tm-safe-top: env(safe-area-inset-top, 0px);
  --tm-safe-right: env(safe-area-inset-right, 0px);
  --tm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tm-safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body, #unity-container, #unity-canvas {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--tm-white);
  background:
    radial-gradient(circle at 18% 12%, rgba(26, 169, 216, 0.18), transparent 32rem),
    radial-gradient(circle at 88% 82%, rgba(255, 80, 24, 0.13), transparent 34rem),
    linear-gradient(145deg, #02060b 0%, #061525 54%, #02080f 100%);
  font-family: "Arial Narrow", "Roboto Condensed", Inter, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(37, 212, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 212, 232, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000);
}

#trial-mania-landscape-guard {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  color: var(--tm-white);
  text-align: center;
  background: radial-gradient(circle at 50% 25%, rgba(36, 205, 255, 0.16), transparent 24rem), linear-gradient(155deg, #020b12, #071725 58%, #02080e);
}
#trial-mania-landscape-guard b { color: var(--tm-cyan); font-size: 0.72rem; letter-spacing: 0.14em; }
#trial-mania-landscape-guard strong { margin: 0.6rem 0; font-size: clamp(1.8rem, 8vw, 2.8rem); }
#trial-mania-landscape-guard span { max-width: 26rem; color: #9eb8c8; line-height: 1.5; }

.tm-web-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 54px;
  gap: 12px;
  width: min(100vw, 1840px);
  height: 100svh;
  margin: 0 auto;
  padding: max(14px, var(--tm-safe-top)) max(18px, var(--tm-safe-right)) max(12px, var(--tm-safe-bottom)) max(18px, var(--tm-safe-left));
}

.tm-shell-header,
.tm-shell-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  border-inline: 1px solid rgba(37, 212, 232, 0.22);
  background: linear-gradient(90deg, rgba(3, 14, 26, 0.88), rgba(3, 14, 26, 0.52));
  backdrop-filter: blur(14px);
}

.tm-shell-header { padding: 0 22px; border-top: 2px solid var(--tm-orange); }
.tm-shell-footer { padding: 0 12px 0 22px; border-bottom: 2px solid var(--tm-cyan); }

.tm-shell-brand { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.tm-shell-wordmark {
  color: var(--tm-white);
  font-size: 25px;
  font-weight: 950;
  font-stretch: condensed;
  letter-spacing: -0.055em;
  line-height: 1;
}
.tm-shell-wordmark span { color: var(--tm-orange); }
.tm-shell-kicker,
.tm-shell-state,
.tm-shell-hints,
.tm-stage-label,
.tm-stage-build {
  color: var(--tm-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tm-shell-kicker { color: var(--tm-cyan); white-space: nowrap; }
.tm-shell-state { display: flex; align-items: center; gap: 10px; color: var(--tm-white); }
.tm-shell-state::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #41f29a;
  box-shadow: 0 0 14px rgba(65, 242, 154, 0.8);
}

.tm-stage-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(37, 212, 232, 0.34);
  background: #01050a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 100, 31, 0.08);
}
.tm-stage-shell::before,
.tm-stage-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.tm-stage-shell::before {
  inset: 0;
  border-top: 3px solid var(--tm-orange);
  border-bottom: 3px solid var(--tm-cyan);
  clip-path: polygon(0 0, 18% 0, 18% 1px, 82% 1px, 82% 0, 100% 0, 100% 100%, 76% 100%, 76% calc(100% - 1px), 24% calc(100% - 1px), 24% 100%, 0 100%);
}
.tm-stage-shell::after {
  left: 0;
  top: 0;
  width: 86px;
  height: 86px;
  border-left: 4px solid var(--tm-cyan);
  border-top: 4px solid var(--tm-orange);
}
.tm-stage-label,
.tm-stage-build {
  position: absolute;
  z-index: 6;
  top: 14px;
  padding: 7px 10px;
  pointer-events: none;
  background: rgba(2, 9, 17, 0.72);
}
.tm-stage-label { left: 18px; color: var(--tm-cyan); }
.tm-stage-build { right: 18px; }
.tm-stage-slot { position: absolute; inset: 0; }

#unity-container.unity-desktop,
#unity-container.unity-mobile {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  background: #01050a;
}
#unity-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: 0;
  background: #01050a;
}
#unity-footer { display: none !important; }
#unity-warning {
  z-index: 20;
  max-width: min(720px, calc(100% - 48px));
  border-left: 4px solid var(--tm-orange);
  color: var(--tm-white);
  background: rgba(3, 14, 26, 0.96) !important;
}

#unity-loading-bar {
  z-index: 10;
  display: none;
  width: min(440px, calc(100% - 64px));
  padding: 30px 34px;
  border-left: 4px solid var(--tm-cyan);
  background: rgba(2, 10, 19, 0.94);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
}
#unity-logo {
  width: auto;
  height: auto;
  color: var(--tm-white);
  background: none;
  font-size: 31px;
  font-weight: 950;
  letter-spacing: -0.055em;
}
#unity-logo::before { content: "TRIAL"; }
#unity-logo::after { content: "MANIA"; color: var(--tm-orange); }
#unity-progress-bar-empty {
  width: 100%;
  height: 5px;
  margin: 22px 0 0;
  background: rgba(77, 111, 131, 0.4);
}
#unity-progress-bar-full {
  height: 5px;
  margin: 0;
  background: linear-gradient(90deg, var(--tm-orange), #ff9a39 45%, var(--tm-cyan));
  box-shadow: 0 0 18px rgba(37, 212, 232, 0.54);
}
.tm-loading-copy {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: calc(50% + 72px);
  transform: translateX(-50%);
  color: var(--tm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  pointer-events: none;
}
.tm-game-ready .tm-loading-copy { display: none; }

.tm-shell-actions { display: flex; align-items: center; gap: 9px; }
.tm-shell-action {
  min-width: 154px;
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-left: 3px solid var(--tm-cyan);
  color: var(--tm-white);
  background: rgba(15, 40, 58, 0.88);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.tm-shell-action:hover,
.tm-shell-action:focus-visible { color: #04101a; background: var(--tm-cyan); outline: 0; }
.tm-shell-action--primary { border-left-color: #fff4e8; background: var(--tm-orange); }
.tm-shell-action--primary:hover,
.tm-shell-action--primary:focus-visible { background: #ff8548; }

body.tm-fullscreen .tm-web-shell { width: 100vw; height: 100vh; padding: 0; }
body.tm-fullscreen .tm-shell-header,
body.tm-fullscreen .tm-shell-footer { display: none; }
body.tm-fullscreen .tm-web-shell { grid-template-rows: minmax(0, 1fr); gap: 0; }
body.tm-fullscreen .tm-stage-shell { border: 0; }
body.tm-fullscreen .tm-stage-label,
body.tm-fullscreen .tm-stage-build { display: none; }

@media (max-width: 1000px), (hover: none) {
  .tm-web-shell {
    display: block;
    width: 100vw;
    height: 100svh;
    padding: var(--tm-safe-top) var(--tm-safe-right) var(--tm-safe-bottom) var(--tm-safe-left);
  }
  .tm-shell-header,
  .tm-shell-footer,
  .tm-stage-label,
  .tm-stage-build { display: none; }
  .tm-stage-shell { width: 100%; height: 100%; border: 0; }
  .tm-stage-shell::before,
  .tm-stage-shell::after { display: none; }
}

@media (orientation: portrait) and (max-width: 900px) and (hover: none) {
  #trial-mania-landscape-guard { display: grid; }
  .tm-web-shell,
  #unity-container { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}