/* Homepage "Trade Smarter, Play Further!" layout: player card, daily quests, trading journey and rewards.
   Loaded last on the homepage only, on top of home-classic.css. */
.pi{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}

/* ---------- Full-bleed village scene ---------- */
body.classic-home{position:relative;overflow-x:clip;background:transparent}
body.classic-home::before{
  content:'';position:absolute;z-index:-1;left:50%;transform:translateX(-50%);top:0;
  width:min(100%,1680px);aspect-ratio:1536/1024;pointer-events:none;
  background:#8ad8fb url('../images/backgrounds/classic-village.webp') center top/100% auto no-repeat;
  -webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent);
}
/* "Explore · Play · Grow · Together" is written onto the wooden board painted in the artwork (top right),
   so it scales with the scene and never overlaps the cards. */
.scene-sign{position:absolute;z-index:0;top:0;left:50%;transform:translateX(-50%);width:min(100%,1680px);aspect-ratio:1536/1024;pointer-events:none;
  color:#fff;font-family:var(--font-game);letter-spacing:.03em;text-transform:uppercase;line-height:1;text-shadow:0 2px 2px #805231,0 1px 0 #a9744a}
.scene-sign span{position:absolute;left:78.6%;width:20.6%;text-align:center;transform:translateY(-50%);font-size:calc(min(100vw,1680px) * .0235)}
.scene-sign span:nth-child(1){top:27.3%}.scene-sign span:nth-child(2){top:34.3%}.scene-sign span:nth-child(3){top:41.2%}.scene-sign span:nth-child(4){top:48%}
@media(min-width:1681px){
  body.classic-home::before{
    -webkit-mask-image:linear-gradient(#000 84%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(#000 84%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect;
  }
}
.classic-home .classic-stage:before,.classic-home .classic-stage:after{content:none}

/* ---------- Header ---------- */
.classic-home .site-header{width:min(1228px,calc(100% - 40px));margin-top:18px;padding:12px 26px;border-radius:22px;background:#ffffffef;box-shadow:0 10px 28px #2a4f8a1f}
.classic-home .brand{font-family:var(--font-heading);font-size:17px}
.classic-home .brand small{font-size:12px;letter-spacing:.02em;color:#3d4670}
.classic-home .brand img{width:44px;height:44px}
.classic-home .nav{gap:6px}
.classic-home .nav a{font-family:var(--font-heading);font-size:14.5px;font-weight:600;padding:10px 14px;border-radius:12px;color:#141c4f}
.classic-home .nav .icon-btn{width:46px;height:46px;border-radius:13px;background:#f5f2ff;border-color:#e3dcff;margin-left:26px}

/* ---------- Stage grid ---------- */
body.classic-home #main{width:min(1600px,calc(100% - 40px))}
/* Desktop: hero text on top (boards beside it), then the player + quests row, then the calculator.
   Nothing shares a column with the calculator, so the cards can never overlap it. */
.play-stage{
  --side:clamp(190px,16vw,270px);
  display:grid;grid-template-columns:minmax(0,var(--side)) minmax(0,1fr) minmax(0,1fr) minmax(0,var(--side));
  grid-template-areas:"lsign hero hero rsign" "lsign calc calc rsign" "cards cards cards cards";
  grid-template-rows:auto auto auto;column-gap:20px;row-gap:18px;
  padding-top:18px;container-type:normal;
}
.play-hero{grid-area:hero}
.play-left{display:contents}
/* Player card + Daily Quests: one horizontal strip under the calculator. */
.play-right{grid-area:cards;display:flex;flex-wrap:wrap;align-items:stretch;gap:18px;width:100%;min-width:0}
.play-stage .player-card{flex:0 1 340px;min-width:280px}
.play-stage .quest-card{flex:1 1 640px;min-width:0}
.play-stage .sign-left{grid-area:lsign;align-self:start;justify-self:center;margin-top:clamp(120px,11vw,175px)}
.play-stage .sign-right{display:none}
.play-stage>.calculator{grid-area:calc;justify-self:center}

/* ---------- Hero ---------- */
.classic-home .play-hero{position:relative;padding:4px 0 26px;min-height:0;text-align:center}
/* The keyword is the big hero heading; the playful motto sits under it as a tagline. */
body.classic-home .play-hero h1{
  max-width:14ch;margin:0 auto 8px;font-family:var(--font-game);font-weight:400;text-wrap:balance;
  font-size:clamp(32px,3.4vw,52px);line-height:1.08;letter-spacing:0;color:#0d1150;
  text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,0 7px 14px #1c2f7a2e;
}
body.classic-home .play-hero .hero-motto{max-width:none;margin:0 auto 8px;font:400 clamp(20px,1.9vw,28px)/1.2 var(--font-game);letter-spacing:.01em;color:#0d1150;text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,0 4px 10px #1c2f7a26}
.classic-home .play-hero h1 span,.hero-motto span{display:inline}
.play-hero .h1-dark{color:#0d1150}.play-hero .h1-purple{color:#6a35ee}
.classic-home .play-hero p{max-width:560px;margin:0 auto;color:#15204f;font-size:17px;font-weight:600;line-height:1.45;text-shadow:0 0 6px #fff,0 0 2px #fff}
.hero-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.classic-home .hero-pills .saved-dot{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:#ffffffee;color:#39426a;font-size:14px;font-weight:600;box-shadow:0 4px 12px #2a4f8a17}
.classic-home .hero-pills .saved-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:#34c46a}
.classic-home .hero-pills .example-button{min-height:38px;padding:8px 18px;border-radius:999px;background:#ffffffee;color:#5a36e0;font:700 14px/1.2 var(--font-heading);box-shadow:0 4px 12px #2a4f8a17}
.classic-home .hero-pills .example-button:hover{background:#fff;color:#4424c4}
.hero-spark{position:absolute;color:#ffc93c;line-height:1;pointer-events:none;text-shadow:0 2px 0 #f0a400,0 0 10px #fff7}
.hero-spark.s1{left:1%;top:20%;font-size:40px}
.hero-spark.s2{left:4.5%;top:44%;font-size:24px}
.hero-spark.s3{right:1.5%;top:44%;font-size:34px}
.hero-spark.s4{right:.5%;top:22%;font-size:20px}

/* ---------- Player card ---------- */
.player-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av hello" "av lvl";gap:8px 16px;align-items:center;align-content:center;padding:14px 18px;background:#fffffff4;border:1px solid #fff;border-radius:24px;box-shadow:0 12px 30px #2c4a8a24}
.player-avatar{grid-area:av;position:relative;width:80px;height:80px;padding:0;border:4px solid #fff;border-radius:50%;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 50% 30%,#fff2f9,#ffc9e5);box-shadow:0 0 0 3px #c7b3ff,0 6px 14px #6d4fd033;transition:transform .18s ease}
.player-avatar:hover{transform:scale(1.05) rotate(-3deg)}
.player-avatar img{width:100%;height:100%;object-fit:contain;transform:scale(1.18) translateY(6%)}
.player-hello{grid-area:hello;min-width:0}
.player-hello strong{display:block;font:700 18px/1.25 var(--font-heading);color:#11184d}
.player-hello span{display:block;margin-top:3px;font-size:13.5px;font-weight:600;color:#2e3763;line-height:1.35}

.level-row{grid-area:lvl;display:flex;align-items:center;gap:8px;min-width:0;padding:5px 12px 5px 6px;border:1px solid #e3e7f5;border-radius:999px;background:#fff}
.lv-coin{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(#ffd84d,#f5a900);color:#fff;box-shadow:inset 0 -2px 0 #d88a00}
.lv-coin .pi{width:14px;height:14px}
.level-row b{font:700 16px/1 var(--font-heading);color:#11184d;white-space:nowrap}
.xp-bar{flex:1;min-width:40px;height:12px;border-radius:999px;background:#ebe7fb;overflow:hidden}
.xp-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9a7dff,#6a45f0);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.level-row small{font-size:12.5px;font-weight:700;color:#232c5c;white-space:nowrap}

/* ---------- Daily quests ---------- */
.quest-card{scroll-margin-top:120px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 18px;background:#fffffff4;border:1px solid #fff;border-radius:24px;box-shadow:0 12px 30px #2c4a8a24}
.quest-head{display:grid;grid-template-columns:auto auto;grid-template-areas:"star title" "star timer";column-gap:8px;align-items:center;flex:0 0 auto;padding:0 4px 0 0}
.quest-head .quest-star{grid-area:star}.quest-head h2{grid-area:title}.quest-head .quest-timer{grid-area:timer;font-size:12px}
.quest-card .quest-list{flex:1 1 400px;grid-template-columns:repeat(3,minmax(0,1fr))}
.quest-card .quest-bonus{flex:0 1 220px;width:auto;margin-top:0}
@media(min-width:1181px){.quest-card .quest-row>.pi{display:none}.quest-card .quest-label{line-height:1.2}}
.quest-star{width:32px;height:32px;color:#ffc21a;filter:drop-shadow(0 2px 0 #e59a00)}
.quest-star .pi{width:100%;height:100%}
.quest-head h2{flex:1;margin:0;font:700 17px/1.2 var(--font-heading);color:#11184d}
.quest-timer{font-size:13px;font-weight:600;color:#434c72;white-space:nowrap}
.quest-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.quest-row{display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 10px 6px 8px;border:1px solid #e1e8f6;border-radius:14px;background:#fff;color:#1c2452;font-size:14px;font-weight:600;line-height:1.25}
a.quest-row{transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
a.quest-row:hover{border-color:#c9bdf7;background:#faf8ff;text-decoration:none;transform:translateX(2px)}
.quest-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px}
.quest-icon .pi{width:21px;height:21px}
.quest-row.tone-green .quest-icon{background:#e2f8e7;color:#2eb85c}
.quest-row.tone-blue .quest-icon{background:#e3f1ff;color:#2b8ef0}
.quest-row.tone-red .quest-icon{background:#ffe6ea;color:#e8475f}
.quest-label{flex:1;min-width:0}
.quest-count{font-weight:700;color:#1c2452;white-space:nowrap}
.quest-row>.pi{width:16px;height:16px;color:#3a4270}
.quest-check .pi{width:26px;height:26px;color:#2fbf62}
.quest-row.is-done{background:#fbfffc}
.quest-bonus{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:9px 12px 9px 10px;border:1px solid #efe4ff;border-radius:14px;background:linear-gradient(100deg,#f6f0ff,#fff3fa);color:#262e5c;font:600 13px/1.3 var(--font-body);text-align:left;cursor:pointer}
.quest-bonus:disabled{cursor:default}
.quest-gift .pi{width:30px;height:30px;color:#ff4fa3}
.quest-bonus-text{flex:1;min-width:0}
.quest-bonus-text b{display:block;color:#e0246a;font-weight:800}
.quest-chevron{width:16px;height:16px;color:#3a4270}
.quest-bonus.is-ready{border-color:#ffb3d6;animation:bonus-glow 1.8s ease-in-out infinite}
.quest-bonus.is-ready:hover{background:linear-gradient(100deg,#efe5ff,#ffe8f4)}
.quest-bonus.is-claimed{opacity:.8}
.quest-bonus.is-claimed .quest-bonus-text b{color:#5b6488;font-weight:700}
@keyframes bonus-glow{0%,100%{box-shadow:0 0 0 0 #ff7cbc55}50%{box-shadow:0 0 0 5px #ff7cbc22}}

/* ---------- Wooden signs ---------- */
.wood-sign{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,200px);padding:0;pointer-events:none;
  color:#fff;font:400 18px/1.05 var(--font-game);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 2px 0 #7a4a24,0 0 2px #7a4a24}
.wood-sign::before{content:'';position:absolute;z-index:-1;left:50%;top:6px;bottom:6px;width:20px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,#7d5129,#b37b46 45%,#86582d);box-shadow:0 4px 8px #3e27122e}
.wood-sign span{position:relative;display:block;width:100%;padding:6px 18px;text-align:center;border:2px solid #8b5a2f;border-radius:10px;background:linear-gradient(180deg,#dcaa72,#c18a53 55%,#a8733f);box-shadow:inset 0 2px 0 #f0c894,inset 0 -3px 0 #8e5e32,0 5px 8px #5b3a1a3d}
.wood-sign span:nth-of-type(odd){transform:rotate(-2deg)}
.wood-sign span:nth-of-type(even){transform:rotate(1.6deg)}
.wood-sign span::before,.wood-sign span::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#6d4a2a;box-shadow:inset 0 1px 0 #d9b48a}
.wood-sign span::before{left:6px}.wood-sign span::after{right:6px}
.sign-left{font-size:16px}
.sign-left span{padding:5px 18px}
.sign-heart{display:none}

/* ---------- Calculator ---------- */
.classic-home .play-stage>.calculator{width:100%;max-width:880px;margin:0 auto}
.play-stage .calc-top{margin:0;height:0}
.classic-home .offers{grid-template-columns:minmax(0,1fr) 124px minmax(0,1fr)}
.classic-home .offer,.classic-home .offer.theirs{padding:18px 18px 16px;border:1px solid #fff;border-radius:26px;background:#fffffff7;box-shadow:0 14px 32px #2c4a8a29}
.classic-home .offer-heading{justify-content:space-between;align-items:center;margin-bottom:14px}
.classic-home .offer h3,.classic-home .theirs .offer h3{margin:0;font:700 23px/1.15 var(--font-heading);color:#0f174f;letter-spacing:-.01em}
.classic-home .offer-heading small{position:static;font-size:13px;font-weight:600;color:#6d7593}
.classic-home .slots{gap:10px;grid-auto-rows:minmax(122px,auto)}
.classic-home .slot,.classic-home .empty-slot.ghost,.classic-home .theirs .slot{min-height:122px;border-radius:15px;border:1px solid #d6e4fb;background:linear-gradient(160deg,#f5f9ff,#e9f1ff);padding:8px 4px 6px}
.classic-home .slot img{height:58px}
.classic-home .slot .classic-pet{width:62px;height:62px;margin:0 auto}
.classic-home .slot strong{margin-top:2px;font:700 12.5px/1.2 var(--font-heading);color:#11184d}
.classic-home .slot .edit{font-size:10.5px;color:#5f6789}
.classic-home .slot .price{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:#11184d}
.classic-home .slot .price::after,.classic-home .total strong::before{content:'';display:inline-block;width:12px;height:12px;clip-path:polygon(22% 0,78% 0,100% 34%,50% 100%,0 34%);background:linear-gradient(140deg,#d59bff,#8b3cf6 60%,#6a22d8)}
.classic-home .slot .remove{z-index:2;top:4px;right:4px;width:20px;height:20px;min-width:20px;min-height:20px;font-size:13px;box-shadow:0 1px 3px #2c4a8a26}
.classic-home .empty-slot span,.classic-home .empty-slot.add span,.classic-home .empty-slot.ghost span{font-size:32px;color:#5a54e0}
.classic-home .empty-slot b,.classic-home .empty-slot.ghost b,.classic-home .empty-slot.add b{font:600 13.5px/1.2 var(--font-heading);color:#1f2c66}
.classic-home .total{gap:8px;padding-top:4px;font:600 17px/1.3 var(--font-heading);color:#11184d}
.classic-home .total strong,.classic-home .theirs .total strong{display:inline-flex;align-items:center;gap:6px;font:700 20px/1 var(--font-heading)}
.classic-home .total strong::before{width:17px;height:17px}

.classic-home .trade-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;margin:0 -6px;align-self:center}
.classic-home .trade-swap{position:relative;z-index:1;width:70px;height:70px;margin-bottom:-12px;border:4px solid #fff;border-radius:50%;background:linear-gradient(145deg,#9d7bff,#6436ea);color:#fff;font:400 28px/1 var(--font-game);cursor:pointer;box-shadow:0 0 0 4px #d9ceff,0 10px 22px #5a3bd455}
.classic-home .trade-swap:hover{transform:rotate(180deg)}
body.classic-home .trade-swap{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .18s ease}
.diff-card{width:100%;padding:20px 8px 12px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 10px 24px #2c4a8a29}
.diff-card>span{display:block;font:600 14px/1.2 var(--font-heading);color:#2f3868}
.diff-card strong{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 8px;font:700 25px/1 var(--font-heading);color:#0f174f}
.diff-card .gem{width:22px;height:22px;color:#9446f7}
.diff-card em{display:inline-block;padding:3px 9px;border-radius:999px;background:#eef1f8;color:#566087;font-style:normal;font-size:11px;font-weight:700;line-height:1.3}
.diff-card em[data-side=yours]{background:#e3f7e8;color:#218a47}
.diff-card em[data-side=theirs]{background:#e5f2ff;color:#1f6fc2}

.classic-home .check-trade-wrap{position:relative;z-index:3;margin:-16px 0 0}
.classic-home .check-trade-btn{position:relative;gap:14px;min-width:318px;min-height:66px;padding:12px 34px;border:0;border-radius:22px;background:linear-gradient(135deg,#8a6bff,#6034ea 70%);font:700 25px/1 var(--font-heading);letter-spacing:0;text-transform:none;box-shadow:0 8px 0 #4a2cc2,0 16px 30px #4a2cc24d,inset 0 2px 0 #ffffff47}
.classic-home .check-trade-btn::before{content:none}
.classic-home .check-trade-btn .pi{width:28px;height:28px}
.classic-home .check-trade-btn:disabled{opacity:.62}
.classic-home .check-trade-hint{padding:3px 12px;border-radius:999px;background:#ffffffd9;color:#434d72}
.check-burst{position:absolute;top:50%;width:34px;height:60px;margin-top:-30px;pointer-events:none}
.check-burst.left{right:calc(100% + 10px)}.check-burst.right{left:calc(100% + 10px);transform:scaleX(-1)}
.check-burst i{position:absolute;right:0;width:16px;height:6px;border-radius:4px;background:#ffc93c;box-shadow:0 1px 0 #e39c00}
.check-burst i:nth-child(1){top:6px;transform:rotate(35deg)}
.check-burst i:nth-child(2){top:27px;width:20px}
.check-burst i:nth-child(3){bottom:6px;transform:rotate(-35deg)}
.check-trade-btn:disabled .check-burst{opacity:.5}

/* ---------- Trading journey ---------- */
.journey{position:relative;display:grid;grid-template-columns:minmax(270px,340px) minmax(0,1fr);align-items:center;gap:26px;width:min(1228px,100%);margin:34px auto 0;padding:16px 28px;border:1px solid #fff;border-radius:24px;background:#fffffff4;box-shadow:0 14px 32px #2c4a8a21}
.journey-title{display:flex;align-items:center;gap:12px}
.journey-map{width:54px;height:54px;flex:none}
.journey h2{margin:0;font:700 18px/1.2 var(--font-heading);color:#11184d}
.journey-title p{margin:3px 0 0;font-size:13px;font-weight:600;color:#3c456b;line-height:1.35}
.journey .level-row{margin-top:12px}
.badge-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.jbadge{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center}
.badge-medal{display:grid;place-items:center;width:70px;height:70px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #6fc3ff,0 6px 14px #2c4a8a29;color:#fff}
.jbadge.is-earned .badge-medal{box-shadow:0 0 0 3px #3ccb6a,0 6px 14px #2c4a8a29}
.badge-medal .pi{width:34px;height:34px;filter:drop-shadow(0 2px 0 #0002)}
.jbadge.tone-pink .badge-medal{background:radial-gradient(circle at 38% 30%,#ffc6e8,#ea5fb5)}
.jbadge.tone-purple .badge-medal{background:radial-gradient(circle at 38% 30%,#b9a2ff,#6a45ec);color:#ffe3f3}
.jbadge.tone-gold .badge-medal{background:radial-gradient(circle at 38% 30%,#a58bff,#5534dc);color:#ffcf2e}
.jbadge.tone-rose .badge-medal{background:radial-gradient(circle at 38% 30%,#e3d9ff,#9c83f3);color:#ffd8c2}
.jbadge.tone-mystery .badge-medal{background:#f5f7fc;border:2px dashed #b9c1d7;box-shadow:0 4px 10px #2c4a8a14;color:#6f7896}
.jbadge:not(.is-earned):not(.tone-mystery) .badge-medal{filter:saturate(.8)}
.jbadge b{font:700 14px/1.2 var(--font-heading);color:#11184d}
.badge-state{padding:1px 10px;border-radius:999px;background:#e2f7e8;color:#1f8f45;font-size:12px;font-weight:800}
.badge-meter{position:relative;display:grid;place-items:center;width:min(100%,100px);height:18px;overflow:hidden;border-radius:999px;background:#e5eefb}
.badge-meter i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#6fd0ff,#2f9bf0)}
.badge-meter span{position:relative;font-size:11px;font-weight:800;color:#12306b;line-height:1}
.badge-hint{font-size:12.5px;font-weight:600;color:#3f486d}

/* ---------- Promo cards ---------- */
.promo-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(1400px,100%);margin:16px auto 0}
.promo{display:flex;align-items:center;gap:14px;min-height:88px;padding:14px 16px;border:1px solid;border-radius:20px;color:#1c2452;box-shadow:0 8px 20px #2c4a8a14;transition:transform .16s ease,box-shadow .16s ease}
.promo:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 26px #2c4a8a21}
.promo>span:nth-child(2){flex:1;min-width:0}
.promo b{display:block;font:700 15px/1.25 var(--font-heading);color:#11184d}
.promo small{display:block;margin-top:2px;font-size:12px;font-weight:600;line-height:1.35;color:#4a5375}
.promo-icon{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:16px}
.promo-icon .pi{width:32px;height:32px}
.promo-chevron{width:20px;height:20px;color:#3b4372}
.promo.tone-blue{background:linear-gradient(120deg,#eef7ff,#f8fcff);border-color:#cfe5fb}.promo.tone-blue .promo-icon{background:#d9ecff;color:#2b8ef0}
.promo.tone-pink{background:linear-gradient(120deg,#fff0f7,#fff8fb);border-color:#fad2e6}.promo.tone-pink .promo-icon{background:#ffd8eb;color:#e8479a}
.promo.tone-green{background:linear-gradient(120deg,#edfaf1,#f7fdf9);border-color:#cbeed6}.promo.tone-green .promo-icon{background:#d5f4df;color:#28b457}
.promo.tone-gold{background:linear-gradient(120deg,#fff8e4,#fffcf2);border-color:#f5e2a6}.promo.tone-gold .promo-icon{background:#ffecb0;color:#f09a00}

.play-tagline{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px auto 4px;font:700 16px/1.3 var(--font-heading);color:#1c2452;text-align:center}
.play-tagline .pi{width:26px;height:26px}
.play-tagline .paw-pink{color:#ff5aa8;transform:rotate(-14deg)}
.play-tagline .paw-purple{color:#9a7dff;transform:rotate(14deg)}
.play-tagline .heart{width:18px;height:18px;color:#ff4f93}
.classic-home .play-tagline+.data-note{margin-top:10px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  body.classic-home::before{top:0;width:100%;aspect-ratio:auto;height:1180px;background-size:cover;background-position:center top}
  .play-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hero hero" "calc calc" "cards cards";grid-template-rows:auto;gap:18px}
  .play-left{display:none}.play-right{grid-area:cards}
  .wood-sign,.scene-sign{display:none}
  .play-stage .player-card{flex:1 1 300px}
  .play-stage .quest-card{flex:1 1 520px}
  .quest-card .quest-head{order:0}.quest-card .quest-bonus{order:1;flex:1 1 200px}.quest-card .quest-list{order:2;flex-basis:100%}
  .quest-card{margin-left:0}
  .classic-home .play-hero{padding-bottom:4px}
  .hero-spark.s1,.hero-spark.s2{left:0}.hero-spark.s3,.hero-spark.s4{right:0}
  .classic-home .play-stage>.calculator{margin-top:8px}
  .journey{grid-template-columns:1fr;gap:18px}
  .promo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  .classic-home .nav .icon-btn{margin-left:0}
  .classic-home .nav a{padding:9px 8px;font-size:13px}
}
@media(max-width:860px){
  .classic-home .offers{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}
  .classic-home .offer,.classic-home .offer.theirs{padding:14px 11px}
  .classic-home .offer h3{font-size:19px}
  .classic-home .trade-swap{width:58px;height:58px;font-size:23px}
  .diff-card strong{font-size:21px}
}
@media(max-width:720px){
  body.classic-home::before{height:1500px}
  .classic-home .site-header{width:calc(100% - 24px);padding:10px 14px}
  .classic-home .nav a{font-size:15px;padding:12px}
  body.classic-home #main{width:calc(100% - 24px)}
  .play-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "calc" "cards";padding-top:10px}
  .play-right{flex-direction:column;gap:12px}
  .play-stage .player-card,.play-stage .quest-card{flex:0 0 auto;min-width:0}
  .quest-card .quest-bonus{order:3}
  .quest-card .quest-list{grid-template-columns:1fr;flex-basis:100%}
  .quest-card .quest-bonus{flex-basis:100%}
  body.classic-home .play-hero h1{font-size:32px}
  body.classic-home .play-hero .hero-motto{font-size:20px}
  .classic-home .play-hero p{font-size:15px}
  .hero-spark{display:none}
  .classic-home .offers{grid-template-columns:1fr;gap:10px}
  .classic-home .trade-mid{flex-direction:row;justify-content:center;gap:10px;margin:0}
  .classic-home .trade-swap{margin:0;width:54px;height:54px;font-size:21px}
  .diff-card{width:auto;display:flex;align-items:center;gap:10px;padding:8px 14px}
  .diff-card strong{margin:0;font-size:19px}
  .classic-home .check-trade-wrap{margin-top:14px}
  .classic-home .check-trade-btn{min-width:0;width:100%;font-size:22px}
  .check-burst{display:none}
  .journey{padding:16px}
  .badge-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .badge-medal{width:60px;height:60px}.badge-medal .pi{width:28px;height:28px}
  .promo-cards{grid-template-columns:1fr;gap:10px}
  .play-tagline{font-size:14px}
}
@media(max-width:380px){
  .classic-home .slots{gap:6px}
  .level-row small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .quest-bonus.is-ready{animation:none}
  .xp-bar i,.promo,a.quest-row,.player-avatar,body.classic-home .trade-swap{transition:none}
  .classic-home .trade-swap:hover{transform:none}
}


/* Quests lives on the homepage: highlight it (instead of Calculator) while #quests is targeted. */
.classic-home .nav a.is-active{background:#f0edff;color:#5140d8}
.classic-home .nav.quests-active a[aria-current=page]{background:transparent;color:#141c4f}

/* Homepage FAQ: 8 questions in two columns. */
.classic-home .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.classic-home .faq-list details{margin:0}
@media(max-width:720px){.classic-home .faq-list{grid-template-columns:1fr}}