/* ============================================================
   PRESALE — visual-novel cold call overlay.
   Old anime dating-game layout on Win95 hardware: portrait
   left, dialogue right, choices below, FOMO ticker underneath.
   ============================================================ */

#presale {
  position: fixed; inset: 0; z-index: 9650;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 18px 58px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.25), rgba(0,0,0,.72)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.06) 3px 4px);
  animation: ps-fadein .45s ease-out;
}
#presale.gone { animation: ps-fadeout .4s ease-in forwards; pointer-events: none; }
@keyframes ps-fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-fadeout { from { opacity: 1; } to { opacity: 0; } }

#presale.zap { animation: ps-zap .3s steps(3); }
@keyframes ps-zap {
  0% { filter: invert(0); } 40% { filter: invert(.9) hue-rotate(90deg); } 100% { filter: invert(0); }
}

.ps-frame {
  width: min(1080px, 100%);
  background: #c0c0c0;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  padding: 4px; position: relative;
  animation: ps-slideup .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes ps-slideup { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- top bar ---- */
.ps-topbar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font: 700 12px "IBM Plex Mono", monospace;
  padding: 4px 8px; letter-spacing: .5px; overflow: hidden; white-space: nowrap;
}
.ps-live { color: #ff5050; animation: ps-blink 1.1s steps(2) infinite; }
@keyframes ps-blink { 50% { opacity: .25; } }
.ps-badge-t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ps-meta { font-weight: 400; font-size: 11px; opacity: .95; }
#ps-spots.flash { animation: ps-spotflash .8s steps(4); }
@keyframes ps-spotflash { 0%,100% { color: #fff; } 50% { color: #ffe14d; text-shadow: 0 0 8px #ffe14d; } }

/* ---- stage: portrait + dialogue ---- */
.ps-stage { display: flex; gap: 8px; padding: 8px; align-items: stretch; }

.ps-portrait { width: 168px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.ps-photo {
  height: 190px; display: flex; align-items: center; justify-content: center;
  background: #001a10;
  border: 2px solid; border-color: #404040 #fff #fff #404040;
  color: #39d353; font: 700 15px "VT323", monospace; letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(57,211,83,.7);
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(57,211,83,.05) 2px 3px);
  user-select: none;
}
.ps-nameplate {
  background: #000; color: #ffe14d; text-align: center;
  font: 700 12px "IBM Plex Mono", monospace; padding: 3px 2px; letter-spacing: 1px;
  border: 2px solid; border-color: #404040 #fff #fff #404040;
}

/* portrait idle moods */
.anim-sway    { animation: ps-sway 3.2s ease-in-out infinite; }
.anim-bounce  { animation: ps-bounce .55s ease-in-out infinite; }
.anim-lean    { animation: ps-lean 2.4s ease-in-out infinite; }
.anim-shake   { animation: ps-shakes .5s ease-in-out infinite; }
.anim-pulse   { animation: ps-pulse 1s ease-in-out infinite; }
.anim-vibrate { animation: ps-vibrate .12s linear infinite; }
@keyframes ps-sway    { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1.2deg); } }
@keyframes ps-bounce  { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.03); } }
@keyframes ps-lean    { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(5px) rotate(1.5deg) scale(1.02); } }
@keyframes ps-shakes  { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }
@keyframes ps-pulse   { 0%,100% { transform: scale(1); filter: none; } 50% { transform: scale(1.035); filter: brightness(1.25); } }
@keyframes ps-vibrate { 0% { transform: translate(1px,-1px); } 25% { transform: translate(-1px,1px); } 50% { transform: translate(1px,1px); } 75% { transform: translate(-1px,-1px); } 100% { transform: translate(1px,-1px); } }
.ps-photo.jolt { animation: ps-jolt .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes ps-jolt { 0% { transform: scale(.86) rotate(-3deg); } 60% { transform: scale(1.06) rotate(1.5deg); } 100% { transform: scale(1); } }

/* ---- dialogue box ---- */
.ps-box {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: #000; border: 2px solid; border-color: #404040 #fff #fff #404040;
  padding: 10px 12px 8px; position: relative;
}
.ps-text {
  color: #d7ffd7; font: 400 19px "VT323", monospace; line-height: 1.28;
  min-height: 96px; white-space: pre-wrap; word-break: break-word; cursor: pointer;
}
.ps-text.typing::after { content: '▌'; color: #39d353; animation: ps-blink .7s steps(2) infinite; }
.ps-hype { color: #ffe14d; font-weight: 700; display: inline-block; animation: ps-hype .6s ease-in-out infinite; text-shadow: 0 0 8px rgba(255,225,77,.5); }
@keyframes ps-hype { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px) scale(1.06); } }


/* ---- choices ---- */
.ps-choices { margin-top: 10px; display: none; flex-direction: column; gap: 6px; }
.ps-choices.show { display: flex; }
.ps-choice {
  text-align: left; cursor: pointer;
  background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  font: 500 13px "IBM Plex Mono", monospace; padding: 6px 10px;
  opacity: 0; transform: translateY(8px);
  animation: ps-choicein .3s ease-out forwards;
}
@keyframes ps-choicein { to { opacity: 1; transform: none; } }
.ps-choice::before { content: '▶ '; color: #000080; }
.ps-choice:hover { background: #000080; color: #fff; }
.ps-choice:hover::before { color: #ffe14d; }
.ps-choice:active { border-color: #404040 #fff #fff #404040; }

/* ---- FOMO ticker ---- */
.ps-ticker {
  margin: 0 8px 6px; overflow: hidden; background: #000;
  border: 2px solid; border-color: #404040 #fff #fff #404040;
}
.ps-ticker-inner {
  display: inline-block; white-space: nowrap; padding: 3px 0;
  color: #39d353; font: 400 15px "VT323", monospace;
  animation: ps-ticker 55s linear infinite;
}
@keyframes ps-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- skip: a big red ✕ perched on the top-right corner of the window ---- */
.ps-skip {
  position: absolute; top: -44px; right: -2px;
  width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #d33; color: #fff;
  border: 2px solid; border-color: #ff9a9a #6a0000 #6a0000 #ff9a9a;
  font: 700 20px "IBM Plex Mono", monospace; line-height: 1; padding: 0 0 2px;
  box-shadow: 0 0 0 1px #000, 4px 4px 0 rgba(0,0,0,.45);
  animation: ps-skipin .5s cubic-bezier(.2,1.4,.4,1) .6s both;
}
@keyframes ps-skipin { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.ps-skip:hover { background: #f44; }
.ps-skip:active { border-color: #6a0000 #ff9a9a #ff9a9a #6a0000; }

/* ---- hang-up: the window is yanked off the desk mid-scream ---- */
#presale.hangup { animation: ps-fadeout .35s ease-in .95s forwards; }
#presale.hangup .ps-frame { animation: ps-hangup 1.2s cubic-bezier(.55,0,1,.55) forwards; }
@keyframes ps-hangup {
  0%   { transform: none; }
  12%  { transform: translateY(-18px) rotate(-2.5deg); }
  24%  { transform: translateY(-10px) rotate(2deg); }
  100% { transform: translate(60px, 130vh) rotate(28deg); }
}
#presale.hangup .ps-photo img { filter: saturate(1.4) contrast(1.15); }

/* ---- toasts (calls coming in) ---- */
.ps-toasts { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5; pointer-events: none; }
.ps-toast {
  max-width: 300px; background: #ffffe1; color: #222;
  border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  font: 400 12px "IBM Plex Mono", monospace; padding: 6px 9px;
  animation: ps-toastin .35s cubic-bezier(.2,1.5,.4,1);
}
.ps-toast.phone { background: #e1f0ff; font-weight: 700; }
.ps-toast.bye { animation: ps-toastout .45s ease-in forwards; }
@keyframes ps-toastin  { from { transform: translateX(120%); } to { transform: none; } }
@keyframes ps-toastout { to { transform: translateX(120%); opacity: 0; } }

/* ---- money rain ---- */
.ps-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.ps-rain span {
  position: absolute; top: -34px;
  animation-name: ps-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes ps-fall {
  to { transform: translateY(110vh) rotate(360deg); opacity: .85; }
}

/* ---- small screens: stack portrait above the box ---- */
@media (max-width: 640px) {
  #presale { padding: 0 6px 46px; }
  .ps-stage { flex-direction: row; }
  .ps-portrait { width: 108px; }
  .ps-photo { height: 120px; font-size: 12px; }
  .ps-text { font-size: 16px; min-height: 80px; }
  .ps-meta { display: none; }
  .ps-toasts { top: 8px; right: 8px; }
  .ps-toast { max-width: 210px; font-size: 11px; }
}

/* ---- incoming call ---- */
.ps-ringbox {
  width: min(340px, 92vw);
  background: #c0c0c0;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 8px 8px 0 rgba(0,0,0,.5);
  padding: 4px; text-align: center;
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  animation: ps-slideup .4s cubic-bezier(.2,1.4,.4,1);
}
#presale:not(.ringing) .ps-ringbox { display: none; }
.ps-ring-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font: 700 12px "IBM Plex Mono", monospace;
  padding: 4px 8px; letter-spacing: 2px; text-align: left;
  animation: ps-blink 1.2s steps(2) infinite;
}
.ps-ring-phone {
  font-size: 64px; line-height: 1.2; margin: 14px 0 4px;
  display: inline-block;
}
.ps-ring-phone.ring { animation: ps-ringring 1.1s ease-in-out; }
@keyframes ps-ringring {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70% { transform: rotate(-14deg) translateY(-3px); }
  20%, 40%, 60%, 80% { transform: rotate(14deg) translateY(-3px); }
}
.ps-ring-who {
  font: 700 13px "IBM Plex Mono", monospace; color: #000;
  padding: 0 10px 4px;
}
.ps-ring-sub { font-weight: 400; font-size: 10.5px; color: #444; }
.ps-ring-joke {
  margin: 8px 10px 0; padding: 6px 8px;
  background: #ffffe1; border: 1px solid #000;
  font: 400 11.5px "IBM Plex Mono", monospace; color: #222;
}
.ps-ring-joke.pop { animation: ps-toastin .3s cubic-bezier(.2,1.5,.4,1); }
.ps-ring-btns { display: flex; gap: 10px; justify-content: center; padding: 12px 0 10px; }
.ps-ring-btn {
  min-width: 96px; padding: 7px 12px; cursor: pointer;
  background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff;
  font: 700 12px "IBM Plex Mono", monospace;
}
.ps-ring-btn.yes { color: #006400; }
.ps-ring-btn.yes:hover { background: #000080; color: #fff; }
.ps-ring-btn:active { border-color: #404040 #fff #fff #404040; }

/* while ringing, only the phone box shows */
#presale.ringing .ps-frame { display: none; }

/* ---- in-call floor mute ---- */
.ps-mute {
  margin-left: 8px; cursor: pointer;
  background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  font: 700 10px "IBM Plex Mono", monospace; padding: 2px 7px;
}
.ps-mute.off { color: #888; border-color: #404040 #fff #fff #404040; }

/* ---- MEGA lightning (the all-in moment) ---- */
#presale .ps-flashpane {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none; z-index: 6;
}
#presale.megazap .ps-flashpane { animation: ps-strobe 1.3s linear; }
@keyframes ps-strobe {
  0%, 100% { opacity: 0; }
  4%  { opacity: .95; }
  9%  { opacity: 0; }
  14% { opacity: .8; }
  20% { opacity: 0; }
  34% { opacity: .55; }
  40% { opacity: 0; }
  58% { opacity: .3; }
  64% { opacity: 0; }
}
#presale.megazap .ps-frame { animation: ps-quake .85s linear; }
@keyframes ps-quake {
  0%, 100% { transform: none; }
  10% { transform: translate(-7px, 4px) rotate(-.6deg); }
  25% { transform: translate(6px, -5px) rotate(.5deg); }
  40% { transform: translate(-5px, -3px) rotate(-.4deg); }
  55% { transform: translate(5px, 4px) rotate(.4deg); }
  70% { transform: translate(-3px, 2px); }
  85% { transform: translate(2px, -2px); }
}
.ps-bolt {
  position: absolute;
  filter: drop-shadow(0 0 18px #fff) drop-shadow(0 0 40px #ffe14d);
  animation: ps-boltflash .55s ease-out forwards;
  opacity: 0;
}
@keyframes ps-boltflash {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  12% { opacity: 1; transform: scale(1.25) rotate(4deg); }
  30% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(.92) translateY(24px); }
}

/* tiers Jordan has removed: still on the menu, purely as a monument */
.ps-choice.dead {
  opacity: .5; cursor: not-allowed;
  background: #8a8a8a; color: #2b2b2b;
}
.ps-choice.dead::before { content: '✕ '; color: #7a0000; }
.ps-choice.dead:hover { background: #8a8a8a; color: #2b2b2b; }
.ps-choice.dead:hover::before { color: #7a0000; }
.ps-choice.dead em { font-style: normal; font-size: 11px; color: #4a3500; }

/* the sentence that closes the deal gets the full marquee */
.ps-hype-big {
  font-size: 1.35em; letter-spacing: 2px; margin: 0 6px;
  animation: ps-hypebig .5s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255,225,77,.9), 0 0 26px rgba(255,196,0,.6);
}
@keyframes ps-hypebig {
  0%, 100% { transform: translateY(0) scale(1) rotate(-.5deg); }
  50% { transform: translateY(-3px) scale(1.12) rotate(.5deg); }
}

/* the portrait: photo fills the slot; the Poza_tip tag only shows without it */
.ps-photo { position: relative; overflow: hidden; }
.ps-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.92) contrast(1.04);
}
#ps-photo-tag { position: relative; z-index: 1; }
.ps-photo img:not([hidden]) ~ #ps-photo-tag { display: none; }

/* ---- THE TERMS: the little menu he hopes you'll click ---- */
.ps-facts {
  flex: 0 0 148px; display: flex; flex-direction: column; gap: 4px;
  background: #c0c0c0; padding: 6px;
  border: 2px solid; border-color: #404040 #fff #fff #404040;
}
.ps-facts-title {
  background: #000; color: #39d353; text-align: center;
  font: 700 11px "IBM Plex Mono", monospace; letter-spacing: 2px;
  padding: 3px 0; margin-bottom: 2px;
}
.ps-facts button {
  text-align: left; cursor: pointer;
  background: #d6d6d6; color: #111;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  font: 700 10px "IBM Plex Mono", monospace; padding: 5px 6px;
}
.ps-facts button:hover { background: #000080; color: #ffe14d; }
.ps-facts button:active { border-color: #404040 #fff #fff #404040; }
.ps-facts-foot {
  margin-top: auto; text-align: center;
  font: 400 9px "IBM Plex Mono", monospace; color: #555;
}

@media (max-width: 760px) {
  .ps-stage { flex-wrap: wrap; }
  .ps-facts {
    flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 3px;
  }
  .ps-facts-title { flex: 1 1 100%; }
  .ps-facts button { flex: 1 1 30%; font-size: 9px; padding: 4px 3px; }
  .ps-facts-foot { display: none; }
}

/* ---- returning visitors: past the pitch, this visit only ---- */
.ps-ring-skip {
  display: block; width: calc(100% - 20px); margin: -2px 10px 12px; padding: 7px 12px; cursor: pointer;
  background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  font: 700 12px "IBM Plex Mono", monospace; text-align: center;
}
.ps-ring-skip span { display: block; font-weight: 400; font-size: 9.5px; color: #555; margin-top: 3px; }
.ps-ring-skip:hover { background: #000080; color: #fff; }
.ps-ring-skip:hover span { color: #cfd8ff; }
.ps-ring-skip:active { border-color: #404040 #fff #fff #404040; }