/* Shared pieces of the 20 Oct feedback pages, on top of ../kit.css: the PICK stamp, the pick bar, comic SFX lettering. */

/* offline-safe type: the game's fonts from ./fonts when Google Fonts can't load */
@font-face { font-family: "Lilita One"; src: url("fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Medium.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

/* ------------------------------------------------------------------ PICK stamp button */
.pick {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 14px; cursor: pointer;
  font: 400 20px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); white-space: nowrap;
  border: 3px solid var(--ink); border-radius: 13px;
  background: linear-gradient(180deg, #FFFDF6, #F1E6CC);
  box-shadow: inset 0 2px 0 #fff, 3px 5px 0 var(--ink);
  transform: rotate(-1.5deg); transition: transform 0.12s var(--out), box-shadow 0.12s;
}
.pick:hover { transform: rotate(-1.5deg) translateY(-2px); box-shadow: inset 0 2px 0 #fff, 3px 7px 0 var(--ink); }
.pick:active { transform: rotate(-1.5deg) translate(2px, 3px); box-shadow: inset 0 2px 0 #fff, 1px 2px 0 var(--ink); }
.pick__box { width: 24px; height: 24px; border: 3px solid var(--ink); border-radius: 7px; background: #fff; display: grid; place-items: center; flex: none; }
.pick__box svg { width: 18px; height: 18px; opacity: 0; transform: scale(0.3) rotate(-20deg); transition: 0.25s var(--spring); }
.pick.is-picked { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); }
.pick.is-picked .pick__box { background: var(--green); }
.pick.is-picked .pick__box svg { opacity: 1; transform: none; }
.pick .pick__on { display: none; }
.pick.is-picked .pick__off { display: none; }
.pick.is-picked .pick__on { display: inline; }
.pick.is-stamp { animation: pick-stamp 0.5s var(--spring); }
@keyframes pick-stamp { 0% { transform: rotate(-1.5deg) scale(1); } 30% { transform: rotate(-6deg) scale(1.16); } 60% { transform: rotate(1deg) scale(0.96); } 100% { transform: rotate(-1.5deg) scale(1); } }
.pick--sm { height: 36px; font-size: 16px; padding: 0 12px 0 9px; border-radius: 10px; box-shadow: inset 0 2px 0 #fff, 2px 4px 0 var(--ink); }
.pick--sm .pick__box { width: 19px; height: 19px; border-width: 2.5px; border-radius: 5px; }
.pick--sm .pick__box svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ the bottom pick bar */
.pickbar { position: fixed; z-index: 200; left: 0; right: 0; bottom: 0; pointer-events: none; padding: 0 12px 12px; }
.pickbar__in {
  pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 10px 9px 16px; border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, #3A3458, #1E1B2B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 10px 30px -8px rgba(0, 0, 0, 0.6), 3px 5px 0 var(--ink);
}
.pickbar__lbl { font: 400 17px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pickbar__list { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pickbar__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 10px; text-decoration: none; font: 700 12.5px / 1.1 var(--f-body); letter-spacing: 0.04em; color: var(--cream-3); background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 246, 224, 0.25); text-transform: uppercase; }
.pickbar__chip b { font: 400 13.5px / 1 var(--f-display); letter-spacing: 0.05em; color: var(--cream-2); }
.pickbar__chip.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); border: 2px solid var(--ink); }
.pickbar__chip.is-on b { color: var(--ink); }
.pickbar__copy { height: 42px; padding: 0 18px; cursor: pointer; font: 400 18px / 1 var(--f-display); letter-spacing: 0.04em; color: #fff; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, #7BEFA5, var(--green) 50%, #0F9442); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 2px 4px 0 var(--ink); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.pickbar__copy:active { transform: translate(1px, 3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--ink); }
.pickbar__ok { display: none; font: 800 12px / 1 var(--f-body); letter-spacing: 0.08em; color: var(--green); }
.pickbar__ok.is-on { display: inline; }
@media (max-width: 700px) { .pickbar__lbl { display: none; } .pickbar__chip { font-size: 11px; padding: 5px 7px; } .pickbar__copy { width: 100%; } }

/* ------------------------------------------------------------------ comic SFX lettering */
.sfxw { position: absolute; z-index: 20; pointer-events: none; white-space: nowrap; translate: -50% -50%; rotate: var(--r, -6deg); opacity: 0; font: 400 var(--fs, 34px) / 1 var(--f-display); letter-spacing: 0.02em; }
.sfxw b { display: inline-block; color: var(--c, #fff); -webkit-text-stroke: calc(var(--fs, 34px) * 0.2) var(--ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink); }
.sfxw.is-on { opacity: 1; animation: sfx-in 0.5s var(--spring) both; }
.sfxw.is-on b { animation: sfx-wob 0.9s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -0.11s); }
.sfxw.is-out { opacity: 0; transition: opacity 0.25s, translate 0.3s; translate: -50% -80%; }
.sfxw--y { --c: var(--yellow); }
.sfxw--p { --c: #FF7AB8; }
.sfxw--w { --c: #FFF6E0; }
.sfxw--b { --c: #8FD3FF; }
.sfxw--k { --c: #FFF6E0; font-style: italic; --fs: 24px; }
.sfxw--k b { text-shadow: 2px 3px 0 var(--ink); }
@keyframes sfx-in { 0% { scale: 0.2; } 55% { scale: 1.18; } 80% { scale: 0.95; } 100% { scale: 1; } }
@keyframes sfx-wob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }

/* fighters placed in a scene */
.actor { position: absolute; z-index: 5; }
.actor .fig, .actor { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .sfxw.is-on, .sfxw.is-on b { animation: none; } }