/* Player presentation only. The machine iframe and gameplay logic are untouched. */
:root {
  color-scheme: dark;
  --paper: #090c12;
  --surface: #151a23;
  --surface-2: #202733;
  --ink: #f3f6fb;
  --muted: #aeb8c8;
  --line: #303949;
  --line-strong: #526074;
  --accent: #e176d8;
  --accent-soft: #30213c;
  --success: #76ddba;
  --success-soft: #173429;
  --warning: #f0c986;
  --warning-soft: #3a2c19;
  --danger: #ffa0ab;
  --danger-soft: #3d252f;
  --blue: #8bdcf2;
  --blue-soft: #173240;
  --shadow: 0 22px 60px rgba(0,0,0,.35);
  --radius: 18px;
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
button, input, select, textarea { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #67d7ee; outline-offset: 3px; }
::placeholder { color: #8d98a8; opacity: 1; }

.topbar { background: rgba(9,12,18,.96); border-color: #26303e; }
.topbar-inner { min-height: 72px; }
.brand-mark { border-color: #3b4b61; background: #17202c; color: #ebf8ff; }
.brand-title { color: #f8f9fe; letter-spacing: .02em; }
.brand-subtitle { color: #9eacc0; }
body[data-auto-home-screen] .brand-mark { display: none; }
body[data-auto-home-screen] .brand-title { font-size: 24px; letter-spacing: .13em; background: linear-gradient(95deg,#fff 55%,#99def1 75%,#eda3e5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body[data-auto-home-screen] .brand-subtitle { display: block; font-size: 10px; letter-spacing: .25em; }
.btn, .small-btn, .icon-btn { background: #212b39; border-color: #43546b; color: #f4f7fc; }
.btn.secondary, .small-btn.secondary, .icon-btn { background: #191f29; border-color: #3a4555; color: #eef4fb; }
.btn.ghost { background: transparent; border-color: transparent; color: #d9e2ee; }
.btn.accent, .store-sticky-action .btn.accent { background: linear-gradient(115deg,#168fa9 0%,#4456a0 48%,#a8339a 100%); border-color: #cd70dd; color: #fff; box-shadow: 0 6px 20px #7f3ac047; }
.btn:hover, .small-btn:hover, .icon-btn:hover { border-color: #7bd3e8; opacity: 1; }
.btn:disabled, .small-btn:disabled { opacity: .48; box-shadow: none; }
.btn.danger, .small-btn.danger { background: #733045; border-color: #b66378; color: #fff; }
.btn.success { background: #205543; border-color: #3d997b; color: #fff; }
.btn.warning { background: #60451f; border-color: #b68744; color: #fff; }
input, select, textarea { background: #161d27; border-color: #3c4859; color: #f2f6fb; }
input:focus, select:focus, textarea:focus { border-color: #78d8ee; box-shadow: 0 0 0 3px #49bfd72b; }
input[type="checkbox"], input[type="radio"] { accent-color: #ab63d1; }

.home-rules-ticker { background: #101721; border-color: #263443; color: #cfd9e7; }
.home-win-ticker { background: #0e131b; border-color: #263443; color: #cdd7e5; }
.home-win-ticker-label { background: #1f2a38; color: #a4e8f7; }
.home-win-ticker-item strong { color: #f2a9ed; }
.preview-banner { background: #382d18; color: #f2d5a2; border-color: #6f572f; }

/* Marketplace: full-width cinematic hero above real, searchable merchant data. */
.market-main { padding-top: 22px; }
.marketplace-head { display: block; padding: 0; border: 0; }
.marketplace-head-copy {
  min-height: clamp(230px,30vw,380px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(24px,5vw,58px);
  border: 1px solid #394658;
  border-radius: 24px;
  background: #0b0e15 url('/assets/premium-claw-hero-20261008.png') 60% center / cover no-repeat;
  overflow: hidden;
}
.marketplace-head-copy h1 { max-width: 62%; margin: 0; color: #f7f9ff; font-size: clamp(43px,7vw,80px); line-height: 1.05; letter-spacing: -.055em; text-shadow: 0 2px 16px #000a; }
.marketplace-head-copy p { max-width: 60%; margin: 14px 0 0; color: #d7deea; font-size: clamp(15px,2.2vw,22px); }
.market-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.marketplace-head-copy .home-screen-slot { margin: 0; }
.marketplace-head-copy .home-screen-slot:has(> button[hidden]) { display: none; }
.marketplace-head-copy .home-screen-button, .market-hero-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid #79deec; border-radius: 13px;
  background: #101823e8; color: #f6faff;
  font-size: 14px; font-weight: 850;
  box-shadow: 0 0 0 1px #b866e880, 0 6px 20px #42b9d534;
  text-decoration: none;
}
.market-hero-link { margin: 0; }
.marketplace-location { display: block; width: 100%; margin-top: 20px; }
.location-chip { width: 100%; min-height: 56px; justify-content: space-between; padding: 0 18px; border: 1px solid #3b4758; border-radius: 16px; background: #171d27; color: #f3f6fb; }
.location-chip span { color: #b3bfd0; font-size: 13px; }
.location-chip .location-chip-label { display: inline-flex; align-items: center; gap: 8px; }
.location-chip .bi { color: #9acfe9; font-size: 16px; }
.location-chip strong { margin-left: auto; }
.location-chip strong { font-size: 14px; }
.market-searchbar { grid-template-columns: minmax(0,1fr) minmax(145px,210px) auto; padding: 12px 0 24px; gap: 10px; }
.marketplace-search input, .market-searchbar select { min-height: 54px; border: 1px solid #3b4758; border-radius: 16px; background: #171d27; color: #f1f5fb; }
.marketplace-search::before { display: none; }
.marketplace-search .field-icon { position: absolute; left: 16px; top: 50%; z-index: 1; transform: translateY(-50%); color: #9caabc; font-size: 18px; }
.marketplace-search input { padding-left: 46px; }
.text-button { color: #a6dfe8; }
.market-section-head { margin: 4px 0 20px; }
.market-section-head h2 { font-size: clamp(24px,3.8vw,34px); color: #f5f7fd; }
.market-section-head h2::first-letter { color: #a3e7f7; }
.market-section-head a { color: #b8d4e5; }
.marketplace-list { gap: 20px; }
.preview-metrics-notice { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #806439; border-radius: 12px; background: #2a2115; color: #f8dba8; font-size: 13px; }
.preview-metrics-notice[hidden] { display: none; }
.marketplace-list .merchant-card { border: 1px solid #374456; border-radius: 20px; background: #141a24; overflow: hidden; box-shadow: 0 12px 38px #0004; }
.marketplace-list .merchant-card:hover { border-color: #77c7df; box-shadow: 0 12px 34px #0c809342; }
.marketplace-list .merchant-cover { aspect-ratio: 16 / 9; background: #0e131a; border-color: #303a47; }
.merchant-cover-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #dcb955; border-radius: 10px; background: #1b1716e8; color: #ffdf83; font-size: 13px; font-weight: 800; box-shadow: 0 4px 18px #0008; }
.merchant-cover-badge .bi { font-size: 15px; }
.merchant-cover-fallback { color: #d5deea; background: #1c2430; }
.marketplace-list .merchant-card-body { padding: 18px; }
.merchant-category, .merchant-address { color: #b5c1d0; }
.merchant-activity-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; color: #b5c5d7; font-size: 13px; }
.merchant-activity-stats span { display: inline-flex; align-items: center; gap: 6px; }
.merchant-activity-stats .bi { color: #9adbea; font-size: 15px; }
.merchant-card-footer { border-color: #313b49; }
.merchant-card-footer strong { color: #f2f7ff; }
.marketplace-list .small-btn.secondary { border-color: #b45ad2; background: #3b2150; color: #f6eaff; }
.market-loading, .empty-state { background: #131a24; color: #afbac9; }
.empty-state strong { color: #f2f6fc; }
.market-pager { border-color: #333d4c; }
.merchant-recruit { background: #141f26; color: #e7f6f2; border-color: #315a56; }
.merchant-recruit p { color: #b4cbc6; }
.merchant-recruit > .btn { background: #215346; color: #f5fff9; border-color: #4a9d88; }

/* Shared shopping, account, rules and prize surfaces. */
.market-title-card, .market-control-card, .panel, .card, .account-card, .dash-card, .metric-card, .claim-card, .modal-card { background: #151b25; border-color: #334050; box-shadow: 0 12px 36px #0002; }
.eyebrow, .section-kicker { color: #9edff0; }
.panel-subtitle, .card-subtitle, .control-copy, .metric-label, .metric-note, .disclosure, .rule-list, .plain-list { color: #b2bed0; }
.badge, .status-pill { background: #252d3a; border-color: #3b495a; color: #e7eef8; }
.badge.green, .status-pill.green { background: #19372f; border-color: #4b937b; color: #95eed0; }
.badge.red, .status-pill.red { background: #452730; border-color: #9e596a; color: #ffb7c0; }
.badge.amber, .status-pill.amber { background: #3d301c; border-color: #9e7943; color: #f5d29a; }
.badge.blue, .status-pill.blue { background: #183542; border-color: #468ca3; color: #a3e3f2; }
.notice, .locked-box, .login-demo-box, .responsibility-item, .claim-code, .agreement-row, .readiness-item { background: #111720; border-color: #344152; color: #bdc8d8; }
.notice strong, .locked-box strong { color: #eef4fb; }
.notice.warn { background: #362917; border-color: #917045; color: #f5d7a7; }
.notice.good { background: #18352b; border-color: #4d947b; color: #a3edcf; }
.notice.bad { background: #442630; border-color: #a35c71; color: #ffb4be; }
.city-choice { background: #1b2330; border-color: #455569; color: #f0f5fb; }
.city-choice.active { background: #214456; border-color: #78cfe4; color: #fff; }
.modal-backdrop { background: rgba(0,0,0,.78); }
.modal-card { box-shadow: 0 30px 80px #000b; }
.toast { background: #1e2d3b; border: 1px solid #5c7589; color: #fff; }
.home-screen-button, .home-screen-dialog { background: #18212d; border-color: #43546a; color: #eef4fc; }
.home-screen-dialog .home-screen-note { color: #b9c6d4; }

.store-hero { background: #111720; border-color: #303b49; }
.store-identity { min-width: 0; }
.store-identity h1 { color: #f4f7fd; overflow-wrap: anywhere; }
.store-identity .platform-support-link { background: #153428; border-color: #3e9f79; color: #a6f0cf; }
.store-identity .platform-support-link:hover { background: #1d4a39; }
.store-visual { background: #1c2530; }
.store-visual-fallback { color: #9ab0c7; }
.store-play-card { background: #121a25; border: 1px solid #476079; color: #f3f7fc; box-shadow: 0 16px 42px #0005; }
.store-play-card p, .store-play-stat small { color: #b8c6d5; }
.store-play-stats { border-color: #435368; }
.store-play-stat + .store-play-stat { border-color: #435368; }
.store-sticky-action { background: rgba(20,27,37,.97); border-color: #52647a; color: #f3f7fc; box-shadow: 0 12px 36px #0009; }
.machine-share-card { background: #171e28; border-color: #354355; }
.machine-share-card.selected { border-color: #79d4e8; box-shadow: inset 0 0 0 1px #79d4e8; }
.machine-select-button, .machine-share-button { color: #e8f0fa; }
.machine-card-cover { background: #0d141c; }
.machine-share-button:hover { background: #243141; }

.account-avatar { background: #25394a; color: #e4f8fb; }
.account-nav button { color: #d2dce9; }
.account-nav button.active { color: #b6eafa; background: #20323f; }
.metric-value { color: #f7f9ff; }
.claim-code { color: #f1f6fc; overflow-wrap: anywhere; }
.legal-nav a:hover { background: #222d3b; }
.legal-definition-list > div { background: #151b25; }
.site-footer { background: #0c1118; border-color: #2b3542; color: #abb7c7; }
.site-footer a { color: #b9e7f4; }
.bottom-nav { background: rgba(12,17,25,.97); border-color: #2e3c4c; }
.bottom-nav a { color: #b0bdcd; }
.bottom-nav a.active { color: #ed98e5; }
.bottom-nav .nav-icon { display: block; font-size: 22px; line-height: 1; }
.bottom-nav a.active .nav-icon { text-shadow: 0 0 12px #ba60dc; }

/* Game chrome only. Never change the embedded machine stage or its controls. */
.game-shell { background: #090c12; }
.game-bar { background: #111923; border-color: #334354; }
.game-title small { color: #b6c3d2; }
.paid-game-panel { background: #101720; border-color: #344456; }
.game-guard { background: #0c1118; }
.game-guard-card { background: #17202b; border-color: #455569; }
.paid-purchase-dialog { background: #17202b; border-color: #526279; color: #f4f7fd; }
.paid-purchase-quantity button { background: #253142; border-color: #53677d; color: #fff; }
.paid-purchase-refund { background: #26313d; color: #d1dce8; }
.paid-purchase-error { color: #ffb3bc; }

@media(max-width:760px) {
  .topbar-inner { min-height: 64px; }
  body[data-auto-home-screen] .topbar-inner { min-height: 72px; }
  body[data-auto-home-screen] .brand-title { font-size: 21px; }
  body[data-auto-home-screen] .brand-subtitle { font-size: 9px; letter-spacing: .18em; }
  .market-main { padding-top: 12px; }
  .marketplace-head-copy { min-height: 230px; padding: 26px 22px; border-radius: 20px; background-position: 57% center; }
  .marketplace-head-copy h1 { max-width: 70%; font-size: clamp(37px,10vw,52px); }
  .marketplace-head-copy p { max-width: 67%; font-size: 15px; }
  .marketplace-location { margin-top: 14px; }
  .market-searchbar { grid-template-columns: minmax(0,1fr) 130px; padding: 10px 0 20px; }
  .market-section-head h2 { font-size: 25px; }
  .store-identity h1 { font-size: clamp(42px,10vw,66px); }
  .store-sticky-action { border-radius: 15px; }
}
@media(max-width:480px) {
  .marketplace-head-copy { background-position: 51% center; min-height: 242px; }
  .marketplace-head-copy h1 { max-width: 78%; font-size: 41px; }
  .marketplace-head-copy p { max-width: 75%; }
  .market-searchbar { grid-template-columns: minmax(0,1fr) 122px; }
  .marketplace-search input, .market-searchbar select { min-height: 51px; font-size: 13px; }
  .marketplace-list .merchant-cover { aspect-ratio: 16/9; }
  .bottom-nav { min-height: calc(66px + var(--safe-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
  .btn, .small-btn, .icon-btn, .merchant-card { transition: none; }
}