/* Current JollyBeast identity. Original PNGs are displayed without recoloring. */
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
.announcement { background: var(--coral); color: var(--ink); font-weight: 900; }
.announcement-note { position: absolute; right: 40px; font-size: 9px; letter-spacing: .12em; }
.site-header { border-bottom: 2px solid var(--ink); }
.brand { background: var(--coral); padding: 5px 8px; gap: 7px; border-radius: 13px; transform: rotate(-1.5deg); }
.brand-avatar { display: block; width: 56px; height: 56px; border-radius: 10px; }
.official-wordmark { display: block; position: relative; width: 176px; height: 60px; overflow: hidden; }
.official-wordmark img { position: absolute; width: 806px; max-width: none; height: auto; left: -208px; top: -198px; }
.header-inner nav { gap: 17px; }
.header-inner nav a { padding: 10px 9px; border-radius: 9px; }
.header-inner nav a:hover { background: var(--blush); transform: rotate(-3deg); }
.button { border-width: 2px; border-radius: 13px; box-shadow: 4px 4px 0 var(--ink); }
.button:hover { transform: translate(-2px,-2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--ink); }
.button:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.hero { position: relative; }
.hero .eyebrow { color: var(--coral-ink); }
h1 { font-family: "Arial Black", Arial, sans-serif; font-size: clamp(75px,6.8vw,100px); line-height: 1.02; letter-spacing: -.065em; }
h1 > span { color: var(--coral); position: relative; }
h1 > span::after { content: ""; position: absolute; left: 7px; right: 5px; bottom: -8px; height: 9px; border-bottom: 3px dashed var(--coral); border-radius: 50%; transform: rotate(-2deg); }
.hero-description { margin-top: 34px; }
.hero-art { border-width: 2px; border-radius: 19px; padding: 13px 13px 0; box-shadow: 9px 10px 0 var(--ink); animation: card-float 7s ease-in-out infinite; }
.hero-art > .brand-hero-image { height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--coral); border-radius: 10px; border: 0; }
.art-label { font-size: 8px; margin: 3px 3px 13px; }
.hero-art figcaption { padding-block: 20px; }
.hero-art figcaption > span { margin-left: 78px; font-size: 10px; }
.hero-art figcaption a { font-size: 7px; }
.brand-orbit { background: var(--blush); border: 2px dashed var(--coral); }
.brand-orbit::after { border-color: var(--coral); }
.mascot-sticker { padding: 8px; height: 153px; width: 137px; border: 3px solid var(--white); outline: 2px solid var(--ink); border-radius: 20px; background: var(--coral); box-shadow: 5px 6px 0 var(--ink); left: -17px; bottom: 9px; }
.mascot-sticker > img { display: block; width: 106px; height: 106px; border-radius: 11px; }
.mascot-sticker > span:last-child { font-size: 7px; color: var(--ink); letter-spacing: .045em; margin-top: 11px; }
.spark-one { color: var(--coral-ink); }
.spark-two { display: none; }
.visual-caption { bottom: 17px; left: 156px; }
.lucky-stamp { position: absolute; right: -1px; bottom: -1px; border: 2px solid var(--ink); border-radius: 50%; width: 95px; height: 95px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .02em; line-height: 1.1; background: var(--coral); box-shadow: 3px 4px 0 var(--ink); transform: rotate(13deg); }
.collector-strip { border-block: 2px solid var(--ink); transform: rotate(-.65deg); }
.collector-strip i { color: var(--coral); }
.shop-section { padding-top: 92px; }
.shop-panel { border-width: 2px; border-radius: 24px; box-shadow: 5px 6px 0 var(--ink); min-height: 313px; }
.ebay-panel { transform: rotate(-1deg); }
.social-panel { transform: rotate(1deg); }
.shop-panel:hover { transform: rotate(0) translateY(-5px); box-shadow: 7px 10px 0 var(--coral); }
.panel-index { letter-spacing: .1em; }
.round-arrow { border-width: 2px; background: var(--coral); color: var(--ink); }
.social-flower { color: var(--coral); }
.sell-section { position: relative; border-block: 2px solid var(--ink); background: var(--blush); }
.sell-form { border-width: 2px; border-radius: 24px; box-shadow: 7px 8px 0 var(--ink); transform: rotate(1deg); }
.form-heading h3, h2, .shop-panel h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: 900; }
input, textarea { border-color: #cdb9b8; border-radius: 10px; background: var(--white); font-size: 14px; }
.form-help { font-size: 11px; }
.copy-inquiry { margin-top: 12px; background: var(--white); color: var(--ink); border: 1px solid var(--ink); border-radius: 7px; padding: 8px 11px; font-size: 11px; }












.questions { border-top: 2px solid var(--ink); }
summary { padding-block: 24px; }
summary::after { background: var(--blush); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-size: 22px; }
details { scroll-margin-top: 120px; }
.contact-section { border-block-width: 2px; background: var(--coral); }
.contact-spark { color: #ce5145; }
.footer-brand { transform: rotate(-2deg); }
.footer-top { gap: 45px; }
.footer-help { display: flex; gap: 25px; font-size: 11px; padding-bottom: 25px; }
.footer-help a:hover { text-decoration: underline; }
@keyframes card-float { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(-3.5deg); } }
@media (min-width:1600px) { .hero-art > .brand-hero-image { height: auto; } }
@media (max-width:1150px) {
  .header-inner { gap: 20px; }
  .header-inner nav { gap: 5px; }
  .header-inner nav a { padding-inline: 7px; }
  .brand-avatar { width: 46px; height: 46px; }
  .official-wordmark { width: 151px; height: 52px; }
  .official-wordmark img { width: 691px; left: -178px; top: -170px; }
  .hero-art > .brand-hero-image { height: auto; }
  .hero-art figcaption > span { margin-left: 63px; font-size: 9px; }
  .lucky-stamp { width: 78px; height: 78px; font-size: 10px; }
  .visual-caption { font-size: 10px; left: 148px; }
  .footer-top { gap: 30px; }
}
@media (max-width:850px) {
  
  .hero-art > .brand-hero-image { height: auto; }
  .hero-art figcaption > span { margin-left: 45px; max-width: 95px; font-size: 8px; }
  .hero-art figcaption a { font-size: 6px; }
  .hero-art figcaption { gap: 5px; }
  .mascot-sticker { bottom: -8px; }
  .lucky-stamp { width: 68px; height: 68px; font-size: 9px; right: -5px; bottom: -11px; }
  .visual-caption { left: 115px; bottom: 9px; font-size: 9px; }
  .shop-section { padding-top: 67px; }
}
@media (max-width:650px) {
  
  
  .announcement { justify-content: center; font-size: 9px; }
  .announcement-note { display: none; }
  .brand { padding: 4px 6px; gap: 5px; border-radius: 10px; }
  .brand-avatar { width: 42px; height: 42px; }
  .official-wordmark { width: 132px; height: 44px; }
  .official-wordmark img { width: 604.5px; left: -156px; top: -149px; }
  .menu-toggle { border: 2px solid var(--ink); border-radius: 10px; min-height: 44px; background: var(--white); }
  .header-inner nav { border-bottom-width: 2px; }
  .header-inner nav a { padding: 14px 10px; }
  h1 { font-size: clamp(64px,17.5vw,85px); }
  .hero-description { margin-top: 30px; }
  .hero-visual { height: 335px; margin-top: 12px; }
  .hero-art > .brand-hero-image { height: auto; }
  .hero-art figcaption { padding-block: 17px; }
  .hero-art figcaption > span { margin-left: 52px; font-size: 8px; max-width: 100px; }
  .hero-art figcaption a { font-size: 6px; }
  .art-label { font-size: 6px; margin-bottom: 8px; }
  .brand-orbit { width: 280px; height: 280px; }
  .mascot-sticker { left: -10px; bottom: -1px; }
  .visual-caption { left: 111px; bottom: 11px; font-size: 8px; }
  .lucky-stamp { right: -8px; bottom: -10px; width: 65px; height: 65px; font-size: 8px; }
  .collector-strip { transform: rotate(-1deg); }
  .shop-section { padding-top: 57px; }
  .shop-options { gap: 25px; }
  .shop-panel { min-height: 285px; }
  .sell-form { transform: none; padding: 22px; }
  input, textarea { font-size: 16px; }
  
  
  
  
  
  .footer-top { gap: 27px; }
  .footer-help { gap: 20px; flex-wrap: wrap; }
}
@media (max-width:370px) {
  .hero-actions { gap: 15px; }
  .hero-art figcaption > span { visibility: visible; max-width: 75px; margin-left: 25px; font-size: 7px; }
  .visual-caption { display: none; }
  .hero-visual { height: 315px; }
  .brand-avatar { width: 37px; height: 37px; }
  .official-wordmark { width: 118px; }
  .official-wordmark img { width: 552px; left: -143px; top: -135px; }
}