/* Atelier — gothic premium surfaces (overrides flat magenta boxes) */
:root{
  --atelier-ink:#f6ebe8;
  --atelier-fog:#b9a4b0;
  --atelier-magenta:#f07cac;
  --atelier-blood:#9b0d2e;
  --atelier-panel:#160b14;
  --atelier-panel-2:#1f121c;
  --atelier-line:rgba(240,124,172,.18);
  --atelier-line-strong:rgba(240,124,172,.38);
  --atelier-ease:cubic-bezier(.22,.61,.36,1);
}

/* Shared elevated surface */
.atelier-card,
.product-card,
.top-book-card,
.event-card,
.explore-card,
.suggestion-card,
.forum-post,
.news-card,
.gallery-card,
.social-profile-card,
.sidebar-card,
.featured-grid,
.store-visual,
.clue-panel,
.reward-panel,
.oracle-panel,
.oracle-results{
  background:
    linear-gradient(165deg,rgba(240,124,172,.07),transparent 42%),
    radial-gradient(120% 80% at 100% 0%,rgba(155,13,46,.18),transparent 55%),
    linear-gradient(180deg,#1c1019 0%,#12090f 100%) !important;
  border:1px solid var(--atelier-line) !important;
  border-radius:18px !important;
  box-shadow:
    0 1px 0 rgba(255,200,220,.05) inset,
    0 22px 50px rgba(0,0,0,.35) !important;
  overflow:hidden;
  transition:transform .28s var(--atelier-ease), box-shadow .28s var(--atelier-ease), border-color .28s !important;
}
.product-card:hover,
.top-book-card:hover,
.gallery-card:hover,
.explore-card:hover,
.event-card:hover{
  transform:translateY(-4px);
  border-color:var(--atelier-line-strong) !important;
  box-shadow:
    0 1px 0 rgba(255,200,220,.08) inset,
    0 28px 64px rgba(155,13,46,.22) !important;
}

/* Product cards */
.enhanced-product-card .product-art{
  position:relative;
  background:
    radial-gradient(circle at 50% 35%,rgba(240,124,172,.16),transparent 55%),
    #0c060b;
  border-bottom:1px solid var(--atelier-line);
}
.enhanced-product-card .product-image,
.enhanced-product-card .artwork-frame{
  height:300px;display:grid;place-items:center;padding:18px;
}
.enhanced-product-card .artwork-frame img{
  max-height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.45));
}
.product-body{padding:18px 18px 20px}
.product-body .type{
  display:inline-block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--atelier-magenta);font-weight:700;margin-bottom:8px;
}
.product-body h3{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:1.65rem;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em;
}
.product-body .by{color:var(--atelier-fog);font-size:12px;margin-bottom:10px}
.product-copy{
  color:#cbb6c3;font-size:12.5px;line-height:1.65;min-height:3.2em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.price-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:16px 0 14px;padding-top:12px;border-top:1px solid var(--atelier-line);
}
.price-line strong{
  font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:600;color:#ffd0e2;
}
.price-line span{font-size:9px;letter-spacing:.16em;color:#9f8494;text-transform:uppercase}
.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.product-badge{
  border-radius:999px;padding:6px 10px;letter-spacing:.12em;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.view-toggle{
  border-radius:999px;overflow:hidden;border-color:var(--atelier-line-strong);
  background:rgba(10,5,10,.75);backdrop-filter:blur(6px);
}
.view-btn{transition:background .2s,color .2s}
.view-btn.is-active,.view-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,#f28bb5,#c9447a);color:#1a0410;
}

/* Buttons refined */
.primary-btn,.outline-btn,.mystic-button,.mystic-secondary,.accent-button{
  border-radius:999px !important;
  letter-spacing:.08em;
  transition:transform .2s var(--atelier-ease), box-shadow .2s, background .2s, border-color .2s !important;
}
.primary-btn,.mystic-button,.accent-button{
  background:linear-gradient(135deg,#f28bb5 0%,#d24e84 55%,#a83265 100%) !important;
  border:1px solid rgba(255,200,220,.35) !important;
  color:#190810 !important;
  box-shadow:0 10px 28px rgba(210,78,132,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.primary-btn:hover,.mystic-button:hover,.accent-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(210,78,132,.38), inset 0 1px 0 rgba(255,255,255,.3);
  background:linear-gradient(135deg,#ff9ec4,#e05a90) !important;
}
.primary-btn:active,.outline-btn:active{transform:translateY(0) scale(.98)}
.outline-btn,.mystic-secondary,.ghost-button{
  background:rgba(255,45,122,.04) !important;
  border:1px solid var(--atelier-line-strong) !important;
  color:#ffd0e2 !important;
}
.outline-btn:hover,.mystic-secondary:hover,.ghost-button:hover{
  background:rgba(240,124,172,.12) !important;
  border-color:#f07cac !important;
}
.ghost-link{
  border:0;background:none;color:#f0a8c4;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 0;cursor:pointer;
}
.ghost-link:hover{color:#fff}

/* Modal shell */
.modal-root{padding:12px}
.modal{
  background:
    linear-gradient(165deg,rgba(240,124,172,.08),transparent 36%),
    linear-gradient(180deg,#1d111b,#12090f) !important;
  border:1px solid var(--atelier-line-strong) !important;
  border-radius:22px !important;
  padding:28px 28px 32px !important;
  max-height:min(92vh,920px);
  overflow:auto;
  box-shadow:
    0 1px 0 rgba(255,210,230,.06) inset,
    0 40px 100px rgba(0,0,0,.6) !important;
  animation:atelier-in .28s var(--atelier-ease);
}
.modal.wide{max-width:min(980px,96vw)}
.modal-close{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,45,122,.08);border:1px solid var(--atelier-line) !important;
  color:#ffd0e2;display:grid;place-items:center;transition:.2s;
}
.modal-close:hover{background:rgba(240,124,172,.2);transform:rotate(90deg)}
@keyframes atelier-in{from{opacity:.6;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Product sheet */
.product-sheet{
  display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;
}
.product-sheet-media{
  background:
    radial-gradient(circle at 50% 40%,rgba(240,124,172,.18),transparent 60%),
    #0b050a;
  border:1px solid var(--atelier-line);
  border-radius:16px;padding:18px;text-align:center;
}
.product-sheet-media .detail-image,
.product-sheet-media .artwork-frame{
  min-height:360px;display:grid;place-items:center;
}
.product-sheet-media img{
  max-height:380px;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.5));
}
.product-sheet-buy .author{
  color:var(--atelier-fog);letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-bottom:14px;
}
.product-sheet-buy h2{
  font-family:'Italiana','Cormorant Garamond',serif;font-size:clamp(2rem,3.4vw,3rem);
  line-height:1;margin:8px 0 10px;
}
.product-sheet-copy{color:#d2bcc8;line-height:1.75;font-size:14px}
.price-block{
  display:flex;align-items:baseline;gap:12px;margin:18px 0 12px;
  padding:14px 0;border-block:1px solid var(--atelier-line);
}
.price-block strong{
  font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:#ffd5e6;font-weight:600;
}
.price-block span{font-size:10px;letter-spacing:.14em;color:#9f8494;text-transform:uppercase}
.product-sheet-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}
.product-sheet-actions .primary-btn,
.product-sheet-actions .outline-btn{flex:1 1 180px;justify-content:center}
.detail-row span{
  border:1px solid var(--atelier-line);border-radius:999px;padding:8px 12px;
  background:rgba(255,45,122,.05);font-size:10px;letter-spacing:.08em;color:#e8c0d2;
}
.product-sheet-reviews h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;margin:0 0 12px}
.review{
  border:1px solid var(--atelier-line);border-radius:14px;padding:14px 16px;margin:0 0 10px;
  background:rgba(255,255,255,.02);
}
.review-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.review small{color:#f0a8c4}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-form input,.modal-form textarea,.modal-form select,
.shop-controls select,.shop-controls input,
.answer-row input,.oracle-panel input,
.mystic-page input,.mystic-page textarea{
  border-radius:12px !important;
  border-color:var(--atelier-line-strong) !important;
  background:#0d080e !important;
  transition:border-color .2s, box-shadow .2s;
}
.modal-form input:focus,.modal-form textarea:focus,.modal-form select:focus,
.shop-controls select:focus,.shop-controls input:focus{
  border-color:#f07cac !important;
  box-shadow:0 0 0 3px rgba(240,124,172,.15);
}

/* Bag / cart */
.bag-sheet{display:flex;flex-direction:column;gap:12px;min-height:220px}
.bag-head h2{font-family:'Italiana','Cormorant Garamond',serif;font-size:2.3rem;margin:6px 0 4px}
.bag-scroll{
  max-height:min(48vh,420px);overflow:auto;padding-right:4px;
  display:grid;gap:10px;scrollbar-width:thin;scrollbar-color:#7a3d5c transparent;
}
.bag-item{
  display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;
  padding:12px;border-radius:14px;border:1px solid var(--atelier-line);
  background:rgba(255,255,255,.025);
}
.bag-thumb,.bag-thumb-art{
  width:72px;height:88px;border-radius:10px;overflow:hidden;
  background:#0a050a;display:grid;place-items:center;
  border:1px solid var(--atelier-line);
}
.bag-thumb img,.bag-thumb-art img{width:100%;height:100%;object-fit:cover}
.bag-meta strong{display:block;font-size:14px;margin-bottom:4px}
.bag-meta span,.bag-meta em{display:block;color:var(--atelier-fog);font-size:11px;font-style:normal}
.bag-side{text-align:right;display:grid;gap:8px;justify-items:end}
.bag-side b{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:#ffd0e2}
.bag-footer{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--atelier-line);
  display:grid;gap:10px;
}
.bag-total{display:flex;justify-content:space-between;align-items:baseline}
.bag-total span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9f8494}
.bag-total strong{font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:#ffd5e6}
.bag-footer .full{width:100%;justify-content:center}
.bag-empty{text-align:center;padding:36px 12px}
.bag-empty-mark{font-size:42px;color:#f07cac;margin-bottom:10px;opacity:.85}

/* Store hero / filters */
.store-visual{border-radius:22px !important;padding:28px}
.shop-controls{gap:10px;flex-wrap:wrap}
.shop-controls select,.shop-controls input{
  border-radius:999px !important;padding:12px 16px;min-width:0;
}

/* Explore / events / community polish */
.explore-card,.event-card,.suggestion-card,.news-card,.forum-post{padding:22px}
.event-image{border-radius:0 0 0 0}
.explore-symbol{text-shadow:0 0 30px rgba(240,124,172,.35)}

/* Oracle + Libro Maldito panels already targeted above */
.clue-panel,.reward-panel,.oracle-panel,.oracle-results{padding:34px !important}
.mystic-button,.mystic-secondary,.answer-row button{border-radius:999px !important}
.oracle-choice{
  border-radius:14px !important;
  background:rgba(20,10,22,.85) !important;
  border-color:var(--atelier-line) !important;
  transition:transform .2s, border-color .2s, background .2s !important;
}
.oracle-choice:hover,.oracle-choice.selected{
  transform:translateX(3px);
  border-color:#f07cac !important;
  background:rgba(120,40,80,.35) !important;
}
.cursed-book,.cursed-book.unlocked{
  animation:none !important;
  transform:rotate(-4deg) !important;
  border-radius:10px 18px 18px 10px;
}

/* Toast */
.toast{
  border-radius:999px !important;
  letter-spacing:.04em;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}

/* Mobile */
@media (max-width:900px){
  .product-sheet{grid-template-columns:1fr;gap:18px}
  .product-sheet-media .detail-image,
  .product-sheet-media .artwork-frame{min-height:260px}
  .product-sheet-media img{max-height:280px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .form-grid-2{grid-template-columns:1fr}
  .bag-item{grid-template-columns:64px 1fr;grid-template-areas:"thumb meta" "thumb side"}
  .bag-thumb{grid-area:thumb}
  .bag-meta{grid-area:meta}
  .bag-side{grid-area:side;text-align:left;justify-items:start;flex-direction:row;display:flex;gap:16px;align-items:center}
  .modal{padding:22px 18px 26px !important;border-radius:18px !important}
}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr !important}
  .product-actions{grid-template-columns:1fr}
  .bag-scroll{max-height:42vh}
}
@media (prefers-reduced-motion:reduce){
  .modal,.product-card,.atelier-card,.primary-btn,.outline-btn{animation:none!important;transition:none!important}
}

/* —— Immersive scene hero —— */
.scene-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100vh,920px);padding:48px 0 72px;
  display:flex;flex-direction:column;justify-content:center;
}
.scene-layers{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene-library{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center 40%;
  filter:saturate(1.05) contrast(1.05) brightness(.72);
  transform:scale(1.04);
}
.scene-moon{
  position:absolute;right:4%;top:6%;width:min(34vw,340px);height:auto;
  opacity:.9;filter:drop-shadow(0 0 40px rgba(240,124,172,.35));
  mix-blend-mode:screen;
}
.scene-fog{
  position:absolute;inset:-10% -5% -5%;
  background-size:cover;background-position:center bottom;
  opacity:.55;animation:fog-drift 28s ease-in-out infinite alternate;
  mix-blend-mode:soft-light;
}
.scene-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,2,8,.88) 0%,rgba(6,2,8,.55) 42%,rgba(6,2,8,.25) 70%,rgba(6,2,8,.45) 100%),
    linear-gradient(180deg,rgba(6,2,8,.35),transparent 28%,rgba(6,2,8,.75) 100%);
}
@keyframes fog-drift{to{transform:translate3d(-2.5%,1.5%,0) scale(1.05)}}
.scene-layout{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;
}
.scene-copy{
  max-width:34rem;padding:28px 26px;border-radius:22px;
  background:linear-gradient(160deg,rgba(8,3,10,.78),rgba(8,3,10,.42));
  border:1px solid rgba(240,124,172,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.scene-kicker{font-size:10px;letter-spacing:.24em;color:#f07cac;font-weight:700;margin:0 0 12px}
.scene-copy h1{
  font-family:'Italiana','Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(2.8rem,5.4vw,4.8rem);line-height:.95;margin:0 0 16px;
  text-shadow:0 10px 40px rgba(0,0,0,.55);
}
.scene-copy h1 em{color:#f28bb5;font-family:'Cormorant Garamond',serif;font-style:italic}
.scene-copy .lede{color:#e7d5df;line-height:1.75;margin:0 0 22px}
.scene-stage{position:relative;min-height:480px;display:grid;place-items:center}
.grimorio-stack{position:relative;width:min(420px,86%);aspect-ratio:3/4;display:grid;place-items:center}
.grimorio{
  position:absolute;inset:auto;max-width:100%;height:auto;
  filter:drop-shadow(0 28px 50px rgba(0,0,0,.55));
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.grimorio-closed{width:88%;z-index:2;opacity:1;transform:translateY(0) scale(1)}
.grimorio-open{width:108%;z-index:1;opacity:0;transform:translateY(18px) scale(.96)}
.grimorio-page-copy{
  position:absolute;z-index:3;left:18%;right:18%;top:34%;
  text-align:center;opacity:0;transform:translateY(10px);
  transition:opacity .7s .25s, transform .7s .25s;pointer-events:none;
  color:#2a1520;text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.grimorio-page-copy span{display:block;font-size:9px;letter-spacing:.28em;font-weight:800}
.grimorio-page-copy strong{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.2rem);margin:6px 0}
.grimorio-page-copy em{font-size:12px;color:#5a3040}
.scene-hero.is-open .grimorio-closed{opacity:0;transform:translateY(-12px) scale(.94);pointer-events:none}
.scene-hero.is-open .grimorio-open{opacity:1;transform:translateY(0) scale(1)}
.scene-hero.is-open .grimorio-page-copy{opacity:1;transform:none}
.scene-enter{
  margin-top:18px;position:relative;z-index:4;
  border:1px solid rgba(240,124,172,.45);background:rgba(10,4,12,.55);
  color:#ffd0e2;border-radius:999px;padding:12px 18px;font-weight:700;letter-spacing:.08em;
  backdrop-filter:blur(8px);transition:.2s;
}
.scene-enter:hover{background:rgba(240,124,172,.18);transform:translateY(-2px)}
.scene-hero .portal-hint{position:relative;z-index:2;margin-top:28px;align-self:center;color:#e8c0d2;text-decoration:none}

/* Revelacion */
.revelacion-section{background:#0a050a;padding-top:90px;padding-bottom:90px}
.revelacion-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.revelacion-poster{
  display:block;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(240,124,172,.22);
  box-shadow:0 28px 70px rgba(0,0,0,.45);
  background:#12080f;
}
.revelacion-poster img{width:100%;height:auto;display:block}
.revelacion-zoom{
  position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:999px;
  background:rgba(8,3,10,.75);border:1px solid rgba(240,124,172,.35);color:#ffd0e2;
  font-size:10px;letter-spacing:.12em;font-weight:700;
}
.revelacion-copy h2{font-family:'Italiana',serif;font-size:clamp(2.4rem,4vw,3.8rem);margin:10px 0 16px}
.revelacion-lead{font-size:1.15rem;line-height:1.75;color:#f0dde6;max-width:38ch}
.poster-full{width:100%;height:auto;border-radius:12px;margin:12px 0;border:1px solid rgba(240,124,172,.2)}

/* Selective library ambience */
.ambience-library{
  background-image:
    linear-gradient(180deg,rgba(8,3,10,.88),rgba(8,3,10,.92)),
    url('assets/scene/biblioteca-gotica.webp');
  background-size:cover;background-position:center;
}

.sq-player-nudge{
  position:fixed;right:22px;bottom:92px;z-index:140;
  padding:8px 12px;border-radius:999px;font-size:11px;letter-spacing:.04em;
  background:rgba(16,6,14,.88);border:1px solid rgba(240,124,172,.4);color:#ffd0e2;
  opacity:0;pointer-events:none;transition:.25s;
}
.sq-player-nudge.show{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .scene-layout{grid-template-columns:1fr;gap:18px}
  .scene-copy{order:2;padding:20px 18px}
  .scene-stage{order:1;min-height:360px}
  .scene-moon{width:42vw;right:2%;top:2%;opacity:.7}
  .scene-library{filter:saturate(1.05) contrast(1.05) brightness(.55)}
  .grimorio-page-copy{left:14%;right:14%;top:30%}
  .revelacion-grid{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .scene-fog,.grimorio,.grimorio-page-copy{animation:none!important;transition:none!important}
  .scene-hero .grimorio-closed{opacity:0}
  .scene-hero .grimorio-open,.scene-hero .grimorio-page-copy{opacity:1;transform:none}
}
