/* Sors Duo: rival portrait, idle life, tells and moods | games/Sors_Duo/css/rival.css | v.0.3 */

.portrait { overflow: hidden; cursor: pointer; }
.portrait svg { display: block; width: 100%; height: 100%; }

.pt * { transform-box: fill-box; transform-origin: center; }

/* One mouth at a time; a tell or a mood may borrow another. */
.pt .pt-m { display: none; }
.pt.m-neutral .pt-m-neutral, .pt.m-smile .pt-m-smile, .pt.m-frown .pt-m-frown,
.pt.m-smirk .pt-m-smirk, .pt.m-bite .pt-m-bite, .pt.m-talk .pt-m-talk { display: inline; }
.pt.m-talk .pt-m:not(.pt-m-talk) { display: none; }
.pt.t-smirk .pt-m, .pt.t-lipBite .pt-m { display: none; }
.pt.t-smirk .pt-m-smirk, .pt.t-lipBite .pt-m-bite { display: inline; }

/* Idle life. */
.pt .pt-lid { transform: scaleY(0); }
.pt.a-blink .pt-lid { animation: pt-blink .18s ease-in-out; }
@keyframes pt-blink { 50% { transform: scaleY(1); } }
.pt .pt-body { animation: pt-breathe 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pt-breathe { 50% { transform: scaleY(1.012); } }
.pt .pt-smoke { opacity: 0; }
.pt.pt-ghost { animation: pt-float 5s ease-in-out infinite; }
@keyframes pt-float { 50% { transform: translateY(-3px); } }
.pt .pt-glow { animation: pt-glowidle 3s ease-in-out infinite; }
@keyframes pt-glowidle { 50% { opacity: .75; } }

/* Tells: each lasts about a second and a half. */
.pt.t-chipGlance .pt-pupil { animation: pt-glance 1.4s ease-in-out; }
@keyframes pt-glance { 20%, 80% { transform: translate(2px, 3px); } }
.pt.t-blink .pt-lid { animation: pt-blink .16s ease-in-out 5; }
.pt.t-browRaise .pt-brow { animation: pt-brow 1.4s ease-in-out; }
@keyframes pt-brow { 20%, 80% { transform: translateY(-4px); } }
.pt.t-lookAway .pt-pupil { animation: pt-away 1.6s ease-in-out; }
.pt.t-lookAway .pt-head { animation: pt-turn 1.6s ease-in-out; transform-origin: 50% 100%; }
@keyframes pt-away { 20%, 80% { transform: translate(-4px, -1px); } }
@keyframes pt-turn { 20%, 80% { transform: rotate(-4deg); } }
.pt.t-drum .pt-finger { animation: pt-drum .22s ease-in-out 6 alternate; }
.pt.t-drum .pt-f1 { animation-delay: .05s; }
.pt.t-drum .pt-f2 { animation-delay: .1s; }
.pt.t-drum .pt-f3 { animation-delay: .15s; }
@keyframes pt-drum { to { transform: translateY(5px); } }
.pt.t-earTwitch .pt-ear-r { animation: pt-twitch .18s ease-in-out 4 alternate; }
@keyframes pt-twitch { to { transform: rotate(9deg); } }
.pt.t-antenna .pt-antenna { animation: pt-wiggle .2s ease-in-out 6 alternate; }
@keyframes pt-wiggle { to { transform: rotate(6deg); } }
.pt.t-tailFlick .pt-tail { animation: pt-tail .3s ease-in-out 4 alternate; transform-origin: 10% 100%; }
@keyframes pt-tail { to { transform: rotate(-12deg); } }
.pt.t-tentacleCurl .pt-tentacles { animation: pt-curl .5s ease-in-out 3 alternate; }
@keyframes pt-curl { to { transform: scaleY(.86) skewX(8deg); } }
.pt.t-eyeGlow .pt-glow { animation: pt-flare .25s steps(2) 6; }
@keyframes pt-flare { 50% { opacity: 1; filter: brightness(1.8); } }
.pt.t-flicker { animation: pt-flicker .12s steps(2) 10; }
@keyframes pt-flicker { 50% { opacity: .35; } }
.pt.t-smoke .pt-smoke { animation: pt-puff 1.6s ease-out; }
@keyframes pt-puff { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1.3); } }

/* Moods follow the match: winning, tilting. */
.pt.mood-angry .pt-brow { transform: translateY(2px) scaleX(1.05); }
.pt.mood-nervous .pt-brow { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .pt, .pt * { animation: none !important; }
}

/* ---------------------------------------------------------------- guests (both Amiga teams), colours from css/amiga-colors.css */
.portrait-pixel { background: var(--amiga-black); }
.pixel-frame, .pixel-frame canvas { width: 100%; height: 100%; }
.pixel-frame canvas, .amiga-face canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

.amiga-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amiga-black);
  cursor: pointer;
}
.amiga-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}
.amiga-screen { width: min(640px, 94vw); text-align: center; font-family: 'Montserrat', Arial, sans-serif; }
.amiga-title {
  padding: 10px 0 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--amiga-blue) 55%, var(--amiga-black)), var(--amiga-medium-blue) 45%, color-mix(in srgb, var(--amiga-blue) 55%, var(--amiga-black)));
  color: var(--amiga-white);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  letter-spacing: 6px;
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--amiga-blue) 18%, var(--amiga-black));
}
.amiga-credit { margin-top: 10px; color: var(--amiga-gray-21); font-size: 10px; letter-spacing: 1px; }
.amiga-face { width: 256px; height: 256px; margin: 18px auto 14px; border: 2px solid var(--amiga-gray-22); background: var(--amiga-black); }
.amiga-face canvas { width: 100%; height: 100%; }
.amiga-card { width: 360px; max-width: 90%; margin: 0 auto; }
.amiga-bar {
  margin-bottom: 3px;
  padding: 4px 12px;
  background: linear-gradient(180deg, var(--amiga-gray-25), var(--amiga-silver) 30%, var(--amiga-gray-26) 70%, var(--amiga-gray-22));
  color: var(--amiga-black);
  font-size: 19px;
  text-align: left;
}
.amiga-hint { margin-top: 14px; color: var(--amiga-gray-23); font-size: 11px; letter-spacing: 2px; }

/* The glitch: the whole page tears for a moment. */
html.glitching body { animation: glitch .6s steps(6) both; }
@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-6px, 2px) skewX(4deg); filter: hue-rotate(90deg) contrast(1.6); }
  40% { transform: translate(5px, -3px); filter: invert(1) saturate(4); }
  60% { transform: translate(-3px, 0) skewX(-6deg); filter: grayscale(1) contrast(3); }
  80% { transform: translate(2px, 1px); filter: hue-rotate(-60deg); }
  100% { transform: translate(0); filter: none; }
}
.amiga-overlay.glitch-in .amiga-screen { animation: tear .7s steps(7) both; }
.amiga-overlay.glitch-out .amiga-screen { animation: tear .6s steps(6) reverse both; }
@keyframes tear {
  0% { clip-path: inset(48% 0 48% 0); transform: scaleX(1.4); }
  40% { clip-path: inset(20% 0 60% 0); transform: translateX(-12px); }
  70% { clip-path: inset(0 0 30% 0); transform: translateX(8px); }
  100% { clip-path: inset(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) { html.glitching body { animation: none; } }