/* Page composition: the games keep their own artwork; their surrounding
   frames, gutters, and player controls belong to one continuous interface. */
html:has(body.layout-basic) { background: #0d0c12; }

body.layout-basic {
  --site-surface: #17151f;
  --site-frame: #c29b5c52;
  --site-rule: #c29b5c2e;
  --site-radius: 10px;
  --site-gap: .75rem;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0, #39241e55, transparent 55rem), #0d0c12;
}

body.layout-basic .jackpot-hero,
body.layout-basic .play-grid,
body.layout-basic .player-desk {
  border-color: var(--site-frame);
  background-color: var(--site-surface);
  box-shadow: inset 0 1px #ffe4b308;
}

body.layout-basic .jackpot-hero {
  margin-bottom: var(--site-gap);
  border-radius: var(--site-radius);
}

body.layout-basic .play-grid {
  margin-bottom: 0;
  border-radius: var(--site-radius) var(--site-radius) 0 0;
  background-image: none;
}

/* The lower controls form the base of the game section. This wrapper must
   not contain/clip paint: several children own viewport-sized dialogs. */
body.layout-basic .player-desk {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--site-frame);
  border-top: 0;
  border-radius: 0 0 var(--site-radius) var(--site-radius);
}

body.layout-basic .player-desk .player-extras {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  margin: 0;
  padding: .5rem .6rem;
}

/* Pass controls keep a compact frame independent of the ad dimensions. */
body.layout-basic .player-account-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-self: center;
  gap: .5rem;
  min-width: 0;
}
body.layout-basic .player-account-tools .pass-quickbar {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  width: max-content;
  height: 3.5rem;
  min-height: 3.5rem;
  gap: .4rem;
  padding: .35rem .5rem;
  border: 1px solid #a98a5745;
  border-radius: 6px;
  background: #201c20;
  box-shadow: none;
}
body.layout-basic .player-account-tools .pass-quickbar__heading { justify-content: flex-start; }
body.layout-basic .player-account-tools .pass-quickbar h2 { max-width: 4.3rem; color: #e7d7bb; }
/* The secondary currency actions have one compact baseline below inventory. */
body.layout-basic .bottom-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
  min-width: 0;
}
body.layout-basic .bottom-tools > :is(app-link-donation, app-wwxrp-burn) {
  flex: 0 1 15rem;
  width: 15rem;
  min-width: 0;
}
body.layout-basic .bottom-tools .incinerator-summary,
body.layout-basic .bottom-tools .link-trade-open {
  height: 3rem;
  border-radius: 6px;
}

body.layout-basic .player-desk > app-records-rail {
  margin: 0;
}

body.layout-basic .player-desk .records-rail {
  border: 0;
  border-top: 1px solid var(--site-rule);
  border-bottom: 1px solid var(--site-rule);
  border-radius: 0;
  box-shadow: none;
}

body.layout-basic .player-desk > app-tickets-inventory {
  display: block;
  min-width: 0;
}

body.layout-basic .player-desk .app-tickets-inventory.section-disclosure {
  margin: 0;
  border: 0;
  border-radius: 0 0 var(--site-radius) var(--site-radius);
  background: transparent;
  box-shadow: none;
}

body.layout-basic .player-desk .app-tickets-inventory .inv-head.section-disclosure__bar {
  background: transparent;
}

body.layout-basic footer {
  margin-top: var(--site-gap);
  padding-block: .75rem 1rem;
  color: #827885;
}

/* Compact status labels leave room for the pool total on tablet widths. */
@media (min-width: 641px) and (max-width: 1099px) {
  body.layout-basic .pool-progress__jackpot {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }
  body.layout-basic .pool-progress__jackpot-phase--full,
  body.layout-basic .pool-progress__jackpot-copy--full { display: none; }
  body.layout-basic .pool-progress__jackpot-phase--compact,
  body.layout-basic .pool-progress__jackpot-copy--compact { display: inline; }
}

/* A tablet has room for two game columns. Keep the draw prominent, then
   pair its purchase/coinflip controls and the two smaller games below. */
@media (min-width: 700px) and (max-width: 1099px) {
  body.layout-basic .jackpot-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "draw draw" "purchase flip";
  }
  body.layout-basic .jackpot-hero > app-daily-flip {
    border-left: 1px solid var(--site-rule);
  }
  body.layout-basic .play-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "quests quests" "craps degenerette";
  }
  body.layout-basic .play-grid > app-degenerette-panel {
    border-left: 1px solid var(--site-rule);
  }
  body.layout-basic .play-grid .deg-setup {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  body.layout-basic .play-grid .deg-block--symbol { flex: 1 1 auto; }
  body.layout-basic .play-grid .deg-wager-column { flex: 0 0 auto; }
}

/* Five oversized bounty tickets were making the tablet summary taller than
   the entire utility section. Keep the same artwork at three across. */
@container records-rail (min-width: 520px) and (max-width: 840px) {
  body.layout-basic .player-desk .records-rail__leaders {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  body.layout-basic .player-desk .records-rail__leaders > *,
  body.layout-basic .player-desk .records-rail__leaders > :last-child:nth-child(odd) {
    flex: 0 0 calc((100% - 2 * var(--records-leader-gap)) / 3);
    width: calc((100% - 2 * var(--records-leader-gap)) / 3);
    min-width: 0;
  }
}

@media (max-width: 699px) {
  body.layout-basic { --site-gap: .5rem; --site-radius: 8px; }
  body.layout-basic .player-desk .player-extras {
    padding: .25rem;
  }
  body.layout-basic .bottom-tools > :is(app-link-donation, app-wwxrp-burn) { flex: 1 1 15rem; }
}

/* Pass choices reflow beneath their heading on tablets and phones. */
@media (max-width: 899px) {
  body.layout-basic .player-account-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.layout-basic .player-account-tools .pass-quickbar {
    width: 100%;
  }
  body.layout-basic .player-account-tools .pass-quickbar {
    height: 4.5rem;
    min-height: 4.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.25rem minmax(0, 1fr);
    gap: .1rem;
    padding-block: .25rem;
  }
  body.layout-basic .player-account-tools .pass-quickbar h2 { max-width: none; }

}
@media (max-width: 699px) {
  body.layout-basic .player-account-tools { grid-template-columns: minmax(0, 1fr); }
}

/* Redemption and charity sit with the other token actions, at the same 48px
   desktop height. Columns fit their contents instead of spreading apart. */
body.layout-basic .bottom-tools { align-items: flex-start; }
body.layout-basic .bottom-tools > app-sdgnrs-burn-rail {
  display: block;
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
body.layout-basic .bottom-tools app-sdgnrs-burn-rail .sdgnrs-rail {
  display: grid;
  grid-template-columns: 1.5rem auto auto 1.5rem auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  width: max-content;
  max-width: 100%;
  height: 3rem;
  min-height: 3rem;
  gap: .5rem;
  padding: .25rem .5rem;
  border: 1px solid #ae87c64d;
  border-radius: 6px;
  background: linear-gradient(110deg, #251c2e, #191720);
  box-shadow: inset 0 1px #e2cbf009;
}
body.layout-basic .bottom-tools .sdgnrs-rail__heading { display: contents; }
body.layout-basic .bottom-tools .sdgnrs-rail__heading h2 { display: none; }
body.layout-basic .bottom-tools .sdgnrs-rail__logo {
  display: block;
  grid-area: 1 / 1;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .15rem;
}
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__metric {
  align-self: stretch;
  align-content: start;
  min-height: 0;
  padding: 0;
  gap: .15rem;
}
body.layout-basic .bottom-tools .sdgnrs-rail__metric--balances { grid-area: 1 / 2; }
body.layout-basic .bottom-tools .sdgnrs-rail__metric--value { grid-area: 1 / 3; }
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__metric > small {
  font-size: .47rem;
  line-height: 1;
}
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__balances,
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__value {
  font-size: .67rem;
  line-height: 1.15;
}
body.layout-basic .bottom-tools .sdgnrs-rail .secondary-info {
  grid-area: 1 / 4;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
}
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__actions {
  grid-area: 1 / 5;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__burn {
  min-height: 2rem;
  padding: .3rem .5rem;
}
body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__vote {
  display: grid;
  grid-template-columns: .7rem auto;
  grid-template-rows: auto auto;
  gap: .12rem .3rem;
  min-height: 2rem;
  padding: .2rem .5rem;
  border-color: #d8a5be30;
  border-radius: 5px;
  background: #30202b;
  color: #f0d4e3;
  text-align: left;
}
body.layout-basic .bottom-tools .sdgnrs-rail__vote > span { grid-area: 1 / 1 / 3 / 2; color: #eea6c0; }
body.layout-basic .bottom-tools .sdgnrs-rail__vote-label { grid-area: 1 / 2; font-size: .57rem; }
body.layout-basic .bottom-tools .sdgnrs-rail__donated {
  grid-area: 2 / 2;
  color: #c5afb9;
  font: 700 .5rem/1.2 Inter, sans-serif;
  letter-spacing: .025em;
  white-space: nowrap;
}
body.layout-basic .bottom-tools .sdgnrs-rail__donated b { color: #fff1d2; font-variant-numeric: tabular-nums; }

@media (max-width: 699px) {
  body.layout-basic .bottom-tools > app-sdgnrs-burn-rail { flex: 1 1 100%; width: 100%; }
  body.layout-basic .bottom-tools app-sdgnrs-burn-rail .sdgnrs-rail {
    width: 100%;
    height: 5rem;
    min-height: 5rem;
    grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1.15fr) 1.5rem;
    grid-template-rows: minmax(0, 1fr) 2rem;
    gap: .2rem .4rem;
  }
  body.layout-basic .bottom-tools .sdgnrs-rail .sdgnrs-rail__actions {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: end;
  }
}