/* Fruit Wheel — fits the vendored SlotJS (slotjs.css) into the site's game page.
   Everything here overrides the bundle's own layout for header/footer/modals, which were
   written for a full-screen single-page app. */
.fs-layout { display: flex; flex-direction: column; gap: 14px; }
.fs-bar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--gm-line, #DDD8CC); border: 1px solid var(--gm-line, #DDD8CC);
  border-radius: var(--gm-radius, 10px); overflow: hidden;
}
.fs-stat { background: var(--gm-surface, #fff); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fs-stat-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted, #6B675E); }
.fs-stat strong { font-family: var(--gm-display, Georgia, serif); font-weight: 500; font-size: 1.45rem; line-height: 1; color: var(--gm-text, #1B1A17); font-variant-numeric: tabular-nums; }

#fruit-wheel { display: block; overflow: visible; font-size: 16px; line-height: 1.5; }
#fruit-wheel .app__main {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: auto; flex: none;
  width: 100%; max-width: 560px; aspect-ratio: 1 / 1;
  margin: 0 auto; padding: 16px;
  background: var(--gm-surface, #fff);
  border: 1px solid var(--gm-line, #DDD8CC);
  border-radius: var(--gm-radius, 10px);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
#fruit-wheel .sm__base { pointer-events: none; }
#fruit-wheel .sm__reel { --bg: transparent; }
#fruit-wheel .sm__reel:nth-child(odd) { --bg: var(--gm-surface-2, #F4F1EA); }
#fruit-wheel .sm__display.is-win { background: var(--gm-accent, #2F5D46); --displayShadowColor: rgba(47, 93, 70, 0.45); }
#fruit-wheel .sm__display.is-fail { background: #B3261E; --displayShadowColor: rgba(179, 38, 30, 0.3); }

.fs-tap { margin: 0; text-align: center; font-size: 0.9rem; color: var(--gm-muted, #6B675E); }
.fs-note { margin: 0; font-size: 0.85rem; color: var(--gm-muted, #6B675E); }

/* sound / vibration toggles (the bundle toggles .is-disabled on them) */
.fs-toggle .fs-toggle-off { display: none; }
.fs-toggle.is-disabled .fs-toggle-on { display: none; }
.fs-toggle.is-disabled .fs-toggle-off { display: inline; }
.fs-toggle.is-disabled { color: var(--gm-muted, #6B675E); }

/* the bundle's modals become ordinary panels */
#fruit-wheel .modal__root, .fs-panel .modal__root {
  position: static; display: block; width: auto; transform: none; background: transparent;
  font-size: inherit; padding: 0; overflow: visible; user-select: auto; z-index: auto;
}
.fs-panel .modal__title {
  position: static; display: block; margin: 0 0 12px; padding: 0; background: transparent; box-shadow: none;
  font-family: var(--gm-display, Georgia, serif); font-weight: 500; font-size: 1.15rem; max-width: none;
}
.fs-panel .modal__titleIcon { display: none; }
.fs-panel .modal__button { display: none; }
.fs-panel .instructions__root { max-width: none; padding: 0; }
.fs-panel .instructions__p { line-height: 1.5; color: var(--gm-muted, #6B675E); }
.fs-panel .instructions__p + .instructions__p { margin-top: 10px; }
.fs-panel .instructions__symbol { font-size: 1em; }
.fs-panel .instructions__button {
  margin-top: 16px; padding: 10px 16px; border: 1px solid var(--gm-accent, #2F5D46);
  background: var(--gm-accent, #2F5D46); color: #F4F1EA; border-radius: 999px; box-shadow: none;
  font: inherit; font-weight: 600; cursor: pointer;
}
.fs-panel .instructions__button:hover { box-shadow: none; background: var(--gm-text, #1B1A17); border-color: var(--gm-text, #1B1A17); }
.fs-panel .pt__base { max-width: none; }
.fs-panel .pt__base::before, .fs-panel .pt__base::after { display: none !important; }
.fs-panel .pt__header { position: static; background: transparent; border-bottom: 1px solid var(--gm-line, #DDD8CC); }
.fs-panel .pt__row { border-bottom: 1px solid var(--gm-line, #DDD8CC); }
.fs-panel .pt__rowContent { max-width: none; }
.fs-panel .pt__c1, .fs-panel .pt__c2 { height: 40px; padding: 0 6px; }
.fs-panel .pt__c1 { background: transparent; font-size: 22px; flex: 0 0 48px; display: flex; }
.fs-panel .pt__c2 { display: flex !important; justify-content: flex-end; flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.fs-panel .pt__c3, .fs-panel .pt__c4 { display: none !important; }   /* three rings: only "× 3" applies */
.fs-panel .pt__tab { font: inherit; color: var(--gm-muted, #6B675E); box-shadow: none !important; font-weight: 600 !important; cursor: default; }
.fs-panel .pt__tab:hover > .pt__tabText { transform: none; }
.fs-values-hint { margin: 0 0 8px; font-size: 0.85rem; color: var(--gm-muted, #6B675E); }