@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url(assets/fonts/inter-latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(assets/fonts/inter-latin-700-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url(assets/fonts/inter-latin-800-normal.woff2) format("woff2");
}

:root {
  --bg: #17171e;
  --text: #ffffff;
  --muted: #7c8191;
  --tile: 144px;   /* reel slot width, must match CONFIG.tile in script.js */
  --box: 96px;     /* item size */
  --font: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fills the iframe. Content keeps a fixed size and is centred, like clash.
 * Below 170px tall, script.js shrinks the whole ad to fit. */
.ad {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--bg);
}

.stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: filter .4s ease, opacity .4s ease;
}

/* ---------- header: logo + "Try your luck!" (tall iframes only) ---------- */
.head {
  display: none;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
}
.brand img { display: block; height: 44px; width: auto; }
.tagline { font-size: 15px; font-weight: 600; color: #e5e7eb; }

/* ---------- reel ---------- */
.reel {
  position: relative;
  flex: none;
  width: 100%;
  height: 122px;
  overflow: hidden;
}

.track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  will-change: transform;
}

.tile {
  flex: 0 0 var(--tile);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  position: relative;
  width: var(--box);
  height: var(--box);
  opacity: .3;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.tile.is-center .box { opacity: 1; transform: scale(1.2); }

/* rarity graphic: SkinRave logo (crosshair + S) tinted in the item's rarity colour */
.frame {
  position: absolute;
  inset: 12%;
  filter: drop-shadow(0 0 10px var(--c));
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.9831 4.13805H12.8814V0.00012207H10.9831V4.13805Z' fill='%23fff'/><path d='M8 3.02082C5.70848 4.02772 4.01356 5.77944 2.94238 8.22082C2.73899 8.68978 2.57627 9.10358 2.57627 9.15875C2.57627 9.20013 3.03729 9.24151 3.59322 9.24151H4.59661L4.8678 8.62082C5.20678 7.83461 6.22373 6.52427 6.9017 5.95875C7.18644 5.72427 7.83729 5.29668 8.32543 5.03461L9.22034 4.52427V3.57254C9.22034 2.89668 9.1661 2.62082 9.05763 2.62082C8.96272 2.63461 8.48814 2.80013 8 3.02082Z' fill='%23fff'/><path d='M14.7797 3.58634V4.55185L15.4305 4.88289C16.9356 5.6553 18.3186 7.03461 19.0237 8.46909L19.4169 9.24151H21.4102L21.2339 8.71737C20.3661 6.20703 18.4136 4.11047 15.9186 2.99323C15.4576 2.78634 15.0102 2.62082 14.9288 2.62082C14.8339 2.62082 14.7797 2.96565 14.7797 3.58634Z' fill='%23fff'/><path d='M10.5085 6.26219C9.47796 6.52426 8.70508 6.99322 7.85085 7.84839C6.71186 9.00701 6.10169 10.4553 6.10169 12.0001C6.10169 13.007 6.00678 12.9656 8.62373 12.9656H10.9831V14.3449H12.8814V12.9656H15.8644L15.7424 13.2829C15.3492 14.3312 14.4271 15.2415 13.3424 15.6691C12.9085 15.8346 12.4746 15.876 11.7017 15.8346C10.5627 15.7656 10.0068 15.5174 8.96271 14.5518L8.44746 14.0829L7.17288 15.407L7.68814 15.9587C9.54576 17.9311 12.5831 18.3725 14.9424 17.0346C15.6881 16.6208 16.8136 15.4208 17.1932 14.676C17.6 13.8622 17.9119 12.4829 17.8712 11.7518L17.8305 11.1036L12.9492 10.9656L12.9085 10.2346L12.8678 9.51736H10.9831V11.0346H9.55932C8.77288 11.0346 8.13559 11.007 8.13559 10.9656C8.13559 10.6622 8.62373 9.84839 9.0983 9.31046C9.99322 8.31736 10.5627 8.06908 11.9322 8.06908C13.3017 8.06908 13.8305 8.27598 14.8068 9.21391L15.4712 9.8346L16.0678 9.2415C16.4068 8.91046 16.678 8.55184 16.678 8.46908C16.678 8.19322 15.2949 7.00702 14.5627 6.67598C13.3017 6.08288 11.8237 5.93115 10.5085 6.26219Z' fill='%23fff'/><path d='M0 12.9656H4.0678V11.0346H0V12.9656Z' fill='%23fff'/><path d='M19.8644 12.8967L24 12.9794V11.0346H19.7831L19.8644 12.8967Z' fill='%23fff'/><path d='M2.65765 14.9932C2.71188 15.1312 2.99663 15.7656 3.29494 16.4001C4.27121 18.4415 6.29154 20.2484 8.55595 21.1174L9.22036 21.3794V19.3794L8.29832 18.9105C7.07799 18.2622 5.60002 16.7725 5.07121 15.6277L4.67799 14.7725H3.63392C2.69833 14.7587 2.58985 14.7863 2.65765 14.9932Z' fill='%23fff'/><path d='M19.1322 15.2001C18.522 16.6484 16.9763 18.2484 15.4983 19.007L14.7797 19.3656V21.3656L15.2949 21.1863C17.9525 20.2346 20 18.207 21.139 15.407L21.4102 14.7587H19.322L19.1322 15.2001Z' fill='%23fff'/><path d='M10.9831 24.0001H12.8814V19.8622H10.9831V24.0001Z' fill='%23fff'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.9831 4.13805H12.8814V0.00012207H10.9831V4.13805Z' fill='%23fff'/><path d='M8 3.02082C5.70848 4.02772 4.01356 5.77944 2.94238 8.22082C2.73899 8.68978 2.57627 9.10358 2.57627 9.15875C2.57627 9.20013 3.03729 9.24151 3.59322 9.24151H4.59661L4.8678 8.62082C5.20678 7.83461 6.22373 6.52427 6.9017 5.95875C7.18644 5.72427 7.83729 5.29668 8.32543 5.03461L9.22034 4.52427V3.57254C9.22034 2.89668 9.1661 2.62082 9.05763 2.62082C8.96272 2.63461 8.48814 2.80013 8 3.02082Z' fill='%23fff'/><path d='M14.7797 3.58634V4.55185L15.4305 4.88289C16.9356 5.6553 18.3186 7.03461 19.0237 8.46909L19.4169 9.24151H21.4102L21.2339 8.71737C20.3661 6.20703 18.4136 4.11047 15.9186 2.99323C15.4576 2.78634 15.0102 2.62082 14.9288 2.62082C14.8339 2.62082 14.7797 2.96565 14.7797 3.58634Z' fill='%23fff'/><path d='M10.5085 6.26219C9.47796 6.52426 8.70508 6.99322 7.85085 7.84839C6.71186 9.00701 6.10169 10.4553 6.10169 12.0001C6.10169 13.007 6.00678 12.9656 8.62373 12.9656H10.9831V14.3449H12.8814V12.9656H15.8644L15.7424 13.2829C15.3492 14.3312 14.4271 15.2415 13.3424 15.6691C12.9085 15.8346 12.4746 15.876 11.7017 15.8346C10.5627 15.7656 10.0068 15.5174 8.96271 14.5518L8.44746 14.0829L7.17288 15.407L7.68814 15.9587C9.54576 17.9311 12.5831 18.3725 14.9424 17.0346C15.6881 16.6208 16.8136 15.4208 17.1932 14.676C17.6 13.8622 17.9119 12.4829 17.8712 11.7518L17.8305 11.1036L12.9492 10.9656L12.9085 10.2346L12.8678 9.51736H10.9831V11.0346H9.55932C8.77288 11.0346 8.13559 11.007 8.13559 10.9656C8.13559 10.6622 8.62373 9.84839 9.0983 9.31046C9.99322 8.31736 10.5627 8.06908 11.9322 8.06908C13.3017 8.06908 13.8305 8.27598 14.8068 9.21391L15.4712 9.8346L16.0678 9.2415C16.4068 8.91046 16.678 8.55184 16.678 8.46908C16.678 8.19322 15.2949 7.00702 14.5627 6.67598C13.3017 6.08288 11.8237 5.93115 10.5085 6.26219Z' fill='%23fff'/><path d='M0 12.9656H4.0678V11.0346H0V12.9656Z' fill='%23fff'/><path d='M19.8644 12.8967L24 12.9794V11.0346H19.7831L19.8644 12.8967Z' fill='%23fff'/><path d='M2.65765 14.9932C2.71188 15.1312 2.99663 15.7656 3.29494 16.4001C4.27121 18.4415 6.29154 20.2484 8.55595 21.1174L9.22036 21.3794V19.3794L8.29832 18.9105C7.07799 18.2622 5.60002 16.7725 5.07121 15.6277L4.67799 14.7725H3.63392C2.69833 14.7587 2.58985 14.7863 2.65765 14.9932Z' fill='%23fff'/><path d='M19.1322 15.2001C18.522 16.6484 16.9763 18.2484 15.4983 19.007L14.7797 19.3656V21.3656L15.2949 21.1863C17.9525 20.2346 20 18.207 21.139 15.407L21.4102 14.7587H19.322L19.1322 15.2001Z' fill='%23fff'/><path d='M10.9831 24.0001H12.8814V19.8622H10.9831V24.0001Z' fill='%23fff'/></svg>") center / contain no-repeat;
}
.box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* gold spin token: frames of the SkinRave gold-spin animation (10 x 7 sprite sheet) */
.gold {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  background: url(assets/gold-spin.webp) 0 0 / 1120px 784px no-repeat;
}

/* prize tile */
.tile.is-prize img { inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
.tile.prize-deposit img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }  /* gift is taller than the case */
.tile.won .box { transform: scale(1.45); }

/* ---------- button + footer ---------- */
.lower {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
}
.controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.foot {
  margin-top: auto;
  padding: 14px 16px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.foot a { color: #fff; font-weight: 700; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Size tiers (iframe height), same breakpoints as clash */
@media (min-height: 401px) {
  .head { display: flex; }
  .lower { flex: 1 1 0%; }
}
@media (max-height: 280px) { .foot { display: none; } }
@media (max-height: 240px) { .lower { padding-top: 4px; } }
@media (max-width: 350px) {
  .foot { flex-direction: column; align-items: center; }
  .foot .dot { display: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 140px;
  padding: 0 28px;
  border: 1px solid #469670;
  border-radius: 4px;
  background: linear-gradient(180deg, #69eab5 0%, #76c391 47%, #159471 82%, #119270 100%);
  color: #121217;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter .1s, opacity .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.95); }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn:focus { outline: none; }

/* soft fade at the left/right edges, same as clash */
.edges {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, rgba(23, 23, 30, .8) 0, rgba(23, 23, 30, 0) 16px, rgba(23, 23, 30, 0) calc(100% - 16px), rgba(23, 23, 30, .8) 100%);
}

/* ---------- win screen ---------- */
.win {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.ad.show-win .stage { filter: blur(6px); opacity: .35; }
.ad.show-win .controls,
.ad.show-win .tile.won .box { opacity: 0; transition: opacity .3s; }
.ad.show-win .win { opacity: 1; pointer-events: auto; }

.win-case {
  width: 88px;
  height: 66px;
  object-fit: contain;
  margin-bottom: 2px;
}
.win-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.timer {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-height: 14px;
}

/* ---------- vertical layout (tall skyscraper iframes, set by script.js) ---------- */
.ad.vertical .edges { display: none; }
.ad.vertical .head { display: flex; flex: none; padding: 40px 16px 28px; }
.ad.vertical .brand img { height: 52px; }
.ad.vertical .tagline { font-size: 17px; }
.ad.vertical .reel { flex: 1 1 auto; height: auto; min-height: 0; }
.ad.vertical .track { flex-direction: column; top: 0; bottom: auto; left: 0; right: 0; }
.ad.vertical .tile { flex: 0 0 var(--tile); width: 100%; height: var(--tile); }
/* centre marker + fade at the top and bottom of the reel */
.ad.vertical .reel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: var(--tile);
  margin-top: calc(var(--tile) / -2);
  border-top: 1px solid rgba(105, 234, 181, .25);
  border-bottom: 1px solid rgba(105, 234, 181, .25);
  background: radial-gradient(ellipse at center, rgba(105, 234, 181, .08), transparent 70%);
  pointer-events: none;
}
.ad.vertical .reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0, rgba(23, 23, 30, 0) 22%, rgba(23, 23, 30, 0) 78%, var(--bg) 100%);
}
.ad.vertical .lower { flex: none; padding-top: 28px; }
.ad.vertical .btn { height: 42px; min-width: 180px; font-size: 14px; }
.ad.vertical .foot { display: flex; margin-top: 0; padding: 28px 16px 24px; }
.ad.vertical .win-case { width: 150px; height: 112px; }
.ad.vertical .win-title { font-size: 18px; padding: 0 16px; text-align: center; }
.ad.vertical .brand img { max-width: calc(100vw - 24px); height: auto; max-height: 52px; }

/* "Spin now" gently pulses while waiting for a click */
@keyframes sr-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(105, 234, 181, .0); }
  50%      { transform: scale(1.08); box-shadow: 0 0 18px 2px rgba(105, 234, 181, .45); }
}
#spinBtn:not(:disabled) { animation: sr-pulse 1.4s ease-in-out infinite; }
#spinBtn:not(:disabled):hover { animation-play-state: paused; transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { #spinBtn:not(:disabled) { animation: none; } }