:root {
    color-scheme: dark;
    --ink: #fff5df;
    --muted: #c6d9dc;
    --gold: #e7c180;
    --wood: repeating-linear-gradient(3deg, #2b170d 0 3px, #75492b 4px, #422716 7px, #885a35 9px, #382013 12px);
    --frame: repeating-linear-gradient(88deg, #9a6a40 0 2px, #c3945f 3px, #664025 5px, #a57042 8px, #362014 11px);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #0c2e40; height: 100dvh; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
button:focus-visible { outline: 3px solid #ffd47c; outline-offset: -3px; }
button svg { pointer-events: none; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.wallpaper {
    background-color: #1d5d7a;
    background-image: radial-gradient(ellipse at 50% 42%, #3083a738, #031823b5),
        repeating-linear-gradient(90deg, #062a3d28 0 33px, #55a1bc0b 33px 66px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.22' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow: inset 0 0 60px #00101b70;
}
.game-shell { display: grid; grid-template-columns: minmax(260px, 30%) minmax(300px, 1fr) minmax(275px, 21%); height: 100dvh; width: 100%; }
.click-panel { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; text-shadow: 0 2px 3px #000b; }
.bakery-name { margin: 30px 18px 18px; padding: 7px 18px; background: #051c2990; border-radius: 24px; font: 700 clamp(19px, 1.7vw, 28px) Georgia, serif; text-align: center; }
.counter { width: 100%; background: #00111b55; padding: 12px 8px 13px; text-align: center; z-index: 2; }
.counter > strong { font: 700 clamp(36px, 3.3vw, 60px) Georgia, serif; line-height: .98; letter-spacing: -1px; overflow-wrap: anywhere; display: block; }
.counter h2 { font: 700 clamp(23px, 2vw, 35px) Georgia, serif; margin: 2px 0; }
.counter p { font: 700 18px Georgia, serif; margin: 0; }
.counter small { display: block; font-size: 11px; color: #dfedf1; margin-top: 6px; }
.click-stage { position: relative; width: 100%; height: clamp(250px, 39vh, 440px); margin-top: 20px; display: grid; place-items: center; isolation: isolate; }
.paparajote-button { position: relative; border: 0; background: transparent; width: min(95%, 470px); padding: 0; border-radius: 50%; display: grid; place-items: center; z-index: 3; transition: transform .12s ease; user-select: none; -webkit-tap-highlight-color: transparent; }
.paparajote-button:hover { transform: scale(1.045) rotate(-2deg); }
.paparajote-button:active { transform: scale(.94); }
.paparajote-button:focus-visible { outline: none; }
.click-stage:has(.paparajote-button:focus-visible) + .click-hint { outline: 2px solid #ffd47c; outline-offset: 6px; border-radius: 3px; background: #062a3d; }
.cursor-orbit { position: absolute; left: 50%; top: 50%; width: min(95%, 480px); aspect-ratio: 1.25; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
.orbit-cursor { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%) rotate(var(--giro)); filter: drop-shadow(1px 2px 1px #00121e); }
.cursor-hand { display: block; width: 100%; height: 100%; background: url("img/murcia/productores/cursor.png") center / contain no-repeat; image-rendering: pixelated; animation: cursor-tap 1.6s ease-in-out infinite; animation-delay: var(--retraso); }
.paparajote-button img { display: block; width: 100%; height: auto; transform: rotate(-7deg); pointer-events: none; filter: drop-shadow(0 13px 15px #22160db0); }
.sunburst { position: absolute; width: min(92%, 440px); aspect-ratio: 1; border-radius: 50%; opacity: .8; background: repeating-conic-gradient(from 5deg, #e0faff00 0deg 15deg, #e0faff8c 20deg 27deg, #e0faff00 32deg 45deg); filter: blur(9px); animation: sunshine 60s linear infinite; }
.sunburst::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, #efffffbb, #9bdef040 45%, transparent 70%); }
.sugar-dust { position: absolute; inset: 0; background: radial-gradient(circle at 18% 24%, #d9ffffd9 0 2px, transparent 8px), radial-gradient(circle at 72% 8%, #d9ffffc9 0 3px, transparent 8px), radial-gradient(circle at 85% 69%, #d9ffffc9 0 2px, transparent 9px), radial-gradient(circle at 22% 80%, #d9ffffc9 0 2px, transparent 9px); opacity: .8; pointer-events: none; }
.click-hint { position: relative; margin: 8px 10px 22px; font-size: 12px; color: #e1ebee; text-align: center; z-index: 2; }
kbd { font: inherit; padding: 2px 5px; border: 1px solid #9fc5d275; border-bottom-width: 2px; border-radius: 4px; background: #062a3d66; }
.left-footer { margin-top: auto; width: 100%; padding: 12px 15px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2; }
.recipe-stamp { font: italic 17px Georgia, serif; color: #e7d7b1; }
.save-status { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #cde5cf; }
.save-status .icon { width: 13px; height: 13px; }
.save-status.error { color: #ffbb93; }
.creator-credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px 10px; max-width: 100%; padding: 8px 10px; border: 1px solid #d4b87c78; border-radius: 12px; background: #08241ccf; box-shadow: 0 3px 12px #00190d77; color: #f5e9c9; font-size: 11px; text-shadow: none; }
.creator-credit strong { color: #ffdf91; font-weight: 800; }
.creator-instagram { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; border: 1px solid #efc87d82; border-radius: 8px; background: #47652e; color: #fff8e7; font-weight: 700; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.creator-instagram .icon { width: 16px; height: 16px; }
.creator-instagram:hover { background: #6b7f36; transform: translateY(-1px); }
.creator-instagram:focus-visible { outline: 3px solid #ffe08b; outline-offset: 2px; }
.version { font-size: 9px; color: #bfced2; }
.center-panel, .store-panel { position: relative; min-width: 0; min-height: 0; padding-left: 17px; display: flex; flex-direction: column; }
.center-panel::before, .store-panel::before { content: ""; position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: 17px; background: var(--frame); border-left: 2px solid #dfb887; border-right: 2px solid #321d11; box-shadow: 3px 0 8px #0009, -3px 0 8px #0007; }
.center-header { display: grid; grid-template-columns: 110px 1fr 100px; gap: 10px; min-height: 136px; align-items: start; padding: 8px 7px 19px; position: relative; background: #00192640; flex: none; }
.center-header::after, .store-title::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 13px; background: var(--wood); border-top: 2px solid #c49260; border-bottom: 2px solid #301c12; box-shadow: 0 3px 6px #0009; }
.menu-stack { display: flex; flex-direction: column; gap: 6px; }
.wood-button { background: var(--wood); border: 1px solid #b88a58; border-radius: 4px; box-shadow: inset 0 1px #f6dbac77, inset 0 -3px #140c098c, 0 2px 3px #0009; color: #fff1d3; padding: 8px 7px; font: 700 16px Georgia, serif; text-shadow: 0 2px 2px #000; }
.wood-button:hover { filter: brightness(1.22); }
.wood-button[aria-pressed="true"] { color: #ffe199; border-color: #f3dba4; background: #2c190e; }
.wood-button small { font: 700 10px "Segoe UI", sans-serif; color: #eac16f; }
.news { text-align: center; padding-top: 6px; min-width: 0; }
.news > p { font: 700 clamp(15px, 1.2vw, 21px) Georgia, serif; text-shadow: 0 2px 2px #000; margin: 0; line-height: 1.45; }
.news button { background: #01162066; border: 1px solid #97bdca50; border-radius: 3px; font-size: 10px; color: #e6d3a8; margin-top: 12px; padding: 4px 9px; }
.center-scroll, .store-scroll { overflow: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #a58256 #071d29; }
.center-view { min-height: 100%; }
.workshop-caption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 13px; background: #00182677; font-size: 8px; letter-spacing: 1.1px; border-bottom: 1px solid #c89c6355; color: #e6dfcc; }
.workshop-caption > span:last-child { font-style: italic; letter-spacing: 0; color: #bad0d7; }
.room-empty { min-height: 240px; padding: 40px 22px 26px; text-align: center; background: #052a3c3b; border-bottom: 11px solid #795335; border-image: var(--frame) 11; }
.room-empty > .icon { color: #c9d4aa; width: 48px; height: 48px; filter: drop-shadow(0 2px 4px #000); }
.room-empty h2 { font: 700 23px Georgia, serif; text-shadow: 0 2px 2px #000; }
.room-empty p { color: #d2e3e8; font-size: 11px; line-height: 1.9; }
.room { height: 164px; position: relative; overflow: hidden; border-top: 8px solid #8a5d38; border-bottom: 10px solid #6a4228; border-image: var(--frame) 10; background-color: #bca079; background-position: left bottom; background-size: 128px 128px; background-repeat: repeat; box-shadow: inset 0 0 20px #0005; }
.room-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 5px 11px; display: flex; justify-content: space-between; align-items: center; font: 700 14px Georgia, serif; color: #fff2d1; background: #071d24c9; text-shadow: 0 1px #000; }
.room-top small { font: 600 9px "Segoe UI", sans-serif; }
.room-workers { position: absolute; left: 14px; right: 14px; bottom: 30px; z-index: 1; display: flex; align-items: flex-end; gap: 12px; height: 76px; overflow: hidden; }
.worker { flex: none; width: 64px; height: 64px; display: grid; place-items: center; filter: drop-shadow(1px 3px 2px #0005); }
.worker:nth-child(even) { transform: translateY(-5px); }
.worker-sprite { display: block; width: 64px; height: 64px; background-position: center; background-repeat: no-repeat; background-size: contain; image-rendering: pixelated; }
.milestone { margin: 23px 20px; padding: 16px; background: #001621a3; border: 1px solid #8f9e8b77; box-shadow: 0 2px 8px #0004; }
.milestone-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 15px Georgia, serif; }
.milestone-top > span:last-child { font: 11px "Segoe UI", sans-serif; white-space: nowrap; color: #dfd5bc; }
.progress-track { height: 9px; border: 1px solid #061722; background: #0007; margin-top: 12px; box-shadow: inset 0 1px 3px #000; }
.progress-track > div { width: 0; height: 100%; background: linear-gradient(#edcf8f, #b98543); transition: width .2s; }
.milestone > p { color: #c7dbe0; margin: 9px 0 0; font-size: 10px; line-height: 1.6; }
.workshop-signature { font: italic 20px Georgia, serif; text-align: center; color: #c9dce099; margin: 40px 15px; text-shadow: 0 2px 3px #000; }
.panel-sheet { background: #00141c8f; padding: 22px 24px; }
.panel-title { font: 700 31px Georgia, serif; margin: 0 0 10px; color: #f5dfb1; text-shadow: 0 2px #000; }
.panel-intro, .panel-sheet > p { font-size: 12px; line-height: 1.8; color: #d1dfe1; }
.panel-sheet h3 { font: 700 20px Georgia, serif; color: #f0dfbd; }
.panel-sheet hr { border: 0; border-top: 1px solid #b5935d70; margin: 27px 0; }
.panel-note { color: #bfd1d7 !important; font-size: 10px !important; margin-top: 23px; line-height: 1.8; }
.option-button { margin: 8px 0; padding: 10px 22px; }
.danger-button { background: linear-gradient(#713421, #341b13); border-color: #c58c61; padding: 10px 17px; }
.stat-grid { margin: 25px 0; }
.stat-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #89a4a544; }
.stat-grid dt { font-size: 12px; color: #e0e9e9; }
.stat-grid dd { font: 700 23px Georgia, serif; color: #f3d7a2; margin: 0; text-align: right; overflow-wrap: anywhere; }
.achievement-count { display: block; font-size: 11px; color: #efcf88; margin: 23px 0 16px; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.achievement { padding: 15px 12px; border: 1px solid #728b8c66; background: #032331; display: flex; align-items: center; gap: 12px; min-width: 0; }
.achievement-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #b6c7c8; background: #36525b; border: 1px solid #809698; flex: none; }
.achievement strong { display: block; font: 700 14px Georgia, serif; color: #d3dfe1; line-height: 1.4; }
.achievement small { display: block; font-size: 9px; color: #b9cbd1; margin-top: 5px; line-height: 1.5; }
.achievement.unlocked { border-color: #bb985c; background: #213c37; }
.achievement.unlocked .achievement-icon { color: #ffda82; background: #5e4c2a; border-color: #d9b669; }
.achievement.unlocked strong { color: #ffe1a4; }
.store-title { font: 700 43px Georgia, serif; text-shadow: 0 3px 3px #000; text-align: center; padding: 8px 3px 23px; position: relative; margin: 0; line-height: 1; }
.upgrade-shelf { flex: none; background: #03131dcc; border-bottom: 8px solid #815331; border-image: var(--frame) 8; }
.shelf-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 7px; background: var(--wood); color: #f0d1a5; text-shadow: 0 1px #000; }
.shelf-heading h3 { margin: 0; font: 700 14px Georgia, serif; }
.shelf-heading > span { font-size: 9px; }
.upgrade-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; padding: 7px; max-height: 131px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #9b7750 #071922; }
.upgrade-grid:empty { padding: 0; }
.upgrade-icon-button { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; background: #080c0e; border: 3px ridge #ba8c51; box-shadow: inset 0 0 12px #000a; transition: filter .12s; }
.upgrade-icon-button:hover { filter: brightness(1.3); border-color: #ffdb8b; }
.upgrade-icon-button:focus-visible { outline-offset: 1px; z-index: 1; }
.upgrade-icon-button.not-affordable > .upgrade-sprite { opacity: .55; }
.upgrade-sprite { display: block; flex: none; width: 48px; height: 48px; background-position: center; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; }
#mejorasVacias { font-size: 10px; line-height: 1.6; color: #c8d5d5; padding: 11px 10px; margin: 0; }
.upgrade-tooltip { position: fixed; z-index: 60; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: hidden; padding: 13px 15px 0; pointer-events: none; color: #e7e7e5; background: linear-gradient(110deg, #111415fa, #080a0bfa); border: 3px ridge #e2b56f; box-shadow: 0 3px 16px #000d, inset 0 0 20px #ffffff05; }
.tooltip-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tooltip-heading h3 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 750; }
.tooltip-heading > strong { color: #ff8a85; font-size: 13px; align-self: start; margin-top: 5px; white-space: nowrap; }
.tooltip-heading > strong::before { content: "◉ "; color: #d4ab69; font-size: 11px; }
.tooltip-heading > strong.affordable { color: #a7dc8b; }
.tooltip-category { display: block; width: max-content; padding: 1px 4px; margin: -8px 0 9px 60px; background: #b7bab8; color: #080a09; font-size: 10px; font-weight: 600; }
.upgrade-tooltip > p { border-top: 1px solid #ffffff16; padding: 12px 0; margin: 0; font-size: 13px; line-height: 1.7; }
.upgrade-tooltip > .tooltip-action { color: #c4c7c3; font-size: 11px; font-weight: 600; text-align: center; padding: 10px 0; }
.center-scroll:focus-visible, .store-scroll:focus-visible { outline: 2px solid #e7c180; outline-offset: -2px; }
.shop-controls { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; background: #08131b; padding: 6px 7px; gap: 8px; border-bottom: 1px solid #d0b48466; }
.trade-modes { display: flex; flex-direction: column; align-items: flex-start; }
.shop-controls button { border: 0; background: transparent; color: #b5c5c7; padding: 1px 3px; font-size: 11px; font-weight: 700; text-shadow: 0 1px #000; }
.trade-modes button { text-transform: uppercase; font-family: Georgia, serif; line-height: 1.2; }
.shop-controls button.active { color: #fff7dc; text-shadow: 0 0 8px #f3dba955, 0 2px #000; }
.trade-quantities { display: flex; justify-content: space-around; flex: 1; gap: 3px; }
.trade-quantities button { font-size: 16px; padding: 9px 7px; }
.product-list { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.product { display: grid; grid-template-columns: 62px minmax(0, 1fr) 44px; align-items: center; gap: 5px; border: 1px solid #a5b7a7; border-top: 2px solid #c2cdb6; border-bottom: 3px solid #1b2e2d; box-shadow: inset 0 0 12px #081c1b70, 0 1px 4px #0008; min-height: 91px; padding: 5px; width: 100%; background: linear-gradient(105deg, #c3c8acdd, #a4bba8df 50%, #7e9b8bdc); color: #172d2c; text-align: left; position: relative; transition: filter .12s; }
.product:enabled:hover { filter: brightness(1.2); }
.product:enabled:active { filter: brightness(.92); }
.product:disabled { background: linear-gradient(105deg, #8da3a2d1, #8da1a0e8 50%, #536f72df); color: #162a32; border-top-color: #97aeb0; }
.product-icon { display: grid; place-items: center; width: 60px; height: 67px; filter: drop-shadow(1px 2px 1px #172624); }
.building-icon { display: block; width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.product-copy { min-width: 0; align-self: center; }
.product-name { display: block; font: 700 clamp(17px, 1.4vw, 24px) Georgia, serif; text-shadow: 0 1px #f2ffe15e; line-height: 1.1; letter-spacing: -.6px; overflow-wrap: break-word; hyphens: auto; }
.product-description { display: block; font-size: 8px; color: #172f32; margin: 4px 0; line-height: 1.3; }
.product-bottom { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; }
.product-price { display: flex; align-items: center; gap: 4px; color: #154b28; font-weight: 800; font-size: 13px; text-shadow: 0 1px #d4ecce50; }
.product:disabled .product-price { color: #6b1921; }
.product-pps { font-size: 9px; color: #1b3c32; white-space: nowrap; }
.currency { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #cfac6b; border: 2px solid #6f532c; color: #563b17; font: 700 9px Georgia, serif; flex: none; }
.product-owned { align-self: center; text-align: center; font: 700 24px Georgia, serif; letter-spacing: -1px; color: #1c373bbb; text-shadow: 0 1px #bad0c03d; white-space: nowrap; }
.product-owned small { display: none; }
.shop-tip { font-size: 10px; line-height: 1.8; color: #d2e0e1; background: #00172170; margin: 18px 10px; padding: 10px; border: 1px solid #8ca8ae44; }
.shop-footer { text-align: center; font-size: 9px; color: #bdced1; background: #03151f9c; border-top: 1px solid #9f815c66; padding: 11px 5px; }
.shop-footer .icon { width: 13px; height: 13px; margin-right: 3px; }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 30; background: #101513ed; color: #f7ead1; border: 3px ridge #e0bc7c; box-shadow: 0 2px 12px #000a; padding: 15px 22px; width: max-content; max-width: min(90vw, 450px); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.6; transition: opacity .2s, transform .2s; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.floating-number { position: absolute; pointer-events: none; color: #fff5d2; font: 700 30px Georgia, serif; text-shadow: 0 2px 3px #000; z-index: 6; white-space: nowrap; }
dialog { color: #f7ead6; background: #0e2a39; border: 8px ridge #a87948; box-shadow: 0 10px 80px #000b; padding: 30px; width: min(92vw, 510px); max-height: 92dvh; overflow: auto; }
dialog::backdrop { background: #00131bbd; backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 7px; right: 12px; border: 0; background: transparent; color: #e7d1ac; font-size: 28px; }
.dialog-eyebrow { font-size: 9px; letter-spacing: 2px; color: #e2bd7c; margin-top: 5px; }
dialog h2 { font: 700 29px Georgia, serif; color: #ffdea0; text-shadow: 0 2px #000; margin: 12px 0 22px; }
dialog > p:not(.dialog-eyebrow) { font-size: 12px; line-height: 1.8; color: #d7e1e2; }
.help-steps { padding-left: 19px; }
.help-steps li { padding-left: 4px; padding-bottom: 15px; font-size: 11px; line-height: 1.8; color: #d2e0e1; }
.help-steps strong { display: block; color: #f6e5c5; font-size: 12px; }
.dialog-note { padding: 12px; background: #001823; border: 1px solid #76939466; font-size: 10px !important; }
.dialog-primary { width: 100%; margin-top: 10px; padding: 12px; }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 25px; }
.dialog-actions .wood-button { font-size: 13px; }
.noscript { position: fixed; inset: 0; z-index: 100; padding: 30px; display: grid; place-items: center; background: #092c3d; font-size: 22px; text-align: center; }
@keyframes sunshine { to { transform: rotate(360deg); } }
@keyframes cursor-tap { 0%, 80%, 100% { transform: translateY(0); } 88% { transform: translateY(-4px); } }
@media (max-width: 1200px) {
    .game-shell { grid-template-columns: minmax(250px, 30%) minmax(270px, 1fr) 278px; }
    .center-header { grid-template-columns: 91px 1fr 76px; gap: 5px; min-height: 143px; }
    .wood-button { font-size: 13px; }
    .news > p { font-size: 15px; }
    .product { grid-template-columns: 52px minmax(0, 1fr) 40px; }
    .product-icon, .product-icon img { width: 52px; height: 52px; }
    .building-icon { transform: scale(.82); }
    .product-name { font-size: 21px; }
    .product-owned { font-size: 22px; }
    .product-description { font-size: 8px; }
    .workshop-caption { flex-direction: column; gap: 4px; font-size: 8px; }
    .achievement-grid { grid-template-columns: 1fr; }
    .panel-sheet { padding: 22px 17px; }
    .milestone { margin: 20px 12px; padding: 13px; }
    .milestone-top { font-size: 13px; }
}
@media (max-width: 860px) {
    body { height: auto; overflow: auto; }
    .game-shell { display: flex; flex-direction: column; height: auto; }
    .click-panel { min-height: 570px; }
    .bakery-name { font-size: 25px; margin-top: 24px; }
    .counter { padding: 11px 8px; }
    .counter > strong { font-size: 45px; }
    .counter h2 { font-size: 27px; }
    .click-stage { height: 265px; margin-top: 5px; }
    .paparajote-button { width: 350px; max-width: 96%; }
    .sunburst { width: 310px; max-width: 92%; }
    .cursor-orbit { width: min(96%, 370px); }
    .orbit-cursor { width: 24px; height: 24px; }
    .click-hint { margin: 5px 10px 15px; }
    .left-footer { padding: 5px 15px 17px; gap: 6px; }
    .creator-credit { padding: 6px 9px; }
    .recipe-stamp { display: none; }
    .center-panel, .store-panel { padding: 0; }
    .center-panel::before, .store-panel::before { width: 100%; height: 14px; bottom: auto; border: 0; border-top: 2px solid #dfb887; border-bottom: 2px solid #321d11; background: var(--wood); }
    .center-panel { order: 3; min-height: 500px; }
    .store-panel { order: 2; padding-top: 14px; }
    .center-header { padding-top: 22px; grid-template-columns: 105px 1fr 89px; min-height: 147px; }
    .center-header .wood-button { font-size: 14px; }
    .news > p { font-size: 16px; }
    .center-scroll, .store-scroll { overflow: visible; }
    .store-title { font-size: 37px; padding-top: 12px; }
    .shop-controls { padding: 7px 15px; }
    .trade-quantities { justify-content: flex-end; gap: 30px; }
    .trade-modes button { font-size: 12px; }
    .product { min-height: 91px; grid-template-columns: 68px minmax(0, 1fr) 60px; padding: 6px 14px; }
    .product-name { font-size: 29px; }
    .product-icon, .product-icon img { width: 62px; height: 62px; }
    .building-icon { transform: none; }
    .product-description { font-size: 10px; }
    .product-price { font-size: 13px; }
    .product-pps { font-size: 10px; }
    .product-owned { font-size: 26px; }
    .shop-tip { margin: 12px 15px; }
    .shop-footer { padding: 12px; }
    .panel-sheet { padding: 25px 20px 40px; }
    .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workshop-caption { flex-direction: row; padding: 13px; }
    .room-empty { min-height: 220px; }
    .milestone { margin: 24px 17px; }
    .milestone-top { font-size: 16px; }
    .toast { bottom: 15px; padding: 12px 16px; font-size: 11px; }
}
@media (max-width: 390px) {
    .bakery-name { font-size: 22px; }
    .center-header { grid-template-columns: 90px 1fr 75px; }
    .center-header .wood-button { font-size: 12px; }
    .news > p { font-size: 14px; }
    .product { grid-template-columns: 56px minmax(0, 1fr) 35px; gap: 7px; padding: 6px 10px; }
    .product-icon, .product-icon img { width: 52px; height: 52px; }
    .building-icon { transform: scale(.82); }
    .product-name { font-size: 26px; }
    .product-description { font-size: 9px; }
    .product-owned { font-size: 19px; }
    .achievement-grid { grid-template-columns: 1fr; }
    .workshop-caption { flex-direction: column; }
    .milestone-top { font-size: 14px; }
    dialog { padding: 25px 19px; }
    .dialog-actions { gap: 9px; }
    .dialog-actions .wood-button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .paparajote-button:hover, .paparajote-button:active { transform: none; }
}

/* Identidad visual original: limoneros, barro cocido, azulejos y madera de barraca. */
:root {
    --ink: #fff7db;
    --muted: #d8e5c6;
    --gold: #ffe08d;
    --wood: repeating-linear-gradient(3deg, #4c2d18 0 3px, #80512c 4px, #553218 7px, #9c6534 9px, #362011 12px);
    --frame: repeating-linear-gradient(88deg, #ab7442 0 2px, #ddb075 3px, #714522 5px, #b98043 8px, #492918 11px);
}
body { background: #183623; }
.wallpaper {
    background-color: #23563e;
    background-image:
        radial-gradient(ellipse at 48% 38%, #5b92692e 0, #0e2c27bb 85%),
        url("img/murcia/patron-huerta.svg"),
        linear-gradient(165deg, #327c55, #1d523c 50%, #193d32);
    background-size: cover, 240px 240px, cover;
    background-blend-mode: normal, screen, normal;
    box-shadow: inset 0 0 80px #071f17a8;
}
.brand-mark { text-align: center; padding: 18px 10px 16px; width: 100%; display: flex; align-items: center; flex-direction: column; gap: 3px; z-index: 2; }
.brand-kicker { font: 750 9px "Segoe UI", sans-serif; letter-spacing: 3px; color: #ffe28d; }
.bakery-name { margin: 0; padding: 5px 12px 1px; background: none; text-shadow: 0 3px 0 #2f200b, 0 5px 15px #061e12; font-size: clamp(28px, 2.7vw, 43px); line-height: 1.05; color: #fff4ce; }
.bakery-name em { display: block; font-weight: 900; font-style: normal; font-size: .85em; color: #ffce4c; letter-spacing: 2px; }
.brand-subtitle { font-size: 10px; color: #d5e6c7; letter-spacing: .3px; }
.counter { background: #0b3025ad; border-top: 1px solid #d3b86c37; border-bottom: 1px solid #d3b86c37; }
.counter > strong { color: #ffe49c; text-shadow: 0 3px #142c22; }
.counter h2 { color: #fff6dd; }
.counter small { color: #d6e7c9; }
.click-stage { margin-top: 8px; }
.paparajote-button { width: min(98%, 500px); }
.paparajote-button:hover { transform: scale(1.055) rotate(-2deg); }
.sunburst { background: repeating-conic-gradient(from 5deg, #ffe4a000 0deg 13deg, #ffe4a077 20deg 27deg, #ffe4a000 32deg 45deg); }
.sunburst::after { background: radial-gradient(circle, #e7d65b7a, #d6ad3055 45%, transparent 70%); }
.sugar-dust { background: radial-gradient(circle at 18% 24%, #ffdc8fe0 0 2px, transparent 8px), radial-gradient(circle at 72% 8%, #fff2b0ce 0 3px, transparent 8px), radial-gradient(circle at 85% 69%, #fff2b0ce 0 2px, transparent 9px), radial-gradient(circle at 22% 80%, #ffdc8fe0 0 2px, transparent 9px); }
.click-hint { color: #f9e6b5; }
.recipe-stamp { color: #fadd94; }
.center-header { background: #0d3226a6; }
.news > p { color: #ffedc5; }
.news button { border-color: #bed3ad66; color: #f8d995; }
.workshop-caption { background: #123727d1; border-bottom-color: #ffd27c5c; color: #ffde91; font-weight: 800; }
.workshop-caption > span:last-child { color: #d1dcb6; }
.room-empty { background: #164e37a1; }
.room-empty > .icon { color: #f5c64f; }
.room-empty p { color: #ecdfc0; }
.room {
    background-color: #acc4a0;
    background-image:
      repeating-linear-gradient(90deg, transparent 0 48px, #315e4930 50px 53px, transparent 56px 103px),
      linear-gradient(180deg, #d6e9c3 0%, #a9c58a 55%, #80653b 56%, #b29061 100%);
    background-position: center;
    background-size: auto;
    border-bottom-color: #764c2b;
}
.room:nth-child(4n + 2) { background-image: repeating-linear-gradient(90deg, transparent 0 50px, #2d736537 52px 55px, transparent 57px 103px), linear-gradient(#bfdad0 0%, #8ec0ab 55%, #80653b 56%, #b3946d 100%); }
.room:nth-child(4n + 3) { background-image: repeating-linear-gradient(90deg, transparent 0 50px, #8b533237 52px 55px, transparent 57px 103px), linear-gradient(#dfb89a 0%, #c98e64 55%, #80653b 56%, #b3946d 100%); }
.room:nth-child(4n + 4) { background-image: repeating-linear-gradient(90deg, transparent 0 50px, #525b9837 52px 55px, transparent 57px 103px), linear-gradient(#c4c8e4 0%, #a9abd3 55%, #80653b 56%, #b3946d 100%); }
.room-top { background: #214734ed; color: #fff0bf; border-bottom: 1px solid #f3d0836b; }
.room-workers { bottom: 10px; height: 91px; }
.worker { height: 80px; width: 80px; }
.worker-sprite { width: 80px; height: 80px; }
.milestone, .panel-sheet { background: #123b2ee0; }
.progress-track { border-color: #b49855; }
.progress-track > div { background: linear-gradient(#ffe98a, #f5b931); }
.workshop-signature { color: #e3c77a; }
.panel-title, .panel-sheet h3 { color: #ffe4a6; }
.panel-intro, .panel-sheet > p, .panel-note { color: #dce8d5 !important; }
.achievement { border-color: #8da77b88; background: #254936; }
.achievement.unlocked { background: #3b5730; border-color: #e1c36c; }
.store-title { font-size: clamp(32px, 3vw, 43px); color: #ffe19e; }
.upgrade-shelf { background: #153624e6; }
.upgrade-grid { gap: 6px; }
.upgrade-icon-button { background: radial-gradient(circle, #50644a, #263529); border: 3px ridge #d4a64d; border-radius: 7px; }
.upgrade-sprite { width: 46px; height: 46px; }
.upgrade-tier { position: absolute; right: -3px; bottom: -4px; min-width: 16px; height: 17px; line-height: 17px; text-align: center; color: #2c210e; font: 800 11px/17px "Segoe UI", sans-serif; background: #ffdb75; border: 1px solid #6a4a20; border-radius: 4px; box-shadow: 0 1px 4px #0007; }
.upgrade-tooltip { background: linear-gradient(110deg, #263c2dfb, #121f1afb); border-color: #f7cc75; }
.tooltip-category { background: #edca80; color: #3a260a; }
.shop-controls { background: #173c2a; }
.shop-controls button.active { color: #ffe49d; }
.product { background: linear-gradient(105deg, #f8e5b9ee, #e8d4a8f2 55%, #c9b083e8); border-color: #c89e55; border-top-color: #ffdf96; border-bottom-color: #795b30; color: #2c3b29; }
.product:disabled { background: linear-gradient(105deg, #abbca1, #a5b29f 55%, #8a9d86); color: #213429; border-top-color: #c6ceaa; }
.product-icon { width: 62px; height: 67px; }
.building-icon { filter: drop-shadow(0 3px 3px #503d2e6d); }
.product-name { color: #2d4c2e; text-shadow: 0 1px #fff0c980; font-size: clamp(16px, 1.25vw, 22px); letter-spacing: -.3px; }
.product-description { color: #4f6145; font-size: 9px; }
.product-price { color: #496020; }
.product:disabled .product-price { color: #6d3824; }
.product-pps { color: #36583c; }
.product-owned { color: #386046bd; }
.currency { background: #ffda4f; border-color: #a77927; color: #674a11; }
.shop-tip { background: #153e30bb; color: #e2ebd5; }
.shop-footer { color: #f1d58f; background: #153f2cae; }
.toast { background: #213e2df5; border-color: #eac474; }
dialog { background: #22422e; border-color: #c89c53; }
.dialog-note { background: #173326; }
@media (max-width: 860px) {
    .brand-mark { padding: 20px 8px 12px; }
    .bakery-name { font-size: 32px; }
    .click-panel { min-height: 600px; }
    .product-name { font-size: 24px; }
}
@media (max-width: 390px) {
    .brand-kicker { font-size: 8px; letter-spacing: 1.5px; }
    .brand-subtitle { font-size: 9px; }
    .product-name { font-size: 21px; }
}

/* Legado, minijuegos y eventos de la edición ampliada */
.wood-special { border-color: #f0cd6f; color: #ffe9a3; background: linear-gradient(#765125, #422b19); }
.center-header { min-height: 154px; }
.legacy-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 22px 0; }
.legacy-stats > div { background: linear-gradient(135deg, #345938, #203e2d); border: 1px solid #b8ab69; padding: 15px 12px; min-width: 0; }
.legacy-stats small { color: #d6dbb9; display: block; font-size: 11px; }
.legacy-stats strong { display: block; color: #ffe18b; font: 750 30px Georgia, serif; margin-top: 7px; overflow-wrap: anywhere; }
.legacy-ascend { width: 100%; margin: 9px 0 25px; font-size: 17px; background: linear-gradient(#976b23, #62441c); border-color: #f6d88c; padding: 16px 12px; }
.celestial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.celestial-card { min-height: 132px; display: flex; flex-direction: column; text-align: left; gap: 8px; padding: 12px; background: radial-gradient(circle at top left, #587050, #243b31); border: 2px solid #c3a862; border-radius: 8px; }
.celestial-card strong { color: #ffe09e; font: 750 14px Georgia, serif; }
.celestial-card small { color: #d5e5cd; line-height: 1.5; font-size: 10px; }
.celestial-card em { color: #ffe29a; margin-top: auto; font: 800 11px "Segoe UI", sans-serif; }
.celestial-card.owned { border-color: #cde4a4; background: #496844; }
.celestial-card:disabled:not(.owned) { opacity: .56; }
.system-box { border: 1px solid #8fa67c; background: #0d2b23a8; padding: 14px; margin: 15px 0; border-radius: 9px; }
.system-box h3 { margin: 0 0 10px; font: 750 18px Georgia, serif; color: #ffe19a; }
.system-box p { font-size: 11px; line-height: 1.7; color: #d9e5c8; }
.season-status { display: flex; flex-direction: column; padding: 14px; background: #67754555; border: 1px solid #b4a96d; border-radius: 8px; gap: 6px; }
.season-status strong { color: #ffdf8e; }
.season-status span { color: #dce8d2; font-size: 12px; }
.system-scroll { display: grid; grid-template-columns: 1fr; gap: 7px; max-height: 350px; overflow: auto; padding-right: 4px; }
.nivel-card { display: flex; text-align: left; gap: 10px; padding: 7px 10px; align-items: center; background: #42634b; border: 1px solid #b6b27c; border-radius: 5px; min-width: 0; }
.nivel-card img { object-fit: contain; image-rendering: pixelated; flex: none; }
.nivel-card span { min-width: 0; }
.nivel-card strong { display: block; font-size: 12px; }
.nivel-card small { display: block; font-size: 10px; color: #e4e4be; margin-top: 3px; }
.nivel-card:disabled { opacity: .56; }
.system-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.system-actions .wood-button { font-size: 12px; padding: 10px; }
.mini-choice { min-width: 90px; flex: 1 1 115px; text-align: center; padding: 10px 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid #aeb47e; border-radius: 6px; background: #426348; }
.mini-choice img { object-fit: contain; }
.mini-choice strong { font-size: 11px; }
.mini-choice small { font-size: 9px; color: #e2e5c9; line-height: 1.4; }
.mini-choice.chosen { color: #ffe7a4; outline: 2px solid #ffdc7d; background: #647a43; }
.mini-choice:disabled:not(.chosen) { opacity: .5; }
.huerto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; max-width: 305px; margin: 14px auto; }
.huerto-slot { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 91px; gap: 3px; background: repeating-linear-gradient(30deg, #664323 0 12px, #7b4b24 12px 24px); border: 3px ridge #8b6a30; border-radius: 8px; }
.huerto-slot img { width: 59px; height: 59px; object-fit: contain; image-rendering: pixelated; }
.huerto-slot small { font-size: 10px; background: #163524d9; padding: 2px 5px; border-radius: 3px; }
.huerto-slot .plant-add { font-size: 28px; font-weight: 700; color: #b9e585; }
.huerto-slot.mature { border-color: #f8da69; box-shadow: 0 0 13px #e5cb62b5; }
.huerto-slot:disabled { filter: grayscale(1); opacity: .45; }
.market-row { display: grid; grid-template-columns: 1fr 70px 70px; align-items: center; gap: 5px; background: #3a5842; border: 1px solid #6d8665; padding: 7px; }
.market-row strong { font-size: 11px; }
.market-row small { font-size: 9px; color: #e6ddb5; display: block; }
.market-row button { font-size: 10px; padding: 7px 3px; color: #fff2cc; border: 1px solid #c5a86b; background: #507644; border-radius: 3px; }
.market-row .market-sell { background: #7a5133; }
.market-row button:disabled { opacity: .45; }
.golden-lemon { position: absolute; z-index: 7; left: 68%; top: 18%; width: 94px; height: 106px; background: #fff9ce1a; border: 3px solid #ffeb7e; border-radius: 50%; display: grid; place-items: center; padding: 3px; animation: golden-pulse 1.1s ease-in-out infinite alternate; box-shadow: 0 0 15px #ffe069, 0 0 40px #ffe069a0; }
.golden-lemon img { max-width: 76px; max-height: 75px; object-fit: contain; filter: brightness(1.24) saturate(1.4) drop-shadow(0 0 4px #ffff68); }
.golden-lemon span { position: absolute; bottom: -20px; font: 800 10px "Segoe UI", sans-serif; white-space: nowrap; background: #6b501a; color: #fff1a5; padding: 2px 5px; border: 1px solid #ffdc7f; }
.gusanos-panel { position: absolute; bottom: 4px; left: 5%; z-index: 8; display: flex; gap: 4px; }
.gusanos-panel button { border: 1px solid #c5da79; background: #48612e; font-size: 19px; padding: 5px; border-radius: 50%; }
.save-import { width: 100%; min-height: 93px; max-width: 100%; background: #0b241b; border: 1px solid #b5c68e; padding: 10px; color: #e6f2d9; font: 10px/1.5 monospace; }
.save-import:focus-visible { outline: 2px solid #ffdf94; }
@keyframes golden-pulse { from { transform: scale(.94) rotate(-7deg); } to { transform: scale(1.08) rotate(7deg); } }
@media (max-width: 860px) {
    .center-header { min-height: 165px; }
    .golden-lemon { left: 68%; top: 8%; width: 73px; height: 82px; }
    .golden-lemon img { max-width: 55px; max-height: 60px; }
}
@media (max-width: 520px) {
    .celestial-grid { grid-template-columns: 1fr; }
    .legacy-stats strong { font-size: 23px; }
    .market-row { grid-template-columns: 1fr 61px 61px; }
    .system-box { padding: 10px; }
}

@media (min-width: 861px) and (max-height: 1080px) {
    .click-panel {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .brand-mark {
        padding: 9px 10px 10px;
    }

    .click-stage {
        height: clamp(260px, 34vh, 370px);
        margin-top: 4px;
    }

    .click-hint {
        margin: 4px 10px 8px;
    }

    .left-footer {
        gap: 6px;
        padding: 5px 12px 10px;
    }
}