/*
 * JetLA Swipe Cards - "Web 1.0" brutalist stylesheet.
 *
 * Rules of this file: solid colours only, square corners (border-radius: 0 everywhere), raw 2px-3px
 * outset / inset bevels, system + monospace fonts, hard 1-colour borders, step() animations.
 * No gradients, no blur, no glass, no soft shadows, no glows.
 */

:root {
  --gray: #c0c0c0;
  --gray-dark: #808080;
  --white: #ffffff;
  --black: #000000;
  --navy: #000080;
  --teal: #008080;
  --yellow: #ffff00;
  --red: #ff0000;
  --green: #008000;
  --lime: #00ff00;
  --pink: #ff4fa3;
  --font-mono: "Courier New", Courier, "Lucida Console", Consolas, monospace;
  --font-ui: Tahoma, "MS Sans Serif", Verdana, Arial, sans-serif;
  --phone-w: 480px;
  --phone-h: 940px;
  --touch: 48px; /* minimum size of anything the player has to hit with a finger */
}

/* One fluid unit: 12px on a small iPhone, up to 16px on a big screen. Everything below is in rem. */
html {
  font-size: clamp(12px, calc(8px + 1vmin), 16px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  /* iframe ready: the page is exactly the viewport and never scrolls */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--teal);
  color: var(--black);
  font-family: var(--font-mono);
  line-height: 1.25;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

button {
  font-family: var(--font-ui);
  color: var(--black);
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible {
  outline: 2px dotted var(--black);
  outline-offset: -5px;
}

.desk {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: clamp(0px, 2vmin, 14px);
}

/* ---------- the window ---------- */

.phone {
  position: relative;
  width: min(100%, var(--phone-w));
  height: min(100%, var(--phone-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--gray);
  border: 3px outset var(--white);
  outline: 2px solid var(--black);
  box-shadow: 8px 8px 0 var(--black); /* hard, one-colour drop - no blur */
}

.titlebar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.titlebar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* ---------- Provably Fair button (title bar, right end) ---------- */

.fair-btn {
  position: relative;
  flex: none;
  padding: 1px 8px;
  background: var(--gray);
  border: 2px outset var(--white);
  font-size: 0.85rem;
  font-weight: bold;
}

/* the button looks small in the title bar, but its touch zone is a full 48px */
.fair-btn::after,
.fair-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--touch));
  height: var(--touch);
  transform: translate(-50%, -50%);
}

.fair-btn:active {
  border-style: inset;
}

.fair-btn[data-state="ACTIVE"] {
  background: var(--yellow);
}

.fair-btn[data-state="CASHED_OUT"] {
  background: var(--lime);
}

.fair-btn[data-state="CRASHED"] {
  background: var(--red);
  color: var(--white);
}

/* ---------- tabs / panels: JetLA logo, WALLET, WINS ---------- */

.topbar {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px 4px 0;
}

.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
  background: var(--gray);
  border: 2px outset var(--white);
}

.tab-brand {
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  background: var(--pink);
  border-color: var(--white);
  outline: 2px solid var(--black);
  outline-offset: -2px;
}

.brand-logo {
  display: block;
  height: clamp(24px, 4.6vh, 36px);
  width: auto;
  max-width: clamp(70px, 24vw, 130px);
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.wallet-chip,
.run-chip {
  flex: 1 1 0;
}

.chip-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 0 4px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  line-height: 1.3;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.chip-mult {
  font-style: normal;
  letter-spacing: 0;
  color: var(--yellow);
}

.chip-value {
  display: block;
  padding: 0 5px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 4.4vw, 1.25rem);
  font-weight: bold;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.chip-value.run {
  color: var(--green);
}

.run-chip.hot .chip-value.run {
  background: var(--yellow);
  color: var(--black);
}

.wallet-chip.up .chip-value {
  background: var(--lime);
}

.wallet-chip.down .chip-value {
  background: var(--red);
  color: var(--white);
}

.blink {
  animation: blink-bg 0.7s steps(1, end) 1;
}

@keyframes blink-bg {
  0%, 50% { background-color: var(--yellow); color: var(--black); }
  25%, 75% { background-color: var(--white); color: var(--black); }
  100% { background-color: var(--white); }
}

/* ---------- free swipe banner ---------- */

.free-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 4px 0;
  padding: 1px 8px;
  background: var(--yellow);
  border: 2px solid var(--black);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.95rem;
}

.free-badge-title {
  animation: blink-text 1s steps(1, end) infinite;
}

.free-badge-count.tick {
  animation: blink-text 0.5s steps(1, end) 2;
}

@keyframes blink-text {
  0%, 60% { visibility: visible; }
  61%, 100% { visibility: hidden; }
}

/* ---------- the stage: swipe hints around ONE big card ---------- */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 6px;
}

.hint {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 1.7rem;
  padding: 0 4px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hint-cash { color: var(--gray-dark); }
.stage.can-cash .hint-cash { color: var(--green); background: #ccffcc; }
.hint-new { color: var(--navy); }

.hint i {
  font-style: normal;
  animation: blink-text 1.2s steps(1, end) infinite;
}

.hint-new i { animation-delay: 0.6s; }

/* while the finger drags, the hint of the action that is about to fire lights up */
.stage.cash-ready .hint-cash { background: var(--lime); }
.stage.skip-ready .hint-new { background: var(--yellow); }

.feed {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* the card slides out of this frame */
  background: var(--white);
  border: 2px inset var(--gray-dark);
}

.deck-loading {
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: bold;
  letter-spacing: 0.1em;
  animation: blink-text 1s steps(1, end) infinite;
}

/* ---------- THE card ---------- */

.card {
  position: absolute;
  inset: 6px;
  container-type: size; /* type scales with the card, so the numbers are always as big as they can be */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
  padding: clamp(6px, 3cqh, 14px) clamp(8px, 5cqi, 18px);
  background: var(--gray);
  border: 4px outset var(--white);
  outline: 2px solid var(--black);
  outline-offset: -2px;
  text-align: left;
  cursor: grab;
  touch-action: none; /* the card owns every touch: tap = play, vertical drag = swipe */
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out, background-color 0.12s steps(1, end);
}

.card > span {
  display: block;
  pointer-events: none;
}

.card:focus-visible {
  outline: 3px dotted var(--black);
  outline-offset: -8px;
}

.card:active:not(.is-dragging):not(.is-error) {
  border-style: inset;
}

.card[data-tier="1"] { background: #ffff99; }
.card[data-tier="2"] { background: #ffcc66; }

.card.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* leaving: slides away AND fades */
.card.is-exit-up {
  transform: translateY(-115%);
  opacity: 0;
  pointer-events: none;
}

.card.is-exit-down {
  transform: translateY(115%);
  opacity: 0;
  pointer-events: none;
}

.card.is-enter {
  animation: deck-enter 0.25s ease-out both;
}

/* a new card rises in from below (the previous one left upward, like a TikTok feed) */
@keyframes deck-enter {
  from { transform: translateY(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* after a cash-out the old card leaves downward, so the next one drops in from above */
.card.is-enter-top {
  animation-name: deck-enter-top;
}

@keyframes deck-enter-top {
  from { transform: translateY(-28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.card.will-cashout {
  outline: 5px solid var(--green);
  outline-offset: -5px;
}

.card.will-skip {
  outline: 5px dashed var(--navy);
  outline-offset: -5px;
}

.card.will-cashout::after,
.card.will-skip::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
}

.card.will-cashout::after { content: "RELEASE = CASH OUT"; }
.card.will-skip::after { content: "RELEASE = NEW CARD"; }

.card.is-committing {
  pointer-events: none;
  border-style: inset;
  background: var(--yellow);
}

.card.is-won {
  animation: deck-win 0.6s steps(1, end) 1;
}

.card.is-jackpot {
  animation: deck-jackpot 1.2s steps(1, end) 2;
}

@keyframes deck-win {
  0%, 50% { background: #ccffcc; }
  25%, 75%, 100% { background: var(--gray); }
}

@keyframes deck-jackpot {
  0%, 50% { background: var(--yellow); }
  25%, 75%, 100% { background: var(--gray); }
}

.card.is-hit { background: var(--lime); }

.card.is-miss {
  background: var(--red);
  color: var(--white);
}

.card.is-miss .offer-mult,
.card.is-miss .offer-label,
.card.is-miss .offer-row,
.card.is-miss .offer-tag,
.card.is-miss .deck-sub,
.card.is-miss .deck-round {
  color: var(--white);
}

.card.is-error {
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  cursor: default;
}

.deck-title {
  color: var(--jl-red-text, #ff4573);
  font-family: var(--font-ui);
  font-size: 1.4rem;
  font-weight: bold;
}

.deck-error-text {
  font-weight: bold;
}

/* ---------- what is printed on the card ---------- */

.offer-tag {
  min-height: 1.1em;
  color: var(--jl-red-text, #ff4573);
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 4.2cqi, 1.1rem);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-align: center;
  animation: blink-text 0.8s steps(1, end) infinite;
}

.offer-label {
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 4.6cqi, 1.2rem);
  font-weight: bold;
  letter-spacing: 0.2em;
  color: var(--navy);
  text-align: center;
}

.offer-mult {
  font-size: clamp(2.6rem, min(23cqi, 22cqh), 9rem);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--black);
}

.offer-row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 8px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  font-size: clamp(0.8rem, min(5cqi, 4.4cqh), 1.5rem);
  font-weight: bold;
  white-space: nowrap;
}

.offer-row b {
  font-size: 1.3em;
  font-variant-numeric: tabular-nums;
}

.offer-row.win { color: var(--green); }
.offer-row.lose { color: #c00000; }

.offer-bar {
  height: clamp(10px, 3cqh, 18px);
  background: var(--red);
  border: 2px solid var(--black);
}

.offer-bar i {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--green);
}

.deck-sub {
  padding-top: 2px;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 4.4cqi, 1.1rem);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.deck-sub.warn {
  color: var(--jl-red-text, #ff4573);
  animation: blink-text 0.5s steps(1, end) 3;
}

.deck-round {
  font-size: clamp(0.7rem, 3.6cqi, 0.95rem);
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* ---------- classic buttons ---------- */

.actions {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 6px 6px;
}

.btn {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 8px 4px;
  background: var(--gray);
  border: 3px outset var(--white);
  font-size: clamp(0.9rem, 4.2vw, 1.15rem);
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn:active:not(:disabled) {
  border-style: inset;
  padding: 9px 3px 7px 5px;
}

.btn:disabled {
  color: var(--gray-dark);
  text-shadow: 1px 1px 0 var(--white);
  cursor: not-allowed;
}

.btn-cash:not(:disabled) {
  background: var(--lime);
}

.btn-new:not(:disabled) {
  background: var(--yellow);
}

/* ---------- stake ---------- */

.stake-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 6px;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.95rem;
}

.stake-bar.is-free #stakeLabel {
  padding: 1px 4px;
  background: var(--yellow);
  border: 1px solid var(--black);
}

.stake-bar input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 11rem;
  min-height: var(--touch);
  padding: 2px 8px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: max(16px, 1.2rem); /* 16px+ also stops iOS from zooming into the field */
  font-weight: bold;
  text-align: right;
  -webkit-user-select: text;
  user-select: text;
}

.stake-bar input:disabled {
  background: var(--gray);
  color: #404040;
}

/* ---------- status bar ---------- */

.net-status {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--gray);
  border-top: 2px solid var(--white);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.status-cell {
  padding: 1px 6px;
  border: 1px solid;
  border-color: var(--gray-dark) var(--white) var(--white) var(--gray-dark);
  white-space: nowrap;
  overflow: hidden;
}

.status-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.net-status[data-state="pending"] .status-main {
  background: var(--white);
}

.net-status[data-state="slow"] .status-main {
  background: var(--yellow);
  font-weight: bold;
}

.net-status[data-state="offline"] .status-main {
  background: var(--red);
  color: var(--white);
  font-weight: bold;
}

.spinner {
  display: none;
  width: 9px;
  height: 9px;
  background: var(--navy);
  animation: blink-text 0.6s steps(1, end) infinite;
}

.net-status[data-state="pending"] .spinner,
.net-status[data-state="slow"] .spinner,
.fair-verify.is-loading .spinner {
  display: inline-block;
}

/* ---------- result window (overlay) ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.overlay.show {
  display: flex;
}

.overlay-stack {
  width: min(100%, 340px);
  background: var(--gray);
  border: 3px outset var(--white);
  outline: 2px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  text-align: center;
  animation: dialog-in 0.25s steps(3) both;
}

.overlay-stack::before {
  content: "MESSAGE";
  display: block;
  padding: 3px 8px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  letter-spacing: 0.04em;
}

.overlay.match .overlay-stack::before { content: "WIN.EXE"; }
.overlay.cashout .overlay-stack::before { content: "CASHOUT.EXE"; background: var(--green); }
.overlay.jackpot .overlay-stack::before { content: "!!! JACKPOT !!!"; background: var(--red); color: var(--yellow); animation: blink-text 0.6s steps(1, end) infinite; }
.overlay.crash .overlay-stack::before { content: "CRASH.EXE - FATAL ERROR"; background: var(--red); }
.overlay.warn .overlay-stack::before { content: "WARNING"; background: #808000; }

@keyframes dialog-in {
  from { transform: translateY(16px); }
  to { transform: none; }
}

.overlay-text {
  padding: 12px 12px 4px;
  font-size: clamp(26px, 9vw, 40px);
  font-weight: bold;
  line-height: 1.05;
  color: var(--black);
}

.overlay.crash .overlay-text { color: var(--jl-red-text, #ff4573); }
.overlay.cashout .overlay-text { color: var(--green); }
.overlay.jackpot .overlay-text { color: var(--jl-red-text, #ff4573); }

.overlay-amount {
  margin: 6px 12px 0;
  padding: 4px 8px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  color: var(--green);
  font-size: clamp(22px, 8vw, 32px);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.overlay-sub {
  padding: 8px 12px 12px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}

/* ---------- full-window flashes (solid colour, stepped) ---------- */

.crash-layer {
  position: absolute;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  border: 0 solid var(--red);
}

.crash-layer.active {
  border-width: 8px;
  animation: blink-text 0.4s steps(1, end) infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
}

.vignette.is-crash { background: var(--red); animation: flash 0.5s steps(1, end) 1; }
.vignette.is-jackpot { background: var(--yellow); animation: flash 1s steps(1, end) 1; }
.vignette.is-win { background: var(--lime); animation: flash 0.6s steps(1, end) 1; }

@keyframes flash {
  0%, 40% { opacity: 0.55; }
  20%, 60% { opacity: 0; }
  80% { opacity: 0.3; }
  100% { opacity: 0; }
}

.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 55;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tap-ripple {
  position: absolute;
  z-index: 46;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--red);
  pointer-events: none;
  animation: ripple 0.5s steps(5) forwards;
}

@keyframes ripple {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(2); opacity: 0; }
}

.phone.busy .card {
  cursor: wait;
}

/* ---------- session lock ---------- */

.session-lock {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--teal);
}

.session-lock-box {
  width: min(100%, 340px);
  padding: 0 0 12px;
  background: var(--gray);
  border: 3px outset var(--white);
  outline: 2px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  text-align: center;
}

.session-lock-title {
  margin-bottom: 12px;
  padding: 3px 8px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  letter-spacing: 0.06em;
}

.session-lock-text {
  margin: 0;
  padding: 0 14px;
  font-weight: bold;
  line-height: 1.4;
}

/* ---------- provably fair dialog ---------- */

.fair-modal {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.fair-modal.open {
  display: flex;
}

.fair-backdrop {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.55;
}

.fair-panel {
  position: relative;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray);
  border: 3px outset var(--white);
  outline: 2px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
}

.fair-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px 3px 8px;
  background: var(--navy);
  color: var(--white);
}

.fair-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.fair-close {
  position: relative;
  width: 24px;
  height: 22px;
  padding: 0;
  background: var(--gray);
  border: 2px outset var(--white);
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.fair-close:active {
  border-style: inset;
}

.fair-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  touch-action: pan-y;
}

.fair-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--white);
  border: 2px solid var(--black);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.fair-badge[data-state="ACTIVE"] { background: var(--yellow); }
.fair-badge[data-state="CASHED_OUT"] { background: var(--lime); }
.fair-badge[data-state="CRASHED"] { background: var(--red); color: var(--white); }

.fair-sub {
  margin: 8px 0;
  font-size: 11px;
  line-height: 1.35;
}

.fair-steps {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.fair-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: bold;
  color: var(--gray-dark);
}

.fair-steps i {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--white);
  border: 2px solid var(--gray-dark);
}

.fair-steps li.done {
  color: var(--green);
}

.fair-steps li.done i {
  background: var(--green);
  border-color: var(--black);
}

.fair-steps li.now {
  background: var(--yellow);
  color: var(--black);
}

.fair-steps li.now i {
  background: var(--black);
  border-color: var(--black);
  animation: blink-text 0.8s steps(1, end) infinite;
}

.fair-form {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
}

.fair-field {
  display: grid;
  gap: 2px;
}

.fair-field > span {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: bold;
}

.fair-field em {
  font-weight: normal;
  font-style: normal;
  color: #404040;
}

.fair-field input {
  width: 100%;
  padding: 3px 5px;
  background: var(--white);
  border: 2px inset var(--gray-dark);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 11px;
  -webkit-user-select: text;
  user-select: text;
}

.fair-field input.pending {
  color: var(--gray-dark);
  font-style: italic;
}

.fair-field input.revealed {
  background: #ffffcc;
}

.fair-verify {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  min-height: var(--touch);
  background: var(--yellow);
  border: 3px outset var(--white);
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

.fair-verify:active:not(:disabled) {
  border-style: inset;
}

.fair-verify.is-waiting {
  background: var(--gray);
  color: #404040;
}

.fair-verify:disabled {
  cursor: wait;
}

.fair-result:empty {
  display: none;
}

.fair-result {
  margin-top: 8px;
}

.res-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 6px;
  border: 3px solid var(--black);
  background: #ffffe1;
}

.fair-result.ok .res-box { background: var(--lime); }
.fair-result.bad .res-box { background: var(--red); color: var(--white); }

.res-icon {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 2px solid var(--black);
  color: var(--black);
  font-weight: bold;
}

.res-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: bold;
}

.res-text {
  grid-column: 2;
  font-size: 11px;
}

.res-rows {
  grid-column: 1 / -1;
  margin-top: 4px;
  display: grid;
  gap: 4px;
}

.res-row {
  font-size: 10px;
  word-break: break-all;
}

.res-row b {
  display: block;
  font-family: var(--font-ui);
}

.fair-note {
  margin: 8px 0 0;
  font-size: 10px;
  word-break: break-all;
  color: #404040;
}

/* ---------- responsive (portrait phone first) ---------- */

/* Real phones / small iframes: the game IS the screen - full-bleed, dynamic viewport height, safe areas */
@media (max-width: 600px), (pointer: coarse) and (max-width: 900px) {
  .desk {
    padding: 0;
  }

  .phone {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--gray);
  }
}

/* short portrait screens (small iPhone, short iframe): squeeze the chrome, never the numbers */
@media (max-height: 700px) {
  .titlebar { padding-top: 1px; padding-bottom: 1px; }
  .stage { margin: 3px 4px; gap: 3px; }
  .hint { min-height: 1.45rem; font-size: 0.78rem; }
  .card { inset: 4px; gap: 1px; }
  .offer-row { padding: 1px 6px; }
  .deck-round { display: none; }
  .actions { padding: 0 4px 4px; gap: 4px; }
  .stake-bar { padding: 0 4px 4px; }
}

@media (max-width: 360px) {
  .tab-brand { padding: 2px 4px; }
  .topbar { gap: 3px; padding: 3px 3px 0; }
  .hint { letter-spacing: 0; font-size: 0.72rem; }
}

/* very short screens (landscape iframe): drop the optional lines so the card keeps its numbers */
@media (max-height: 520px) {
  .free-badge,
  .hint,
  .deck-round,
  .offer-label,
  .offer-bar { display: none; }
  .offer-mult { font-size: clamp(2rem, min(20cqi, 24cqh), 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- utility toolbar (sound, fair): shared/aux-bar.css, darkened for the light Win95 surface ---------- */

.phone .aux-bar {
  --aux-fg: #404040;
  --aux-fg-hover: #000;
  --aux-fg-off: #6a6a6a;
  --aux-chip: rgba(0, 0, 0, 0.08);
  --aux-chip-line: rgba(0, 0, 0, 0.35);
  --aux-line: #808080;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.phone .aux-btn { min-height: 36px; }
.phone .aux-fair[data-state="ACTIVE"] { color: #000080; }
.phone .aux-fair[data-state="CASHED_OUT"] { color: #006400; }
.phone .aux-fair[data-state="CRASHED"] { color: #b00000; }