/* ========================================================================== 
   Zhuijuba desktop random picker
   Scoped to .random-picker and desktop launch controls only.
   ========================================================================== */

.catalog-recommend-btn[data-random-picker],
.search-random-picker-btn[data-random-picker] {
  -webkit-tap-highlight-color: transparent;
}

.web-search-filter__actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.search-random-picker-btn {
  min-height:38px;
  padding:0 14px;
}

.random-picker {
  --rp-overlay: rgba(1, 7, 15, .72);
  --rp-panel: #101b29;
  --rp-panel-2: #0c1623;
  --rp-panel-3: #152234;
  --rp-text: #f4f7fb;
  --rp-text-2: #a9b7ca;
  --rp-text-3: #74849a;
  --rp-border: rgba(119, 153, 201, .24);
  --rp-border-soft: rgba(119, 153, 201, .14);
  --rp-blue: #2f82ff;
  --rp-blue-hover: #4a94ff;
  --rp-blue-soft: rgba(47, 130, 255, .14);
  --rp-blue-focus: rgba(72, 145, 255, .34);
  --rp-danger: #ff7b86;
  --rp-shadow: 0 30px 90px rgba(0,0,0,.48), 0 8px 28px rgba(0,0,0,.28);
  --rp-die-top: #edf3f8;
  --rp-die-left: #9aa9b9;
  --rp-die-right: #718397;
  --rp-die-pip: #111820;
  --rp-die-edge: rgba(213, 229, 244, .42);
  --rp-die-shadow: rgba(0, 0, 0, .34);
  position:fixed;
  inset:0;
  z-index:9990;
  color:var(--rp-text);
  font-family:var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
}

html[data-theme="light"] .random-picker {
  --rp-overlay: rgba(35, 48, 66, .32);
  --rp-panel: #ffffff;
  --rp-panel-2: #f7f9fc;
  --rp-panel-3: #eef3f9;
  --rp-text: #202936;
  --rp-text-2: #586578;
  --rp-text-3: #7e8a9b;
  --rp-border: rgba(37, 57, 84, .17);
  --rp-border-soft: rgba(37, 57, 84, .10);
  --rp-blue: #347ff0;
  --rp-blue-hover: #216edc;
  --rp-blue-soft: rgba(52, 127, 240, .10);
  --rp-blue-focus: rgba(52, 127, 240, .24);
  --rp-danger: #c94554;
  --rp-shadow: 0 28px 80px rgba(37, 51, 70, .22), 0 6px 20px rgba(37,51,70,.10);
  --rp-die-top: #ffffff;
  --rp-die-left: #c8d0d8;
  --rp-die-right: #aab4be;
  --rp-die-pip: #1e242a;
  --rp-die-edge: rgba(92, 108, 125, .28);
  --rp-die-shadow: rgba(53, 68, 84, .25);
}

.random-picker[hidden] { display:none !important; }
.random-picker [hidden] { display:none !important; }
.random-picker__backdrop { position:absolute; inset:0; background:var(--rp-overlay); backdrop-filter:blur(2px); }

.random-picker__dialog {
  position:absolute;
  top:50%;
  left:50%;
  width:min(1180px, calc(100vw - 56px));
  max-height:calc(100vh - 54px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--rp-panel) 96%, #17304e 4%), var(--rp-panel));
  border:1px solid var(--rp-border);
  border-radius:18px;
  box-shadow:var(--rp-shadow);
  transform:translate(-50%, -48%) scale(.985);
  opacity:0;
  outline:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.random-picker.is-open .random-picker__dialog { opacity:1; transform:translate(-50%, -50%) scale(1); }

.random-picker__header {
  position:relative;
  z-index:5;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:22px 24px 18px;
  background:var(--rp-panel);
  border-bottom:1px solid var(--rp-border-soft);
}
.random-picker__heading { display:flex; align-items:flex-start; gap:13px; min-width:0; }
.random-picker__heading-icon { flex:0 0 auto; margin-top:1px; }
.random-picker__heading h2 { margin:0; color:var(--rp-text); font-size:24px; line-height:1.2; font-weight:760; letter-spacing:-.02em; }
.random-picker__heading p { margin:6px 0 0; color:var(--rp-text-2); font-size:13px; line-height:1.45; }
.random-picker__header-actions { display:flex; align-items:center; gap:14px; flex:0 0 auto; }

.random-picker__fan-question {
  width:310px;
  min-width:310px;
  height:54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 10px 0 0;
}
.random-picker__fan-label {
  display:block;
  margin-bottom:4px;
  color:var(--rp-blue);
  font-size:10px;
  line-height:1;
  font-weight:760;
  letter-spacing:.12em;
}
.random-picker__fan-question p {
  display:-webkit-box;
  min-height:34px;
  max-height:34px;
  margin:0;
  overflow:hidden;
  color:var(--rp-text-2);
  font-size:12px;
  line-height:17px;
  font-weight:560;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}


.random-picker__close {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  color:var(--rp-text-2);
  border-radius:10px;
  transition:color .16s ease, background .16s ease, transform .12s ease;
}
.random-picker__close:hover { color:var(--rp-text); background:var(--rp-panel-3); }
.random-picker__close:active { transform:scale(.94); }
.random-picker__close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }

.random-picker__notice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 24px 0;
  padding:9px 12px;
  color:var(--rp-text-2);
  font-size:12px;
  background:var(--rp-blue-soft);
  border:1px solid color-mix(in srgb, var(--rp-blue) 28%, transparent);
  border-radius:10px;
}
.random-picker__notice.is-error { color:var(--rp-danger); background:color-mix(in srgb, var(--rp-danger) 8%, transparent); border-color:color-mix(in srgb, var(--rp-danger) 24%, transparent); }
.random-picker__notice button { color:var(--rp-blue); font-weight:700; }

.random-picker__content { min-height:260px; overflow:auto; padding:20px 24px 18px; overscroll-behavior:contain; }
.random-picker__loading,
.random-picker__state { min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.random-picker__loading strong { margin-top:24px; color:var(--rp-text); font-size:15px; font-weight:700; }
.random-picker__loading > span { margin-top:6px; color:var(--rp-text-3); font-size:11px; }

.random-picker__state h3 { margin:18px 0 0; color:var(--rp-text); font-size:18px; }
.random-picker__state p { max-width:440px; margin:7px 0 0; color:var(--rp-text-2); font-size:12px; line-height:1.6; }
.random-picker__state > button { height:38px; margin-top:18px; padding:0 16px; color:#fff; font-size:12px; font-weight:700; background:var(--rp-blue); border-radius:10px; }
.random-picker__error-icon { display:grid; width:54px; height:54px; place-items:center; color:var(--rp-danger); font-size:24px; font-weight:800; background:color-mix(in srgb, var(--rp-danger) 9%, transparent); border:1px solid color-mix(in srgb, var(--rp-danger) 20%, transparent); border-radius:16px; }

.random-picker__results-wrap { position:relative; min-height:0; }
.random-picker__grid { display:grid; gap:14px; align-items:start; }
.random-picker__grid--fixed-five { grid-template-columns:repeat(5, minmax(0,1fr)); }

.random-picker__card { min-width:0; animation:rp-card-in .22s cubic-bezier(.2,.8,.2,1) both; }
.random-picker__card:nth-child(2) { animation-delay:35ms; }
.random-picker__card:nth-child(3) { animation-delay:50ms; }
.random-picker__card:nth-child(4) { animation-delay:50ms; }
.random-picker__card:nth-child(5) { animation-delay:50ms; }
.random-picker__card.is-entering { animation:rp-card-in .22s cubic-bezier(.2,.8,.2,1) both; }

.random-picker__cover { position:relative; overflow:hidden; aspect-ratio:2 / 3; background:var(--rp-panel-3); border:1px solid var(--rp-border-soft); border-radius:13px; }
.random-picker__poster { position:absolute; inset:0; display:block; }
.random-picker__img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.random-picker__poster-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--rp-text-3); font-size:11px; background:linear-gradient(145deg, var(--rp-panel-3), var(--rp-panel-2)); }
.random-picker__poster-placeholder svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.3; }
.random-picker__poster.is-broken .random-picker__img { display:none; }
.random-picker__badge { position:absolute; top:9px; left:9px; z-index:4; max-width:calc(100% - 18px); padding:3px 8px; overflow:hidden; color:#fff; font-size:11px; font-weight:650; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; background:rgba(8,14,23,.78); border:1px solid rgba(255,255,255,.13); border-radius:7px; backdrop-filter:blur(5px); }

.random-picker__info.media-card__info { position:relative; padding:10px 0 0 !important; }
.random-picker__title.media-card__title { min-height:0; margin:0; padding:0; overflow:visible; color:var(--rp-text); font-size:14px; font-weight:720; line-height:1.38; white-space:normal; text-overflow:clip; }
.random-picker__title a { color:inherit; }
.random-picker__meta.media-card__meta { display:flex; gap:6px; margin:5px 0 0; color:var(--rp-text-3); font-size:11px; }
.random-picker__meta.media-card__meta > span + span::before { content:'·'; margin-right:6px; }

.random-picker__card-actions { display:flex; align-items:center; gap:7px; margin-top:10px; }
.random-picker__detail,
.random-picker__replace {
  display:inline-flex;
  height:36px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 11px;
  white-space:nowrap;
  font-size:11px;
  font-weight:680;
  border-radius:9px;
  transition:transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.random-picker__detail { color:#fff; background:var(--rp-blue); border:1px solid var(--rp-blue); }
.random-picker__detail:hover { color:#fff; background:var(--rp-blue-hover); }
.random-picker__replace { color:var(--rp-text-2); background:var(--rp-panel-2); border:1px solid var(--rp-border-soft); }
.random-picker__replace:hover:not(:disabled) { color:var(--rp-text); border-color:var(--rp-border); }
.random-picker__detail:active,
.random-picker__replace:active:not(:disabled) { transform:translateY(1px) scale(.98); }
.random-picker__replace svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.random-picker__replace:disabled { opacity:.48; cursor:not-allowed; }
.random-picker__favorite-slot { display:inline-flex; width:36px; height:36px; flex:0 0 36px; }
.random-picker__favorite-slot .card-favorite-btn { position:static !important; inset:auto !important; width:36px !important; height:36px !important; margin:0 !important; color:var(--rp-text-2); background:var(--rp-panel-2); border:1px solid var(--rp-border-soft); border-radius:9px; }
.random-picker__favorite-slot .card-favorite-btn:hover { color:var(--rp-blue); background:var(--rp-blue-soft); border-color:color-mix(in srgb, var(--rp-blue) 28%, transparent); }
.random-picker__favorite-slot .card-favorite-btn.is-active { color:#fff; background:var(--rp-blue); border-color:var(--rp-blue); }

.random-picker__card-loader { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; visibility:hidden; opacity:0; color:#fff; font-size:11px; background:rgba(6,12,20,.50); backdrop-filter:blur(2px); transition:opacity .16s ease, visibility .16s ease; }
.random-picker__card.is-replacing .random-picker__card-loader { visibility:visible; opacity:1; }

.random-picker__refresh-mask { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:260px; color:var(--rp-text); font-size:12px; background:color-mix(in srgb, var(--rp-panel) 72%, transparent); backdrop-filter:blur(1.5px); border-radius:14px; }

.random-picker__footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 24px 18px; background:var(--rp-panel); border-top:1px solid var(--rp-border-soft); }
.random-picker__footer p { margin:0; color:var(--rp-text-2); font-size:12px; }
.random-picker__footer-actions { display:flex; align-items:center; gap:10px; }
.random-picker__reroll,
.random-picker__return { display:inline-flex; height:42px; align-items:center; justify-content:center; gap:8px; padding:0 16px; font-size:12px; font-weight:700; border-radius:10px; transition:transform .12s ease, background .16s ease, color .16s ease, border-color .16s ease; }
.random-picker__reroll { min-width:128px; color:#fff; background:var(--rp-blue); border:1px solid var(--rp-blue); }
.random-picker__reroll:hover:not(:disabled) { background:var(--rp-blue-hover); }
.random-picker__return { color:var(--rp-text-2); background:transparent; border:1px solid transparent; }
.random-picker__return:hover { color:var(--rp-text); background:var(--rp-panel-3); }
.random-picker__reroll:active:not(:disabled), .random-picker__return:active { transform:translateY(1px) scale(.98); }
.random-picker__reroll:disabled { opacity:.48; cursor:not-allowed; }

/* Recognizable die --------------------------------------------------------- */
.random-die-scene {
  --die-size:34px;
  display:inline-grid;
  width:var(--die-size);
  height:var(--die-size);
  place-items:center;
  flex:0 0 auto;
}
.random-die-scene--loading { --die-size:76px; }
.random-die-scene--refresh { --die-size:52px; }
.random-die-scene--card { --die-size:42px; }
.random-die-scene--icon { --die-size:38px; }
.random-die-scene--button { --die-size:24px; margin:-2px 0 -2px -2px; }
.random-die-scene--empty { --die-size:54px; }

.random-die-svg {
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin:50% 55%;
  filter:drop-shadow(0 7px 9px var(--rp-die-shadow));
}
.random-die-svg__top { fill:var(--rp-die-top); }
.random-die-svg__left { fill:var(--rp-die-left); }
.random-die-svg__right { fill:var(--rp-die-right); }
.random-die-svg__edge {
  fill:none;
  stroke:var(--rp-die-edge);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.random-die-svg__pips { fill:var(--rp-die-pip); }

.random-picker.is-busy .random-die-scene--loading .random-die-svg,
.random-picker.is-busy .random-die-scene--refresh .random-die-svg,
.random-picker__card.is-replacing .random-die-scene--card .random-die-svg {
  animation:rp-die-land .64s cubic-bezier(.14,.72,.18,1) both;
}
.random-picker.is-slow .random-die-scene--loading .random-die-svg,
.random-picker.is-slow .random-die-scene--refresh .random-die-svg,
.random-picker.is-slow .random-picker__card.is-replacing .random-die-scene--card .random-die-svg {
  animation:rp-die-slow 1.9s ease-in-out infinite;
}

@keyframes rp-die-land {
  0% { transform:rotate(-16deg) scale(.90) translateY(-2px); }
  34% { transform:rotate(150deg) scale(1.04) translateY(-5px); }
  68% { transform:rotate(310deg) scale(.985) translateY(1px); }
  86% { transform:rotate(354deg) scale(1.01) translateY(-1px); }
  100% { transform:rotate(360deg) scale(1) translateY(0); }
}
@keyframes rp-die-slow {
  0%,100% { transform:rotate(360deg) translateY(0); }
  50% { transform:rotate(374deg) translateY(-2px); }
}

@keyframes rp-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 1440px) {
  .random-picker__dialog { width:min(1080px, calc(100vw - 44px)); }
  .random-picker__grid--fixed-five { grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
  .random-picker__card-actions { gap:5px; }
  .random-picker__detail, .random-picker__replace { padding-inline:9px; }
}

@media (max-width: 1280px) {
  .random-picker__dialog { width:min(1040px, calc(100vw - 36px)); max-height:calc(100vh - 36px); }
  .random-picker__header { padding:18px 20px 15px; }
  .random-picker__content { padding:16px 20px; }
  .random-picker__footer { padding:14px 20px 16px; }
  .random-picker__heading h2 { font-size:21px; }
  .random-picker__grid--fixed-five { grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
  .random-picker__detail, .random-picker__replace { font-size:10px; padding-inline:8px; }
  .random-picker__favorite-slot, .random-picker__favorite-slot .card-favorite-btn { width:34px !important; height:34px !important; flex-basis:34px; }
}

@media (max-height: 760px) {
  .random-picker__dialog { max-height:calc(100vh - 24px); }
  .random-picker__header { padding-top:14px; padding-bottom:12px; }
  .random-picker__content { padding-top:14px; padding-bottom:12px; }
  .random-picker__cover { aspect-ratio: 2 / 2.72; }
  .random-picker__footer { padding-top:11px; padding-bottom:12px; }
}

/* Desktop template only: if it is accidentally served below desktop width, keep it safe. */
@media (max-width: 1024px) {
  .random-picker { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .random-picker__dialog,
  .random-picker__card,
  .random-picker__card.is-entering,
  .random-die-svg,
  .random-picker__detail,
  .random-picker__replace,
  .random-picker__reroll,
  .random-picker__return { animation:none !important; transition:none !important; transform:none !important; }
  .random-picker__dialog { transform:translate(-50%, -50%) !important; }
}

/* Category pages already removed their breadcrumb; do not keep breadcrumb-era top gap. */
.page.catalog-page.random-picker-page { padding-top:calc(var(--header-h) + 8px); }
.page.catalog-page.random-picker-page .catalog-hero { margin-top:0; padding-top:0; }


/* Accessibility status stays available to assistive tech without taking space. */
.random-picker .sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Matching die on the page launch button. */
.random-picker-trigger-die {
  width:20px;
  height:20px;
  flex:0 0 20px;
  overflow:visible;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
}
.random-picker-trigger-die__top { fill:#edf3f8; }
.random-picker-trigger-die__left { fill:#91a3b6; }
.random-picker-trigger-die__right { fill:#687d92; }
.random-picker-trigger-die__pips { fill:#111820; }
html[data-theme="light"] .random-picker-trigger-die__top { fill:#fff; }
html[data-theme="light"] .random-picker-trigger-die__left { fill:#c9d1d9; }
html[data-theme="light"] .random-picker-trigger-die__right { fill:#a7b2bd; }
html[data-theme="light"] .random-picker-trigger-die__pips { fill:#1e242a; }

@media (max-width: 1440px) {
  .random-picker__fan-question {
    width:270px;
    min-width:270px;
  }
}

@media (max-width: 1280px) {
  .random-picker__fan-question {
    width:240px;
    min-width:240px;
  }
  .random-picker__fan-question p {
    font-size:11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .random-picker.is-busy .random-die-svg,
  .random-picker.is-slow .random-die-svg,
  .random-picker__card.is-replacing .random-die-svg {
    animation:none !important;
    transform:none !important;
  }
}

/* Match native overflow controls to the popup theme, including horizontal overflow. */
.random-picker__content{color-scheme:dark;scrollbar-width:thin;scrollbar-color:#578ccc #172638}
.random-picker__content::-webkit-scrollbar{width:8px;height:8px}
.random-picker__content::-webkit-scrollbar-track{background:#172638;border-radius:8px}
.random-picker__content::-webkit-scrollbar-thumb{background:#578ccc;border-radius:8px}
html[data-theme="light"] .random-picker__content{color-scheme:light;scrollbar-color:#7eabef #edf2f8}
html[data-theme="light"] .random-picker__content::-webkit-scrollbar-track{background:#edf2f8}
html[data-theme="light"] .random-picker__content::-webkit-scrollbar-thumb{background:#7eabef}
html[data-theme="light"] .random-picker__content::-webkit-scrollbar-thumb:hover{background:#4c8ce5}