:root {
  color-scheme: dark;
  --text: #f3efe7;
  --soft: rgba(243, 239, 231, .62);
  --faint: rgba(243, 239, 231, .38);
  --line: rgba(255,255,255,.15);
  --line-strong: rgba(255,255,255,.32);
  --gold: #ffd479;
  --mint: #5eead4;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #07080c; color: var(--text); font-family: "Noto Serif SC", "Songti SC", serif; }
html { min-height: 100dvh; }
body { min-height: 100dvh; overflow: hidden; }
a { color: inherit; }

.review-shell {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.review-scene,
.review-shade { position: absolute; inset: 0; pointer-events: none; }
.review-scene { z-index: -2; background: url("immersive/map/assets/studio-city-map-v1.png") center / cover no-repeat; filter: saturate(.72); }
.review-shade { z-index: -1; background: linear-gradient(90deg, rgba(5,6,10,.97), rgba(5,6,10,.76) 44%, rgba(5,6,10,.72)), linear-gradient(0deg, rgba(5,6,10,.92), transparent 70%); }

.review-topbar {
  min-height: 48px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
}

.back {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  font-size: 30px;
}

.review-topbar div { display: flex; flex-direction: column; gap: 2px; }
.review-topbar span { color: var(--faint); font: 10px ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .18em; }
.review-topbar strong { font-size: 17px; }
.review-count { align-self: center; }

.review-body {
  height: calc(100dvh - 82px);
  width: min(1480px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.stage-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stage-grid a {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(8, 9, 14, .74);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.stage-grid a:hover,
.stage-grid a:focus-visible { outline: none; border-color: var(--line-strong); background: rgba(19, 19, 25, .94); }
.stage-grid b { color: var(--gold); font: 13px ui-monospace, "SFMono-Regular", Menlo, monospace; }
.stage-grid span { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.stage-grid small { color: var(--faint); font-size: 12px; }
.stage-grid i { color: var(--mint); font-style: normal; font-size: 12px; }

@media (max-height: 520px), (max-width: 900px) {
  .review-shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .review-topbar { min-height: 44px; }
  .back { width: 44px; height: 44px; }
  .review-body { height: calc(100dvh - 60px); }
  .stage-grid { gap: 7px; }
  .stage-grid a { min-height: 82px; grid-template-columns: 34px 1fr; gap: 7px; padding: 9px; }
  .stage-grid strong { font-size: 14px; }
  .stage-grid small { font-size: 10px; }
  .stage-grid i { display: none; }
  :is(button, a[href], [role="button"]) { min-width: 44px; min-height: 44px; }
}

@media (max-width: 700px) {
  .review-count { display: none; }
  .stage-grid a { min-height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (orientation: portrait), (max-aspect-ratio: 1 / 1) {
  html::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; background: #07080c; }
  html::after { content: "请旋转设备\A横屏体验效果更佳"; white-space: pre; position: fixed; inset: 0; min-height: 100vh; min-height: 100dvh; z-index: 2147483647; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); color: var(--text); text-align: center; font: 600 18px/2 "Noto Serif SC", "Songti SC", serif; letter-spacing: .08em; }
}