/* Relic Match (match.html, docs/106): what it has that Cara Runs (css/run.css) does not. */

#rm-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

/* the title and the end of a dig: lighter, and on a wide screen the card to the left, so the board shows */
.mscreen--clear { background: linear-gradient(90deg, rgba(20, 14, 8, 0.66), rgba(20, 14, 8, 0.14) 72%); }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .mscreen--clear { justify-items: start; padding-left: max(5vw, 32px); } }

/* the top of the HUD: moves left, and the dig's goal (the sand left, the mosaic in miniature, the score towards stars) */
.mhud__top { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); display: flex; gap: 10px; align-items: stretch; pointer-events: none; max-width: calc(100vw - 260px); }
.mhud__moves { display: grid; place-items: center; min-width: 76px; padding: 6px 10px; border-radius: 16px; background: rgba(30, 20, 10, 0.72); border: 1px solid rgba(255, 210, 150, 0.35); }
.mhud__moves b { font: 900 2.4rem/1 var(--font-display); color: #fff3df; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.mhud__moves small { font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #ffd48f; }
.mhud__moves.is-low b { color: #ffb080; animation: mlow 0.6s ease-in-out infinite alternate; }
@keyframes mlow { to { transform: scale(1.12); color: #ff8a5a; } }
.mhud__goal { display: grid; gap: 4px; min-width: 190px; padding: 8px 12px; border-radius: 16px; background: rgba(30, 20, 10, 0.72); border: 1px solid rgba(255, 210, 150, 0.35); }
.mhud__dig { font: 700 0.78rem/1.1 var(--font-display); letter-spacing: 0.06em; color: #ffd48f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhud__sand { display: flex; align-items: center; gap: 8px; font: 700 0.95rem/1 var(--font-body); color: #fff; }
.mhud__sand img { width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.35); }
.mhud__sand b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mhud__bar { position: relative; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); margin: 4px 0 2px; }
.mhud__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffb15c, #ffd25a); transition: width 0.3s ease; }
.mhud__star { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1rem; line-height: 1; color: rgba(255, 255, 255, 0.35); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.mhud__star.is-on { color: #ffd25a; text-shadow: 0 0 8px rgba(255, 210, 90, 0.9); animation: spop 0.35s ease-out; }
.mhud__score { font: 800 0.9rem/1 var(--font-body); color: #ffe2b8; font-variant-numeric: tabular-nums; }
@keyframes spop { 0% { transform: translate(-50%, -50%) scale(1.8); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* the tools: along the bottom, middle (clear of the call card in the bottom-left) */
.mtools { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; }
.mtools__btn { position: relative; width: 66px; height: 70px; border-radius: 16px; border: 2px solid rgba(255, 220, 170, 0.35); background: rgba(30, 20, 10, 0.75); color: #fff; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 4px 2px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 0.12s ease, border-color 0.2s ease; }
.mtools__icon { font-size: 1.45rem; line-height: 1; }
.mtools__btn small { font: 700 0.68rem/1 var(--font-body); letter-spacing: 0.04em; color: #ffe2b8; }
.mtools__btn b { display: flex; align-items: center; gap: 3px; font: 800 0.72rem/1 var(--font-body); color: #9dffd0; }
.mtools__btn b .rhud__jade { width: 11px; height: 11px; box-shadow: 0 0 0 1px #e0b450; }
.mtools__btn:hover:not(:disabled), .mtools__btn:focus-visible { border-color: #ffd48f; transform: translateY(-2px); outline: none; }
.mtools__btn:disabled { opacity: 0.4; cursor: default; }
.mtools__btn.is-on { border-color: #9dffd0; box-shadow: 0 0 0 2px rgba(157, 255, 208, 0.4), 0 0 22px rgba(80, 230, 140, 0.55); }
.mtools__btn--hint b { color: #ffe2b8; }
.mtoolnote { position: absolute; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 82px); transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: rgba(8, 40, 24, 0.85); border: 1px solid rgba(157, 255, 208, 0.5); font: 700 0.95rem/1.2 var(--font-body); white-space: nowrap; }

/* praise over the board, and points floating up from the finds */
.mpraise { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); font: 900 clamp(1.8rem, 6.5vw, 3rem)/1 var(--font-display); letter-spacing: 0.06em; color: #fff7d6; text-shadow: 0 0 18px rgba(255, 190, 80, 0.95), 0 3px 8px rgba(0, 0, 0, 0.55); white-space: nowrap; pointer-events: none; animation: mpraise 1s ease-out forwards; z-index: 3; }
@keyframes mpraise { 0% { transform: translateX(-50%) scale(0.4); opacity: 0; } 15% { transform: translateX(-50%) scale(1.15); opacity: 1; } 30% { transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-34px); opacity: 0; } }
.mfloats { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.mfloat { position: absolute; transform: translate(-50%, -50%); font: 900 1.15rem/1 var(--font-body); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 200, 90, 0.7); animation: mfloat 0.9s ease-out forwards; white-space: nowrap; }
.mfloat.is-jade { color: #9dffd0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(80, 230, 140, 0.8); }
@keyframes mfloat { from { transform: translate(-50%, -30%); opacity: 1; } to { transform: translate(-50%, -160%); opacity: 0; } }
.rhud__banner.is-place { background: rgba(30, 20, 10, 0.8); border: 1px solid rgba(255, 210, 150, 0.45); font-size: clamp(1.1rem, 4vw, 1.7rem); }
.rhud__banner.is-good { background: linear-gradient(90deg, rgba(200, 120, 20, 0.85), rgba(255, 200, 80, 0.85)); color: #2a1600; text-shadow: none; }

/* Call Cara: big and green on the screens, a handset before the words */
.gbtn.gbtn--call.mcall-btn { min-height: 56px; }
.gbtn.gbtn--call.mcall-btn .gbtn__label { font-size: 1.08rem; }
.gbtn.mcall-btn .gbtn__label::before { content: '📞 '; }

/* the map */
.mmap { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.mmap__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mmap__head .rcard__head { margin: 0; }
.mmap__list { overflow-y: auto; min-height: 0; display: grid; gap: 12px; padding: 4px 2px 8px; margin-top: 10px; }
.mplace { border-radius: 16px; padding: 10px 12px 12px; background: linear-gradient(135deg, var(--pc, #3a2a18), rgba(20, 14, 8, 0.6)); border: 1px solid rgba(255, 220, 170, 0.18); }
.mplace.is-locked { filter: grayscale(0.7) brightness(0.75); }
.mplace__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font: 800 1.05rem/1.2 var(--font-display); letter-spacing: 0.04em; color: #fff3df; }
.mplace__head small { font: 600 0.8rem/1 var(--font-body); color: #ffd48f; letter-spacing: 0; }
.mplace__head em { margin-left: auto; font: 700 normal 0.82rem/1 var(--font-body); color: #ffd25a; }
.mplace__digs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mnode { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.25); color: #fff; cursor: pointer; font: 800 1.05rem/1 var(--font-body); }
.mnode img { width: 44px; height: 44px; border-radius: 8px; opacity: 0.95; }
.mnode small { font-size: 0.72rem; letter-spacing: 0.08em; color: #ffd25a; }
.mnode small i { font-style: normal; color: rgba(255, 255, 255, 0.25); }
.mnode small i.is-on { color: #ffd25a; }
.mnode:hover:not(:disabled), .mnode:focus-visible { border-color: #ffd48f; outline: none; transform: translateY(-1px); }
.mnode:disabled { cursor: default; opacity: 0.5; }
.mnode.is-next { border-color: #9dffd0; box-shadow: 0 0 0 2px rgba(157, 255, 208, 0.35), 0 0 18px rgba(80, 230, 140, 0.45); animation: mnext 1s ease-in-out infinite alternate; }
@keyframes mnext { to { box-shadow: 0 0 0 3px rgba(157, 255, 208, 0.55), 0 0 26px rgba(80, 230, 140, 0.7); } }
.mnode .mnode__veil { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #c8a878, #c8a878 4px, #b8986a 4px, #b8986a 8px); color: #5a3a1a; font-size: 1.2rem; }

/* a dig's card */
.mcard__row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 8px; }
.mcard__pic { position: relative; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255, 220, 170, 0.4); }
.mcard__pic img { width: 100%; height: 100%; display: block; }
.mcard__pic span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 2.4rem/1 var(--font-display); color: rgba(90, 58, 26, 0.75); background: repeating-linear-gradient(45deg, rgba(210, 180, 130, 0.92), rgba(210, 180, 130, 0.92) 6px, rgba(190, 158, 110, 0.92) 6px, rgba(190, 158, 110, 0.92) 12px); }
.mcard__pic span[hidden] { display: none; }
.mcard__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; text-align: left; }
.mcard__facts div { padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.mcard__facts dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.mcard__facts dd { margin: 2px 0 0; font: 800 1.05rem/1.1 var(--font-body); color: #fff3df; }
.mboost { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); font-size: 0.86rem; text-align: left; cursor: pointer; }
.mboost input { width: 18px; height: 18px; accent-color: #2fc077; flex: none; }
.mboost.is-poor { opacity: 0.5; }
.mboost .rhud__jade { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }

/* the stars on the end card */
.mstars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.mstars i { font-style: normal; font-size: 2.6rem; line-height: 1; color: rgba(255, 255, 255, 0.18); }
.mstars i.is-on { color: #ffd25a; text-shadow: 0 0 18px rgba(255, 210, 90, 0.85); animation: mstar 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes mstar { from { transform: scale(0.2) rotate(-40deg); } }

/* a phone held upright: the goal shrinks, the tools a touch smaller */
@media (max-width: 560px) {
  .mhud__top { max-width: calc(100vw - 28px); top: calc(max(12px, env(safe-area-inset-top)) + 46px); }
  .mhud__moves { min-width: 62px; padding: 4px 8px; }
  .mhud__moves b { font-size: 2rem; }
  .mhud__goal { min-width: 0; flex: 1; padding: 6px 10px; }
  .rhud__right { gap: 6px; }
  .rhud__right .rhud__btn { width: 36px; height: 36px; font-size: 0.95rem; }
  .rhud__right .rhud__tokens { padding: 5px 10px 5px 6px; font-size: 1.05rem; }
  .mtools { left: auto; right: max(10px, env(safe-area-inset-right)); transform: none; gap: 6px; }
  .mtools__btn { width: 54px; height: 62px; }
  .mtoolnote { left: auto; right: 12px; transform: none; white-space: normal; max-width: 70vw; }
  .mplace__digs { gap: 5px; }
  .mnode img, .mnode .mnode__veil { width: 38px; height: 38px; }
  .mcard__pic { width: 96px; height: 96px; }
}
/* a phone on its side: the goal and the moves down the left, the tools down the right */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .mhud__top { flex-direction: column; top: max(10px, env(safe-area-inset-top)); max-width: 200px; }
  .mhud__goal { min-width: 0; }
  .mtools { left: auto; right: max(10px, env(safe-area-inset-right)); top: 56px; bottom: auto; transform: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mtools__btn { width: 54px; height: 56px; }
  .mtoolnote { bottom: 12px; }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .mpraise, .mfloat, .mnode.is-next, .mstars i.is-on, .mhud__moves.is-low b { animation: none; } }

/* a short screen (a phone on its side): the title card tighter, so Play and Call Cara show without scrolling */
@media (max-height: 500px) {
  .rscreen { padding: 8px; }
  .rcard { padding: 12px 16px 12px; }
  .rcard__eyebrow, .rcard__tag { display: none; }
  .rlogo { font-size: clamp(1.6rem, 6vh, 2.2rem); }
  .rtabs { margin: 6px 0 4px; }
  .rbest { margin-top: 4px; font-size: 0.8rem; }
  .ractions { gap: 6px; margin-top: 8px; }
  .gbtn--tall { min-height: 46px; }
  .gbtn.gbtn--call.mcall-btn { min-height: 46px; }
  .rcard__head { font-size: 1.6rem; margin-bottom: 4px; }
  .rstats { margin-top: 8px; }
  .rstats div { padding: 6px 4px; }
  .rcard__text { margin-top: 8px; font-size: 0.88rem; }
}

/* Stories, Game time (docs/116, game/stories/arcade-film.js): match.html?story= is a film of Cara digging. The tools
   and the bank are Base's, not hers, so they are put away; the dig's own HUD (moves, sand, score) stays. */
body.is-afilm .mtools, body.is-afilm .mtoolnote, body.is-afilm #rm-hud .rhud__tokens { display: none !important; }