/* Stack the Stones (stack.html, docs/105): what it has that Cara Runs (css/run.css) does not. */

#stk-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: pointer; }

/* the title and the end: lighter, and on a wide screen the card to the left, so the tower and the friends show */
.rscreen--clear { background: linear-gradient(90deg, rgba(6, 12, 20, 0.62), rgba(6, 12, 20, 0.12) 70%); }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .rscreen--clear { justify-items: start; padding-left: max(5vw, 32px); }
}

/* the score: one big number at the top, the build and the height under it, the streak under that */
.shud__score { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; justify-items: center; gap: 3px; pointer-events: none; max-width: 50vw; }
.shud__score b { font: 900 clamp(2.8rem, 9vw, 4.6rem)/1 var(--font-display); letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 26px rgba(0, 0, 0, 0.3); }
.shud__score b.is-pop { animation: spop 0.28s ease-out; }
.shud__score small { font: 700 0.92rem/1.1 var(--font-body); color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shud__streak { font: 900 normal 1rem/1 var(--font-body); padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, #ffd25a, #ff9a3a); color: #3a1c00; box-shadow: 0 0 18px rgba(255, 200, 80, 0.55); animation: spop 0.3s ease-out; }
@keyframes spop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* "Perfect!" springing up over the tower */
.spraise { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font: 900 clamp(1.8rem, 6vw, 2.8rem)/1 var(--font-display); letter-spacing: 0.06em; color: #fff7d6; text-shadow: 0 0 18px rgba(255, 210, 90, 0.9), 0 3px 8px rgba(0, 0, 0, 0.5); white-space: nowrap; pointer-events: none; animation: spraise 0.9s ease-out forwards; }
.spraise.is-grow { color: #c8ffe4; text-shadow: 0 0 18px rgba(80, 240, 160, 0.9), 0 3px 8px rgba(0, 0, 0, 0.5); }
.spraise.is-thin { color: #ffe0c8; font-size: clamp(1.2rem, 4.4vw, 1.8rem); text-shadow: 0 0 12px rgba(255, 150, 90, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5); }
@keyframes spraise { 0% { transform: translateX(-50%) scale(0.5); 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(-30px); opacity: 0; } }

/* a white flash over the screen on the big moments */
.sflash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 250, 230, 0.55), rgba(255, 240, 200, 0) 70%); opacity: 0; z-index: 1; }
.sflash.is-on { animation: sflash 0.45s ease-out; }
.sflash.is-gold { background: radial-gradient(ellipse at center, rgba(255, 220, 120, 0.6), rgba(255, 200, 80, 0) 70%); }
@keyframes sflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* the tray: the power-ups held, down the right-hand side (clear of the call card in the bottom-left) */
.stray { position: absolute; right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; pointer-events: auto; }
.stray__btn { position: relative; width: 60px; height: 60px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(10, 18, 26, 0.66); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 0.12s ease, opacity 0.2s ease, border-color 0.2s ease; touch-action: none; }
.stray__icon { font-size: 1.7rem; line-height: 1; }
.stray__btn b { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #2fc077; color: #04210f; font: 900 0.8rem/22px var(--font-body); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.stray__btn kbd { position: absolute; left: 4px; bottom: 3px; font-size: 0.62rem; padding: 0 3px; opacity: 0.75; }
.stray__btn:disabled { opacity: 0.38; cursor: default; }
.stray__btn:disabled b { background: rgba(255, 255, 255, 0.25); color: #fff; }
.stray__btn:not(:disabled):hover, .stray__btn:not(:disabled):focus-visible { border-color: #ffd48f; transform: scale(1.06); outline: none; }
.stray__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); }
.stray__btn.is-suggest:not(:disabled) { animation: ssuggest 0.7s ease-in-out infinite alternate; }
.stray__btn.is-new { animation: snew 0.5s ease-out; }
@keyframes ssuggest { to { border-color: #ffd25a; box-shadow: 0 0 24px rgba(255, 210, 90, 0.75); transform: scale(1.08); } }
@keyframes snew { 0% { transform: scale(1.4); border-color: #fff; } }
body:not(.is-touch) .stray__btn kbd { display: block; }
body.is-touch .stray__btn kbd { display: none; }

.sskip { position: absolute; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px)); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(8, 14, 20, 0.55); font: 600 0.85rem/1.2 var(--font-body); color: rgba(255, 255, 255, 0.85); }

.rhud__banner.is-stage { background: rgba(10, 18, 26, 0.78); border: 1px solid rgba(255, 210, 150, 0.45); font-size: clamp(1.1rem, 4vw, 1.8rem); }
.rhud__banner.is-power { background: linear-gradient(90deg, rgba(31, 154, 90, 0.85), rgba(47, 192, 119, 0.85)); font-size: clamp(1rem, 3.6vw, 1.5rem); }

/* Call Cara: big and green on the title and end screens, a handset before the words */
.gbtn.gbtn--call.scall { min-height: 58px; }
.gbtn.gbtn--call.scall .gbtn__label { font-size: 1.12rem; }
.gbtn.scall .gbtn__label::before { content: '📞 '; }

#stk-over .rstats { grid-template-columns: repeat(5, 1fr); }
.rbest { flex-wrap: wrap; gap: 6px 18px; }

@media (max-width: 560px) {
  .shud__score { left: max(16px, env(safe-area-inset-left)); transform: none; justify-items: start; max-width: 44vw; }
  .shud__score b { font-size: clamp(2.3rem, 11vw, 3rem); }
  .shud__score small { font-size: 0.8rem; }
  .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; }
  .stray { gap: 8px; }
  .stray__btn { width: 52px; height: 52px; border-radius: 15px; }
  .stray__icon { font-size: 1.45rem; }
  #stk-over .rstats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 460px) {
  .stray { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: none; grid-auto-flow: column; }
  .stray__btn { width: 50px; height: 50px; }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
@media (max-width: 340px) { .shud__score small { display: none; } .rhud__right .rhud__btn { width: 30px; height: 30px; font-size: 0.85rem; } }
@media (prefers-reduced-motion: reduce) { .shud__score b.is-pop, .spraise, .stray__btn.is-suggest, .sflash.is-on { 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.scall { 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; }
}