/* V1.0 shared design tokens, components, feedback, dialogs, loading and accessibility */
:root{
  --st-color-blue:#6bc6f8;--st-color-pink:#ff82c8;--st-color-gold:#fed334;--st-color-lavender:#e8d4ff;--st-color-ink:#34466f;--st-color-muted:#68738e;--st-color-danger:#b4233f;--st-color-success:#31845f;
  --st-surface:#fff;--st-surface-soft:#f6fbff;--st-surface-magic:linear-gradient(145deg,#fff,#f8f4ff);--st-line:rgba(107,198,248,.42);
  --st-space-1:.375rem;--st-space-2:.625rem;--st-space-3:1rem;--st-space-4:1.5rem;--st-space-5:2rem;
  --st-radius-sm:.75rem;--st-radius-md:1rem;--st-radius-lg:1.5rem;--st-radius-pill:999px;
  --st-shadow-sm:0 8px 22px rgba(45,62,105,.12);--st-shadow-md:0 18px 48px rgba(45,62,105,.18);--st-shadow-lg:0 28px 80px rgba(30,40,75,.34);
  --st-motion-fast:160ms;--st-motion-normal:240ms;
  --st-ui-blue:var(--st-color-blue);--st-ui-pink:var(--st-color-pink);--st-ui-gold:var(--st-color-gold);--st-ui-ink:var(--st-color-ink);--st-ui-muted:var(--st-color-muted);--st-ui-danger:var(--st-color-danger)
}
.st-stack{display:grid;gap:var(--st-space-3)}.st-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--st-space-2)}
.st-panel{padding:var(--st-space-4);border:1px solid var(--st-line);border-radius:var(--st-radius-lg);background:var(--st-surface);box-shadow:var(--st-shadow-sm);color:var(--st-color-ink)}
.st-card{padding:var(--st-space-3);border:1px solid rgba(255,130,200,.32);border-radius:var(--st-radius-md);background:linear-gradient(145deg,var(--st-surface),var(--st-surface-soft));box-shadow:var(--st-shadow-sm)}
.st-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.45rem;padding:.65rem 1rem;border:1px solid var(--st-line);border-radius:var(--st-radius-pill);background:var(--st-surface);color:var(--st-color-ink);font:inherit;font-weight:900;text-decoration:none;cursor:pointer;transition:transform var(--st-motion-fast),box-shadow var(--st-motion-fast),opacity var(--st-motion-fast)}
.st-button:hover{transform:translateY(-1px);box-shadow:var(--st-shadow-sm)}.st-button:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}.st-button.primary{border-color:transparent;background:linear-gradient(135deg,var(--st-color-blue),var(--st-color-pink));color:#fff}.st-button.danger{border-color:transparent;background:linear-gradient(135deg,#ff8a9e,#c83c63);color:#fff}
.st-badge{display:inline-flex;align-items:center;min-height:1.75rem;padding:.2rem .65rem;border:1px solid var(--st-line);border-radius:var(--st-radius-pill);background:var(--st-surface-soft);color:var(--st-color-ink);font-size:.82rem;font-weight:900}
.st-field{display:grid;gap:.4rem;color:var(--st-color-ink);font-weight:800}.st-field :is(input,select,textarea),.st-control{width:100%;min-height:44px;padding:.65rem .75rem;border:1px solid var(--st-line);border-radius:var(--st-radius-sm);background:var(--st-surface);color:var(--st-color-ink);font:inherit}.st-field textarea{min-height:7rem;resize:vertical}
.st-slider{width:100%;accent-color:var(--st-color-pink)}
/* Compatibility bridge: existing routes inherit the same component geometry while markup migrates incrementally. */
.btn,.st-button{border-radius:var(--st-radius-md)}
.panel,.st-panel{border-radius:var(--st-radius-lg)}
.pill,.badge,.st-badge{border-radius:var(--st-radius-pill)}
input[type="range"],.st-slider{accent-color:var(--st-color-pink)}
.collection-card,.link-card,.st-card{border-radius:var(--st-radius-md)}
/*
 * Holographic finish — simple always-on rainbow foil (reveal + full-view only).
 * One full-card rainbow overlay + seamless hue cycle (0→360 is a perfect loop).
 * 3D click-drag tilt is separate and does not drive the foil.
 */
.card-finish-holographic{
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
}
.face.card-finish-holographic,
.st-r3-card-front.card-finish-holographic{position:absolute;inset:0}
.st-r3-result-art.card-finish-holographic{border-radius:13px 13px 0 0}
.card-finish-holographic>img{position:relative;z-index:0;display:block}
.card-finish-holographic::before,
.card-finish-holographic::after,
.card-finish-holographic>.st-holo-spark{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
}
/* Full-card rainbow foil */
.card-finish-holographic::before{
  z-index:2;
  background:
    linear-gradient(
      125deg,
      #ff5ec8 0%,
      #ff8a4a 18%,
      #ffd84a 34%,
      #5dff9a 50%,
      #4ab8ff 66%,
      #b06bff 82%,
      #ff5ec8 100%
    );
  mix-blend-mode:overlay;
  opacity:.55;
  animation:stHoloHue 5s linear infinite;
}
/* Soft metallic sheen on top of the rainbow */
.card-finish-holographic::after{
  z-index:3;
  background:
    linear-gradient(
      115deg,
      transparent 15%,
      rgba(255,255,255,.45) 45%,
      rgba(255,255,255,.1) 55%,
      transparent 80%
    );
  background-size:200% 200%;
  background-position:30% 40%;
  mix-blend-mode:soft-light;
  opacity:.65;
  animation:stHoloSheen 4s ease-in-out infinite alternate;
}
/* Glimmering sparkles — staggered alternate fades (no hard loop jump) */
.card-finish-holographic>.st-holo-spark{
  z-index:4;
  content:none;
  background-image:
    radial-gradient(circle at 14% 18%,#fff 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 38% 42%,#fff 0 .8px,transparent 1.4px),
    radial-gradient(circle at 62% 24%,#fff 0 1.2px,transparent 2px),
    radial-gradient(circle at 78% 58%,#fff 0 .9px,transparent 1.5px),
    radial-gradient(circle at 22% 72%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 88% 34%,#fff 0 .7px,transparent 1.3px),
    radial-gradient(circle at 48% 78%,#fff 0 1.1px,transparent 1.8px),
    linear-gradient(0deg,transparent 46%,rgba(255,255,255,.95) 50%,transparent 54%),
    linear-gradient(90deg,transparent 46%,rgba(255,255,255,.95) 50%,transparent 54%),
    linear-gradient(0deg,transparent 46%,rgba(255,255,255,.85) 50%,transparent 54%),
    linear-gradient(90deg,transparent 46%,rgba(255,255,255,.85) 50%,transparent 54%);
  background-size:
    100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
    16px 16px,16px 16px,12px 12px,12px 12px;
  background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    14% 18%,14% 18%,62% 24%,62% 24%;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.7));
  animation:stHoloSparkleA 1.8s ease-in-out infinite alternate;
}
.card-finish-holographic>.st-holo-spark::before,
.card-finish-holographic>.st-holo-spark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:
    radial-gradient(circle at 30% 28%,#fff 0 .9px,transparent 1.5px),
    radial-gradient(circle at 70% 48%,#fff 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 52% 66%,#fff 0 .7px,transparent 1.3px),
    radial-gradient(circle at 18% 54%,#fff 0 .8px,transparent 1.4px),
    linear-gradient(0deg,transparent 46%,rgba(255,255,255,.9) 50%,transparent 54%),
    linear-gradient(90deg,transparent 46%,rgba(255,255,255,.9) 50%,transparent 54%),
    linear-gradient(0deg,transparent 46%,rgba(255,255,255,.8) 50%,transparent 54%),
    linear-gradient(90deg,transparent 46%,rgba(255,255,255,.8) 50%,transparent 54%);
  background-size:
    100% 100%,100% 100%,100% 100%,100% 100%,
    14px 14px,14px 14px,18px 18px,18px 18px;
  background-position:
    0 0,0 0,0 0,0 0,
    78% 58%,78% 58%,48% 78%,48% 78%;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:stHoloSparkleB 2.3s ease-in-out infinite alternate;
}
.card-finish-holographic>.st-holo-spark::after{
  background-position:
    0 0,0 0,0 0,0 0,
    22% 72%,22% 72%,88% 34%,88% 34%;
  animation-name:stHoloSparkleC;
  animation-duration:2.7s;
  animation-direction:alternate-reverse;
}
/* Hue cycle is seamless: 360deg looks identical to 0deg */
@keyframes stHoloHue{
  to{filter:hue-rotate(360deg)}
}
/* Sheen drifts back and forth — alternate has no hard restart */
@keyframes stHoloSheen{
  from{background-position:20% 30%;opacity:.5}
  to{background-position:75% 65%;opacity:.78}
}
@keyframes stHoloSparkleA{
  from{opacity:.18;filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
  to{opacity:.85;filter:drop-shadow(0 0 4px rgba(255,255,255,.95))}
}
@keyframes stHoloSparkleB{
  from{opacity:.12;transform:scale(.92)}
  to{opacity:.9;transform:scale(1.05)}
}
@keyframes stHoloSparkleC{
  from{opacity:.2;transform:scale(1.04)}
  to{opacity:.95;transform:scale(.94)}
}
/* Click-drag 3D tilt only (foil is independent) */
.st-card-drag-tilt{
  --tiltX:0deg;
  --tiltY:0deg;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.st-card-drag-tilt:not(.st-r3-card-actor){
  transform:rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transform-style:preserve-3d;
  transition:transform .3s ease,filter .3s ease;
}
.st-card-drag-tilt.is-dragging,
.full-card-wrap#fullCard3d.is-dragging{
  transition:none!important;
  cursor:grabbing;
}
.full-card-wrap#fullCard3d{
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.st-r3-reveal-scene.is-revealed .st-r3-card-actor.st-card-drag-tilt{
  transform:translate(-50%,-50%) translateY(-5px) scale(1.03) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition:transform .3s ease,filter .3s ease;
}
.st-r3-reveal-scene[data-rarity="legendary"].is-revealed .st-r3-card-actor.st-card-drag-tilt{
  transform:translate(-50%,-50%) translateY(-5px) scale(1.1) rotateX(var(--tiltX)) rotateY(var(--tiltY));
}
.st-r3-reveal-scene.is-revealed .st-r3-card-actor.st-card-drag-tilt.is-dragging{
  transition:none;
}
.st-toast-region{position:fixed;right:18px;bottom:18px;z-index:100200;display:grid;gap:10px;width:min(380px,calc(100vw - 28px));pointer-events:none}
.st-toast{pointer-events:auto;padding:13px 16px;border:1px solid rgba(107,198,248,.48);border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 15px 38px rgba(45,62,105,.22);color:var(--st-ui-ink);font-weight:800;line-height:1.45;animation:stToastIn .22s ease-out}
.st-toast.success{border-color:rgba(70,176,127,.5)}.st-toast.error{border-color:rgba(180,35,63,.5);color:var(--st-ui-danger)}.st-toast.info{border-color:rgba(255,130,200,.5)}
@keyframes stToastIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.st-dialog-overlay{position:fixed;inset:0;z-index:100100;display:flex;align-items:safe center;justify-content:safe center;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(37,48,82,.56);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity var(--st-motion-normal)}.st-dialog-overlay.is-open{opacity:1}.st-dialog-overlay.hidden,.st-dialog-overlay[hidden]{display:none!important}
.st-modal-backdrop{position:absolute;inset:0;z-index:0;border:0;padding:0;margin:0;background:transparent;cursor:default}
.st-dialog-overlay>:not(.st-modal-backdrop){position:relative;z-index:1}
/* Shell iframe contract: pin overlays to the visible parent viewport slice. shared-ui.js sets --st-embed-* and inline !important. */
:is(.st-dialog-overlay,.st-r3-overlay,.st-evo-root,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).is-embed-anchored:not(.hidden):not([hidden]),
:is(.st-dialog-overlay,.st-r3-overlay,.st-evo-root,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).is-embed-anchored.is-open{
  --st-embed-overlay-top:0px;--st-embed-overlay-height:100dvh;
  position:absolute!important;inset:auto!important;top:var(--st-embed-overlay-top)!important;left:0!important;right:0!important;bottom:auto!important;width:100%!important;max-width:100%!important;height:var(--st-embed-overlay-height)!important;max-height:var(--st-embed-overlay-height)!important
}
.st-dialog{position:relative;flex:0 0 auto;width:min(520px,100%);max-height:min(90dvh,900px);overflow:auto;margin:auto;padding:26px;border:2px solid rgba(255,130,200,.5);border-radius:var(--st-radius-lg);background:linear-gradient(145deg,var(--st-surface),var(--st-surface-soft) 60%,#fff3fb);box-shadow:var(--st-shadow-lg);text-align:center;color:var(--st-ui-ink);transform:translateY(8px) scale(.98);transition:transform var(--st-motion-normal)}.is-open>.st-dialog{transform:none}
.st-dialog--wide{width:min(620px,100%)}.st-dialog--xl{width:min(900px,100%);text-align:left}
.st-dialog-close{position:absolute;top:10px;right:12px;width:40px;height:40px;padding:0!important;border:0;border-radius:50%;background:transparent;color:var(--st-ui-ink);font-size:1.65rem;line-height:1;cursor:pointer}
.st-dialog h2{margin:0 0 10px;color:#405fa1}.st-dialog p{margin:0;color:var(--st-ui-muted);line-height:1.6}.st-dialog-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.st-dialog button{min-height:46px;padding:10px 20px;border-radius:var(--st-radius-pill);font:inherit;font-weight:900;cursor:pointer}.st-dialog-cancel{border:2px solid var(--st-line);background:var(--st-surface);color:#405fa1}.st-dialog-confirm{border:0;background:linear-gradient(135deg,var(--st-ui-blue),var(--st-ui-pink));color:#fff}.st-dialog-confirm.danger{background:linear-gradient(135deg,#ff8a9e,#c83c63)}
.st-dialog-content{margin-top:var(--st-space-3);text-align:left}
.st-dialog-warning{margin-top:12px;padding:13px;border-radius:var(--st-radius-sm);background:rgba(254,211,52,.18);color:#735800;font-weight:700;line-height:1.5}
.st-view-state{display:grid;place-items:center;min-height:220px;padding:28px;text-align:center;color:var(--st-ui-muted)}.st-view-state strong{display:block;color:#405fa1;font-size:1.25rem;margin-bottom:7px}.st-view-state button{margin-top:15px;padding:10px 18px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--st-ui-blue),var(--st-ui-pink));color:#fff;font-weight:900;cursor:pointer}.st-spinner{width:38px;height:38px;margin:0 auto 14px;border:4px solid rgba(107,198,248,.2);border-top-color:var(--st-ui-pink);border-radius:50%;animation:stSpin .8s linear infinite}@keyframes stSpin{to{transform:rotate(360deg)}}
:focus-visible{outline:3px solid rgba(255,130,200,.75)!important;outline-offset:3px!important}
.status:empty,.page-status:empty,[role="status"]:empty{display:none!important}
@media(prefers-reduced-motion:reduce){.st-toast,.st-spinner,.card-finish-holographic::before,.card-finish-holographic::after,.card-finish-holographic>.st-holo-spark,.card-finish-holographic>.st-holo-spark::before,.card-finish-holographic>.st-holo-spark::after{animation:none!important}.card-finish-holographic::before{opacity:.5;filter:hue-rotate(40deg)}.card-finish-holographic::after{opacity:.55;background-position:45% 40%}.card-finish-holographic>.st-holo-spark{opacity:.4}.card-finish-holographic>.st-holo-spark::before,.card-finish-holographic>.st-holo-spark::after{opacity:.35}.st-card-drag-tilt,.full-card-wrap#fullCard3d{transition:none!important}.st-dialog-overlay{backdrop-filter:none}.st-dialog-overlay,.st-dialog,.st-button{transition:none!important}}

/* Card comments (binder full view) */
.card-comments{margin-top:16px;padding-top:14px;border-top:1px solid rgba(107,198,248,.28)}
.card-comments h3{margin:0 0 8px;color:#405fa1;font-size:1.05rem}
.card-comments-status,.card-comments-empty,.card-comments-signin{margin:0 0 10px;color:#67708b;font-size:.88rem}
.card-comments-list{display:grid;gap:10px;margin-bottom:12px;max-height:220px;overflow:auto}
.card-comment{padding:10px 12px;border:1px solid rgba(107,198,248,.25);border-radius:12px;background:rgba(255,255,255,.9)}
.card-comment-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}
.card-comment-head a{color:#405fa1;text-decoration:none;font-weight:850}
.card-comment-head span{color:#7a89ad;font-size:.78rem}
.card-comment p{margin:0;color:#405fa1;line-height:1.4}
.card-comment-delete{margin-left:auto;border:0;background:transparent;color:#9c4677;font:inherit;font-weight:800;cursor:pointer}
.card-comments-form textarea{width:100%;min-height:64px;padding:10px 12px;border:1px solid rgba(107,198,248,.35);border-radius:12px;resize:vertical;font:inherit}
.card-comments-form-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;color:#7a89ad;font-size:.82rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Star Bits currency icon */
.star-bit-icon{
  width:1.15em;
  height:1.15em;
  max-width:36px;
  max-height:36px;
  aspect-ratio:1 / 1;
  object-fit:contain;
  object-position:center;
  display:inline-block;
  vertical-align:-0.22em;
  flex:0 0 auto;
  image-rendering:auto;
  border-radius:0;
  background:transparent;
}
.star-bit-icon--xs{width:14px!important;height:14px!important;max-width:14px!important;max-height:14px!important}
.star-bit-icon--sm{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important}
.star-bit-icon--md{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important}
.star-bit-icon--lg{width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important}
.star-bit-icon--xl{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important}
.star-bit-amount{
  display:inline-flex;
  align-items:center;
  gap:.28em;
  white-space:nowrap;
  font-weight:inherit;
}
.star-bit-amount .star-bit-icon{vertical-align:middle}

/* Discourage casual image save / drag-off (not DRM — DevTools still works). */
img, picture, svg, canvas, video{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}
img, picture img{
  pointer-events:auto;
}