/* Preserve background aspect ratio */
.yard-hero {
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#1a1226;
  --yard-offset-x: 0px;
  --yard-offset-y: 0px;
  --yard-letterbox-top: 0px;
  --yard-letterbox-bottom: 0px;
  --yard-letterbox-left: 0px;
  --yard-letterbox-right: 0px;
}

.yard-letterbox {
  position:absolute;
  left:0;
  width:100%;
  background:linear-gradient(180deg, rgba(10,8,18,.85), rgba(26,18,38,.75));
  --hud-bg: linear-gradient(180deg, rgba(10,8,18,.85), rgba(26,18,38,.75));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}
.yard-letterbox--top {
  top:0;
  height:var(--yard-letterbox-top);
}
.yard-letterbox--bottom {
  bottom:0;
  height:var(--yard-letterbox-bottom);
  align-items:stretch;
  overflow:hidden;
}
.yard-footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:0 12px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.yard-footer .yard-stats {
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  max-height:100%;
  padding:8px 12px 10px;
}
.yard-ad-slot {
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#f8e3ff;
  padding:6px 12px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.35);
  background:rgba(0,0,0,.15);
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.yard-ad-slot.is-loaded {
  border-style:solid;
  background:rgba(0,0,0,.25);
}
.yard-ad-placeholder {
  opacity:.8;
}
.yard-header {
  top:calc(var(--yard-letterbox-top) + 8px);
  left:calc(var(--yard-offset-x) + 12px);
}
.yard-music-toggle{
  position:absolute;
  top:calc(var(--yard-letterbox-top) + 8px);
  right:calc(var(--yard-offset-x) + 12px);
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(15,18,35,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}
.yard-music-toggle svg{
  width:18px;
  height:18px;
  fill:#fff;
  opacity:.9;
}
.yard-music-toggle:active{
  transform:translateY(1px);
}
.yard-music-toggle.is-muted svg{
  opacity:.55;
}
.yard-music-toggle.is-muted::after{
  content:"";
  position:absolute;
  inset:4px;
  border:2px solid #ff4a4a;
  border-radius:50%;
  pointer-events:none;
}
.yard-music-toggle.is-muted::before{
  content:"";
  position:absolute;
  width:2px;
  height:24px;
  background:#ff4a4a;
  transform:rotate(-45deg);
  pointer-events:none;
}
.yard-stats {
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:var(--hud-bg);
  padding:8px 12px 10px;
  color:#f9f4ff;
  backdrop-filter:blur(6px);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
}
.yard-stats::before {
  display:none;
}
.yard-stats .stat-pill {
  background:transparent;
  color:#fff;
  box-shadow:none;
  border:none;
}
.yard-stats .stat-pill span {
  color:#ffd56a;
}
.yard-stats .stat-avatar {
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 6px 0;
}

.yard-stats .stat-avatar img,
.yard-stats img#yardStatAvatar {
  width:56px;
  height:56px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.7);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  background:rgba(255,255,255,.2);
}

.yard-stats .stat-name {
  font-size:16px;
  font-weight:800;
  letter-spacing:.3px;
  color:#fffaf0;
}

.yard-stats .stat-level {
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  color:#ffd56a;
}

.yard-stats .stat-balance {
  position:relative;
  padding:6px 12px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,213,106,.15), rgba(255,213,106,.35));
  border:1px solid rgba(255,213,106,.55);
  text-transform:uppercase;
  letter-spacing:.4px;
}

.stat-currency-stack {
  display:grid;
  gap:6px;
  min-width:0;
  justify-items:center;
}
.stat-currency-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
  justify-items:center;
}
.stat-currency-stack .stat-pill {
  display:flex;
  flex-direction:column;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  text-transform:none;
  text-align:center;
  align-items:center;
}
.stat-currency-stack .stat-pill span {
  display:block;
  font-size:10px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.stat-currency-stack .stat-pill strong {
  display:block;
  font-size:clamp(10px, 2.2vw, 13px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.15;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.stat-currency-stack .stat-steps {
  color:#ffe6a8;
}
.stat-currency-stack .stat-tokens {
  color:#c7ddff;
}
.stat-currency-stack .stat-tickets {
  color:#c6ffde;
}
.stat-currency-stack .is-disabled {
  opacity:.65;
  cursor:default;
}

.yard-stats .stats-inline {
  margin-left:auto;
  justify-content:center;
  align-items:center;
  min-width:0;
  width:100%;
}

.yard-stats .stat-pill {
  min-width:0;
}
.yard-stats .stat-balance strong {
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
}
.yard-stats .stat-balance::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  background:linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:.35;
  pointer-events:none;
}

/* Constrain modals to the phone frame on desktop */
.yb-modal {
  left:var(--yard-frame-left, 0px);
  top:var(--yard-frame-top, 0px);
  width:var(--yard-frame-width, 100vw);
  height:var(--yard-frame-height, 100vh);
  padding:16px;
  border-radius:28px;
  overflow:hidden;
}
/* Allow landscape minigames to fill the frame */
.yb-modal.is-playing.is-landscape {
  padding:0;
}
.yb-modal.is-playing.is-landscape .yb-modal-card {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  padding:0;
}
body.yard-rotate-landscape .yard-wrap {
  transform-origin:center;
  transition:transform .6s ease;
}
.yb-modal-card {
  width:min(100%, 420px);
  max-width:calc(var(--yard-frame-width, 100vw) - 32px);
  max-height:calc(var(--yard-frame-height, 100vh) - 32px);
}

/* Keep yard ticker inside the phone frame */
.yard-ticker {
  left:calc(var(--yard-frame-left, 0px) + 12px);
  width:calc(var(--yard-frame-width, 100vw) - 24px);
  transform:none;
  bottom:calc(var(--yard-frame-bottom-gap, 0px) + var(--yard-letterbox-bottom, 0px) + 16px);
}

@media (max-width: 900px), (max-height: 900px) {
  body {
    background:#000;
  }
  .yard-wrap {
    width:100vw;
    height:100vh;
    aspect-ratio:auto;
    padding:0;
  }
  .yard-hero {
    width:100vw;
    height:100vh;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
    border:none;
  }
}