/* Bottom-sheet container */
.readmore-sheet{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
}

/* When expanded, bring readmore sheet above game elements */
.readmore-sheet:not(.is-collapsed) {
  z-index: 10005; /* Higher than game elements and winner popup */
}

/* Sliding surface (toggle on top, content below) */
.readmore-surface{
  --rm-toggle-h: 48px;                  /* toggle height */
  max-height: 33vh;                     /* ~1/3 screen on mobile */
  max-width: 100vw;
  background: #fff;
  color: #111;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* COLLAPSED: show only the toggle, sitting at the bottom */
  transform: translateY(calc(100% - var(--rm-toggle-h)));
  transition: transform .25s ease;
}

/* EXPANDED: full sheet visible; toggle now at the top of panel */
.readmore-sheet:not(.is-collapsed) .readmore-surface{
  transform: translateY(0);
}

/* Toggle bar (always at top of surface) */
.readmore-toggle{
  height: var(--rm-toggle-h);
  appearance: none; border: 0; width: 100%;
  background: rgba(20,20,20,.7); color:#fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .9rem;
  cursor: pointer;
}
.readmore-toggle__icon{ transition: transform .25s ease; }
.readmore-sheet:not(.is-collapsed) .readmore-toggle__icon{ transform: rotate(0deg); }
.readmore-sheet.is-collapsed .readmore-toggle__icon{ transform: rotate(-180deg); }

/* Scrollable content */
.readmore-panel{
  overflow: auto;
  padding: .75rem .9rem 1rem;
}

/* Optional: gradient backdrop that fades page content under the sheet */
.readmore-backdrop{
  position: fixed; left:0; right:0; bottom:0; height:33vh; z-index:40;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.readmore-sheet:not(.is-collapsed) + .readmore-backdrop{ 
  opacity: 1; 
  pointer-events: none; /* Ensure backdrop never blocks clicks */
}

/* Desktop tweaks */
@media (min-width: 900px){
  .readmore-sheet{ left:auto; right:1rem; bottom:1rem; width:min(320px,35vw); }
  .readmore-surface{ max-height: 50vh; }
  .readmore-backdrop{ height: 40vh; }
}

/* iOS safe area */
@supports (padding:max(0px)){
  .readmore-toggle{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

.readmore-sheet { --rm-alpha: .6; }

.readmore-surface{ background: rgba(255,255,255,var(--rm-alpha)); }
.readmore-toggle{  background: rgba(20,20,20,var(--rm-alpha)); }
/* If you want the overlay softer or stronger: */
.readmore-backdrop{
  background: linear-gradient(to top,
    rgba(255,255,255,.6) 0%,
    rgba(255,255,255,.45) 55%,
    rgba(255,255,255,0) 100%);
}

/* Ensure default collapsed transform always applies */
.readmore-sheet .readmore-surface {
  transform: translateY(calc(100% - var(--rm-toggle-h))) !important;
}

/* Expanded state: parent flag or surface flag both open it */
.readmore-sheet:not(.is-collapsed) .readmore-surface,
.readmore-surface.is-open {
  transform: translateY(0) !important;
}

/* Keep it above any local stacking contexts */
.readmore-sheet { z-index: 9999; will-change: transform; }
.readmore-surface { will-change: transform; }

/* Put the arrow right next to the text */
.readmore-toggle{
  justify-content: flex-start;   /* was space-between */
  gap: .5rem;                    /* space between text and arrow */
  padding-right: .9rem;          /* keep same padding */
}

.readmore-toggle__text{ display: inline-block; }

.readmore-toggle__icon{
  margin-left: 0;                /* ensure no extra push */
  transition: transform .25s ease;  /* keep your rotation */
}