/* Homepage: Classic & Friendly reference direction. */
.classic-pet{display:block;flex:none;width:57px;height:57px;background-image:url('../images/illustrations/classic-pets-light.webp');background-size:300% 200%;background-repeat:no-repeat;border-radius:7px}
.pet-unicorn{background-position:0 0}.pet-bat-dragon{background-position:50% 0}.pet-penguin{background-position:100% 0}.pet-turtle{background-position:0 100%}.pet-giraffe{background-position:50% 100%}.pet-kangaroo{background-position:100% 100%}
body.classic-home{background:#f7fbff;color:#11164e}
.classic-home>.sky-world{display:none}
.classic-home .site-header{width:min(1120px,calc(100% - 64px));margin-top:24px;padding:12px 20px;border:1px solid #fff;border-radius:16px;box-shadow:0 5px 20px #3a66951a;background:#ffffffed}
.classic-home .brand img{filter:hue-rotate(45deg);width:37px;height:37px}
.classic-home .brand{font-size:14px;color:#11164e}.classic-home .brand small{font-size:10px}
.classic-home .nav a{font-size:12px;padding:9px 11px;color:#202960}
.classic-home .nav a[aria-current=page]{background:#f0edff;color:#5140d8}
.classic-home #main{width:min(1200px,calc(100% - 32px))}
.classic-stage{position:relative;isolation:isolate;padding:0 0 0;margin-top:0}
.classic-stage:before{content:'';position:absolute;z-index:-2;inset:-98px 0 0;border-radius:24px;background:#aee8ff url('../images/backgrounds/classic-village.webp') center center/100% 100% no-repeat;box-shadow:0 10px 40px #27417819}
.classic-home .hero{padding:29px 12px 22px;min-height:152px}
.classic-home .hero h1{max-width:650px;font-size:38px;line-height:1.12;color:#081447;letter-spacing:-.045em;text-shadow:0 2px 0 #ffffff55;margin-bottom:10px}
.classic-home .hero h1 span{display:block;font-size:1em}
.classic-home .hero p{color:#142456;font-size:13px;font-weight:500;max-width:580px;text-shadow:0 1px 3px #fff}
.classic-home .hero .eyebrow,.classic-home .hero .spark{display:none}
.classic-home .calculator{width:min(770px,calc(100% - 64px));margin:0 auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.classic-home .calc-top{margin:0 0 12px;justify-content:center;gap:14px}
.classic-home .calc-top h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.classic-home .saved-dot{font-size:11px;background:#ffffffed;border-radius:20px;padding:3px 12px;color:#434e75}
.classic-home .example-button{border:0;border-radius:20px;background:#ffffffed;color:#5140d8;min-height:28px;padding:3px 12px;font-size:11px;cursor:pointer}
.classic-home .decor-pet{display:none!important}
.classic-home .offers{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:0;align-items:stretch}
.classic-home .offer,.classic-home .offer.theirs{padding:17px 17px 14px;background:#fffffff5;border:1px solid #e2eafc;border-radius:20px;box-shadow:0 8px 22px #53658d20;min-width:0}
.classic-home .offer-heading{justify-content:center;margin-bottom:12px;position:relative}
.classic-home .offer h3,.classic-home .theirs .offer h3{color:#101a58;font-size:15px;font-weight:bold;letter-spacing:-.025em}
.classic-home .offer-icon{display:none}
.classic-home .offer-heading small{position:absolute;right:0;top:-9px;font-size:9px;color:#7a8198}
.classic-home .slots{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(103px,auto);gap:8px;margin-bottom:13px!important}
.classic-home .slot,.classic-home .empty-slot.ghost,.classic-home .theirs .slot{aspect-ratio:auto;height:auto;min-height:103px;background:linear-gradient(145deg,#edf5ff,#f8fbff);border:1px solid #d5e2fb;border-radius:10px;padding:5px 3px;box-shadow:none;overflow:visible;gap:1px}
.classic-home .slot img{width:100%;height:52px;object-fit:contain}
.classic-home .slot strong{font-size:10px;line-height:1.15}
.classic-home .slot .edit{font-size:9px;min-height:22px;padding:2px 0;color:#525280}
.classic-home .slot .price{font-size:10px;line-height:1.2}
.classic-home .slot .remove{min-width:23px;min-height:23px;width:23px;height:23px;right:1px;top:1px;background:#ffffffd9;line-height:1;color:#717997}
.classic-home .empty-slot.add,.classic-home .theirs .empty-slot.add,.classic-home .empty-slot.ghost{background:linear-gradient(145deg,#ebf4ff,#f4f7ff);border:1px solid #cddffc;box-shadow:none;color:#233875;opacity:1}
.classic-home .empty-slot span,.classic-home .empty-slot.add span,.classic-home .empty-slot.ghost span{font-size:28px;font-weight:normal;color:#5664d5;text-shadow:none;line-height:1.2}
.classic-home .empty-slot b,.classic-home .empty-slot.ghost b,.classic-home .empty-slot.add b{display:block;font-size:10px;font-weight:normal;color:#26396f}
.classic-home .empty-slot:hover{background:#dfeaff;border-color:#9bbbf5;transform:translateY(-2px)}
.classic-home .total{justify-content:center;gap:5px;border-top:0;padding-top:1px;color:#182558;font-size:12px;line-height:1.4}
.classic-home .total strong,.classic-home .theirs .total strong{font-size:14px;color:#111953}
.classic-home .trade-mid{align-self:center}.classic-home .trade-word{display:none}
.classic-home .trade-swap{width:45px;height:45px;border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#a38aff,#7250ed);font-size:15px;font-weight:bold;box-shadow:0 4px 12px #7051d646}
.classic-home .result{padding:0 6px;margin-top:-3px;position:relative;z-index:2}
.classic-home .result .badge,.classic-home .result .result-badge{display:inline-block;padding:7px 31px;min-width:145px;background:#ffdf64;color:#11174b;border:2px solid #fff4ae;border-radius:40px;font-size:18px;line-height:1.2;letter-spacing:0;box-shadow:0 4px 10px #ac8d2f1a}
.classic-home .result-badge.win,.classic-home .result-badge.big-win{background:#288c4b!important;border-color:#9ef2b2!important;color:#fff!important}
.classic-home .result-badge.lose,.classic-home .result-badge.big-lose{background:#c93657!important;border-color:#ffc5ce!important;color:#fff!important}
.classic-home .result-stats{margin:7px auto 0;padding:5px 14px;background:#ffffffed;border-radius:12px;width:fit-content;gap:26px;font-size:10px;line-height:1.3}
.classic-home .result-stats strong{font-size:13px}
.classic-home .result p{display:block;width:fit-content;max-width:95%;margin:7px auto 0;background:#ffffffed;border-radius:12px;padding:5px 12px;font-size:10px;line-height:1.5;color:#485371}
.classic-home .actions{border:0;margin:10px 0 0;padding:0;gap:7px}
.classic-home .actions .btn{min-height:34px;padding:6px 12px;font-size:10px;background:#fffffff2;border-color:#dfe5f4;border-radius:9px;box-shadow:0 3px 8px #42605312}
.classic-home .actions .primary{background:#7857ed;color:white;border-color:#7857ed}
.classic-home .data-note{font-size:10px;margin:9px auto 20px;text-align:center;max-width:640px;background:#ffffffeb;padding:4px 10px;border-radius:15px;line-height:1.5;color:#4e5878}
.classic-home .features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:17px 24px;background:linear-gradient(110deg,#ffe6f4,#fff2fa);border:1px solid #fad9ee;border-radius:0 0 23px 23px;box-shadow:0 4px 10px #9f5f7b0b}
.classic-home .feature{padding:0 17px;background:none;box-shadow:none;border:0;border-radius:0;gap:10px}.classic-home .feature+.feature{border-left:1px solid #f1cde2}
.classic-home .feature .feature-icon{background:#ffcce8;color:#d64198;width:38px;height:38px;border-radius:50%;font-size:22px}
.classic-home .feature b{font-size:12px;color:#25315f}.classic-home .feature small{font-size:10px;color:#515b79}
.classic-home .village-sign{position:absolute;right:1.8%;top:130px;width:19%;height:218px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;transform:rotate(-3deg);color:white;font-size:24px;line-height:1.1;font-weight:bold;text-shadow:0 2px 2px #805231;pointer-events:none;z-index:-1}
.classic-home #main>.section{padding-left:40px;padding-right:40px}
@media(min-width:1300px){.classic-home .hero{padding-top:32px;padding-bottom:28px}.classic-home .hero h1{font-size:42px}.classic-home .calculator{width:790px}.classic-home .slots{grid-auto-rows:minmax(112px,auto)}.classic-home .slot{min-height:112px}.classic-home .village-sign{top:145px;height:220px}.classic-home .features{margin-top:32px}}
@media(max-width:1000px){.classic-home .calculator{width:76%}.classic-home .hero h1{font-size:32px;max-width:550px}.classic-home .village-sign{display:none}.classic-home .offer,.classic-home .offer.theirs{padding:14px 11px}.classic-home .feature{padding:0 10px;gap:7px}.classic-home .feature b{font-size:11px}.classic-home .feature small{font-size:9px}}
@media(max-width:720px){.classic-home .site-header{width:calc(100% - 40px);margin-top:18px;padding:10px 12px}.classic-home .site-header .brand{font-size:12px}.classic-home #main{width:calc(100% - 20px)}.classic-stage:before{inset:-88px 0 0;background-size:auto 100%;background-position:center;border-radius:20px}.classic-home .hero{padding:24px 15px 20px;min-height:0}.classic-home .hero h1{font-size:30px;max-width:400px}.classic-home .hero p{font-size:12px;max-width:340px}.classic-home .calculator{width:calc(100% - 36px);max-width:460px}.classic-home .offers{grid-template-columns:1fr;gap:8px}.classic-home .offer,.classic-home .offer.theirs{padding:16px}.classic-home .offer h3{font-size:16px}.classic-home .offer-heading small{font-size:10px;top:0}.classic-home .slots{grid-auto-rows:minmax(96px,auto);gap:8px}.classic-home .slot,.classic-home .empty-slot.ghost{min-height:96px}.classic-home .slot img{height:46px}.classic-home .slot .edit{min-height:25px}.classic-home .slot .remove{min-width:28px;min-height:28px}.classic-home .trade-mid{margin:-4px 0;z-index:2}.classic-home .trade-swap{width:35px;height:35px;font-size:12px;border-width:2px}.classic-home .result{margin-top:10px}.classic-home .actions .btn{flex:1 1 40%;min-height:40px;font-size:11px}.classic-home .data-note{max-width:calc(100% - 32px);font-size:10px;margin-bottom:18px}.classic-home .features{grid-template-columns:1fr 1fr;gap:18px 0;padding:19px 9px}.classic-home .feature{padding:0 10px}.classic-home .feature:nth-child(3){border-left:0}.classic-home .feature .feature-icon{width:32px;height:32px;flex-shrink:0;font-size:19px}.classic-home .feature b{font-size:11px}.classic-home .feature small{font-size:9px}.classic-home #main>.section{padding:0 5px}.classic-home .nav{top:66px}.classic-home .nav a{font-size:14px;padding:12px}.classic-home .hero h1 span{font-size:.95em}}
@media(prefers-reduced-motion:reduce){.classic-home *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ===========================================================
   Hero scene stability
   The artwork keeps its 3:2 proportions and is anchored to the top, so the
   wooden sign never stretches or shifts when the calculator grows taller.
   Below the artwork the ground fades into the page colour, and the sign text
   is positioned against the artwork itself instead of a fixed pixel offset.
   =========================================================== */
.classic-stage{container-type:inline-size}
.classic-stage:before{
  background-color:#f7fbff;
  background-image:url('../images/backgrounds/classic-village.webp');
  background-position:center top;
  background-size:100% auto;
  background-repeat:no-repeat;
}
/* soft fade at the bottom edge of the artwork into the page background */
.classic-stage:after{
  content:'';position:absolute;z-index:-2;left:0;right:0;top:-98px;
  aspect-ratio:1536/1024;pointer-events:none;border-radius:24px;
  background:linear-gradient(to bottom,rgba(247,251,255,0) 86%,rgba(247,251,255,.75) 95%,#f7fbff 100%);
}
/* sign text pinned to the painted board */
.classic-home .village-sign{
  position:absolute;left:0;right:0;top:-98px;width:auto;height:218px;
  height:auto;aspect-ratio:1536/1024;display:block;transform:none;
  color:#fff;font-weight:bold;text-shadow:0 2px 2px #805231,0 1px 0 #a9744a;
  pointer-events:none;z-index:-1;
}
.classic-home .village-sign span{
  position:absolute;left:78.6%;width:20.6%;text-align:center;
  transform:translateY(-50%);line-height:1;letter-spacing:.01em;
  font-size:clamp(11px,2.3vw,30px);
}
@supports (font-size:1cqw){.classic-home .village-sign span{font-size:2.55cqw}}
.classic-home .village-sign span:nth-child(1){top:27.3%}
.classic-home .village-sign span:nth-child(2){top:34.3%}
.classic-home .village-sign span:nth-child(3){top:41.2%}
.classic-home .village-sign span:nth-child(4){top:48%}
@media(max-width:900px){
  .classic-stage:before{background-size:100% auto;background-position:center top}
  .classic-stage:after{top:-88px;border-radius:20px}
  .classic-home .village-sign{top:-88px}
}
/* the sign stays a wide-screen detail, as before */
@media(max-width:1000px){.classic-home .village-sign{display:none}}
/* The sign text stays on its board at every width (the board is always in frame),
   so it scales with the artwork instead of being hidden. */
@media(max-width:1000px){
  .classic-home .village-sign{display:block}
  .classic-home .village-sign span{font-size:clamp(9px,2.55cqw,22px);text-shadow:0 1px 2px #805231}
}
@media(max-width:520px){.classic-home .village-sign{display:none}}