/* Reveal cards land here after leaving the packet. On phones the same five
   nodes form a snap strip, with a readable card and a glimpse of the next. */
.reveal-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.reveal-header-actions [hidden]{display:none!important}
.reveal-area .pack-grid{padding-top:17px;padding-bottom:21px}
.reveal-area .pack-grid>.flip-slot{width:auto;grid-column:auto;justify-self:stretch}
.reveal-area button.flip-back{display:block;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:zoom-in;opacity:1}
.reveal-area button.flip-back:disabled{cursor:default;opacity:1}
.reveal-area button.flip-front:disabled{opacity:1;cursor:default}
.reveal-area .flip-back:focus-visible{outline:2px solid #81986b;outline-offset:7px;border-radius:14px}
.reveal-area .flip-front:focus-visible{outline:2px solid #b9ce9d;outline-offset:5px}
.reveal-area .reveal-hint{min-height:18px;line-height:1.8}
.reveal-area .new-tag{font-size:9px;font-weight:500;letter-spacing:.3px;color:#627554;white-space:nowrap}
.pack-pager{display:none}

@media(max-width:760px){
  .reveal-area .pack-grid{
    --result-card-width:min(72vw,296px);
    display:flex;gap:18px;max-width:none;width:100%;margin:0;
    padding:25px calc((100% - var(--result-card-width))/2) 31px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-padding-inline:calc((100% - var(--result-card-width))/2);
    scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  }
  .reveal-area .pack-grid::-webkit-scrollbar{display:none}
  .reveal-area .pack-grid>.flip-slot{
    flex:0 0 var(--result-card-width);width:var(--result-card-width);min-width:0;
    scroll-snap-align:center;scroll-snap-stop:always;
  }
  .reveal-area .flip-inner{aspect-ratio:.66}
  .reveal-area .flip-back .card-word{font-size:26px}
  .reveal-area .flip-back .card-meaning{font-size:13px}
  .reveal-area .new-tag{font-size:10px}
  .reveal-header-actions{gap:2px;max-width:110px}
  .reveal-area .reveal-header{margin-bottom:3px}
  .pack-pager{display:flex;align-items:center;justify-content:center;gap:23px;margin:0 0 12px}
  .pack-pager button{width:38px;height:34px;display:grid;place-items:center;background:transparent;border:1px solid #d6dfca;border-radius:50%;color:#5d7452;cursor:pointer}
  .pack-pager button:disabled{opacity:.3;cursor:default}
  .pack-pager button:focus-visible{outline:2px solid #81986b;outline-offset:3px}
  .pack-page-count{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#7f8c75;min-width:43px;text-align:center}
  .reveal-area .reveal-hint{font-size:11px;max-width:310px;margin:0 auto;text-align:center}
}

@media(max-width:760px) and (max-height:700px){
  .reveal-area .pack-grid{--result-card-width:min(66vw,258px)}
  .reveal-area .flip-back .card-word{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
  .reveal-area .pack-grid{scroll-behavior:auto}
  .reveal-area .flip-inner{transition:none}
}