/**
 * Y888 Fast Entry + Float Bar — rewritten from scratch
 *
 * Covers the left-side fast-entry strip (game shortcut buttons) and the
 * floating container that positions it above the bottom nav.
 *
 * Sources (behavior reference only, no copied selectors):
 *   assets/theme-0/FastEntryIndex.BWgK_5Dv.css
 *   assets/theme-0/FloatBarIndex.a-5HgqrH.css
 *
 * Conventions:
 * - All values use var(--y888-*) design tokens where a token exists.
 * - Runtime theming vars (--skin__*, --float-bar-*, --float-box-*) are kept
 *   verbatim: they are the live theming system, not hardcoded values.
 * - [dir=rtl] overrides mirror every directional rule for fidelity.
 */

/* ============================================================
 * 1. Float bar main container
 *    Positioned wrapper; gaps come from inline CSS vars set by JS.
 * ============================================================ */
.float-bar-main {
  --float-bar-left-gap: 0px;
  --float-bar-right-gap: 0px;
  position: fixed;
  bottom: 1.2rem;
  /* Align with centered content column on desktop letterbox (same formula as side-drawer) */
  left: max(0px, calc((100vw - min(100vw, 56.2219vh)) / 2));
  right: max(0px, calc((100vw - min(100vw, 56.2219vh)) / 2));
  pointer-events: none;
  z-index: 50;
}

.float-bar-main .y888-float-box {
  pointer-events: auto;
}

/* ============================================================
 * 2. Float box — the floating panel itself
 * ============================================================ */
.y888-float-box {
  --float-box-y-axis-gap: .1rem;
  /* Positioned absolute inside fixed .float-bar-main (bottom: 1.2rem).
     This matches y888.com: widgets sit at viewport bottom, above bottom nav. */
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  isolation: isolate;
}

/* Left-anchored variant */
.y888-float-box-left {
  left: var(--float-box-y-axis-gap);
  right: unset;
}
[dir=rtl] .y888-float-box-left {
  right: var(--float-box-y-axis-gap);
  left: unset;
}

/* Right-anchored variant */
.y888-float-box-right {
  right: var(--float-box-y-axis-gap);
  left: unset;
}
[dir=rtl] .y888-float-box-right {
  left: var(--float-box-y-axis-gap);
  right: unset;
}

/* Collapse ("put away") state — slides items off-canvas */
.y888-float-box .fast-entry-item,
.y888-float-box .expand-icon {
  transform: translate(0);
  transition: transform var(--y888-transition-fast, .15s) ease-in-out;
}

.y888-float-box-left.y888-is-put .fast-entry-item:not(.draggable-item) {
  transform: translate(-.7rem);
}
[dir=rtl] .y888-float-box-left.y888-is-put .fast-entry-item:not(.draggable-item) {
  transform: translate(.7rem);
}
.y888-float-box-left.y888-is-put .expand-icon {
  transform: translate(-.7rem);
}
[dir=rtl] .y888-float-box-left.y888-is-put .expand-icon {
  transform: translate(.7rem);
}

.y888-float-box-right.y888-is-put .fast-entry-item:not(.draggable-item) {
  transform: translate(.7rem);
}
[dir=rtl] .y888-float-box-right.y888-is-put .fast-entry-item:not(.draggable-item) {
  transform: translate(-.7rem);
}
.y888-float-box-right.y888-is-put .expand-icon {
  transform: translate(.7rem);
}
[dir=rtl] .y888-float-box-right.y888-is-put .expand-icon {
  transform: translate(-.7rem);
}
.y888-float-box-right.y888-is-put .y888-to-top {
  transform: translate(.7rem);
}
[dir=rtl] .y888-float-box-right.y888-is-put .y888-to-top {
  transform: translate(-.7rem);
}

/* Back-to-top inside the float box */
.y888-to-top {
  margin-top: .1rem;
  transition: transform .1s linear;
}

/* ============================================================
 * 3. Fast list — vertical stack of entry buttons
 * ============================================================ */
.y888-fast-list {
  width: 1.2rem;
}

.y888-fast-list .stop-animate * {
  animation-play-state: paused !important;
}

.y888-fast-list > section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.y888-fast-list > section.y888-has-expand-dot {
  padding-top: .4rem;
}

/* Swiper pieces inside the list */
.y888-swiper-container {
  width: 100%;
  padding-bottom: 0;
}
.y888-swiper-container .y888-swiper-slide {
  display: flex;
  justify-content: center;
  width: 1.2rem;
}

.y888-fast-entry-scroll-module,
.y888-fast-entry-swiper-module {
  position: relative;
  width: 1.2rem;
}
.y888-fast-entry-scroll-module {
  padding-bottom: 0;
}

/* Expand / collapse toggle */
.y888-fast-list .y888-expand {
  position: absolute;
  top: 0;
  right: 0;
  width: .36rem;
  height: .36rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
[dir=rtl] .y888-fast-list .y888-expand {
  right: auto;
  left: 0;
}
.y888-fast-list .y888-expand.y888-left-float {
  right: unset;
  left: 0;
}
[dir=rtl] .y888-fast-list .y888-expand.y888-left-float {
  left: unset;
  right: 0;
}
.y888-fast-list .y888-expand .y888-expand-btn {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .36rem;
  transform: rotate(180deg);
  color: var(--y888-text);
  background-color: rgba(0, 0, 0, .6);
}
[dir=rtl] .y888-fast-list .y888-expand .y888-expand-btn {
  transform: rotate(-180deg);
}
.y888-fast-list .y888-expand .y888-expand-btn.y888-is-expand {
  transform: rotate(0);
  color: var(--skin__text_primary);
  background-color: var(--skin__primary);
}
.y888-fast-list > section.y888-has-expand-dot .y888-expand.y888-has-dot {
  top: 0;
  transform: translateY(-.4rem);
}

/* ============================================================
 * 4. Fast button — single game shortcut
 * ============================================================ */
.y888-fast-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1.2rem;
  height: 1.4rem;
  cursor: pointer;
}

.y888-fast-btn.y888-hidden {
  visibility: hidden;
}

/* Entry item paint containment (perf) */
.y888-entry-item {
  isolation: isolate;
  contain: paint;
}
.y888-entry-item + .y888-entry-item {
  margin-top: 0;
}

/* ---- Button background + image ---- */
.y888-fast-btn .y888-fast-bg {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.y888-fast-btn .y888-fast-img,
.y888-fast-btn .y888-fast-bg {
  width: 1.2rem;
  height: 1.2rem;
}
/* Border-glow variant for featured entries */
.y888-border-bg .y888-fast-img {
  filter: var(--float-bar-drop-shadow-color-filter);
}

/* ---- Text label (overlaid at bottom of button) ---- */
.y888-fast-btn .y888-fast-txt {
  position: absolute;
  bottom: .2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.y888-fast-btn .y888-fast-text {
  z-index: 1;
  font-weight: 700;
  text-align: center;
  position: relative;
  max-width: 1.2rem;
  line-height: 1.2;
  color: transparent;
  word-wrap: break-word;
}

/* Animated text variants (shine / scale) */
.y888-fast-btn .y888-text-multiple b,
.y888-fast-btn .y888-text-single {
  font-size: var(--font-size, 30px);
  color: var(--default-text-color);
  background: var(--default-text-stroke-color);
  -webkit-background-clip: text;
  background-clip: text;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.y888-fast-btn .y888-text-multiple {
  line-height: 1.1;
  padding: 0 .02rem;
  text-align: center;
}
.y888-fast-btn .y888-text-single {
  -webkit-text-stroke: .05rem transparent;
  padding: 0 .02rem;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
  justify-content: center;
  text-align: center;
}
.y888-fast-btn .y888-text-multiple[data-play="1"] {
  animation: y888-scale-words .4s infinite cubic-bezier(.74, -.02, .27, .96);
}
.y888-fast-btn .y888-text-multiple b[data-play="1"],
.y888-fast-btn .y888-text-single[data-play="1"] {
  animation: y888-shine .4s infinite cubic-bezier(.74, -.02, .27, .96);
}
.y888-fast-btn .y888-text-single[data-play="1"] {
  animation:
    y888-shine .4s infinite cubic-bezier(.74, -.02, .27, .96),
    y888-scale-words .4s cubic-bezier(.74, -.02, .27, .96) 0s infinite;
}
.y888-shine-first:not(:first-child) {
  margin-left: .08rem;
}
[dir=rtl] .y888-shine-first:not(:first-child) {
  margin-left: 0;
  margin-right: .08rem;
}

/* ---- Close (dismiss) icon ---- */
.y888-fast-btn .y888-fast-close {
  position: absolute;
  top: 0;
  left: 0;
  width: .36rem;
  height: .36rem;
}
[dir=rtl] .y888-fast-btn .y888-fast-close {
  left: auto;
  right: 0;
}

/* ---- Red notification dot ---- */
.y888-fast-btn .y888-red-dot {
  font-size: .18rem;
  color: var(--y888-text);
  background: var(--skin__accent_2);
  min-width: .3rem;
  text-align: center;
  border-radius: 50%;
  line-height: .3rem;
  position: absolute;
  top: -.1rem;
  right: 0;
}
[dir=rtl] .y888-fast-btn .y888-red-dot {
  right: auto;
  left: 0;
}
.y888-fast-btn.y888-left-float .y888-red-dot {
  right: unset;
  left: 0;
}
[dir=rtl] .y888-fast-btn.y888-left-float .y888-red-dot,
.y888-fast-btn.y888-left-float .y888-fast-close {
  left: unset;
  right: 0;
}
[dir=rtl] .y888-fast-btn.y888-left-float .y888-fast-close {
  right: unset;
  left: 0;
}

/* ---- Countdown badge (red-packet timer) ---- */
.y888-fast-btn .y888-countdown-box {
  display: block;
}
.y888-fast-btn .y888-countdown {
  font-size: .16rem;
  font-weight: 600;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: .2rem;
}
.y888-fast-btn .y888-countdown span {
  color: var(--skin__accent_3);
}
.y888-fast-btn .y888-countdown span:lang(en) {
  text-transform: capitalize;
}
.y888-fast-btn .y888-countdown::before {
  position: absolute;
  z-index: -1;
  content: attr(data-text);
  -webkit-text-stroke: .015rem #bc3216;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  bottom: 0;
}

/* ============================================================
 * 5. Mini toggle (collapse handle)
 * ============================================================ */
.y888-mini-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: .36rem;
  height: .36rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}
[dir=rtl] .y888-mini-toggle {
  left: auto;
  right: 0;
}
.y888-mini-toggle.y888-left {
  left: unset;
  right: 0;
}
[dir=rtl] .y888-mini-toggle.y888-left {
  right: unset;
  left: 0;
}
.y888-mini-toggle .y888-toggle-btn {
  line-height: 0;
  color: var(--y888-text);
  background-color: rgba(0, 0, 0, .6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: rotate(90deg);
}
[dir=rtl] .y888-mini-toggle .y888-toggle-btn {
  transform: rotate(-90deg);
}
.y888-mini-toggle.y888-left .y888-toggle-btn {
  transform: rotate(-90deg);
}
[dir=rtl] .y888-mini-toggle.y888-left .y888-toggle-btn {
  transform: rotate(90deg);
}
.y888-mini-toggle .y888-toggle-icon {
  line-height: 1;
  font-size: .3rem;
}

/* ============================================================
 * 6. Draggable floating item (separate mini widget)
 * ============================================================ */
.y888-draggable-item {
  width: .48rem;
  position: fixed;
}
.y888-draggable-item.y888-left {
  left: var(--float-bar-left-gap) !important;
  right: unset;
}
[dir=rtl] .y888-draggable-item.y888-left {
  right: var(--float-bar-left-gap) !important;
  left: unset;
}
.y888-draggable-item.y888-right {
  right: unset;
  left: var(--float-bar-right-gap) !important;
  margin-left: -.48rem;
}
[dir=rtl] .y888-draggable-item.y888-right {
  left: unset;
  right: var(--float-bar-right-gap) !important;
  margin-left: 0;
  margin-right: -.48rem;
}
.y888-draggable-item .y888-drag-icon {
  width: 100%;
  height: 100%;
  display: block;
}
.y888-draggable-item .y888-mini-item-wrap {
  position: relative;
  width: .48rem;
  height: .48rem;
}
.y888-draggable-item .y888-drag-red-dot {
  position: absolute;
  width: .18rem;
  height: .18rem;
  top: 0;
  left: -.02rem;
  pointer-events: none;
  z-index: 2;
  background: var(--skin__accent_2);
  border-radius: 50%;
}
[dir=rtl] .y888-draggable-item .y888-drag-red-dot {
  left: auto;
  right: -.02rem;
}

/* ============================================================
 * 7. Keyframes
 * ============================================================ */
@keyframes y888-shine {
  0% {
    color: var(--default-text-color);
    background: var(--default-text-stroke-color);
    -webkit-background-clip: text;
    background-clip: text;
  }
  100% {
    color: var(--active-text-color);
    background: var(--active-text-stroke-color);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

@keyframes y888-scale-words {
  0% { transform: scale(1); }
  100% { transform: scale(.96); }
}

/* ============================================================
 * 8. Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .y888-float-box .fast-entry-item,
  .y888-float-box .expand-icon,
  .y888-to-top {
    transition: none;
  }
  .y888-fast-btn .y888-text-multiple[data-play="1"],
  .y888-fast-btn .y888-text-multiple b[data-play="1"],
  .y888-fast-btn .y888-text-single[data-play="1"] {
    animation: none;
  }
}

/* Fix: contain swiper overflow (no JS swiper library loaded) */
.ui-swipe,
.swiper,
.y888-swiper-container {
  max-width: 100%;
  overflow: hidden;
  overflow-x: clip;
}
.fast-entry-item {
  max-width: 100%;
}

/* Float-box swiper: force horizontal layout (slides were stacking vertically) */
.y888-float-box .ui-swipe__track,
.y888-float-box .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.y888-float-box .ui-swipe-item,
.y888-float-box .swiper-slide {
  flex: 0 0 auto;
}
/* Empty slides (API placeholders) take no space */
.y888-float-box .ui-swipe-item:empty,
.y888-float-box .swiper-slide:empty {
  display: none;
}
/* Float-box carousel: slides overlap (only one visible), container = one slide tall.
   Without Swiper.js, stacked slides made the widget 2x too tall, overlapping footer. */
.y888-float-box .ui-swipe,
.y888-float-box .swiper,
.y888-float-box .y888-swiper-container {
  position: relative;
}
.y888-float-box .ui-swipe__track,
.y888-float-box .swiper-wrapper {
  position: relative;
  display: block;
}
.y888-float-box .ui-swipe-item,
.y888-float-box .swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
}
.y888-float-box .ui-swipe-item:first-child,
.y888-float-box .swiper-slide:first-child {
  position: relative;
}