:root {
  --maze-panel-bg: rgba(255, 255, 255, 0.9);
  --maze-panel-line: rgba(198, 209, 237, 0.95);
  --maze-board-shadow: 0 26px 68px rgba(44, 68, 126, 0.18);
  --maze-cyan: #77e1ff;
  --maze-cyan-strong: #39b6ff;
  --maze-gold: #ffd45b;
  --maze-red: #ff7b7b;
  --maze-green: #52c878;
  --maze-ink: #17243e;
}

.hidden {
  display: none !important;
}

body.play-body-maze-mode {
  background:
    radial-gradient(circle at 20% 12%, rgba(123, 175, 255, 0.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 221, 121, 0.16), transparent 24%),
    linear-gradient(180deg, #f6f9ff 0%, #edf3ff 46%, #f7fbff 100%);
}

.play-body-maze-mode .page-shell {
  width: min(1500px, calc(100vw - 16px));
  padding-top: 18px;
  overflow-x: clip;
}

.play-body-maze-mode .site-footer {
  padding-top: 22px;
}

.maze-mode-root {
  display: grid;
  gap: 18px;
  min-height: 0;
  --maze-shell-height: auto;
  --maze-layout-height: auto;
}

/* MAZE_IMMERSIVE_FULLSCREEN_V1 */
body.play-body-maze-mode.maze-immersive-mode {
  overflow-y: auto;
  overflow-x: hidden;
}

body.play-body-maze-mode.maze-immersive-mode .site-header,
body.play-body-maze-mode.maze-immersive-mode .site-footer,
body.play-body-maze-mode.maze-immersive-mode .flash-stack {
  display: none;
}

body.play-body-maze-mode.maze-immersive-mode .page-shell {
  width: 100vw;
  max-width: 100vw;
  min-height: var(--app-height);
  height: var(--app-height);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.maze-mode-root.maze-immersive-mode,
#maze-mode-root:fullscreen,
#maze-mode-root:-webkit-full-screen {
  position: fixed;
  inset: 0;
  z-index: 140;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  min-height: var(--app-height);
  height: var(--app-height);
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  align-content: start;
  background:
    radial-gradient(circle at 18% 12%, rgba(123, 175, 255, 0.18), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(255, 221, 121, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(246, 249, 255, 0.98), rgba(237, 243, 255, 0.96)),
    var(--maze-stage-bg) center/cover no-repeat;
}

body.play-body-maze-mode.maze-immersive-mode .maze-mode-header,
body.play-body-maze-mode.maze-immersive-mode .maze-mode-setup,
#maze-mode-root:fullscreen .maze-mode-header,
#maze-mode-root:fullscreen .maze-mode-setup,
#maze-mode-root:-webkit-full-screen .maze-mode-header,
#maze-mode-root:-webkit-full-screen .maze-mode-setup {
  display: none !important;
}

.maze-mode-header,
.maze-mode-setup,
.maze-mode-board-shell {
  backdrop-filter: blur(12px);
  background: var(--maze-panel-bg);
  border-color: var(--maze-panel-line);
}

.maze-mode-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: clamp(22px, 2.8vw, 30px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 255, 0.88)),
    var(--maze-stage-bg) center/cover no-repeat;
}

.maze-mode-header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  color: #203255;
}

.maze-mode-description {
  margin: 12px 0 0;
  color: #4f607f;
  line-height: 1.8;
}

.maze-mode-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.maze-mode-setup {
  padding: clamp(22px, 2.4vw, 30px);
  display: grid;
  gap: 18px;
}

.maze-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.maze-panel-head h2,
.maze-side-head h2,
.maze-setup-card h3 {
  margin: 0;
}

.maze-panel-head p,
.maze-setup-note,
.maze-help-copy,
.maze-current-target,
.maze-help-list,
.maze-setup-list,
.maze-side-card p,
.maze-result-card p {
  color: #4f607f;
}

.maze-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(235, 245, 255, 0.92));
  border: 1px solid rgba(184, 203, 241, 0.92);
  box-shadow: 0 14px 28px rgba(77, 108, 177, 0.14);
  font-weight: 800;
  color: #28446a;
}

.maze-hero-badge img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.maze-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.maze-setup-card,
.maze-side-card {
  border-radius: 20px;
  background: rgba(248, 251, 255, 0.88);
  border: 1px solid rgba(202, 213, 240, 0.92);
  box-shadow: 0 16px 34px rgba(74, 97, 156, 0.1);
}

.maze-setup-card {
  padding: 20px;
}

.maze-setup-card h3 {
  color: #253c67;
  margin-bottom: 14px;
}

.maze-difficulty-wrap {
  display: grid;
  gap: 12px;
}

.maze-difficulty-wrap input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.maze-difficulty-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(196, 208, 236, 0.95);
  font-weight: 800;
  color: #2d3d5d;
}

.maze-difficulty-inline input {
  width: 76px;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-weight: 800;
  color: inherit;
  background: transparent;
}

.maze-setup-note {
  margin: 12px 0 0;
}

.maze-setup-list,
.maze-help-list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.8;
}

.maze-setup-actions {
  margin-top: 18px;
}

.maze-status {
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 700;
  border: 1px solid transparent;
}

.maze-status.info {
  background: rgba(91, 108, 240, 0.1);
  color: #3f50b3;
  border-color: rgba(91, 108, 240, 0.16);
}

.maze-status.success {
  background: rgba(45, 164, 109, 0.12);
  color: #1f8657;
  border-color: rgba(45, 164, 109, 0.18);
}

.maze-status.warning {
  background: rgba(255, 190, 93, 0.16);
  color: #9b6209;
  border-color: rgba(255, 190, 93, 0.26);
}

.maze-status.error {
  background: rgba(223, 94, 94, 0.14);
  color: #b64c4c;
  border-color: rgba(223, 94, 94, 0.22);
}

.maze-mode-board-shell {
  padding: 18px;
  display: grid;
  gap: 18px;
  min-height: 0;
  box-sizing: border-box;
}

body.play-body-maze-mode.maze-immersive-mode .maze-mode-board-shell,
#maze-mode-root:fullscreen .maze-mode-board-shell,
#maze-mode-root:-webkit-full-screen .maze-mode-board-shell {
  min-height: calc(var(--app-height) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  height: var(--maze-shell-height, calc(var(--app-height) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height: var(--maze-shell-height, calc(var(--app-height) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  grid-template-rows: auto minmax(0, 1fr);
  padding: 14px;
  box-sizing: border-box;
}

/* MAZE_PC_FIT_SCROLL_V1 */
.maze-mode-root.maze-session-active .maze-mode-board-shell {
  min-height: 0;
  height: var(--maze-shell-height, auto);
  max-height: var(--maze-shell-height, none);
  grid-template-rows: auto minmax(0, 1fr);
}

.maze-mode-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

body.play-body-maze-mode.maze-immersive-mode .maze-mode-topbar,
#maze-mode-root:fullscreen .maze-mode-topbar,
#maze-mode-root:-webkit-full-screen .maze-mode-topbar {
  gap: 10px;
}

.maze-mini-stat {
  min-width: 130px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.92);
  border: 1px solid rgba(203, 214, 239, 0.92);
  box-shadow: 0 12px 24px rgba(69, 96, 152, 0.08);
}

.maze-mini-stat span {
  display: block;
  font-size: 0.78rem;
  color: #6d7d99;
  margin-bottom: 6px;
}

.maze-mini-stat strong {
  color: #203559;
  font-size: 1.02rem;
}

.maze-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.maze-mode-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 23vw, 340px);
  gap: 18px;
  align-items: stretch;
  min-height: 0;
}

body.play-body-maze-mode.maze-immersive-mode .maze-mode-layout,
#maze-mode-root:fullscreen .maze-mode-layout,
#maze-mode-root:-webkit-full-screen .maze-mode-layout {
  grid-template-columns: minmax(0, 1fr) clamp(272px, 22vw, 320px);
  min-height: 0;
  height: var(--maze-layout-height, 100%);
  max-height: var(--maze-layout-height, none);
}

.maze-mode-root.maze-session-active .maze-mode-layout {
  min-height: 0;
  height: var(--maze-layout-height, auto);
  max-height: var(--maze-layout-height, none);
  overflow: hidden;
  box-sizing: border-box;
}

.maze-board-panel {
  min-width: 0;
  display: flex;
  min-height: 0;
}

.maze-mode-root.maze-session-active .maze-board-panel,
.maze-mode-root.maze-session-active .maze-board,
.maze-mode-root.maze-session-active .maze-sidebar {
  min-height: 0;
}

.maze-board {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(440px, 70vh, 860px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(190, 206, 235, 0.96);
  box-shadow: var(--maze-board-shadow);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(7, 16, 28, 0.22), rgba(6, 12, 22, 0.36)),
    var(--maze-stage-bg) center/cover no-repeat;
}

.maze-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(255, 217, 96, 0.12), transparent 30%);
  pointer-events: none;
  z-index: 0;
}

#mazeCanvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.maze-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.maze-burst {
  position: absolute;
  right: 4%;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(196, 209, 241, 0.96);
  box-shadow: 0 16px 28px rgba(53, 73, 129, 0.14);
  font-weight: 800;
  color: #244069;
  animation: mazeBurstFloat 2.8s ease forwards;
}

.maze-burst.light {
  color: #1371c1;
}

.maze-burst.enemy {
  color: #b94343;
}

.maze-burst.goal {
  color: #8b6500;
}

@keyframes mazeBurstFloat {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--float-shift, -40px)) scale(1.04); }
}

.maze-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(8, 16, 30, 0.42);
  backdrop-filter: blur(3px);
}

.maze-start-card {
  width: min(540px, calc(100% - 28px));
  padding: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(211, 221, 243, 0.96);
  border-radius: 24px;
}

.maze-start-card h2 {
  margin: 0;
  color: #24385d;
}

.maze-start-copy {
  margin: 14px 0 0;
  line-height: 1.8;
  color: #4b5d7c;
}

.maze-start-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.maze-start-points span {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(243, 247, 255, 0.96);
  border: 1px solid rgba(203, 214, 240, 0.96);
  color: #274163;
  font-weight: 800;
}

.maze-start-actions {
  margin-top: 18px;
}

.maze-sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
}

.maze-side-card {
  padding: 18px;
}

.maze-side-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.maze-side-head h2 {
  color: #253c67;
  font-size: 1.05rem;
}

.maze-action-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.maze-fire-button {
  width: 100%;
}

.maze-dpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.maze-dpad-button {
  appearance: none;
  border: 1px solid rgba(190, 204, 236, 0.95);
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  color: #2a3d62;
  border-radius: 16px;
  min-height: 54px;
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(82, 110, 174, 0.12);
}

.maze-dpad-button[data-dir="n"] {
  grid-column: 2;
}

.maze-dpad-button[data-dir="w"] {
  grid-column: 1;
  grid-row: 2;
}

.maze-dpad-button[data-dir="s"] {
  grid-column: 2;
  grid-row: 2;
}

.maze-dpad-button[data-dir="e"] {
  grid-column: 3;
  grid-row: 2;
}

.maze-current-target {
  margin: 0;
  line-height: 1.8;
}

.maze-progress-meter {
  margin-top: 14px;
  height: 12px;
  border-radius: 999px;
  background: rgba(220, 228, 246, 0.82);
  overflow: hidden;
}

.maze-progress-value {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6cc8ff, #8ffffa, #ffd75f);
  border-radius: inherit;
  transition: width 0.22s ease;
}

.maze-stats-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.maze-stats-list div {
  padding: 12px 12px 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(204, 214, 239, 0.94);
}

.maze-stats-list dt {
  font-size: 0.75rem;
  color: #7282a0;
  margin-bottom: 6px;
}

.maze-stats-list dd {
  margin: 0;
  color: #22375b;
  font-size: 1.02rem;
  font-weight: 800;
}

.maze-result-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 17, 32, 0.44);
  backdrop-filter: blur(4px);
}

.maze-result-card {
  width: min(520px, calc(100vw - 28px));
  padding: 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.97);
}

.maze-result-card h2 {
  margin: 0;
  color: #203559;
}

.maze-result-card p {
  margin: 14px 0 0;
  line-height: 1.8;
}

.maze-result-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


body.play-body-maze-mode.maze-immersive-mode .maze-mini-stat,
#maze-mode-root:fullscreen .maze-mini-stat,
#maze-mode-root:-webkit-full-screen .maze-mini-stat {
  min-width: 116px;
  padding: 10px 12px;
}

body.play-body-maze-mode.maze-immersive-mode .maze-board,
#maze-mode-root:fullscreen .maze-board,
#maze-mode-root:-webkit-full-screen .maze-board {
  min-height: 0;
  height: 100%;
}

.maze-mode-root.maze-session-active .maze-board {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

body.play-body-maze-mode.maze-immersive-mode .maze-sidebar,
#maze-mode-root:fullscreen .maze-sidebar,
#maze-mode-root:-webkit-full-screen .maze-sidebar {
  overflow: auto;
  align-content: start;
  padding-right: 4px;
}

.maze-mode-root.maze-session-active .maze-sidebar {
  overflow: auto;
  align-content: start;
  max-height: var(--maze-layout-height, none);
  padding-right: 4px;
  overscroll-behavior: contain;
}

body.play-body-maze-mode.maze-immersive-mode .maze-side-card,
#maze-mode-root:fullscreen .maze-side-card,
#maze-mode-root:-webkit-full-screen .maze-side-card {
  padding: 14px;
}

@media (max-width: 1120px) {
  .maze-mode-layout {
    grid-template-columns: 1fr;
  }

  .maze-board {
    min-height: clamp(420px, 62vh, 720px);
  }

  body.play-body-maze-mode.maze-immersive-mode .maze-mode-layout,
  #maze-mode-root:fullscreen .maze-mode-layout,
  #maze-mode-root:-webkit-full-screen .maze-mode-layout {
    grid-template-columns: 1fr;
  }

  body.play-body-maze-mode.maze-immersive-mode .maze-sidebar,
  #maze-mode-root:fullscreen .maze-sidebar,
  #maze-mode-root:-webkit-full-screen .maze-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.play-body-maze-mode.maze-immersive-mode .maze-status,
  #maze-mode-root:fullscreen .maze-status,
  #maze-mode-root:-webkit-full-screen .maze-status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .maze-panel-head,
  .maze-mode-header {
    grid-template-columns: 1fr;
  }

  .maze-mode-header-actions {
    justify-content: flex-start;
  }

  .maze-setup-grid,
  .maze-stats-list {
    grid-template-columns: 1fr;
  }

  .maze-mode-board-shell {
    padding: 14px;
  }

  .maze-mini-stat {
    min-width: 0;
    flex: 1 1 140px;
  }

  body.play-body-maze-mode.maze-immersive-mode .maze-sidebar,
  #maze-mode-root:fullscreen .maze-sidebar,
  #maze-mode-root:-webkit-full-screen .maze-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .play-body-maze-mode .page-shell {
    width: min(100vw, calc(100vw - 10px));
  }

  .maze-mode-header,
  .maze-mode-setup,
  .maze-mode-board-shell {
    border-radius: 20px;
  }

  .maze-board {
    min-height: 420px;
    border-radius: 20px;
  }

  .maze-side-card,
  .maze-setup-card,
  .maze-start-card,
  .maze-result-card {
    border-radius: 18px;
  }

  body.play-body-maze-mode.maze-immersive-mode .maze-mode-root,
  #maze-mode-root:fullscreen,
  #maze-mode-root:-webkit-full-screen {
    padding: 6px;
  }

  body.play-body-maze-mode.maze-immersive-mode .maze-mode-board-shell,
  #maze-mode-root:fullscreen .maze-mode-board-shell,
  #maze-mode-root:-webkit-full-screen .maze-mode-board-shell {
    padding: 10px;
  }
}

/* MAZE_START_DENSITY_PC_V2 */
.play-body-maze-mode .page-shell {
  padding-top: 14px;
}

.maze-mode-root {
  gap: 14px;
}

.maze-mode-header {
  gap: 14px;
  padding: clamp(18px, 2.1vw, 24px);
}

.maze-mode-header h1 {
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
}

.maze-mode-description {
  margin-top: 8px;
  line-height: 1.7;
}

.maze-mode-header-actions {
  gap: 8px;
}

.maze-mode-setup {
  padding: clamp(18px, 2vw, 24px);
  gap: 14px;
}

.maze-panel-head {
  gap: 14px;
  align-items: start;
}

.maze-panel-head p {
  margin-top: 8px;
  line-height: 1.72;
}

.maze-hero-badge {
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
}

.maze-hero-badge img {
  width: 46px;
  height: 46px;
}

.maze-setup-grid {
  gap: 14px;
}

.maze-setup-card {
  padding: 18px;
}

.maze-setup-card h3 {
  margin-bottom: 10px;
}

.maze-setup-note,
.maze-setup-list,
.maze-help-list,
.maze-side-card p,
.maze-current-target,
.maze-help-copy {
  line-height: 1.68;
}

@media (max-width: 1360px) {
  .maze-panel-head,
  .maze-mode-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .maze-mode-header-actions {
    justify-content: flex-start;
  }
}

@media (min-width: 1120px) {
  .maze-mode-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .maze-setup-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}