/* Keep the artwork and its shade inside one solid-edged rounded frame. */
.hero-art{position:absolute;inset:0;z-index:-2;background-position:center;background-repeat:no-repeat;background-size:cover;pointer-events:none}
.storefront .hero-image-only::before{display:none}
.hero-image-link{position:absolute;inset:0;z-index:0}
.hero-image-link:focus-visible{outline-offset:-4px}
.slide-controls{z-index:2}
.slide-options{display:grid;gap:8px;padding:12px 16px;border:1px solid #ffffff28;border-radius:10px}
.slide-options label.check{margin:0}
#campaign-corner{width:min(clamp(190px,19vw,270px),50dvh)}
#campaign-corner .campaign-x{width:30px;height:30px}
@media(max-width:640px){#campaign-corner{width:min(clamp(124px,35vw,170px),36dvh)}}
@keyframes oai-banner-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes oai-slide-art{from{opacity:.6;scale:1.025}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:no-preference){
  .hero-art{animation:oai-slide-art .7s cubic-bezier(.16,1,.3,1) both}
  #campaign-corner:not(:empty){animation:oai-banner-in .42s ease-out both}
  dialog[open] .listrow,.editor-grid>.editor-section,.cart-total,.filters .chip{animation:oai-entrance .28s ease-out backwards}
  .filters .chip:nth-child(2),dialog[open] .listrow:nth-child(2){animation-delay:45ms}
  .filters .chip:nth-child(n+3),dialog[open] .listrow:nth-child(n+3){animation-delay:85ms}
  #toast{animation:oai-banner-in .22s ease-out}.listrow,.navitem,.cover img{transition:background-color .22s,border-color .22s,scale .3s}
  @media(hover:hover){.card:hover .cover img{scale:1.045}.listrow:hover{background-color:#ffffff08}}
}
#campaign-center,#campaign-center .campaign-content{padding:0;border:0;background:transparent;border-radius:0;box-shadow:none}
#campaign-center::backdrop{background:transparent;backdrop-filter:none}
.storefront .oai-hero{border:0;background-origin:border-box;background-clip:border-box;overflow:hidden;isolation:isolate}
.storefront .oai-hero::before{inset:0;border-radius:inherit;background:linear-gradient(90deg,#101316 0%,#101316ee 21%,#10131670 47%,transparent 74%);pointer-events:none}
.storefront .oai-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #414444;pointer-events:none;z-index:1}
.social-links .social-link{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;min-height:33px;border-radius:8px}
.social-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#ffffff15;color:#ffffff}
.social-mark svg{display:block;width:18px;height:18px}
.mark-facebook,.mark-group,.mark-zalo{color:#83b6ff;background:#367bda26}.mark-youtube{color:#ff777e;background:#ed455426}.mark-discord{color:#a8a2ff;background:#7772df25}
.footer-contact{display:inline-flex;align-items:center;gap:5px}.footer-contact .icon{width:14px;height:14px}
.feedback-section{margin:clamp(40px,6vw,86px) 0 28px;padding-top:25px;border-top:1px solid #ffffff22}
.feedback-head,.feedback-controls{display:flex;align-items:center;gap:9px}.feedback-head{justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.feedback-head h2{font-size:clamp(24px,3vw,37px);line-height:1.2;margin:7px 0 0}
.feedback-track{position:relative;display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#777777 transparent;padding-bottom:8px}
.feedback-card{flex:0 0 auto;align-self:center;margin:0;scroll-snap-align:start;max-width:100%;overflow:hidden;border-radius:12px}

.feedback-card button{display:block;width:auto;max-width:100%;padding:0;cursor:zoom-in;background:#181a1c;border:0}.feedback-card img{display:block;width:auto;height:auto;max-width:min(80vw,740px);max-height:clamp(230px,34vw,380px);object-fit:contain}
.feedback-card figcaption{width:0;min-width:100%;box-sizing:border-box;overflow-wrap:anywhere;padding:10px 15px;line-height:1.5;font-size:14px}.feedback-full{display:block;max-width:100%;max-height:75vh;margin:auto;object-fit:contain}
.feedback-controls [hidden]{display:none}
@media(max-width:640px){.storefront .oai-hero::before{background:linear-gradient(90deg,#101316fa,#101316c4 45%,#10131626)}}
@keyframes oai-entrance{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.cart-total{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:18px}.cart-total h2{margin:.3em 0 0}
@keyframes oai-dialog{from{opacity:0;scale:.98}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:no-preference){
  dialog[open]{animation:oai-dialog .2s ease-out}
  #top,.sidebar-content,body:not(.storefront) .lead{animation:oai-entrance .32s ease-out}
  :where(.primary,.secondary,.round,.chip,.store-nav a,.navitem,.feedback-card img,.stream-image img){transition:transform .18s ease-out,background-color .18s,border-color .18s}
  :where(.primary,.secondary,.round,.chip):active{transform:scale(.97)}
  @media(hover:hover){:where(.primary,.secondary,.chip,.store-nav a):hover{transform:translateY(-2px)}.feedback-card button:hover img,.stream-card:hover img{transform:scale(1.025)}}
}
@media(prefers-reduced-motion:no-preference){
  .storefront .lead,.storefront .contact-grid>.panel,.storefront .card,dialog[open]>.section-head{animation:oai-entrance .32s ease-out backwards}
  .storefront .card:nth-child(2),.contact-grid>.panel:nth-child(2){animation-delay:45ms}.storefront .card:nth-child(3){animation-delay:80ms}
  .social-link .icon,.social-mark,.storefront .arrowCircle,.stream-card .yt-play{transition:transform .18s ease-out}
  @media(hover:hover){.social-link:hover .icon,.social-link:focus-visible .icon{transform:translate(2px,-2px)}.social-link:hover .social-mark,.stream-card:hover .yt-play{transform:scale(1.08)}.card:hover .arrowCircle{transform:translate(2px,-2px)}}
}