/* Hyper Mode: global header hidden — compact command bar has logo + nav. */
.app-shell.hyper-mode .header {
  display: none;
}

.surf-page {
  margin-top: 0;
}

.app-shell.hyper-mode .surf-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 4px;
}

.app-shell.hyper-mode .surf-viewer-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.app-shell.hyper-mode .surf-viewer-loyalty-hint {
  flex-shrink: 0;
  padding: 6px 8px 2px;
}

.app-shell.hyper-mode .surf-viewer-with-rails {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.app-shell.hyper-mode .surf-viewer-center {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-shell.hyper-mode .surf-browser-frame {
  flex: 1;
  min-height: 0;
  height: auto;
}

/* Percent heights do not resolve when the frame is a flex item with height:auto — grow the chain with flex. */
.app-shell.hyper-mode .surf-browser-content {
  flex: 1;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.app-shell.hyper-mode .surf-iframe {
  flex: 1;
  min-height: 0;
  height: auto;
}

.app-shell.hyper-mode .surf-cmd-bar {
  min-height: 52px;
  max-height: none;
  height: auto;
  padding: 7px 12px;
  margin: 0 0 4px;
}

.app-shell.hyper-mode .surf-cmd-logo-icon {
  height: 34px;
}

.app-shell.hyper-mode .surf-cmd-logo-wordmark {
  height: 20px;
  max-width: 120px;
}

.app-shell.hyper-mode .surf-cmd-pill {
  padding: 4px 8px;
  font-size: 11px;
}

.app-shell.hyper-mode .surf-anti-cheat-row {
  margin: 0 0 4px;
}

.app-shell.hyper-mode .surf-warning {
  padding: 3px 8px;
  font-size: 10px;
}

.app-shell.hyper-mode .surf-info-bar {
  margin-top: 4px;
  min-height: 0;
  padding: 4px 6px;
  gap: 4px 6px;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.app-shell.hyper-mode .surf-info-item {
  padding: 3px 7px;
  font-size: 10px;
  gap: 4px;
  line-height: 1.2;
}

.app-shell.hyper-mode .surf-info-session {
  flex: 1 1 140px;
  gap: 2px;
  min-width: 0;
}

.app-shell.hyper-mode .surf-info-title {
  font-size: 10px;
  line-height: 1.2;
}

.app-shell.hyper-mode .surf-info-progress {
  height: 5px;
}

.app-shell.hyper-mode .surf-info-icon {
  font-size: 13px;
}

.app-shell.hyper-mode .surf-info-item.surf-info-spin {
  max-width: min(200px, 28vw);
}

.app-shell.hyper-mode .surf-info-item.surf-info-spin > span:last-child {
  white-space: normal;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}

/* Pool projection block — shorter so the iframe column gets more viewport */
.app-shell.hyper-mode .surf-info-item.surf-pool-projection {
  padding: 3px 6px;
  gap: 1px;
  max-width: min(188px, 34vw);
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.045);
}

.app-shell.hyper-mode .surf-pool-projection-title {
  font-size: 7px;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  color: rgba(253, 230, 138, 0.82);
}

.app-shell.hyper-mode .surf-pool-projection-row {
  font-size: 8px;
  line-height: 1.15;
  gap: 6px;
}

.app-shell.hyper-mode .surf-pool-projection-k {
  color: rgba(253, 230, 138, 0.58);
}

.app-shell.hyper-mode .surf-pool-projection-v {
  color: rgba(255, 251, 235, 0.88);
}

.app-shell.hyper-mode .surf-pool-projection-reward-row {
  margin-top: 0;
}

.app-shell.hyper-mode .surf-pool-projection-reward-row .surf-pool-projection-v {
  font-size: 10px;
  color: rgba(255, 251, 235, 0.92);
}

.app-shell.hyper-mode .surf-pool-projection-pending,
.app-shell.hyper-mode .surf-pool-projection-ineligible {
  font-size: 8px;
  margin-top: 0;
  line-height: 1.15;
}

.app-shell.hyper-mode .surf-pool-projection-disclaimer {
  font-size: 6px;
  margin-top: 1px;
  line-height: 1.15;
}

.app-shell.hyper-mode .reward-ux-surf-strip--compact {
  margin-bottom: 4px;
}

.app-shell.hyper-mode .surf-viewer-panel.panel {
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 0;
  box-shadow: none;
}

.surf-cmd-bar {
  max-height: 70px;
  min-height: 56px;
  height: 70px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.surf-cmd-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  flex-wrap: wrap;
}

.surf-cmd-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.surf-cmd-logo-icon {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.surf-cmd-logo-wordmark {
  height: 26px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.surf-cmd-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
  color: #e5e5e5;
  white-space: nowrap;
}

.surf-cmd-pill.surf-cmd-pill-win {
  border-color: rgba(34, 197, 94, 0.62);
  background: rgba(34, 197, 94, 0.16);
  color: #dcfce7;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.45);
  animation: surf-pill-win-pulse 1.1s ease;
}

.surf-cmd-pill.surf-cmd-pill-multiplier-on {
  border-color: rgba(249, 115, 22, 0.58);
  background: rgba(249, 115, 22, 0.18);
  color: #fdba74;
}

.surf-cmd-pill.surf-cmd-pill-multiplier-off {
  border-color: rgba(255, 255, 255, 0.14);
}

.surf-cmd-pill.surf-cmd-pill-boost-on {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.14);
  color: #dcfce7;
}

.surf-cmd-pill.surf-cmd-pill-boost-off {
  border-color: rgba(255, 255, 255, 0.14);
}

@keyframes surf-pill-win-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

.surf-credits-flyup {
  position: fixed;
  z-index: 260;
  transform: translate(-50%, 0);
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.62);
  background: rgba(34, 197, 94, 0.18);
  color: #dcfce7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  opacity: 0;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.4);
}

.surf-credits-flyup.show {
  animation: surf-credits-flyup 1.05s ease forwards;
}

.surf-reward-flyup {
  position: fixed;
  z-index: 260;
  transform: translate(-50%, 0);
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  opacity: 0;
}

.surf-reward-flyup.show {
  animation: surf-credits-flyup 1.05s ease forwards;
}

.surf-reward-flyup.coin {
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.16);
  color: #fdba74;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.4);
}

.surf-reward-flyup.boost {
  border: 1px solid rgba(96, 165, 250, 0.56);
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.38);
}

@keyframes surf-credits-flyup {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.96);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -34px) scale(0.96);
  }
}

.surf-cmd-pill-campaign {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surf-cmd-pill-timer .surf-timer {
  font-size: 15px;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
}

.surf-cmd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.surf-cmd-nav.active {
  background: var(--orange);
  color: #000;
}

.surf-anti-cheat-row {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.surf-warning {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d6d6d6;
  font-size: 11px;
  font-weight: 700;
}

.surf-warning-alert {
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.14);
  color: #ffd7b5;
}

.surf-anti-cheat-popup {
  position: fixed;
  top: 12px;
  right: 12px;
  width: min(360px, calc(100vw - 24px));
  z-index: 60;
  border: 1px solid rgba(249, 115, 22, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(10, 10, 10, 0.98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 10px;
}

.surf-anti-cheat-popup-title {
  color: #ffb477;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.surf-anti-cheat-popup-text {
  color: #f0f0f0;
  font-size: 13px;
  line-height: 1.35;
}

.surf-anti-cheat-popup-close {
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
}

.surf-captcha-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.08);
}

.surf-captcha-label {
  font-size: 12px;
  font-weight: 800;
  color: #ffd7b5;
}

.surf-captcha-input {
  width: 78px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
}

.surf-captcha-btn {
  padding: 6px 10px;
  font-size: 11px;
}

.surf-viewer-panel {
  margin-top: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.surf-viewer-loyalty-hint {
  margin: 0;
  padding: 2px 8px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #fdba74;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.surf-viewer-with-rails {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.surf-ad-rail {
  width: 468px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  justify-content: flex-start;
}

.surf-viewer-center {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.surf-rail-slot {
  box-sizing: border-box;
  width: 468px;
  height: 60px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 10px;
  padding: 4px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.surf-rail-slot--text {
  justify-content: space-between;
}

.surf-rail-slot-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surf-rail-slot-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: #fb923c;
}

.surf-rail-slot--banner {
  padding: 3px 8px;
  justify-content: center;
}

.surf-rail-slot-img {
  display: block;
  max-width: 440px;
  width: 100%;
  height: 52px;
  object-fit: contain;
  object-position: center;
}

.surf-rail-slot--placeholder {
  justify-content: center;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.surf-rail-slot-ph {
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .surf-viewer-with-rails {
    flex-direction: column;
    align-items: center;
  }

  .surf-viewer-center {
    order: -1;
    width: 100%;
  }

  .surf-ad-rail {
    width: min(468px, 100%);
  }
}

/*
 * Surf iframe chrome (.surf-browser-frame) height:
 * — Default (non–Hyper Mode): clamp(520px, 66vh, 720px) → between 520px and 720px, target 66% of viewport height.
 * — Hyper Mode (.app-shell.hyper-mode): no fixed px — frame uses flex:1 and grows/shrinks with the remaining
 *   viewport under the surf command bar, anti-cheat row, and info bar (iframe height follows that flex chain).
 * — Short viewports: @media (max-height:700px) and min-width 900px sets non-hyper frame to 430px; hyper keeps
 *   flex:1 with min-height 200px on the frame chain.
 */
.surf-browser-frame {
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 18px;
  overflow: hidden;
  height: clamp(520px, 66vh, 720px);
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
}

.surf-browser-content {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(160deg, #111, #080808 60%, #050505);
}

.surf-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #0a0a0a;
  overflow: hidden;
}

.surf-claim-btn {
  width: auto;
  margin-top: 0;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.surf-info-bar {
  margin-top: 10px;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(249, 115, 22, 0.42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.95), rgba(10, 10, 10, 0.95));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  position: relative;
}

.surf-info-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e5e5e5;
  font-size: 12px;
  white-space: nowrap;
}

.surf-info-campaign {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surf-info-session {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  border-radius: 12px;
  white-space: normal;
}

.surf-info-title {
  font-size: 12px;
  font-weight: 800;
}

.surf-info-progress {
  height: 8px;
}

.surf-info-spin {
  border-color: rgba(249, 115, 22, 0.45);
  background: rgba(249, 115, 22, 0.12);
  color: #ffd7b5;
}

.surf-info-icon {
  font-size: 16px;
  line-height: 1;
}

.surf-info-help {
  position: relative;
  cursor: help;
}

.surf-info-help-label {
  font-weight: 800;
}

.surf-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: rgba(8, 8, 8, 0.98);
  color: #f0f0f0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.surf-tooltip div + div {
  margin-top: 4px;
}

.surf-info-help:hover .surf-tooltip,
.surf-info-help:focus-within .surf-tooltip,
.surf-info-help:focus .surf-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 18px;
}

.modal {
  width: min(480px, 100%);
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: #0b0b0b;
  border-radius: 28px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
}

.spin-result {
  margin: 18px 0;
  padding: 18px;
  border-radius: 20px;
  background: var(--orange-soft);
  color: #fdba74;
  font-size: 26px;
  font-weight: 900;
}

@media (max-width: 1100px) {
  .surf-cmd-bar {
    height: auto;
    max-height: none;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 8px 10px;
  }

  .surf-cmd-scroll {
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;
  }

  .surf-cmd-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .surf-anti-cheat-popup {
    top: auto;
    bottom: 12px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  .surf-anti-cheat-row {
    margin-bottom: 10px;
  }

  .surf-info-bar {
    flex-wrap: wrap;
    min-height: 78px;
  }

  .surf-info-session {
    flex-basis: 100%;
  }

  .surf-viewer-panel {
    padding: 8px;
  }

  .surf-claim-btn {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .surf-cmd-logo-wordmark {
    max-width: 100px;
  }

  .surf-tooltip {
    left: 0;
    transform: translateX(0) translateY(6px);
    max-width: 220px;
  }

  .surf-info-help:hover .surf-tooltip,
  .surf-info-help:focus-within .surf-tooltip,
  .surf-info-help:focus .surf-tooltip {
    transform: translateX(0) translateY(0);
  }
}

@media (max-height: 700px) and (min-width: 900px) {
  .surf-browser-frame {
    height: 430px;
  }

  .app-shell.hyper-mode .surf-browser-frame {
    height: auto;
    flex: 1;
    min-height: 200px;
  }

  .surf-info-bar {
    margin-top: 8px;
    padding: 8px 10px;
  }
}

.surf-inline-promo {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 6px 4px;
}

.surf-inline-promo-head {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.surf-inline-promo-banner-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
}

.surf-inline-promo-banner-img {
  width: 100%;
  max-height: 96px;
  object-fit: contain;
  display: block;
}

.surf-inline-promo-text-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.surf-inline-promo-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.surf-inline-promo-desc {
  font-size: 0.9rem;
  color: var(--muted);
}

.surf-inline-promo-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.surf-inline-promo-state {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}