/* «Сочный клинок»: сочный сад, дерево, глянцевые кнопки */
body { background: radial-gradient(circle at 50% 40%, #3ab04a, #135a28 70%, #0a3018); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }
#scr-menu { background: #5ab8ff; }
#cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.hud { pointer-events: none; }
.hud > * { pointer-events: auto; }
.btn-icon { width: 46px; height: 46px; border: 3px solid #3a1806; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#ffcf7a, #e8902a 50%, #a8561a); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #3a1806; }
.btn-icon:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #3a1806; }
.btn-icon svg { filter: drop-shadow(0 1px 0 #3a1806); }
.hud-pause { position: absolute; right: 10px; top: 10px; }

/* кнопки окон */
.btn { position: relative; min-width: 240px; min-height: 50px; padding: 0 18px; border: 3px solid #3a1806; border-radius: 16px; font: inherit; font-size: 18px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35); background: linear-gradient(#7ac8ff, #2a86e0 50%, #1a5ab0); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 #14161a, 0 8px 12px rgba(0,0,0,.3); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #14161a; }
.btn-play { min-height: 58px; font-size: 22px; background: linear-gradient(#ffe04a, #ff9a10 48%, #ff5a00 52%, #ff7a10); }
.btn-blue { background: linear-gradient(#7ac8ff, #2a86e0 50%, #1a5ab0); }
.btn-green { background: linear-gradient(#a8f07a, #34b03a 50%, #1a7a24); }
.btn-red { background: linear-gradient(#ffa0a8, #e8283a 50%, #a8101e); }
.btn-grey { background: linear-gradient(#c8ccd4, #7a808c 50%, #4a505a); }
.btn-sm { min-height: 42px; font-size: 15px; background: linear-gradient(#e8c8ff, #8a5ad8 50%, #5a2aa0); }
.btn-half { min-width: 0; flex: 1; font-size: 16px; }
.btn[disabled] { filter: grayscale(.8) brightness(.8); }

.overlay { background: rgba(20, 8, 30, .62); }
.panel { width: 330px; padding: 18px 18px 20px; border-radius: 24px; border: 4px solid #3a1806;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 46px, rgba(90,40,10,.18) 46px 48px), linear-gradient(#ffe0a8, #f2b866 60%, #d8903a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.2), 0 14px 30px rgba(0,0,0,.5); color: #3a1806; animation: popin .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes popin { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.panel-title { font-size: 28px; font-weight: 900; text-align: center; color: #fff; -webkit-text-stroke: 1.5px #7a2a00; text-shadow: 0 3px 0 #7a2a00; margin-bottom: 4px; }

/* результат */
.res-panel { gap: 9px; padding-top: 34px; }
.res-ribbon { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); min-width: 230px; padding: 8px 26px; text-align: center; border-radius: 14px; border: 3px solid #3a0010;
  background: linear-gradient(#ff8aa0, #e8102e 55%, #a8001e); color: #fff; font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 #5a0010; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #3a0010; white-space: nowrap; }
.res-ribbon.win { background: linear-gradient(#b8ff8a, #3ab03a 55%, #1a7a24); border-color: #0a3a0e; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #0a3a0e; text-shadow: 0 2px 0 #0a3a0e; }
.res-stars { display: flex; justify-content: center; gap: 4px; height: 66px; align-items: flex-end; }
.res-stars svg { width: 56px; height: 56px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.res-stars svg:nth-child(2) { width: 66px; height: 66px; }
.res-stars .pop { animation: starpop .45s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
.res-reason { text-align: center; font-size: 15px; font-weight: 800; color: #a8101e; min-height: 18px; }
.res-grid { display: flex; gap: 6px; }
.res-cell { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: rgba(90,40,10,.18); border: 2px solid rgba(90,40,10,.35); }
.res-cell span { font-size: 12px; font-weight: 800; color: #7a3a14; }
.res-cell b { font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #7a2a00, 0 0 2px #7a2a00; }
.res-coin b { color: #fff3a0; }
.res-new { display: none; text-align: center; font-size: 16px; font-weight: 900; color: #e8102e; animation: pulse 0.8s ease-in-out infinite; }
.res-new.show { display: block; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.res-row { display: flex; gap: 8px; }

/* карта уровней */
#scr-map { background: linear-gradient(#5ab8ff, #9ae070 60%, #3aa04a); }
.map-wrap { display: flex; flex-direction: column; }
.map-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-shrink: 0; }
.btn-round { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #3a1806; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 25%, #ffe08a, #e8902a 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #3a1806; }
.btn-round:active { transform: translateY(3px); }
.map-title { flex: 1; font-size: 28px; font-weight: 900; text-align: center; -webkit-text-stroke: 1.5px #7a2a00; text-shadow: 0 3px 0 #7a2a00; }
.map-coins { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(40,14,4,.55); font-weight: 900; color: #fff1a0; font-size: 17px; }
.map-list { flex: 1; min-height: 0; border-top: 4px solid #3a1806; }
.trail { position: relative; width: 100%; }
.zone { position: absolute; left: 0; right: 0; }
.zone.z0 { background: linear-gradient(#7ad84a, #4ab03a); }
.zone.z1 { background: linear-gradient(#ffe8a0, #f0c060 40%, #2ad0e8); }
.zone.z2 { background: linear-gradient(#ffb8f0, #d870e8); }
.zone.z3 { background: linear-gradient(#ffffff, #c8e8ff); }
.zone.z4 { background: linear-gradient(#5a2a2a, #a83a1a); }
.zone.z5 { background: linear-gradient(#0a0430, #3a1a8a); }
.zone.locked { filter: saturate(.35) brightness(.8); }
.decor { position: absolute; opacity: .9; filter: drop-shadow(0 4px 2px rgba(0,0,0,.25)); pointer-events: none; }
.road { position: absolute; left: 0; top: 0; pointer-events: none; }
.road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-edge { stroke: #5a3412; stroke-width: 34; }
.road-base { stroke: #e8c088; stroke-width: 26; }
.road-dash { stroke: rgba(255,255,255,.75); stroke-width: 4; stroke-dasharray: 10 12; }
.road-done { stroke: #ffd23f; stroke-width: 8; opacity: .85; }
.world-sign { position: absolute; left: 50%; transform: translateX(-50%); min-width: 230px; padding: 5px 16px; border-radius: 14px; border: 3px solid #3a1806; text-align: center; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 30px, rgba(90,40,10,.25) 30px 32px), linear-gradient(#ffd08a, #c8782a); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 #3a1806; pointer-events: none; }
.world-sign b { display: block; font-size: 17px; font-weight: 900; color: #fff; -webkit-text-stroke: 1px #5a2a00; text-shadow: 0 2px 0 #5a2a00; white-space: nowrap; }
.world-sign span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 900; color: #5a2a00; }
.world-sign span svg { width: 16px; height: 16px; }
.node { position: absolute; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; border: 4px solid #3a1806; padding: 0; z-index: 3; font: inherit;
  display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle at 35% 25%, #ffe9a0, #ff9a2a 55%, #d8501a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.2), 0 5px 0 #3a1806, 0 9px 10px rgba(0,0,0,.35); }
.node:active { transform: translateY(3px); }
.node em { font-style: normal; font-size: 22px; font-weight: 900; text-shadow: 0 2px 0 #5a2a00, 0 0 3px #5a2a00; }
.node.w1 { background: radial-gradient(circle at 35% 25%, #b8fbff, #2ab8d8 55%, #0a7a9a); }
.node.w2 { background: radial-gradient(circle at 35% 25%, #ffd0f6, #ff4fb8 55%, #a8106a); }
.node.w3 { background: radial-gradient(circle at 35% 25%, #ffffff, #7ac8ff 55%, #2a6ab0); }
.node.w4 { background: radial-gradient(circle at 35% 25%, #ffe08a, #ff6a1a 55%, #a8201a); }
.node.w5 { background: radial-gradient(circle at 35% 25%, #e6c8ff, #8a5aff 55%, #4a1aa0); }
.node.off { background: radial-gradient(circle at 35% 25%, #e0e2e8, #8a909c 60%, #5a606a); }
.node .lk { width: 26px; height: 26px; }
.node.boss { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: radial-gradient(circle at 35% 25%, #ffb0b8, #e8283a 55%, #7a0010); }
.node.boss img { width: 74px; height: 74px; }
.node.boss.off img { filter: grayscale(1) brightness(.7); }
.node.boss > svg { width: 40px; height: 40px; }
.node.cur { animation: nodepulse 1s ease-in-out infinite; box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 5px 0 #3a1806, 0 0 0 5px #fff, 0 0 18px 6px rgba(255,240,120,.9); }
@keyframes nodepulse { 50% { transform: scale(1.08); } }
.node .st { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); display: flex; gap: 0; padding: 1px 3px; border-radius: 8px; background: rgba(40,14,4,.6); }
.node .st svg { width: 15px; height: 15px; }
.node .tp { position: absolute; top: -7px; right: -9px; width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.node .tp svg { width: 26px; height: 26px; }
.you { position: absolute; width: 44px; height: 44px; margin: -86px 0 0 -22px; z-index: 4; pointer-events: none; animation: youbob .9s ease-in-out infinite; filter: drop-shadow(0 4px 2px rgba(0,0,0,.4)); }
.you svg { width: 44px; height: 44px; }
@keyframes youbob { 50% { transform: translateY(-8px) rotate(-8deg); } }
.boss-name { position: absolute; transform: translateX(-50%); z-index: 3; padding: 2px 10px; border-radius: 8px; background: rgba(90,0,16,.85); color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; pointer-events: none; }

/* кузня */
.shop-panel { width: 344px; gap: 8px; }
.shop-coins { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; font-weight: 900; color: #fff3a0; text-shadow: 0 2px 0 #7a2a00, 0 0 2px #7a2a00; }
.tabs { display: flex; gap: 6px; }
.tab { flex: 1; min-width: 0; min-height: 42px; padding: 0 2px; border-radius: 12px; border: 3px solid #3a1806; font: inherit; font-size: 14px; font-weight: 900; color: #7a3a14; background: rgba(255,240,210,.7); }
.tab.on { color: #fff; background: linear-gradient(#ff8aa0, #e8283a 60%, #a8101e); text-shadow: 0 2px 0 #5a0010; }
.shop-list { max-height: 330px; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.item { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; border: 3px solid rgba(90,40,10,.5); background: rgba(255,250,235,.75); }
.item.eq { border-color: #1a7a24; background: rgba(200,255,180,.85); }
.item canvas, .item .ico { flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px; background: radial-gradient(circle at 40% 35%, #5a3a8a, #1a0a2a); }
.item .ico { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #ffe08a, #c8782a); }
.item .ico svg { width: 40px; height: 40px; }
.item .ico.off { filter: grayscale(1) opacity(.5); }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 16px; font-weight: 900; color: #3a1806; }
.item-desc { font-size: 12px; font-weight: 600; color: #7a3a14; margin-top: 2px; }
.pips { display: flex; gap: 3px; margin-top: 4px; }
.pips i { width: 14px; height: 8px; border-radius: 3px; background: rgba(90,40,10,.25); }
.pips i.on { background: linear-gradient(#a8f07a, #2a9a2a); }
.buy { flex-shrink: 0; min-width: 84px; min-height: 44px; padding: 0 8px; border-radius: 12px; border: 3px solid #3a1806; font: inherit; font-size: 14px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 0 #3a1806; background: linear-gradient(#a8f07a, #34b03a 50%, #1a7a24); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #3a1806; display: flex; align-items: center; justify-content: center; gap: 3px; }
.buy svg { width: 18px; height: 18px; }
.buy.cant { background: linear-gradient(#c8ccd4, #7a808c); }
.buy.eqd { background: linear-gradient(#ffe08a, #e0a01a); }
.buy:active { transform: translateY(2px); }

/* рейтинг */
.lb-panel { width: 340px; }
.lb-mine { text-align: center; font-weight: 800; font-size: 15px; }
#lb-list { max-height: 310px; }
.lb-row { border-radius: 14px; background: rgba(255,250,235,.75); border: 2px solid rgba(90,40,10,.35); color: #3a1806; font-weight: 800; flex-shrink: 0; }
.lb-row.top-1 { background: linear-gradient(#fff6a0, #ffc21a); }
.lb-row.top-2 { background: linear-gradient(#f2f4f8, #b8c0cc); }
.lb-row.top-3 { background: linear-gradient(#ffd0a0, #d88a4a); }
.lb-row.me { border-color: #e8283a; box-shadow: 0 0 0 2px #e8283a; }
.lb-medal { font-weight: 900; font-size: 16px; color: #7a3a14; }
.lb-medal.gold, .lb-medal.silver, .lb-medal.bronze { width: 30px; height: 30px; line-height: 26px; border-radius: 50%; border: 2px solid #3a1806; color: #fff; text-shadow: 0 1px 0 #3a1806; }
.lb-medal.gold { background: radial-gradient(circle at 35% 30%, #fff6a0, #e0a000); }
.lb-medal.silver { background: radial-gradient(circle at 35% 30%, #fff, #8a96a6); }
.lb-medal.bronze { background: radial-gradient(circle at 35% 30%, #ffd0a0, #a8561a); }
.lb-avatar { background: linear-gradient(#ff8a5a, #e8283a); color: #fff; font-weight: 900; border: 2px solid #3a1806; }
.lb-score { color: #e8283a; font-weight: 900; }
.lb-empty { color: #7a3a14; font-weight: 800; }

#toast { bottom: 26px; padding: 10px 16px; border-radius: 14px; border: 3px solid #3a1806; background: linear-gradient(#fff3c0, #ffc85a); color: #3a1806; font-size: 15px; font-weight: 800; box-shadow: 0 6px 14px rgba(0,0,0,.35); }

/* подарок дня */
.daily-panel { width: 340px; }
.daily-sub { text-align: center; font-size: 14px; font-weight: 800; color: #7a3a14; }
.daily-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 12px; border: 3px solid rgba(90,40,10,.4); background: rgba(255,250,235,.7); }
.day:last-child { grid-column: span 2; background: linear-gradient(#fff6a0, #ffc21a); }
.day span { font-size: 11px; font-weight: 800; color: #7a3a14; }
.day svg { width: 28px; height: 28px; }
.day b { font-size: 15px; font-weight: 900; color: #3a1806; }
.day.got { filter: grayscale(.7) opacity(.6); }
.day.now { border-color: #e8283a; box-shadow: 0 0 0 3px #fff, 0 0 14px #ffd23f; animation: pulse 1s ease-in-out infinite; }