:root {
  color-scheme: light;
  font-family: "PingFang SC", "Songti SC", system-ui, sans-serif;
  color: #30261d;
  background: #c9c0af;
}

* { box-sizing: border-box; }

html { height: 100%; touch-action: manipulation; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 5%, #eee8dc 0 16rem, transparent 38rem),
    #c8bfae;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

.phone-stage {
  --accent: #a94132;
  position: relative;
  width: min(100vw, 430px);
  height: min(100vh, 900px);
  height: min(100dvh, 900px);
  min-height: 0;
  overflow: hidden;
  background: #eee8d9;
  box-shadow: 0 18px 70px rgb(50 37 24 / 28%);
}

.app-screen {
  position: absolute;
  inset: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.app-screen.is-active { opacity: 1; pointer-events: auto; }

.home-screen {
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto auto;
  gap: 22px;
  padding: max(70px, calc(env(safe-area-inset-top, 0px) + 46px)) 34px max(42px, calc(env(safe-area-inset-bottom, 0px) + 30px));
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 25%, rgb(184 81 58 / 12%) 0 3px, transparent 4px),
    linear-gradient(90deg, rgb(112 68 38 / 4%) 1px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(160deg, #f7f1e4, #e5d8bd);
}
.home-screen::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -150px;
  top: 40px;
  border: 1px solid rgb(144 62 45 / 16%);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgb(144 62 45 / 3%), 0 0 0 72px rgb(144 62 45 / 2%);
}
.home-showcase { position: relative; min-height: 280px; align-self: stretch; z-index: 1; }
.home-showcase::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: 16px;
  width: 210px;
  height: 92px;
  border-bottom: 1px solid rgb(132 79 43 / 10%);
  border-radius: 50%;
  transform: rotate(-7deg);
}
#home-art-canvas {
  position: absolute;
  inset: -24px -42px -18px -22px;
  width: calc(100% + 64px);
  height: calc(100% + 42px);
  opacity: .88;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 42%) 18%, #000 34%, #000 100%),
    radial-gradient(ellipse 68% 70% at 63% 46%, #000 40%, rgb(0 0 0 / 64%) 55%, transparent 76%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 42%) 18%, #000 34%, #000 100%),
    radial-gradient(ellipse 68% 70% at 63% 46%, #000 40%, rgb(0 0 0 / 64%) 55%, transparent 76%);
  mask-composite: intersect;
}
.home-copy { position: relative; z-index: 1; }
.home-copy h1 { margin: 0 0 8px; color: #6e2f25; font: 800 46px/1.05 "Songti SC", serif; letter-spacing: .14em; }
.home-copy p { max-width: 290px; margin: 0; color: #725e49; font-size: 14px; line-height: 1.8; }
.home-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.home-actions button { height: 50px; border: 1px solid rgb(100 67 42 / 23%); border-radius: 15px; background: rgb(255 251 240 / 76%); color: #644f3c; }
.home-actions .primary-screen-action { border-color: #843628; background: #a44232; color: #fff8e9; font-weight: 700; box-shadow: 0 7px 18px rgb(105 43 31 / 22%); }
@media (prefers-reduced-motion: reduce) {
  #home-art-canvas { opacity: .84; }
}

.levels-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: max(34px, calc(env(safe-area-inset-top, 0px) + 20px)) 24px max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  background:
    linear-gradient(90deg, rgb(112 68 38 / 4%) 1px, transparent 1px) 0 0 / 13px 13px,
    #eee5d2;
}
.screen-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; text-align: center; }
.screen-header small { color: #9a6b43; font-size: 11px; letter-spacing: .2em; }
.screen-header h1 { margin: 3px 0 0; color: #703329; font: 700 27px/1.1 "Songti SC", serif; letter-spacing: .15em; }
.level-grid { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; padding: 4px 2px 10px; scrollbar-width: none; }
.level-grid::-webkit-scrollbar { display: none; }
.level-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 10px;
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid rgb(116 79 46 / 24%);
  border-radius: 10px;
  background: rgb(250 245 232 / 78%);
  color: #5f4b38;
  text-align: left;
  box-shadow: 0 5px 14px rgb(76 51 30 / 8%);
}
.level-card img, .level-silhouette { display: block; width: 104px; height: 110px; object-fit: cover; border-radius: 5px; }
.level-silhouette { display: grid; place-items: center; border: 1px dashed rgb(121 86 54 / 35%); background: #ded2ba; color: rgb(100 77 55 / 45%); font: 700 38px/1 "Songti SC", serif; }
.level-copy { display: grid; gap: 6px; }
.level-copy small { color: #9a6a41; font-size: 11px; letter-spacing: .15em; }
.level-copy strong { color: #593d2d; font: 700 21px/1.35 "Songti SC", serif; }
.level-copy em { color: #8b765f; font-size: 12px; font-style: normal; }
.difficulty-seal {
  position: absolute;
  right: -7px;
  bottom: -8px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgb(61 88 61);
  background: rgb(250 245 232 / 28%);
  font: 900 23px/1 "Songti SC", "STSong", serif;
  opacity: .78;
  transform: rotate(-8deg);
  transform-origin: center;
  pointer-events: none;
}
.difficulty-seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid currentColor;
  border-radius: inherit;
  -webkit-mask: conic-gradient(from 8deg, #000 0 41deg, transparent 41deg 47deg, #000 47deg 116deg, transparent 116deg 121deg, #000 121deg 203deg, transparent 203deg 212deg, #000 212deg 287deg, transparent 287deg 291deg, #000 291deg 360deg);
  mask: conic-gradient(from 8deg, #000 0 41deg, transparent 41deg 47deg, #000 47deg 116deg, transparent 116deg 121deg, #000 121deg 203deg, transparent 203deg 212deg, #000 212deg 287deg, transparent 287deg 291deg, #000 291deg 360deg);
}
.difficulty-seal::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 1.5px;
  left: 15px;
  top: 23px;
  border-radius: 50%;
  background: rgb(250 245 232 / 72%);
  box-shadow: 10px -5px 0 rgb(250 245 232 / 58%);
}
.difficulty-easy { color: rgb(61 88 61); }
.difficulty-medium { color: rgb(137 78 37); }
.difficulty-hard { color: rgb(119 43 38); }
.level-card.is-completed { border-color: rgb(157 62 47 / 40%); }
.level-card.is-locked { opacity: .52; filter: grayscale(.7); }
.level-card.is-focused { animation: focused-level 900ms ease 2; }
@keyframes focused-level { 50% { box-shadow: 0 0 0 3px rgb(164 66 50 / 24%), 0 8px 18px rgb(76 51 30 / 12%); } }
.levels-footer { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.levels-note { margin: 0; color: #8a735c; font-size: 11px; }
#levels-home {
  min-width: 96px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgb(100 67 42 / 23%);
  border-radius: 12px;
  background: rgb(255 251 240 / 80%);
  color: #644f3c;
  font-size: 13px;
}

.artifact-zone {
  position: relative;
  height: 39%;
  min-height: 0;
  padding: max(10px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 9px;
  background:
    linear-gradient(90deg, rgb(112 68 38 / 4%) 1px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(#f4efe3, #e8dfcc);
  border-bottom: 1px solid rgb(83 59 34 / 20%);
}

.artifact-zone::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #874131 0 18px, #c08a55 18px 24px);
  box-shadow: 0 3px 8px rgb(60 38 20 / 18%);
  z-index: 4;
}

.top-bar {
  height: 44px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  padding-inline: 30px;
  position: relative;
  z-index: 5;
  transform: translateY(12px);
}

.round-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgb(81 54 29 / 20%);
  border-radius: 50%;
  background: rgb(255 252 243 / 74%);
  color: #65452d;
  font: 24px/1 serif;
  display: grid;
  place-items: center;
}
.back-glyph {
  display: block;
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
  transform-origin: center;
}

.artwork-wrap {
  position: absolute;
  top: 52px;
  bottom: 37px;
  left: 50%;
  width: min(54%, 218px);
  transform: translateX(-50%);
}
.artwork-wrap.is-landscape { width: min(72%, 310px); }

#artifact-canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 7px rgb(57 38 22 / 17%)); }

.progress-seal {
  position: absolute;
  right: -48px;
  bottom: 5px;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  align-items: baseline;
  border: 2px solid rgb(156 57 43 / 75%);
  outline: 1px solid rgb(156 57 43 / 36%);
  outline-offset: 3px;
  color: #9c392b;
  transform: rotate(-4deg);
}

.progress-seal strong { font: 700 17px/1 Georgia, serif; }
.progress-seal span { font-size: 9px; }

.palette-progress {
  position: absolute;
  left: 14px;
  bottom: 9px;
  display: flex;
  gap: 7px;
}

.palette-dot {
  width: 13px;
  height: 13px;
  border: 2px solid rgb(255 251 239 / 90%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(53 42 31 / 25%);
  filter: grayscale(1);
  opacity: .42;
  transition: filter 350ms, opacity 350ms, transform 350ms;
}
.palette-dot.is-filled { filter: none; opacity: 1; transform: scale(1.15); }

.sorting-zone {
  position: relative;
  height: 61%;
  padding: 16px 18px max(10px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  display: grid;
  grid-template-rows: 36px 1fr 56px;
  background:
    linear-gradient(rgb(245 241 229 / 89%), rgb(229 219 199 / 94%)),
    url("../../public/images/artifacts/smithsonian-f1917.197/original-display.webp") center 62% / 150% auto;
}

.section-heading { display: flex; justify-content: flex-start; align-items: start; }
.section-heading div { display: grid; gap: 1px; }
.section-heading span { color: #995a36; font: 700 15px/1.2 "Songti SC", serif; letter-spacing: .1em; }
.section-heading strong { margin-top: 2px; color: #736656; font-size: 12px; font-weight: 500; }
.section-heading span.is-victory {
  font-size: 25px;
  line-height: 1;
  letter-spacing: .22em;
  color: #a44232;
  text-shadow: 0 2px 8px rgb(128 66 43 / 14%);
  animation: victory-title-in 650ms cubic-bezier(.2, .85, .25, 1.15) both;
}
@keyframes victory-title-in {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to { opacity: 1; transform: none; }
}

.water-sort-canvas { display: block; width: 100%; height: 100%; min-height: 0; touch-action: none; }
.flight-canvas { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }

.bottle {
  position: relative;
  width: 50px;
  height: 80px;
  padding: 0;
  border: 0;
  background: transparent;
  transition: transform 150ms, opacity 240ms;
}
.bottle:active { transform: translateY(-5px); }
.bottle.is-used { opacity: 0; pointer-events: none; transform: translateY(-22px) scale(.7); }
.bottle-shape {
  position: absolute;
  inset: 14px 2px 1px;
  overflow: hidden;
  border: 2px solid rgb(78 62 45 / 72%);
  border-radius: 5px 5px 15px 15px;
  background: rgb(255 255 255 / 33%);
  box-shadow: inset 4px 0 rgb(255 255 255 / 32%), 0 4px 5px rgb(61 44 27 / 12%);
}
.bottle::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 13px;
  width: 24px;
  height: 14px;
  border: 2px solid rgb(78 62 45 / 72%);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: rgb(255 255 255 / 25%);
}
.liquid { position: absolute; left: 0; width: 100%; height: 25%; border-top: 1px solid rgb(255 255 255 / 35%); }
.liquid:nth-child(1) { bottom: 0; }
.liquid:nth-child(2) { bottom: 25%; }
.liquid:nth-child(3) { bottom: 50%; }
.liquid:nth-child(4) { bottom: 75%; }
.bottle-mark {
  position: absolute;
  z-index: 4;
  right: -5px;
  top: 4px;
  width: 19px;
  height: 19px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: #9c3e30;
  color: #fff8e8;
  font-size: 11px;
  box-shadow: 0 2px 5px rgb(68 35 22 / 25%);
}
.bottle.is-ready .bottle-mark { display: grid; }

.bottom-actions { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; }
.bottom-actions button {
  height: 43px;
  border: 1px solid rgb(87 58 34 / 20%);
  border-radius: 14px;
  background: rgb(249 245 233 / 84%);
  color: #685543;
  font-size: 15px;
  font-weight: 600;
}
.bottom-actions .main-action { background: #9f4132; border-color: #853226; color: #fff8e9; box-shadow: 0 5px 10px rgb(102 43 31 / 20%); }

.reveal-panel {
  position: absolute;
  inset: 5px 10px 8px;
  z-index: 18;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px 18px 15px;
  background:
    radial-gradient(circle at 50% 42%, #f3ead6 0, #e5d8bf 72%, #d7c7aa 100%);
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity 650ms, transform 850ms;
}
.reveal-panel.is-visible { opacity: 1; transform: scale(1); }
.reveal-panel h2 {
  margin: 0;
  text-align: center;
  color: #a44232;
  font: 700 28px/1.2 "Songti SC", serif;
  letter-spacing: .24em;
}
.original-unfold {
  min-height: 0;
  overflow: hidden;
  background: rgb(246 237 217 / 78%);
  clip-path: inset(0 50% 0 50%);
  filter: drop-shadow(0 8px 12px rgb(67 43 23 / 16%));
}
.reveal-panel.is-visible .original-unfold {
  animation: original-unfold 2700ms 120ms cubic-bezier(.3, .75, .18, 1) forwards;
}
.original-unfold img { width: 100%; height: 100%; object-fit: contain; }
.result-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 380ms ease, transform 380ms ease;
}
.result-actions.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.result-actions button { height: 40px; padding: 0 7px; border: 1px solid rgb(95 64 40 / 22%); border-radius: 12px; background: #f8f1e2; color: #695340; font-size: 12px; }
.result-actions .result-primary { border-color: #863729; background: #a44232; color: #fff8e9; font-weight: 700; }
@keyframes original-unfold {
  0% { clip-path: inset(0 50% 0 50%); opacity: .65; }
  100% { clip-path: inset(0); opacity: 1; }
}

.info-card {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 24px;
  right: 24px;
  padding: 24px;
  border: 1px solid #b98c58;
  background: #f6efdf;
  box-shadow: 0 18px 60px rgb(43 30 18 / 38%);
  opacity: 0;
  transform: translateY(calc(-50% + 12px)) scale(.98);
  pointer-events: none;
  transition: 220ms;
}
.info-card.is-visible { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.info-card button { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 21px; }
.info-card small, .info-card span { display: block; color: #92704e; font-size: 10px; }
.info-card strong { display: block; margin-top: 4px; font: 700 22px/1.4 "Songti SC", serif; }
.info-card p { font-size: 12px; line-height: 1.65; white-space: pre-line; }

.reserve-modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgb(43 32 23 / 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.reserve-modal.is-visible { opacity: 1; pointer-events: auto; }
.reserve-dialog {
  position: relative;
  width: min(100%, 310px);
  padding: 31px 25px 22px;
  border: 1px solid #b48655;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgb(115 76 43 / 5%) 1px, transparent 1px) 0 0 / 11px 11px,
    #f7efdd;
  text-align: center;
  box-shadow: 0 20px 65px rgb(41 28 17 / 36%);
  transform: translateY(10px) scale(.98);
  transition: transform 220ms ease;
}
.reserve-modal.is-visible .reserve-dialog { transform: none; }
.reserve-seal {
  position: absolute;
  top: -22px;
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #f5dfba;
  background: #a44232;
  color: #fff4dc;
  font: 700 20px/1 "Songti SC", serif;
  transform: rotate(-4deg);
}
.reserve-dialog h2 { margin: 0; font: 700 23px/1.4 "Songti SC", serif; color: #523b2a; }
.reserve-dialog p { margin: 9px 0 22px; color: #786653; font-size: 14px; }
.reserve-share-preview { display: none; width: min(190px, 55vw); aspect-ratio: 3 / 4; object-fit: cover; margin: 12px auto 18px; border: 1px solid rgb(85 60 38 / 18%); border-radius: 8px; box-shadow: 0 8px 20px rgb(76 47 24 / 14%); }
.reserve-share-preview.is-visible { display: block; }
.reserve-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reserve-actions button { height: 43px; border-radius: 12px; font-size: 14px; }
#reserve-cancel { border: 1px solid rgb(85 60 38 / 20%); background: #f9f4e8; color: #685542; }
#reserve-unlock { border: 1px solid #873528; background: #a44232; color: #fff8e9; font-weight: 700; }
.update-actions { display: grid; }
.update-actions button {
  height: 43px;
  border: 1px solid #873528;
  border-radius: 12px;
  background: #a44232;
  color: #fff8e9;
  font-size: 14px;
  font-weight: 700;
}

.tutorial-canvas {
  position: absolute;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  opacity: 1;
  touch-action: none;
  pointer-events: none;
  transition: opacity 260ms ease;
}

@media (min-width: 431px) { .phone-stage { border-radius: 28px; } }
@media (max-height: 735px) {
  .phone-stage { min-height: 100svh; }
  .artifact-zone { height: 37%; min-height: 0; }
  .sorting-zone { height: 63%; padding: 11px 18px 4px; grid-template-rows: 30px 1fr 43px; }
  .bottom-actions { height: 43px; }
  .bottom-actions button { height: 38px; }
}

/* 关卡 UI 2.1：文物保持开阔，治愈感集中在操作层。 */
.artifact-zone::before { display: none; }
.artwork-wrap,
.artwork-wrap.is-landscape {
  top: 53px;
  bottom: 24px;
  width: min(61%, 242px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.artwork-wrap.is-landscape { width: min(76%, 324px); }
.artwork-wrap::before,
.paper-clip { display: none; }
#artifact-canvas {
  filter: drop-shadow(0 8px 12px rgb(64 47 33 / 10%));
}
.progress-seal {
  z-index: 11;
  right: 14px;
  bottom: 0;
  width: auto;
  height: 17px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: #fffaf0;
  box-shadow: none;
  transform: none;
}
.progress-seal::after { display: none; }
.progress-seal > span:first-child {
  margin-right: 3px;
  color: rgb(255 250 240 / 76%);
  font: 600 8px/1 "PingFang SC", sans-serif;
  letter-spacing: .12em;
}
.progress-seal strong { margin: 0; font: 700 12px/1 Georgia, serif; }
.progress-seal > span:last-child { font-size: 7px; }
.palette-progress { bottom: -1px; }

.sorting-zone {
  grid-template-rows: 56px 1fr 54px;
  background:
    radial-gradient(ellipse at 50% 100%, rgb(193 138 107 / 14%) 0 35%, transparent 70%),
    linear-gradient(105deg, rgb(255 255 255 / 30%) 0 18%, transparent 18% 76%, rgb(126 151 133 / 7%) 76%),
    #ebe5d9;
}
.sorting-zone::before { display: none; }
.section-heading {
  padding: 5px 11px 8px;
  align-items: start;
}
.section-heading strong { max-width: 330px; }
.workbench-label { display: none; }
.water-sort-canvas {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgb(255 253 247 / 32%) 0 40%, transparent 72%);
}

@media (max-height: 735px) {
  .artwork-wrap, .artwork-wrap.is-landscape { top: 48px; bottom: 22px; }
  .sorting-zone { grid-template-rows: 47px 1fr 49px; }
}

/* 2.2：恢复原有进度印章；抬起的瓶子始终显示在说明文字前。 */
.progress-seal {
  z-index: 4;
  right: -48px;
  bottom: 5px;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0;
  padding: 0;
  border: 2px solid rgb(156 57 43 / 75%);
  outline: 1px solid rgb(156 57 43 / 36%);
  outline-offset: 3px;
  border-radius: 0;
  background: transparent;
  color: #9c392b;
  box-shadow: none;
  transform: rotate(-4deg);
}
.progress-seal::after { display: none; }
.progress-seal strong { margin: 0; font: 700 17px/1 Georgia, serif; }
.progress-seal > span:last-child { font-size: 9px; }
.section-heading { z-index: 1; }
.water-sort-canvas { z-index: 3; }

/* 局内不显示关卡标题，让文物画面独占上半区。 */
.artwork-wrap,
.artwork-wrap.is-landscape {
  top: max(10px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
}

@media (max-height: 735px) {
  .artwork-wrap,
  .artwork-wrap.is-landscape {
    top: max(8px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  }
}

.sorting-zone { grid-template-rows: 56px minmax(0, 1fr) 54px; }
.section-heading {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  z-index: 1;
}
.water-sort-canvas { grid-row: auto; align-self: auto; z-index: 3; }
.bottom-actions { grid-row: auto; }
@media (max-height: 735px) {
  .sorting-zone { grid-template-rows: 47px minmax(0, 1fr) 49px; }
}

.sorting-zone { grid-template-rows: minmax(0, 1fr) 54px; }
.section-heading {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 20px;
  right: 20px;
  height: 48px;
  pointer-events: none;
}
.water-sort-canvas {
  grid-row: 1;
  align-self: stretch;
  position: relative;
  z-index: 3;
}
.bottom-actions { grid-row: 2; }
@media (max-height: 735px) {
  .sorting-zone { grid-template-rows: minmax(0, 1fr) 49px; }
  .section-heading { top: 17px; left: 18px; right: 18px; }
}

/* 2.4：恢复稳定的三行布局；瓶区安全距由游戏布局本身提供。 */
.sorting-zone { grid-template-rows: 56px minmax(0, 1fr) 54px; }
.section-heading {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  z-index: 1;
}
.water-sort-canvas { grid-row: auto; align-self: auto; z-index: 3; }
.bottom-actions { grid-row: auto; }
@media (max-height: 735px) {
  .sorting-zone { grid-template-rows: 47px minmax(0, 1fr) 49px; }
}

/* 2.3：Canvas 覆盖完整工作区，给选中瓶预留向上抬升的绘制空间。 */
.sorting-zone {
  grid-template-rows: minmax(0, 1fr) 54px;
}
.section-heading {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 20px;
  right: 20px;
  height: 48px;
  pointer-events: none;
}
.water-sort-canvas {
  grid-row: 1;
  align-self: stretch;
  position: relative;
  z-index: 3;
}
.bottom-actions { grid-row: 2; }
@media (max-height: 735px) {
  .sorting-zone { grid-template-rows: minmax(0, 1fr) 49px; }
  .section-heading { top: 17px; left: 18px; right: 18px; }
}

/* 东方治愈 UI：只更新承载层，不改变文物绘制与玩法画布。 */
.phone-stage {
  --accent: #b95745;
  --accent-deep: #863e34;
  --sage: #7e9585;
  --sage-soft: #dce5dc;
  --cream: #fbf7ed;
  --ink: #493e35;
  background: #f7f2e8;
  box-shadow: 0 22px 76px rgb(66 52 40 / 20%);
}

.home-screen {
  grid-template-rows: minmax(300px, 1fr) auto auto;
  gap: 20px;
  padding-inline: 30px;
  background:
    radial-gradient(circle at 83% 14%, rgb(225 168 143 / 28%) 0 70px, transparent 71px),
    radial-gradient(circle at 13% 70%, rgb(151 177 156 / 18%) 0 110px, transparent 111px),
    linear-gradient(90deg, rgb(111 93 72 / 3.5%) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(155deg, #fdfaf3 0%, #f6eee0 68%, #edf0e7 100%);
}
.home-screen::before {
  width: 330px;
  height: 330px;
  right: -142px;
  top: 70px;
  border-color: rgb(185 87 69 / 10%);
  box-shadow: 0 0 0 36px rgb(185 87 69 / 2.5%), 0 0 0 74px rgb(185 87 69 / 1.5%);
}
.home-showcase::after { border-color: rgb(92 116 98 / 11%); }
#home-art-canvas { opacity: .84; }
.home-copy { padding-left: 2px; }
.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #8a6d5c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
}
.home-kicker::before {
  content: "";
  width: 20px;
  height: 1px;
  background: #c68772;
}
.home-copy h1 {
  margin-bottom: 7px;
  color: #71372f;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: .12em;
}
.home-copy p { color: #72675d; font-size: 14px; letter-spacing: .05em; }
.home-actions { gap: 10px; }
.home-actions button {
  height: 52px;
  border-color: rgb(88 73 60 / 13%);
  border-radius: 18px;
  background: rgb(255 253 248 / 86%);
  color: #5e554d;
  box-shadow: 0 7px 18px rgb(68 51 37 / 7%);
}
.home-actions .primary-screen-action {
  border-color: #a64c3e;
  background: linear-gradient(145deg, #c16250, #a94b3d);
  box-shadow: 0 9px 22px rgb(139 60 48 / 22%);
}
.home-actions button:active { transform: translateY(1px) scale(.985); }

.levels-screen {
  gap: 16px;
  background:
    radial-gradient(circle at 85% 2%, rgb(226 170 145 / 20%) 0 94px, transparent 95px),
    linear-gradient(90deg, rgb(111 93 72 / 3%) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(165deg, #fbf8f0, #f2ecdf 72%, #ebeee6);
}
.screen-header small { color: #a16d59; font-weight: 600; }
.screen-header h1 { color: #6f3830; font-size: 26px; }
.level-grid { gap: 12px; padding-inline: 3px; }
.level-card {
  min-height: 128px;
  grid-template-columns: 102px 1fr;
  gap: 15px;
  padding: 11px;
  border-color: rgb(103 87 70 / 12%);
  border-radius: 20px;
  background: rgb(255 253 247 / 86%);
  box-shadow: 0 8px 22px rgb(77 59 42 / 8%);
}
.level-card img, .level-silhouette { width: 102px; height: 106px; border-radius: 13px; }
.level-silhouette {
  border-color: rgb(123 105 84 / 20%);
  background: linear-gradient(145deg, #e4dfd1, #d8dfd4);
  color: rgb(85 79 69 / 38%);
}
.level-copy small { color: #ad735c; font-weight: 600; }
.level-copy strong { color: #4d4038; font-size: 20px; }
.level-copy em { color: #87796b; }
.level-card.is-completed { border-color: rgb(185 87 69 / 25%); }
.difficulty-seal { background: rgb(255 253 247 / 30%); opacity: .7; }
.levels-note { color: #81776c; }
#levels-home {
  border-color: rgb(88 73 60 / 13%);
  border-radius: 14px;
  background: rgb(255 253 248 / 88%);
  color: #5e554d;
  box-shadow: 0 5px 14px rgb(68 51 37 / 6%);
}

.artifact-zone {
  background:
    radial-gradient(circle at 84% 18%, rgb(224 167 143 / 12%) 0 82px, transparent 83px),
    linear-gradient(90deg, rgb(111 93 72 / 3%) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(#fcfaf4, #f2eddf);
  border-bottom-color: rgb(90 73 55 / 11%);
}
.artifact-zone::after {
  height: 7px;
  background: repeating-linear-gradient(90deg, #9d5041 0 19px, #d0a36d 19px 25px);
  box-shadow: none;
}
.round-button {
  border-color: rgb(85 70 55 / 13%);
  background: rgb(255 253 248 / 88%);
  color: #60534a;
  box-shadow: 0 4px 13px rgb(67 51 38 / 8%);
}
#artifact-canvas { filter: drop-shadow(0 7px 12px rgb(64 47 33 / 12%)); }
.progress-seal { border-color: rgb(172 72 58 / 67%); outline-color: rgb(172 72 58 / 24%); color: #a74c3e; }

.sorting-zone {
  padding-inline: 20px;
  background:
    linear-gradient(rgb(250 247 239 / 91%), rgb(239 237 225 / 94%)),
    url("../../public/images/artifacts/smithsonian-f1917.197/original-display.webp") center 62% / 150% auto;
}
.section-heading span { color: #9b5b46; font-size: 16px; }
.section-heading strong { color: #7f756b; font-family: "PingFang SC", system-ui, sans-serif; }
.bottom-actions { gap: 9px; }
.bottom-actions button,
.result-actions button {
  border-color: rgb(85 70 55 / 13%);
  border-radius: 16px;
  background: rgb(255 253 248 / 89%);
  color: #5e554d;
  box-shadow: 0 5px 15px rgb(67 51 38 / 7%);
}
.bottom-actions .main-action,
.result-actions .result-primary {
  border-color: #a54b3e;
  background: linear-gradient(145deg, #bd5b49, #a84a3d);
  box-shadow: 0 7px 17px rgb(135 57 45 / 18%);
}

.reveal-panel {
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 12%, rgb(221 162 137 / 19%) 0 76px, transparent 77px),
    linear-gradient(155deg, #fbf7ed, #eee8db 70%, #e8ece3);
  box-shadow: 0 14px 34px rgb(65 49 35 / 10%);
}
.reveal-panel h2 { color: #9f493c; }
.original-unfold { border-radius: 14px; background: rgb(255 252 244 / 76%); }

.info-card,
.reserve-dialog {
  border-color: rgb(123 99 74 / 18%);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgb(115 92 68 / 2.8%) 1px, transparent 1px) 0 0 / 13px 13px,
    #fbf7ed;
  box-shadow: 0 22px 65px rgb(45 35 27 / 24%);
}
.reserve-modal { background: rgb(45 39 33 / 38%); backdrop-filter: blur(3px); }
.reserve-seal { border-radius: 12px; border-color: #f4e2c4; background: #ad5142; }
.reserve-actions button,
.update-actions button { border-radius: 15px; }
#reserve-unlock,
.update-actions button { background: #ad5142; border-color: #984237; }

/* 关卡 UI 2.0：画笺 / 调色轨 / 工作台。 */
.artifact-zone {
  height: 42%;
  padding: max(8px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 18px 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgb(218 157 132 / 17%) 0 74px, transparent 75px),
    linear-gradient(90deg, rgb(93 112 97 / 3%) 1px, transparent 1px) 0 0 / 18px 18px,
    #f7f3e9;
  border: 0;
}
.artifact-zone::before {
  content: "";
  position: absolute;
  inset: 58px 37px 24px;
  border-radius: 6px 6px 17px 17px;
  background: rgb(219 210 193 / 50%);
  box-shadow: 0 16px 32px rgb(69 52 39 / 10%);
  transform: rotate(-1.2deg);
}
.artifact-zone::after {
  inset: auto 0 0;
  height: 17px;
  background:
    radial-gradient(circle, #f7f3e9 0 2px, transparent 2.4px) 2px 50% / 13px 13px repeat-x,
    linear-gradient(90deg, #8ca092, #aebcab 50%, #d2a37c);
  box-shadow: 0 -1px 0 rgb(66 72 62 / 10%), 0 4px 12px rgb(61 51 42 / 12%);
  z-index: 8;
}
.top-bar {
  height: 48px;
  grid-template-columns: 38px 1fr 38px;
  padding-inline: 38px;
  transform: none;
}
.game-status {
  display: grid;
  justify-items: center;
  gap: 1px;
  color: #756a60;
  font-family: "PingFang SC", system-ui, sans-serif;
}
.game-status small { color: #a76855; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.game-status strong { color: #514941; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.artwork-wrap,
.artwork-wrap.is-landscape {
  top: 63px;
  bottom: 31px;
  width: min(62%, 246px);
  padding: 13px 12px 11px;
  border: 1px solid rgb(106 89 70 / 10%);
  border-radius: 5px 5px 14px 14px;
  background: rgb(255 253 247 / 91%);
  box-shadow: 0 15px 28px rgb(69 52 39 / 13%);
}
.artwork-wrap.is-landscape { width: min(77%, 328px); }
.artwork-wrap::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(121 101 78 / 8%);
  border-radius: 3px 3px 10px 10px;
  pointer-events: none;
}
.paper-clip {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: -9px;
  width: 42px;
  height: 16px;
  border: 1px solid rgb(101 87 72 / 22%);
  border-radius: 4px;
  background: linear-gradient(#dad2c5, #eee9df 48%, #c9c1b5);
  box-shadow: 0 3px 5px rgb(58 44 33 / 13%);
  transform: translateX(-50%);
}
#artifact-canvas { position: relative; z-index: 2; filter: none; }
.progress-seal {
  right: -44px;
  bottom: 8px;
  width: 48px;
  height: 48px;
  border: 0;
  outline: 0;
  border-radius: 15px;
  background: rgb(255 252 245 / 93%);
  color: #a64e40;
  box-shadow: 0 7px 18px rgb(79 52 38 / 13%);
  transform: rotate(-5deg);
}
.progress-seal::after {
  content: "完成度";
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  color: #a98776;
  font: 600 6px/1 "PingFang SC", sans-serif;
  letter-spacing: .08em;
  text-align: center;
}
.progress-seal strong { margin-top: 7px; }
.palette-progress {
  z-index: 10;
  left: 50%;
  bottom: -2px;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f8f5ed;
  box-shadow: 0 5px 13px rgb(61 51 42 / 13%);
  transform: translateX(-50%);
}
.palette-dot { width: 12px; height: 12px; border-color: #faf8f1; box-shadow: 0 0 0 1px rgb(67 58 49 / 20%); }

.sorting-zone {
  height: 58%;
  padding: 22px 16px max(11px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  grid-template-rows: 43px 1fr 54px;
  background:
    radial-gradient(ellipse at 50% 102%, rgb(193 138 107 / 15%) 0 38%, transparent 68%),
    linear-gradient(105deg, rgb(255 255 255 / 33%) 0 18%, transparent 18% 76%, rgb(126 151 133 / 8%) 76%),
    #ebe5d9;
}
.sorting-zone::before {
  content: "";
  position: absolute;
  inset: 65px 10px 67px;
  border: 1px solid rgb(94 78 63 / 8%);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgb(104 87 68 / 2.5%) 1px, transparent 1px) 0 0 / 22px 22px,
    rgb(248 244 235 / 48%);
  box-shadow: inset 0 1px rgb(255 255 255 / 45%);
  pointer-events: none;
}
.section-heading {
  position: relative;
  z-index: 5;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px 0 10px;
}
.section-heading div { gap: 3px; }
.section-heading span { color: #874b3f; font: 700 16px/1.15 "Songti SC", serif; }
.section-heading strong { max-width: 260px; overflow: hidden; color: #81776d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-label {
  color: #96a295 !important;
  font: 700 7px/1 "PingFang SC", sans-serif !important;
  letter-spacing: .16em !important;
  writing-mode: vertical-rl;
}
.water-sort-canvas { position: relative; z-index: 2; }
.bottom-actions {
  position: relative;
  z-index: 6;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 7px;
  align-items: center;
  padding: 5px;
  border: 1px solid rgb(89 73 58 / 10%);
  border-radius: 21px;
  background: rgb(252 249 242 / 87%);
  box-shadow: 0 10px 25px rgb(70 52 38 / 13%);
  backdrop-filter: blur(8px);
}
.bottom-actions button {
  height: 42px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}
.bottom-actions .main-action {
  background: linear-gradient(145deg, #c06150, #aa4c40);
  box-shadow: 0 6px 14px rgb(135 57 45 / 19%);
}

@media (max-height: 735px) {
  .artifact-zone { height: 39%; }
  .sorting-zone { height: 61%; padding: 17px 14px 5px; grid-template-rows: 38px 1fr 49px; }
  .artwork-wrap, .artwork-wrap.is-landscape { top: 55px; bottom: 27px; }
  .bottom-actions { height: 47px; }
}

/* 2.1 必须位于 2.0 之后，负责移除实验性的便签与托盘。 */
.artifact-zone::before { display: none; }
.artwork-wrap,
.artwork-wrap.is-landscape {
  top: 53px;
  bottom: 24px;
  width: min(61%, 242px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.artwork-wrap.is-landscape { width: min(76%, 324px); }
.artwork-wrap::before,
.paper-clip { display: none; }
#artifact-canvas { filter: drop-shadow(0 8px 12px rgb(64 47 33 / 10%)); }
.progress-seal {
  z-index: 11;
  right: 14px;
  bottom: 0;
  width: auto;
  height: 17px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: #fffaf0;
  box-shadow: none;
  transform: none;
}
.progress-seal::after { display: none; }
.progress-seal > span:first-child {
  margin-right: 3px;
  color: rgb(255 250 240 / 76%);
  font: 600 8px/1 "PingFang SC", sans-serif;
  letter-spacing: .12em;
}
.progress-seal strong { margin: 0; font: 700 12px/1 Georgia, serif; }
.progress-seal > span:last-child { font-size: 7px; }
.palette-progress { bottom: -1px; }
.sorting-zone {
  grid-template-rows: 56px 1fr 54px;
  background:
    radial-gradient(ellipse at 50% 100%, rgb(193 138 107 / 14%) 0 35%, transparent 70%),
    linear-gradient(105deg, rgb(255 255 255 / 30%) 0 18%, transparent 18% 76%, rgb(126 151 133 / 7%) 76%),
    #ebe5d9;
}
.sorting-zone::before { display: none; }
.section-heading { padding: 5px 11px 8px; align-items: start; }
.section-heading strong { max-width: 330px; }
.workbench-label { display: none; }
.water-sort-canvas {
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 48%, rgb(255 253 247 / 32%) 0 40%, transparent 72%);
}
@media (max-height: 735px) {
  .artwork-wrap, .artwork-wrap.is-landscape { top: 48px; bottom: 22px; }
  .sorting-zone { grid-template-rows: 47px 1fr 49px; }
}

.progress-seal {
  z-index: 4;
  right: -48px;
  bottom: 5px;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0;
  padding: 0;
  border: 2px solid rgb(156 57 43 / 75%);
  outline: 1px solid rgb(156 57 43 / 36%);
  outline-offset: 3px;
  border-radius: 0;
  background: transparent;
  color: #9c392b;
  box-shadow: none;
  transform: rotate(-4deg);
}
.progress-seal strong { margin: 0; font: 700 17px/1 Georgia, serif; }
.progress-seal > span:last-child { font-size: 9px; }
.section-heading { z-index: 1; }
.water-sort-canvas { z-index: 3; }