/* Tile Temple (tiles.html, docs/113): what it has that Cara Runs (css/run.css) does not. */

#tt-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
body.run-body:has(#tt-canvas) { background: #f2dcc0; }

/* the level: its number in a stone roundel, its name beside it */
.tthud__lvl { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; max-width: 36vw; pointer-events: none; }
.tthud__lvl b { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 1.3rem/1 var(--font-display); color: #3a2a10; background: radial-gradient(circle at 38% 32%, #fff8e6, #ecd3a0 60%, #b8925a); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.tthud__lvl span { font: 800 1.05rem/1.15 var(--font-body); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.25); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the moves, and the stars they are worth so far */
.tthud__moves { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 6px 16px 7px; border-radius: 16px; background: rgba(20, 16, 10, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.tthud__count { font: 700 0.9rem/1 var(--font-body); color: rgba(255, 255, 255, 0.85); }
.tthud__count b { font: 900 1.6rem/1 var(--font-display); color: #fff; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tthud__stars { font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
.tthud__stars i, .tlv__btn i { font-style: normal; color: rgba(255, 255, 255, 0.28); }
.tthud__stars i.is-on, .tlv__btn i.is-on { color: #ffd24a; text-shadow: 0 0 8px rgba(255, 200, 60, 0.7); }
.tthud__moves small { font: 600 0.72rem/1 var(--font-body); color: rgba(255, 255, 255, 0.72); }

/* the power-ups down the right, and starting again */
.tthud__powers { position: absolute; right: max(16px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; pointer-events: auto; }
.tpow { position: relative; width: 58px; height: 58px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.35); background: linear-gradient(160deg, rgba(40, 30, 16, 0.72), rgba(20, 14, 8, 0.78)); color: #fff; font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tpow:hover, .tpow:focus-visible { border-color: #ffd24a; outline: none; transform: scale(1.05); }
.tpow:active { transform: scale(0.95); }
.tpow b { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; font: 800 0.78rem/1 var(--font-body); background: #ffd24a; color: #3a2400; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.tpow.is-buy b { background: #2fa866; color: #fff; font-size: 0.68rem; }
.tpow--plain { font-size: 1.6rem; }

/* walk: big, bottom right; it glows when the way is open */
.twalk { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px)); width: 86px; height: 86px; border-radius: 50%; pointer-events: auto; border: 2px solid rgba(255, 255, 255, 0.55); background: radial-gradient(circle at 40% 30%, rgba(140, 130, 110, 0.95), rgba(70, 60, 48, 0.95)); color: #fff; font: 900 1.9rem/1 var(--font-display); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: background 0.3s; }
.twalk small { font: 800 0.74rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.twalk.is-ready { background: radial-gradient(circle at 40% 30%, #8dffc4, #1f9a5a 70%); animation: twalk 0.9s ease-in-out infinite alternate; }
.twalk:disabled { opacity: 0.55; cursor: default; }
@keyframes twalk { to { box-shadow: 0 0 0 10px rgba(80, 240, 150, 0.25), 0 6px 18px rgba(0, 0, 0, 0.35); transform: scale(1.06); } }
#tt-hint { bottom: max(120px, calc(env(safe-area-inset-bottom) + 112px)); }

.rhud__banner.is-place { background: rgba(30, 22, 10, 0.68); border: 1px solid rgba(255, 220, 160, 0.45); font-size: clamp(1.1rem, 4vw, 1.7rem); }
.rhud__banner.is-hint { background: linear-gradient(90deg, rgba(200, 140, 20, 0.85), rgba(255, 210, 90, 0.85)); color: #3a2400; text-shadow: none; font-size: clamp(1rem, 3.6vw, 1.5rem); }
.rhud__banner.is-warn { background: rgba(30, 22, 10, 0.72); font-size: clamp(0.95rem, 3.4vw, 1.4rem); }
.rhud__banner { white-space: normal; max-width: min(90vw, 620px); text-align: center; }

/* the title: the temple shows behind a lighter veil, the card low on a tall screen */
.tscreen--title { background: radial-gradient(ellipse at center, rgba(20, 14, 8, 0.12), rgba(20, 14, 8, 0.55)); }
.gbtn.gbtn--call.tcall { min-height: 58px; }
.gbtn.gbtn--call.tcall .gbtn__label { font-size: 1.12rem; }
.gbtn.tcall .gbtn__label::before { content: '📞 '; }

/* the end card's stars */
.tstars { display: flex; justify-content: center; gap: 8px; margin: 2px 0 8px; }
.tstar { font-size: clamp(2.6rem, 10vw, 3.6rem); line-height: 1; color: rgba(255, 255, 255, 0.18); }
.tstar.is-on { color: #ffd24a; text-shadow: 0 0 18px rgba(255, 200, 60, 0.8), 0 3px 0 #b07a10; animation: tstar 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes tstar { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
#tt-done .rstats { grid-template-columns: repeat(4, 1fr); }

/* the temples: five places of six */
.tlv { display: grid; gap: 12px; margin: 6px 0 14px; max-height: 62vh; overflow-y: auto; text-align: left; }
.tlv__place h3 { margin: 0 0 6px; font: 800 0.95rem/1.2 var(--font-body); color: #ffe2b8; display: flex; justify-content: space-between; }
.tlv__place h3 small { font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.tlv__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tlv__btn { aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25); color: #2a1c0c; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px; padding: 2px; font-family: var(--font-body); }
.tlv__btn b { font: 900 1.2rem/1 var(--font-display); }
.tlv__btn span { font-size: 0.68rem; letter-spacing: 1px; }
.tlv__btn i { color: rgba(0, 0, 0, 0.22); }
.tlv__btn:hover, .tlv__btn:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; }
.tlv__btn.is-locked { opacity: 0.45; cursor: default; }
.tlv--egypt { background: linear-gradient(160deg, #f6e2b4, #d9b46e); }
.tlv--maya { background: linear-gradient(160deg, #d6e4c0, #93a879); }
.tlv--khmer { background: linear-gradient(160deg, #f4d2b8, #c39a7a); }
.tlv--greek { background: linear-gradient(160deg, #ffffff, #c6d8ec); }
.tlv--garden { background: linear-gradient(160deg, #ffe0ea, #e8a0b4); }

/* a narrow screen: the moves under the buttons on the right, smaller power-ups */
@media (max-width: 600px) {
  .tthud__lvl { max-width: 40vw; gap: 8px; }
  .tthud__lvl b { width: 38px; height: 38px; font-size: 1.1rem; }
  .tthud__lvl span { font-size: 0.88rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tthud__moves { left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; top: calc(max(14px, env(safe-area-inset-top)) + 46px); padding: 4px 12px 5px; }
  .tthud__count b { font-size: 1.3rem; }
  .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; }
  /* (in a row above Walk, clear of the call's card in the bottom-left corner) */
  .tthud__powers { top: auto; transform: none; bottom: calc(max(18px, calc(env(safe-area-inset-bottom) + 14px)) + 112px); right: max(16px, env(safe-area-inset-right)); display: flex; gap: 8px; }
  .tpow { width: 48px; height: 48px; border-radius: 14px; font-size: 1.25rem; }
  .twalk { width: 78px; height: 78px; }
  #tt-hint { bottom: calc(max(18px, calc(env(safe-area-inset-bottom) + 14px)) + 172px); }
  #tt-done .rstats { grid-template-columns: repeat(2, 1fr); }
  .tlv__row { gap: 4px; }
}
@media (max-width: 480px) { .tthud__lvl span { display: none; } }
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } .tpow { width: 44px; height: 44px; } }
/* a short, wide screen (a phone on its side): the power-ups smaller, down the right from under the buttons */
@media (max-height: 460px) and (min-width: 601px) {
  .tthud__powers { top: calc(max(14px, env(safe-area-inset-top)) + 52px); transform: none; gap: 6px; }
  .tpow { width: 46px; height: 46px; border-radius: 14px; font-size: 1.2rem; }
  .twalk { width: 76px; height: 76px; bottom: max(12px, env(safe-area-inset-bottom)); }
  #tt-hint { bottom: 18px; max-width: 46vw; }
}

/* a short screen (a phone on its side): the cards tighter, the first two buttons side by side, so Play (or Next) and
   Call Cara are both on the screen without scrolling */
@media (max-height: 460px) {
  .rscreen { padding: 8px; }
  .rcard { padding: 12px 18px 12px; }
  .rcard__eyebrow, #tt-title .rcard__tag, #tt-done-why, #tt-done .rcard__small { display: none; }
  .rlogo { font-size: 2.1rem; }
  .rcard__head { font-size: 1.5rem; margin: 0; }
  .rtabs.rtabs--title { margin: 6px 0 6px; }
  .rbest { margin-top: 2px; }
  .ractions { margin-top: 8px; gap: 6px; grid-template-columns: 1fr 1fr; }
  .ractions > a, .ractions__row { grid-column: 1 / -1; }
  .gbtn.gbtn--tall, .gbtn.gbtn--call.tcall { min-height: 52px; }
  .tstars { margin: 0; } .tstar { font-size: 2rem; }
  #tt-done .rstats { margin: 6px 0 0; } #tt-done .rnew { margin: 4px 0 0; }
  #tt-pause .ractions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { .twalk.is-ready, .tstar.is-on { animation: none; } }

/* Stories, Game time (docs/116, game/stories/arcade-film.js): tiles.html?story= is a film of Cara solving it. The
   power-ups, the Walk button and the bank are Base's, not hers, so they are put away; the temple's own HUD stays. */
body.is-afilm .tthud__powers, body.is-afilm .twalk, body.is-afilm #tt-hud .rhud__tokens { display: none !important; }