:root {
  --ink:#425d78;
  --blue:#4d88cf;
  --cream:#fff6e7;
  --stone:#d9c5a3;
  --muted:#8295a3;
  --green:#70ae93;
  --coral:#ef9c86;
  --panel:rgba(255,250,239,.94);
  font-family:"Trebuchet MS",system-ui,-apple-system,"PingFang SC",sans-serif;
  color:var(--ink);
  color-scheme:light
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#f3f6f5
}
main {
  max-width:1520px;
  margin:auto;
  padding:12px 32px 24px
}
.outside {
  height:63px;
  display:flex;
  gap:24px;
  align-items:center
}
.outside>img {
  object-fit:contain;
  background:#88b5dc;
  border-radius:8px;
  padding:3px
}
.outside>span {
  font-size:12px;
  color:#82939f;
  flex:1
}
.game {
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#a7d2ec;
  box-shadow:0 16px 50px #6988a52b;
  isolation:isolate
}
#scene {
  position:absolute;
  inset:0
}
#scene canvas {
  display:block;
  width:100%!important;
  height:100%!important
}
.hud {
  position:absolute;
  top:3.5%;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:2
}
.top-left {
  left:3%
}
.top-right {
  right:3%
}
.pill {
  border-radius:36px;
  background:var(--panel);
  box-shadow:0 4px 0 #ae9c7c45,0 4px 14px #567b921c;
  border:2px solid #fff7e8;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 17px;
  font-size:clamp(13px,1.9vw,25px);
  font-weight:800;
  min-height:45px
}
.pill img {
  width:31px;
  height:31px
}
#hearts {
  display:flex;
  gap:2px
}
#hearts img {
  width:clamp(22px,3.2vw,43px);
  height:clamp(22px,3.2vw,43px);
  filter:drop-shadow(0 2px 2px #9f8e7050)
}
#hearts img.empty {
  filter:grayscale(1);
  opacity:.4
}
button {
  font:inherit;
  font-weight:700;
  cursor:pointer;
  color:#77634d;
  border:2px solid #fff9eb;
  background:linear-gradient(#fffbed,#f0e1c9);
  border-radius:17px;
  padding:12px 21px;
  box-shadow:0 4px 0 #b6a38560;
  transition:transform .15s,filter .15s
}
button:hover {
  filter:brightness(1.04);
  transform:translateY(-1px)
}
button:active {
  transform:translateY(2px);
  box-shadow:0 1px 0 #b6a38560
}
button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid #3d82d0;
  outline-offset:4px
}
button:disabled {
  opacity:.5;
  cursor:wait
}
.icon-button {
  display:grid;
  place-items:center;
  padding:9px;
  border-radius:22px;
  width:54px;
  height:54px
}
.icon-button img {
  width:31px;
  height:31px
}
.text-button {
  border:none;
  background:none;
  box-shadow:none;
  padding:6px;
  font-size:12px;
  color:var(--blue)
}
#region-caption {
  position:absolute;
  left:4%;
  top:15%;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#f8fcff;
  text-shadow:0 2px 8px #3f79ac55
}
#region-en {
  font-size:clamp(10px,1.3vw,17px);
  font-weight:800;
  letter-spacing:3px
}
#region-zh {
  font-size:clamp(10px,1vw,13px);
  letter-spacing:4px
}
.camera-card {
  position:absolute;
  left:2.6%;
  bottom:6%;
  width:18%;
  min-width:125px;
  border:4px solid #fff7e8;
  background:var(--cream);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 0 #b6a38555,0 12px 30px #6b8e9c25
}
.video-box {
  aspect-ratio:4/3;
  background:#e5e3d9;
  position:relative;
  overflow:hidden;
  border-radius:14px
}
video,#landmarks {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1)
}
#landmarks {
  z-index:1
}
#camera-empty {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  font-size:10px;
  color:#8d968d;
  background:#e4e7dc
}
.camera-ring {
  width:40px;
  height:40px;
  border:2px dashed #a8b8a4;
  border-radius:50%
}
.tracking {
  position:absolute;
  top:7px;
  left:8px;
  font-size:9px;
  z-index:2;
  color:#5e7a71;
  background:#fffc;
  padding:3px 5px;
  border-radius:6px
}
#angle {
  position:absolute;
  right:7px;
  bottom:7px;
  z-index:2;
  font-size:20px;
  color:#f9fcff;
  background:#416782a6;
  padding:3px 7px;
  border-radius:8px
}
.camera-bottom {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 5px
}
.camera-bottom img {
  width:29px;
  height:29px
}
.camera-bottom strong {
  font-size:clamp(10px,1.3vw,17px);
  display:block;
  color:#4d81b8
}
.camera-bottom span {
  font-size:9px;
  display:block;
  margin-top:4px;
  color:#87959c
}
#message {
  position:absolute;
  top:15%;
  left:32%;
  width:47%;
  text-align:center;
  background:#fffaf0e8;
  padding:11px 15px;
  border-radius:16px;
  font-size:clamp(10px,1.2vw,15px);
  color:#5e7f94;
  box-shadow:0 3px 14px #5d81a51a
}
.action-card {
  position:absolute;
  right:3%;
  bottom:6%;
  width:27%;
  background:var(--panel);
  border:2px solid #fffdf6;
  padding:15px 17px;
  border-radius:20px;
  box-shadow:0 4px 0 #b6a38555;
  display:flex;
  flex-direction:column;
  gap:8px
}
.action-heading {
  display:flex;
  justify-content:space-between;
  gap:5px;
  font-size:10px;
  color:#899aab
}
.action-card strong {
  font-size:clamp(10px,1.15vw,15px);
  font-weight:700
}
.action-card>span {
  font-size:9px;
  color:#8c9eac
}
progress {
  appearance:none;
  border:0;
  border-radius:20px;
  width:100%;
  height:7px;
  background:#e2e9e6;
  overflow:hidden
}
progress::-webkit-progress-bar {
  background:#e2e9e6
}
progress::-webkit-progress-value {
  background:#7db7a4;
  border-radius:20px
}
progress::-moz-progress-bar {
  background:#7db7a4
}
.mini-actions {
  display:flex;
  justify-content:space-around;
  font-size:9px;
  color:#86a0b3;
  padding-top:3px
}
.corner-tools {
  position:absolute;
  bottom:6%;
  right:32%
}
#test-badge {
  position:absolute;
  bottom:1%;
  left:35%;
  font-size:10px;
  background:#fff2ce;
  color:#946e2d;
  padding:5px 9px;
  border-radius:12px
}
#walk-label {
  position:absolute;
  top:27%;
  left:34%;
  width:40%;
  text-align:center;
  font-size:13px;
  color:#578978;
  background:#faffecdf;
  padding:12px;
  border-radius:16px
}
.workbench {
  padding:22px 0 0
}
.workbench>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.workbench strong {
  font-size:13px
}
.workbench p {
  font-size:11px;
  color:#7c8b96;
  line-height:1.8
}
.tools {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:9px 0 18px
}
.tools button {
  font-size:12px;
  padding:10px 15px;
  border-radius:12px
}
.secondary {
  background:#fff;
  box-shadow:0 2px 0 #d5dedb;
  border-color:#e5ebe7;
  color:#6f8590
}
.test-switch {
  font-size:12px;
  color:#8b7a55;
  display:flex;
  gap:7px;
  align-items:center;
  margin-left:auto
}
details {
  border-top:1px solid #dfe6e1;
  padding-top:12px;
  font-size:12px;
  color:#82929e
}
summary {
  cursor:pointer
}
footer {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#95a3aa;
  margin-top:20px;
  gap:10px
}
dialog {
  color:var(--ink);
  border:2px solid #fff9ed;
  border-radius:28px;
  background:linear-gradient(135deg,#fffcf4f5,#e7f1f3f5);
  padding:28px;
  width:min(650px,88%);
  max-height:90%;
  box-shadow:0 20px 80px #3f63844d
}
dialog::backdrop {
  background:#4a769955;
  backdrop-filter:blur(6px)
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dialog-top>img {
  background:#9dc4e5;
  border-radius:12px;
  padding:5px;
  max-width:60%
}
dialog h1 {
  font-size:30px;
  margin:22px 0 8px;
  color:#497ea9
}
dialog h2 {
  font-size:24px
}
dialog p {
  font-size:13px;
  line-height:1.9;
  color:#6e8594
}
.dialog-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px
}
.primary {
  background:linear-gradient(#8bbffc,#548de0);
  color:white;
  border-color:#d8eaff;
  box-shadow:0 4px 0 #527cba55
}
.cal-step {
  font-size:11px;
  letter-spacing:2px;
  color:#6c9ca6
}
.cal-angle {
  font-size:44px;
  color:#73a898;
  margin:16px 0
}
.cal-range {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.cal-range span {
  background:#f6f9f3;
  border:1px solid #dce8dd;
  padding:10px;
  border-radius:10px;
  font-size:11px
}
.map-list {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px
}
.map-list button {
  padding:10px 3px;
  font-size:12px
}
.map-list button.current {
  background:#8fbde9;
  color:white
}
.map-list button.done {
  background:#dfebc9
}
.map-heading {
  grid-column:1/-1;
  font-size:12px;
  margin-top:10px
}
.reward-img {
  display:block;
  width:210px;
  height:140px;
  margin:auto;
  object-fit:contain
}
.stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.stats span {
  padding:13px;
  border-radius:12px;
  background:#fff9eb;
  font-size:13px
}
.instructions {
  display:grid;
  gap:8px
}
.instructions p {
  margin:0;
  padding:10px 14px;
  border-radius:12px;
  background:#fff9eb
}
.loading {
  font-size:12px;
  color:#758fa5
}
.warning {
  color:#b98043!important
}
.visual-note {
  font-size:11px;
  color:#968a73;
  border-top:1px solid #e5ddcd;
  padding-top:10px
}
@media(max-width:800px) {
  main {
    padding:4px 8px 18px
  }
  .outside {
    height:50px;
    gap:8px
  }
  .outside>span {
    font-size:9px
  }
  .outside>img {
    width:105px;
    height:32px
  }
  .game {
    border-radius:10px
  }
  .pill {
    min-height:27px;
    padding:3px 8px;
    gap:4px
  }
  .pill img {
    width:20px;
    height:20px
  }
  .hud {
    gap:5px
  }
  .icon-button {
    width:34px;
    height:34px;
    padding:5px;
    border-radius:13px
  }
  .icon-button img {
    width:22px;
    height:22px
  }
  .camera-card {
    min-width:0;
    border-width:2px;
    border-radius:10px
  }
  .video-box {
    border-radius:7px
  }
  .tracking {
    font-size:6px;
    top:3px;
    left:3px;
    padding:2px
  }
  #angle {
    font-size:12px;
    bottom:4px;
    right:4px
  }
  .camera-bottom {
    padding:4px;
    gap:3px
  }
  .camera-bottom img {
    width:17px;
    height:17px
  }
  .camera-bottom span {
    font-size:6px
  }
  .camera-bottom strong {
    font-size:9px
  }
  #camera-empty {
    font-size:6px;
    gap:3px
  }
  .camera-ring {
    width:24px;
    height:24px
  }
  .action-card {
    padding:8px;
    gap:4px;
    border-radius:11px
  }
  .action-heading,.action-card>span,.mini-actions {
    font-size:7px
  }
  #message {
    padding:6px 8px;
    border-radius:8px;
    font-size:8px
  }
  #test-badge {
    font-size:7px
  }
  #region-caption {
    gap:2px
  }
  #region-en {
    font-size:8px;
    letter-spacing:1px
  }
  #region-zh {
    font-size:7px;
    letter-spacing:1px
  }
  .workbench>div:first-child {
    display:block
  }
  .test-switch {
    margin-left:0
  }
  footer {
    flex-direction:column
  }
  dialog {
    padding:18px
  }
  dialog h1 {
    font-size:23px
  }
  dialog p {
    font-size:11px
  }
}
[hidden] {
  display:none!important
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
/* 页面美术层：统一使用独立 SVG，位置按原参考的 16:9 桌面构图。 */
.game:not(.in-game)>.hud,.game:not(.in-game)>.camera-card,.game:not(.in-game)>#region-caption,.game:not(.in-game)>#message,.game:not(.in-game)>.action-card,.game:not(.in-game)>.corner-tools,.game:not(.in-game)>#test-badge {
  display:none!important
}
.page-layer {
  position:absolute;
  inset:0;
  overflow:hidden
}
.page-logo {
  position:absolute;
  left:6%;
  top:5%;
  width:43%;
  height:auto;
  filter:drop-shadow(0 5px 4px #6995b430)
}
.loader {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff9e9
}
.loader img {
  width:50%
}
.loader p {
  letter-spacing:3px;
  font-size:13px
}
.hero-island {
  position:absolute;
  left:-4%;
  top:42%;
  width:51%;
  height:70%;
  pointer-events:none
}
.island-art {
  position:absolute;
  width:100%;
  height:auto;
  top:30%
}
.hero-art {
  position:absolute;
  width:32%;
  left:36%;
  bottom:27%;
  filter:drop-shadow(4px 8px 4px #686d5533)
}
.splash-copy {
  position:absolute;
  inset:0;
  z-index:1
}
.splash-copy .page-logo {
  width:58%;
  left:24%;
  top:13%
}
.motto {
  position:absolute;
  top:7%;
  right:15%;
  color:white;
  font-size:clamp(10px,1.5vw,22px);
  font-style:italic;
  transform:rotate(-7deg);
  line-height:1.5
}
.splash-copy .big-stone {
  position:absolute;
  top:49%;
  left:40%;
  width:24%;
  font-size:clamp(17px,2.3vw,32px)
}
.big-stone, .menu-buttons>button {
  background:transparent url('assets/ui/stone-button.svg') center/100% 100% no-repeat;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:#72604d;
  min-height:55px
}
.big-stone span {
  margin-left:15px
}
.far-castle {
  position:absolute;
  right:2%;
  top:9%;
  width:28%;
  opacity:.75
}
.wood-sign {
  position:absolute;
  left:2%;
  top:39%;
  padding:15px 12px;
  background:#d8b78b;
  border:3px solid #c39e72;
  border-radius:7px;
  color:#7e6547;
  font-size:clamp(8px,1.2vw,16px);
  line-height:2;
  text-align:center;
  transform:rotate(-7deg);
  box-shadow:0 4px 0 #9d865b55
}
.page-foot {
  position:absolute;
  bottom:4%;
  left:38%;
  font-size:clamp(8px,1vw,13px);
  letter-spacing:1.5px;
  color:#5988ae
}
.version {
  position:absolute;
  bottom:2%;
  left:2%;
  font-size:8px;
  color:#728c9c
}
.menu-buttons {
  position:absolute;
  left:55%;
  top:26%;
  width:30%;
  display:flex;
  flex-direction:column;
  gap:10px
}
.menu-buttons>button {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:15px;
  padding:12px 25px;
  font-size:clamp(11px,1.5vw,20px);
  min-height:55px
}
.menu-buttons>button:first-child {
  margin-left:-4%;
  width:108%;
  min-height:65px
}
.menu-buttons img {
  width:29px;
  height:29px;
  object-fit:contain
}
.menu-buttons small {
  font-size:9px;
  margin-left:auto;
  font-weight:400
}
.menu-motto {
  position:absolute;
  top:27%;
  left:18%;
  color:#fff9ec;
  font-size:clamp(11px,1.6vw,23px);
  font-style:italic;
  line-height:1.5;
  transform:rotate(-7deg)
}
.page-back {
  position:absolute;
  left:2.5%;
  top:3%;
  z-index:3;
  font-size:clamp(10px,1.2vw,16px);
  padding:8px 19px
}
.page-title {
  text-align:center;
  position:absolute;
  left:25%;
  top:4%;
  width:62%;
  color:#42617c
}
.page-title h1 {
  font-size:clamp(22px,3.5vw,47px);
  margin:0 0 8px
}
.page-title p {
  font-size:clamp(9px,1.2vw,16px);
  margin:0
}
.intro-panel {
  position:absolute;
  right:5%;
  top:15%;
  width:34%;
  background:linear-gradient(#fff9eee8,#f1e6d0ed);
  border:3px solid #fffcf4;
  border-radius:24px;
  padding:24px;
  text-align:center;
  box-shadow:0 6px 0 #bca7803b
}
.intro-panel h1 {
  font-size:clamp(18px,2.9vw,38px);
  margin:14px 0 4px;
  color:#776c5e
}
.intro-panel h2 {
  font-size:clamp(13px,1.8vw,24px);
  margin:0
}
.intro-panel p {
  font-size:clamp(9px,1vw,13px);
  line-height:1.7;
  color:#7293ac
}
.intro-panel .label {
  background:#bcd4e9;
  border-radius:12px;
  padding:4px 13px;
  font-size:11px;
  letter-spacing:2px
}
.intro-panel .big-stone {
  width:100%;
  margin-top:15px;
  font-size:clamp(10px,1.3vw,18px)
}
.intro-goals {
  display:flex;
  justify-content:space-around;
  gap:6px;
  margin-top:20px
}
.intro-goals span {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:#fff9ed9e;
  border:1px solid white;
  border-radius:12px;
  padding:10px;
  font-size:10px;
  color:#6c8ead
}
.intro-goals img {
  width:32px;
  height:32px
}
.intro-gate {
  position:absolute;
  width:24%;
  left:26%;
  top:21%;
  filter:drop-shadow(4px 8px 8px #667d6240)
}
.intro .hero-island {
  top:34%
}
.map-title {
  position:absolute;
  left:2%;
  top:13%;
  background:#fff6e5e6;
  border-radius:12px;
  padding:12px 20px;
  text-align:center
}
.map-title h1 {
  font-size:clamp(16px,2.3vw,32px);
  margin:0
}
.map-title p {
  font-size:8px;
  letter-spacing:1px
}
.world-region {
  position:absolute;
  left:var(--map-x);
  top:var(--map-y);
  width:29%;
  height:46%;
  isolation:isolate
}
.world-island {
  position:absolute;
  top:20%;
  width:100%;
  height:auto
}
.world-label {
  position:absolute;
  bottom:0;
  left:2%;
  background:#fff9ece8;
  border-radius:12px;
  padding:8px 12px;
  box-shadow:0 3px 0 #b8c3a444;
  z-index:2;
  max-width:95%
}
.world-label b {
  font-size:clamp(8px,1vw,13px);
  display:block
}
.world-label small {
  font-size:clamp(6px,.7vw,9px);
  color:#7c8e9d
}
.region-1 .world-label {
  background:#e8f5fff0
}
.region-2 .world-label {
  background:#fff0e9f0
}
.region-3 .world-label {
  background:#f1e7fff0
}
.region-4 .world-label {
  background:#fff1cfe8
}
.map-node {
  position:absolute;
  border-radius:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  background:#fffbed;
  font-size:11px;
  z-index:3;
  box-shadow:0 3px 5px #66855740;
  border:2px solid #fff9df
}
.map-node.done {
  background:#c3db9f
}
.map-node.current {
  background:#ebad8b;
  border-color:#fff6c5;
  box-shadow:0 0 0 4px #ffe5b64d
}
.map-node:disabled {
  opacity:.6;
  cursor:not-allowed
}
.world-nodes {
  position:absolute;
  top:10%;
  left:0;
  width:100%;
  height:70%
}
.node-0 {
  left:14%;
  top:62%
}
.node-1 {
  left:28%;
  top:44%
}
.node-2 {
  left:40%;
  top:22%
}
.node-3 {
  left:61%;
  top:29%
}
.node-4 {
  left:74%;
  top:48%
}
.node-5 {
  left:58%;
  top:68%
}
.map-castle {
  position:absolute;
  width:50%;
  right:7%;
  top:-18%;
  z-index:1
}
.map-garden {
  position:absolute;
  left:12%;
  top:11%;
  width:70%
}
.map-instruction {
  position:absolute;
  bottom:2%;
  left:3%;
  font-size:10px;
  color:#527798
}
.equipment-grid {
  position:absolute;
  top:24%;
  left:16%;
  width:77%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.equipment-card {
  border:2px solid #fffaf1;
  border-radius:20px;
  background:#fff9ebea;
  padding:20px;
  text-align:center;
  color:#586d82;
  box-shadow:0 6px 0 #c0b79930
}
.equipment-card>img {
  width:100%;
  height:auto
}
.equipment-card h2 {
  font-size:clamp(11px,1.6vw,21px);
  margin:6px 0
}
.equipment-card h3 {
  font-size:clamp(10px,1.3vw,17px);
  margin:5px 0
}
.equipment-card p {
  font-size:clamp(8px,1vw,12px)
}
.equipment-card button {
  font-size:clamp(8px,1vw,13px);
  padding:9px 12px
}
.equipment-card.locked img {
  filter:grayscale(.6);
  opacity:.6
}
.collection-note {
  position:absolute;
  bottom:7%;
  left:25%;
  width:60%;
  text-align:center;
  font-size:11px;
  color:#5b7e95
}
.instruction-grid {
  position:absolute;
  top:24%;
  left:13%;
  width:83%;
  height:51%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.instruction-grid article {
  position:relative;
  background:#fffaf1e8;
  border:2px solid #fffdf8;
  border-radius:19px;
  padding:17px 14px;
  overflow:hidden;
  text-align:center
}
.instruction-number {
  position:absolute;
  left:8px;
  top:8px;
  color:#4f8fd2;
  font-size:12px
}
.instruction-grid h2 {
  font-size:clamp(9px,1.2vw,17px);
  margin:15px 0 5px
}
.instruction-grid article>img {
  width:35px;
  height:35px
}
.instruction-grid article>img.instruction-hero {
  width:55%;
  height:50%;
  object-fit:contain;
  display:block;
  margin:4px auto
}
.instruction-grid p {
  font-size:clamp(7px,.9vw,12px);
  line-height:1.6;
  margin:3px 0
}
.quick-tips {
  position:absolute;
  top:79%;
  left:20%;
  width:70%;
  padding:12px;
  background:#fffaf0e8;
  border-radius:15px;
  text-align:center;
  font-size:clamp(8px,1.1vw,14px);
  color:#7290a2
}
.lets-go {
  position:absolute;
  right:5%;
  bottom:3%;
  font-size:clamp(11px,1.5vw,21px);
  background:linear-gradient(#f4b5b7,#e7949b);
  border-color:#ffdcdb;
  color:#965e65
}
.settings-panel {
  position:absolute;
  top:16%;
  left:31%;
  width:45%;
  padding:28px;
  background:#fff9eced;
  border:2px solid #fffcf3;
  border-radius:24px
}
.settings-panel h1 {
  font-size:32px;
  margin:0 0 10px
}
.settings-panel p {
  font-size:12px;
  line-height:1.8
}
.settings-panel button {
  display:block;
  width:100%;
  margin:10px 0;
  font-size:13px
}
.reward-content {
  position:absolute;
  left:39%;
  top:4%;
  width:52%;
  text-align:center
}
.reward-content h1 {
  font-size:clamp(19px,3.6vw,48px);
  color:#fef9e8;
  text-shadow:2px 3px 0 #6592cf,-2px -1px 0 #6592cf;
  margin:0
}
.reward-content>h2 {
  font-size:clamp(12px,1.8vw,24px);
  margin:5px;
  color:#467db7
}
.reward-art {
  width:69%;
  height:auto;
  margin:6px 0
}
.reward-description {
  border:2px solid #fff4d2;
  border-radius:21px;
  padding:12px;
  background:#fffaf0ec;
  box-shadow:0 4px 0 #c0a57830
}
.reward-description h2 {
  font-size:clamp(11px,1.6vw,22px);
  margin:0
}
.reward-description p {
  font-size:clamp(8px,1vw,13px);
  margin:8px 0;
  color:#7c94a5
}
.reward-content .dialog-actions {
  justify-content:center;
  margin-top:15px
}
.reward-content button {
  font-size:clamp(10px,1.3vw,18px)
}
.completion-content {
  position:absolute;
  left:40%;
  top:4%;
  width:42%;
  text-align:center
}
.completion-content h1 {
  font-size:clamp(24px,4vw,56px);
  margin:0;
  color:#fff7df;
  text-shadow:2px 4px 0 #b49a6b
}
.completion-content>h2 {
  font-size:clamp(12px,1.8vw,23px);
  color:white;
  margin:8px
}
.completion-stars {
  display:flex;
  justify-content:center;
  gap:10px;
  padding:10px
}
.completion-stars img {
  width:17%;
  filter:drop-shadow(0 3px 6px #eed08d99)
}
.results {
  padding:15px 22px;
  border:3px solid #fffcf1;
  border-radius:22px;
  background:#fff6e3eb
}
.results p {
  display:flex;
  justify-content:space-between;
  font-size:clamp(10px,1.4vw,18px);
  color:#786956;
  border-bottom:1px solid #dccba958;
  padding-bottom:10px
}
.completion-content>p {
  font-size:10px;
  color:#6387a5
}
.completion-content .dialog-actions {
  justify-content:center
}
.completion-content button {
  font-size:clamp(10px,1.2vw,16px)
}
@media(max-width:800px) {
  .menu-buttons {
    gap:5px;
    top:23%;
    width:35%;
    left:56%
  }
  .menu-buttons>button {
    min-height:34px;
    padding:7px 16px;
    gap:6px
  }
  .menu-buttons>button:first-child {
    min-height:41px
  }
  .menu-buttons img {
    width:20px;
    height:20px
  }
  .menu-buttons small {
    font-size:6px
  }
  .splash-copy .big-stone {
    min-height:40px
  }
  .wood-sign {
    padding:6px;
    border-width:2px
  }
  .intro-panel {
    padding:12px;
    border-radius:17px;
    top:10%;
    width:39%
  }
  .intro-panel p {
    margin:7px 0
  }
  .intro-goals {
    margin-top:8px
  }
  .intro-goals span {
    padding:5px;
    font-size:7px
  }
  .intro-goals img {
    width:21px;
    height:21px
  }
  .intro-panel .big-stone {
    min-height:35px;
    margin-top:7px
  }
  .intro-panel .text-button {
    font-size:7px
  }
  .equipment-grid {
    gap:8px
  }
  .equipment-card {
    padding:10px;
    border-radius:12px
  }
  .equipment-card button {
    padding:7px
  }
  .world-label {
    padding:5px 7px;
    border-radius:7px
  }
  .map-node {
    width:21px;
    height:21px;
    font-size:8px
  }
  .map-title {
    padding:5px 8px
  }
  .map-title p {
    font-size:6px
  }
  .instruction-grid {
    gap:6px
  }
  .instruction-grid article {
    padding:10px 6px;
    border-radius:12px
  }
  .instruction-grid h2 {
    margin-top:9px
  }
  .instruction-grid article>img {
    width:23px;
    height:23px
  }
  .instruction-number {
    font-size:8px;
    top:3px
  }
  .instruction-grid p {
    font-size:6px
  }
  .quick-tips {
    padding:7px
  }
  .lets-go {
    padding:7px 15px
  }
  .settings-panel {
    padding:16px;
    top:11%;
    left:25%;
    width:55%
  }
  .settings-panel h1 {
    font-size:20px
  }
  .settings-panel p {
    font-size:8px
  }
  .settings-panel button {
    padding:7px;
    font-size:9px
  }
  .reward-description {
    padding:8px
  }
  .reward-content .dialog-actions {
    margin-top:8px
  }
  .reward-content button {
    padding:8px 13px
  }
  .completion-content .results {
    padding:5px 12px
  }
  .completion-content button {
    padding:7px 12px
  }
  .completion-content>p {
    font-size:7px
  }
}
.region-0 {
  --map-x:1%;
  --map-y:28%
}
.region-1 {
  --map-x:26%;
  --map-y:1%
}
.region-2 {
  --map-x:25%;
  --map-y:51%
}
.region-3 {
  --map-x:53%;
  --map-y:0%
}
.region-4 {
  --map-x:68%;
  --map-y:47%
}
.cal-camera-wrap {
  float:left;
  width:43%;
  aspect-ratio:4/3;
  position:relative;
  background:#dae3df;
  border:4px solid #fff9ee;
  border-radius:16px;
  margin:12px 22px 16px 0;
  overflow:hidden
}
.cal-camera-wrap video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1)
}
.cal-camera-wrap span {
  position:absolute;
  bottom:5px;
  left:5px;
  right:5px;
  background:#fff9e5df;
  font-size:9px;
  text-align:center;
  padding:3px;
  border-radius:5px
}
.calibration-dialog {
  width:min(800px,90%)
}
.calibration-dialog .dialog-actions {
  clear:both
}
.calibration-dialog .cal-angle {
  padding-top:20px
}
.calibration-dialog progress {
  width:45%
}
@media(max-width:800px) {
  .calibration-dialog .cal-angle {
    font-size:25px;
    padding-top:5px
  }
  .cal-camera-wrap {
    margin-right:12px
  }
  .calibration-dialog p {
    font-size:10px
  }
  .calibration-dialog .cal-step {
    font-size:9px
  }
}
.world-route {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.75
}
.map-landmark {
  position:absolute;
  left:44%;
  top:-1%;
  width:28%;
  height:50%;
  object-fit:contain
}
.map-bridge {
  left:22%;
  top:9%;
  width:60%;
  height:auto
}
.pause-dialog {
  width:min(430px,75%);
  text-align:center;
  background:linear-gradient(135deg,#f9fcf2ed,#e5f0f3ed)
}
.pause-dialog .dialog-top {
  justify-content:flex-end
}
.pause-dialog .dialog-top img {
  display:none
}
.pause-dialog h1 {
  font-size:45px;
  color:#4d91df;
  text-shadow:0 3px 0 #cee4f5;
  letter-spacing:2px;
  margin-top:0
}
.pause-dialog .dialog-actions {
  flex-direction:column;
  gap:16px
}
.pause-dialog .dialog-actions button {
  width:100%;
  border-radius:30px
}
.pause-dialog .dialog-actions button:first-child {
  color:white;
  background:linear-gradient(#8bbff4,#558fdf);
  border-color:#d8edff
}