html { font-size: 20px; }
body {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  background: linear-gradient(180deg, #0b0221 0%, #2a0b4f 40%, #7a1c7a 72%, #ff6ad5 100%) fixed;
}
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 113, 206, .5) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 113, 206, .5) 2px, transparent 2px);
  background-size: 2rem 2rem;
  transform: perspective(12rem) rotateX(55deg);
  transform-origin: bottom;
}
.phone { max-width: 30rem; margin: 0 auto; padding: max(.6rem, env(safe-area-inset-top)) 1rem 2.5rem; }
#screen > * + * { margin-top: .8rem; }
.win > .tb { font-size: 1.1rem; }
.center { text-align: center; }
p { margin: .5rem 0; font-size: 1.3rem; line-height: 1.12; }
.small { font-size: 1.05rem; color: #333; }

/* top bar */
.ptop {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(18, 0, 43, .9);
  border: 2px solid var(--pink);
  padding: .15rem .5rem;
  margin-bottom: .5rem;
}
.ptop[hidden] { display: none; }
.pcat { width: 2.2rem; height: 2.2rem; flex: none; }
.pname { flex: 1; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plives .pips i { width: .5rem; height: .5rem; }
.pcode { color: var(--yellow); font-size: 1.1rem; letter-spacing: .1em; }
.ptimer { height: .55rem; background: rgba(255, 255, 255, .2); margin-bottom: .6rem; }
.ptimer[hidden] { display: none; }
.ptimer div { height: 100%; width: 100%; background: var(--mint); }
.ptimer.low div { background: var(--hot); }

/* join */
.logo-sm {
  font-family: var(--logo);
  font-size: 2.6rem;
  line-height: 1.05;
  text-align: center;
  background: linear-gradient(#fffb96 10%, #ff71ce 55%, #01cdfe 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: .8rem 0 .3rem;
  filter: drop-shadow(0 0 .15em rgba(255, 113, 206, .7));
}
.tag-sm { text-align: center; color: var(--cyan); font-size: 1.2rem; margin-bottom: .8rem; }
.field { display: block; font-size: 1.2rem; margin-bottom: .7rem; }
.field input {
  display: block;
  width: 100%;
  margin-top: .15rem;
  font: inherit;
  font-size: 1.9rem;
  padding: .15rem .45rem;
  color: #111;
  background: #fff;
  border: 2px solid;
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 0 #222;
  border-radius: 0;
}
#code { letter-spacing: .35em; text-transform: uppercase; }
.err { min-height: 1.4rem; color: var(--hot); font-size: 1.2rem; margin-top: .4rem; text-align: center; }
.btn98.big { display: block; width: 100%; font-size: 1.7rem; padding: .35rem 1rem; margin-top: .5rem; }

/* lobby */
.big-cat { width: 9rem; height: 9rem; margin: .1rem auto; animation: bob 2.6s ease-in-out infinite; }
.mid-cat { width: 6rem; height: 6rem; margin: .6rem auto 0; animation: bob 2.6s ease-in-out infinite; }
.hi { font-size: 1.5rem; }
.acc-row { display: flex; align-items: center; justify-content: center; gap: .8rem; font-size: 1.35rem; margin: .4rem 0; }
.acc-row span { min-width: 7rem; }
.acc-row .btn98 { font-size: 1.3rem; padding: .1rem .8rem; }
.skins { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .5rem; }
.skin {
  font: inherit;
  font-size: .95rem;
  color: #111;
  background: #e6e6e6;
  border: 2px solid;
  border-color: #fff #222 #222 #fff;
  padding: .25rem .1rem .1rem;
}
.skin .cat-svg { height: 3.1rem; }
.skin.on { background: var(--yellow); border-color: #222 #fff #fff #222; }
.skin:disabled { opacity: .45; }
.hint { text-align: center; font-size: 1.35rem; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.3rem); } }

/* generic screens */
.tv { font-size: 2.6rem; }
.big { font-size: 2.3rem; line-height: 1; margin: .3rem 0; color: var(--violet); }
.big.good { color: #0a7a50; }
.big.bad { color: var(--hot); }
.big.meh { color: #8a6a00; }
.delta { font-size: 2.6rem; margin: .2rem 0; }
.delta.neg { color: var(--hot); }
.delta.pos { color: #0a7a50; }

/* questions */
.qtext {
  background: rgba(18, 0, 43, .88);
  border: 2px solid var(--cyan);
  padding: .5rem .7rem;
  font-size: 1.45rem;
  line-height: 1.1;
}
.qtext small { color: #ddd; font-size: 1.1rem; }
.popts { display: grid; gap: .65rem; }
.popt, .locked-opt {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 4rem;
  padding: .4rem .7rem;
  text-align: left;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.05;
  color: #111;
  background: var(--oc);
  border: 3px solid var(--ink);
  box-shadow: .25rem .25rem 0 var(--ink);
}
.popt:active { transform: translate(.15rem, .15rem); box-shadow: .1rem .1rem 0 var(--ink); }
.popt b, .locked-opt b {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--oc);
  font-size: 1.6rem;
}
.cat-label { font-size: 1.1rem; color: #444; letter-spacing: .1em; }
.category { font-size: 2rem; color: var(--violet); margin-bottom: .3rem; }
.bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .4rem; }
.bet { font-size: 2.1rem; padding: .6rem 0; }
.year { font-size: 4.6rem; line-height: 1; color: var(--violet); }
input[type='range'] { width: 100%; height: 2.2rem; accent-color: var(--violet); }
.year-btns { display: flex; justify-content: center; gap: .6rem; margin: .3rem 0; }
.year-btns .btn98 { font-size: 1.5rem; padding: .15rem 1.1rem; }
.type-target {
  background: #000;
  color: var(--mint);
  font-size: 1.75rem;
  line-height: 1.1;
  padding: .4rem .6rem;
  user-select: none;
  -webkit-user-select: none;
}
#typeInput {
  display: block;
  width: 100%;
  margin-top: .6rem;
  font: inherit;
  font-size: 1.75rem;
  padding: .25rem .5rem;
  color: #111;
  background: #fff;
  border: 3px solid #0a9a62;
  border-radius: 0;
  outline: none;
}
#typeInput.bad { border-color: var(--hot); background: #ffe3ee; }
.tprog { margin-top: .5rem; }
.tprog > div { background: repeating-linear-gradient(90deg, #0a9a62 0 .7em, transparent .7em .85em); transition: width .15s; }

/* pop-up ad mode */
.adwin > .tb { background: linear-gradient(90deg, var(--hot), var(--yellow), var(--hot)); color: #111; text-shadow: none; }
.adwin > .bd { background: repeating-linear-gradient(45deg, #fffb96 0 14px, #ffef7a 14px 28px); }
.targets { display: grid; gap: .5rem; margin-top: .5rem; }
.target { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; padding: .3rem .6rem; text-align: left; }
.target .tcat { width: 2.6rem; height: 2.6rem; flex: none; }
.target .tname { flex: 1; }
.reload { color: #333; }

/* incoming pop-ups */
#popups { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.popup { position: absolute; pointer-events: auto; animation: pop-in .25s ease-out; }
.popup .tb { font-size: 1.05rem; }
.popup .tb .x { width: 1.25rem; height: 1.15rem; font-size: .75rem; cursor: pointer; }
.popup .bd { text-align: center; font-size: 1.35rem; line-height: 1.1; }
.popup .ad-body { padding: .5rem .2rem .7rem; }
.popup .claim { font-size: 1.5rem; background: var(--mint); animation: throb .5s ease-in-out infinite alternate; }
.popup .spon { margin-top: .4rem; font-size: .95rem; color: #333; }
.popup.v0 .bd { background: linear-gradient(#fffb96, #ffd319); }
.popup.v1 .bd { background: linear-gradient(#b5fff0, #01cdfe); }
.popup.v2 .bd { background: linear-gradient(#ffd0f2, #ff71ce); }
.popup.v3 .bd { background: linear-gradient(#e2ccff, #b967ff); }
@keyframes throb { to { transform: scale(1.08); } }

#ppaused { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(11, 2, 33, .7); }
#ppaused[hidden] { display: none; }
#ppaused .bd { font-size: 2.6rem; text-align: center; padding: .8rem 2rem; }
#ppaused small { display: block; font-size: 1.1rem; color: #333; }

/* ---------- phones as part of the show ---------- */
.lights { position: fixed; inset: 0; z-index: 90; pointer-events: none; mix-blend-mode: screen; }
.l-win { background: var(--mint); animation: lights-once .9s ease-out forwards; }
.l-death { background: #ff1a1a; animation: lights-strobe .3s steps(2) 5; }
.l-party { animation: lights-party 1.8s linear forwards; }
.l-gold { background: radial-gradient(circle, #fff6a8, #ffd319 50%, #b8860b); animation: lights-once 1.6s ease-out forwards; }
.l-storm { background: #fff; animation: lights-strobe .18s steps(2) 6; }
@keyframes lights-once { from { opacity: .9; } to { opacity: 0; } }
@keyframes lights-strobe { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes lights-party { 0% { background: #ff2a6d; opacity: .85; } 20% { background: #ffd319; } 40% { background: #05ffa1; } 60% { background: #01cdfe; } 80% { background: #b967ff; opacity: .7; } 100% { background: #ff2a6d; opacity: 0; } }
body.beat::after { content: ''; position: fixed; inset: 0; z-index: 85; pointer-events: none; box-shadow: inset 0 0 3rem 1rem rgba(255, 30, 60, .55); animation: heartbeat .7s ease-out forwards; }
@keyframes heartbeat { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: .3; } 45% { opacity: .9; } 100% { opacity: 0; } }
.rec-dot { position: fixed; top: .5rem; right: .5rem; z-index: 95; font-size: 1.1rem; color: #fff; background: #d10000; padding: .1rem .5rem; border: 2px solid #000; animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink { 50% { opacity: .3; } }
.quest.camon { background: #ffd0d0; }
.quest.shopq { background: linear-gradient(#fffb96, #ffd319); }

/* ---------- the mall shop ---------- */
.shop h4 { margin: .9rem 0 .3rem; font-weight: normal; font-size: 1.35rem; color: var(--violet, #7b2ff7); }
.shop h4 small { display: block; font-size: .95rem; color: #555; }
.bucks { font-size: 1.5rem; text-align: center; background: #111; color: var(--mint, #05ffa1); padding: .3rem; border: 2px inset #888; }
.bucks small { display: block; font-size: .95rem; color: #aaa; }
.shop-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.sitem { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .4rem; text-align: left; font: inherit; font-size: 1.1rem; padding: .35rem .45rem; background: #c0c0c0; color: #111; border: 2px solid; border-color: #fff #222 #222 #fff; }
.sitem span { grid-row: span 2; font-size: 1.6rem; }
.sitem b { font-weight: normal; line-height: 1; }
.sitem small { font-size: .95rem; color: #6a00a8; }
.sitem.owned small { color: #006b2e; }
.sitem.on { background: #fffb96; border-color: #222 #fff #fff #222; }
.sitem:disabled { opacity: .45; }
.sitem:disabled small { color: #800; }
a.statslink { display: block; text-decoration: none; color: inherit; }
.mission .mtext, .mtext { font-size: 1.4rem; line-height: 1.25; padding: .5rem; margin: .3rem 0 .5rem; background: #111; color: var(--mint, #05ffa1); border: 2px inset #888; }