.pawn-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #050a13;
}

.pawn-page .page-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 10px 12px 12px;
}

.pawn-page .topbar {
  min-height: 52px;
  padding: 0 4px 9px;
}

.pawn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.pawn-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pawn-board {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #66728a;
  border-radius: 10px;
  background: #1c3152;
  box-shadow: 0 20px 55px #0008;
}

.pawn-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #283859;
}

#pawnCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

#pawnCanvas:focus-visible {
  outline: 3px solid #ffe086;
  outline-offset: -4px;
}

.pawn-hud {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  pointer-events: none;
}

.pawn-wallet,
.pawn-losses {
  min-width: 190px;
  padding: 12px 16px 11px;
  color: #fff;
  background: #071326e8;
  border: 1px solid #ffffff42;
  box-shadow: 6px 6px 0 #02091699;
  backdrop-filter: blur(8px);
}

.pawn-wallet > span,
.pawn-losses > span {
  display: block;
  color: #b9c7dc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

.pawn-wallet > strong {
  display: block;
  margin-top: 1px;
  color: #ffdc63;
  font-size: 42px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pawn-wallet strong.is-negative,
.pawn-losses.is-danger > strong { color: #ff8094; }

.pawn-wallet small { font-size: .48em; font-weight: 800; }

.pawn-losses {
  min-width: 158px;
  text-align: right;
}

.pawn-losses > strong {
  display: block;
  margin-top: 1px;
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pawn-losses small { color: #9aacc7; font-size: 18px; font-weight: 600; }

.pawn-loss-track {
  overflow: hidden;
  width: 100%;
  height: 4px;
  margin-top: 6px;
  background: #23324a;
}

.pawn-loss-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #ff718a;
  transition: width .2s;
}

.pawn-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 28px clamp(30px, 7vw, 100px);
  background: linear-gradient(90deg, #07112708 0%, #0711274d 36%, #071127ed 66%);
}

.pawn-intro-card { width: min(460px, 48%); }

.pawn-intro-card h2 {
  margin: 0 0 34px;
  font: italic clamp(54px, 6.2vw, 98px)/.84 Impact, "Arial Black", sans-serif;
  letter-spacing: .015em;
  text-shadow: 8px 8px 0 #0610208f;
}

.pawn-intro-card h2 em,
.pawn-intro-card h2 > span { color: #ffdb59; }
.pawn-intro-card h2 em { font-size: .72em; }

.pawn-page .primary-button {
  width: min(380px, 100%);
  min-height: 56px;
  background: #ffda56;
  border-radius: 5px;
  font-size: 14px;
}

.pawn-page .primary-button i { background: #df6543; }
.pawn-page .primary-button:disabled { cursor: wait; }

.pawn-page .primary-button:focus-visible,
.pawn-touch button:focus-visible,
.pawn-back:focus-visible { outline: 3px solid white; outline-offset: 3px; }

.pawn-load-error { max-width: 380px; color: #ffc1ca; font-size: 14px; }

.pawn-eyebrow {
  margin: 0 0 12px;
  color: #ffd45a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}

.pawn-modal {
  justify-content: center;
  background: #071126d9;
  backdrop-filter: blur(7px);
}

.pawn-modal-card {
  width: min(480px, 100%);
  padding: 36px;
  text-align: center;
  background: #101d32f5;
  border: 1px solid #8293b16b;
  box-shadow: 10px 10px 0 #02071399;
}

.pawn-modal-card h2 {
  margin: 0 0 22px;
  font: italic 46px/1 Impact, "Arial Black", sans-serif;
}

.pawn-modal-card > a {
  display: block;
  margin-top: 20px;
  color: #c7d4e7;
  font-size: 14px;
  text-underline-offset: 4px;
}

.pawn-result-money { margin: 0; color: #ffdc60; font-size: 62px; font-weight: 950; }
.pawn-result-money.is-negative { color: #ff8797; }

.pawn-result-caption {
  margin: 2px 0 26px;
  color: #9cb0cf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

#pawnOver {
  background:
    radial-gradient(circle at 50% 38%, #7d17285c 0, transparent 24rem),
    #040b19e8;
}

.pawn-over-card {
  position: relative;
  overflow: hidden;
  border-color: #ffffff26;
  border-radius: 24px;
  box-shadow: 0 30px 72px #0009, inset 0 1px 0 #ffffff0f;
}

.pawn-over-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, #ef334c 0 72%, #ffda56 72%);
}

.pawn-result-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  color: #fff;
  background: #ef334c;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}

.pawn-over-card h2 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 56px;
  text-shadow: 4px 5px 0 #8c1427;
}

.pawn-over-card .pawn-result-money {
  padding: 10px 12px 4px;
  background: #030b19a3;
  border: 1px solid #ffffff13;
  border-radius: 13px 13px 0 0;
}

.pawn-over-card .pawn-result-caption {
  margin: 0 0 22px;
  padding: 0 12px 11px;
  background: #030b19a3;
  border: 1px solid #ffffff13;
  border-top: 0;
  border-radius: 0 0 13px 13px;
}

.pawn-touch {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 9px;
}

.pawn-touch button {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: #edf3ff;
  background: #1c304f;
  border: 1px solid #65799b;
  border-radius: 5px;
  box-shadow: 0 4px 0 #020916;
  touch-action: none;
}

.pawn-touch button:last-child { color: #102038; background: #ffda56; border-color: #ffe592; }
.pawn-touch b { font-size: 30px; }
.pawn-touch span { font-size: 13px; font-weight: 900; letter-spacing: .1em; }
.pawn-touch .is-active { transform: translateY(3px); box-shadow: none; filter: brightness(1.15); }

@media (pointer: coarse), (max-width: 900px) { .pawn-touch { display: grid; } }

@media (max-width: 720px) {
  .pawn-page .page-shell { padding: 7px 7px max(8px, env(safe-area-inset-bottom)); }
  .pawn-page .topbar { min-height: 47px; padding-bottom: 7px; }
  .pawn-page .brand { display: none; }
  .pawn-board { border-radius: 6px; }
  .pawn-hud { top: 9px; left: 9px; right: 9px; }
  .pawn-wallet, .pawn-losses { min-width: 122px; padding: 8px 10px; box-shadow: 4px 4px 0 #02091677; }
  .pawn-wallet > span, .pawn-losses > span { font-size: 10px; }
  .pawn-wallet > strong { font-size: 30px; }
  .pawn-losses { min-width: 112px; }
  .pawn-losses > strong { font-size: 27px; }
  .pawn-losses small { font-size: 15px; }
  .pawn-loss-track { height: 3px; margin-top: 3px; }
  .pawn-overlay { padding: 18px; justify-content: center; background: #071328d9; }
  .pawn-intro-card { width: min(440px, 100%); text-align: center; }
  .pawn-intro-card h2 { margin-bottom: 28px; font-size: clamp(48px, 13vw, 74px); }
  .pawn-intro-card h2 br { display: none; }
  .pawn-page .primary-button { margin-inline: auto; min-height: 50px; }
  .pawn-modal-card { padding: 24px 16px; }
  .pawn-modal-card h2 { font-size: 34px; }
  .pawn-result-money { font-size: 48px; }
  .pawn-over-card h2 { font-size: 40px; }
  .pawn-touch button { min-height: 57px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .pawn-page .topbar { min-height: 43px; padding-bottom: 5px; }
  .pawn-touch { display: none; }
  .pawn-intro-card h2 { margin-bottom: 18px; font-size: 58px; }
  .pawn-page .primary-button { min-height: 45px; }
}

/* Start and loss screens share the same hierarchy as Bieg po Tartę. */
.pawn-intro-card {
  display: flex;
  flex-direction: column;
}

.pawn-intro-card .pawn-eyebrow {
  margin-bottom: 10px;
}

.pawn-intro-card h2 {
  margin-bottom: 24px;
}

.pawn-lead {
  max-width: 390px;
  margin: 0 0 28px;
  color: #dce6f3;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.48;
}

.pawn-result-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pawn-result-status span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: #fff;
  background: #ef334c;
  border-radius: 50%;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.pawn-result-status p {
  margin: 0;
  color: #aeb8c7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
}

.pawn-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 24px;
}

.pawn-result-grid > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 15px 5px 13px;
  color: #8290a3;
  background: #020a18c7;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.pawn-result-grid b,
.pawn-result-grid .pawn-result-money {
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.1;
}

.pawn-result-grid .pawn-result-money { color: #ffdc60; }
.pawn-result-grid .pawn-result-money.is-negative { color: #ff8797; }

@media (max-width: 720px) and (orientation: portrait) {
  #pawnIntro {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: linear-gradient(180deg, #020b1df2 0%, #04132bd9 46%, #04132b38 100%);
  }

  .pawn-intro-card {
    width: 100%;
    height: 100%;
    padding: clamp(88px, 14dvh, 126px) 20px 22px;
    text-align: left;
  }

  .pawn-intro-card .pawn-eyebrow {
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: .19em;
  }

  .pawn-intro-card h2 {
    margin: 0;
    font-size: clamp(58px, 17vw, 74px);
    line-height: .76;
    text-shadow: 5px 6px 0 #0d3573;
  }

  .pawn-intro-card h2 br { display: block; }
  .pawn-intro-card h2 em { font-size: .65em; letter-spacing: .05em; }

  .pawn-lead {
    max-width: 310px;
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.48;
  }

  .pawn-intro-card .primary-button {
    width: 100%;
    min-height: 56px;
    margin-top: auto;
    border-radius: 6px;
    box-shadow: 0 8px 22px #0007;
    font-size: 13px;
  }

  .pawn-intro-card .primary-button i { display: none; }

  #pawnOver {
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(180deg, #080d1bed 0%, #1a0a15e8 100%);
    backdrop-filter: blur(5px);
  }

  .pawn-over-card {
    width: 100%;
    padding: 30px 18px 20px;
    border: 0;
    border-radius: 10px;
    background: #08152af7;
    box-shadow: 0 24px 60px #0009;
  }

  .pawn-over-card::before { display: none; }

  .pawn-over-card h2 {
    margin-bottom: 24px;
    font-size: clamp(49px, 14vw, 61px);
    line-height: .92;
  }

  .pawn-result-grid { gap: 6px; margin-bottom: 24px; }
  .pawn-result-grid > span { padding: 14px 3px 12px; font-size: 8px; }
  .pawn-result-grid b,
  .pawn-result-grid .pawn-result-money { font-size: 23px; }

  .pawn-over-card .primary-button {
    width: 100%;
    min-height: 55px;
    border-radius: 6px;
    box-shadow: 0 8px 22px #0007;
    font-size: 11px;
  }

  .pawn-over-card .primary-button i { display: none; }
}

@media (max-width: 720px) and (max-height: 700px) and (orientation: portrait) {
  .pawn-intro-card { padding-top: 72px; }
  .pawn-intro-card h2 { font-size: 54px; }
  .pawn-lead { margin-top: 15px; font-size: 11px; }
  .pawn-over-card { padding-top: 21px; }
  .pawn-over-card h2 { margin-bottom: 16px; font-size: 46px; }
}