.cq-scope{
    --page:#979797;
    --card-w:260px;
    --card-h:374px;
    --rail-w:37px;
    --radius:18px;
    --gap:22px;
    --ease:cubic-bezier(.22,.78,.24,1);

    /* Assets reais — o FTP mostra /lab.metablox.com.br/index/assets/story,
       mas /index é o document root do subdomínio; na web o caminho público é /assets/story */
    --asset-barcode:url('https://lab.metablox.com.br/assets/story/barcode.png');
    --asset-shiny-bg:url('https://lab.metablox.com.br/assets/story/bg_shiny.png');
    --asset-coin:url('https://lab.metablox.com.br/assets/story/icon_coin.png');
    --asset-shiny-icon:url('https://lab.metablox.com.br/assets/story/icon_shiny.png');
    --asset-logo:url('https://lab.metablox.com.br/assets/story/logo_metablox_branca_mini.png');
  }
  .cq-curiosity-card{
    --rail-top:#ff2f86;
    --rail-bottom:#14d7ec;
    --rarity-color:#070707;
    --card-image:none;

    position:relative;
    width:var(--card-w);
    height:var(--card-h);
    border-radius:var(--radius);
    overflow:hidden;
    background:#111;
    isolation:isolate;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 0 1px rgba(0,0,0,.03);
    transform:translateZ(0);
    transition:transform .34s var(--ease), box-shadow .34s var(--ease);
  }


  .cq-curiosity-card:hover{
    transform:translateY(-4px) scale(1.015);
    box-shadow:0 14px 28px rgba(0,0,0,.16);
  }


  /* ÁREA DA IMAGEM -------------------------------------------------
     A imagem real de cada curiosidade entra neste bloco via:
     style="--card-image:url('caminho-da-imagem.cq-jpg')"
     Ela ocupa tudo, exceto a faixa lateral de raridade. */
  .cq-card-art{
    position:absolute;
    inset:0 var(--rail-w) 0 0;
    overflow:hidden;
    background:#111;
  }


  .cq-card-art::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--card-image);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:scale(1.001);
  }


  /* Degradê permanente de leitura no bottom da imagem.
     Fica ENTRE a imagem e os textos. */
  .cq-card-art::after{
    content:"";
    position:absolute;
    inset:28% 0 0;
    background:linear-gradient(
      to bottom,
      rgba(var(--cq-gradient-rgb,8,8,8),0) 0%,
      rgba(var(--cq-gradient-rgb,8,8,8),.05) 18%,
      rgba(var(--cq-gradient-rgb,8,8,8),.28) 39%,
      rgba(var(--cq-gradient-rgb,8,8,8),.67) 67%,
      rgba(var(--cq-gradient-rgb,8,8,8),.94) 88%,
      rgba(var(--cq-gradient-rgb,8,8,8),.99) 100%
    );
    pointer-events:none;
  }


  .cq-card-copy{
    position:absolute;
    z-index:4;
    left:20px;
    right:calc(var(--rail-w) + 14px);
    bottom:18px;
    text-shadow:0 1px 2px rgba(0,0,0,.32);
  }


  .cq-card-title{
    margin:0 0 7px;
    max-width:190px;
    color:#fff;
    font-size:16px;
    line-height:1.04;
    font-weight:800;
    letter-spacing:-.035em;
  }


  .cq-card-description{
    margin:0;
    max-width:190px;
    color:#fff;
    font-size:8px;
    line-height:1.23;
    font-weight:600;
    letter-spacing:-.01em;
  }


  /* FAIXA LATERAL -------------------------------------------------- */
  .cq-card-rail{
    position:absolute;
    z-index:7;
    top:0;
    right:0;
    bottom:0;
    width:var(--rail-w);
    background:linear-gradient(180deg,var(--rail-top) 0%,var(--rail-top) 42%,var(--rail-bottom) 100%);
    color:var(--rarity-color);
  }


  /* Os PNGs da lateral já foram exportados na orientação correta.
     Por isso não há rotate() nem width/height forçados: usamos o tamanho
     intrínseco do próprio arquivo e apenas centralizamos a imagem na faixa. */
  .cq-metablox-mini{
    position:absolute;
    top:8px;
    left:50%;
    max-width:20px;
    max-height:36px;
    width:auto;
    height:auto;
    object-fit:contain;
    transform:translateX(-50%);
    display:block;
  }


  .cq-curiosity-word{
    position:absolute;
    top:50px;
    left:50%;
    transform:translateX(-50%);
    writing-mode:vertical-rl;
    text-orientation:mixed;
    color:#080808;
    font-size:22px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.04em;
  }


  .cq-barcode-img{
    position:absolute;
    top:180px;
    left:50%;
    max-width:22px;
    max-height:64px;
    width:auto;
    height:auto;
    object-fit:contain;
    transform:translateX(-50%);
    display:block;
  }


  .cq-rarity-name{
    position:absolute;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
    writing-mode:vertical-rl;
    text-orientation:mixed;
    color:var(--rarity-color);
    font-size:10.5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:lowercase;
  }


  .cq-rarity-icon{
    position:absolute;
    left:50%;
    bottom:8px;
    max-width:26px;
    max-height:26px;
    width:auto;
    height:auto;
    object-fit:contain;
    transform:translateX(-50%);
    display:block;
  }


  /* RARIDADES ------------------------------------------------------ */
  .cq-common{--rail-top:#ff2a81;--rail-bottom:#10d8e8}

  .cq-uncommon{--rail-top:#ff154d;--rail-bottom:#ff35b7}

  .cq-rare{--rail-top:#ff6900;--rail-bottom:#ffd41b}

  .cq-epic{--rail-top:#7a00ff;--rail-bottom:#2546ff}

  .cq-legendary{--rail-top:#83e800;--rail-bottom:#19ef9e}

  .cq-mythic{--rail-top:#a51005;--rail-bottom:#ff0500}


  /* SHINY ----------------------------------------------------------
     O PNG bg_shiny é a pele holográfica inteira da carta. */
  .cq-curiosity-card.cq-shiny{
    --rail-w:42px;
    padding:7px;
    background-image:var(--asset-shiny-bg);
    /* O PNG holográfico já é o frame pronto: mostramos o arquivo inteiro, sem crop. */
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
    box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.12);
  }


  .cq-shiny .cq-card-art{
    inset:7px calc(var(--rail-w) + 7px) 7px 7px;
    border-radius:12px 0 0 12px;
    background:#111;
  }


  .cq-shiny .cq-card-rail{
    top:7px;
    right:7px;
    bottom:7px;
    width:var(--rail-w);
    background:transparent;
  }


  .cq-shiny .cq-metablox-mini{top:5px;max-width:18px;max-height:34px;width:auto;height:auto}

  .cq-shiny .cq-curiosity-word{
    top:49px;
    color:#fff;
    text-shadow:0 0 10px rgba(52,0,255,.25);
  }

  .cq-shiny .cq-rarity-name{
    bottom:38px;
    color:#5c17ff;
    font-size:11px;
    font-weight:900;
  }

  .cq-shiny .cq-card-copy{
    left:26px;
    right:calc(var(--rail-w) + 18px);
    bottom:24px;
  }

  .cq-shiny .cq-rarity-icon{bottom:7px;max-width:22px;max-height:22px;width:auto;height:auto}

.cq-modal-shell{
  position:relative;
  width:min(980px,94vw);
  min-height:610px;
  display:grid;
  grid-template-columns:minmax(430px,1.06fr) minmax(320px,.94fr);
  align-items:center;
  gap:34px;
}
.cq-card-zone{
  position:relative;
  min-height:610px;
  display:grid;
  place-items:center;
  perspective:1200px;
}
.cq-rays{
  position:absolute;
  width:min(650px,66vw);
  aspect-ratio:1;
  background-image:var(--asset-rays);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.68;
  filter:drop-shadow(0 0 36px rgba(0,112,82,.14));
  animation:rays-spin 32s linear infinite;
  pointer-events:none;
  will-change:transform;
}
.cq-card-stage{
  position:relative;
  z-index:2;
  width:var(--card-w);
  height:var(--card-h);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .18s var(--ease);
  cursor:default;
}
.cq-card-shadow{
  position:absolute;
  left:14%; right:10%;
  bottom:-24px;
  height:54px;
  background:rgba(0,0,0,.68);
  filter:blur(22px);
  border-radius:50%;
  transform:translateZ(-60px) rotateX(82deg);
  pointer-events:none;
}
.cq-card-glare{
  position:absolute;
  inset:-20%;
  z-index:20;
  pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.23), rgba(255,255,255,.05) 18%, transparent 43%);
  mix-blend-mode:screen;
  opacity:.34;
  transform:translateZ(48px);
  transition:opacity .2s ease;
}
.cq-info-zone{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.cq-info-card{
  width:100%;
  min-height:350px;
  background:#141414;
  border:1px solid rgba(255,255,255,.025);
  border-radius:18px;
  padding:26px 26px 28px;
  box-shadow:0 20px 55px rgba(0,0,0,.24);
}
.cq-info-title{
  margin:0;
  color:#7a16ff;
  font-size:28px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.04em;
}
.cq-info-date{
  display:block;
  margin-top:2px;
  color:#4b4b4b;
  font-size:13px;
  font-weight:600;
}
.cq-info-text{
  margin:34px 0 16px;
  color:#fff;
  font-size:15px;
  line-height:1.36;
  font-weight:500;
}
.cq-info-link{
  color:#00a8ff;
  font-size:14px;
  font-weight:600;
  text-underline-offset:3px;
}
.cq-collect-btn{
  appearance:none;
  border:0;
  min-width:180px;
  min-height:42px;
  padding:0 26px;
  border-radius:10px;
  background:var(--green);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(0,169,111,.13);
  transition:transform .18s var(--ease), background .18s ease, box-shadow .18s ease;
}
.cq-collect-btn:hover{transform:translateY(-2px);background:var(--green-hover);box-shadow:0 16px 32px rgba(0,169,111,.20)}
.cq-collect-btn.cq-is-collected{background:#343434;color:#a5a5a5;box-shadow:none;cursor:default}
.cq-collect-btn.cq-is-collected:hover{transform:none;background:#343434}
.cq-close-btn{
  position:absolute;
  top:78px;
  right:-30px;
  z-index:8;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#ececec;
  color:#111;
  font-size:25px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .18s var(--ease), background .18s ease;
}
.cq-close-btn:hover{transform:scale(1.08) rotate(4deg);background:#fff}
.cq-modal-shell{
    width:min(560px,96vw);
    grid-template-columns:1fr;
    gap:18px;
    padding:38px 0 50px;
  }
.cq-card-zone{min-height:530px}
.cq-rays{width:min(560px,92vw)}
.cq-info-zone{width:min(430px,92vw);justify-self:center}
.cq-close-btn{top:16px;right:6px}
.cq-card-zone{min-height:460px}
.cq-info-card{min-height:0;padding:22px}
.cq-info-title{font-size:24px}
.cq-info-text{font-size:14px;margin-top:26px}
.cq-rays{animation:none}
/* Integration with SuperLive; card artwork and rarity rails above are from deck_cards_OK.html. */
.cq-scope{--asset-rays:url('/assets/story/bg_raios_card.png');font-family:var(--superlive-font);color:#fff}
.cq-scope *{box-sizing:border-box}
#cqStories{width:100%;min-width:0;margin:4px 0 28px}
.cq-stories-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font-size:12px;padding:0 4px}
.cq-stories-heading span{color:#9296a4;font-size:11px}
.cq-story-row{display:flex;gap:12px;align-items:center;overflow-x:auto;overflow-y:hidden;padding:16px 4px 12px;scrollbar-width:thin;scrollbar-color:#454252 transparent;overscroll-behavior-x:contain;min-height:178px}
.cq-story{position:relative;flex:0 0 110px;width:110px;height:156px;padding:0;border:1px solid #ffffff18;border-radius:16px;overflow:hidden;background:#111;cursor:pointer;transition:transform .2s,filter .2s;box-shadow:0 6px 16px #0004}
.cq-story:hover,.cq-story:focus-visible{transform:translateY(-4px) scale(1.035);outline:2px solid #8655ff}
.cq-story img{width:100%;height:100%;object-fit:cover;display:block}
.cq-story.cq-expired > img{filter:grayscale(1) brightness(.4);opacity:.8}
.cq-owned-mark{position:absolute;bottom:7px;right:7px;background:#08a96f;color:white;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
.cq-empty,.cq-status{color:#a8acb8;font-size:13px;line-height:1.6}
.cq-nav svg{width:26px;height:26px}
.cq-inventory{display:block!important;min-height:0;flex:1;overflow:auto}
.cq-inventory-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cq-section-label{font-size:12px;color:#d4d4dd;margin:30px 0 16px}
.cq-card-mini{display:block;position:relative;width:100%;aspect-ratio:260/374;padding:0;background:none;border:0;border-radius:12px;cursor:pointer;text-align:left;overflow:hidden;transition:filter .2s}
.cq-card-mini:hover{filter:brightness(1.1)}
.cq-card-mini:focus-visible{outline:2px solid #8d64ff;outline-offset:3px}
.cq-card-mini .cq-curiosity-card{width:260px;height:374px;transform:scale(var(--cq-scale,.65));transform-origin:top left}
.cq-card-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cq-card-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cq-modal{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:26px;border:0;background:rgba(0,0,0,.76);overflow:auto;place-items:center;--card-w:320px;--card-h:462px;--rail-w:52px;--radius:24px}
.cq-modal[open]{display:grid}
.cq-modal::backdrop,.cq-creator::backdrop{background:rgba(0,0,0,.25)}
.cq-modal-shell{position:relative;width:min(980px,100%);min-height:0;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;gap:34px;margin:auto}
.cq-card-zone{min-height:0;height:min(610px,calc(100dvh - 60px));overflow:visible}
.cq-card-stage{width:var(--card-w);height:var(--card-h);transform:rotateZ(-4deg)}
.cq-modal .cq-curiosity-card{--rail-w:52px;width:100%;height:100%;border-radius:24px}
.cq-modal .cq-card-title{font-size:19px;max-width:none}
.cq-modal .cq-card-description{font-size:9px;max-width:none}
.cq-rays{width:min(600px,55vw);animation:cq-rays-spin 32s linear infinite}
@keyframes cq-rays-spin{to{transform:rotate(360deg)}}
.cq-info-zone{width:100%;gap:18px;display:flex;flex-direction:column;align-items:center}
.cq-info-card{width:100%;min-height:300px;padding:26px;border-radius:18px;background:#141414;overflow-wrap:anywhere}
.cq-info-title{font-size:28px;line-height:1.12;margin:0;color:#9857ff}
.cq-info-date{color:#92929e;font-size:12px;display:block;margin-top:8px}
.cq-info-text{font-size:15px;line-height:1.5;white-space:pre-wrap;margin:26px 0 0;max-height:45dvh;overflow:auto}
.cq-info-link{color:#27baff;text-decoration:underline}
.cq-collect-btn{min-height:42px;background:#08a96f;color:#fff;border:0;border-radius:10px;padding:12px 24px;font-weight:800;cursor:pointer}
.cq-collect-btn:hover:not(:disabled){background:#11bd7e;transform:translateY(-2px)}
.cq-collect-btn:disabled{background:#343434;color:#bcbcbc;cursor:default;transform:none}
.cq-close-btn{position:absolute;right:0;top:0;width:32px;height:32px;border:0;border-radius:50%;background:#eee;color:#111;font-size:25px;cursor:pointer;z-index:10}
.cq-more{border:1px solid #414551;border-radius:8px;background:#252934;color:white;padding:10px 18px;margin-top:20px;cursor:pointer}
.cq-creator{background:#171921;color:#fff;border:1px solid #414553;border-radius:16px;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:24px;overflow:auto}
.cq-creator label{display:grid;gap:6px;margin:14px 0;font-size:13px;font-weight:700}
.cq-creator input,.cq-creator select,.cq-creator textarea{width:100%;background:#242832;color:#fff;border:1px solid #444a59;border-radius:8px;padding:10px;font:inherit}
.cq-creator p{font-size:12px;line-height:1.5;color:#adb3c3}
.cq-create-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.cq-create-head h2{font-size:22px;margin:0}
.cq-create-head button{background:none;border:0;color:white;font-size:26px;cursor:pointer}
.cq-creator [data-error]{color:#ffb9c9}
@media(max-width:1100px){.cq-inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:840px){.cq-modal-shell{grid-template-columns:1fr;max-width:500px;gap:20px;padding-top:30px}.cq-card-zone{height:470px}.cq-rays{width:min(540px,90vw)}.cq-modal{padding:18px}.cq-info-card{min-height:0}.cq-info-text{max-height:none}.cq-inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:841px) and (max-height:650px){.cq-modal{--card-w:260px;--card-h:375px}.cq-info-card{min-height:0;padding:20px}.cq-info-text{margin-top:16px;max-height:35dvh}}
@media(max-width:480px){.cq-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cq-modal{--card-w:260px;--card-h:375px}.cq-card-zone{height:400px}.cq-stories-heading span{display:none}.cq-inventory{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.cq-rays{animation:none}.cq-card-stage,.cq-story,.cq-curiosity-card{transition:none}}

.cq-inventory-cell{min-width:0}.cq-inventory-cell .cq-card-mini{width:100%}.cq-manage-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cq-manage-actions .cq-more{margin:8px 0}.cq-delete{color:#ff6688!important}

.cq-creator input[type=color]{width:84px;height:42px;padding:4px;cursor:pointer}

.cq-empty-slot{box-sizing:border-box;aspect-ratio:260/374;width:100%;min-width:0;border:2px dashed #393b43;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#444650;font-size:clamp(32px,5vw,68px);font-weight:800;user-select:none}

.cq-stories-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cq-inventory-link{appearance:none;background:none;border:0;padding:4px 0;color:#a9adb8;font:inherit;font-size:11px;cursor:pointer}.cq-inventory-link:hover{color:#d7dae2;text-decoration:underline}.cq-inventory-link:focus-visible{outline:2px solid #a9adb8;outline-offset:3px;border-radius:3px}

.cq-category-label{font-weight:800;text-transform:uppercase;color:var(--rail-top,#14d7ec)}.cq-category-label.cq-mythic{color:var(--rail-bottom)}.cq-category-label.cq-shiny{color:#14d7ec}

.cq-card-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px;margin-top:7px}.cq-card-actions .cq-action-icon{box-sizing:border-box;display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;min-width:0;padding:6px;margin:0;border:1px solid #ffffff20;border-radius:7px;background:#242630;color:#d9dce5;cursor:pointer}.cq-action-icon svg{width:16px;height:16px}.cq-card-actions .cq-action-delete{color:#ff607c}.cq-card-actions .cq-action-repost{color:#47d6c2}.cq-action-icon:hover{filter:brightness(1.3)}.cq-action-icon:focus-visible{outline:2px solid #a9a0ff;outline-offset:2px}.cq-action-icon:disabled{opacity:.5;cursor:wait}

.cq-category-label.cq-shiny{display:inline-block;padding:0;box-shadow:none;background:none;color:#63e8ff}
@supports ((background-clip:text) or (-webkit-background-clip:text)){.cq-category-label.cq-shiny{background-image:linear-gradient(90deg,#ff75bb,#ffe477,#79efaf,#63e8ff,#bf9aff,#ff75bb);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:cq-shiny-label-rainbow 4s linear infinite}}
@keyframes cq-shiny-label-rainbow{from{background-position:0% 50%}to{background-position:200% 50%}}
@media(prefers-reduced-motion:reduce){.cq-category-label.cq-shiny{animation:none}}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
.cq-modal-shiny .cq-info-title{background-image:linear-gradient(90deg,#ff75bb,#ffe477,#79efaf,#63e8ff,#bf9aff,#ff75bb);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:cq-shiny-label-rainbow 4s linear infinite}
}
.cq-modal-shiny .cq-collect-btn:not(:disabled){background-image:linear-gradient(90deg,#ff75bb,#ffe477,#79efaf,#63e8ff,#bf9aff,#ff75bb);background-size:200% 100%;color:#15151c;animation:cq-shiny-label-rainbow 4s linear infinite}
@media(prefers-reduced-motion:reduce){.cq-modal-shiny .cq-info-title,.cq-modal-shiny .cq-collect-btn:not(:disabled){animation:none}}