:root {
  --pj3-navy: #061429;
  --pj3-navy2: #0a1d37;
  --pj3-panel: #0c203b;
  --pj3-line: #1c4770;
  --pj3-cyan: #2ed9ff;
  --pj3-red: #ff414d;
  --pj3-red2: #a50f37;
  --pj3-green: #47d681;
  --pj3-yellow: #ffc94e;
  --pj3-text: #f7fbff;
  --pj3-muted: #a9bfd5
}

.pj3-bleed {
  position: relative;
  left: 50%;
  width: min(1440px, calc(100vw - 24px));
  max-width: none !important;
  margin: 28px 0 28px !important;
  transform: translateX(-50%);
  clear: both;
  box-sizing: border-box
}

.pj3-root,
.pj3-root * {
  box-sizing: border-box
}

.pj3-root {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 20%, #0e3262 0, #071b37 38%, #041126 75%, #030b19 100%);
  color: var(--pj3-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24)
}

.pj3-root button,
.pj3-root input {
  font: inherit
}

.pj3-root button {
  cursor: pointer
}

.pj3-circuit-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .46;
  background-image: linear-gradient(90deg, transparent 0 7%, rgba(46, 217, 255, .13) 7.1% 7.25%, transparent 7.35% 100%), linear-gradient(0deg, transparent 0 13%, rgba(255, 65, 77, .08) 13.1% 13.25%, transparent 13.35% 100%), radial-gradient(circle at 18% 30%, rgba(46, 217, 255, .7) 0 2px, transparent 3px), radial-gradient(circle at 83% 24%, rgba(255, 65, 77, .7) 0 2px, transparent 3px);
  background-size: 240px 100%, 100% 180px, 170px 130px, 190px 160px
}

.pj3-root:before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 38%, rgba(28, 134, 255, .13), transparent 35%), radial-gradient(circle at 8% 90%, rgba(255, 30, 87, .15), transparent 22%);
  pointer-events: none
}

.pj3-screen {
  display: none;
  min-height: 760px;
  padding: 34px 44px
}

.pj3-screen.is-active {
  display: block
}

.pj3-noscript {
  padding: 20px;
  background: #fff3cd;
  color: #4d3900
}

.pj3-language {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px
}

.pj3-language button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(8, 26, 53, .7);
  padding: 7px 10px;
  color: #c7dbed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em
}

.pj3-language button.is-active {
  border-color: var(--pj3-cyan);
  background: #0f3559;
  color: #fff;
  box-shadow: 0 0 18px rgba(46, 217, 255, .18)
}

.pj3-kicker {
  color: #7fdcf3;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase
}

.pj3-primary-cta {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 300px;
  margin: 0 !important;
  padding: 17px 20px 17px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff4b51, #e32b39) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  box-shadow: 0 13px 32px rgba(232, 40, 55, .35), inset 0 1px 0 rgba(255, 255, 255, .2) !important
}

.pj3-primary-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05)
}

.pj3-primary-cta i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  font-style: normal
}

.pj3-btn {
  appearance: none;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 850 !important
}

.pj3-btn-primary {
  border: 1px solid #4bdaff !important;
  background: #0f6391 !important;
  color: #fff !important
}

.pj3-btn-secondary {
  border: 1px solid #345f84 !important;
  background: #102b49 !important;
  color: #fff !important
}

.pj3-text-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #8eddf0;
  text-decoration: underline;
  font-weight: 800
}

.pj3-form-error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #b94959;
  border-radius: 12px;
  background: #481a28;
  color: #ffd7dc
}

.pj3-simple-header {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px
}

.pj3-back {
  appearance: none;
  width: 42px;
  height: 42px;
  border: 1px solid #315674;
  border-radius: 50%;
  background: #0c2846;
  color: #fff;
  font-size: 21px
}

.pj3-mini-brand {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .08em;
  color: #ff5c62
}

.pj3-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 99999;
  max-width: min(90vw, 560px);
  padding: 13px 18px;
  border: 1px solid #436b8c;
  border-radius: 999px;
  background: #071a31;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: .2s
}

.pj3-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0)
}

/* HOME */
.pj3-home {
  padding-top: 24px
}

.pj3-home-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr);
  gap: 60px;
  align-items: center;
  max-width: 1220px;
  margin: 54px auto 30px
}

.pj3-home-copy h1 {
  margin: 10px 0 18px !important;
  color: #ff454d !important;
  font-size: clamp(58px, 7vw, 93px) !important;
  line-height: .92 !important;
  font-weight: 600 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase !important
}

.pj3-home-copy>p {
  max-width: 680px;
  margin: 0 0 30px !important;
  color: #e7f3ff !important;
  font-size: clamp(19px, 2vw, 26px) !important;
  line-height: 1.48 !important;
  font-weight: 650 !important
}

.pj3-home-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 13px 0 0 0px;
  color: #a9bfd5;
  font-size: 12px;
  font-weight: 800
}

.pj3-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 540px
}

.pj3-glow-lock {
  position: absolute;
  inset: 16% 8% 20%;
  border: 2px solid rgba(46, 217, 255, .15);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(46, 217, 255, .13), inset 0 0 60px rgba(46, 217, 255, .07)
}

.pj3-glow-lock:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 140px;
  height: 130px;
  border: 10px solid rgba(46, 217, 255, .38);
  border-radius: 24px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 32px rgba(46, 217, 255, .3)
}

.pj3-glow-lock:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 27%;
  width: 86px;
  height: 88px;
  border: 10px solid rgba(46, 217, 255, .38);
  border-bottom: 0;
  border-radius: 55px 55px 0 0;
  transform: translateX(-50%)
}

.pj3-petis-hero {
  position: relative;
  z-index: 2;
  width: min(390px, 90%);
  margin-top: 95px;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, .35))
}

.pj3-hero-balance {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: 7%;
  min-width: 190px;
  padding: 13px 16px;
  border: 1px solid #2e5d80;
  border-radius: 14px;
  background: rgba(5, 23, 45, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
}

.pj3-hero-balance small,
.pj3-account small {
  display: block;
  color: #84a7c4;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em
}

.pj3-hero-balance strong {
  display: block;
  color: #58e492;
  font-size: 29px;
  line-height: 1
}

.pj3-hero-balance em,
.pj3-account em {
  display: block;
  margin-top: 4px;
  color: #8fa8bd;
  font-size: 10px;
  font-style: normal
}

.pj3-challenge-banner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 650px;
  margin: -10px 0 22px;
  padding: 13px 16px;
  border: 1px solid #3d6688;
  border-radius: 14px;
  background: #0b2947
}

.pj3-challenge-banner b {
  color: #ffcf55
}

.pj3-challenge-banner span {
  color: #dbeaf5
}

/* MODE */
.pj3-mode-inner {
  max-width: 1050px;
  margin: 54px auto
}

.pj3-section-copy {
  text-align: center
}

.pj3-section-copy h2 {
  margin: 8px 0 !important;
  color: #fff !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 950 !important
}

.pj3-section-copy p {
  margin: 0;
  color: #a9bfd5;
  font-size: 16px
}

.pj3-alias-box {
  margin: 24px auto 48px;
  text-align: center
}

.pj3-alias-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.pj3-alias {
  appearance: none;
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 8px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid #2b5578;
  border-radius: 17px;
  background: #0a2340;
  color: #fff;
  text-align: left
}

.pj3-alias>span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #123d64;
  color: #56ddff;
  font-size: 18px;
  font-weight: 950
}

.pj3-alias b {
  font-size: 15px
}

.pj3-alias i {
  opacity: 0;
  color: #59e18f;
  font-style: normal;
  font-weight: 950
}

.pj3-alias.is-selected {
  border-color: #50dbff;
  background: #0c3154;
  box-shadow: 0 0 0 1px #50dbff inset, 0 0 24px rgba(46, 217, 255, .09)
}

.pj3-alias.is-selected i {
  opacity: 1
}

.pj3-alias-box>.pj3-text-button {
  margin-top: 12px
}

.pj3-mode-copy {
  margin-top: 8px
}

.pj3-mode-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 23px
}

.pj3-mode-button {
  appearance: none;
  display: grid;
  grid-template-columns: 86px 1fr 34px;
  align-items: center;
  gap: 18px;
  min-height: 146px;
  padding: 22px;
  border: 1px solid #28618b;
  border-radius: 22px;
  background: linear-gradient(145deg, #0b294b, #071c35);
  color: #fff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03)
}

.pj3-mode-button:hover {
  border-color: #54dcff;
  transform: translateY(-2px)
}

.pj3-mode-button>i {
  font-style: normal;
  font-size: 28px;
  color: #75def7
}

.pj3-mode-svg {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #0d3a61;
  box-shadow: inset 0 0 24px rgba(46, 217, 255, .09)
}

.pj3-mode-svg svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: #82e5ff;
  stroke-width: 4;
  stroke-linecap: round
}

.pj3-mode-button b {
  display: block;
  font-size: 23px;
  font-weight: 950
}

.pj3-mode-button small {
  display: block;
  margin-top: 7px;
  color: #a8bfd3;
  font-size: 13px;
  line-height: 1.4
}

.pj3-mode-multi {
  border-color: #643858;
  background: linear-gradient(145deg, #281a35, #0a1a32)
}

.pj3-mode-multi .pj3-mode-svg {
  background: #3a2040
}

.pj3-mode-multi .pj3-mode-svg svg {
  stroke: #ff8894
}

.pj3-multi-setup {
  margin: 22px auto 0;
  padding: 22px;
  border: 1px solid #345f84;
  border-radius: 18px;
  background: #081d35
}

.pj3-multi-setup h3 {
  margin: 0 0 15px !important;
  color: #fff !important;
  font-size: 22px !important
}

.pj3-multi-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.pj3-join-inline {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 330px
}

.pj3-join-inline input {
  width: 150px !important;
  min-height: 46px !important;
  border: 1px solid #3a6587 !important;
  border-radius: 12px !important;
  background: #061425 !important;
  color: #fff !important;
  padding: 10px 14px !important;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .12em
}

/* LOBBY */
.pj3-lobby-inner {
  max-width: 980px;
  margin: 52px auto
}

.pj3-lobby-inner h2 {
  margin: 8px 0 8px !important;
  color: #fff !important;
  font-size: clamp(36px, 5vw, 66px) !important;
  font-weight: 950 !important
}

.pj3-lobby-inner>p {
  color: #a8bfd2;
  font-size: 17px
}

.pj3-room-code {
  appearance: none;
  border: 0;
  border-bottom: 2px dashed #59dfff;
  background: transparent;
  color: #5ce1ff;
  font: inherit;
  font-weight: 950;
  letter-spacing: .08em
}

.pj3-invite-box {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin: 24px 0
}

.pj3-invite-box input {
  min-width: 0 !important;
  border: 1px solid #345b7b !important;
  border-radius: 12px !important;
  background: #06182c !important;
  color: #b9ccdc !important;
  padding: 12px !important
}

.pj3-lobby-status {
  margin: 28px 0 11px;
  color: #dceaf5;
  font-weight: 900
}

.pj3-lobby-players {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.pj3-lobby-player {
  display: grid;
  grid-template-columns: 46px 1fr 20px;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border: 1px solid #315777;
  border-radius: 15px;
  background: #0a2440
}

.pj3-lobby-player>span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #143d5f;
  color: #65e2ff;
  font-weight: 950
}

.pj3-lobby-player b {
  display: block
}

.pj3-lobby-player small {
  color: #8da8be
}

.pj3-lobby-player i {
  color: #54df8a
}

.pj3-lobby-player.is-offline {
  opacity: .48
}

.pj3-lobby-footer {
  margin-top: 30px
}

.pj3-lobby-footer>div {
  color: #afc4d6;
  font-weight: 750
}

/* GAME */
.pj3-game {
  padding: 24px 30px 32px
}

.pj3-game-top {
  display: grid;
  grid-template-columns: 180px 1fr 150px 180px;
  gap: 14px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto 22px
}

.pj3-account {
  padding: 12px 15px;
  border: 1px solid #315675;
  border-radius: 14px;
  background: rgba(7, 29, 53, .88)
}

.pj3-account strong {
  display: block;
  margin-top: 2px;
  color: #5ae28f;
  font-size: 24px;
  line-height: 1.05
}

.pj3-account-scammer strong {
  color: #ff6574
}

.pj3-question-counter {
  text-align: center
}

.pj3-question-counter>b {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em
}

.pj3-progress {
  height: 8px;
  border-radius: 999px;
  background: #102e4b;
  overflow: hidden
}

.pj3-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #26c8f6, #7ee9ff);
  transition: width .25s
}

.pj3-hint-button {
  appearance: none;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 7px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #3d8fbc;
  border-radius: 999px;
  background: #09243f;
  color: #fff
}

.pj3-hint-button>span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #126297;
  color: #fff;
  font-weight: 950
}

.pj3-hint-button b {
  font-size: 11px
}

.pj3-hint-button small {
  color: #80daf2
}

.pj3-game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto
}

.pj3-question-stage {
  min-width: 0;
  padding: 28px 32px 34px;
  border: 1px solid #22517d;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(8, 31, 60, .94), rgba(4, 20, 42, .96));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .16)
}

.pj3-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center
}

.pj3-difficulty {
  padding: 7px 11px;
  border: 1px solid #2f6c93;
  border-radius: 999px;
  background: #0b3154;
  color: #7fe4ff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .1em
}

.pj3-risk {
  color: #b7cada;
  font-size: 12px
}

.pj3-risk i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 50%;
  background: #5d1d2e;
  color: #ff9ca5;
  font-style: normal;
  font-weight: 950
}

.pj3-risk b {
  color: #ff7c87
}

.pj3-scammer-quote {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 780px;
  margin: 22px auto 8px;
  padding: 12px 15px;
  border: 1px solid #393c67;
  border-radius: 15px;
  background: #101a38
}

.pj3-scammer-quote img {
  width: 58px;
  height: 58px;
  object-fit: contain
}

.pj3-scammer-quote span {
  color: #d1d9e8;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45
}

.pj3-scenario {
  max-width: 760px;
  margin: 18px auto
}

.pj3-scenario-window {
  overflow: hidden;
  border: 1px solid #57738d;
  border-radius: 15px;
  background: #eef3f8;
  color: #17243a
}

.pj3-scenario-window>span {
  display: block;
  height: 28px;
  background: linear-gradient(90deg, #dfe5ea, #c8d1da)
}

.pj3-scenario-window pre {
  white-space: pre-wrap;
  margin: 0 !important;
  padding: 20px !important;
  color: #22334a !important;
  font: 700 15px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace !important
}

.pj3-question-text {
  max-width: 950px;
  margin: 24px auto 28px !important;
  color: #fff !important;
  font-size: clamp(23px, 2.25vw, 34px) !important;
  line-height: 1.34 !important;
  text-align: center !important;
  font-weight: 760 !important
}

.pj3-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px
}

.pj3-answer-card {
  appearance: none;
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100% !important;
  min-height: 82px;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #2373a7 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0c3b64, #092c4e) !important;
  color: #fff !important;
  text-align: left !important;
  box-shadow: inset 0 0 0 1px rgba(63, 215, 255, .04) !important
}

.pj3-answer-card:hover:not(:disabled) {
  border-color: #5de3ff !important;
  transform: translateY(-1px)
}

.pj3-answer-card>span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #48cbe8;
  background: #072442;
  color: #ffc84d;
  font-weight: 950
}

.pj3-answer-card b {
  font-size: 14px;
  line-height: 1.4
}

.pj3-answer-card.is-removed {
  opacity: .12;
  filter: grayscale(1);
  pointer-events: none
}

.pj3-truth-grid,
.pj3-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.pj3-truth-card {
  appearance: none;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid #2b78a6;
  border-radius: 20px;
  background: #0a3156;
  color: #fff
}

.pj3-truth-card span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0b456f;
  color: #6ee7ff;
  font-size: 28px;
  font-weight: 950
}

.pj3-truth-card b {
  font-size: 19px
}

.pj3-compare-card {
  appearance: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid #2b719d;
  border-radius: 20px;
  background: #092d50;
  color: #fff;
  text-align: left
}

.pj3-compare-card:hover {
  border-color: #68e0fb;
  transform: translateY(-1px)
}

.pj3-compare-card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #fff
}

.pj3-compare-card>div {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 18px
}

.pj3-compare-card span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0d466f;
  color: #ffc94d;
  font-weight: 950
}

.pj3-compare-card b {
  line-height: 1.45
}

.pj3-question-image {
  margin: 0 auto 18px;
  max-width: 760px;
  overflow: hidden;
  border: 1px solid #345f81;
  border-radius: 17px;
  background: #fff
}

.pj3-question-image img {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain
}

.pj3-hotspot-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #37749c;
  border-radius: 18px;
  background: #e9edf2
}

.pj3-hotspot-wrap>img {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair
}

.pj3-hotspot-intro {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 30px;
  background: rgba(4, 18, 39, .75);
  backdrop-filter: blur(6px);
  text-align: center
}

.pj3-hotspot-intro[hidden] {
  display: none
}

.pj3-hotspot-intro h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 56px) !important;
  font-weight: 950 !important
}

.pj3-hotspot-intro p {
  max-width: 560px;
  margin: 0 0 20px;
  color: #dbe9f5;
  font-size: 17px
}

.pj3-hotspot-marks {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.pj3-hotspot-marks i {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #ffcb55;
  border-radius: 50%;
  background: rgba(255, 203, 85, .25);
  box-shadow: 0 0 0 4px rgba(4, 18, 39, .6)
}

.pj3-hotspot-marks i.is-me {
  border-color: #55e5ff;
  background: rgba(85, 229, 255, .25)
}

.pj3-inline-hint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid #8b752f;
  border-radius: 14px;
  background: #332b12;
  color: #ffe9a7
}

.pj3-inline-hint b {
  white-space: nowrap;
  color: #ffcf55
}

.pj3-inline-hint span {
  line-height: 1.45
}

.pj3-locked-note {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #376d91;
  border-radius: 12px;
  background: #0b2c4a;
  color: #c4d9e8
}

.pj3-live-answers {
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #264d6d;
  border-radius: 14px;
  background: #071c33
}

.pj3-live-answer {
  display: grid;
  grid-template-columns: 12px 150px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border-top: 1px solid #173853
}

.pj3-live-answer:first-child {
  border-top: 0
}

.pj3-live-answer b {
  font-size: 12px
}

.pj3-live-answer small {
  color: #91a9bd
}

.pj3-live-answer.is-answered small {
  color: #dcebf7
}

.pj3-live-answer.is-offline {
  opacity: .45
}

.pj3-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #53dffc
}

.pj3-live-dot.c1 {
  background: #ffca55
}

.pj3-live-dot.c2 {
  background: #ff6f7c
}

.pj3-live-dot.c3 {
  background: #67dc8f
}

.pj3-risk-ladder {
  align-self: start;
  padding: 17px;
  border: 1px solid #214a6c;
  border-radius: 20px;
  background: #061b32
}

.pj3-ladder-title b {
  display: block;
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em
}

.pj3-ladder-title small {
  display: block;
  margin: 5px 0 12px;
  color: #7896ae;
  font-size: 10px;
  line-height: 1.35
}

.pj3-ladder-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 7px;
  align-items: center;
  min-height: 31px;
  color: #809bb0;
  font-size: 10px
}

.pj3-ladder-row span {
  font-weight: 900
}

.pj3-ladder-row i {
  height: 2px;
  background: #1c3e59
}

.pj3-ladder-row b {
  font-size: 10px
}

.pj3-ladder-row.is-current {
  padding: 4px 6px;
  border: 1px solid #7e6a2b;
  border-radius: 9px;
  background: #322b13;
  color: #ffe290
}

.pj3-ladder-row.is-current i {
  background: #e5bd41
}

.pj3-ladder-row.is-done {
  opacity: .4
}

/* TUTORIAL */
.pj3-tutorial {
  position: relative
}

.pj3-tutorial-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 0, rgba(255, 61, 80, .18), transparent 45%), linear-gradient(180deg, #250b1b, #090d1e 70%)
}

.pj3-tutorial.is-correct .pj3-tutorial-bg {
  background: radial-gradient(circle at 50% 0, rgba(54, 215, 127, .16), transparent 45%), linear-gradient(180deg, #08251e, #08101f 70%)
}

.pj3-tutorial-inner {
  max-width: 1020px;
  margin: 20px auto
}

.pj3-tutorial-headline {
  text-align: center;
  color: #fff;
  font-size: clamp(37px, 5vw, 70px);
  font-weight: 1000;
  letter-spacing: -.03em
}

.pj3-tutorial.is-wrong .pj3-tutorial-headline {
  color: #ff6a76
}

.pj3-tutorial.is-correct .pj3-tutorial-headline {
  color: #65e59a
}

.pj3-money-transfer {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr 220px 180px;
  gap: 20px;
  align-items: center;
  margin: 25px 0
}

.pj3-money-transfer .pj3-account {
  padding: 18px
}

.pj3-money-transfer .pj3-account strong {
  font-size: 34px
}

.pj3-coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px
}

.pj3-coins i {
  width: 25px;
  height: 25px;
  border: 3px solid #f6c84b;
  border-radius: 50%;
  background: #aa7410;
  box-shadow: 0 0 13px rgba(255, 197, 55, .25)
}

.pj3-coins i:nth-child(2) {
  transform: translateY(-8px)
}

.pj3-coins span {
  color: #ff6473;
  font-size: 34px;
  font-weight: 700
}

.pj3-tutorial.is-correct .pj3-coins i {
  opacity: .25
}

.pj3-tutorial.is-correct .pj3-coins span {
  color: #58df8e
}

.pj3-feedback-petis {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 13px 18px rgba(0, 0, 0, .3))
}

.pj3-learning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.pj3-learning-grid article {
  min-height: 180px;
  padding: 20px 22px;
  border-radius: 18px
}

.pj3-learning-grid h3 {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  font-weight: 950 !important
}

.pj3-learning-grid p {
  margin: 0 !important;
  color: #e7edf3 !important;
  font-size: 15px !important;
  line-height: 1.62 !important
}

.pj3-why {
  border: 1px solid #702b3c;
  background: #34131f
}

.pj3-why h3 {
  color: #ff7e89 !important
}

.pj3-tutorial.is-correct .pj3-why {
  border-color: #27694a;
  background: #0d3024
}

.pj3-tutorial.is-correct .pj3-why h3 {
  color: #65e59a !important
}

.pj3-behavior {
  border: 1px solid #2c684a;
  background: #0f3024
}

.pj3-behavior h3 {
  color: #62e096 !important
}

.pj3-feedback-other {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #284b68;
  border-radius: 15px;
  background: #071a30
}

.pj3-feedback-player {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 10px;
  padding: 8px;
  border-top: 1px solid #17354f
}

.pj3-feedback-player:first-child {
  border-top: 0
}

.pj3-feedback-player span {
  color: #a8bfd1
}

.pj3-feedback-player strong {
  color: #ff7b87
}

.pj3-feedback-player.is-good strong {
  color: #5ae18f
}

.pj3-next-task {
  display: flex !important;
  margin: 24px auto 0 !important
}

.pj3-host-wait {
  text-align: center;
  margin-top: 20px;
  color: #b1c5d7;
  font-weight: 800
}

/* END */
.pj3-end-inner {
  max-width: 1080px;
  margin: 12px auto
}

.pj3-end-head {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 20px;
  align-items: center;
  text-align: left
}

.pj3-end-head h2 {
  margin: 6px 0 8px !important;
  color: #fff !important;
  font-size: clamp(38px, 5vw, 66px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important
}

.pj3-end-head p {
  margin: 0 !important;
  color: #b7cadb !important;
  font-size: 15px !important;
  line-height: 1.45 !important
}

.pj3-end-petis {
  width: 180px
}

.pj3-end-stats {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: 14px;
  margin: 22px 0
}

.pj3-end-account {
  padding: 19px;
  border: 1px solid #2e5b7b;
  border-radius: 18px;
  background: #0a2340
}

.pj3-end-account strong {
  display: block;
  font-size: 37px
}

.pj3-end-account.good strong {
  color: #5ce290
}

.pj3-end-account.bad strong {
  color: #ff6575
}

.pj3-end-account small,
.pj3-end-account em {
  display: block;
  color: #8fa9bf;
  font-size: 10px;
  font-style: normal
}

.pj3-preserved {
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid #356578;
  border-radius: 18px;
  background: #0a2038
}

.pj3-preserved strong {
  color: #6be49b;
  font-size: 42px
}

.pj3-preserved small {
  color: #a8bdce
}

.pj3-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px
}

.pj3-profile-grid>article {
  padding: 18px;
  border: 1px solid #264b69;
  border-radius: 18px;
  background: #071d35
}

.pj3-profile-grid h3 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: .08em
}

.pj3-profile-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 6px 0
}

.pj3-profile-item span {
  color: #5ae18f
}

.pj3-profile-grid>article:nth-child(2) .pj3-profile-item span {
  color: #ff7280
}

.pj3-profile-item b {
  font-size: 12px
}

.pj3-profile-item small {
  color: #8ea6ba
}

.pj3-profile-empty {
  color: #718b9f
}

.pj3-percentile {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.pj3-percentile p {
  margin: 0 !important;
  color: #dcebf6 !important;
  font-size: 15px !important;
  line-height: 1.45 !important
}

.pj3-percentile-bars {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 62px
}

.pj3-percentile-bars i {
  width: 12px;
  border-radius: 3px 3px 0 0;
  background: #243d58
}

.pj3-percentile-bars i.is-on {
  background: linear-gradient(#8b63f6, #56dd90)
}

.pj3-mp-results {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #2b526f;
  border-radius: 18px;
  background: #071b31
}

.pj3-mp-results h3 {
  margin: 0 !important;
  color: #fff !important
}

.pj3-mp-results>p {
  color: #93aabd
}

.pj3-mp-results [data-mp-result-cards] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px
}

.pj3-result-card {
  appearance: none;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #315674;
  border-radius: 6px;
  background: #0b2946;
  color: #fff;
  text-align: left
}

.pj3-result-card>span {
  grid-row: 1/3;
  color: #ffc94d;
  font-weight: 950
}

.pj3-result-card b {
  font-size: 14px
}

.pj3-result-card strong {
  font-size: 18px;
  color: #5fe190
}

.pj3-result-card small {
  color: #8fa8bb
}

.pj3-result-card i {
  grid-column: 3;
  grid-row: 2;
  font-style: normal;
  color: #7fe5ff
}

.pj3-result-card.is-me {
  border-color: #52dfff
}

.pj3-player-detail {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #3a6280;
  border-radius: 14px;
  background: #0a2440
}

.pj3-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end
}

.pj3-detail-head small {
  color: #88a6bd
}

.pj3-detail-head h4 {
  margin: 2px 0 !important;
  color: #fff !important;
  font-size: 24px !important
}

.pj3-detail-head>strong {
  color: #62e294;
  font-size: 25px
}

.pj3-detail-head>strong small {
  font-size: 10px
}

.pj3-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px
}

.pj3-detail-grid h5 {
  margin: 0 0 8px;
  color: #bed1e0
}

.pj3-player-detail>p {
  color: #d6e6f2
}

.pj3-friend-cta {
  appearance: none;
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  align-items: center;
  gap: 12px;
  width: min(100%, 470px);
  min-height: 64px;
  margin: 24px auto 0;
  padding: 10px 16px;
  border: 1px solid #68e395;
  border-radius: 14px;
  background: linear-gradient(180deg, #44b765, #349c55);
  color: #fff
}

.pj3-friend-cta b {
  font-size: 16px
}

.pj3-friend-cta i {
  font-style: normal;
  font-size: 22px
}

.pj3-friend-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18)
}

.pj3-share-status {
  text-align: center;
  min-height: 20px;
  margin-top: 7px;
  color: #83e4a8
}

.pj3-end-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px
}

.pj3-end-links button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9bc7df;
  text-decoration: underline;
  font-size: 12px
}

.pj3-scoreboard-wrap {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #294d69;
  border-radius: 14px;
  background: #061a30
}

.pj3-score-row {
  display: grid;
  grid-template-columns: 32px 1fr 120px 110px;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-top: 1px solid #183850
}

.pj3-score-row:first-child {
  border-top: 0
}

.pj3-score-row>span {
  color: #ffc94d
}

.pj3-score-row small {
  color: #8fa7ba
}

.pj3-score-row strong {
  text-align: right;
  color: #5cde8f
}

.pj3-score-loading {
  padding: 14px;
  color: #94aabd
}

@media(max-width:1100px) {
  .pj3-home-inner {
    grid-template-columns: 1.15fr .85fr;
    gap: 25px
  }

  .pj3-game-top {
    grid-template-columns: 160px 1fr 145px 160px
  }

  .pj3-game-layout {
    grid-template-columns: minmax(0, 1fr) 220px
  }

  .pj3-money-transfer {
    grid-template-columns: minmax(160px, 1fr) 140px minmax(200px, 1fr)
  }

  .pj3-feedback-petis {
    width: 145px;
    height: 145px
  }
}

@media(max-width:860px) {
  .pj3-bleed {
    width: calc(100vw - 12px);
    margin-top: 6px !important
  }

  .pj3-root {
    border-radius: 18px;
    min-height: 680px
  }

  .pj3-screen {
    padding: 22px
  }

  .pj3-home-inner {
    grid-template-columns: 1fr;
    margin: 28px auto
  }

  .pj3-home-meta {
    margin-left: 0
  }

  .pj3-hero-visual {
    min-height: 350px
  }

  .pj3-petis-hero {
    width: 280px;
    margin-top: 45px
  }

  .pj3-glow-lock {
    inset: 5% 20% 12%
  }

  .pj3-hero-balance {
    right: 15%;
    bottom: 1%
  }

  .pj3-mode-inner {
    margin-top: 34px
  }

  .pj3-alias-options {
    grid-template-columns: 1fr
  }

  .pj3-mode-buttons {
    grid-template-columns: 1fr
  }

  .pj3-lobby-players {
    grid-template-columns: 1fr 1fr
  }

  .pj3-game {
    padding: 14px
  }

  .pj3-game-top {
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .pj3-question-counter {
    grid-column: 1/3;
    grid-row: 1
  }

  .pj3-account-me {
    grid-column: 1
  }

  .pj3-hint-button {
    grid-column: 2;
    grid-row: 2
  }

  .pj3-game-top .pj3-account-scammer {
    grid-column: 1/3;
    grid-row: 3
  }

  .pj3-game-top .pj3-account-scammer {
    display: flex;
    align-items: center;
    gap: 10px
  }

  .pj3-game-top .pj3-account-scammer small,
  .pj3-game-top .pj3-account-scammer em {
    display: inline
  }

  .pj3-game-top .pj3-account-scammer strong {
    font-size: 20px
  }

  .pj3-game-layout {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0
  }

  .pj3-question-stage,
  .pj3-risk-ladder {
    min-width: 0;
    max-width: 100%
  }

  .pj3-risk-ladder {
    order: 2;
    overflow: hidden
  }

  .pj3-risk-ladder [data-levels] {
    display: flex;
    min-width: 0;
    max-width: 100%;
    gap: 5px;
    overflow: auto;
    padding-bottom: 4px
  }

  .pj3-ladder-row {
    grid-template-columns: 24px auto;
    min-width: 120px;
    padding: 5px 7px;
    border: 1px solid #1e405b;
    border-radius: 9px;
    white-space: nowrap
  }

  .pj3-ladder-row b {
    white-space: nowrap
  }

  .pj3-ladder-row i {
    display: none
  }

  .pj3-choice-grid {
    grid-template-columns: 1fr
  }

  .pj3-money-transfer {
    grid-template-columns: 1fr 90px 1fr
  }

  .pj3-feedback-petis {
    display: none
  }

  .pj3-learning-grid {
    grid-template-columns: 1fr
  }

  .pj3-end-head {
    grid-template-columns: 1fr 120px
  }

  .pj3-end-petis {
    width: 120px
  }

  .pj3-profile-grid {
    grid-template-columns: 1fr 1fr
  }

  .pj3-percentile {
    grid-column: 1/-1
  }

  .pj3-mp-results [data-mp-result-cards] {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px) {
  .pj3-screen {
    padding: 16px
  }

  .pj3-language {
    gap: 4px
  }

  .pj3-language button {
    padding: 6px 8px
  }

  .pj3-home-copy h1 {
    font-size: 50px !important
  }

  .pj3-home-copy>p {
    font-size: 17px !important
  }

  .pj3-primary-cta {
    min-width: 0;
    width: 100%;
    font-size: 16px !important
  }

  .pj3-hero-visual {
    min-height: 310px
  }

  .pj3-petis-hero {
    width: 240px
  }

  .pj3-glow-lock {
    inset: 5% 8% 15%
  }

  .pj3-hero-balance {
    right: 5%;
    bottom: 0
  }

  .pj3-simple-header {
    grid-template-columns: 42px 1fr auto
  }

  .pj3-mini-brand {
    font-size: 13px
  }

  .pj3-mode-inner {
    margin-top: 24px
  }

  .pj3-section-copy h2 {
    font-size: 31px !important
  }

  .pj3-mode-button {
    grid-template-columns: 64px 1fr 22px;
    min-height: 118px;
    padding: 16px
  }

  .pj3-mode-svg {
    width: 60px;
    height: 60px
  }

  .pj3-mode-svg svg {
    width: 40px
  }

  .pj3-mode-button b {
    font-size: 18px
  }

  .pj3-multi-actions {
    display: grid;
    grid-template-columns: 1fr
  }

  .pj3-join-inline {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr
  }

  .pj3-join-inline input {
    width: 100% !important
  }

  .pj3-invite-box {
    grid-template-columns: 1fr
  }

  .pj3-lobby-players {
    grid-template-columns: 1fr
  }

  .pj3-question-stage {
    padding: 17px
  }

  .pj3-stage-head {
    align-items: flex-start;
    flex-direction: column
  }

  .pj3-scammer-quote {
    margin-top: 15px
  }

  .pj3-scammer-quote img {
    width: 48px;
    height: 48px
  }

  .pj3-question-text {
    font-size: 21px !important;
    margin: 18px auto !important
  }

  .pj3-answer-card {
    min-height: 72px !important;
    padding: 12px !important
  }

  .pj3-answer-card b {
    font-size: 13px
  }

  .pj3-truth-grid,
  .pj3-compare-grid {
    grid-template-columns: 1fr
  }

  .pj3-truth-card {
    min-height: 110px
  }

  .pj3-compare-card img {
    height: 140px
  }

  .pj3-hotspot-intro {
    padding: 16px
  }

  .pj3-hotspot-intro h3 {
    font-size: 32px !important
  }

  .pj3-hotspot-intro p {
    font-size: 14px
  }

  .pj3-live-answer {
    grid-template-columns: 10px 100px 1fr
  }

  .pj3-tutorial-headline {
    font-size: 34px;
    text-align: left
  }

  .pj3-money-transfer {
    grid-template-columns: 1fr 48px 1fr;
    gap: 7px
  }

  .pj3-money-transfer .pj3-account {
    padding: 11px
  }

  .pj3-money-transfer .pj3-account strong {
    font-size: 25px
  }

  .pj3-coins i {
    display: none
  }

  .pj3-coins span {
    font-size: 25px
  }

  .pj3-learning-grid article {
    padding: 16px
  }

  .pj3-feedback-player {
    grid-template-columns: 1fr auto
  }

  .pj3-feedback-player span {
    grid-column: 1/3
  }

  .pj3-end-head {
    grid-template-columns: 1fr 82px
  }

  .pj3-end-petis {
    width: 82px
  }

  .pj3-end-stats {
    grid-template-columns: 1fr 110px 1fr;
    gap: 7px
  }

  .pj3-end-account {
    padding: 12px
  }

  .pj3-end-account strong {
    font-size: 25px
  }

  .pj3-preserved strong {
    font-size: 28px
  }

  .pj3-profile-grid {
    grid-template-columns: 1fr
  }

  .pj3-percentile {
    grid-column: auto
  }

  .pj3-detail-grid {
    grid-template-columns: 1fr
  }

  .pj3-score-row {
    grid-template-columns: 28px 1fr auto
  }

  .pj3-score-row small {
    display: none
  }
}

/* =========================================================
   ITVaatlik.ee visual skin — v0.6.1
   Palette sampled from the official ITVaatlik visual:
   royal blue #2E4ECC, pale blue #D8EBFF,
   deep navy #1D2274, signal yellow #FCEA05.
   ========================================================= */
.pj3-root {
  --pj3-site-blue: #354dc5;
  --pj3-site-blue-dark: #2a3da0;
  --pj3-site-light: #bed7fb;
  --pj3-site-light-2: #f1f9fe;
  --pj3-site-navy: #1e2270;
  --pj3-site-yellow: #fcea05;
  --pj3-site-ink: #171a2f;
  --pj3-site-muted: #59617c;
  --pj3-site-border: #b8c9ee;
  --pj3-site-white: #fff;
  --pj3-site-success: #207a4b;
  --pj3-site-danger: #b72d3c;
  background: linear-gradient(145deg, #fff 0 58%, #edf6ff 100%);
  color: var(--pj3-site-ink);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  border: 1px solid #dbe5f5;
  box-shadow: 0 24px 70px rgba(29, 34, 116, .16);
}

.pj3-root button,
.pj3-root input {
  font-family: inherit
}

.pj3-root:before {
  background: radial-gradient(circle at 94% 2%, rgba(216, 235, 255, .9), transparent 28%), radial-gradient(circle at 2% 96%, rgba(252, 234, 5, .12), transparent 22%)
}

.pj3-circuit-bg {
  opacity: .22;
  background-image: linear-gradient(90deg, transparent 0 7%, rgba(46, 78, 204, .09) 7.1% 7.25%, transparent 7.35% 100%), linear-gradient(0deg, transparent 0 13%, rgba(46, 78, 204, .06) 13.1% 13.25%, transparent 13.35% 100%), radial-gradient(circle at 18% 30%, rgba(46, 78, 204, .36) 0 2px, transparent 3px), radial-gradient(circle at 83% 24%, rgba(252, 234, 5, .78) 0 2px, transparent 3px)
}

.pj3-home-copy h1,
.pj3-section-copy h2,
.pj3-lobby-inner h2,
.pj3-tutorial-headline,
.pj3-end-head h2,
.pj3-hotspot-intro h3,
.pj3-detail-head h4 {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important
}

.pj3-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--pj3-site-yellow);
  color: var(--pj3-site-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em
}

.pj3-mini-brand {
  color: var(--pj3-site-navy)
}

.pj3-back {
  border-color: var(--pj3-site-blue);
  background: #fff;
  color: var(--pj3-site-blue)
}

.pj3-back:hover {
  background: var(--pj3-site-light)
}

.pj3-language button {
  border-color: #aebfe8;
  background: #fff;
  color: var(--pj3-site-navy);
  box-shadow: none
}

.pj3-language button:hover {
  background: var(--pj3-site-light)
}

.pj3-language button.is-active {
  border-color: var(--pj3-site-blue);
  background: var(--pj3-site-blue);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(252, 234, 5, .35)
}

.pj3-primary-cta {
  border: 2px solid var(--pj3-site-blue) !important;
  background: var(--pj3-site-blue) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(46, 78, 204, .22) !important
}

.pj3-primary-cta:hover {
  background: var(--pj3-site-blue-dark) !important;
  filter: none
}

.pj3-primary-cta i {
  background: var(--pj3-site-yellow);
  color: var(--pj3-site-navy)
}

.pj3-btn-primary {
  border-color: var(--pj3-site-blue) !important;
  background: var(--pj3-site-blue) !important;
  color: #fff !important
}

.pj3-btn-primary:hover {
  background: var(--pj3-site-blue-dark) !important
}

.pj3-btn-secondary {
  border-color: var(--pj3-site-blue) !important;
  background: #fff !important;
  color: var(--pj3-site-blue) !important
}

.pj3-btn-secondary:hover {
  background: var(--pj3-site-light) !important
}

.pj3-text-button {
  color: var(--pj3-site-blue)
}

.pj3-toast {
  border-color: var(--pj3-site-blue);
  background: var(--pj3-site-navy);
  color: #fff
}

/* Home */
.pj3-home {
  background: var(--pj3-site-light-2)
}

.pj3-home-copy h1 {
  color: var(--pj3-site-navy) !important;
  letter-spacing: -.035em !important;
  text-transform: none !important
}

.pj3-home-copy>p {
  color: var(--pj3-site-ink) !important;
  font-weight: 500 !important
}

.pj3-home-meta {
  color: var(--pj3-site-navy);
  font-weight: 700;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace
}

.pj3-glow-lock {
  border: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 255, 255, .65) 55%, rgba(255, 255, 255, 0) 78%);
  box-shadow: none
}

.pj3-glow-lock:before,
.pj3-glow-lock:after {
  display: none
}

.pj3-hero-balance {
  border-color: var(--pj3-site-blue);
  background: #fff;
  box-shadow: 0 10px 26px rgba(29, 34, 116, .12)
}

.pj3-hero-balance small,
.pj3-account small {
  color: var(--pj3-site-muted)
}

.pj3-hero-balance strong {
  color: var(--pj3-site-navy)
}

.pj3-hero-balance em,
.pj3-account em {
  color: var(--pj3-site-muted)
}

.pj3-challenge-banner {
  border-color: #9db4e6;
  background: var(--pj3-site-light);
  color: var(--pj3-site-ink)
}

.pj3-challenge-banner b {
  color: var(--pj3-site-navy)
}

.pj3-challenge-banner span {
  color: var(--pj3-site-ink)
}

/* Mode selection */
.pj3-section-copy h2 {
  color: var(--pj3-site-navy) !important
}

.pj3-section-copy p {
  color: var(--pj3-site-muted)
}

.pj3-alias {
  border-color: #b8c9ee;
  background: #fff;
  color: var(--pj3-site-ink);
  box-shadow: 0 5px 16px rgba(29, 34, 116, .05)
}

.pj3-alias>span {
  background: var(--pj3-site-light);
  color: var(--pj3-site-blue)
}

.pj3-alias i {
  color: var(--pj3-site-blue)
}

.pj3-alias.is-selected {
  border-color: var(--pj3-site-navy);
  background: var(--pj3-site-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(29, 34, 116, .25)
}

.pj3-alias.is-selected>span {
  background: #fff;
  color: var(--pj3-site-blue)
}

.pj3-alias.is-selected i {
  color: #fff
}

.pj3-mode-button,
.pj3-mode-multi {
  border: 2px solid var(--pj3-site-blue);
  background: #fff;
  color: var(--pj3-site-navy);
  box-shadow: 0 10px 24px rgba(29, 34, 116, .07)
}

.pj3-mode-button:hover,
.pj3-mode-multi:hover {
  border-color: var(--pj3-site-blue);
  background: var(--pj3-site-light);
  transform: translateY(-2px)
}

.pj3-mode-svg,
.pj3-mode-multi .pj3-mode-svg {
  background: var(--pj3-site-light)
}

.pj3-mode-svg svg,
.pj3-mode-multi .pj3-mode-svg svg {
  stroke: var(--pj3-site-blue)
}

.pj3-mode-button>i {
  color: var(--pj3-site-blue)
}

.pj3-mode-button small {
  color: var(--pj3-site-muted)
}

.pj3-multi-setup {
  border-color: #b8c9ee;
  background: var(--pj3-site-light-2)
}

.pj3-multi-setup h3 {
  color: var(--pj3-site-navy) !important
}

.pj3-join-inline input {
  border-color: #9fb5e6 !important;
  background: #fff !important;
  color: var(--pj3-site-ink) !important
}

/* Lobby */
.pj3-lobby-inner h2 {
  color: var(--pj3-site-navy) !important
}

.pj3-lobby-inner>p,
.pj3-lobby-footer>div {
  color: var(--pj3-site-muted)
}

.pj3-room-code {
  border-color: var(--pj3-site-blue);
  color: var(--pj3-site-blue)
}

.pj3-invite-box input {
  border-color: #a9bbe8 !important;
  background: #fff !important;
  color: var(--pj3-site-ink) !important
}

.pj3-lobby-status {
  color: var(--pj3-site-navy)
}

.pj3-lobby-player {
  border-color: #b7c8ed;
  background: #fff;
  color: var(--pj3-site-ink)
}

.pj3-lobby-player>span {
  background: var(--pj3-site-light);
  color: var(--pj3-site-blue)
}

.pj3-lobby-player small {
  color: var(--pj3-site-muted)
}

.pj3-lobby-player i {
  color: var(--pj3-site-success)
}

/* Main game */
.pj3-game {
  background: linear-gradient(180deg, #fff 0, var(--pj3-site-light-2) 100%)
}

.pj3-account {
  border-color: #a9bbe8;
  background: #fff;
  color: var(--pj3-site-ink);
  box-shadow: 0 4px 14px rgba(29, 34, 116, .05)
}

.pj3-account strong {
  color: var(--pj3-site-navy)
}

.pj3-account-scammer {
  border-color: #e4a5ad;
  background: #fff7f8
}

.pj3-account-scammer strong {
  color: var(--pj3-site-danger)
}

.pj3-question-counter>b {
  color: var(--pj3-site-navy)
}

.pj3-progress {
  background: #c8d6f5
}

.pj3-progress i {
  background: linear-gradient(90deg, var(--pj3-site-blue), var(--pj3-site-yellow))
}

.pj3-hint-button {
  border: 2px solid var(--pj3-site-navy);
  background: var(--pj3-site-yellow);
  color: var(--pj3-site-navy)
}

.pj3-hint-button:hover {
  filter: brightness(.98);
  transform: translateY(-1px)
}

.pj3-hint-button>span {
  background: var(--pj3-site-navy);
  color: #fff
}

.pj3-hint-button small {
  color: var(--pj3-site-navy)
}

.pj3-question-stage {
  border-color: #b9caee;
  background: var(--pj3-site-light);
  box-shadow: 0 16px 38px rgba(29, 34, 116, .09)
}

.pj3-difficulty {
  border-color: var(--pj3-site-blue);
  background: #fff;
  color: var(--pj3-site-blue)
}

.pj3-risk {
  color: var(--pj3-site-muted)
}

.pj3-risk i {
  background: #ffe7ea;
  color: var(--pj3-site-danger)
}

.pj3-risk b {
  color: var(--pj3-site-danger)
}

.pj3-scammer-quote {
  border-color: #aebfe8;
  background: #fff
}

.pj3-scammer-quote span {
  color: var(--pj3-site-ink)
}

.pj3-question-text {
  color: var(--pj3-site-navy) !important;
  font-weight: 700 !important
}

.pj3-answer-card {
  border: 2px solid var(--pj3-site-blue) !important;
  background: #fff !important;
  color: var(--pj3-site-navy) !important;
  box-shadow: 0 5px 14px rgba(29, 34, 116, .05) !important
}

.pj3-answer-card:hover:not(:disabled) {
  border-color: var(--pj3-site-blue) !important;
  background: #fffde0 !important;
  box-shadow: 0 8px 20px rgba(46, 78, 204, .12) !important
}

.pj3-answer-card>span {
  border-color: var(--pj3-site-blue);
  background: var(--pj3-site-blue);
  color: #fff
}

.pj3-truth-card {
  border: 2px solid var(--pj3-site-blue);
  background: #fff;
  color: var(--pj3-site-navy)
}

.pj3-truth-card:hover {
  background: #fffde0
}

.pj3-truth-card span {
  background: var(--pj3-site-blue);
  color: #fff
}

.pj3-compare-card {
  border: 2px solid var(--pj3-site-blue);
  background: #fff;
  color: var(--pj3-site-navy)
}

.pj3-compare-card:hover {
  border-color: var(--pj3-site-blue);
  background: #fffde0
}

.pj3-compare-card span {
  background: var(--pj3-site-blue);
  color: #fff
}

.pj3-question-image,
.pj3-hotspot-wrap {
  border-color: #9fb4e4;
  background: #fff
}

.pj3-hotspot-intro {
  background: rgba(29, 34, 116, .86)
}

.pj3-hotspot-intro h3 {
  color: #fff !important
}

.pj3-hotspot-intro p {
  color: #fff
}

.pj3-hotspot-marks i {
  border-color: var(--pj3-site-yellow);
  background: rgba(252, 234, 5, .28);
  box-shadow: 0 0 0 4px rgba(29, 34, 116, .45)
}

.pj3-hotspot-marks i.is-me {
  border-color: var(--pj3-site-blue);
  background: rgba(46, 78, 204, .25)
}

.pj3-inline-hint {
  border-color: #dbc900;
  background: #fffbd1;
  color: var(--pj3-site-ink);
  align-items: center !important
}

.pj3-inline-hint b {
  color: var(--pj3-site-navy)
}

.pj3-inline-hint b {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important
}

.pj3-inline-hint span {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.5 !important
}

.pj3-locked-note {
  border-color: #a8bae5;
  background: #fff;
  color: var(--pj3-site-ink)
}

.pj3-live-answers {
  border-color: #b6c7ec;
  background: #fff
}

.pj3-live-answer {
  border-color: #dce5f7;
  color: var(--pj3-site-ink)
}

.pj3-live-answer small {
  color: var(--pj3-site-muted)
}

.pj3-live-answer.is-answered small {
  color: var(--pj3-site-navy)
}

/* Difficulty ladder */
.pj3-risk-ladder {
  border-color: #b7c7eb !important;
  background: #fff !important;
  color: var(--pj3-site-ink) !important
}

.pj3-ladder-title {
  color: var(--pj3-site-navy) !important
}

.pj3-ladder-row {
  border-color: #d7e1f5 !important;
  background: #fff !important;
  color: var(--pj3-site-muted) !important
}

.pj3-ladder-row b,
.pj3-ladder-row strong {
  color: var(--pj3-site-navy) !important
}

.pj3-ladder-row.is-active {
  border-color: var(--pj3-site-blue) !important;
  background: var(--pj3-site-light) !important;
  box-shadow: 0 0 0 2px rgba(46, 78, 204, .08) inset !important
}

.pj3-ladder-row.is-active b,
.pj3-ladder-row.is-active strong {
  color: var(--pj3-site-blue) !important
}

.pj3-ladder-row.is-done {
  opacity: .58
}

/* Tutorial / learning interslide: keep semantic red/green, but use ITVaatlik typography and controls */
.pj3-tutorial-bg {
  background: linear-gradient(135deg, #fff1f2 0, #ffdfe3 100%)
}

.pj3-tutorial.is-correct .pj3-tutorial-bg {
  background: linear-gradient(135deg, #effcf4 0, #dff5e8 100%)
}

.pj3-tutorial-headline {
  color: var(--pj3-site-navy)
}

.pj3-tutorial.is-wrong .pj3-tutorial-headline {
  color: var(--pj3-site-danger)
}

.pj3-tutorial.is-correct .pj3-tutorial-headline {
  color: var(--pj3-site-success)
}

.pj3-money-transfer .pj3-account {
  background: #fff
}

.pj3-coins i {
  border-color: #d8c900;
  background: var(--pj3-site-yellow);
  box-shadow: none
}

.pj3-coins span {
  color: var(--pj3-site-danger)
}

.pj3-tutorial.is-correct .pj3-coins span {
  color: var(--pj3-site-success)
}

.pj3-learning-grid article {
  box-shadow: 0 7px 18px rgba(29, 34, 116, .05)
}

.pj3-learning-grid p {
  color: var(--pj3-site-ink) !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important
}

.pj3-why {
  border-color: #e3a4ab;
  background: #fff
}

.pj3-why h3 {
  color: var(--pj3-site-danger) !important
}

.pj3-tutorial.is-correct .pj3-why {
  border-color: #9bceb1;
  background: #fff
}

.pj3-tutorial.is-correct .pj3-why h3 {
  color: var(--pj3-site-success) !important
}

.pj3-behavior {
  border-color: #9bceb1;
  background: #fff
}

.pj3-behavior h3 {
  color: var(--pj3-site-success) !important
}

.pj3-feedback-other {
  border-color: #b8c8ec;
  background: #fff
}

.pj3-feedback-player {
  border-color: #dce5f5;
  color: var(--pj3-site-ink)
}

.pj3-feedback-player span {
  color: var(--pj3-site-muted)
}

.pj3-feedback-player strong {
  color: var(--pj3-site-danger)
}

.pj3-feedback-player.is-good strong {
  color: var(--pj3-site-success)
}

.pj3-host-wait {
  color: var(--pj3-site-muted)
}

/* End screen */
.pj3-end {
  background: linear-gradient(180deg, #fff 0, var(--pj3-site-light-2) 100%)
}

.pj3-end-head h2 {
  color: var(--pj3-site-navy) !important
}

.pj3-end-head p {
  color: var(--pj3-site-muted) !important
}

.pj3-end-account {
  border-color: #afc1e8;
  background: #fff
}

.pj3-end-account.good {
  border-top: 5px solid var(--pj3-site-blue)
}

.pj3-end-account.bad {
  border-top: 5px solid var(--pj3-site-yellow)
}

.pj3-end-account.good strong {
  color: var(--pj3-site-navy)
}

.pj3-end-account.bad strong {
  color: var(--pj3-site-danger)
}

.pj3-end-account small,
.pj3-end-account em {
  color: var(--pj3-site-muted)
}

.pj3-preserved {
  border-color: var(--pj3-site-blue);
  background: var(--pj3-site-light)
}

.pj3-preserved strong {
  color: var(--pj3-site-navy)
}

.pj3-preserved small {
  color: var(--pj3-site-muted)
}

.pj3-profile-grid>article {
  border-color: #b8c8ec;
  background: #fff
}

.pj3-profile-grid h3 {
  color: var(--pj3-site-navy) !important
}

.pj3-profile-item span {
  color: var(--pj3-site-blue)
}

.pj3-profile-grid>article:nth-child(2) .pj3-profile-item span {
  color: var(--pj3-site-danger)
}

.pj3-profile-item small,
.pj3-profile-empty {
  color: var(--pj3-site-muted)
}

.pj3-percentile p {
  color: var(--pj3-site-ink) !important
}

.pj3-percentile-bars i {
  background: #ced8ef
}

.pj3-percentile-bars i.is-on {
  background: linear-gradient(var(--pj3-site-blue), var(--pj3-site-yellow))
}

.pj3-mp-results {
  border-color: #b7c8ec;
  background: #fff
}

.pj3-mp-results h3 {
  color: var(--pj3-site-navy) !important
}

.pj3-mp-results>p {
  color: var(--pj3-site-muted)
}

.pj3-result-card {
  border-color: #b6c7eb;
  background: #fff;
  color: var(--pj3-site-ink)
}

.pj3-result-card>span {
  color: var(--pj3-site-blue)
}

.pj3-result-card strong {
  color: var(--pj3-site-navy)
}

.pj3-result-card small {
  color: var(--pj3-site-muted)
}

.pj3-result-card i {
  color: var(--pj3-site-blue)
}

.pj3-result-card.is-me {
  border: 2px solid var(--pj3-site-blue);
  background: var(--pj3-site-light)
}

.pj3-player-detail {
  border-color: #b7c8ec;
  background: #fff
}

.pj3-detail-head small {
  color: var(--pj3-site-muted)
}

.pj3-detail-head h4 {
  color: var(--pj3-site-navy) !important
}

.pj3-detail-head>strong {
  color: var(--pj3-site-blue)
}

.pj3-detail-grid h5 {
  color: var(--pj3-site-navy)
}

.pj3-player-detail>p {
  color: var(--pj3-site-ink)
}

.pj3-friend-cta {
  border: 2px solid var(--pj3-site-blue);
  background: var(--pj3-site-blue);
  color: #fff
}

.pj3-friend-cta:hover {
  background: var(--pj3-site-blue-dark)
}

.pj3-friend-icon {
  background: var(--pj3-site-yellow);
  color: var(--pj3-site-navy)
}

.pj3-share-status {
  color: var(--pj3-site-blue)
}

.pj3-end-links button {
  color: var(--pj3-site-blue)
}

.pj3-scoreboard-wrap {
  border-color: #b8c8eb;
  background: #fff
}

.pj3-score-row {
  border-color: #dce5f5;
  color: var(--pj3-site-ink)
}

.pj3-score-row>span {
  color: var(--pj3-site-blue)
}

.pj3-score-row small {
  color: var(--pj3-site-muted)
}

.pj3-score-row strong {
  color: var(--pj3-site-navy)
}

.pj3-score-loading {
  color: var(--pj3-site-muted)
}

/* Ensure small screens keep the branded light surfaces legible. */
@media(max-width:860px) {
  .pj3-home {
    background: linear-gradient(180deg, #fff 0 52%, var(--pj3-site-light) 52% 100%)
  }

  .pj3-ladder-row {
    border-color: #cbd7f1 !important
  }
}

/* =========================================================
   v0.6.2 — procurement/comments refinement
   Clearer hierarchy, light tone, accessibility and RIA/ITVaatlik alignment.
   ========================================================= */
.pj3-root,
.pj3-root button,
.pj3-root input,
.pj3-root textarea,
.pj3-root select,
.pj3-root label,
.pj3-root p,
.pj3-root span,
.pj3-root small,
.pj3-root strong,
.pj3-root b,
.pj3-root em,
.pj3-root div,
.pj3-root pre {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important
}

.pj3-home-copy h1,
.pj3-section-copy h2,
.pj3-lobby-inner h2,
.pj3-tutorial-headline,
.pj3-end-head h2,
.pj3-hotspot-intro h3,
.pj3-detail-head h4 {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important
}

.pj3-question-text,
.pj3-ladder-title b {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important
}

.pj3-petis-emoji,
.pj3-petis-mini {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important
}

.pj3-root {
  background: #fff;
  color: var(--pj3-site-ink);
  box-shadow: 0 18px 55px rgba(29, 34, 116, .12)
}

.pj3-circuit-bg {
  opacity: .09
}

.pj3-home {
  background: linear-gradient(110deg, #fff 0 62%, #f2f8ff 62% 100%)
}

.pj3-hero-visual {
  min-height: 470px
}

.pj3-petis-hero.pj3-petis-emoji {
  display: grid;
  place-items: center;
  width: 280px;
  height: 280px;
  margin-top: 42px;
  border: 3px solid var(--pj3-site-blue);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 22px 50px rgba(46, 78, 204, .13);
  font-size: 150px;
  line-height: 1;
  filter: none
}

.pj3-glow-lock {
  inset: 15% 10% 18%;
  border-color: rgba(46, 78, 204, .12);
  background: radial-gradient(circle, rgba(216, 235, 255, .68), transparent 67%)
}

/* Main game — three clear top fields: player score, elapsed time, Petis account + quote. */
.pj3-game {
  background: #f7fbff
}

.pj3-game-top {
  grid-template-columns: minmax(180px, 220px) 150px minmax(300px, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px
}

.pj3-account,
.pj3-game-time {
  min-height: 92px;
  border: 1px solid #b7c8ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(29, 34, 116, .055)
}

.pj3-account {
  padding: 14px 16px
}

.pj3-account strong {
  font-size: 28px
}

.pj3-game-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  text-align: center
}

.pj3-game-time small {
  display: block;
  color: var(--pj3-site-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em
}

.pj3-game-time strong {
  margin-top: 4px;
  color: var(--pj3-site-navy);
  font-size: 27px;
  line-height: 1
}

.pj3-account-scammer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-color: #c8d5f2;
  background: #fff
}

.pj3-scammer-account-main {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 150px
}

.pj3-petis-mini {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff6c9;
  font-size: 31px;
  line-height: 1
}

.pj3-account-quote {
  min-width: 0;
  padding: 9px 12px;
  border-left: 3px solid var(--pj3-site-yellow);
  border-radius: 0 10px 10px 0;
  background: #f7faff;
  color: #343a55;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4
}

.pj3-account-quote span {
  color: inherit
}

/* Less dense task card. */
.pj3-game-layout {
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 20px
}

.pj3-question-stage {
  padding: 30px 34px 36px;
  border: 1px solid #c3d1ee;
  background: #fff;
  box-shadow: 0 10px 30px rgba(29, 34, 116, .07)
}

.pj3-stage-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e8f7
}

.pj3-difficulty {
  justify-self: start;
  padding: 8px 13px;
  border: 0;
  background: var(--pj3-site-light);
  color: var(--pj3-site-navy);
  font-size: 11px
}

.pj3-risk {
  justify-self: center;
  color: var(--pj3-site-ink);
  font-size: 13px;
  font-weight: 700
}

.pj3-risk i {
  background: #fff0f1;
  color: var(--pj3-site-danger)
}

.pj3-risk b {
  color: var(--pj3-site-danger);
  font-weight: 900
}

.pj3-hint-button {
  justify-self: end;
  min-width: 154px;
  min-height: 48px;
  padding: 7px 12px !important;
  border-color: var(--pj3-site-blue) !important;
  background: #fff !important;
  color: var(--pj3-site-navy) !important;
  box-shadow: none !important
}

.pj3-hint-button>span {
  background: var(--pj3-site-blue);
  color: #fff
}

.pj3-hint-button small {
  color: var(--pj3-site-blue)
}

.pj3-question-text {
  max-width: 900px;
  margin: 28px auto 22px !important;
  color: var(--pj3-site-navy) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.34 !important;
  text-align: left !important
}

.pj3-scenario {
  margin: 0 auto 22px
}

.pj3-scenario-window {
  border-color: #b9c8e8;
  background: #f6f9ff
}

.pj3-scenario-window>span {
  background: linear-gradient(90deg, #d8ebff, #eef6ff)
}

.pj3-scenario-window pre {
  color: #232944 !important;
  font-weight: 600 !important;
  line-height: 1.55 !important
}

.pj3-question-image {
  margin: 0 auto 22px;
  border-color: #b6c8ed;
  box-shadow: 0 5px 14px rgba(29, 34, 116, .05)
}

/* Dynamic task scale title is now the only question counter. */
.pj3-risk-ladder {
  padding: 18px;
  border-color: #c1cfec !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(29, 34, 116, .055)
}

.pj3-ladder-title b {
  color: var(--pj3-site-navy) !important;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0
}

.pj3-ladder-title small {
  margin: 7px 0 14px;
  color: var(--pj3-site-muted) !important;
  font-size: 11px
}

.pj3-ladder-row {
  min-height: 34px;
  font-size: 11px !important
}

.pj3-ladder-row.is-current {
  border-color: var(--pj3-site-blue) !important;
  background: #fff8bd !important;
  color: var(--pj3-site-navy) !important
}

.pj3-ladder-row.is-current i {
  background: var(--pj3-site-blue) !important
}

/* Friendly emoji opponent rather than a threatening hooded portrait. */
.pj3-feedback-petis.pj3-petis-emoji,
.pj3-end-petis.pj3-petis-emoji {
  display: grid;
  place-items: center;
  border: 2px solid #c2d0ed;
  border-radius: 50%;
  background: #fff;
  font-size: 92px;
  line-height: 1;
  filter: none
}

.pj3-feedback-petis.pj3-petis-emoji {
  width: 160px;
  height: 160px
}

.pj3-feedback-petis.is-foiled {
  background: #effaf3
}

.pj3-feedback-petis.is-pleased {
  background: #fff5f5
}

.pj3-end-petis.pj3-petis-emoji {
  width: 150px;
  height: 150px;
  font-size: 82px
}

/* Keep feedback meaningful without making the whole view intimidating. */
.pj3-tutorial-bg {
  background: #fff6f6
}

.pj3-tutorial.is-correct .pj3-tutorial-bg {
  background: #f3fbf6
}

.pj3-tutorial.is-wrong .pj3-tutorial-headline {
  color: #9d2735
}

.pj3-tutorial.is-correct .pj3-tutorial-headline {
  color: #17683e
}

.pj3-why,
.pj3-tutorial.is-correct .pj3-why,
.pj3-behavior {
  background: #fff
}

.pj3-end-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: -5px auto 20px;
  padding: 8px 14px;
  border: 1px solid #bdcae9;
  border-radius: 999px;
  background: #fff;
  color: var(--pj3-site-muted);
  font-size: 12px
}

.pj3-end-time strong {
  color: var(--pj3-site-navy);
  font-size: 15px
}

/* Accessibility: unmistakable keyboard focus and comfortable targets. */
.pj3-root button,
.pj3-root input {
  min-height: 44px
}

.pj3-root button:focus-visible,
.pj3-root input:focus-visible,
.pj3-root [tabindex]:focus-visible {
  outline: 4px solid var(--pj3-site-yellow) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--pj3-site-navy) !important
}

.pj3-root button:disabled {
  cursor: not-allowed
}

@media(max-width:1000px) {
  .pj3-game-top {
    grid-template-columns: 1fr 130px
  }

  .pj3-game-top .pj3-account-scammer {
    grid-column: 1/-1
  }

  .pj3-game-layout {
    grid-template-columns: minmax(0, 1fr) 210px
  }
}

@media(max-width:860px) {
  .pj3-petis-hero.pj3-petis-emoji {
    width: 230px;
    height: 230px;
    margin-top: 20px;
    font-size: 122px
  }

  .pj3-game-top {
    grid-template-columns: 1fr 120px !important
  }

  .pj3-account-me {
    grid-column: 1 !important;
    grid-row: auto !important
  }

  .pj3-game-time {
    grid-column: 2;
    grid-row: auto
  }

  .pj3-game-top .pj3-account-scammer {
    grid-column: 1/-1 !important;
    grid-row: auto !important;
    display: grid !important
  }

  .pj3-stage-head {
    grid-template-columns: 1fr auto
  }

  .pj3-difficulty {
    grid-column: 1
  }

  .pj3-risk {
    grid-column: 1;
    grid-row: 2;
    justify-self: start
  }

  .pj3-hint-button {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center
  }

  .pj3-question-text {
    text-align: left !important
  }

  .pj3-risk-ladder {
    order: 2
  }

  .pj3-feedback-petis.pj3-petis-emoji {
    display: grid;
    width: 110px;
    height: 110px;
    font-size: 62px
  }
}

@media(max-width:560px) {
  .pj3-hero-visual {
    min-height: 280px
  }

  .pj3-petis-hero.pj3-petis-emoji {
    width: 190px;
    height: 190px;
    font-size: 102px
  }

  .pj3-game-top {
    grid-template-columns: 1fr 110px !important
  }

  .pj3-account,
  .pj3-game-time {
    min-height: 80px
  }

  .pj3-account strong {
    font-size: 23px
  }

  .pj3-game-time strong {
    font-size: 21px
  }

  .pj3-account-scammer {
    grid-template-columns: 1fr !important;
    gap: 8px !important
  }

  .pj3-account-quote {
    border-left: 0;
    border-top: 3px solid var(--pj3-site-yellow);
    border-radius: 8px
  }

  .pj3-question-stage {
    padding: 18px
  }

  .pj3-stage-head {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-items: stretch !important
  }

  .pj3-difficulty,
  .pj3-risk,
  .pj3-hint-button {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important
  }

  .pj3-hint-button {
    width: 100%;
    min-width: 0
  }

  .pj3-question-text {
    margin: 22px 0 18px !important;
    font-size: 22px !important
  }

  .pj3-feedback-petis.pj3-petis-emoji {
    display: none
  }

  .pj3-end-petis.pj3-petis-emoji {
    width: 78px;
    height: 78px;
    font-size: 45px
  }
}

@media(prefers-reduced-motion:reduce) {
  .pj3-root * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important
  }

  .pj3-root button:hover {
    transform: none !important
  }
}


/* =========================================================
   v0.6.4 — mobile playability fix
   The v0.6.2 tablet rule reintroduced the desktop game columns
   after the earlier mobile breakpoint. Keep the actual task full-width.
   ========================================================= */
@media(max-width:860px) {
  .pj3-game {
    padding: 12px !important
  }

  .pj3-game-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important
  }

  .pj3-question-stage {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important
  }

  .pj3-risk-ladder {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important
  }

  .pj3-risk-ladder [data-levels] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 2px 0 7px !important
  }

  .pj3-ladder-row {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 22px 1fr !important;
    padding: 7px 8px !important;
    white-space: nowrap !important
  }

  .pj3-question-text,
  .pj3-scenario,
  .pj3-question-image,
  .pj3-hotspot-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important
  }

  .pj3-inline-hint {
    flex-direction: column !important;
    gap: 6px !important
  }

  .pj3-choice-grid,
  .pj3-truth-grid,
  .pj3-compare-grid {
    width: 100% !important;
    min-width: 0 !important
  }

  .pj3-answer-card,
  .pj3-truth-card,
  .pj3-compare-card {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important
  }
}

@media(max-width:560px) {
  .pj3-game {
    padding: 8px !important
  }

  .pj3-game-top {
    gap: 8px !important
  }

  .pj3-question-stage {
    padding: 16px !important;
    border-radius: 18px !important
  }

  .pj3-stage-head {
    width: 100% !important
  }

  .pj3-question-text {
    font-size: 21px !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important
  }

  .pj3-answer-card b,
  .pj3-truth-card b,
  .pj3-compare-card b {
    overflow-wrap: anywhere !important
  }

  .pj3-risk-ladder {
    padding: 13px !important;
    border-radius: 16px !important
  }
}

/* ============================================================
   v0.6.5 — immediate three-choice start screen
   Restores the fast entry flow: solo / create room / join room.
   ============================================================ */
.pj3-home-inner {
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center
}

.pj3-home-copy {
  max-width: 900px
}

.pj3-home-entry {
  margin-top: 24px;
  max-width: 900px
}

.pj3-home-alias {
  padding: 30px 29px;
  border: 1px solid #c8d6f3;
  border-radius: 6px;
  background: #FAFDFF;
  box-shadow: 0 7px 22px rgba(29, 34, 116, .06)
}

.pj3-home-alias-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px
}

.pj3-home-alias-head>div {
  min-width: 0
}

.pj3-home-alias-head small,
.pj3-home-alias-head strong {
  display: block;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important
}

.pj3-home-alias-head small {
  color: var(--pj3-site-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase
}

.pj3-home-alias-head strong {
  margin-top: 2px;
  color: var(--pj3-site-navy);
  font-size: 14px;
  font-weight: 800
}

.pj3-home-alias .pj3-text-button {
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;
  font-size: 14px !important;
  letter-spacing: 0.88px
}

.pj3-home-alias .pj3-alias-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px
}

.pj3-home-alias .pj3-alias {
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  min-height: 54px;
  padding: 8px 9px;
  border-radius: 6px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease
}

.pj3-home-alias .pj3-alias:hover:not(.is-selected),
.pj3-home-alias .pj3-alias:focus-visible:not(.is-selected) {
  background: var(--pj3-site-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(29, 34, 116, .12) !important
}

.pj3-home-alias .pj3-alias.is-selected:hover,
.pj3-home-alias .pj3-alias.is-selected:focus-visible {
  background: var(--pj3-site-blue-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(29, 34, 116, .35) !important
}

.pj3-home-alias .pj3-alias>span {
  width: 32px;
  height: 32px;
  font-size: 14px
}

.pj3-home-alias .pj3-alias b {
  overflow-wrap: break-word;
  white-space: normal;
  font-size: 12px;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important
}

.pj3-home-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 29px
}

.pj3-home-mode-card {
  appearance: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-width: 0;
  min-height: 92px;
  padding: 13px !important;
  border: 2px solid var(--pj3-site-blue) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--pj3-site-navy) !important;
  text-align: left !important;
  box-shadow: 0 8px 20px rgba(29, 34, 116, .07) !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease
}

.pj3-home-mode-card:hover,
.pj3-home-mode-card:focus-visible {
  background: var(--pj3-site-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(29, 34, 116, .12) !important
}

.pj3-home-mode-primary {
  border-color: var(--pj3-site-blue) !important;
  background: var(--pj3-site-blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(29, 34, 116, .25) !important
}

.pj3-home-mode-primary:hover,
.pj3-home-mode-primary:focus-visible {
  background: var(--pj3-site-blue-dark) !important
}

.pj3-home-mode-primary .pj3-home-mode-icon {
  background: #fff;
  color: var(--pj3-site-blue)
}

.pj3-home-mode-primary b,
.pj3-home-mode-primary small {
  color: #fff !important
}

.pj3-home-mode-primary>i {
  color: #fff !important
}

.pj3-home-mode-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pj3-site-light);
  color: var(--pj3-site-blue);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 24px;
  font-weight: 900
}

.pj3-home-mode-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: var(--pj3-site-blue);
  stroke-width: 4;
  stroke-linecap: round
}

.pj3-home-mode-card>span:nth-child(2) {
  min-width: 0
}

.pj3-home-mode-card b,
.pj3-home-mode-card small {
  display: block;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important
}

.pj3-home-mode-card b {
  color: var(--pj3-site-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.16
}

.pj3-home-mode-card small {
  margin-top: 4px;
  color: var(--pj3-site-muted);
  font-size: 10.5px;
  line-height: 1.3
}

.pj3-home-mode-card>i {
  color: var(--pj3-site-blue);
  font-size: 18px;
  font-style: normal;
  font-weight: 900
}

.pj3-home-join {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(330px, 1.3fr);
  gap: 12px;
  align-items: end;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #b8c9ee;
  border-radius: 16px;
  background: var(--pj3-site-light-2)
}

.pj3-home-join[hidden] {
  display: none !important
}

.pj3-home-join label strong,
.pj3-home-join label small {
  display: block;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important
}

.pj3-home-join label strong {
  color: var(--pj3-site-navy);
  font-size: 14px;
  font-weight: 900
}

.pj3-home-join label small {
  margin-top: 3px;
  color: var(--pj3-site-muted);
  font-size: 11px
}

.pj3-home-join-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(150px, 1fr);
  gap: 8px
}

.pj3-home-join-row input {
  width: 100% !important;
  min-height: 46px !important;
  padding: 9px 12px !important;
  border: 2px solid #b8c9ee !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--pj3-site-navy) !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase
}

.pj3-home-join .pj3-form-error {
  grid-column: 1/-1
}

.pj3-home-meta {
  margin-top: 16px
}

@media(max-width:980px) {
  .pj3-home-inner {
    grid-template-columns: 1fr
  }

  .pj3-home-copy {
    max-width: none
  }

  .pj3-home-entry {
    max-width: none
  }

  .pj3-home-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .pj3-hero-visual {
    margin-top: 10px
  }
}

@media(max-width:720px) {
  .pj3-home-alias .pj3-alias-options {
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    flex-direction: column;
  }

  .pj3-home-alias .pj3-alias {
    flex: 0 0 auto;
    min-height: 70px
  }

  .pj3-home-mode-grid {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .pj3-home-mode-card {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    min-height: 76px;
    padding: 10px 12px !important
  }

  .pj3-home-mode-card small {
    font-size: 10px
  }

  .pj3-home-join {
    grid-template-columns: 1fr
  }

  .pj3-home-join-row {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px) {
  .pj3-home-entry {
    margin-top: 18px
  }

  .pj3-home-alias {
    padding: 11px 12px;
    border-radius: 15px
  }

  .pj3-home-alias-head {
    align-items: flex-start
  }

  .pj3-home-alias-head strong {
    font-size: 13px
  }

  .pj3-home-alias .pj3-alias {
    flex-basis: auto;
    min-height: 60px
  }

  .pj3-home-mode-card b {
    font-size: 13px
  }

  .pj3-home-meta {
    margin-top: 12px
  }

  .pj3-hero-visual {
    min-height: 230px
  }
}

.pj3-home-mode-error {
  margin-top: 10px
}

/* ============================================================
   v0.6.6 — readability for older players
   Interactive text uses 13px as an absolute minimum. Primary
   actions are slightly larger without inflating the whole UI.
   ============================================================ */
.pj3-language button {
  font-size: 13px !important;
  padding: 8px 11px !important;
}

.pj3-btn {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.pj3-text-button {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.pj3-home-alias-head small {
  font-size: 12px !important;
}

.pj3-home-alias-head strong {
  font-size: 15px !important;
}

.pj3-home-alias .pj3-alias b {
  font-size: 18px !important;
  line-height: 34px !important;
}

.pj3-home-mode-card b {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.pj3-home-mode-card small {
  margin-top: 0 !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

.pj3-home-mode-card {
  min-height: 102px !important;
}

.pj3-home-join label strong {
  font-size: 15px !important;
}

.pj3-home-join label small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.pj3-hint-button b {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

.pj3-hint-button small {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.pj3-answer-card b {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.pj3-truth-card b,
.pj3-compare-card b {
  font-size: max(15px, 1em) !important;
  line-height: 1.4 !important;
}

.pj3-compare-card b {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.pj3-room-code {
  font-size: inherit !important;
}

.pj3-end-links button {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.pj3-result-card b,
.pj3-result-card small {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.pj3-live-answer b {
  font-size: 13px !important;
}

@media(max-width:720px) {
  .pj3-home-mode-card {
    min-height: 86px !important;
    padding: 12px 13px !important;
  }

  .pj3-home-mode-card b {
    font-size: 15px !important;
  }

  .pj3-home-mode-card small {
    font-size: 13px !important;
  }
}

@media(max-width:560px) {
  .pj3-home-alias-head strong {
    font-size: 14px !important;
  }

  .pj3-home-mode-card b {
    font-size: 15px !important;
  }

  .pj3-answer-card b,
  .pj3-truth-card b,
  .pj3-compare-card b {
    font-size: 14px !important;
  }

  .pj3-end-links {
    flex-direction: column !important;
  }
}


/* ============================================================
   v0.6.7 — WCAG 2.2 AA accessibility hardening
   ============================================================ */
.pj3-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important
}

.pj3-language button,
.pj3-alias,
.pj3-home-alias,
.pj3-home-join,
.pj3-home-join-row input,
.pj3-invite-box input,
.pj3-join-inline input,
.pj3-btn-secondary {
  border-color: #768fc6 !important
}

.pj3-root button,
.pj3-root input,
.pj3-root select {
  min-height: 44px !important
}

.pj3-language button,
.pj3-back {
  min-width: 44px !important
}

.pj3-root button:focus-visible,
.pj3-root input:focus-visible,
.pj3-root select:focus-visible,
.pj3-root textarea:focus-visible,
.pj3-root [tabindex]:focus-visible {
  outline: 4px solid #fcea05 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #1d2274 !important
}

.pj3-root [data-screen-focus]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important
}

.pj3-root button,
.pj3-root label,
.pj3-root p,
.pj3-root small,
.pj3-root b,
.pj3-root strong,
.pj3-root span {
  overflow-wrap: anywhere
}

.pj3-home-mode-card,
.pj3-alias,
.pj3-answer-card,
.pj3-truth-card,
.pj3-compare-card,
.pj3-btn,
.pj3-hint-button {
  height: auto !important
}

.pj3-answer-card.is-removed {
  opacity: .55 !important;
  filter: grayscale(.65) !important
}

.pj3-hotspot-image-button {
  appearance: none !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  cursor: crosshair !important;
  text-align: left !important
}

.pj3-hotspot-image-button:disabled {
  cursor: default !important;
  opacity: 1 !important
}

.pj3-hotspot-image-button>img {
  display: block;
  width: 100%;
  height: auto
}

.pj3-hotspot-key-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 4px solid #1d2274;
  border-radius: 50%;
  background: rgba(252, 234, 5, .55);
  box-shadow: 0 0 0 3px #fff;
  pointer-events: none
}

.pj3-hotspot-key-cursor[hidden] {
  display: none !important
}

.pj3-hotspot-key-help {
  position: relative;
  z-index: 3;
  margin: 0 !important;
  padding: 10px 13px !important;
  border-top: 1px solid #768fc6;
  background: #fff;
  color: #343a55;
  font-size: 13px !important;
  line-height: 1.45 !important
}

.pj3-form-error:before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 900
}

@media(max-width:420px) {
  .pj3-bleed {
    width: calc(100vw - 12px) !important
  }

  .pj3-screen {
    padding-left: 8px !important;
    padding-right: 8px !important
  }

  .pj3-game {
    padding: 6px !important
  }

  .pj3-game-top {
    grid-template-columns: minmax(0, 1fr) 110px !important
  }

  .pj3-account,
  .pj3-game-time,
  .pj3-account-scammer,
  .pj3-question-stage,
  .pj3-risk-ladder {
    min-width: 0 !important
  }

  .pj3-home-mode-card {
    grid-template-columns: 42px minmax(0, 1fr) !important
  }

  .pj3-home-mode-card>i {
    display: none
  }

  .pj3-home-alias .pj3-alias-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important
  }

  .pj3-home-alias .pj3-alias {
    width: 100% !important;
    flex: 1 1 auto !important
  }

  .pj3-risk-ladder [data-levels] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    overflow: visible !important;
    gap: 6px !important
  }

  .pj3-ladder-row {
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important
  }

  .pj3-ladder-row b {
    font-size: 11px !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .pj3-root * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important
  }
}

/* v0.6.7 accessibility readability floor
   Keep meaningful UI copy at 13px+ for the older-player audience while
   preserving larger primary actions from v0.6.6. */
.pj3-kicker,
.pj3-home-meta,
.pj3-home-alias-head small,
.pj3-account small,
.pj3-account em,
.pj3-game-time small,
.pj3-account-quote,
.pj3-difficulty,
.pj3-risk,
.pj3-ladder-title b,
.pj3-ladder-title small,
.pj3-ladder-row,
.pj3-ladder-row b,
.pj3-live-answer small,
.pj3-profile-item b,
.pj3-profile-item small,
.pj3-end-account small,
.pj3-end-account em,
.pj3-end-time,
.pj3-detail-head small,
.pj3-detail-head>strong small,
.pj3-score-row small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.pj3-root [data-screen-focus] {
  scroll-margin-block: 24px
}

@media(max-width:420px) {

  .pj3-ladder-row b,
  .pj3-ladder-row span {
    font-size: 13px !important
  }
}

@media(forced-colors:active) {

  .pj3-root button,
  .pj3-root input,
  .pj3-root select,
  .pj3-root textarea {
    forced-color-adjust: auto
  }

  .pj3-root button:focus-visible,
  .pj3-root input:focus-visible,
  .pj3-root select:focus-visible,
  .pj3-root textarea:focus-visible,
  .pj3-root [tabindex]:focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important
  }
}

/* ============================================================
   v0.6.8 — robust hotspot keyboard control + richer aliases
   ============================================================ */
.pj3-home-alias .pj3-alias {
  min-height: 79px !important;
  grid-template-columns: 40px minmax(0, 1fr) 20px !important;
  padding: 9px 11px !important;
}

.pj3-home-alias .pj3-alias>span {
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  font-weight: 700 !important;
}

.pj3-lobby-player>span {
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
}

.pj3-hotspot-key-active .pj3-hotspot-image-button:not(:disabled) {
  box-shadow: 0 0 0 2px rgba(46, 78, 204, .16) inset !important;
}

/* Keep the site's Roboto typography protected from WordPress theme overrides. */
.pj3-root,
.pj3-root button,
.pj3-root input,
.pj3-root select,
.pj3-root textarea {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-copy h1,
.pj3-section-copy h2,
.pj3-lobby-inner h2,
.pj3-tutorial-headline,
.pj3-end-head h2,
.pj3-hotspot-intro h3,
.pj3-detail-head h4 {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important;
}

.pj3-question-text,
.pj3-ladder-title b {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
}

.pj3-home-copy h1 {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* v0.6.11 — native keyboard-safe hotspot controls */
.pj3-hotspot-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding: 14px !important;
  border-top: 1px solid #9fb4e4 !important;
  background: #f6f9ff !important;
}

.pj3-hotspot-controls[hidden] {
  display: none !important
}

.pj3-hotspot-pad {
  display: grid !important;
  grid-template-columns: repeat(4, 48px) !important;
  gap: 8px !important;
}

.pj3-hotspot-pad button {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #2e4ecc !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #1d2274 !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.pj3-hotspot-pad button:hover {
  background: #d8ebff !important
}

.pj3-hotspot-confirm {
  min-height: 48px !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.pj3-hotspot-pad button:focus-visible,
.pj3-hotspot-confirm:focus-visible {
  outline: 3px solid #1d2274 !important;
  outline-offset: 3px !important;
}

@media(max-width:560px) {
  .pj3-hotspot-controls {
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important
  }

  .pj3-hotspot-pad {
    grid-template-columns: repeat(4, minmax(44px, 1fr)) !important;
    width: 100% !important
  }

  .pj3-hotspot-pad button {
    width: 100% !important;
    min-width: 44px !important;
    height: 46px !important;
    min-height: 46px !important
  }

  .pj3-hotspot-confirm {
    width: 100% !important
  }
}

.pj3-hotspot-key-help {
  pointer-events: none !important
}


/* v0.6.11 — dependable native keyboard interaction */
.pj3-hotspot-controls {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto auto !important;
  align-items: end !important;
  gap: 14px !important;
}

.pj3-hotspot-native {
  min-width: 0 !important;
  padding: 2px 4px !important;
}

.pj3-hotspot-native>p {
  margin: 0 0 10px !important;
  color: #35476a !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.pj3-hotspot-native label {
  display: grid !important;
  grid-template-columns: 190px minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 8px 0 !important;
  color: #1d2274 !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pj3-hotspot-native input[type="range"] {
  width: 100% !important;
  min-width: 120px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #2e4ecc !important;
  cursor: pointer !important;
}

.pj3-hotspot-native input[type="range"]:focus-visible {
  outline: 3px solid #1d2274 !important;
  outline-offset: 3px !important;
  border-radius: 5px !important;
}

/* Learning interslide: one unambiguous transfer, no wrapped amount. */
.pj3-money-transfer {
  grid-template-columns: minmax(190px, 1fr) 165px minmax(250px, 1.1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  max-width: 850px !important;
  margin: 0 auto 28px !important;
}

.pj3-money-transfer .pj3-transfer-account {
  min-width: 0 !important;
  min-height: 116px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 18px 20px !important;
  border: 1px solid #a9bbe8 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(29, 34, 116, .06) !important;
}

.pj3-money-transfer .pj3-transfer-account strong {
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  word-break: normal !important;
  font-size: 32px !important;
  line-height: 1 !important;
}

.pj3-transfer-amount {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #f0b5bc !important;
  border-radius: 18px !important;
  background: #fff !important;
  text-align: center !important;
}

.pj3-transfer-amount strong {
  display: block !important;
  color: #b42334 !important;
  font-family: "Roboto Slab", Roboto, Georgia, serif !important;
  font-size: 31px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.pj3-transfer-amount small {
  margin-top: 6px !important;
  color: #4d5c78 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pj3-transfer-amount span {
  margin-top: 7px !important;
  color: #2e4ecc !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.pj3-tutorial.is-correct .pj3-transfer-amount {
  border-color: #a5d7ba !important;
  background: #ffffff !important;
}

.pj3-tutorial.is-correct .pj3-transfer-amount strong {
  color: #177a45 !important
}

.pj3-money-transfer .pj3-transfer-scammer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 86px !important;
  gap: 14px !important;
  align-items: center !important;
  background: #fff !important;
}

.pj3-transfer-account-copy {
  min-width: 0 !important
}

.pj3-money-transfer .pj3-transfer-scammer .pj3-feedback-petis.pj3-petis-emoji {
  display: grid !important;
  place-items: center !important;
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  margin: 0 !important;
  border: 2px solid #c2d0ed !important;
  border-radius: 50% !important;
  background: #fff !important;
  font-size: 48px !important;
  line-height: 1 !important;
}

.pj3-money-transfer .pj3-transfer-scammer .pj3-feedback-petis.is-pleased {
  background: #fff5f5 !important
}

.pj3-money-transfer .pj3-transfer-scammer .pj3-feedback-petis.is-foiled {
  background: #effaf3 !important
}

@media(max-width:860px) {
  .pj3-hotspot-controls {
    grid-template-columns: 1fr !important;
    align-items: stretch !important
  }

  .pj3-hotspot-pad {
    justify-self: center !important
  }

  .pj3-hotspot-confirm {
    width: 100% !important
  }

  .pj3-money-transfer {
    grid-template-columns: 1fr 110px 1fr !important;
    gap: 8px !important
  }

  .pj3-money-transfer .pj3-transfer-account {
    padding: 12px !important;
    min-height: 0 !important
  }

  .pj3-transfer-amount {
    padding: 10px 6px !important
  }

  .pj3-transfer-amount strong {
    font-size: 22px !important
  }

  .pj3-transfer-amount small {
    font-size: 11px !important
  }

  .pj3-transfer-amount span {
    font-size: 16px !important;
    margin-top: 4px !important
  }

  .pj3-money-transfer .pj3-transfer-account strong {
    font-size: 22px !important
  }

  .pj3-money-transfer .pj3-transfer-scammer {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    justify-items: start !important
  }

  .pj3-money-transfer .pj3-transfer-scammer .pj3-feedback-petis.pj3-petis-emoji {
    display: none !important
  }
}

@media(max-width:560px) {
  .pj3-hotspot-native label {
    grid-template-columns: 1fr !important;
    gap: 4px !important
  }

  .pj3-hotspot-native input[type="range"] {
    min-width: 0 !important
  }

  .pj3-money-transfer {
    grid-template-columns: 1fr !important;
    max-width: 430px !important;
    gap: 8px !important
  }

  .pj3-money-transfer .pj3-transfer-account {
    min-height: 0 !important;
    padding: 10px !important
  }

  .pj3-money-transfer .pj3-transfer-account strong {
    font-size: 19px !important
  }

  .pj3-transfer-amount {
    min-height: 0 !important;
    padding: 8px 5px !important;
    flex-direction: row !important;
    gap: 8px !important
  }

  .pj3-transfer-amount strong {
    font-size: 19px !important
  }

  .pj3-transfer-amount small {
    font-size: 10px !important
  }

  .pj3-transfer-amount span {
    font-size: 14px !important;
    margin-top: 0 !important;
    transform: rotate(90deg) !important
  }

  .pj3-money-transfer .pj3-transfer-scammer {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    justify-items: start !important
  }

  .pj3-money-transfer .pj3-transfer-scammer .pj3-feedback-petis.pj3-petis-emoji {
    display: none !important
  }
}

/* v0.6.12 — dedicated full-viewport game mode.
   The root is moved to <body> while active so WordPress wrappers, shortcode/code
   blocks, transformed ancestors and theme scrolling cannot own the keyboard/viewport. */
html.pj3-game-mode-open,
body.pj3-game-mode-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.pj3-game-mode-open {
  touch-action: manipulation !important
}

.pj3-root.is-game-mode {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  width: 100dvw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: #f5f9ff !important;
  box-shadow: none !important;
  scrollbar-gutter: stable;
}

.pj3-root.is-game-mode:fullscreen,
.pj3-root.is-game-mode:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important;
  background: #f5f9ff !important;
}

.pj3-game-mode-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: 52px !important;
  padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)) !important;
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid #cad7f4 !important;
  box-shadow: 0 4px 16px rgba(29, 34, 116, .08) !important;
}

.pj3-game-mode-bar[hidden] {
  display: none !important
}

.pj3-game-mode-bar>span {
  margin-right: auto !important;
  color: #4d5c78 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

.pj3-game-mode-bar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 8px 13px !important;
  border: 2px solid #2e4ecc !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1d2274 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.pj3-game-mode-bar button b {
  font-size: 18px !important;
  line-height: 1 !important
}

.pj3-root.is-game-mode>.pj3-screen {
  min-height: calc(100dvh - 52px) !important;
}

.pj3-root.is-game-mode .pj3-game {
  padding-top: 18px !important;
}

@media(max-width:600px) {
  .pj3-game-mode-bar>span {
    display: none !important
  }

  .pj3-game-mode-bar {
    justify-content: flex-end !important;
    min-height: 50px !important
  }

  .pj3-game-mode-bar button {
    font-size: 13px !important;
    min-height: 40px !important
  }

  .pj3-root.is-game-mode>.pj3-screen {
    min-height: calc(100dvh - 50px) !important
  }
}


/* v0.6.13 — native keyboard controls only.
   WordPress/background content is inert in game mode; keyboard operation uses
   native buttons and input[type=range] instead of global arrow interception. */
.pj3-hotspot-native-help {
  margin: 0 0 14px !important;
  padding: 11px 13px !important;
  border: 1px solid #9fb4e4 !important;
  border-left: 5px solid #fcea05 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1d2274 !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.pj3-hotspot-slider {
  display: grid !important;
  grid-template-columns: minmax(220px, .7fr) minmax(180px, 1.3fr) !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 12px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #c2d0ed !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.pj3-hotspot-slider>span {
  color: #1d2274 !important;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.pj3-hotspot-slider>span b {
  display: inline-block !important;
  min-width: 48px !important;
  margin-left: 6px !important;
  color: #2e4ecc !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.pj3-hotspot-slider input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #2e4ecc !important;
}

.pj3-hotspot-slider input[type="range"]:focus,
.pj3-hotspot-slider input[type="range"]:focus-visible {
  outline: 4px solid #fcea05 !important;
  outline-offset: 3px !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 6px #1d2274 !important;
}

.pj3-root.is-game-mode [data-action="answer-choice"]:focus,
.pj3-root.is-game-mode [data-action="answer-choice"]:focus-visible,
.pj3-root.is-game-mode button:focus-visible,
.pj3-root.is-game-mode input:focus-visible {
  outline: 4px solid #fcea05 !important;
  outline-offset: 3px !important;
}

@media(max-width:700px) {
  .pj3-hotspot-slider {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 10px !important
  }

  .pj3-hotspot-native-help {
    font-size: 13px !important
  }
}

/* v0.6.14 — arrows are game controls, never viewport scrolling. */
.pj3-root.is-game-mode {
  scroll-behavior: auto !important;
  overscroll-behavior: none !important;
}

.pj3-root.is-game-mode:focus {
  outline: none !important
}


/* v0.6.16 — screenshot-aligned desktop frame + optional fullscreen.
   Normal play stays embedded. The top game-mode bar offers fullscreen only on request. */
@media (min-width: 861px) {
  .pj3-root:not(.is-game-mode) {
    border: 1px solid #cbd8f1 !important;
    border-radius: 28px !important;
    background: #f5f9ff !important;
    box-shadow: 0 18px 55px rgba(29, 34, 116, .10) !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-game-mode-bar {
    position: relative !important;
    top: auto !important;
    min-height: 52px !important;
    border-bottom: 1px solid #cbd8f1 !important;
    box-shadow: none !important;
    background: #fff !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-game {
    padding: 24px 48px 32px !important;
    background: linear-gradient(180deg, #f8fbff 0, #f2f7ff 100%) !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-game-top {
    grid-template-columns: 220px 150px minmax(380px, 1fr) !important;
    gap: 14px !important;
    max-width: 1320px !important;
    margin: 0 auto 18px !important;
    align-items: stretch !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-game-layout {
    grid-template-columns: minmax(0, 1fr) 230px !important;
    gap: 20px !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-question-stage {
    min-height: 555px !important;
    padding: 28px 34px 34px !important;
    border: 1px solid #c1cfec !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(29, 34, 116, .045) !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-risk-ladder {
    align-self: stretch !important;
    border-radius: 22px !important;
    padding: 18px !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-stage-head {
    min-height: 64px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #d7e0f3 !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-question-text {
    max-width: 1000px !important;
    margin: 34px auto 34px !important;
    text-align: left !important;
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1.28 !important;
  }

  .pj3-root:not(.is-game-mode) .pj3-answer-card {
    min-height: 70px !important;
    border-radius: 15px !important;
  }
}

/* ============================================================
   v0.6.17 — task-ladder pill redesign (per design mockup)
   Circular numbered badges in a two-column pill list, matching
   the "Peata Petis" ladder mock (Ülesanne X/15 sidebar).
   ============================================================ */
.pj3-ladder-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 31px !important;
  padding: 2px 2px 2px 2px !important;
  border: 1px solid #c6d1ec !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1d2274 !important;
  font-size: 13px !important;
}

.pj3-ladder-row i {
  display: none !important
}

.pj3-ladder-row span {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #354dc5 !important;
  color: #f1f9fe !important;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.pj3-ladder-row b {
  /* margin-left:auto!important; */
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
  color: #1d2274 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.pj3-ladder-row.is-current {
  border-color: #f9ea4f !important;
  background: #fffef1 !important;
  color: #1d2274 !important;
}

.pj3-ladder-row.is-done {
  opacity: .45 !important
}

@media(min-width:861px) {
  .pj3-risk-ladder [data-levels] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap: 10px !important;
  }
}

/* ============================================================
   v0.6.24 — home screen realigned to the "Peata petis 3" mockup.
   Placed last so it wins over the earlier v0.6.1/v0.6.2 home rules
   further up this file (same selectors, same specificity).
   ============================================================ */
.pj3-home {
  background: var(--pj3-site-light-2) !important
}

.pj3-home-copy h1 {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: var(--pj3-site-navy) !important;
}

.pj3-home-meta {
  color: var(--pj3-site-navy) !important;
  font-weight: 700 !important;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  margin: 0 0 22px !important;
  font-size: 18px !important;
  letter-spacing: 2.49px !important;
}

.pj3-home-alias-head small {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 16px !important;
  letter-spacing: 2.22px !important;
}

.pj3-kicker {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .08em !important;
  border-radius: 14px 14px 14px 0 !important;
}

.pj3-glow-lock {
  display: none !important
}

.pj3-petis-hero.pj3-petis-emoji {
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 60px 10px rgba(255, 255, 255, .9) !important;
}

.pj3-home-alias-head strong {
  display: none !important
}

.pj3-home-alias .pj3-text-button {
  text-decoration: none !important;
  color: var(--pj3-site-blue) !important;
  font-weight: 700 !important;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pj3-reroll-icon {
  width: 14px !important;
  height: 15px !important;
  display: block !important
}

.pj3-alias-check-icon {
  width: 25px !important;
  height: 21px !important;
  display: block !important
}

.pj3-home-alias .pj3-alias {
  grid-template-columns: 52px minmax(0, 1fr) 26px !important;
  min-height: 79px !important;
}

.pj3-home-alias .pj3-alias>span {
  width: 48px !important;
  height: 48px !important;
  font-size: 18px !important;
}

.pj3-home-alias .pj3-alias {
  border-width: 2px !important;
  border-color: var(--pj3-site-navy) !important;
}

.pj3-home-alias .pj3-alias.is-selected {
  border-color: var(--pj3-site-navy) !important
}

.pj3-home-mode-card b {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 34px !important;
}

.pj3-home-mode-card small {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 18px !important;
}

.pj3-home-mode-icon-img {
  width: auto !important;
  height: 24px !important;
  max-width: 28px !important;
  display: block !important
}

.pj3-alias.is-selected {
  border-color: var(--pj3-site-navy) !important;
  background: var(--pj3-site-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(29, 34, 116, .25) !important;
}

.pj3-alias.is-selected b {
  color: #fff !important
}

.pj3-alias.is-selected>span {
  background: #fff !important;
  color: var(--pj3-site-blue) !important
}

.pj3-alias.is-selected i {
  color: #fff !important
}

/* v0.6.26 — tablet range (981-1200px) squeezed the alias/mode-card grids
   because the hero circle held a fixed 300px/280px minimum. Shrink only
   the hero side here so the text column regains room. */
@media(max-width:1200px) and (min-width:981px) {
  .pj3-home-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(190px, .5fr) !important
  }

  .pj3-hero-visual {
    min-height: 320px !important
  }

  .pj3-petis-hero.pj3-petis-emoji {
    width: 200px !important;
    height: 200px !important;
    font-size: 108px !important;
    margin-top: 0 !important
  }
}

@media(max-width:980px) {
  .pj3-hero-visual {
    min-height: 200px !important;
    margin-top: 8px !important
  }

  .pj3-petis-hero.pj3-petis-emoji {
    width: 160px !important;
    height: 160px !important;
    font-size: 88px !important;
    margin-top: 0 !important
  }
}

.pj3-home-mode-primary {
  border-color: var(--pj3-site-blue) !important;
  background: var(--pj3-site-blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(29, 34, 116, .25) !important;
}

.pj3-home-mode-primary:hover,
.pj3-home-mode-primary:focus-visible {
  background: var(--pj3-site-blue-dark) !important
}

.pj3-home-mode-primary .pj3-home-mode-icon {
  background: #fff !important;
  color: var(--pj3-site-blue) !important
}

.pj3-home-mode-primary b,
.pj3-home-mode-primary small {
  color: #fff !important
}

.pj3-home-mode-primary>i {
  color: #fff !important
}

.pj3-home-alias .pj3-alias.is-selected:hover,
.pj3-home-alias .pj3-alias.is-selected:focus-visible {
  background: var(--pj3-site-blue-dark);
}

/* ===================================================================
   Typography rules copy (auto-extracted) — font-family, font-size,
   font-weight, font-style, font-stretch, font-variant, font shorthand,
   line-height, letter-spacing and word-spacing declarations only;
   original selectors and @media context preserved so they remain
   functional.
   =================================================================== */
.pj3-root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.pj3-root button,
.pj3-root input {
  font: inherit;
}

.pj3-language button {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.pj3-kicker {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
}

.pj3-primary-cta {
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

.pj3-primary-cta i {
  font-style: normal;
}

.pj3-btn {
  font-weight: 850 !important;
}

.pj3-text-button {
  font-weight: 800;
}

.pj3-back {
  font-size: 21px;
}

.pj3-mini-brand {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .08em;
}

.pj3-home-copy h1 {
  font-size: clamp(58px, 7vw, 93px) !important;
  line-height: 122px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.pj3-home-copy>p {
  font-size: clamp(19px, 2vw, 26px) !important;
  line-height: 34px !important;
  font-weight: 600 !important;
}

.pj3-home-meta {
  font-size: 12px;
  font-weight: 800;
}

.pj3-hero-balance small,
.pj3-account small {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
}

.pj3-hero-balance strong {
  font-size: 29px;
  line-height: 1;
}

.pj3-hero-balance em,
.pj3-account em {
  font-size: 10px;
  font-style: normal;
}

.pj3-section-copy h2 {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 950 !important;
}

.pj3-section-copy p {
  font-size: 16px;
}

.pj3-alias>span {
  font-size: 18px;
  font-weight: 950;
}

.pj3-alias b {
  font-size: 15px;
}

.pj3-alias i {
  font-style: normal;
  font-weight: 950;
}

.pj3-mode-button>i {
  font-style: normal;
  font-size: 28px;
}

.pj3-mode-button b {
  font-size: 23px;
  font-weight: 950;
}

.pj3-mode-button small {
  font-size: 13px;
  line-height: 1.4;
}

.pj3-multi-setup h3 {
  font-size: 22px !important;
}

.pj3-join-inline input {
  font-weight: 950;
  letter-spacing: .12em;
}

.pj3-lobby-inner h2 {
  font-size: clamp(36px, 5vw, 66px) !important;
  font-weight: 950 !important;
}

.pj3-lobby-inner>p {
  font-size: 17px;
}

.pj3-room-code {
  font: inherit;
  font-weight: 950;
  letter-spacing: .08em;
}

.pj3-lobby-status {
  font-weight: 900;
}

.pj3-lobby-player>span {
  font-weight: 950;
}

.pj3-lobby-footer>div {
  font-weight: 750;
}

.pj3-account strong {
  font-size: 24px;
  line-height: 1.05;
}

.pj3-question-counter>b {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em;
}

.pj3-hint-button>span {
  font-weight: 950;
}

.pj3-hint-button b {
  font-size: 11px;
}

.pj3-difficulty {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .1em;
}

.pj3-risk {
  font-size: 12px;
}

.pj3-risk i {
  font-style: normal;
  font-weight: 950;
}

.pj3-scammer-quote span {
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

.pj3-scenario-window pre {
  font: 700 15px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.pj3-question-text {
  font-size: clamp(23px, 2.25vw, 34px) !important;
  line-height: 1.34 !important;
  font-weight: 760 !important;
}

.pj3-answer-card>span {
  font-weight: 950;
}

.pj3-answer-card b {
  font-size: 14px;
  line-height: 1.4;
}

.pj3-truth-card span {
  font-size: 28px;
  font-weight: 950;
}

.pj3-truth-card b {
  font-size: 19px;
}

.pj3-compare-card span {
  font-weight: 950;
}

.pj3-compare-card b {
  line-height: 1.45;
}

.pj3-hotspot-intro h3 {
  font-size: clamp(30px, 4vw, 56px) !important;
  font-weight: 950 !important;
}

.pj3-hotspot-intro p {
  font-size: 17px;
}

.pj3-inline-hint span {
  line-height: 1.45;
}

.pj3-live-answer b {
  font-size: 12px;
}

.pj3-ladder-title b {
  font-size: 12px;
  letter-spacing: .08em;
}

.pj3-ladder-title small {
  font-size: 10px;
  line-height: 1.35;
}

.pj3-ladder-row {
  font-size: 10px;
}

.pj3-ladder-row span {
  font-weight: 900;
}

.pj3-ladder-row b {
  font-size: 10px;
}

.pj3-tutorial-headline {
  font-size: clamp(37px, 5vw, 70px);
  font-weight: 1000;
  letter-spacing: -.03em;
}

.pj3-money-transfer .pj3-account strong {
  font-size: 34px;
}

.pj3-coins span {
  font-size: 34px;
  font-weight: 700;
}

.pj3-learning-grid h3 {
  font-size: 14px !important;
  font-weight: 950 !important;
}

.pj3-learning-grid p {
  font-size: 15px !important;
  line-height: 1.62 !important;
}

.pj3-host-wait {
  font-weight: 800;
}

.pj3-end-head h2 {
  font-size: clamp(38px, 5vw, 66px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

.pj3-end-head p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.pj3-end-account strong {
  font-size: 37px;
}

.pj3-end-account small,
.pj3-end-account em {
  font-size: 10px;
  font-style: normal;
}

.pj3-preserved strong {
  font-size: 42px;
}

.pj3-profile-grid h3 {
  font-size: 13px !important;
  letter-spacing: .08em;
}

.pj3-profile-item b {
  font-size: 12px;
}

.pj3-percentile p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.pj3-result-card>span {
  font-weight: 950;
}

.pj3-result-card b {
  font-size: 14px;
}

.pj3-result-card strong {
  font-size: 18px;
}

.pj3-result-card i {
  font-style: normal;
}

.pj3-detail-head h4 {
  font-size: 24px !important;
}

.pj3-detail-head>strong {
  font-size: 25px;
}

.pj3-detail-head>strong small {
  font-size: 10px;
}

.pj3-friend-cta b {
  font-size: 16px;
}

.pj3-friend-cta i {
  font-style: normal;
  font-size: 22px;
}

.pj3-end-links button {
  font-size: 12px;
}

@media(max-width:860px) {
  .pj3-game-top .pj3-account-scammer strong {
    font-size: 20px;
  }
}

@media(max-width:560px) {
  .pj3-home-copy h1 {
    font-size: 50px !important;
  }

  .pj3-home-copy>p {
    font-size: 17px !important;
  }

  .pj3-primary-cta {
    font-size: 16px !important;
  }

  .pj3-mini-brand {
    font-size: 13px;
  }

  .pj3-section-copy h2 {
    font-size: 31px !important;
  }

  .pj3-mode-button b {
    font-size: 18px;
  }

  .pj3-question-text {
    font-size: 21px !important;
  }

  .pj3-answer-card b {
    font-size: 13px;
  }

  .pj3-hotspot-intro h3 {
    font-size: 32px !important;
  }

  .pj3-hotspot-intro p {
    font-size: 14px;
  }

  .pj3-tutorial-headline {
    font-size: 34px;
  }

  .pj3-money-transfer .pj3-account strong {
    font-size: 25px;
  }

  .pj3-coins span {
    font-size: 25px;
  }

  .pj3-end-account strong {
    font-size: 25px;
  }

  .pj3-preserved strong {
    font-size: 28px;
  }
}

.pj3-root {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pj3-root button,
.pj3-root input {
  font-family: inherit;
}

.pj3-home-copy h1,
.pj3-section-copy h2,
.pj3-lobby-inner h2,
.pj3-tutorial-headline,
.pj3-end-head h2,
.pj3-hotspot-intro h3,
.pj3-detail-head h4 {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important;
}

.pj3-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.pj3-home-copy h1 {
  letter-spacing: -.035em !important;
}

.pj3-home-copy>p {
  font-weight: 500 !important;
}

.pj3-home-meta {
  font-weight: 700;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pj3-question-text {
  font-weight: 700 !important;
}

.pj3-inline-hint b {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
}

.pj3-inline-hint span {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.pj3-learning-grid p {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

.pj3-root,
.pj3-root button,
.pj3-root input,
.pj3-root textarea,
.pj3-root select,
.pj3-root label,
.pj3-root p,
.pj3-root small,
.pj3-root strong,
.pj3-root b,
.pj3-root em,
.pj3-root div,
.pj3-root pre {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-root span {
  font-family: "Roboto Mono", "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-copy h1,
.pj3-section-copy h2,
.pj3-lobby-inner h2,
.pj3-tutorial-headline,
.pj3-end-head h2,
.pj3-hotspot-intro h3,
.pj3-detail-head h4 {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important;
}

.pj3-question-text,
.pj3-ladder-title b {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
}

.pj3-petis-emoji,
.pj3-petis-mini {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.pj3-petis-hero.pj3-petis-emoji {
  font-size: 150px;
  line-height: 1;
}

.pj3-account strong {
  font-size: 28px;
}

.pj3-game-time small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

.pj3-game-time strong {
  font-size: 27px;
  line-height: 1;
}

.pj3-petis-mini {
  font-size: 31px;
  line-height: 1;
}

.pj3-account-quote {
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

.pj3-difficulty {
  font-size: 11px;
}

.pj3-risk {
  font-size: 13px;
  font-weight: 700;
}

.pj3-risk b {
  font-weight: 900;
}

.pj3-question-text {
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.34 !important;
}

.pj3-scenario-window pre {
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

.pj3-ladder-title b {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
}

.pj3-ladder-title small {
  font-size: 11px;
}

.pj3-ladder-row {
  font-size: 11px !important;
}

.pj3-feedback-petis.pj3-petis-emoji,
.pj3-end-petis.pj3-petis-emoji {
  font-size: 92px;
  line-height: 1;
}

.pj3-end-petis.pj3-petis-emoji {
  font-size: 82px;
}

.pj3-end-time {
  font-size: 12px;
}

.pj3-end-time strong {
  font-size: 15px;
}

@media(max-width:860px) {
  .pj3-petis-hero.pj3-petis-emoji {
    font-size: 122px;
  }

  .pj3-feedback-petis.pj3-petis-emoji {
    font-size: 62px;
  }
}

@media(max-width:560px) {
  .pj3-petis-hero.pj3-petis-emoji {
    font-size: 102px;
  }

  .pj3-account strong {
    font-size: 23px;
  }

  .pj3-game-time strong {
    font-size: 21px;
  }

  .pj3-question-text {
    font-size: 22px !important;
  }

  .pj3-end-petis.pj3-petis-emoji {
    font-size: 45px;
  }
}

@media(max-width:560px) {
  .pj3-question-text {
    font-size: 21px !important;
    line-height: 1.28 !important;
  }
}

.pj3-home-alias-head small,
.pj3-home-alias-head strong {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-alias-head small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.pj3-home-alias-head strong {
  font-size: 14px;
  font-weight: 800;
}

.pj3-home-alias .pj3-text-button {
  font-size: 14px !important;
  letter-spacing: 0.88px;
}

.pj3-home-alias .pj3-alias>span {
  font-size: 14px;
}

.pj3-home-alias .pj3-alias b {
  font-size: 12px;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-mode-icon {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 24px;
  font-weight: 900;
}

.pj3-home-mode-card b,
.pj3-home-mode-card small {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-mode-card b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.16;
}

.pj3-home-mode-card small {
  font-size: 10.5px;
  line-height: 1.3;
}

.pj3-home-mode-card>i {
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.pj3-home-join label strong,
.pj3-home-join label small {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-join label strong {
  font-size: 14px;
  font-weight: 900;
}

.pj3-home-join label small {
  font-size: 11px;
}

.pj3-home-join-row input {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
}

@media(max-width:720px) {
  .pj3-home-mode-card small {
    font-size: 10px;
  }
}

@media(max-width:560px) {
  .pj3-home-alias-head strong {
    font-size: 13px;
  }

  .pj3-home-mode-card b {
    font-size: 13px;
  }
}

.pj3-language button {
  font-size: 13px !important;
}

.pj3-btn {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.pj3-text-button {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.pj3-home-alias-head small {
  font-size: 12px !important;
}

.pj3-home-alias-head strong {
  font-size: 15px !important;
}

.pj3-home-alias .pj3-alias b {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
}

.pj3-home-mode-card b {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.pj3-home-mode-card small {
  font-size: 13px !important;
  line-height: 1.38 !important;
}

.pj3-home-join label strong {
  font-size: 15px !important;
}

.pj3-home-join label small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.pj3-hint-button b {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

.pj3-hint-button small {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.pj3-answer-card b {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.pj3-truth-card b,
.pj3-compare-card b {
  font-size: max(15px, 1em) !important;
  line-height: 1.4 !important;
}

.pj3-compare-card b {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.pj3-room-code {
  font-size: inherit !important;
}

.pj3-end-links button {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.pj3-result-card b,
.pj3-result-card small {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.pj3-live-answer b {
  font-size: 13px !important;
}

@media(max-width:720px) {
  .pj3-home-mode-card b {
    font-size: 15px !important;
  }

  .pj3-home-mode-card small {
    font-size: 13px !important;
  }
}

@media(max-width:560px) {
  .pj3-home-alias-head strong {
    font-size: 14px !important;
  }

  .pj3-home-mode-card b {
    font-size: 15px !important;
  }

  .pj3-answer-card b,
  .pj3-truth-card b,
  .pj3-compare-card b {
    font-size: 14px !important;
  }
}

.pj3-hotspot-key-help {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.pj3-form-error:before {
  font-weight: 900;
}

@media(max-width:420px) {
  .pj3-ladder-row b {
    font-size: 11px !important;
  }
}

.pj3-kicker,
.pj3-home-meta,
.pj3-home-alias-head small,
.pj3-account small,
.pj3-account em,
.pj3-game-time small,
.pj3-account-quote,
.pj3-difficulty,
.pj3-risk,
.pj3-ladder-title b,
.pj3-ladder-title small,
.pj3-ladder-row,
.pj3-ladder-row b,
.pj3-live-answer small,
.pj3-profile-item b,
.pj3-profile-item small,
.pj3-end-account small,
.pj3-end-account em,
.pj3-end-time,
.pj3-detail-head small,
.pj3-detail-head>strong small,
.pj3-score-row small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

@media(max-width:420px) {

  .pj3-ladder-row b,
  .pj3-ladder-row span {
    font-size: 13px !important;
  }
}

.pj3-home-alias .pj3-alias>span {
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  font-weight: 700 !important;
}

.pj3-lobby-player>span {
  font-size: 13px !important;
  letter-spacing: .02em !important;
}

.pj3-root,
.pj3-root button,
.pj3-root input,
.pj3-root select,
.pj3-root textarea {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj3-home-copy h1,
.pj3-section-copy h2,
.pj3-lobby-inner h2,
.pj3-tutorial-headline,
.pj3-end-head h2,
.pj3-hotspot-intro h3,
.pj3-detail-head h4 {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important;
}

.pj3-question-text,
.pj3-ladder-title b {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
}

.pj3-home-copy h1 {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.pj3-hotspot-pad button {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.pj3-hotspot-confirm {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.pj3-hotspot-native>p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.pj3-hotspot-native label {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pj3-money-transfer .pj3-transfer-account strong {
  font-size: 32px !important;
  line-height: 1 !important;
}

.pj3-transfer-amount strong {
  font-family: "Roboto Slab", Roboto, Georgia, serif !important;
  font-size: 31px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.pj3-transfer-amount small {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pj3-transfer-amount span {
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.pj3-money-transfer .pj3-transfer-scammer .pj3-feedback-petis.pj3-petis-emoji {
  font-size: 48px !important;
  line-height: 1 !important;
}

@media(max-width:860px) {
  .pj3-transfer-amount strong {
    font-size: 22px !important;
  }

  .pj3-transfer-amount small {
    font-size: 11px !important;
  }

  .pj3-transfer-amount span {
    font-size: 16px !important;
  }

  .pj3-money-transfer .pj3-transfer-account strong {
    font-size: 22px !important;
  }
}

@media(max-width:560px) {
  .pj3-money-transfer .pj3-transfer-account strong {
    font-size: 19px !important;
  }

  .pj3-transfer-amount strong {
    font-size: 19px !important;
  }

  .pj3-transfer-amount small {
    font-size: 10px !important;
  }

  .pj3-transfer-amount span {
    font-size: 14px !important;
  }
}

.pj3-game-mode-bar>span {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

.pj3-game-mode-bar button {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.pj3-game-mode-bar button b {
  font-size: 18px !important;
  line-height: 1 !important;
}

@media(max-width:600px) {
  .pj3-game-mode-bar button {
    font-size: 13px !important;
  }
}

.pj3-hotspot-native-help {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.pj3-hotspot-slider>span {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.pj3-hotspot-slider>span b {
  font-size: 15px !important;
  font-weight: 700 !important;
}

@media(max-width:700px) {
  .pj3-hotspot-native-help {
    font-size: 13px !important;
  }
}

@media (min-width: 861px) {
  .pj3-root:not(.is-game-mode) .pj3-question-text {
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1.28 !important;
  }
}

.pj3-ladder-row {
  font-size: 13px !important;
}

.pj3-ladder-row span {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.pj3-ladder-row b {
  font-weight: 700 !important;
  font-size: 13px !important;
}

.pj3-home-copy h1 {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.pj3-home-meta {
  font-weight: 700 !important;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 18px !important;
  letter-spacing: 2.49px !important;
}

@media (max-width: 425px) {
  .pj3-home-meta {
    flex-direction: column;
  }
}

.pj3-home-alias-head small {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 16px !important;
  letter-spacing: 2.22px !important;
  color: var(--pj3-site-navy) !important;
}

.pj3-kicker {
  font-family: "Roboto Slab", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 20px !important;
  letter-spacing: 2.77px !important;
}

.pj3-home-alias .pj3-text-button {
  font-weight: 700 !important;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.pj3-home-alias .pj3-alias>span {
  font-size: 20px !important;
  line-height: 34px !important;
}

.pj3-home-mode-card b {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 32px !important;
}

.pj3-home-mode-card small {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 18px !important;
  white-space: pre-line;
}

@media(max-width:1200px) and (min-width:981px) {
  .pj3-petis-hero.pj3-petis-emoji {
    font-size: 108px !important;
  }
}

@media(max-width:980px) {
  .pj3-petis-hero.pj3-petis-emoji {
    font-size: 88px !important;
  }
}