* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
body { overflow: hidden; font-family: 'Vazirmatn', system-ui, sans-serif; background: #0d4f7c; color: #3b2412; -webkit-user-select: none; user-select: none; }
canvas { display: block; touch-action: none; }
button { font-family: inherit; cursor: pointer; border: none; }
.app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; z-index: 5; }
.loading { background: linear-gradient(#7fd3e8, #2a8fb8); color: #fff; }
.bar { width: 70%; max-width: 280px; height: 14px; border-radius: 10px; background: rgba(0,0,0,.25); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd84d, #ff9b3d); transition: width .2s; }
.muted { opacity: .85; font-size: 14px; line-height: 1.8; }
.title-text { font-family: 'Lalezar', 'Vazirmatn'; font-size: 52px; line-height: 1.4; color: #fff6dc; text-shadow: 0 4px 0 #b4491f, 0 8px 18px rgba(0,0,0,.35); }
.menu { background: linear-gradient(to bottom, rgba(10,60,90,.15), rgba(10,40,60,.55)); justify-content: flex-end; padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.logo { width: min(62vw, 260px); animation: float 3s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.logo.small { width: 150px; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-2deg); } }
.tagline { color: #fff; font-weight: 600; line-height: 1.8; text-shadow: 0 2px 6px rgba(0,0,0,.5); text-align: center; }
.plate-btn { min-width: 220px; height: 82px; background: url(/assets/button_primary.webp) center/100% 100% no-repeat; color: #fff; font-family: 'Lalezar', 'Vazirmatn'; font-size: 30px; text-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .12s; animation: pulse 1.6s ease-in-out infinite; }
.plate-btn.sm { min-width: 190px; height: 66px; font-size: 24px; animation: none; }
.plate-btn:active, .soft-btn:active { transform: scale(.94); }
@keyframes pulse { 50% { transform: scale(1.05); } }
.row { display: flex; gap: 10px; }
.soft-btn { min-height: 46px; padding: 0 20px; border-radius: 16px; background: #fff3d6; color: #6b3a14; font-weight: 800; font-size: 16px; box-shadow: 0 4px 0 #c9934f; }
.coinbar { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-start: 14px; z-index: 6; display: flex; align-items: center; gap: 6px; background: rgba(40,20,5,.55); color: #ffe27a; padding: 4px 14px 4px 8px; border-radius: 20px; font-size: 18px; }
.coinbar img { width: 28px; }
.map { background: linear-gradient(#2a9fc4ee, #1d6e4aee); justify-content: flex-start; padding: 0; }
.map-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 64px 16px 10px; color: #fff; }
.map-head h2 { font-family: 'Lalezar'; font-size: 30px; font-weight: 400; }
.back { background: rgba(255,255,255,.2); color: #fff; padding: 8px 14px; border-radius: 12px; font-weight: 700; }
.stars-total { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.stars-total img { width: 26px; }
.map-scroll { flex: 1; width: 100%; overflow-y: auto; padding: 8px 12px 40px; }
.path { display: flex; flex-direction: column; gap: 14px; background: repeating-linear-gradient(0deg, transparent 0 60px, rgba(255,255,255,.06) 60px 62px); border-radius: 20px; padding: 16px 0; }
.node { display: flex; flex-direction: column; align-items: center; width: 120px; background: none; color: #fff; gap: 2px; }
.disc { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-family: 'Lalezar'; font-size: 30px; background: radial-gradient(circle at 35% 30%, #ffe48a, #f3a531 70%); color: #6b2f0c; box-shadow: 0 5px 0 #a2581b, 0 0 0 5px #2ba2c4; }
.boss .disc { background: radial-gradient(circle at 35% 30%, #ffb3a1, #d9452b 70%); color: #fff; }
.locked .disc { background: #6f8b91; box-shadow: 0 5px 0 #44585c, 0 0 0 5px #9bb; }
.disc img { width: 38px; }
.node-name { font-weight: 800; font-size: 13px; line-height: 1.7; text-shadow: 0 2px 4px rgba(0,0,0,.5); text-align: center; }
.node-stars { display: flex; gap: 2px; }
.node-stars img { width: 22px; }
.dim { background: rgba(8,30,45,.55); }
.shop { background: rgba(8,30,45,.45); }
.panel { width: min(92vw, 360px); background: url(/assets/panel_frame.webp) center/100% 100% no-repeat, #fff4dc; border-radius: 26px; padding: 30px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: popin .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes popin { from { transform: scale(.6); opacity: 0; } }
.panel h2 { font-family: 'Lalezar'; font-size: 34px; font-weight: 400; color: #b4491f; line-height: 1.5; }
.shop-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.shop-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.75); border-radius: 14px; padding: 8px 10px; }
.shop-item.on { outline: 3px solid #f3a531; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); flex: none; }
.heartsw { background: radial-gradient(circle, #ff5a6e, #c21d3b); }
.si-name { flex: 1; min-width: 0; font-weight: 800; line-height: 1.6; display: flex; flex-direction: column; }
.si-name small { font-weight: 400; opacity: .7; }
.mini { min-height: 38px; padding: 0 12px; border-radius: 12px; background: #2ba2c4; color: #fff; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.mini.buy { background: #f3a531; color: #4a2208; }
.mini img { width: 20px; }
.mini:disabled { opacity: .5; }
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hud-top { position: absolute; top: max(12px, env(safe-area-inset-top)); inset-inline: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 3; }
.chip { pointer-events: none; background: rgba(40,20,5,.6); color: #fff; border-radius: 16px; padding: 4px 14px; display: flex; align-items: center; gap: 8px; font-size: 20px; min-height: 44px; }
.chip-label { font-size: 13px; opacity: .8; }
.lives { gap: 4px; }
.heart { width: 22px; height: 20px; background: #ff4d63; clip-path: path('M11 20 L2 10 A5 5 0 0 1 11 3 A5 5 0 0 1 20 10 Z'); }
.icon-btn { pointer-events: auto; width: 50px; height: 50px; background: none; }
.icon-btn img { width: 100%; }
.hud-sub { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 54px); inset-inline: 0; display: flex; justify-content: center; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 14px; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: #ffd84d; }
.buffs { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 86px); inset-inline: 0; display: flex; justify-content: center; gap: 8px; }
.buff { padding: 2px 12px; border-radius: 12px; font-weight: 800; font-size: 14px; color: #fff; }
.saffron { background: #ff7a1a; } .stone { background: #7d7a75; }
.popups { position: absolute; top: 30%; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.popup { font-family: 'Lalezar'; font-size: 26px; color: #fff6c2; text-shadow: 0 3px 0 #b4491f, 0 6px 12px rgba(0,0,0,.4); animation: rise 1.4s ease-out forwards; line-height: 1.5; text-align: center; padding: 0 12px; }
.popup.bad { color: #ffd0d0; text-shadow: 0 3px 0 #8a1c1c, 0 6px 12px rgba(0,0,0,.4); }
@keyframes rise { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 30% { transform: scale(1); } 100% { transform: translateY(-50px); opacity: 0; } }
.tutorial { position: absolute; bottom: 120px; inset-inline: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tut-text { background: rgba(255,246,220,.95); color: #6b2f0c; font-weight: 800; padding: 10px 16px; border-radius: 16px; line-height: 1.8; text-align: center; box-shadow: 0 6px 0 #c9934f; }
.tut-hand { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 8px rgba(255,255,255,.3); animation: swipe 1.6s ease-in-out infinite; }
@keyframes swipe { 0%,100% { transform: translateX(-50px); } 50% { transform: translateX(50px); } }
.touchpad { position: absolute; inset: 0; pointer-events: auto; touch-action: none; z-index: 1; }
.stick { position: fixed; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.18); border: 3px solid rgba(255,255,255,.5); display: grid; place-items: center; pointer-events: none; }
.knob { width: 46px; height: 46px; border-radius: 50%; background: #fff6dc; box-shadow: 0 4px 0 #c9934f; }
.dash-hint { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline: 0; text-align: center; color: #fff; font-size: 13px; font-weight: 600; opacity: .55; text-shadow: 0 1px 3px #000; }
.dash-hint.ready { opacity: .9; }
.endcard h2 { font-size: 38px; }
.end-stars { display: flex; gap: 6px; }
.end-stars img { width: 72px; }
.end-stars img.pop { animation: starpop .5s cubic-bezier(.2,1.6,.4,1) both; }
.end-stars img:nth-child(2) { transform: translateY(-12px); }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); } }
.end-row { width: 100%; display: flex; justify-content: space-between; font-size: 18px; background: rgba(255,255,255,.7); padding: 6px 14px; border-radius: 12px; }
.coin { display: flex; align-items: center; gap: 4px; color: #b4741f; }
.coin img { width: 24px; }