/* Sweet Swap: tactile treats, a living patisserie, and a permanent collection. */
:root { --text: #44334f; --text-soft: #776580; }
body { background: #f5e9f2; }
body::before { background: linear-gradient(110deg, #ffffff12, #f8f1fb88), url('/art/bakery-world.png') center / cover; }
.home-screen { overflow-y: auto; }
.home-top { position: relative; z-index: 1; padding: 1rem 1.5rem; }
.home-inner { width: min(590px, 100%); padding: 1.3rem 2rem 2rem; margin: 0 5% 0 auto; border-radius: 2.5rem; background: linear-gradient(150deg,#fffcf5ee,#fff5f0dc); box-shadow: 0 20px 80px #57305124; backdrop-filter: blur(12px); }
.home-kicker,.eyebrow { display:block; font-size:.68rem; font-weight:600; letter-spacing:.16em; color:#876078; }
.home-kicker { text-align:center; }
.logo { margin: .8rem 0 1.1rem; }
.logo-pieces { height:3rem; gap:.45rem; }
.logo-piece { width:2.7rem;height:2.7rem; }
.logo-title { font-size:clamp(2.6rem,4.3vw,4.2rem); margin:.45rem 0 .25rem; }
.logo-sub { font-size:.8rem; letter-spacing:.2em; }
.menu { width:100%; max-width:none;gap:.7rem; }
.btn { border-radius:1.1rem; box-shadow:0 4px 0 var(--bd),0 7px 15px #68415319; }
.btn.big { background:linear-gradient(160deg,#ff79a4,#ed3b79); min-height:4rem; }
.btn::before { opacity:.5; }
.btn.neutral { background: #fffaf4; }
.btn:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #6543ae; outline-offset:4px; }
button:disabled { cursor:default; opacity:.55; }
.home-reward { display:block; width:100%; border:1px solid #e8d8e8; background:#fff9; border-radius:1.1rem; padding:.85rem 1rem; margin:1.1rem 0 .65rem; text-align:left; color:var(--text); font:inherit; cursor:pointer; }
.home-reward .eyebrow { margin-bottom:.35rem; }
.reward-ribbon { font-size:.83rem; line-height:1.5; }
.reward-meter { display:block; width:100%; height:8px; margin:.65rem 0 .3rem; border:0; border-radius:8px; overflow:hidden; appearance:none; background:#ece4ee; accent-color:#af75dc; }
.reward-meter::-webkit-progress-bar { background:#ece4ee; border-radius:8px; }
.reward-meter::-webkit-progress-value { background:linear-gradient(90deg,#ed77a0,#9869d9); border-radius:8px; }
.reward-meter::-moz-progress-bar { background:#aa72d4; }
.home-collection-nav { display:flex;gap:.55rem; }
.home-collection-nav .btn { flex:1; font-size:.82rem;min-height:2.9rem;padding:.5rem; }
.editions { width:100%; margin-top:1.6rem; }
.editions-title { text-align:left; font-size:1rem; }
.edition-grid { gap:.65rem; }
.edition-card { border-radius:1rem; box-shadow:none; border:1px solid #e8d7df; }
.edition-card.on { box-shadow:0 0 0 2px #ed6195; }
.edition-name { font-size:.86rem; }
.edition-meta { font-size:.72rem; }
.home-footer { margin:1.3rem 0 0; font-size:.75rem; }
.topbar { background:#fffcf2d9; backdrop-filter:blur(12px); padding:.7rem 1rem; }
.map-path { background:linear-gradient(#e2f2e3b8,#f6dfedcc,#fbedccb8); border-radius:2rem; box-shadow:0 0 45px #fff8; }
.map-treat { width:4rem;height:4rem;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 7px 4px #65483529); }
.chapter-banner { min-width:16rem; padding:1.3rem; background:#fffaf1; border:1px solid #fff;box-shadow:0 10px 30px #74516424; }
.chapter-banner.chapter-1 { background:#fff1b9; }
.chapter-banner.chapter-2 { background:#cef3df; }
.chapter-preview { display:block;font-size:.7rem;font-weight:400;margin-top:.45rem; }
.level-node.locked { opacity:.75; }
.game-screen { background:linear-gradient(120deg,#f5eff5e8,#edf6ffd9); padding:1rem; gap:.7rem; }
.hud-mid { background:#fffcf5;box-shadow:0 5px 20px #493b5719; border:1px solid #fff; }
.moves { background:linear-gradient(150deg,#ff79a4,#e63375);box-shadow:0 5px 0 #bb255b; }
.goals { background:#fff9; padding:.5rem; border-radius:1.2rem; }
.goal { background:#fffaf5; }
.board { --tile1:#f8f0fa;--tile2:#e8ddf3;--frame:#fff8f6;--tray:#c8b9d5;background:transparent;border:0;border-radius:1.6rem; }
.board::before { background:var(--tray);border:7px solid var(--frame);box-shadow:0 8px 0 #a68bad,0 20px 50px #53416245; }
.tile { border-radius:20%;box-shadow:inset 0 -3px 0 #d7c9e542; }
.piece-img { inset:4%;filter:drop-shadow(0 4px 2px #56335525); }
.piece.special:not(.hint):not(.selected) .piece-img { animation:charged 1.9s ease-in-out infinite; }
.piece.rainbow:not(.hint):not(.selected) .piece-img { animation:charged 1.6s ease-in-out infinite; }
.game-footer { flex-wrap:wrap; }
.game-reward-status { width:100%;background:#fff9;border:1px solid #fff;border-radius:1rem;padding:.7rem 1rem; }
.game-reward-status .reward-ribbon { font-size:.78rem; }
.combo-label { position:absolute;top:1rem;left:50%;transform:translateX(-50%);z-index:20;pointer-events:none;padding:.55rem 1rem;background:#6c3fac;color:#fff;border:2px solid #fff;border-radius:2rem;box-shadow:0 5px 20px #553a6a44;font-size:.9rem;white-space:nowrap; }
.reward-toast { position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;padding:.8rem 1.2rem;z-index:100;border-radius:1rem;background:#493259;color:#fff;box-shadow:0 8px 25px #33223e44;pointer-events:none; }
.beam { filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #b9f1ff);border-radius:999px; }
.win-modal { background:linear-gradient(160deg,#fff9ef,#f8eaff); }
.win-score { font-size:2.1rem; }
.reward-summary { margin-top:.85rem; text-align:left; padding:.8rem; background:#fff9;border-radius:1rem; }
.reward-unlocked { display:flex;gap:.7rem;align-items:center;margin-bottom:.8rem; }
.reward-unlocked .reward-badge { width:2.8rem;height:2.8rem;flex:none;font-size:1.4rem; }
.reward-unlocked small { display:block;font-size:.75rem;margin-top:.2rem; }
.collection-screen { background:linear-gradient(135deg,#fdf6eeeb,#eee5f6ef); }
.collection-tabs { display:flex;justify-content:center;gap:.4rem;padding:.8rem; }
.collection-tabs button { font:inherit;font-size:.9rem;padding:.65rem 1.15rem;border:0;border-radius:1rem;background:transparent;color:#715e7f;cursor:pointer; }
.collection-tabs button.on { background:#60447b;color:#fff;box-shadow:0 4px 15px #5d3b7029; }
.collection-content { overflow-y:auto;padding:1rem 1.2rem 3rem; }
.collection-content > * { max-width:850px;margin-left:auto;margin-right:auto; }
.collection-heading { text-align:center;margin-bottom:1.5rem; }
.collection-heading h1 { font-size:clamp(1.8rem,4vw,2.8rem);margin:.45rem 0;letter-spacing:-.025em; }
.collection-heading p { font-size:.95rem;color:#7e6a86;line-height:1.6; }
.reward-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }
.reward-card { background:#fffaf5;border:1px solid #eadfea;border-radius:1.4rem;padding:1.2rem;box-shadow:0 7px 20px #7554890b;margin-bottom:.9rem; }
.reward-card h3 { margin:.8rem 0 .4rem;font-size:1.05rem; }
.reward-card p { color:#806e87;font-size:.85rem;line-height:1.55; }
.reward-card small { font-size:.72rem;color:#806e87; }
.reward-card.unlocked { border-color:#d5aeef;background:linear-gradient(145deg,#fffaf1,#f6eafd); }
.reward-badge { display:grid;place-items:center;width:4rem;height:4rem;color:#fff;background:radial-gradient(circle at 30% 20%,#fff8,var(--badge) 70%);border:4px solid #fff7;border-radius:35%;box-shadow:0 4px 0 color-mix(in srgb,var(--badge),#34243e 25%),0 7px 15px #67407e24;font-size:2rem; }
.unlocked .reward-badge { animation:badge-glow 3s ease-in-out infinite; }
.cosmetics-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem; }
.skin-card { min-height:6rem;border:3px solid transparent;border-radius:1rem;font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;color:#473153; }
.skin-card small { font-size:.7rem; }
.skin-card.on { border-color:#8560ae; }
.skin-classic { background:#eadef2; }.skin-golden { background:#fae2a1; }.skin-mint { background:#bde9dc; }.skin-cocoa { background:#5a394b;color:#fff; }
.choice-row { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;margin-bottom:1rem; }
.choice-row .chip-btn { padding:.7rem .9rem;border:1px solid #d7c4e1;background:#fff9; }
.choice-row .chip-btn.on { background:#694987;color:#fff; }
.order-total { display:flex;align-items:center;gap:.5rem;padding:1rem 0;color:#7b549c; }
.stamp-row { display:flex;flex-wrap:wrap;gap:.6rem; }
.delivery-stamp { display:flex;gap:.4rem;align-items:center;justify-content:center;padding:1rem;border:2px dashed #d5c7dc;border-radius:50%;color:#afa1b7; }
.delivery-stamp.complete { background:#e7d8f6;border-color:#9871b8;color:#6f4590; }
.bakery-scene { position:relative;height:360px;border-radius:1.7rem;background:url('/art/bakery-world.png') 25% 50% / cover;overflow:hidden;box-shadow:0 15px 30px #52385e29;margin-bottom:1.5rem; }
.bakery-sign { position:absolute;top:1rem;left:1rem;background:#fff5df;color:#685040;padding:.65rem 1.2rem;border-radius:.5rem;border:3px solid #d7a06d;box-shadow:0 4px 0 #865735;font-size:1.15rem; }
.bakery-flowers { position:absolute;bottom:1rem;left:1rem;display:flex;gap:12px; }
.flower { width:26px;height:26px;background:#f562a1;box-shadow:12px 0 #f562a1,-12px 0 #f562a1,0 12px #f562a1,0 -12px #f562a1;border-radius:50%;margin:15px; }
.garden-1 { filter:hue-rotate(130deg); }.garden-2 { filter:hue-rotate(290deg); }
.bakery-counter { position:absolute;right:1rem;bottom:1rem;background:#eb90ae;border:5px solid #fff3e2;border-radius:.9rem;padding:1rem;color:#65334f;box-shadow:0 5px 0 #9f486d;font-size:.8rem; }
.counter-1 { background:#91d4cb; }.counter-2 { background:#eec186; }
.bakery-cat { position:absolute;right:3rem;bottom:5.5rem;width:65px;height:65px;background:#d99c6c;border-radius:40%;border:3px solid #fff0d5;box-shadow:0 4px 0 #946b55; }
.cat-ears::before,.cat-ears::after { content:'';position:absolute;top:-13px;width:25px;height:30px;background:#d99c6c;clip-path:polygon(0 0,100% 55%,10% 100%); }.cat-ears::after {right:0;transform:scaleX(-1);}
.cat-face {position:absolute;inset:18px 0 0;text-align:center;color:#6c4030;}
.recipe-illustration { height:140px;padding:2rem 1rem;display:grid;place-items:center;border-radius:1rem;background:linear-gradient(0deg,#eeb986 25%,#fff0da 25%,#fff0da 45%,#f28aa3 45%,#f28aa3 60%,#fff0da 60%,#fff0da 80%,#f5bda0 80%);color:#683551;text-shadow:0 1px white;font-weight:600; }
html[data-board="golden"] .board {--tile1:#fff3ce;--tile2:#f6e2b0;--tray:#d7b57f;--frame:#fff2d0;}
html[data-board="mint"] .board {--tile1:#e8fff3;--tile2:#c6e9dc;--tray:#96c4b7;--frame:#effff9;}
html[data-board="cocoa"] .board {--tile1:#795467;--tile2:#664557;--tray:#4e3548;--frame:#b596ad;}
html[data-glaze="on"] .piece-img {filter:brightness(1.12) saturate(1.15) drop-shadow(0 2px 3px #fff9);}
@keyframes charged {50% {filter:brightness(1.15) drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px #c882ee);}}
@keyframes badge-glow {50% {box-shadow:0 4px 0 var(--badge),0 0 20px #d7b0f177;}}
@media(min-aspect-ratio:5/4) { .game-screen {grid-template-columns:minmax(230px,290px) 1fr;max-width:1250px;width:100%;margin:auto;padding:1.5rem;gap:1.2rem;} .game-footer {gap:.7rem;} .game-reward-status {order:-1;margin-bottom:.3rem;} .board-wrap {padding:.4rem;} }
@media(max-width:850px) { .home-inner {margin:0 auto;width:min(520px,calc(100% - 24px));padding:1.3rem;} .reward-grid {grid-template-columns:repeat(2,1fr);} .home-top {padding:.7rem;} .cosmetics-grid {grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px) { .home-screen {padding-bottom:1rem;} .logo-title {font-size:2.8rem;} .home-inner {padding:1.15rem;} .home-kicker {font-size:.6rem;} .logo-pieces {height:2.4rem;} .logo-piece {height:2.4rem;width:2.4rem;} .game-screen {padding:.5rem;gap:.4rem;} .game-reward-status {padding:.45rem .7rem;} .game-footer {gap:.4rem;} .game-footer .btn {font-size:.85rem;min-height:2.4rem;} .reward-card {padding:.85rem;} .reward-grid {gap:.65rem;} .collection-content {padding:.7rem .8rem 2rem;} .bakery-scene {height:290px;} .home-collection-nav .btn {font-size:.75rem;} }
@media(max-height:600px) and (min-aspect-ratio:5/4) { .game-screen {padding:.5rem;grid-template-columns:220px 1fr;} .game-footer .btn {min-height:2rem;} .game-reward-status {padding:.4rem;} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {animation:none!important;transition:none!important;} }
html.no-effects .piece-img,html.no-effects .reward-badge {animation:none!important;}