/* 基础与共用控件 */
:root {
  --paper:#EAF3FB;
  --ink:#2F3A56;
  --muted:#66738B;
  --peach:#FFB59E;
  --mint:#9ED8C3;
  --yellow:#FFE08A;
  --ease:cubic-bezier(.2,.8,.2,1);
  --line:#D6E1EC;
  --cream:#FFFDF8;
  --serif:"PingFang SC",-apple-system,sans-serif;
  --sans:"PingFang SC",-apple-system,sans-serif;
  --mono:"Avenir Next",-apple-system,sans-serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:2.8vmin/1.8 var(--sans);
  min-height:100dvh;
}
button,input,summary {
  font:inherit;
  color:inherit;
}
button,summary {
  cursor:pointer;
}
button {
  border:0;
  padding:1.6vmin 2.5vmin;
  min-width:max(5vmin,44px);
  min-height:max(7vmin,44px);
  font-size:2.8vmin;
  border-radius:2.8vmin;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
button:disabled {
  opacity:.3;
  cursor:default;
}
button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:3px;
}
.primary {
  background:var(--peach);
  color:var(--ink);
  box-shadow:0 .7vmin 0 #DF927E;
}
.secondary {
  background:var(--mint);
  box-shadow:0 .7vmin 0 #7DB9A5;
}
button:active {
  transform:translateY(.6vmin) scale(.98);
  box-shadow:none;
}
.quiet {
  background:transparent;
}
.muted,.eyebrow {
  color:var(--muted);
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:600;
  line-height:1.4;
  margin:0 0 2vmin;
}
h1 {
  font-size:10.7vmin;
  max-width:4.5em;
  letter-spacing:.1em;
}
h2 {
  font-size:6vmin;
}
h3 {
  font-size:3.5vmin;
}
p {
  margin:1.7vmin 0;
}
small,.eyebrow {
  font-size:2.2vmin;
}
input:not([type=range]) {
  width:100%;
  padding:1.6vmin;
  background:var(--paper);
  border:1px solid var(--line);
  min-height:44px;
}
input[type=range] {
  accent-color:var(--ink);
  min-height:44px;
  max-width:24vmin;
  vertical-align:middle;
}
[hidden] {
  display:none!important;
}

/* 页眉与章节进度 */
.head {
  margin:0 5vmin;
  min-height:11vmin;
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid var(--line);
  display:flex;
  gap:2vmin;
  align-items:center;
  justify-content:space-between;
}
.brand {
  font:2.7vmin var(--serif);
  letter-spacing:.12em;
  padding-left:0;
  white-space:nowrap;
  touch-action:none;
  user-select:none;
}
#chapter-head {
  font-size:2.2vmin;
}
#steps {
  display:flex;
  gap:.5vmin;
}
#steps button {
  padding:.7vmin;
  min-width:max(3.5vmin,44px);
  background:transparent;
}
#steps button:after {
  content:"";
  display:block;
  width:1.4vmin;
  height:1.4vmin;
  margin:auto;
  border-radius:50%;
  background:var(--mint);
  opacity:.3;
}
#steps button.done:after,#steps button.current:after {
  opacity:1;
}
#steps button.current:after {
  background:var(--peach);
  box-shadow:0 0 0 .5vmin #FFB59E33;
}
.screen {
  display:none;
  position:relative;
  min-height:89dvh;
  padding:5vmin 7vmin 7vmin;
}
.screen.on {
  display:block;
  animation:screen-in .28s var(--ease) both;
}

/* 封面 */
.cover-copy {
  position:relative;
  z-index:2;
  width:48%;
  padding:4vmin 0;
}
.cover-copy button {
  margin-top:3vmin;
}
#cover-footer {
  font-size:2.2vmin;
  margin-top:5vmin;
}
.cover-art {
  position:absolute;
  width:73vmin;
  height:70vmin;
  right:2vmin;
  top:3vmin;
}
.envelope {
  position:relative;
  width:52vmin;
  height:34vmin;
  background:var(--cream);
  box-shadow:0 2.4vmin 4vmin #0002;
}
.envelope:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(146deg,transparent 49.7%,#0002 50%,transparent 50.4%),linear-gradient(34deg,transparent 49.7%,#0002 50%,transparent 50.4%);
}
.envelope:after {
  content:"";
  position:absolute;
  inset:0;
  background:#DCEBE7;
  clip-path:polygon(0 0,100% 0,50% 57%);
}
/* 默契锁与纸张 */
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vmin;
  align-items:center;
  min-height:62vmin;
}
.paper {
  background:var(--cream);
  border-radius:4vmin;
  padding:4vmin 5vmin;
  box-shadow:0 1.5vmin 3vmin #2F3A5609;
}
.lock-card {
  margin-top:4vmin;
  background:var(--yellow);
  border-radius:3vmin;
  width:25vmin;
  padding:1vmin 4vmin;
  font:6vmin var(--serif);
  color:var(--ink);
  transform:rotate(-4deg);
}
#lock-feedback {
  min-height:8vmin;
}

/* 拆信与原话卡 */
.landed {
  margin:10vmin auto 4vmin;
  animation:land .6s ease-out;
}
.seal-hint {
  text-align:center;
  margin:0 auto 6vmin;
}
.quote-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6vmin;
  text-align:left;
  width:min(92vmin,100%);
  min-height:44vmin;
  margin:5vmin auto;
  padding:6vmin;
  justify-content:center;
  background:var(--cream);
  border-radius:4vmin;
  box-shadow:0 2vmin 4vmin #0001;
}
#quote-text {
  font:5.2vmin/1.8 var(--serif);
}
time {
  font-family:var(--mono);
}
.letter-layout {
  display:grid;
  grid-template-columns:72vmin minmax(0,1fr);
  gap:6vmin;
}
.letter-paper {
  min-height:62vmin;
  font:2.8vmin/2 var(--serif);

}
.signature {
  text-align:right;
}
.clue {
  border-top:1px solid var(--line);
  margin-top:3vmin;
  padding-top:1vmin;
}
.clue small {
  font-family:var(--sans);
  color:var(--ink);
}
.mini-envelope {
  width:26vmin;
  height:17vmin;
  margin:5vmin 0;
}

/* 心跳雷达 */
#heart-body {
  transform-box:fill-box;
  transform-origin:center;
}
#heart-body.pulse {
  animation:heartbeat .25s ease-out;
}
.range {
  font:7vmin/1.5 var(--mono);
  color:var(--ink);
  margin:3vmin 0;
}
#bands {
  display:flex;
  gap:3vmin;
}
#bands .active {
  color:var(--ink);
  background:var(--mint);
}
#hud-hint {
  min-height:6vmin;
}
.bottom-actions {
  display:flex;
  justify-content:space-between;
  gap:2vmin;
  margin-top:2vmin;
}

/* 照片复刻 */
.capture-heading h2 {
  font-size:6vmin;
  margin-bottom:0;
}
.capture-heading p {
  font-size:2.2vmin;
  margin:0;
}
.viewfinder {
  height:43vmin;
  position:relative;
  margin:2vmin auto;
  width:100%;
  background:var(--ink);
  border-radius:4vmin;
  border:1vmin solid var(--cream);
  overflow:hidden;
}
.viewfinder video,#old-photo {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
}
.viewfinder video.mirror {
  transform:scaleX(-1);
}
#old-photo {
  opacity:.5;
  pointer-events:none;
}
#countdown {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:white;
  font:12vmin var(--mono);
  pointer-events:none;
}
#camera-error {
  position:absolute;
  inset:0;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2vmin;
  padding:3vmin;
}
#camera-error p {
  width:100%;
  text-align:center;
}
.capture-options {
  display:flex;
  align-items:center;
  gap:2vmin;
  justify-content:space-between;
}
#overlay-controls {
  display:flex;
  align-items:center;
}
#capture-back {
  position:absolute;
  bottom:4vmin;
  left:6vmin;
}
.shutter {
  position:fixed;
  bottom:max(3.5vmin,env(safe-area-inset-bottom));
  left:50vw;
  transform:translateX(-50%);
  width:9vmin;
  height:9vmin;
  min-width:72px;
  min-height:72px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:transparent;
  padding:0;
}
.shutter:after {
  content:"";
  position:absolute;
  inset:.8vmin;
  background:var(--peach);
  border-radius:50%;
}
#s-capture {
  padding-bottom:17vmin;
}

/* 邮戳与收集 */
.stamp {
  aspect-ratio:1;
  width:11vmin;
  flex-shrink:0;
  border:0;
  background:var(--cream);
  border-radius:3vmin;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  position:relative;
  gap:.5vmin;
  text-align:center;
}
.stamp strong {
  font:3.5vmin var(--serif);
}
.stamp small {
  font-size:2.2vmin;
  max-width:85%;
}
.stamp.empty {
  opacity:.25;
}
.stamp.hero {
  width:25vmin;
  animation:press .6s ease-out;
  background:var(--cream);
  justify-self:center;
}
.hero strong {
  font-size:8vmin;
}
.hero small {
  font-size:2.2vmin;
}
.stamp-row {
  display:flex;
  gap:2vmin;
  justify-content:center;
  flex-wrap:wrap;
}
.stamp-layout {
  min-height:54vmin;
}

/* 终章长图 */
#s-finale {
  text-align:center;
}
.finale-head h2 {
  font-size:6vmin;
}
.album {
  width:100%;
  margin:3vmin auto;
}
.album img {
  display:block;
  width:100%;
  height:auto;
  border:1vmin solid var(--cream);
  object-fit:contain;
  background:var(--cream);
}
.album figcaption {
  font-size:2.2vmin;
}
#album-hint {
  margin-top:3vmin;
}

/* 兑换券 */
.reward-card {
  position:relative;
  background:var(--paper);
  border:0;
  border-radius:4vmin;
  padding:2vmin 3vmin;
  margin:2vmin 0;
  width:100%;
}
.reward-card h3 {
  font-size:3.2vmin;
  margin:0;
}
.reward-card p {
  margin:1vmin 0;
}
.reward-used {
  position:absolute;
  right:2vmin;
  bottom:3vmin;
  border:.4vmin solid var(--ink);
  color:var(--ink);
  padding:.5vmin 1.5vmin;
  transform:rotate(-16deg);
  font:4vmin var(--serif);
}
.reward-card.redeemed {
  padding-bottom:7vmin;
}

/* 口令与提示 */
dialog {
  border-radius:4vmin;
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  padding:5vmin;
  max-width:90vw;
  width:55vmin;
}
dialog::backdrop {
  background:var(--ink)77;
}
dialog h2 {
  font-size:6vmin;
}
#toast {
  border-radius:3vmin;
  position:fixed;
  bottom:3vmin;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  background:var(--ink);
  color:var(--cream);
  padding:1.5vmin 3vmin;
  max-width:85vw;
}

/* 邮差手册 */
.manual {
  font-size:max(4vmin,16px);
}
.manual .head {
  margin:0 6vmin;
  min-height:22vmin;
}
.manual .brand {
  font-size:5vmin;
}
.manual main {
  padding:6vmin;
}
.manual h2 {
  font-size:8vmin;
}
.manual small {
  font-size:3.6vmin;
}
.manual .paper {
  padding:5vmin;
  margin:5vmin 0;
}
.manual button,.manual summary {
  min-height:44px;
  font-size:inherit;
}
.manual .manual-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.manual details {
  border-top:1px solid var(--line);
  margin-top:6vmin;
}
.manual summary {
  padding:3vmin 0;
}
.manual code {
  font-family:var(--mono);
  font-size:6vmin;
}
.manual .clue-key {
  color:var(--ink);
  font:6vmin/1.8 var(--serif);
}

/* 动效 */
@keyframes land {
  from {
    transform:translateY(-12vmin) rotate(-8deg);
    opacity:0;
  }
  to {
    transform:none;
    opacity:1;
  }
}
@keyframes press {
  from {
    transform:scale(1.6) rotate(-22deg);
    opacity:0;
  }
  to {
    transform:scale(1);
    opacity:1;
  }
}
@keyframes heartbeat {
  0%,100% {
    transform:scale(1);
  }
  20% {
    transform:scale(1.12);
  }
  45% {
    transform:scale(1);
  }
  70% {
    transform:scale(1.08);
  }
}

/* 竖屏适配 */
@media(orientation:portrait) {
  body {
      font-size:2.8vmin;
  }
  .head {
    flex-wrap:wrap;
    gap:0;
    padding:2vmin 0;
  }
  .brand {
    font-size:3.3vmin;
  }
  #chapter-head {
    font-size:2.2vmin;
  }
  #steps {
    margin-left:auto;
  }
  #steps button {
    min-width:44px;
  }
  .screen {
    padding:5vmin;
    min-height:90dvh;
  }
  .cover-copy {
    width:100%;
    padding:3vmin 0;
  }
  h1 {
    font-size:10vmin;
  }
  .cover-art {
    position:relative;
    top:0;
    right:auto;
    margin:4vmin auto 12vmin;
  }
  .cover-copy p {
    margin:2vmin 0;
  }
  .cover-copy button {
    margin:1vmin 0;
  }
  #cover-footer {
    font-size:2.2vmin;
    margin-top:2vmin;
  }
  .split {
    grid-template-columns:1fr;
    gap:5vmin;
    min-height:auto;
  }
  .lock-card {
    display:none;
  }
  .paper {
    padding:4vmin;
  }
  #s-lock .split {
    padding-top:5vmin;
  }
  #lock-feedback {
    min-height:6vmin;
  }
  .letter-layout {
    grid-template-columns:1fr;
    gap:4vmin;
  }
  .letter-paper {
    font-size:3.2vmin;
    min-height:0;
  }
  .letter-layout aside .eyebrow,.mini-envelope {
    display:none;
  }
  .letter-layout aside h2 {
    font-size:6vmin;
  }
  .range {
    font-size:7vmin;
    margin:2vmin;
  }
  #bands {
    justify-content:center;
  }
  #hud-hint {
    min-height:4vmin;
  }
  .bottom-actions {
    flex-wrap:wrap;
    margin-top:5vmin;
  }
  .viewfinder {
    height:57vmin;
    margin-top:5vmin;
  }
  .capture-options {
    flex-wrap:wrap;
  }
  #overlay-controls {
    flex-wrap:wrap;
  }
  #s-capture {
    min-height:90dvh;
  }
  .shutter {
    bottom:4vmin;
  }
  .stamp-layout {
    grid-template-columns:minmax(0,1fr);
    min-height:58vmin;
  }
  .stamp-layout .hero {
    grid-row:1;
    margin:2vmin auto;
  }
  .reward-card {
    max-width:100%;
  }
  .stamp-row {
    gap:1.4vmin;
  }
  .stamp {
    width:12vmin;
  }
  .stamp small {
    font-size:2.2vmin;
  }
  .stamp strong {
    font-size:4vmin;
  }
  .hero strong {
    font-size:8vmin;
  }
  .hero small {
    font-size:2.2vmin;
  }
  .album {
    width:100%;
  }
  small,.eyebrow {
    font-size:2.2vmin;
  }
  dialog {
    width:80vmin;
  }
  .manual {
    font-size:16px;
  }
  .manual .head {
    flex-wrap:nowrap;
  }
  .manual .screen {
    min-height:0;
  }
}

/* 小兔与小猪：小路、人物与贴纸 */
.character {
  display:block;
  object-fit:contain;
  pointer-events:none;
}
.journey {
  width:100%;
  height:100%;
}
.journey text {
  fill:var(--ink);
  font:600 20px var(--sans);
}
#cover-character {
  position:absolute;
  width:29%;
  height:34%;
  left:0;
  bottom:4%;
}
#postcard-text {
  position:absolute;
  right:0;
  bottom:-3vmin;
  color:var(--muted);
  font-size:2.2vmin;
}
.envelope {
  border-radius:3vmin;
}
.seal-button {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  background:var(--peach);
  box-shadow:0 .6vmin 0 #DF927E;
  border-radius:2vmin;
  font-size:3.5vmin;
}
.seal-button:active {
  transform:translate(-50%,-45%) scale(.98);
}
.letter-avatar {
  position:absolute;
  width:17vmin;
  height:17vmin;
  right:-7vmin;
  top:-5vmin;
  border-radius:50%;
  background:var(--paper);
  object-fit:cover;
  object-position:center top;
  z-index:2;
}
.quote-avatar {
  position:absolute;
  width:18vmin;
  height:18vmin;
  right:3vmin;
  bottom:2vmin;
  object-fit:cover;
  object-position:center top;
  border-radius:50%;
}
#quote-text {
  padding-right:13vmin;
}
#s-letter,#s-stamp {
  background:var(--cream);
}
#s-letter .paper {
  background:#F1F6F4;
}
#lock-form {
  position:relative;
}
.wrong-sticker {
  position:absolute;
  width:14vmin;
  height:14vmin;
  object-fit:contain;
  right:-2vmin;
  bottom:-3vmin;
  border-radius:3vmin;
  pointer-events:none;
}
.wiggle {
  animation:wiggle .6s var(--ease) both;
}
#waiting-sticker {
  position:absolute;
  right:-1vmin;
  bottom:-1vmin;
  width:14vmin;
  height:14vmin;
  object-fit:contain;
  border-radius:3vmin;
  z-index:2;
}
#bands {
  gap:1vmin;
}
#bands span {
  border-radius:2vmin;
  padding:.5vmin 2vmin;
  background:#FFFDF880;
}
#photo-character {
  position:absolute;
  right:1vmin;
  bottom:1vmin;
  width:17vmin;
  height:17vmin;
  z-index:4;
}
#camera-error {
  z-index:3;
}
.shutter:active {
  transform:translateX(-50%) scale(.96);
}
.collect-art {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2vmin;
}
#jump-character {
  width:36vmin;
  height:29vmin;
}
#s-stamp.on #jump-character {
  animation:jump .85s var(--ease) both;
}
.chapter-sticker {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:2.5vmin;
}
.stamp:has(.chapter-sticker) {
  height:15vmin;
  aspect-ratio:auto;
  padding:1vmin;
}
.stamp:has(.chapter-sticker) strong {
  display:none;
}
.stamp .chapter-sticker {
  min-height:0;
  flex:1;
}
.stamp.hero:has(.chapter-sticker) {
  height:25vmin;
}
.stamp.hero {
  background:var(--paper);
}
.hero .chapter-sticker {
  animation:sticker-drop .65s var(--ease) both;
}
.new-sticker .chapter-sticker {
  animation:sticker-drop .65s .3s var(--ease) both;
}
#gift-character {
  float:right;
  width:13vmin;
  height:13vmin;
  margin-top:-10vmin;
}
#handoff {
  padding-right:13vmin;
}
.coupon-sticker {
  float:right;
  width:11vmin;
  height:11vmin;
  object-fit:contain;
  margin-left:2vmin;
  border-radius:2vmin;
}
.finale-art {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2vmin;
  margin-bottom:3vmin;
}
.finale-art .character {
  width:30vmin;
  height:23vmin;
}
.finale-sticker {
  width:16vmin;
  height:16vmin;
  object-fit:contain;
  border-radius:3vmin;
}
.manual-avatar {
  width:11vmin;
  height:11vmin;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  background:var(--cream);
}
.manual .brand {
  display:flex;
  align-items:center;
  gap:2vmin;
}
@keyframes screen-in {
  from {
    opacity:0;
    transform:translateY(1.5vmin);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes jump {
  0%,100% {
    transform:translateY(0);
  }
  40% {
    transform:translateY(-4vmin) rotate(-4deg);
  }
  70% {
    transform:translateY(.5vmin);
  }
}
@keyframes sticker-drop {
  from {
    opacity:0;
    transform:translateY(-7vmin) rotate(-20deg) scale(1.2);
  }
  70% {
    opacity:1;
    transform:translateY(.5vmin) rotate(5deg) scale(.95);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes wiggle {
  0%,100% {
    transform:rotate(0);
  }
  25%,75% {
    transform:rotate(-9deg);
  }
  50% {
    transform:rotate(9deg);
  }
}
@media(orientation:portrait) {
  .cover-art {
    width:74vmin;
    height:70vmin;
  }
  .stamp-layout .collect-art {
    grid-row:1;
  }
  .letter-avatar {
    right:-4vmin;
  }
}

/* 减少动态效果 */
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* 地图与心跳：地图占主体，卡片保留走路时的触控空间。 */
#s-radar {
  padding:0;
  height:89dvh;
  min-height:620px;
  overflow:hidden;
}
#map-mount {
  position:absolute;
  inset:0;
  background:#FFFDF8;
  touch-action:none;
}
.map-svg {
  display:block;
  width:100%;
  height:100%;
}
.map-clue {
  position:absolute;
  top:16px;
  left:16px;
  width:min(540px,calc(100% - 32px));
  max-height:42%;
  overflow:auto;
  padding:16px 22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--cream);
  font-size:clamp(18px,2.8vmin,26px);
}
.map-clue p {
  margin:0 0 10px;
  font-size:1.2em;
  font-weight:600;
}
#map-hints {
  padding-left:1.5em;
  margin:0 0 8px;
}
#map-hints:empty {
  display:none;
}
#hint-btn {
  font-size:inherit;
  padding:8px 14px;
}
#hint-btn:disabled {
  opacity:1;
  background:#E5E8EB;
  color:var(--muted);
  box-shadow:none;
}
.map-heart {
  position:absolute;
  bottom:104px;
  right:16px;
  width:310px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--cream);
  text-align:center;
}
#s-radar #heart-body {
  display:block;
  width:64px;
  height:58px;
  margin:0 auto;
  transform-box:fill-box;
  transform-origin:center;
}
.distance-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#radar-character {
  width:88px;
  height:88px;
  object-fit:contain;
}
#s-radar .range {
  font-size:36px;
  font-weight:600;
  line-height:1.2;
  margin:6px 0;
}
#s-radar #bands {
  justify-content:center;
  gap:24px;
  font-size:18px;
}
#hud-hint {
  font-size:17px;
  margin:4px 0;
}
#s-radar #waiting-sticker {
  width:34px;
  height:34px;
  right:6px;
  top:6px;
  bottom:auto;
}
#sound-btn {
  font-size:18px;
  min-height:44px;
  padding:4px 10px;
}
#s-radar .map-cta {
  position:absolute;
  left:16px;
  right:16px;
  bottom:max(20px,env(safe-area-inset-bottom));
  margin:0;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.map-cta button {
  font-size:clamp(15px,2.6vmin,22px);
  background-color:var(--cream);
}
.map-cta .primary {
  background-color:var(--peach);
}
.recenter {
  position:absolute;
  left:16px;
  bottom:110px;
  background:var(--cream);
  font-size:15px;
}
@media (orientation:portrait) {
  .map-heart {
    width:270px;
  }
  .map-clue {
    max-height:35%;
  }
}