/* One turn of a fight as the window shows it: copied from the window's own
   style (client/src/renderer/style.css) and left to drift from it. The
   window's whole-screen effects (the shake, the red edges, the banner, the
   slash, the sabres) are kept to the turn's frame here. */

.played {
  --ink-soft: #cfc7b4;
  --gold: #ffd77a;
  --xp: #fff3a6;
  --good: #66db6a;
  --bad: #ff5c5c;
  --person: #62d9d9;
  --place: #ddb489;
  --guarded: #ffb020;
  --hostile: #ff6363;
  --mod-n3: #ff4d5e; --mod-n2: #ff6b5c; --mod-n1: #ee9a6e; --mod-0: #a39d8f;
  --mod-p1: #a7e19c; --mod-p2: #5fe0a8; --mod-p3: #6fd3ff; --mod-p4: #ffd77a; --mod-p5: #fff3a6;
  margin: 0; display: grid; gap: 0.7rem; min-width: 0;
}
.played figcaption { font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--dim); display: flex; gap: 0.6rem; align-items: baseline; }
.played figcaption span { font-family: var(--ui); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--faint); }

.played .turn {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.7rem 1.9rem 1.2rem; min-width: 0;
}
@media (max-width: 480px) { .played .turn { padding: 1.25rem 1.1rem 0.8rem; } }
.played .turn.still *, .played .turn.still *::before, .played .turn.still *::after { animation: none !important; transition: none !important; }

.played .said { font-family: var(--serif); font-style: italic; color: var(--dim); font-size: 1.05rem; margin: 0 0 0.9rem; padding-left: 1.1rem; position: relative; animation: chip-in 0.4s cubic-bezier(.2, .8, .3, 1.2) both; }
.played .said::before { content: "›"; position: absolute; left: 0; color: var(--gold); font-style: normal; }

/* the narration, inked in letter by letter */
.played .narration { font-family: var(--serif); font-size: 1.16rem; line-height: 1.62; color: var(--ink); }
.played .narration p { margin: 0 0 0.85em; overflow-wrap: break-word; }
.played .w { white-space: nowrap; }
.played .c { display: inline-block; white-space: pre; opacity: 0; }
.played .c.on { opacity: 1; animation: ink-in 0.42s cubic-bezier(.2, .7, .3, 1) both; }
.played .c.on.lit { animation: ink-in 0.42s cubic-bezier(.2, .7, .3, 1) both, name-glow 1.6s ease-out; }
.played .c.on.q-guarded { animation: ink-in 0.42s cubic-bezier(.2, .7, .3, 1) both, flicker 4.3s linear infinite; animation-delay: 0s, var(--d, 0s); }
@keyframes ink-in { from { opacity: 0; filter: blur(5px); translate: 0 0.25em; } 60% { filter: blur(0.5px); } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes name-glow { 0% { text-shadow: 0 0 14px currentColor, 0 0 2px #fff; } 100% { text-shadow: 0 0 0 transparent; } }
@keyframes flicker { 0%, 91%, 100% { opacity: 1; } 92% { opacity: 0.35; } 94% { opacity: 0.9; } 95% { opacity: 0.5; } }
.played .q-guarded { color: var(--guarded); }
.played .q-hostile { color: var(--hostile); }
.played .e-person { color: var(--person); font-weight: 700; }
.played .e-place { color: var(--place); font-weight: 700; }

/* receipts: what the dice and the body did */
.played .receipts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 1.1rem; font-family: var(--ui); font-size: 0.88rem; }
.played .chip { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); min-width: 0; flex-wrap: wrap; animation: chip-in 0.4s cubic-bezier(.2, .8, .3, 1.2) both; }
.played .chip .why { color: var(--faint); font-size: 0.8rem; }
.played .chip .icon { width: 1.4em; text-align: center; flex: none; }
@keyframes chip-in { from { opacity: 0; transform: translateX(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
.played .chip.xp .icon, .played .chip.xp .v { color: var(--xp); }
.played .chip.quiet { color: var(--dim); }
.played .chip.round .icon { color: var(--bad); }
.played .chip.round .v { color: var(--bad); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em; }
.played .chip.check > span:last-child { min-width: 0; }

.played .die { position: relative; width: 2.3em; height: 2.3em; flex: none; display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.played .die svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.played .die svg polygon { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.55); stroke-width: 3; }
.played .die b { position: relative; font-size: 0.95em; }
.played .die.rolling { animation: tumble 0.12s linear infinite; }
@keyframes tumble { 0% { transform: rotate(0deg) scale(0.92); } 50% { transform: rotate(180deg) scale(1.06); } 100% { transform: rotate(360deg) scale(0.92); } }
.played .die.land { animation: land 0.35s cubic-bezier(.2, .8, .3, 1.5); }
@keyframes land { from { transform: scale(1.5); } to { transform: scale(1); } }
.played .die.toned { color: var(--tone); }
.played .die.toned svg polygon { stroke: var(--tone); fill: color-mix(in srgb, var(--tone) 16%, transparent); }
.played .die.crit svg polygon { fill: rgba(255, 215, 90, 0.25); stroke: var(--gold); }
.played .die.crit { color: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 215, 90, 0.9)); }
.played .chip.dice { align-items: center; flex-wrap: wrap; }
.played .pips { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.played .die.pip { width: 2.2em; height: 2.2em; font-size: 0.95em; }
.played .die.pip b { font-size: 0.82em; }
.played .die.pip.d6 svg polygon { stroke: #e9e4d6; }
.played .die.pip.max { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 215, 90, 0.85)); }
.played .die.pip.max svg polygon { fill: rgba(255, 215, 90, 0.18); }
.played .die.pip.low { color: var(--faint); }
.played .chip.dice .flat { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.played .chip.dice .eq { color: var(--faint); }
.played .chip.dice .dtotal { display: inline-block; font-size: 1.08em; color: var(--ink); font-variant-numeric: tabular-nums; }
.played .verdict { opacity: 0; transition: opacity 0.25s; font-weight: 700; letter-spacing: 0.04em; }
.played .verdict.shown { opacity: 1; }
.played .verdict.yes { color: var(--good); }
.played .chip.check .sum b { display: inline-block; }

/* the edge the play behind a roll earned, a pill in the sum */
.played .play { --tone: var(--gold); --rim: rgba(255, 215, 122, 0.26); position: relative; display: inline-flex; align-items: baseline; gap: 0.35em; padding: 0 0.5em;
  border: 1px solid var(--rim); border-radius: 999px; overflow: hidden; white-space: nowrap; vertical-align: baseline;
  color: var(--tone); font-size: 0.86em; font-weight: 700; font-variant-numeric: tabular-nums; }
.played .play i { font-family: var(--serif); font-weight: 400; color: var(--ink-soft); opacity: 0.8; }
.played .play.e3 { box-shadow: 0 0 10px rgba(255, 215, 122, 0.16); }
.played .play-flash { position: absolute; inset: 0; background: #fff; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; }
.play-ring { position: fixed; z-index: 7; pointer-events: none; border: 3px solid; border-radius: 999px; mix-blend-mode: screen; }

.played .mod { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; }
.played .mod.mn3 { color: var(--mod-n3); } .played .mod.mn2 { color: var(--mod-n2); } .played .mod.mn1 { color: var(--mod-n1); } .played .mod.mp0 { color: var(--mod-0); }
.played .mod.mp1 { color: var(--mod-p1); } .played .mod.mp2 { color: var(--mod-p2); }
.played .mod.mp3 { color: var(--mod-p3); text-shadow: 0 0 8px rgba(111, 211, 255, 0.45); }

/* the window's whole-screen effects, kept to the frame */
.played .turn.shake { animation: shake var(--shake-time, 0.45s) cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translate(calc(var(--shake, 6px) * -0.3), 1px); }
  20%, 80% { transform: translate(calc(var(--shake, 6px) * 0.5), -1px); }
  30%, 50%, 70% { transform: translate(calc(var(--shake, 6px) * -1), 2px) rotate(-0.3deg); }
  40%, 60% { transform: translate(var(--shake, 6px), -2px) rotate(0.3deg); }
}
.played .turn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow 2.4s ease; }
.played .turn.in-fight::after { box-shadow: inset 0 0 60px 8px rgba(140, 12, 12, 0.42); animation: fight-pulse 2.6s ease-in-out infinite; }
@keyframes fight-pulse { 50% { box-shadow: inset 0 0 85px 14px rgba(160, 16, 16, 0.5); } }

.played .banner { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.played .banner .card { text-align: center; animation: banner 3.4s cubic-bezier(.2, .7, .2, 1) both; }
.played .banner .title { font-family: var(--caps); font-weight: 700; font-size: clamp(1.8rem, 1rem + 3vw, 3rem); letter-spacing: 0.45em; margin-right: -0.45em;
  color: var(--xp); text-shadow: 0 0 30px rgba(255, 243, 166, 0.85), 0 0 80px rgba(255, 200, 80, 0.5); }
.played .banner .subtitle { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); margin-top: 0.3rem; text-shadow: 0 0 20px #000; }
@keyframes banner {
  0% { opacity: 0; letter-spacing: 1.1em; filter: blur(12px); }
  22% { opacity: 1; letter-spacing: 0.45em; filter: blur(0); }
  78% { opacity: 1; letter-spacing: 0.4em; filter: blur(0); }
  100% { opacity: 0; letter-spacing: 0.36em; filter: blur(6px); }
}

.played .slash { position: absolute; z-index: 7; pointer-events: none; height: 3px; width: 150%; left: 50%; top: 50%;
  background: linear-gradient(90deg, transparent, #fff 45%, #ff4d4d 55%, transparent); box-shadow: 0 0 18px #ff3a3a, 0 0 4px #fff;
  transform-origin: center; animation: slash 0.42s cubic-bezier(.3, .9, .3, 1) both; }
@keyframes slash { 0% { transform: translate(-50%, -50%) rotate(var(--angle, -28deg)) scaleX(0); opacity: 1; } 55% { transform: translate(-50%, -50%) rotate(var(--angle, -28deg)) scaleX(1); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(var(--angle, -28deg)) scaleX(1.05); opacity: 0; } }

.played .sabres { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.played .sabre { position: absolute; width: 52px; height: 260px; top: 50%; left: 50%; margin: -130px 0 0 -26px;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 120, 80, 0.35)); }
.played .sabre svg { width: 100%; height: 100%; display: block; }
.played .sabre.left { animation: sabre-in-left 2.2s cubic-bezier(.2, .9, .25, 1) both; }
.played .sabre.right { animation: sabre-in-right 2.2s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes sabre-in-left { 0% { transform: translate(-360px, 160px) rotate(-80deg); opacity: 0; } 18% { opacity: 1; } 22% { transform: translate(-8px, 0) rotate(-32deg); }
  26% { transform: translate(-4px, 0) rotate(-30deg); } 75% { transform: translate(-4px, 0) rotate(-30deg); opacity: 1; } 100% { transform: translate(-4px, -16px) rotate(-30deg) scale(1.08); opacity: 0; } }
@keyframes sabre-in-right { 0% { transform: translate(360px, 160px) rotate(80deg) scaleX(-1); opacity: 0; } 18% { opacity: 1; } 22% { transform: translate(8px, 0) rotate(32deg) scaleX(-1); }
  26% { transform: translate(4px, 0) rotate(30deg) scaleX(-1); } 75% { transform: translate(4px, 0) rotate(30deg) scaleX(-1); opacity: 1; } 100% { transform: translate(4px, -16px) rotate(30deg) scaleX(-1) scale(1.08); opacity: 0; } }
.played .sabres.parting .sabre.left { animation: sabre-part-left 1.8s ease-in both; }
.played .sabres.parting .sabre.right { animation: sabre-part-right 1.8s ease-in both; }
@keyframes sabre-part-left { 0% { transform: translate(-4px, 0) rotate(-30deg); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(-120px, 110px) rotate(-8deg); opacity: 0; } }
@keyframes sabre-part-right { 0% { transform: translate(4px, 0) rotate(30deg) scaleX(-1); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(120px, 110px) rotate(8deg) scaleX(-1); opacity: 0; } }

.sparks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }