/* Оформление «Ниндзя-дворника»: адресные таблички, глянцевые кнопки, объявление на подъезде. */
body { background: radial-gradient(circle at 50% 30%, #6fc4ff, #2a78c8 70%, #1a4f8e); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }
#app { background: #3f9be8; }
#cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.dot { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: #ff2a5a; border: 2px solid #fff; display: none; box-shadow: 0 2px 0 #2e1a2e; }
.dot.on { display: block; animation: dotp 1s ease-in-out infinite; }
@keyframes dotp { 50% { transform: scale(1.25); } }

/* ---------- кнопки ---------- */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 250px; min-height: 52px; padding: 0 18px;
  border: 3px solid #2e1a2e; border-radius: 16px; font: inherit; font-size: 19px; font-weight: 900; color: #fff; letter-spacing: .3px;
  text-shadow: 0 2px 0 rgba(46,26,46,.55); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.22), 0 5px 0 #2e1a2e; transition: transform .06s; }
.btn::before { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 36%; border-radius: 12px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.05)); pointer-events: none; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.22), 0 1px 0 #2e1a2e; }
.btn * { pointer-events: none; }
.btn svg { flex-shrink: 0; color: #fff; }
.btn-orange { background: linear-gradient(#ffc233, #ff8a00 50%, #f25c00 52%, #ff7a00); }
.btn-green { background: linear-gradient(#8df27a, #2fbf3a 50%, #1f9e2c 52%, #27b034); }
.btn-blue { background: linear-gradient(#8fd8ff, #2f9be8 50%, #1877d8 52%, #2088e0); }
.btn-grey { background: linear-gradient(#d8dee8, #8a94a4 50%, #6a7484 52%, #7a8494); min-height: 46px; font-size: 16px; }
.btn-half { min-width: 0; flex: 1; font-size: 16px; padding: 0 10px; }
.btn-sm2 { min-width: 96px; min-height: 42px; font-size: 15px; padding: 0 10px; border-radius: 12px; gap: 4px; flex-shrink: 0; }
.btn.dim { filter: saturate(.45) brightness(.9); }
.btn-round { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #2e1a2e; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0;
  background: radial-gradient(circle at 35% 25%, #8fd8ff, #1877d8 70%); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 4px 0 #2e1a2e; }
.btn-round:active { transform: translateY(3px); }
.btn-round * { pointer-events: none; }

/* ---------- окна: синяя эмалированная табличка ---------- */
.overlay { background: rgba(20,12,40,.62); }
.overlay.show .panel { animation: pnlin .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pnlin { from { transform: translateY(30px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.pnl { width: 330px; padding: 18px 18px 20px; align-items: center; border-radius: 22px; border: 4px solid #2e1a2e;
  background: linear-gradient(#3a86e8, #1f5fc0 60%, #174aa0); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px #2e1a2e, inset 0 10px 18px rgba(255,255,255,.25), 0 10px 0 #2e1a2e, 0 20px 30px rgba(0,0,0,.5); }
.pnl-wide { width: 350px; }
.pnl::after { content: ""; position: absolute; inset: 14px; border-radius: 12px; pointer-events: none;
  background: radial-gradient(circle at 0 0, #e8eef4 4px, transparent 5px), radial-gradient(circle at 100% 0, #e8eef4 4px, transparent 5px),
  radial-gradient(circle at 0 100%, #e8eef4 4px, transparent 5px), radial-gradient(circle at 100% 100%, #e8eef4 4px, transparent 5px); }
.pnl-title { font-size: 28px; font-weight: 900; text-align: center; margin-top: 4px; text-shadow: 0 3px 0 #0e2a5a, 0 0 12px rgba(255,255,255,.3); }
.pnl-sub { font-size: 14px; font-weight: 700; text-align: center; color: #d8ecff; margin-bottom: 4px; }
#toast { bottom: 26px; padding: 12px 18px; border-radius: 14px; border: 3px solid #2e1a2e; background: linear-gradient(#fff8d8, #ffe08a); color: #2e1a2e; font-size: 15px; font-weight: 800; box-shadow: 0 5px 0 #2e1a2e; }

/* ---------- рейтинг ---------- */
#lb-list { width: 100%; max-height: 300px; }
.lb-row { border-radius: 12px; background: rgba(255,255,255,.14); border: 2px solid rgba(14,42,90,.6); font-weight: 800; }
.lb-medal { font-size: 15px; font-weight: 900; color: #d8ecff; }
.lb-medal.gold, .lb-medal.silver, .lb-medal.bronze { width: 30px; height: 30px; line-height: 26px; border-radius: 50%; border: 2px solid #2e1a2e; color: #2e1a2e; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 #2e1a2e; }
.lb-medal.gold { background: radial-gradient(circle at 35% 30%, #fff6a0, #ffc21a 60%, #c97a00); }
.lb-medal.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #c8d2dc 60%, #8894a2); }
.lb-medal.bronze { background: radial-gradient(circle at 35% 30%, #ffd2a0, #e08a4a 60%, #a0521a); }
.lb-row.top-1 { background: linear-gradient(90deg, rgba(255,210,58,.45), rgba(255,210,58,.12)); }
.lb-row.top-2 { background: linear-gradient(90deg, rgba(220,230,240,.4), rgba(220,230,240,.1)); }
.lb-row.top-3 { background: linear-gradient(90deg, rgba(224,138,74,.42), rgba(224,138,74,.1)); }
.lb-row.me { border-color: #ffe14a; box-shadow: 0 0 0 2px #ffe14a, 0 0 14px rgba(255,225,74,.6); }
.lb-avatar { background: linear-gradient(#ff9a3a, #e8263a); border: 2px solid #2e1a2e; font-weight: 900; }
.lb-name { font-size: 15px; }
.lb-score { color: #ffe14a; font-size: 16px; text-shadow: 0 2px 0 #0e2a5a; }
.lb-empty { font-weight: 700; color: #d8ecff; }

/* ---------- результат: объявление на подъезде ---------- */
.res-paper { width: 330px; padding: 26px 20px 46px; align-items: center; gap: 8px; color: #2e1a2e; border-radius: 6px; border: 3px solid #2e1a2e;
  background: linear-gradient(rgba(0,0,0,0) 0 0), repeating-linear-gradient(#fffaf0 0 27px, #e8f0ff 27px 28px); box-shadow: 0 10px 0 #2e1a2e, 0 20px 30px rgba(0,0,0,.5); }
.tape { position: absolute; top: 2px; width: 70px; height: 22px; background: rgba(255,226,120,.85); border: 1px solid rgba(160,120,20,.5); }
.tape.t1 { left: 2px; transform: rotate(-14deg); } .tape.t2 { right: 2px; transform: rotate(12deg); }
.res-head { font-size: 15px; font-weight: 900; letter-spacing: 3px; color: #c0301a; border-bottom: 3px double #c0301a; padding-bottom: 2px; }
.res-title { line-height: 0; min-height: 46px; display: flex; align-items: center; }
.res-stars { display: flex; gap: 6px; min-height: 0; }
.res-stars:empty { display: none; }
.rs { filter: drop-shadow(0 3px 0 #2e1a2e); }
.rs.on { animation: starin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.res-reason { font-size: 15px; font-weight: 800; text-align: center; min-height: 20px; color: #5a2a4a; }
.res-grid { display: flex; gap: 8px; width: 100%; }
.res-grid div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 10px; border: 2px dashed #8a6a9a; background: rgba(255,255,255,.7); }
.res-grid span { font-size: 12px; font-weight: 800; color: #7a5a8a; }
.res-grid b { font-size: 20px; font-weight: 900; }
.res-extra { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: #3a5aa8; text-align: center; }
.res-extra:empty { display: none; }
.res-extra .rec { color: #e8263a; font-size: 16px; animation: dotp .8s ease-in-out infinite; }
.res-extra .ach { color: #1f9e2c; }
.res-row { display: flex; gap: 10px; width: 100%; }
.res-paper .btn { min-width: 0; width: 100%; }
.res-fringe { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 24px; display: flex; justify-content: space-between; }
.res-fringe i { width: 28px; height: 24px; background: #fff3d8; border: 2px dashed #8a6a9a; border-radius: 4px; }
.res-fringe i:nth-child(3) { transform: rotate(6deg); } .res-fringe i:nth-child(6) { transform: rotate(-5deg); }

/* ---------- магазин ---------- */
.shop { gap: 8px; }
.shop-sign { width: 100%; text-align: center; padding: 6px 0; font-size: 19px; font-weight: 900; letter-spacing: 1px; border-radius: 10px; border: 3px solid #2e1a2e;
  background: linear-gradient(#ff6a8a, #e0284a); text-shadow: 0 2px 0 #5a0a1a; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 #2e1a2e; }
.shop-coins { display: flex; align-items: center; gap: 6px; padding: 3px 14px; border-radius: 20px; background: #0b1a3a; color: #ffe27a; font-size: 18px; font-weight: 900; border: 2px solid #8fd8ff; }
.tabs { display: flex; gap: 8px; width: 100%; }
.tab { flex: 1; min-height: 42px; border-radius: 12px; border: 3px solid #2e1a2e; font: inherit; font-size: 16px; font-weight: 900; color: #d8ecff; background: #1a4a90; box-shadow: 0 3px 0 #2e1a2e; }
.tab.on { color: #2e1a2e; background: linear-gradient(#fff6a0, #ffd23a); }
.tab * { pointer-events: none; }
.shop-list { width: 100%; max-height: 300px; display: flex; flex-direction: column; gap: 6px; }
.sh-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.14); border: 2px solid rgba(14,42,90,.6); }
.sh-row.on { background: rgba(255,225,74,.22); border-color: #ffe14a; }
.sh-pv { width: 66px; height: 66px; flex-shrink: 0; border-radius: 50%; border: 2px solid #2e1a2e; }
.sh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-txt b { font-size: 15px; font-weight: 900; }
.sh-txt span { font-size: 12px; font-weight: 700; color: #d8ecff; line-height: 1.2; }
.sh-on { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; color: #ffe14a; width: 96px; justify-content: center; flex-shrink: 0; }

/* ---------- награды и подарок ---------- */
.ach-list { width: 100%; max-height: 320px; display: flex; flex-direction: column; gap: 6px; }
.ach-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.18); opacity: .78; }
.ach-row.got { background: rgba(255,225,74,.2); opacity: 1; }
.ach-row svg { flex-shrink: 0; }
.ach-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ach-txt b { font-size: 15px; } .ach-txt span { font-size: 12px; color: #d8ecff; font-weight: 700; }
.ach-row em { font-style: normal; display: flex; align-items: center; gap: 3px; font-weight: 900; color: #ffe27a; }
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.dg { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: rgba(0,0,0,.2); border: 2px solid rgba(255,255,255,.2); font-weight: 900; }
.dg span { font-size: 11px; color: #d8ecff; } .dg b { font-size: 15px; color: #ffe27a; }
.dg.took { opacity: .5; } .dg.now { background: linear-gradient(#ffd23a, #ff8a00); border-color: #fff; animation: dotp 1s ease-in-out infinite; }
.dg.now span, .dg.now b { color: #2e1a2e; }
.dg:last-child { grid-column: span 2; }
.intro-cv { width: 280px; height: 150px; border-radius: 12px; border: 3px solid #2e1a2e; }
.intro-txt { font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; color: #eaf4ff; }

/* ---------- карта районов ---------- */
#scr-map { background: linear-gradient(#5fb4ff, #a8dcff 60%, #8fd16a 60%, #4f9a3a); }
.mapw { display: flex; flex-direction: column; padding: 10px 12px 0; }
.map-head { display: flex; align-items: center; gap: 10px; height: 56px; flex-shrink: 0; }
.map-title { flex: 1; font-size: 26px; font-weight: 900; text-shadow: 0 3px 0 #0e2a5a; }
.map-stars { display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; background: #0b1a3a; border: 2px solid #8fd8ff; color: #ffe27a; font-weight: 900; font-size: 16px; }
.map-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.dist { border-radius: 18px; border: 3px solid #2e1a2e; padding: 8px 10px 10px; box-shadow: 0 6px 0 #2e1a2e; flex-shrink: 0; }
.dist.d0 { background: linear-gradient(#f2e1b6, #d8c08a); } .dist.d1 { background: linear-gradient(#ef8a62, #c0502c); } .dist.d2 { background: linear-gradient(#7fe08a, #2fa84a); }
.dist.d3 { background: linear-gradient(#f6c88a, #d0904a); } .dist.d4 { background: linear-gradient(#8fd8ff, #3a8ac0); } .dist.d5 { background: linear-gradient(#8a6ae8, #3a2a8a); }
.dist.closed { filter: saturate(.35) brightness(.85); }
.dist-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; color: #2e1a2e; }
.dist.d1 .dist-head, .dist.d4 .dist-head, .dist.d5 .dist-head { color: #fff; }
.dist-head b { font-size: 19px; font-weight: 900; } .dist-head span { flex: 1; font-size: 12px; font-weight: 800; opacity: .8; }
.dist-head em { font-style: normal; display: flex; align-items: center; gap: 2px; font-weight: 900; font-size: 13px; }
.dist-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.lvb { position: relative; height: 58px; border-radius: 14px; border: 3px solid #2e1a2e; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: inherit; font-size: 20px; font-weight: 900; color: #fff; background: radial-gradient(circle at 35% 25%, #8fd8ff, #1877d8 75%); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 4px 0 #2e1a2e; text-shadow: 0 2px 0 #0e2a5a; }
.lvb * { pointer-events: none; }
.lvb i { display: flex; line-height: 0; }
.lvb.boss { background: radial-gradient(circle at 35% 25%, #ff9ab4, #d01a4a 75%); }
.lvb.lock { background: #6a7484; color: #c8d2dc; }
.lvb.cur { box-shadow: 0 0 0 3px #ffe14a, 0 0 16px #ffe14a, 0 4px 0 #2e1a2e; animation: dotp 1.2s ease-in-out infinite; }
.lvb:active { transform: translateY(3px); }

/* ---------- игровой HUD ---------- */
.hud { pointer-events: none; }
.hud > * { pointer-events: none; }
.hud-top { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: flex-start; gap: 6px; }
.hud-lives { display: flex; gap: 1px; padding: 6px 6px 3px; border-radius: 14px; background: rgba(14,26,58,.55); border: 2px solid rgba(255,255,255,.45); min-height: 40px; }
.hrt { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); transition: transform .2s; }
.hrt.off { filter: grayscale(1) brightness(.5); transform: scale(.82); opacity: .6; }
.hud-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-score { font-size: 28px; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 #2e1a2e, 0 0 10px rgba(0,0,0,.35); -webkit-text-stroke: 1px #2e1a2e; }
.hud-prog { position: relative; width: 120px; height: 16px; border-radius: 9px; background: rgba(14,26,58,.6); border: 2px solid #fff; overflow: hidden; }
.hud-prog i { position: absolute; inset: 0; background: linear-gradient(90deg, #3fbf5a, #ffe14a); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
.hud-prog span { position: absolute; inset: 0; font-size: 10px; font-weight: 900; line-height: 12px; text-align: center; color: #fff; text-shadow: 0 1px 0 #000; }
.hud-coins { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; border-radius: 14px; background: rgba(14,26,58,.55); border: 2px solid rgba(255,255,255,.45); color: #ffe27a; font-size: 18px; font-weight: 900; text-shadow: 0 2px 0 #000; min-height: 40px; }
.hud-coins.bump { animation: bump .25s ease-out; }
@keyframes bump { 40% { transform: scale(1.2); } }
.hud .hud-pause { pointer-events: auto; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; border: 3px solid #2e1a2e; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0;
  background: linear-gradient(#ffc233, #ff8a00 50%, #f25c00 52%, #ff7a00); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #2e1a2e; }
.hud-pause:active { transform: translateY(3px); }
.hud-pause * { pointer-events: none; }
.hud-boss { position: absolute; left: 50%; top: 64px; width: 250px; margin-left: -125px; display: none; flex-direction: column; align-items: center; gap: 2px; }
.hud-boss.on { display: flex; }
.hud-boss span { font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #2e1a2e; }
.hb-bar { width: 100%; height: 16px; border-radius: 9px; border: 3px solid #2e1a2e; background: #3a2a4a; overflow: hidden; }
.hb-bar i { display: block; height: 100%; background: linear-gradient(#ff9ab4, #e8263a); transform-origin: 0 50%; transition: transform .3s; }
.hud-pw { position: absolute; left: 10px; top: 62px; display: flex; flex-direction: column; gap: 6px; }
.pw { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #2e1a2e; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #2e1a2e; overflow: hidden; }
.pw-s { background: radial-gradient(circle at 35% 30%, #bfe6ff, #2f86e0); } .pw-m { background: radial-gradient(circle at 35% 30%, #ffb8c8, #e8263a); } .pw-t { background: radial-gradient(circle at 35% 30%, #fff6a0, #ff8a1a); }
.pw i { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #fff; transform-origin: 0 50%; }
.hud-combo { position: absolute; left: 50%; top: 108px; transform: translateX(-50%) scale(0); font-size: 22px; font-weight: 900; padding: 4px 14px; border-radius: 14px; border: 3px solid #2e1a2e;
  background: linear-gradient(#fff6a0, #ffb21a); color: #2e1a2e; transition: transform .15s; white-space: nowrap; }
.hud-combo.on { transform: translateX(-50%) scale(1); animation: cmb .3s ease-out; }
.hud-combo.c3 { background: linear-gradient(#ffd0a0, #ff7a1a); } .hud-combo.c4 { background: linear-gradient(#ffb8d8, #ff3a8a); color: #fff; } .hud-combo.c5 { background: linear-gradient(#d0b8ff, #8a3af0); color: #fff; }
@keyframes cmb { 0% { transform: translateX(-50%) scale(1.5); } }
.hud-banner { position: absolute; left: 20px; right: 20px; top: 150px; text-align: center; font-size: 17px; font-weight: 900; padding: 8px 12px; border-radius: 14px; border: 3px solid #2e1a2e;
  background: rgba(255,250,235,.94); color: #2e1a2e; box-shadow: 0 4px 0 #2e1a2e; opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .3s; }
.hud-banner.on { opacity: 1; transform: none; }
.hud-tut { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; display: none; }
.hud-tut.s0, .hud-tut.s1, .hud-tut.s2 { display: block; }
.tz { position: absolute; bottom: 90px; width: 40%; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 22px; border: 3px dashed rgba(255,255,255,.8); background: rgba(255,255,255,.14); animation: tzp 1s ease-in-out infinite; }
.tz-l { left: 6%; } .tz-r { right: 6%; }
.hud-tut.s2 .tz { display: none; }
@keyframes tzp { 50% { transform: scale(1.06); background: rgba(255,255,255,.26); } }
.tt { position: absolute; left: 16px; right: 16px; bottom: 26px; text-align: center; font-size: 17px; font-weight: 900; padding: 10px 12px; border-radius: 14px; background: rgba(46,26,46,.82); border: 3px solid #fff; }

/* ---------- задания ---------- */
.tasks { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.tasks:empty { display: none; }
.task { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.2); font-size: 13px; font-weight: 800; }
.task span { flex: 1; min-width: 0; }
.task em { font-style: normal; font-weight: 900; color: #ffe27a; flex-shrink: 0; }
.task.ok { background: rgba(63,191,90,.35); }
.task svg { flex-shrink: 0; }
.tasks.paper .task { background: rgba(255,255,255,.7); color: #2e1a2e; border: 2px dashed #b8a8c8; padding: 3px 8px; }
.tasks.paper .task em { color: #c0301a; }
.tasks.paper .task.ok { background: rgba(160,240,160,.6); border-color: #3fbf5a; }
.dist.endc { background: linear-gradient(135deg, #ff6a8a, #8a5cf0 60%, #2f86e0); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dist.endc .dist-head { color: #fff; width: 100%; }
.endb { min-width: 220px; min-height: 46px; font-size: 17px; }

/* ---------- настройки ---------- */
.set-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-radius: 14px; border: 3px solid #2e1a2e; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 17px; font-weight: 900; box-shadow: 0 3px 0 #2e1a2e; }
.set-row * { pointer-events: none; }
.sw { position: relative; width: 58px; height: 30px; border-radius: 16px; background: #6a7484; border: 3px solid #2e1a2e; transition: background .15s; }
.sw b { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 #2e1a2e; transition: left .15s; }
.sw.on { background: #3fbf5a; } .sw.on b { left: 30px; }
.set-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.set-stats div { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 10px; background: rgba(0,0,0,.2); }
.set-stats span { font-size: 11px; font-weight: 700; color: #d8ecff; } .set-stats b { font-size: 15px; font-weight: 900; color: #ffe27a; }
.lmod { position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #2e1a2e; display: flex; align-items: center; justify-content: center; }

/* ---------- находки ---------- */
.fd-w { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.fd-w > b { font-size: 14px; font-weight: 900; color: #ffe27a; }
.fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fd { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 10px; background: rgba(0,0,0,.25); }
.fd.got { background: rgba(255,225,74,.22); }
.fd canvas { width: 36px; height: 36px; }
.fd span { font-size: 10px; font-weight: 800; text-align: center; line-height: 1.15; color: #d8ecff; min-height: 23px; }
.fd.got span { color: #fff; }

/* ---------- задания дня ---------- */
.dq-list { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.dq { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px 4px 10px; border-radius: 12px; background: rgba(0,0,0,.22); font-size: 13px; font-weight: 800; }
.dq > span:first-child { flex: 1; min-width: 0; }
.dq.ok { background: rgba(63,191,90,.3); }
.dq-p { font-weight: 900; color: #ffe27a; padding: 0 6px; flex-shrink: 0; } .dq-ok { font-weight: 900; color: #bfffb0; padding: 0 6px; flex-shrink: 0; }

/* ---------- испытания ---------- */
.dist.chc { background: linear-gradient(135deg, #3fbf5a, #12a89a 60%, #1877d8); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dist.chc .dist-head { color: #fff; width: 100%; }
.chal-list { width: 100%; max-height: 330px; display: flex; flex-direction: column; gap: 6px; }
.ch-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.14); border: 2px solid rgba(14,42,90,.6); flex-shrink: 0; }
.ch-row.closed { opacity: .6; }
.ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-txt b { font-size: 15px; font-weight: 900; }
.ch-txt span { font-size: 12px; font-weight: 700; color: #d8ecff; line-height: 1.2; }
.ch-txt em { font-style: normal; font-size: 11px; font-weight: 800; color: #ffe27a; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.md { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #2e1a2e; background: #4a5a7a; }
.md.m1.on { background: radial-gradient(circle at 35% 30%, #ffd2a0, #e08a4a 60%, #a0521a); }
.md.m2.on { background: radial-gradient(circle at 35% 30%, #ffffff, #c8d2dc 60%, #8894a2); }
.md.m3.on { background: radial-gradient(circle at 35% 30%, #fff6a0, #ffc21a 60%, #c97a00); }
.ch-lock { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; color: #c8d2dc; flex-shrink: 0; }
.res-medal { padding: 6px 18px; border-radius: 20px; border: 3px solid #2e1a2e; font-size: 20px; font-weight: 900; box-shadow: 0 4px 0 #2e1a2e; animation: starin .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.res-medal.m1 { background: linear-gradient(#ffd2a0, #c06a2a); color: #fff; }
.res-medal.m2 { background: linear-gradient(#ffffff, #a8b4c2); color: #2e1a2e; }
.res-medal.m3 { background: linear-gradient(#fff6a0, #e0a000); color: #2e1a2e; }

/* ---------- запасы ---------- */
.sh-row.it { align-items: center; }
.it-n { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 3px solid #2e1a2e; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #2e1a2e; background: radial-gradient(circle at 35% 30%, #fff6a0, #ffc21a 70%); box-shadow: 0 3px 0 #2e1a2e; }
.it-use { display: flex; align-items: center; gap: 6px; margin-top: 3px; padding: 0; background: none; border: 0; color: #d8ecff; font: inherit; font-size: 12px; font-weight: 800; min-height: 32px; }
.it-use .sw { width: 44px; height: 24px; } .it-use .sw b { width: 14px; height: 14px; } .it-use .sw.on b { left: 22px; }
.it-use * { pointer-events: none; }

.res-tip { font-size: 13px; font-weight: 800; color: #1a5ab0; text-align: center; padding: 4px 8px; border-radius: 10px; background: rgba(140,200,255,.3); }
.res-tip:empty { display: none; }
.res-addr { font-size: 12px; font-weight: 800; color: #7a5a8a; margin-top: -4px; }
.res-addr:empty { display: none; }

.pw-c { background: radial-gradient(circle at 35% 30%, #d8c8ff, #8a5cf0); } .pw-j { background: radial-gradient(circle at 35% 30%, #ffb8d8, #ff4f7a); }
.pw-x { background: radial-gradient(circle at 35% 30%, #c8ffb8, #3fbf5a); } .pw-x b { font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #2e1a2e; }
.set-val { font-style: normal; font-size: 15px; font-weight: 900; color: #2e1a2e; padding: 4px 12px; border-radius: 12px; background: linear-gradient(#fff6a0, #ffd23a); border: 2px solid #2e1a2e; }
.wheel-cv { width: 280px; height: 280px; }
.dist.sch { background: linear-gradient(135deg, #ffd23a, #ff8a2a 60%, #e8263a); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dist.sch .dist-head { color: #fff; width: 100%; }
.ch-row.done { background: rgba(63,191,90,.25); }

/* ---------- открытки и рекорды ---------- */
.pcard { width: 300px; height: 190px; flex-shrink: 0; align-self: center; border-radius: 6px; box-shadow: 0 4px 0 #2e1a2e; transform: rotate(-1deg); }
.pcard:nth-child(2n) { transform: rotate(1.2deg); }
.rec-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.12); font-weight: 800; flex-shrink: 0; }
.rec-row b { flex: 1; font-size: 15px; } .rec-row span { font-size: 12px; color: #d8ecff; } .rec-row em { font-style: normal; font-weight: 900; color: #ffe14a; min-width: 70px; text-align: right; }
.rec-row.hi { background: rgba(255,225,74,.2); }
.dist.rsh { background: linear-gradient(135deg, #e8263a, #8a1a5a 60%, #2e1a5e); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dist.rsh .dist-head { color: #fff; width: 100%; }
.tabs.t4 { gap: 4px; } .tabs.t4 .tab { font-size: 12px; min-height: 40px; padding: 0 2px; }
.bs-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.12); flex-shrink: 0; }
.bs-row canvas { width: 40px; height: 40px; flex-shrink: 0; }
.bs-row.unk { opacity: .7; }

/* ---------- почта ---------- */
.mail-b { position: relative; background: radial-gradient(circle at 35% 25%, #ffe98a, #e0a100 70%); }
.mail-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: 12px; border: 2px solid rgba(14,42,90,.6); background: rgba(255,255,255,.14); color: #fff; font: inherit; text-align: left; flex-shrink: 0; }
.mail-row * { pointer-events: none; }
.mail-row span { display: flex; flex-direction: column; min-width: 0; }
.mail-row b { font-size: 14px; font-weight: 900; } .mail-row i { font-style: normal; font-size: 12px; font-weight: 700; color: #d8ecff; }
.mail-row.new { background: rgba(255,225,74,.25); border-color: #ffe14a; } .mail-row.new i { color: #ffe14a; }
.mail-row.closed { opacity: .55; }
.letter { gap: 10px; }
.letter-from { font-size: 14px; font-weight: 900; color: #3a5aa8; }
.letter-text { font-size: 16px; font-weight: 700; line-height: 1.4; color: #2e1a2e; font-style: italic; padding: 4px 6px; }
.ach-row canvas { width: 40px; height: 40px; flex-shrink: 0; }
.dist-ban { display: block; width: 100%; height: auto; aspect-ratio: 5 / 1; border-radius: 10px; margin-bottom: 6px; }