/* ===== First launch: guided first match ===== */

/* one-time hint target (ui/hints.js): a pulsing outline */
.hint-target { outline: .22em solid var(--yellow); outline-offset: .12em; animation: coachGlow 1.3s ease-in-out infinite; z-index: 3; }
@keyframes coachGlow { 50% { border-color: #fff3b0; filter: brightness(1.2); } }

/* ---- Rivet, the scrap-drone sidekick (ui/mascot.js): her canvas + a speech bubble beside her; never takes a tap ---- */
.mascot-layer { position: absolute; inset: 0; z-index: 55; pointer-events: none; visibility: hidden; }
.mascot-layer.on { visibility: visible; }
.mascot-layer.paused { z-index: 45; }              /* under the pause menu (#overlays is z 50), frozen */
.mascot-layer.paused * { animation-play-state: paused !important; }
.mascot-layer.hidden { visibility: hidden; }
.mascot { --ms: 72px; position: absolute; left: 12px; bottom: 12px; width: var(--ms); height: var(--ms); transform-origin: 50% 85%; }
/* entrance: she flies in from below-left with a bounce; every further line: a little hop + pop */
.mascot.in { animation: rvIn .55s cubic-bezier(.3, 1.45, .55, 1) both; }
.mascot.hop .mascot-art { animation: rvHop .42s cubic-bezier(.3, 1.6, .5, 1) both; }
.mascot.leaving { animation: rvOut .3s ease-in both; }
@keyframes rvIn { 0% { transform: translate(-45%, 55%) scale(.35) rotate(-14deg); opacity: 0; } 55% { transform: translate(3%, -9%) scale(1.12) rotate(4deg); opacity: 1; }
    80% { transform: translate(0, 2%) scale(.96); } 100% { transform: none; } }
@keyframes rvHop { 0% { transform: none; } 40% { transform: translateY(-10%) scale(1.1); } 70% { transform: translateY(1%) scale(.97); } 100% { transform: none; } }
@keyframes rvOut { to { transform: translate(-25%, 40%) scale(.4); opacity: 0; } }
.mascot-art { position: absolute; left: 0; top: 0; width: var(--ms); height: var(--ms); }
/* first appearance: a soft glow ring behind her */
.mascot-ring { position: absolute; left: 8%; top: 4%; width: 84%; height: 84%; border-radius: 50%; opacity: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(125, 220, 194, .38) 0%, rgba(255, 143, 177, .16) 45%, transparent 68%);
    box-shadow: 0 0 0 .18em rgba(255, 247, 232, .55), 0 0 1.2em .3em rgba(125, 220, 194, .45); }
.mascot.first .mascot-ring { animation: rvRing 1.6s ease-out .15s both; }
@keyframes rvRing { 0% { transform: scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.mascot-bubble { position: absolute; left: calc(100% + .3em); bottom: calc(var(--ms) * .3); width: max-content; box-sizing: border-box;
    padding: .36em .8em .4em; border-radius: .95em; font-family: var(--font-ui); font-weight: 800; line-height: 1.15; text-wrap: balance;
    font-size: 16px; color: var(--ink); background: #fff; border: .15em solid var(--ink);
    box-shadow: 0 .16em 0 var(--ink), 0 .45em 1.1em rgba(0, 0, 0, .5); transform-origin: 0 80%; }
.mascot-bubble::before { content: ''; position: absolute; left: -.52em; bottom: .62em; width: .8em; height: .8em; background: #fff;
    border-left: .15em solid var(--ink); border-bottom: .15em solid var(--ink); transform: rotate(45deg) skew(8deg, 8deg); }
.mascot-bubble.in { animation: rvBubble .36s cubic-bezier(.3, 1.6, .5, 1) both; }
.mascot-bubble.out { animation: rvBubbleOut .18s ease-in both; }
@keyframes rvBubble { from { transform: scale(.35); opacity: 0; } }
@keyframes rvBubbleOut { to { transform: scale(.6); opacity: 0; } }
.mb-rest { visibility: hidden; }
/* a line with buttons (local 2P "Playing alone?"): they sit in the bubble and are the only part of her layer that takes a tap */
.mascot-bubble.has-act { padding-bottom: .5em; }
.mb-acts { display: flex; gap: .5em; margin-top: .45em; pointer-events: none; opacity: 0; transition: opacity .15s; }
.mascot-bubble.typed .mb-acts { pointer-events: auto; opacity: 1; }
.mb-acts .btn { font-size: .82em; padding: .3em .7em; min-height: 40px; min-width: 40px; flex: 1 1 auto; white-space: nowrap; }
.mb-acts .btn.ghost { flex: 0 0 auto; }
/* tutorial pick shop: the bot stands in the upper part of its preview, Rivet + her bubble get the band along the bottom edge */
#scr-build.simple .panel.p1 .p-preview > .bot-canvas { height: 74%; }
#scr-build.simple .panel.p1 .p-preview::after { bottom: 28.5%; }
#scr-build.simple .panel.p1 .p-preview { background:
        radial-gradient(ellipse 70% 32% at 50% 69%, color-mix(in srgb, var(--team) 45%, transparent), transparent 75%),
        linear-gradient(180deg, rgba(12, 6, 26, .55), rgba(40, 20, 70, .55)); }

/* ---- completion card ---- */
.tc-modal { align-items: center; text-align: center; width: min(94%, 26em); }
.tc-badge { width: 4.6em; height: 4.6em; margin: -2.4em auto -.2em; filter: drop-shadow(0 .25em 0 var(--ink)); animation: popIn .6s var(--ease-spring) .1s both; }
.tc-badge svg { width: 100%; height: 100%; display: block; }
.tc-title { font-size: 1.9em; text-wrap: balance; }
.portrait .tc-modal .tc-title, .tc-modal .tc-title { font-size: 1.7em; }
.tc-text { margin: 0; font-weight: 700; color: var(--text); }
.tc-rewards { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }
.tc-next { margin: .2em 0 0; color: var(--text-dim); font-weight: 700; font-size: .92em; }
.tc-row { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; width: 100%; }
.tc-row .btn { flex: 1 1 8em; min-width: 0; font-size: .95em; }
.tc-modal > .btn.big { align-self: stretch; }

/* like ask (main.js showLikeAsk): a bouncing arrow at the very top edge of the stage, pointing up at the host page's 👍 */
.like-arrow { position: absolute; top: 0; right: 12%; width: 44px; height: 44px; z-index: 56; pointer-events: none; color: #ffd84a; animation: likeBounce .7s ease-in-out infinite alternate; }
.like-arrow svg { width: 100%; height: 100%; display: block; }
@keyframes likeBounce { from { transform: translateY(5px); } to { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .like-arrow { animation: none; } }

.mb-emo { font-size: 1.45em; line-height: 1; vertical-align: -.12em; }