:root {
  --ink: #233f3b;
  --forest: #315f55;
  --cream: #fff9e9;
  --paper: #fffdf4;
  --gold: #f6bf43;
  --orange: #ee7948;
  --coral: #e95d49;
  --mint: #b7d9bb;
  --line: #decf9f;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background: #f3e6bd;
  font-synthesis: none;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
body { margin: 0; min-width: 320px; min-height: 100vh; background-color: #f2e6bd; background-image: radial-gradient(#e4d49f 1.4px, transparent 1.4px); background-size: 20px 20px; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 30px; }
.topbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-block { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50% 50% 44% 50%; background: var(--coral); color: white; font: 900 26px Georgia; border: 4px solid #fff3cf; box-shadow: 0 3px 0 #bd493b; transform: rotate(-5deg); }
.eyebrow { margin: 0 0 3px; font-size: 11px; font-weight: 900; letter-spacing: .16em; color: #86784b; }
h1 { margin: 0; font: 900 clamp(25px, 3vw, 36px)/1 Georgia, serif; color: var(--forest); }
.currency-counters { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.coin-counter { min-width: 126px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 9px 14px; border: 2px solid #c9b879; border-radius: 14px; background: rgba(255, 249, 226, .88); box-shadow: 0 3px 0 rgba(83, 62, 17, .1); }
.coin-counter-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid #ce8c28; border-radius: 50%; color: #c87929; background: var(--gold); font-size: 12px; }
.gem-counter { position: relative; min-width: 118px; overflow: hidden; border-color: #8970b8; background: linear-gradient(135deg, rgba(252, 246, 255, .96), rgba(230, 215, 255, .94)); box-shadow: 0 3px 0 rgba(87, 55, 128, .16), inset 0 0 18px rgba(255,255,255,.45); }
.gem-counter::after { content: "✦"; position: absolute; right: 6px; top: 3px; color: rgba(123, 83, 178, .28); font-size: 10px; }
.gem-counter-icon { flex: 0 0 38px; width: 38px; height: 32px; overflow: visible; filter: drop-shadow(0 3px 0 rgba(73, 42, 112, .35)); }
.gem-outline { fill: #62418f; stroke: #4e3278; stroke-width: 2; stroke-linejoin: round; }
.gem-top-left { fill: #e8c9ff; }
.gem-top-center { fill: #c998f3; }
.gem-top-right { fill: #a66cda; }
.gem-bottom-left { fill: #aa70dd; }
.gem-bottom-center { fill: #d9a8fb; }
.gem-bottom-right { fill: #7d4db8; }
.gem-shine { fill: rgba(255,255,255,.88); }
.gem-counter small { color: #735c91; }
.gem-counter strong { color: #4d3372; text-shadow: 0 1px 0 #fff; }
.coin-counter small, .coin-counter strong { display: block; }
.coin-counter small { color: #897d59; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.coin-counter strong { margin-top: 1px; font-family: inherit; font-size: 23px; font-weight: 900; }
.day-goal { min-width: 270px; display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 2px solid #c9b879; border-radius: 14px; background: rgba(255, 249, 226, .78); box-shadow: 0 3px 0 rgba(83, 62, 17, .1); }
.day-goal span, .day-goal strong { font-size: 12px; white-space: nowrap; }
.day-goal { grid-template-columns: auto 10px auto; }
.open-dot { width: 10px; height: 10px; border-radius: 50%; background: #69a76b; border: 2px solid #41754b; }
.goal-track, .arrival-track { height: 11px; overflow: hidden; border-radius: 20px; background: #dfd4af; border: 2px solid #caba89; }
.goal-track div, .arrival-track div { width: 0; height: 100%; background: var(--orange); transition: width .45s ease; }
.game-layout { display: block; border: 3px solid var(--forest); border-radius: 21px; overflow: hidden; background: var(--paper); box-shadow: 0 14px 0 rgba(67, 82, 44, .12), 0 22px 45px rgba(59, 52, 25, .18); }
.game-card { min-width: 0; background: #b9d3aa; }
.canvas-wrap { position: relative; aspect-ratio: 96 / 69; min-height: 470px; overflow: hidden; background: #b7d19d; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; outline: none; }
.side-fab { position: absolute; z-index: 12; right: 15px; width: 62px; height: 62px; display: grid; place-items: center; align-content: center; gap: 1px; transform: translateY(-50%); border: 3px solid var(--forest); border-radius: 13px; color: var(--ink); background: var(--gold); box-shadow: 0 5px 0 #9c6f27, 0 8px 18px rgba(35,63,59,.24); transition: transform .12s, box-shadow .12s; }
.shop-fab { top: calc(50% - 38px); }
.rewards-fab { top: calc(50% + 38px); background: #b8d8d4; box-shadow: 0 5px 0 #527b73, 0 8px 18px rgba(35,63,59,.24); }
.login-fab { top: calc(50% + 114px); background: #ffd39a; box-shadow: 0 5px 0 #ad7130, 0 8px 18px rgba(35,63,59,.24); }
.store-fab { left: 15px; right: auto; top: 50%; background: #fff0de; box-shadow: 0 5px 0 #b75b4e, 0 8px 18px rgba(35,63,59,.24); }
.settings-fab { left: 15px; right: auto; top: calc(50% + 76px); color: #273331; background: #c8ccca; box-shadow: 0 5px 0 #737b78, 0 8px 18px rgba(35,63,59,.24); }
.storefront-tab-icon { width: 36px; height: 31px; overflow: visible; filter: drop-shadow(0 2px 0 rgba(91, 49, 39, .22)); }
.storefront-body { fill: #f4d99e; stroke: #6f4438; stroke-width: 2; }
.storefront-roof, .storefront-awning { fill: #dc5549; stroke: #753c35; stroke-width: 1.5; stroke-linejoin: round; }
.storefront-stripe { fill: #fff9ea; }
.storefront-door { fill: #6f4438; }
.storefront-window { fill: #9dd8dc; stroke: #4c7776; stroke-width: 1; }
.side-fab span { font-size: 25px; line-height: 1; }
.side-fab small { font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.side-fab:hover { transform: translateY(calc(-50% - 2px)); }
.side-fab:active { transform: translateY(calc(-50% + 2px)); box-shadow: 0 2px 0 #527b73; }
.status-effect-stack { position: absolute; z-index: 11; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.status-effect { width: 52px; height: 52px; display: grid; place-items: center; align-content: center; gap: 1px; border: 2px solid #7e5a1e; border-radius: 8px; color: #4f4125; background: #fff1a8; box-shadow: 0 3px 0 #9c6f27, 0 5px 10px rgba(35,63,59,.2); }
.double-coin-icon { height: 16px; display: flex; align-items: center; justify-content: center; }
.double-coin-icon span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #ce8c28; border-radius: 50%; color: #c87929; background: var(--gold); font-size: 5px; }
.double-coin-icon span + span { margin-left: -4px; transform: translateY(2px); }
.status-effect strong { font-size: 6px; letter-spacing: .04em; }
.status-effect > span { font: 900 10px Georgia, serif; }
.double-fruit-effect { border-color: #7f3c2e; background: #ffe0b0; box-shadow: 0 5px 0 #a94c3c, 0 8px 18px rgba(35,63,59,.22); }
.triple-fruit-effect { border-color: #3f7048; color: #315b3a; background: #d9efbd; box-shadow: 0 5px 0 #5f874e, 0 8px 18px rgba(35,63,59,.22); }
.triple-cash-effect { border-color: #554277; color: #44345e; background: #e8dcff; box-shadow: 0 5px 0 #6d5894, 0 8px 18px rgba(35,63,59,.22); }
.triple-cash-effect .double-coin-icon span { border-color: #8b6db7; color: #70529e; background: #d5bbff; }
.double-fruit-icon { height: 16px; display: flex; align-items: center; justify-content: center; }
.double-fruit-icon span { font-size: 15px; line-height: 1; }
.double-fruit-icon span + span { margin-left: -5px; transform: translateY(2px); }
.triple-fruit-icon { height: 16px; display: flex; align-items: center; justify-content: center; }
.triple-fruit-icon span { font-size: 13px; line-height: 1; }
.triple-fruit-icon span + span { margin-left: -6px; }
.triple-fruit-icon span:nth-child(2) { transform: translateY(3px); }
.market-panel { display: flex; flex-direction: column; background: #fff9e7; border-left: 3px solid var(--forest); }
.panel-section { padding: 22px; border-bottom: 2px dashed #d8c898; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.section-heading h2 { margin: 0; font: 800 20px/1.1 Georgia, serif; }
.pin { width: 10px; height: 10px; margin: 4px; border-radius: 50%; background: var(--coral); box-shadow: 0 2px 0 #aa4035; }
.order-ticket { margin-top: 14px; padding: 11px; display: flex; gap: 12px; align-items: center; background: #fffefa; border: 2px solid #d7c690; border-radius: 12px; box-shadow: 0 4px 0 #e4d7ad; transform: rotate(-.5deg); }
.order-art { flex: 0 0 58px; height: 58px; display: grid; place-items: center; font-size: 34px; background: #f8e9af; border-radius: 9px; }
.order-ticket strong, .order-ticket span { display: block; }
.order-ticket strong { font: 800 17px Georgia, serif; }
.order-ticket span { margin-top: 5px; color: #85784f; font-size: 12px; }
.order-tip { margin: 14px 0 0; display: flex; gap: 9px; font-size: 13px; line-height: 1.35; color: #5e664f; }
.order-tip span, .quick-help span { flex: 0 0 20px; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 900; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.stat { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px 8px; border: 2px solid #d7c690; background: #fff; border-radius: 10px; }
.stat > span { flex: 0 0 29px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.coin-icon { background: var(--gold); color: #c87929; border: 2px solid #da9430; }
.stock-icon { background: #c8e0ba; color: var(--forest); }
.stat small, .stat strong { display: block; }
.stat small { font-size: 9px; color: #897d59; font-weight: 900; }
.stat strong { margin-top: 2px; font: 900 22px Georgia, serif; }
.section-heading.compact { align-items: center; }
.section-heading.compact h2 { font-size: 17px; }
.shopper-face { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #e5a26e; font-size: 23px; border: 2px solid #c57c54; }
.queue-section > p { margin: 11px 0; color: #746f54; font-size: 12px; line-height: 1.4; }
.arrival-track { height: 9px; }
.arrival-track div { width: 0; background: #75aa78; }
.upgrade-section { margin-top: auto; padding: 14px 18px 17px; background: var(--forest); }
.upgrade-button { width: 100%; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 10px; padding: 10px; text-align: left; border: 2px solid #f1cf6b; border-radius: 11px; color: #fff9df; background: #426f63; box-shadow: 0 4px 0 #24483f; transition: transform .12s, background .12s; }
.upgrade-button:hover { transform: translateY(-1px); background: #4b7c6e; }
.upgrade-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #24483f; }
.upgrade-button-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); background: var(--gold); font-size: 21px; font-weight: 900; }
.upgrade-button small, .upgrade-button strong { display: block; }
.upgrade-button small { margin-bottom: 2px; color: #c9dfc8; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.upgrade-button strong { font: 800 18px Georgia, serif; }
.upgrade-button > b { font-size: 21px; }
.quick-help { margin-top: auto; padding: 18px 22px; color: #fdf6d7; background: var(--forest); }
.quick-help b { font-size: 10px; letter-spacing: .15em; color: #c4d8b4; }
.quick-help p { margin: 9px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.quick-help span { background: #f2c451; color: var(--ink); }

.overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(35, 63, 59, .65); backdrop-filter: blur(2px); transition: opacity .2s ease; }
.overlay.hidden { display: none; }
.welcome-card, .math-card, .cheat-card { position: relative; width: min(480px, 95%); padding: 30px; text-align: center; border: 4px solid var(--forest); border-radius: 18px; background: var(--cream); box-shadow: 8px 9px 0 rgba(34, 63, 58, .3); }
.welcome-card::after, .math-card::after, .cheat-card::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px dashed #d6bd70; border-radius: 10px; }
.welcome-card h2 { margin: 6px 0 12px; font: 900 38px/1.05 Georgia, serif; color: var(--forest); }
.welcome-card h2 em { color: var(--coral); font-style: normal; }
.welcome-card > p:not(.eyebrow,.big-emoji) { max-width: 380px; margin: 0 auto 20px; line-height: 1.45; color: #63664f; }
.tiny-sun { width: 27px; height: 27px; margin: 0 auto 9px; border: 6px solid #f4b73b; background: #f9dc72; border-radius: 50%; box-shadow: 0 -12px 0 -9px #e8942d, 0 12px 0 -9px #e8942d, 12px 0 0 -9px #e8942d, -12px 0 0 -9px #e8942d; }
.how-to { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 17px 0 23px; }
.how-to > div { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; padding: 11px; border: 2px solid #dfd2a4; border-radius: 10px; background: white; }
.key-icon { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; margin-right: 8px; background: #f3ecd0; border: 2px solid #b9aa79; border-radius: 7px; box-shadow: 0 3px 0 #b9aa79; font-weight: 900; }
.how-to b { font-size: 13px; }
.how-to small { font-size: 10px; color: #817858; }
.primary-button { position: relative; z-index: 1; width: 100%; padding: 14px 17px; border: 0; border-radius: 8px; color: #fffdf1; background: var(--coral); box-shadow: 0 5px 0 #af4438; font-weight: 900; letter-spacing: .05em; transition: transform .1s, box-shadow .1s; }
.primary-button:hover { transform: translateY(2px); box-shadow: 0 3px 0 #af4438; }
.primary-button span { float: right; font-size: 20px; line-height: 16px; }
.math-card { text-align: left; width: min(490px, 95%); }
.cheat-card { width: min(460px, 95%); text-align: left; }
.cheat-card > * { position: relative; z-index: 1; }
.cheat-card h2 { margin: 5px 0 8px; color: #50456f; font: 900 36px/1 Georgia, serif; }
.cheat-intro { margin: 0 0 19px; color: #6f6b50; font-size: 13px; }
.cheat-card label { display: block; margin-bottom: 6px; color: #6d618b; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.cheat-code-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.cheat-code-row input { min-width: 0; width: 100%; padding: 12px 14px; border: 3px solid #8e7db4; border-radius: 8px; outline: none; background: #222f35; color: #aaf2b4; font: 900 20px monospace; text-transform: uppercase; }
.cheat-code-row input:focus { box-shadow: 0 0 0 3px #d9cff1; }
.cheat-code-row button { padding: 0 18px; border: 2px solid #3b315a; border-radius: 8px; color: white; background: #66558e; box-shadow: 0 4px 0 #3b315a; font-size: 11px; font-weight: 900; }
.cheat-feedback { min-height: 18px; margin: 13px 0; color: #766d4c; font-size: 12px; }
.cheat-feedback.good { color: #347148; font-weight: 900; }
.cheat-feedback.bad { color: #bd4e3e; font-weight: 900; }
.cheat-status { padding: 10px; text-align: center; border: 2px solid #aa9dc9; border-radius: 7px; color: #746b87; background: #eee9f5; font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.cheat-status.enabled { border-color: #59905f; color: #2f6d3b; background: #dff2dc; }
.upgrade-modal-card { position: relative; width: min(510px, 95%); max-height: calc(100% - 24px); overflow-y: auto; padding: 28px; border: 4px solid var(--forest); border-radius: 18px; background: var(--cream); box-shadow: 8px 9px 0 rgba(34, 63, 58, .3); }
.upgrade-modal-card::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px dashed #d6bd70; border-radius: 10px; }
.upgrade-modal-card > * { position: relative; z-index: 1; }
.upgrade-modal-card h2 { margin: 3px 0 8px; font: 900 36px/1 Georgia, serif; color: var(--forest); }
.upgrade-intro { margin: 0 0 17px; color: #6f6b50; font-size: 13px; line-height: 1.4; }
.shop-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shop-group-card { min-width: 0; min-height: 138px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 16px 12px; border: 3px solid #d2bd78; border-radius: 13px; color: var(--ink); background: #fffdf5; box-shadow: 0 4px 0 #c2aa65; transition: transform .12s, border-color .12s; }
.shop-group-card:hover { transform: translateY(-2px); border-color: var(--orange); }
.shop-group-card > span { font-size: 36px; }
.shop-group-card strong { font: 900 21px Georgia, serif; }
.shop-group-card small { color: #817858; font-size: 10px; }
.shop-group-card.orange-group, .shop-group-card.blender-group, .shop-group-card.banana-group, .shop-group-card.pear-group { min-height: 112px; border-color: #e3a04b; background: #fff4dc; }
.shop-group-card.pear-group { border-color: #a7b452; background: #f3f5d8; }
.shop-group-panel h3 { margin: 4px 0 13px; color: var(--forest); font: 900 24px Georgia, serif; }
.shop-back-button { padding: 6px 9px; border: 2px solid #b8a66e; border-radius: 6px; color: #6c654d; background: #f4ecd2; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.orange-info-item { border-color: #e3a04b; background: #fff4dc; }
.upgrade-list { display: grid; gap: 9px; }
.upgrade-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 2px solid #d8c898; border-radius: 10px; background: #fffefa; }
.upgrade-item > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #f5e7b6; font-size: 23px; }
.upgrade-item strong, .upgrade-item small { display: block; }
.upgrade-item strong { font: 800 15px Georgia, serif; }
.upgrade-item small { margin-top: 3px; color: #817858; font-size: 10px; }
.upgrade-item > b { padding: 5px 7px; border-radius: 5px; color: #746d55; background: #e7dfc5; font-size: 9px; letter-spacing: .1em; }
.upgrade-item-active { border-color: #e0b948; background: #fffaf0; }
.buy-upgrade { min-width: 66px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; border: 2px solid #9c6f27; border-radius: 8px; color: #4f4125; background: var(--gold); box-shadow: 0 3px 0 #9c6f27; font-size: 12px; font-weight: 900; }
.buy-upgrade i { width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; color: #b76f21; background: #ffe27a; font-size: 8px; font-style: normal; }
.buy-upgrade:hover:not(:disabled) { transform: translateY(-1px); }
.buy-upgrade:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #9c6f27; }
.buy-upgrade:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .48; box-shadow: none; }
.upgrade-note { margin: 14px 0 0; text-align: center; color: #8b7c50; font-size: 11px; font-weight: 900; }
.rewards-modal-card { position: relative; width: min(510px, 95%); max-height: calc(100% - 24px); overflow-y: auto; padding: 28px; border: 4px solid var(--forest); border-radius: 18px; background: var(--cream); box-shadow: 8px 9px 0 rgba(34, 63, 58, .3); }
.rewards-modal-card::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px dashed #d6bd70; border-radius: 10px; }
.rewards-modal-card > * { position: relative; z-index: 1; }
.rewards-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.rewards-heading h2 { margin: 3px 0 6px; color: var(--forest); font: 900 34px/1 Georgia, serif; }
.rewards-heading p { margin: 0; color: #746f54; font-size: 12px; }
.rewards-clock { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #527b73; border-radius: 50%; background: #b8d8d4; font-size: 29px; }
.rewards-time-preview { display: grid; grid-template-columns: 1fr auto; align-items: center; margin: 18px 0 13px; padding: 12px 14px; border: 2px solid #9dbcb5; border-radius: 10px; background: #e4f1e8; }
.rewards-time-preview small { color: #668078; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.rewards-time-preview strong { grid-row: 1 / 3; grid-column: 2; color: var(--forest); font: 900 27px Georgia, serif; }
.rewards-time-preview span { margin-top: 2px; color: #8b7c50; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.rewards-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; padding: 5px; border: 2px solid #b9aa79; border-radius: 10px; background: #eee4c5; }
.rewards-tabs button { padding: 9px; border: 0; border-radius: 7px; color: #756e50; background: transparent; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.rewards-tabs button.active { color: white; background: var(--forest); box-shadow: 0 3px 0 #233f3b; }
.playtime-progress { height: 12px; margin: -5px 2px 13px; overflow: hidden; border: 2px solid #caba89; border-radius: 20px; background: #dfd4af; }
.playtime-progress div { width: 0; height: 100%; background: var(--gold); transition: width .3s ease; }
.reward-list { display: grid; gap: 8px; }
.reward-item { display: grid; grid-template-columns: 52px 39px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 2px solid #d8c898; border-radius: 10px; background: #fffefa; }
.reward-item > span { color: #8b7040; font-size: 9px; font-weight: 900; }
.reward-item > b { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 9px; background: #f5e7b6; font-size: 21px; }
.reward-item > b.gem-reward-icon { border: 0; background: transparent; box-shadow: none; }
.reward-gem-svg { width: 36px; height: 31px; overflow: visible; filter: drop-shadow(0 2px 0 rgba(73, 42, 112, .28)); }
.reward-item strong, .reward-item small { display: block; }
.reward-item strong { font: 800 14px Georgia, serif; }
.reward-item small { margin-top: 2px; color: #817858; font-size: 9px; }
.reward-item > i { padding: 5px 7px; border-radius: 5px; color: #746d55; background: #e7dfc5; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .09em; }
.reward-item-active { border-color: #d8ab38; background: #fff9df; }
.claim-reward { min-width: 68px; padding: 8px 7px; border: 2px solid #9c6f27; border-radius: 7px; color: #4f4125; background: var(--gold); box-shadow: 0 3px 0 #9c6f27; font-size: 8px; font-weight: 900; }
.claim-reward:disabled { cursor: not-allowed; border-color: #b8ad8b; color: #827960; background: #ded6bd; box-shadow: none; }
.claim-reward.claimed { color: #f8f3da; border-color: #315f55; background: #4f8174; }
.weekly-placeholder { display: grid; place-items: center; gap: 6px; margin-top: 13px; padding: 28px 16px; text-align: center; border: 2px dashed #b9aa79; border-radius: 11px; color: #746f54; background: #fffefa; }
.weekly-placeholder > span { font-size: 35px; }
.weekly-placeholder strong { font: 800 17px Georgia, serif; color: var(--forest); }
.weekly-placeholder small { font-size: 10px; }
.rewards-note { margin: 13px 0 0; text-align: center; color: #8b7c50; font-size: 10px; font-weight: 900; }
.login-modal-card { position: relative; width: min(540px, 95%); max-height: calc(100% - 24px); overflow-y: auto; padding: 28px; border: 4px solid var(--forest); border-radius: 18px; background: var(--cream); box-shadow: 8px 9px 0 rgba(34, 63, 58, .3); }
.login-modal-card::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px dashed #d6bd70; border-radius: 10px; }
.login-modal-card > * { position: relative; z-index: 1; }
.login-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.login-heading h2 { margin: 3px 0 6px; color: var(--forest); font: 900 34px/1 Georgia, serif; }
.login-heading p { margin: 0; color: #746f54; font-size: 12px; }
.login-calendar-icon { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #ad7130; border-radius: 13px; background: #ffd39a; font-size: 29px; }
.login-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.login-day { min-height: 91px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 9px 5px; border: 2px solid #d8c898; border-radius: 10px; text-align: center; background: #fffefa; }
.login-day > span { color: #8b7040; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.login-day > b { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 24px; line-height: 1; }
.login-day > b > span { font-size: 17px; }
.login-gem-icon { width: 25px; height: 22px; overflow: visible; filter: drop-shadow(0 2px 0 rgba(73, 42, 112, .25)); }
.login-day > small { color: #817858; font-size: 8px; font-weight: 900; }
.login-day.current { border-color: #d8932f; background: #fff3cf; box-shadow: inset 0 0 0 2px #ffe29a; }
.login-day.claimed { border-color: #5e8b75; background: #e4f1e8; }
.login-day.claimed > b { color: #347148; }
.login-day:last-child { grid-column: 2 / 4; }
.login-claim-button { width: 100%; min-height: 58px; margin-top: 14px; padding: 15px 18px; border: 3px solid #858b88; border-radius: 12px; color: #606562; background: linear-gradient(180deg, #d7d9d8, #b9bdbc); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); font-size: 12px; font-weight: 900; letter-spacing: .08em; transition: transform .12s, box-shadow .12s, filter .18s; }
.login-claim-button:disabled { cursor: not-allowed; opacity: 1; }
.login-claim-button.ready { color: #fffdf4; border-color: #7545a5; background: linear-gradient(100deg, #7650b4, #c45bb1 50%, #ed9a42); box-shadow: 0 5px 0 #593384, 0 8px 22px rgba(126, 70, 165, .32), inset 0 2px 0 rgba(255,255,255,.32); text-shadow: 0 1px 0 rgba(65, 34, 83, .45); }
.login-claim-button.ready:hover { transform: translateY(-2px); filter: saturate(1.12) brightness(1.05); }
.login-claim-button.ready:active { transform: translateY(2px); box-shadow: 0 2px 0 #593384, 0 4px 12px rgba(126, 70, 165, .25); }
.login-note { margin: 13px 0 0; text-align: center; color: #8b7c50; font-size: 10px; font-weight: 900; }
.gem-store-modal-card { position: relative; width: min(650px, 95%); max-height: calc(100% - 24px); overflow-y: auto; padding: 28px; border: 4px solid #a84f43; border-radius: 18px; background: linear-gradient(145deg, #fffdf4, #fff0d8); box-shadow: 8px 9px 0 rgba(102, 57, 38, .28); }
.gem-store-modal-card::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px dashed #d49a66; border-radius: 10px; }
.gem-store-modal-card > * { position: relative; z-index: 1; }
.gem-store-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 2px solid #dfbd8e; }
.gem-store-heading h2 { margin: 3px 0 4px; color: var(--forest); font: 900 34px/1 Georgia, serif; }
.gem-store-heading p { margin: 0; color: #806c4c; font-size: 10px; font-weight: 800; }
.premium-gem-balance { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 2px solid #9670b8; border-radius: 11px; background: #f5eaff; }
.premium-balance-gem { width: 31px; height: 27px; overflow: visible; filter: drop-shadow(0 2px 0 rgba(73, 42, 112, .25)); }
.premium-gem-balance small, .premium-gem-balance strong { display: block; }
.premium-gem-balance small { color: #776287; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.premium-gem-balance strong { color: #563779; font: 900 19px Georgia, serif; }
.gem-store-menu-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 15px; }
.premium-boost-card { padding: 13px; border: 2px solid #cfaa70; border-radius: 13px; background: #fffaf0; box-shadow: 0 3px 0 rgba(103, 71, 35, .1); }
.premium-money-card { border-color: #d09a39; background: #fff7d8; }
.premium-fruit-card { border-color: #78a878; background: #edf6df; }
.premium-boost-title { display: flex; align-items: center; gap: 9px; min-height: 49px; margin-bottom: 10px; }
.premium-boost-icon { min-width: 42px; color: #d08b22; font-size: 17px; letter-spacing: -5px; text-shadow: 2px 1px 0 #ffe18a; }
.premium-fruit-card .premium-boost-icon { font-size: 21px; letter-spacing: -9px; text-shadow: none; }
.premium-boost-title strong, .premium-boost-title small { display: block; }
.premium-boost-title strong { color: var(--forest); font: 900 17px Georgia, serif; }
.premium-boost-title small { margin-top: 2px; color: #7e7456; font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.premium-purchase-options { display: grid; gap: 8px; }
.premium-buy-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; border: 2px solid #a65b43; border-radius: 8px; color: #fffaf0; background: #d96850; box-shadow: 0 3px 0 #8f4435; font-size: 9px; font-weight: 900; }
.premium-buy-button b { padding: 3px 6px; border-radius: 9px; color: #4f356e; background: #f2dcff; font: 900 11px Georgia, serif; white-space: nowrap; }
.premium-buy-button i { display: inline-flex; align-items: center; font-style: normal; vertical-align: middle; }
.premium-price-gem { width: 16px; height: 14px; overflow: visible; }
.premium-buy-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.premium-buy-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8f4435; }
.premium-buy-button:disabled { cursor: not-allowed; color: #777b78; border-color: #a7aaa8; background: #c7cac8; box-shadow: none; }
.premium-buy-button:disabled b { color: #77717c; background: #e4e1e5; }
.settings-modal-card { position: relative; width: min(560px, 95%); max-height: calc(100% - 24px); overflow-y: auto; padding: 28px; border: 4px solid #4f5956; border-radius: 18px; background: var(--cream); box-shadow: 8px 9px 0 rgba(34, 63, 58, .3); }
.settings-modal-card::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px dashed #aeb5b1; border-radius: 10px; }
.settings-modal-card > * { position: relative; z-index: 1; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.settings-heading h2 { margin: 3px 0 6px; color: var(--forest); font: 900 34px/1 Georgia, serif; }
.settings-heading p { margin: 0; color: #746f54; font-size: 12px; }
.settings-cog { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #626b68; border-radius: 50%; color: #3e4845; background: #c8ccca; font-size: 31px; }
.music-setting-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; margin: -2px 0 14px; padding: 10px 12px; border: 2px solid #9dbcb5; border-radius: 11px; background: #e7f1e8; }
.music-setting-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #f8f5dc; background: #527b73; font-size: 21px; }
.music-setting-row strong, .music-setting-row small { display: block; }
.music-setting-row strong { font: 900 15px Georgia, serif; }
.music-setting-row small { margin-top: 2px; color: #6e7c72; font-size: 9px; }
.music-toggle { min-width: 48px; padding: 8px 9px; border: 2px solid #858d89; border-radius: 18px; color: #59605d; background: #d5d9d7; font-size: 9px; font-weight: 900; }
.music-toggle.active { color: #f8f5dc; border-color: #315f55; background: #4f8174; }
.music-volume-row { margin: -7px 0 14px; padding: 9px 12px 11px; border: 2px solid #b9cbc2; border-top: 0; border-radius: 0 0 11px 11px; background: #f1f7ed; }
.music-volume-row label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #64746b; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.music-volume-row output { color: var(--forest); font: 900 12px Georgia, serif; letter-spacing: 0; }
.music-volume-row input[type="range"] { width: 100%; height: 18px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; outline: none; background: transparent; accent-color: #4f8174; }
.music-volume-row input[type="range"]::-webkit-slider-runnable-track { height: 7px; border: 1px solid #789085; border-radius: 10px; background: #cbdcd1; }
.music-volume-row input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid #315f55; border-radius: 50%; background: #fff9e9; box-shadow: 0 2px 0 #7d9488; -webkit-appearance: none; }
.music-volume-row input[type="range"]::-moz-range-track { height: 7px; border: 1px solid #789085; border-radius: 10px; background: #cbdcd1; }
.music-volume-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #315f55; border-radius: 50%; background: #fff9e9; box-shadow: 0 2px 0 #7d9488; }
.notation-setting-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 2px solid #c9bea0; border-radius: 11px; background: #fffefa; }
.notation-setting-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff8e7; background: #9c6f27; font: 900 11px Georgia, serif; }
.notation-setting-row label, .notation-setting-row small { display: block; }
.notation-setting-row label { color: var(--forest); font: 900 15px Georgia, serif; }
.notation-setting-row small { margin-top: 2px; color: #817858; font-size: 9px; }
.notation-setting-row select { min-width: 112px; padding: 8px 28px 8px 9px; border: 2px solid #9c8b61; border-radius: 8px; outline: none; color: #3e4845; background: #fff9e9; font-size: 10px; font-weight: 900; cursor: pointer; }
.notation-setting-row select:focus { border-color: #527b73; box-shadow: 0 0 0 3px #d9e8df; }
.save-code-section { padding: 14px; border: 2px solid #c9bea0; border-radius: 12px; background: #fffefa; }
.save-code-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.save-code-title > span { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--forest); font: 900 15px Georgia, serif; }
.save-code-title strong, .save-code-title small { display: block; }
.save-code-title strong { font: 900 17px Georgia, serif; }
.save-code-title small { margin-top: 2px; color: #817858; font-size: 10px; }
.save-action-button { width: 100%; padding: 11px 12px; border: 2px solid #59635f; border-radius: 8px; color: white; background: #737d79; box-shadow: 0 4px 0 #4d5552; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.save-action-button:hover:not(:disabled) { transform: translateY(-1px); }
.save-action-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #4d5552; }
.save-action-button:disabled { cursor: wait; opacity: .55; }
.load-save-button { margin-top: 9px; color: #4f4125; border-color: #9c6f27; background: var(--gold); box-shadow: 0 4px 0 #9c6f27; }
.save-code-label { display: block; margin: 11px 0 5px; color: #716a54; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.save-code-box { width: 100%; min-height: 76px; resize: vertical; padding: 10px; border: 2px solid #a9aaa0; border-radius: 8px; outline: none; color: #35403d; background: #f6f4eb; font: 700 10px/1.35 ui-monospace, Consolas, monospace; }
.save-code-box:focus { border-color: #626b68; box-shadow: 0 0 0 3px #d9ddda; }
.copy-code-button { width: 100%; margin-top: 7px; padding: 8px; border: 2px solid #8c948f; border-radius: 7px; color: #3e4845; background: #e3e6e4; font-size: 9px; font-weight: 900; }
.save-code-divider { height: 24px; display: grid; place-items: center; color: #8a8062; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.save-code-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #c7b98e; }
.save-code-divider span { padding: 0 8px; background: var(--cream); }
.save-load-feedback { min-height: 18px; margin: 12px 2px 0; color: #766d4c; font-size: 10px; font-weight: 800; line-height: 1.4; }
.save-load-feedback.good { color: #347148; }
.save-load-feedback.bad { color: #bd4e3e; }
.close-button { position: absolute; z-index: 3; right: 15px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e9dfbf; color: var(--ink); font-size: 24px; line-height: 1; }
.math-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.question-badge { padding: 6px 9px; border-radius: 5px; background: var(--forest); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.product-preview { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #f5e5a4; border: 3px solid #ddbe58; font-size: 38px; }
.question-context { position: relative; z-index: 1; margin: 7px 0 8px; color: #756e50; font-size: 14px; }
.question-text { position: relative; z-index: 1; display: block; margin: 0 0 20px; font: 900 clamp(31px, 5vw, 46px)/1.1 Georgia, serif; color: var(--forest); }
.answer-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.answer-row input { min-width: 0; width: 100%; padding: 12px 15px; border: 3px solid #b8aa79; border-radius: 8px; background: white; color: var(--ink); font: 900 23px Georgia, serif; outline: none; }
.answer-row input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px #f7d8a8; }
.answer-row button { border: 0; border-radius: 8px; padding: 0 19px; background: var(--gold); color: var(--ink); box-shadow: 0 4px 0 #c78f27; font-size: 12px; font-weight: 900; }
.math-feedback { position: relative; z-index: 1; min-height: 20px; margin: 12px 0; font-size: 12px; color: #766d4c; }
.math-feedback.good { color: #347148; font-weight: 900; }
.math-feedback.try { color: #bd4e3e; font-weight: 900; }
.streak-row { position: relative; z-index: 1; padding-top: 11px; border-top: 2px dashed #d8c898; display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.streak-dots { display: flex; gap: 5px; }
.streak-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ded4b5; }
.streak-dots i.filled { background: var(--orange); }
.toast { position: absolute; z-index: 10; left: 50%; top: 18px; transform: translate(-50%, -20px); padding: 10px 16px; opacity: 0; pointer-events: none; border: 3px solid var(--ink); border-radius: 8px; background: #fff8d5; color: var(--ink); box-shadow: 0 5px 0 rgba(35,63,59,.25); font-size: 13px; font-weight: 900; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.interaction-hint { position: absolute; z-index: 8; bottom: 18px; left: 50%; transform: translateX(-50%); min-width: 190px; padding: 9px 14px; text-align: center; border: 2px solid var(--ink); border-radius: 9px; color: white; background: rgba(35,63,59,.93); font-size: 12px; font-weight: 900; opacity: 0; transition: opacity .2s; }
.interaction-hint.show { opacity: 1; }
.ribbon { display: inline-block; margin-bottom: 2px; padding: 7px 14px; background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .14em; transform: rotate(-2deg); }
.big-emoji { margin: 8px 0 !important; font-size: 55px; }
.complete-card h2 { font-size: 37px; }
.mobile-controls { display: none; min-height: 112px; align-items: center; justify-content: space-between; padding: 10px 20px; background: #e2d5a8; border-top: 3px solid var(--forest); }
.dpad { width: 124px; height: 90px; position: relative; }
.dpad button { position: absolute; width: 42px; height: 42px; border: 2px solid var(--ink); border-radius: 8px; background: #fff8dc; color: var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 13px; touch-action: none; }
.dpad button[data-dir="up"] { left: 41px; top: 0; }
.dpad button[data-dir="left"] { left: 0; bottom: 0; }
.dpad button[data-dir="down"] { left: 41px; bottom: 0; }
.dpad button[data-dir="right"] { right: 0; bottom: 0; }
.action-button { width: 90px; height: 70px; border: 3px solid #a84437; border-radius: 50%; background: var(--coral); color: white; box-shadow: 0 5px 0 #a84437; font-weight: 900; }
.action-button span { display: block; font-size: 9px; opacity: .8; }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .panel-section { padding: 16px; }
  .canvas-wrap { min-height: 420px; }
}
@media (max-width: 820px) {
  .page-shell { width: min(100% - 16px, 720px); padding-top: 10px; }
  .topbar { min-height: 72px; }
  .day-goal { min-width: 0; grid-template-columns: auto 10px auto; }
  .game-layout { grid-template-columns: 1fr; }
  .market-panel { border-left: 0; border-top: 3px solid var(--forest); display: grid; grid-template-columns: 1fr 1fr; }
  .order-section { grid-row: span 2; }
  .queue-section { border-bottom: 0; }
  .quick-help { display: none; }
  .upgrade-section { grid-column: 1 / -1; margin-top: 0; }
  .mobile-controls { display: flex; }
  .canvas-wrap { min-height: 0; }
}
@media (max-width: 540px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
  .brand-mark { width: 43px; height: 43px; font-size: 21px; }
  .brand-block .eyebrow { display: none; }
  h1 { font-size: 24px; }
  .day-goal { padding: 8px 10px; gap: 8px; }
  .day-goal span { display: none; }
  .currency-counters { width: 100%; gap: 5px; }
  .coin-counter { min-width: 84px; padding: 7px 9px; gap: 6px; }
  .currency-counters .coin-counter { flex: 1; justify-content: center; }
  .coin-counter-icon { width: 25px; height: 25px; }
  .gem-counter-icon { width: 25px; height: 22px; }
  .coin-counter strong { font-size: 18px; }
  .game-layout { border-width: 2px; }
  .market-panel { grid-template-columns: 1fr; }
  .order-section { grid-row: auto; }
  .stats-section, .queue-section { padding: 14px 18px; }
  .welcome-card, .math-card, .cheat-card, .gem-store-modal-card, .settings-modal-card { padding: 24px 20px; }
  .gem-store-heading { align-items: flex-start; }
  .gem-store-menu-body { grid-template-columns: 1fr; }
  .welcome-card h2 { font-size: 31px; }
  .welcome-card > p:not(.eyebrow,.big-emoji) { font-size: 13px; }
  .how-to { margin: 12px 0 18px; }
  .how-to > div { grid-template-columns: 37px 1fr; padding: 8px; }
  .key-icon { width: 30px; height: 30px; }
  .answer-row { grid-template-columns: 1fr; }
  .answer-row button { padding: 12px; }
  .cheat-code-row { grid-template-columns: 1fr; }
  .cheat-code-row button { padding: 12px; }
  .shop-group-grid { grid-template-columns: 1fr; }
  .login-calendar { grid-template-columns: repeat(2, 1fr); }
  .login-day:last-child { grid-column: 1 / -1; }
  .question-text { font-size: 34px; }
}
@media (pointer: coarse) { .mobile-controls { display: flex; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }