/* "Hamster combat" for the portrait Spin button (/4 test): the score sits right of Spin, each
   click throws bright "+N" bursts sideways out of the button, Hide is a round X in the corner. */
.v3-avatar-actions { position: relative; }
.v3-avatar-actions { padding: 106px 0 0; }
.v3-avatar-score { display: flex; flex-direction: column; align-items: center; gap: 6px; position: absolute; left: 50%; top: 0; translate: -50% 0; margin: 0; padding: 0; white-space: nowrap; text-align: center; font: 500 20px/1.1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--v3-score-ink); opacity: 1; transition: opacity 500ms ease, scale 160ms cubic-bezier(.22, 1, .36, 1); user-select: none; -webkit-user-select: none; pointer-events: none; }
.v3-avatar-score { --fs: 48px; }
.v3-avatar-score { flex-direction:row; gap:12px; color:#fff; text-shadow:0 2px 12px #0004; z-index:4; }
.v3-avatar-coin-icon { position:relative; display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; filter:drop-shadow(0 3px 5px #0005); transform-origin:center; }
.v3-avatar-coin-icon[hidden] { display:none!important; }
.v3-avatar-coin-icon img { position:absolute; inset:0; display:block; width:48px; height:48px; object-fit:contain; max-width:none; }
.v3-avatar-score b { -webkit-text-stroke:2px #18161d; paint-order:stroke fill; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="wood"] { --v3-coin-number:var(--v3-game-score-warm); }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="cracker"] { --v3-coin-number:#ffe3b6; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="stone"] { --v3-coin-number:#e0e5ed; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="amber"] { --v3-coin-number:#ffd692; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="six-seven"] { --v3-coin-number:#e0c2ff; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="lava"] { --v3-coin-number:#ffc49a; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="bronze"] { --v3-coin-number:#ffd1b1; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="silver"] { --v3-coin-number:#edf2ff; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="gold"] { --v3-coin-number:#ffe78f; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="platinum"] { --v3-coin-number:#ddf4ff; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="diamond"] { --v3-coin-number:#b4f2ff; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="ruby"] { --v3-coin-number:#ffb2c8; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="black-diamond"] { --v3-coin-number:#f1ead8; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="emerald"] { --v3-coin-number:#bdf4c7; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="holographic"] { --v3-coin-number:#d0bdff; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="button"] { --v3-coin-number:#fff0d4; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="soda"] { --v3-coin-number:#ffb5a6; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="donut"] { --v3-coin-number:#ffcdf1; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="surstromming"] { --v3-coin-number:#dce2e9; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="spam"] { --v3-coin-number:#ffefae; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="trash"] { --v3-coin-number:#c5d5e8; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="ufo"] { --v3-coin-number:#c49aff; }
:is(.v3-avatar-score,.v3-spin-invite)[data-coin-tier="chest"] { --v3-coin-number:#ffdfa1; }
.v3-avatar-score[data-coin-tier] b { color:var(--v3-coin-number,#fff); }
.v3-avatar-score__num { display: grid; place-items: center; height: var(--fs); }
.v3-avatar-score b { display: block; font-size: var(--fs); line-height: 1; font-family: 'Montserrat', 'DM Sans', sans-serif; font-weight: 900; letter-spacing: -.5px; scale: var(--k, 1); transition: scale 260ms cubic-bezier(.22, 1, .36, 1); }
.v3-avatar-coins { font: 700 13px/1 'DM Sans', sans-serif; letter-spacing: .24em; text-indent: .24em; }
.v3-avatar-score[data-empty] { opacity:1; }
.v3-avatar-score[data-empty] b { opacity:.45; }
.v3-avatar-score[data-bump] { scale: 1.14; transition-duration: 70ms; }
.v3-avatar-fly { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.v3-fly-num { --stroke: #ff8a2a; --glow: #ffd23f; position: absolute; z-index: 5; left: 0; top: 0; font: 900 30px/1 'Montserrat', 'DM Sans', sans-serif; color: #fff; white-space: nowrap; will-change: transform, opacity; -webkit-text-stroke: 5px var(--stroke); paint-order: stroke fill; text-shadow: 0 0 10px var(--glow), 0 0 22px var(--glow), 0 0 40px var(--glow), 0 3px 0 #00000026; }
.v3-fly-num[data-tier="2"] { --stroke: #ff6a3d; --glow: #ffb347; }
.v3-fly-num[data-tier="3"] { --stroke: #ff2f92; --glow: #ff8ad0; }
.v3-fly-num[data-tier="4"] { --stroke: #7a4dff; --glow: #6fd6ff; }
.v3-fly-ring { position: absolute; z-index: 5; width: 96px; height: 54px; border-radius: 100px; border: 3px solid #fff; box-shadow: 0 0 18px 2px #ffd23f, inset 0 0 14px #ffffffb0; will-change: transform, opacity; }
.v3-fly-ring[data-tier="3"] { box-shadow: 0 0 20px 3px #ff8ad0, inset 0 0 14px #ffffffb0; }
.v3-fly-ring[data-tier="4"] { box-shadow: 0 0 22px 4px #6fd6ff, inset 0 0 14px #ffffffb0; }
/* Hide: a plain round glass button with only the cross, top right. */
.v3-avatar-hide { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; left:auto; z-index: 6; width: 48px; height: 48px; padding: 0; gap: 0; border-radius: 50%; }
.v3-avatar-hide span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) { .v3-avatar-score { font-size: 18px; } .v3-avatar-score { --fs: 42px; } .v3-fly-num { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .v3-avatar-score { transition: none; } }
/* Leave room for the score above the buttons on short screens; the portrait is 30% smaller on desktop. */
.v3-avatar-large { width: min(86vw, calc(100dvh - 250px), 860px); }
@media (min-width: 801px) { .v3-avatar-large { width: calc(min(86vw, calc(100dvh - 250px), 860px) * .7); } }

/* Hide (round X): a clearly visible hover. */
.v3-avatar-hide { transition: transform 220ms cubic-bezier(.22, 1, .36, 1), background-color 200ms ease, box-shadow 220ms ease, opacity 200ms ease; }
.v3-avatar-hide img { transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .v3-avatar-hide:hover { transform: scale(1.14); background: var(--v3-control-hover); box-shadow: 0 8px 26px #0000002e, inset 0 1px 0 #fff; }
  .v3-avatar-hide:hover img { transform: rotate(90deg) scale(1.08); }
}
.v3-avatar-hide:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) { .v3-avatar-hide, .v3-avatar-hide img { transition: none; } .v3-avatar-hide:hover img { transform: none; } }

/* Spin preloader ring: 3px, outside the button, filling clockwise from the top as the head loads. */
.v3-avatar-spin { position: relative; }
.v3-avatar-spin__ring { position: absolute; overflow: visible; pointer-events: none; z-index: 2; transition: opacity 400ms ease; }
.v3-avatar-spin__ring[hidden] { display: none; }
.v3-avatar-spin__ring[data-done] { opacity: 0; }
.v3-avatar-spin__track { stroke: #6a63da26; }
@media (prefers-color-scheme: dark) {
 .v3-avatar-spin__track { stroke:#ffffff26; }
}
.v3-avatar-spin__fill { stroke-linecap: round; transition: stroke-dasharray 320ms ease-out; }

/* The large portrait stays half transparent until the whole head is loaded (Spin needs it); the header thumbnail is untouched. */
.v3-avatar-dialog .v3-avatar-large { transition: opacity 600ms ease; }
.v3-avatar-dialog[data-head-loading] .v3-avatar-large { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .v3-avatar-dialog[data-head-loading] .v3-avatar-large { opacity: 1; } }
/* Spin shows a smooth percentage while loading, then icon + label fade in. */
.v3-avatar-spin img, .v3-avatar-spin > span { transition: opacity 350ms ease; }
.v3-avatar-spin[data-loading] img, .v3-avatar-spin[data-loading] > span { opacity: 0 !important; }
.v3-avatar-spin__pct { position: absolute; inset: 0; display: grid; place-items: center; font: 500 18px/1 'DM Sans', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: inherit; opacity: 0; transition: opacity 350ms ease; pointer-events: none; z-index: 1; }
.v3-avatar-spin[data-loading] .v3-avatar-spin__pct { opacity: 1; }

/* Android Chrome draws a square tap highlight around tapped buttons; the portrait controls have their own feedback. */
.v3-avatar-spin, .v3-avatar-hide, .v3-avatar-large { -webkit-tap-highlight-color: transparent; }
.v3-avatar-spin:focus:not(:focus-visible), .v3-avatar-hide:focus:not(:focus-visible) { outline: none; }

/* Same on the header thumbnail that opens the portrait (Android shows a square highlight on tap). */
.v3-portrait, .v3-portrait.v3-avatar-stage { -webkit-tap-highlight-color: transparent; }
.v3-portrait:focus:not(:focus-visible) { outline: none; }
.v3-header a, .v3-header button { -webkit-tap-highlight-color: transparent; }
.v3-portrait.v3-avatar-stage:focus-visible { border-radius: 50%; }   /* a round focus ring instead of a square one */

/* Game open: everything behind the portrait stops animating (resumes when the game closes). */
html[data-v3-game] body > :not(dialog):not(.v3-egg):not(.v3-coin-upgrade),
html[data-v3-game] body > :not(dialog):not(.v3-egg):not(.v3-coin-upgrade) *,
html[data-v3-game] body > :not(dialog):not(.v3-egg):not(.v3-coin-upgrade) *::before,
html[data-v3-game] body > :not(dialog):not(.v3-egg):not(.v3-coin-upgrade) *::after { animation-play-state: paused !important; }

/* The portrait opens a little more gently: the close X fades in with the viewer. */
.v3-avatar-dialog[open] .v3-avatar-hide { animation: v3-hide-in 460ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes v3-hide-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3-avatar-dialog[open] .v3-avatar-hide { animation: none; } }


/* iOS Safari: the multi-layer glow around the numbers looks much denser there than in Chrome, so it is lighter (the rings stay full). */
@supports (-webkit-touch-callout: none) {
  .v3-fly-num { -webkit-text-stroke: 4px var(--stroke); text-shadow: 0 0 6px var(--glow), 0 2px 0 #00000026; }
}

/* Desktop hint: Space spins as well. */
.v3-avatar-spin-control { position: relative; display: flex; }
.v3-avatar-keyhint { display: none; position: absolute; top: calc(100% + 28px); left: 50%; translate: -50% 0; white-space: nowrap; font: 500 15px/1 'DM Sans', sans-serif; color: var(--v3-text); opacity: 1; transition: opacity 500ms ease; pointer-events: none; user-select: none; -webkit-user-select: none; }
.v3-avatar-dialog:not([data-load-error]) .v3-avatar-spin:enabled:not([data-loading]) + .v3-avatar-keyhint { display: block; }
.v3-avatar-keyhint[data-dismissed] { opacity: 0; }
.v3-avatar-keyhint > span { animation: v3-keyhint-pulse 1s ease-in-out infinite alternate; }
.v3-avatar-keyhint[data-dismissed] > span { animation-play-state: paused; }
@keyframes v3-keyhint-pulse { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .v3-avatar-keyhint { transition: none; }
  .v3-avatar-keyhint > span { animation: none; }
}
.v3-avatar-keyhint kbd { font: inherit; font-weight: 700; padding: 3px 7px; margin-left: 2px; border-radius: 6px; background: var(--v3-keycap-surface); box-shadow: inset 0 -1px 0 #0000001f, 0 1px 2px #00000014; }
@media (hover: hover) and (pointer: fine) { .v3-avatar-actions { padding-bottom: 36px; } }

/* Phone held sideways: portrait on the left (with the jokes above it), score and Spin in a column on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .v3-avatar-dialog { padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  .v3-avatar-viewer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 0; width: 100%; }
  .v3-avatar-large { width: min(calc(100dvh - 24px), 46vw, 860px); }
  .v3-avatar-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0; }
  /* The score sits right above Spin in the flow (JS placement is off: static ignores its left/top). */
  .v3-avatar-score { position: absolute; translate: -50% 0; }
  .v3-avatar-score { --fs: 40px; }
  .v3-egg__toast { left: 25%; max-width: min(44vw, 380px); }
}