/* Ten Second Games — hub casino overlay
 *
 * Art lives in shared/casino/ (built by tools/casino-assets.py). Landscape lays
 * the stage out on the 1024x576 mockup grid; --s is one mockup pixel.
 */

.fg-casino,
.fg-casino * {
  box-sizing: border-box;
  touch-action: manipulation;
}
.fg-casino {
  --s: min(calc(100vw / 1024), calc((100vh - var(--fg-ad-h, 0px)) / 576));
  --s: min(calc(100vw / 1024), calc((100dvh - var(--fg-ad-h, 0px)) / 576));
  --gold: #f4c430;
  --ink: #12062a;
  position: fixed;
  inset: 0;
  top: var(--fg-ad-h, 0px);
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-width: 100vw;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  background: #1c0a48 url('casino/bg.webp') center / cover no-repeat;
}
.fg-casino.open {
  display: flex;
}

.fg-casino-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fg-casino-chrome {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  z-index: 20;
}
.fg-casino-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 4px solid var(--gold);
  background: linear-gradient(#6a24a8, #34106a);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
}
.fg-casino-close:hover {
  background: linear-gradient(#8a34d0, #4a1890);
  color: #ffe680;
}

/* ---------------------------------------------------------------- stage */

.fg-casino-stage {
  position: relative;
  z-index: 3;
  width: calc(1024 * var(--s));
  height: calc(576 * var(--s));
  flex: 0 0 auto;
}
.fg-casino-left,
.fg-casino-right {
  display: contents;
}

.fg-casino-wheel-wrap {
  position: absolute;
  left: calc(28 * var(--s));
  top: calc(8 * var(--s));
  width: calc(444 * var(--s));
  height: calc(444 * var(--s));
}
.fg-casino-wheel-wrap canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/* Pixel chip piles beside the wheel. Art is one chip, recolored and stacked. */
.fg-casino-stack {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: center / contain no-repeat;
}
.fg-casino-stack-l {
  left: calc(-10 * var(--s));
  bottom: calc(40 * var(--s));
  width: calc(74 * var(--s));
  aspect-ratio: 220 / 244;
  background-image: url('casino/stack-blue-5.webp');
}
.fg-casino-stack-r {
  right: calc(2 * var(--s));
  bottom: calc(46 * var(--s));
  width: calc(62 * var(--s));
  aspect-ratio: 220 / 178;
  background-image: url('casino/stack-red-2.webp');
}
.fg-casino-stack-one {
  right: calc(68 * var(--s));
  bottom: calc(36 * var(--s));
  width: calc(52 * var(--s));
  aspect-ratio: 220 / 156;
  background-image: url('casino/stack-yellow-1.webp');
}

/* ---------------------------------------------------------------- color chips */

.fg-casino-colors {
  position: absolute;
  z-index: 3;
  left: calc(48 * var(--s));
  top: calc(424 * var(--s));
  width: calc(370 * var(--s));
  display: flex;
  justify-content: space-between;
}
.fg-casino-color {
  position: relative;
  display: block;
  width: calc(112 * var(--s));
  height: calc(134 * var(--s));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s;
}
.fg-casino-chip {
  display: block;
  width: 100%;
  height: 100%;
  background: center / contain no-repeat;
}
.fg-casino-color[data-color='green'] .fg-casino-chip { background-image: url('casino/chip-green.webp'); }
.fg-casino-color[data-color='red'] .fg-casino-chip { background-image: url('casino/chip-red.webp'); }
.fg-casino-color[data-color='black'] .fg-casino-chip { background-image: url('casino/chip-black.webp'); }
.fg-casino-color.is-on[data-color='green'] .fg-casino-chip { background-image: url('casino/chip-green-on.webp'); }
.fg-casino-color.is-on[data-color='red'] .fg-casino-chip { background-image: url('casino/chip-red-on.webp'); }
.fg-casino-color.is-on[data-color='black'] .fg-casino-chip { background-image: url('casino/chip-black-on.webp'); }
.fg-casino-color.is-on .fg-casino-chip {
  filter:
    drop-shadow(calc(3 * var(--s)) 0 0 #ffe14a)
    drop-shadow(calc(-3 * var(--s)) 0 0 #ffe14a)
    drop-shadow(0 calc(3 * var(--s)) 0 #ffe14a)
    drop-shadow(0 calc(-3 * var(--s)) 0 #ffe14a)
    drop-shadow(0 0 calc(10 * var(--s)) rgba(255, 210, 40, 0.85));
}
.fg-casino-color.is-on { transform: scale(1.05); }
.fg-casino-color:hover:not(:disabled):not(.is-on) { transform: translateY(calc(-3 * var(--s))); }
.fg-casino-color:disabled { cursor: default; }
.fg-casino-color:disabled:not(.is-on) { filter: brightness(0.7); }

/* ---------------------------------------------------------------- coins + steppers */

.fg-casino-coins-row {
  position: absolute;
  left: calc(452 * var(--s));
  top: calc(34 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
}
.fg-casino-coins {
  width: calc(336 * var(--s));
  height: calc(75 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--s));
  padding-top: calc(3 * var(--s));
  background: url('casino/coins-frame.webp') center / 100% 100% no-repeat;
  font-size: calc(23 * var(--s));
  letter-spacing: calc(1 * var(--s));
}
.fg-casino-coin {
  display: block;
  flex: 0 0 auto;
  background: url('casino/coin.webp') center / contain no-repeat;
}
.fg-casino-coins .fg-casino-coin {
  width: calc(38 * var(--s));
  height: calc(38 * var(--s));
}
.fg-casino-coins-v {
  text-shadow:
    calc(2 * var(--s)) 0 0 var(--ink), calc(-2 * var(--s)) 0 0 var(--ink),
    0 calc(2 * var(--s)) 0 var(--ink), 0 calc(-2 * var(--s)) 0 var(--ink),
    calc(2 * var(--s)) calc(3 * var(--s)) 0 var(--ink);
}
.fg-casino-coins-v { color: #fff; transition: color 0.2s; }
.fg-casino-coins.is-up .fg-casino-coins-v { color: #7dff3a; }
.fg-casino-coins.is-down .fg-casino-coins-v { color: #ffb070; }

.fg-casino-step {
  width: calc(66 * var(--s));
  height: calc(64 * var(--s));
  padding: 0;
  border: 0;
  background: center / contain no-repeat;
  cursor: pointer;
}
.fg-casino-minus { background-image: url('casino/btn-minus.webp'); }
.fg-casino-plus { background-image: url('casino/btn-plus.webp'); }

.fg-casino-step,
.fg-casino-spin,
.fg-casino-max {
  transition: transform 0.08s, filter 0.15s;
}
.fg-casino-step:hover:not(:disabled),
.fg-casino-spin:hover:not(:disabled),
.fg-casino-max:hover:not(:disabled) { filter: brightness(1.12); }
.fg-casino-step:active:not(:disabled),
.fg-casino-spin:active:not(:disabled),
.fg-casino-max:active:not(:disabled) { transform: translateY(calc(3 * var(--s))); }
.fg-casino-step:disabled,
.fg-casino-spin:disabled,
.fg-casino-max:disabled {
  cursor: default;
  filter: grayscale(0.75) brightness(0.62);
}

/* ---------------------------------------------------------------- wager / result panel */

.fg-casino-panel {
  position: absolute;
  left: calc(462 * var(--s));
  top: calc(118 * var(--s));
  width: calc(482 * var(--s));
  height: calc(266 * var(--s));
  padding: calc(14 * var(--s)) calc(18 * var(--s)) calc(18 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(10 * var(--s));
  background:
    linear-gradient(180deg, rgba(120, 255, 120, 0.08), transparent 30%),
    linear-gradient(#11592a, #0a3f1c);
  border: calc(6 * var(--s)) solid var(--gold);
  box-shadow:
    0 0 0 calc(3 * var(--s)) var(--ink),
    inset 0 0 0 calc(3 * var(--s)) #0a2e14,
    inset 0 calc(4 * var(--s)) 0 calc(3 * var(--s)) #2a8a3c,
    calc(5 * var(--s)) calc(6 * var(--s)) 0 calc(3 * var(--s)) rgba(10, 4, 30, 0.6);
  text-align: center;
}
.fg-casino-wager {
  font-size: calc(15 * var(--s));
  line-height: 1.5;
  letter-spacing: calc(1 * var(--s));
  color: #eef6e8;
  text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #06240e;
}
.fg-casino-wager strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--s));
  font-weight: 400;
  font-size: calc(18 * var(--s));
  color: #ffd23a;
}
.fg-casino-wager .fg-casino-coin {
  width: calc(22 * var(--s));
  height: calc(22 * var(--s));
}
.fg-casino-result {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--s));
  background:
    repeating-conic-gradient(from 0deg at 50% 60%, rgba(140, 255, 120, 0.07) 0 6deg, transparent 6deg 18deg),
    radial-gradient(ellipse at 50% 55%, #10521f, #07351a 70%);
  border: calc(5 * var(--s)) solid #e0b040;
  box-shadow:
    0 0 0 calc(3 * var(--s)) #06240e,
    inset 0 0 0 calc(3 * var(--s)) #06240e;
}
.fg-casino-result-label {
  position: relative;
  font-size: calc(24 * var(--s));
  letter-spacing: calc(1 * var(--s));
  color: #9ad0ff;
  text-shadow:
    calc(2 * var(--s)) 0 0 #06240e, calc(-2 * var(--s)) 0 0 #06240e,
    0 calc(2 * var(--s)) 0 #06240e, 0 calc(-2 * var(--s)) 0 #06240e,
    calc(2 * var(--s)) calc(4 * var(--s)) 0 #06240e;
}
.fg-casino-result-amt {
  font-size: calc(26 * var(--s));
  line-height: 1;
  color: #e8c860;
  text-shadow:
    calc(3 * var(--s)) 0 0 #3a1c00, calc(-3 * var(--s)) 0 0 #3a1c00,
    0 calc(3 * var(--s)) 0 #3a1c00, 0 calc(-3 * var(--s)) 0 #3a1c00,
    calc(3 * var(--s)) calc(6 * var(--s)) 0 #3a1c00;
}
.fg-casino-panel.is-spin .fg-casino-result-label { color: #ffe680; }
.fg-casino-panel.is-lose .fg-casino-result-label { color: #ff8a6a; }
.fg-casino-panel.is-win .fg-casino-result-label { color: #8cff4a; }
.fg-casino-panel.is-win .fg-casino-result-amt {
  font-size: calc(64 * var(--s));
  color: #ffd024;
  background: linear-gradient(#fff27a 0 30%, #ffc81e 30% 70%, #f09a10 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(calc(3 * var(--s)) 0 0 #3a1c00) drop-shadow(calc(-3 * var(--s)) 0 0 #3a1c00)
    drop-shadow(0 calc(3 * var(--s)) 0 #3a1c00) drop-shadow(0 calc(-3 * var(--s)) 0 #3a1c00)
    drop-shadow(0 calc(4 * var(--s)) 0 #3a1c00);
  text-shadow: none;
  animation: fg-casino-pop 0.45s ease-out;
}
.fg-casino-panel.is-win .fg-casino-result::before,
.fg-casino-panel.is-win .fg-casino-result::after {
  content: '\2726';
  position: absolute;
  top: calc(18 * var(--s));
  font-size: calc(20 * var(--s));
  color: #d8ff6a;
  text-shadow: 0 0 calc(8 * var(--s)) rgba(200, 255, 80, 0.8);
  animation: fg-casino-twinkle 0.9s steps(2) infinite;
}
.fg-casino-panel.is-win .fg-casino-result::before { left: calc(28 * var(--s)); }
.fg-casino-panel.is-win .fg-casino-result::after { right: calc(28 * var(--s)); animation-delay: 0.45s; }

@keyframes fg-casino-pop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes fg-casino-twinkle {
  50% { opacity: 0.35; }
}

/* ---------------------------------------------------------------- spin / max / badge */

.fg-casino-actions {
  position: absolute;
  left: calc(440 * var(--s));
  top: calc(408 * var(--s));
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--s));
}
.fg-casino-spin,
.fg-casino-max {
  padding: 0;
  border: 0;
  background: center / contain no-repeat;
  cursor: pointer;
}
.fg-casino-spin {
  width: calc(306 * var(--s));
  height: calc(130 * var(--s));
  background-image: url('casino/btn-spin.webp');
}
.fg-casino-max {
  width: calc(178 * var(--s));
  height: calc(128 * var(--s));
  background-image: url('casino/btn-maxbet.webp');
}

.fg-casino-badge {
  position: absolute;
  left: calc(924 * var(--s));
  top: calc(508 * var(--s));
  width: calc(96 * var(--s));
  height: calc(45 * var(--s));
  background: url('casino/badge-10sg.webp') center / contain no-repeat;
}

/* The casino page is the whole document. Don't let the hub's scroll leak in. */
html[data-casino-page],
html[data-casino-page] body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1c0a48;
}
html[data-casino-page] body.fg-ads-reserve {
  padding-top: 0;
}

/* ---------------------------------------------------------------- portrait */

@media (max-aspect-ratio: 5/6) {
  .fg-casino {
    --s: min(calc((100vw - 8px) / 500), calc((100vh - var(--fg-ad-h, 0px)) / 1060));
    --s: min(calc((100vw - 8px) / 500), calc((100dvh - var(--fg-ad-h, 0px)) / 1060));
    align-items: flex-start;
    overflow-y: auto;
  }
  .fg-casino-stage {
    width: calc(500 * var(--s));
    height: auto;
    margin: 0 auto;
    padding: 10px 0 calc(8 * var(--s));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--s));
  }
  .fg-casino-left,
  .fg-casino-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--s));
  }
  .fg-casino-wheel-wrap,
  .fg-casino-colors,
  .fg-casino-coins-row,
  .fg-casino-panel,
  .fg-casino-actions {
    position: relative;
    left: auto;
    top: auto;
  }
  .fg-casino-wheel-wrap {
    width: calc(420 * var(--s));
    height: calc(420 * var(--s));
    margin-top: calc(-18 * var(--s));
  }
  .fg-casino-stack-l { left: calc(-4 * var(--s)); }
  .fg-casino-stack-r { right: calc(0 * var(--s)); }
  .fg-casino-stack-one { right: calc(62 * var(--s)); }
  .fg-casino-panel { height: calc(230 * var(--s)); }
  .fg-casino-panel.is-win .fg-casino-result-amt { font-size: calc(54 * var(--s)); }
}
@media (max-aspect-ratio: 5/6) and (min-width: 600px) {
  .fg-casino {
    --s: min(calc((100vw - 8px) / 500), calc((100vh - var(--fg-ad-h, 0px) - 12px) / 1140));
    --s: min(calc((100vw - 8px) / 500), calc((100dvh - var(--fg-ad-h, 0px) - 12px) / 1140));
  }
}