/* Page 48 (GLOATS YOU'LL ACTUALLY SEE): the match phone, the EMOTE / GLOAT button in its three cues, the first-time hints,
   the mini gloat tray, the TAUNT TRAY. Inside a phone 1 CSS px = 1 point of an iPhone 16 in landscape (852 x 393). */

/* ================================================================== the phone */
.gl-dev { position: relative; border: 4px solid var(--ink); border-radius: 30px; padding: 10px; background: linear-gradient(160deg, #3B3550, #17141F 55%, #0B0A10); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 4px 9px 0 var(--ink); }
.gl-dev--sm { border-radius: 22px; padding: 7px; border-width: 3px; box-shadow: 3px 6px 0 var(--ink); }
.gl-dev--sm .gl-scr { border-radius: 15px; }
.gl-scr { position: relative; overflow: hidden; border-radius: 21px; background: #05040A; aspect-ratio: 852 / 393; isolation: isolate; }
.gl-dsn { position: absolute; left: 0; top: 0; width: 852px; height: 393px; transform-origin: 0 0; overflow: hidden; font-family: var(--f-body); -webkit-user-select: none; user-select: none; }
.gl-bg { position: absolute; left: 0; top: 0; width: 852px; height: 393px; display: block; }
.gl-wl { position: absolute; left: 0; top: 0; width: 1600px; height: 740px; transform-origin: 0 0; pointer-events: none; }
.gl-w { position: absolute; left: 0; top: 0; overflow: visible; }
.gl-hud, .gl-ctrl { position: absolute; left: 0; top: 0; width: 852px; height: 393px; pointer-events: none; }
.gl-ctrl { transition: opacity 0.3s; }
.gl-round { position: absolute; left: 426px; top: 52px; translate: -50% 0; height: 24px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 9px; background: rgba(13, 11, 22, 0.66); font: 400 15px/1 var(--f-display); letter-spacing: 0.03em; color: var(--cream); white-space: nowrap; pointer-events: none; }
.gl-ofx { position: absolute; left: 0; top: 0; width: 852px; height: 393px; pointer-events: none; overflow: visible; z-index: 3; }
.gl-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.gl-ui > * { pointer-events: auto; }
.gl-words { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.gl-words .sfxw { position: absolute; }

/* ================================================================== the EMOTE button (CALM CORE, at 759.6 156.2, r 13.8) */
.gl-emo { position: absolute; z-index: 5; left: 759.6px; top: 156.2px; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; --left: 1; }
.gl-emo::before { content: ""; position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; }
.gl-emo__body { position: absolute; left: -23.3px; top: -23.3px; width: 46.6px; height: 46.6px; background: url("img/gloat/emote_real.png") center / 100% 100% no-repeat; transition: opacity 0.25s, transform 0.3s var(--spring); }
.gl-emo__ico { position: absolute; display: block; pointer-events: none; }
.gl-emo__smile { left: -10px; top: -10px; width: 20px; height: 20px; opacity: 0; }
.gl-emo__smile svg, .gl-emo__crown svg { width: 100%; height: 100%; display: block; }
.gl-emo__crown { left: -15px; top: -16px; width: 30px; height: 30px; opacity: 0; transform: scale(0.3) rotate(-30deg); transition: opacity 0.2s, transform 0.4s var(--spring); filter: drop-shadow(1px 2px 0 rgba(29, 27, 36, 0.6)); }
.gl-emo__lbl { position: absolute; left: 0; top: 9px; translate: -50% 0; padding: 2px 5px 1px; border: 2px solid var(--ink); border-radius: 6px; background: var(--cream); font: 400 10px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.35s var(--spring); pointer-events: none; }
.gl-emo__ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; opacity: 0; pointer-events: none; }
.gl-emo__timer { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; opacity: 0; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.gl-emo__timer circle { fill: none; stroke: #FFF6E0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: calc(170 - 170 * var(--left)); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.gl-emo.is-press .gl-emo__body { transform: scale(0.9); }
/* A · MORPH: the smiley turns into a gold GLOAT button with a crown, bigger, pulsing, the body's time ticking round it */
.gl-emo.is-gloat .gl-emo__body { opacity: 1; transform: scale(1.02); background: radial-gradient(circle at 42% 34%, #FFF3B0, #FFD23F 45%, #F4AE00 75%, #C27A00); border-radius: 50%; left: -21px; top: -21px; width: 42px; height: 42px; box-shadow: 0 0 0 3px var(--ink), 2px 4px 0 3px var(--ink), 0 0 18px 6px rgba(255, 210, 63, 0.55); animation: gl-pulse 1.1s ease-in-out infinite; }
.gl-emo.is-gloat .gl-emo__crown { opacity: 1; transform: none; }
.gl-emo.is-gloat .gl-emo__lbl { opacity: 1; transform: rotate(-4deg); top: 24px; font-size: 11px; padding: 3px 6px 2px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); box-shadow: 1px 2px 0 var(--ink); }
.gl-emo.is-gloat .gl-emo__ring { opacity: 1; border: 3px solid rgba(255, 210, 63, 0.9); animation: gl-ring 1.1s ease-out infinite; }
.gl-emo.is-gloat .gl-emo__timer { opacity: 1; }
.gl-emo.is-gloat.is-press .gl-emo__body { transform: scale(0.9); animation: none; }
@keyframes gl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes gl-ring { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
/* B · RING + ARROW: the smiley stays, a gold ring pulses round it, an arrow runs from it to the body, a GLOAT tag beside it */
.gl-emo.is-ring .gl-emo__body { opacity: 1; filter: brightness(1.6) saturate(1.2); }
.gl-emo.is-ring .gl-emo__ring { opacity: 1; border: 3px solid #FFD23F; box-shadow: 0 0 12px 3px rgba(255, 210, 63, 0.6); animation: gl-ring2 0.9s ease-in-out infinite; }
@keyframes gl-ring2 { 0%, 100% { transform: scale(0.82); } 50% { transform: scale(1.02); } }
.gl-ringtag { position: absolute; left: 700px; top: 146px; translate: -100% 0; padding: 4px 8px 3px; border: 2.5px solid var(--ink); border-radius: 8px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); font: 400 13px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); box-shadow: 2px 3px 0 var(--ink); animation: pk-slam 0.3s var(--spring) both; pointer-events: none; }
/* C · BODY PROMPT: the body glows; a GLOAT tap-target floats over it, with the smiley it maps to */
.gl-emo.is-mapped .gl-emo__body { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.5); }
.gl-emo.is-mapped .gl-emo__ring { opacity: 1; border: 2px solid rgba(255, 210, 63, 0.8); animation: gl-ring 1.4s ease-out infinite; }
.gl-bodytap { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; }
.gl-bodytap i { position: absolute; left: -19px; top: -40px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 42% 34%, #FFF3B0, #FFD23F 45%, #F4AE00); border: 3px solid var(--ink); box-shadow: 2px 4px 0 var(--ink), 0 0 16px 5px rgba(255, 210, 63, 0.6); animation: gl-bob 1s ease-in-out infinite; }
.gl-bodytap i svg { width: 24px; height: 24px; display: block; }
.gl-bodytap b { position: absolute; left: 0; top: -2px; translate: -50% 0; padding: 2px 6px 1px; border: 2px solid var(--ink); border-radius: 6px; background: var(--cream); font: 400 11px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.gl-bodytap__map { position: absolute; left: 21px; top: -36px; width: 17px; height: 17px; border-radius: 50%; background: #5B528F; border: 2px solid var(--ink); display: grid; place-items: center; }
.gl-bodytap__map svg { width: 13px; height: 13px; display: block; }
@keyframes gl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ================================================================== first-time hints */
.gl-coach { position: absolute; left: 520px; top: 112px; width: 196px; padding: 8px 11px 9px; border: 3px solid var(--ink); border-radius: 13px; background: #FFF6E0; box-shadow: 3px 5px 0 var(--ink); font: 700 11.5px/1.25 var(--f-body); color: var(--ink); transform: scale(0.3) translateX(60px); transform-origin: 100% 50%; opacity: 0; transition: transform 0.4s var(--spring), opacity 0.2s; pointer-events: none; }
.gl-coach.is-in { transform: rotate(-1.5deg); opacity: 1; }
.gl-coach b { display: inline-block; margin-right: 5px; padding: 2px 5px 1px; border-radius: 5px; background: #FF3352; font: 400 11px/1 var(--f-display); letter-spacing: 0.06em; color: #fff; }
.gl-coach em { font-style: normal; font-family: var(--f-display); font-weight: 400; color: #C27A00; }
.gl-coach__tail { position: absolute; right: -14px; top: 32px; width: 16px; height: 18px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gl-coach__tail::after { content: ""; position: absolute; left: -4px; top: 4px; width: 12px; height: 10px; background: #FFF6E0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gl-slow { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.gl-slow.is-in { opacity: 1; }
.gl-slow__v { position: absolute; inset: 0; background: radial-gradient(circle at 759.6px 156.2px, transparent 30px, rgba(6, 4, 18, 0.62) 46px); }
.gl-slow__spot { position: absolute; left: 759.6px; top: 156.2px; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px dashed #FFD23F; animation: gl-spin 4s linear infinite; }
@keyframes gl-spin { to { transform: rotate(360deg); } }
.gl-slow__ban { position: absolute; left: 400px; top: 118px; translate: -50% 0; display: grid; justify-items: center; gap: 3px; }
.gl-slow__ban small { font: 800 11px/1 var(--f-body); letter-spacing: 0.2em; color: var(--yellow); text-shadow: 0 1px 0 var(--ink); }
.gl-slow__ban b { padding: 6px 16px 5px; border: 3.5px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); font: 400 28px/1 var(--f-display); letter-spacing: 0.03em; color: var(--ink); box-shadow: 3px 5px 0 var(--ink); transform: rotate(-2deg); }
.gl-slow__ban span { margin-top: 5px; font: 800 11px/1 var(--f-body); letter-spacing: 0.16em; color: var(--cream); }

/* ================================================================== tap B: the mini gloat tray, tap C: the signature chip */
.gl-mini { position: absolute; left: 732px; top: 110px; translate: -100% 0; display: grid; grid-template-columns: repeat(3, 76px); gap: 6px; padding: 24px 8px 8px; border: 3px solid var(--ink); border-radius: 15px; background: linear-gradient(180deg, #4B4472, #2A2640 60%, #1E1B2B); box-shadow: 3px 6px 0 var(--ink); transform: scale(0.3); transform-origin: 100% 40%; opacity: 0; transition: transform 0.35s var(--spring), opacity 0.2s; }
.gl-mini.is-in { transform: none; opacity: 1; }
.gl-mini__t { position: absolute; left: 10px; top: 6px; display: flex; align-items: center; gap: 4px; font: 400 13px/1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.gl-mini__g { display: grid; justify-items: center; gap: 3px; padding: 6px 3px 5px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 11px; background: radial-gradient(circle at 42% 30%, #FFF3B0, #FFD23F 50%, #F4AE00); box-shadow: 2px 3px 0 var(--ink); }
.gl-mini__g svg { width: 26px; height: 26px; display: block; }
.gl-mini__g b { font: 400 9.5px/1.05 var(--f-display); letter-spacing: 0.02em; color: var(--ink); text-align: center; }
.gl-mini__g.is-pick { transform: scale(0.92); box-shadow: 0 1px 0 var(--ink), 0 0 0 3px #fff; }
.gl-chip { position: absolute; left: 426px; top: 84px; translate: -50% 0; padding: 5px 12px 4px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); font: 400 14px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); box-shadow: 2px 4px 0 var(--ink); transform: translateY(-20px) scale(0.6); opacity: 0; transition: transform 0.35s var(--spring), opacity 0.2s; pointer-events: none; }
.gl-chip.is-in { transform: none; opacity: 1; }

/* ================================================================== the TAUNT TRAY (398 x 214 under the smiley) */
.gl-tray { position: absolute; left: 368px; top: 172px; width: 398px; height: 214px; padding: 30px 12px 12px; border: 3.5px solid var(--ink); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 40%), radial-gradient(120% 90% at 30% 10%, #4B4472, #2A2640 55%, #1E1B2B); box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.1), 3px 6px 0 var(--ink); transform: scale(0.3); transform-origin: 98% -12%; opacity: 0; transition: transform 0.35s var(--spring), opacity 0.2s; }
.gl-tray.is-in { transform: none; opacity: 1; }
.gl-tray__h { position: absolute; left: 14px; right: 12px; top: 7px; height: 20px; display: flex; align-items: center; gap: 8px; }
.gl-tray__h > b { font: 400 17px/1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.gl-tray__h > small { font: 800 10px/1 var(--f-body); letter-spacing: 0.08em; color: rgba(255, 246, 224, 0.6); }
.gl-tray__tabs { display: flex; gap: 4px; margin-left: 6px; }
.gl-tray__tabs button { height: 20px; padding: 0 8px; cursor: pointer; font: 400 11.5px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; border: 2px solid var(--ink); border-radius: 7px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); -webkit-text-stroke: 2.4px var(--ink); paint-order: stroke fill; }
.gl-tray__tabs button small { font: 800 9px/1 var(--f-body); -webkit-text-stroke: 0; color: var(--cream-3); }
.gl-tray__tabs button.is-on { color: var(--ink); -webkit-text-stroke: 0; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); }
.gl-tray__tabs button.is-on small { color: rgba(29, 27, 36, 0.6); }
.gl-tray__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 7px; height: 100%; }
.gl-tt { position: relative; display: grid; grid-template-rows: 26px minmax(0, 1fr); justify-items: center; align-items: center; padding: 3px 3px 2px; cursor: pointer; border: 2.6px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 34%), radial-gradient(circle at 40% 25%, #ACA3DE, #5B528F 55%, #2E2852); box-shadow: 2px 4px 0 rgba(29, 27, 36, 0.8); animation: pk-slam 0.3s var(--spring) backwards; animation-delay: calc(var(--i) * 14ms); }
.gl-tt__i { width: 24px; height: 24px; display: block; }
.gl-tt__i svg { width: 100%; height: 100%; display: block; }
.gl-tt > b { font: 400 10px/1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 2.2px var(--ink); paint-order: stroke fill; text-align: center; }
.gl-tt.is-last { background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 34%), radial-gradient(circle at 40% 25%, #FFE98C, #FFD23F 55%, #F4AE00); }
.gl-tt.is-last > b { color: var(--ink); -webkit-text-stroke: 0; }
.gl-tt__g { position: absolute; right: 2px; top: 1px; width: 13px; height: 13px; }
.gl-tt__g svg { width: 100%; height: 100%; display: block; }
.gl-tt__k { position: absolute; left: 3px; top: 2px; width: 12px; height: 12px; border-radius: 3px; display: grid; place-items: center; background: rgba(13, 11, 22, 0.7); font: 400 8.5px/1 var(--f-display); font-style: normal; color: var(--cream); }
.gl-tt--empty { background: rgba(0, 0, 0, 0.2); border-style: dashed; border-color: rgba(255, 246, 224, 0.2); box-shadow: none; }
.gl-tray__dots { position: absolute; right: 12px; top: 8px; height: 20px; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.gl-tray__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 246, 224, 0.4); }
.gl-tray__dots i.on { background: var(--yellow); }
.gl-tray__more { margin-left: 8px; height: 16px; padding: 0 6px; cursor: pointer; font: 400 9.5px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); border: 2px solid var(--ink); border-radius: 5px; background: var(--yellow); }

/* ================================================================== the finger */
.gl-finger { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9; opacity: 0; transition-property: transform; pointer-events: none; }
.gl-finger.is-on { opacity: 1; }
.gl-finger i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.25)); border: 3px solid rgba(29, 27, 36, 0.75); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); transition: transform 0.12s var(--out); }
.gl-finger.is-down i { transform: scale(0.78); }
.gl-ripple { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 8; pointer-events: none; }
.gl-ripple::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.9); animation: pp-rip 0.55s ease-out both; }
@keyframes pp-rip { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes pk-slam { from { transform: translateY(-14px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gl-emo *, .gl-tray, .gl-tt, .gl-mini, .gl-chip, .gl-coach, .gl-bodytap i, .gl-slow__spot { animation: none !important; transition: none !important; }
}
.gl-emo.is-open .gl-emo__body { filter: brightness(1.7) saturate(1.3); transform: scale(1.06); }