:root { --ink: #1b2433; --acc: #f2a33a; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1424; color: #fff; font-family: var(--kp-font, system-ui, sans-serif); user-select: none; -webkit-user-select: none; touch-action: none; font-synthesis: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vig { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(20,6,10,.78) 100%); }
#flash { position: fixed; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: none; }
#foeChip { position: absolute; left: 14px; top: calc(62px + var(--safe-t)); display: flex; flex-direction: column; gap: 4px; }
#foeName { font-size: 19px; font-weight: 700; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
#bounty { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; color: #ffd23f; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
#bounty svg, .ico { width: 18px; height: 18px; fill: currentColor; }
#pips { position: absolute; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(27,36,51,.72); padding: 8px 14px; border-radius: 20px; }
#pips span { display: flex; gap: 6px; } #pips em { width: 2px; height: 16px; background: #fff5; }
#pips i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff8; display: block; }
#pipK i.on { background: #6dff9a; border-color: #fff; } #pipF i.on { background: #ff6a5a; border-color: #fff; }
#comboChip { position: absolute; left: 50%; top: calc(58px + var(--safe-t)); transform: translateX(-50%); font-size: 20px; font-weight: 700; color: #ffd23f; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; display: flex; gap: 4px; align-items: center; }
.cb { pointer-events: auto !important; position: absolute; right: 12px; top: calc(12px + var(--safe-t)); width: 46px; height: 46px; border-radius: 16px; background: rgba(27,36,51,.78); display: grid; place-items: center; }
.cb svg { width: 22px; height: 22px; fill: #fff; }
#banner { position: fixed; left: 0; right: 0; top: 26%; text-align: center; font-size: 64px; font-weight: 700; line-height: 1.05; pointer-events: none; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 rgba(27,36,51,.35); }
#banner small { display: block; font-size: 26px; -webkit-text-stroke: 6px var(--ink); margin-top: 6px; color: #ffd23f; }
#banner.win { color: #fff3a0; } #banner.lose { color: #ff8a7a; } #banner.foul { color: #ffb347; } #banner.pop { animation: pop .42s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
#msTag { position: fixed; left: 0; right: 0; bottom: calc(18% + var(--safe-b)); text-align: center; font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; color: #fff; pointer-events: none; }
#msTag small { font-size: 22px; margin-left: 4px; }
#msTag .sub { display: block; font-size: 24px; color: #ffd23f; -webkit-text-stroke: 6px var(--ink); }
#card { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); width: min(300px, 84vw); background: #f6e3b4; border: 5px solid #5a3a1a; border-radius: 14px; padding: 16px 14px 14px; text-align: center; color: #3a2410; box-shadow: 0 10px 0 rgba(0,0,0,.25); pointer-events: none; animation: cardIn .5s cubic-bezier(.2,1.5,.4,1) both; }
#card b { display: block; font-size: 26px; font-weight: 700; margin: 4px 0; } #card .bn { display: inline-flex; gap: 6px; align-items: center; font-size: 28px; font-weight: 700; color: #b0420f; }
#card .tr { display: flex; gap: 10px; justify-content: center; margin-top: 8px; } #card .tr i { width: 36px; height: 36px; border-radius: 12px; background: #5a3a1a; display: grid; place-items: center; } #card .tr svg { width: 22px; height: 22px; fill: #ffe9a8; }
#card img { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto; }
@keyframes cardIn { 0% { transform: translate(-50%, -30%) scale(.7) rotate(-6deg); opacity: 0; } 100% { transform: translate(-50%, -50%); opacity: 1; } }
#tapHint { position: fixed; left: 50%; bottom: calc(10% + var(--safe-b)); width: 84px; margin-left: -42px; pointer-events: none; animation: tapBob .6s ease-in-out infinite; }
@keyframes tapBob { 50% { transform: translateY(-14px) scale(.9); } }
.sheet { position: fixed; inset: 0; background: linear-gradient(#3b2a1a, #1b1424); overflow-y: auto; touch-action: pan-y; padding: calc(14px + var(--safe-t)) 14px calc(180px + var(--safe-b)); }
.sheet .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet .back { width: 46px; height: 46px; border-radius: 16px; background: rgba(255,255,255,.14); display: grid; place-items: center; } .sheet .back svg { width: 24px; height: 24px; }
.sheet .coins { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; color: #ffd23f; } .sheet .coins svg { width: 24px; height: 24px; fill: currentColor; }
.poster { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; background: #f6e3b4; color: #3a2410; border: 4px solid #5a3a1a; border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; position: relative; box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.poster img { width: 84px; height: 84px; object-fit: contain; } .poster b { font-size: 17px; line-height: 1.15; word-break: keep-all; font-weight: 700; display: block; } .poster .bn { color: #b0420f; font-weight: 700; font-size: 18px; display: inline-flex; gap: 4px; align-items: center; } .poster .bn svg { width: 18px; height: 18px; fill: currentColor; }
.poster .tr { display: flex; gap: 6px; margin-top: 6px; } .poster .tr i { width: 26px; height: 26px; border-radius: 9px; background: #5a3a1a; display: grid; place-items: center; } .poster .tr svg { width: 16px; height: 16px; fill: #ffe9a8; }
.poster .st { display: flex; gap: 1px; } .poster .st svg { width: 18px; height: 18px; fill: #00000022; } .poster .st svg.on { fill: #ffb703; }
.poster.lock { filter: grayscale(.9) brightness(.7); } .poster.lock img { filter: brightness(0); opacity: .6; }
.poster.next { outline: 4px solid #6dff9a; animation: nextGlow 1.4s ease-in-out infinite; } @keyframes nextGlow { 50% { outline-color: #fff; } }
.poster .lk { width: 34px; height: 34px; fill: #5a3a1a; }
.guns { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(10px + var(--safe-b)); display: flex; gap: 8px; background: rgba(27,20,36,.94); }
.gn { flex: 1; min-width: 0; background: #f6e3b4; color: #3a2410; border: 4px solid #5a3a1a; border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gn.sel { border-color: #6dff9a; box-shadow: 0 0 0 3px #6dff9a88; } .gn img { width: 62px; height: 40px; object-fit: contain; } .gn.lock img { filter: brightness(.3); }
.gn small { font-size: 13px; font-weight: 700; display: flex; gap: 3px; align-items: center; } .gn small svg { width: 13px; height: 13px; fill: currentColor; }
#onb { background: rgba(14,10,22,.88); display: grid; place-items: center; padding: 20px; }
#onb .pane { width: min(340px, 100%); text-align: center; }
#onb .scene { position: relative; height: 210px; border-radius: 20px; background: linear-gradient(#69c4f5, #f3d9a0); overflow: hidden; border: 5px solid #fff; margin-bottom: 18px; }
#onb .txt { font-size: 25px; font-weight: 700; line-height: 1.25; min-height: 64px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
#onb .dots { display: flex; gap: 8px; justify-content: center; margin: 14px 0; } #onb .dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff4; } #onb .dots i.on { background: #ffd23f; }
#onb .go { height: 58px; padding: 0 30px; border-radius: 29px; background: var(--acc); color: var(--ink); font-size: 22px; font-weight: 700; box-shadow: 0 5px 0 #a35f0a; }
#onb .skip { position: absolute; right: 14px; top: calc(14px + var(--safe-t)); height: 44px; padding: 0 16px; border-radius: 22px; background: #fff2; font-size: 16px; font-weight: 700; }
.sc-fin { position: absolute; width: 74px; left: 50%; bottom: 8px; margin-left: -37px; }
.sc-fin svg { width: 100%; fill: #fff; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.sc-bell { position: absolute; left: 50%; top: 14px; width: 80px; margin-left: -40px; transform-origin: 50% 0; fill: #f2b632; stroke: #8a5a00; stroke-width: 3; }
.sc-bell.ring { animation: bellRing .5s ease-in-out infinite; } @keyframes bellRing { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
.sc-fin.tap { animation: finTap 1.1s ease-in-out infinite; } @keyframes finTap { 0%,55%,100% { transform: translateY(0); } 70% { transform: translateY(-18px) scale(.92); } }
.sc-mark { position: absolute; left: 50%; top: 60px; width: 60px; margin-left: -30px; font-size: 54px; text-align: center; font-weight: 700; color: #ff3b30; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.sc-ring { position: absolute; left: 50%; top: 44px; width: 120px; height: 120px; margin-left: -60px; }
.sc-ring .o { transform-origin: 60px 60px; animation: ringShrink 1.4s ease-in infinite; } @keyframes ringShrink { 0% { transform: scale(1.8); } 70%,100% { transform: scale(1); } }
.sc-zz { position: absolute; left: 50%; top: 76px; margin-left: 30px; font-size: 30px; font-weight: 700; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; animation: zz 1.6s ease-in-out infinite; } @keyframes zz { 50% { transform: translateY(-12px); } }
#loadMsg { position: fixed; inset: 0; display: grid; place-items: center; background: #1b1424; z-index: 50; }
.spin { width: 42px; height: 42px; border-radius: 50%; border: 6px solid #fff3; border-top-color: var(--acc); animation: sp 0.8s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
#nogl { position: fixed; inset: 0; display: grid; place-items: center; background: #1b1424; font-size: 28px; z-index: 60; }

#aim { position: fixed; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; pointer-events: none; color: #ff5a3c; filter: drop-shadow(0 0 3px #1b2433) drop-shadow(0 0 1px #1b2433); will-change: transform; }
#aim.on { color: #ffe14a; } #aim.head { color: #6dff9a; }
#sigChip { position: fixed; right: 12px; top: calc(66px + var(--safe-t)); transform-origin: 100% 0; display: flex; gap: 6px; padding: 6px 10px; border-radius: 18px; background: rgba(27,36,51,.8); pointer-events: none; transition: transform .35s cubic-bezier(.2,1.4,.4,1), top .35s, right .35s; }
#sigChip i { width: 30px; height: 30px; display: grid; place-items: center; } #sigChip svg { width: 26px; height: 26px; fill: #ffd23f; } #sigChip i.w svg { fill: #ff8a7a; }
#sigChip.big { top: 64%; right: 50%; transform: translateX(50%) scale(2.2); transform-origin: 50% 0; } #sigChip.fire { animation: sigFire .5s ease-out 1; } @keyframes sigFire { 40% { transform: scale(1.6); } }
#dragHint { position: fixed; width: 76px; margin: -10px 0 0 -38px; pointer-events: none; animation: dragBob .9s ease-in-out infinite; }
@keyframes dragBob { 0% { transform: translate(-40px, 90px); opacity: .2; } 60%,100% { transform: translate(0, 0); opacity: 1; } }
#msTag .bars { width: min(300px, 82vw); margin: 0 auto 6px; display: grid; gap: 6px; }
#msTag .sb { display: grid; grid-template-columns: 30px 1fr 64px; align-items: center; gap: 6px; height: 30px; }
#msTag .sb i { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; } #msTag .sb i img { width: 30px; height: 30px; } #msTag .sb i svg { width: 20px; height: 20px; fill: #ff5a3c; }
#msTag .sb u { display: block; height: 14px; border-radius: 7px; background: #6dff9a; box-shadow: 0 0 0 3px #1b2433; text-decoration: none; animation: barIn .5s ease-out both; } #msTag .sb.foe u { background: #ff6a5a; }
@keyframes barIn { from { width: 0 !important; } }
#msTag .sb b { font-size: 22px; text-align: right; -webkit-text-stroke: 5px var(--ink); }
#msTag .rt { font-size: 26px; display: inline-flex; gap: 6px; align-items: center; color: #ffd23f; -webkit-text-stroke: 6px var(--ink); } #msTag .rt svg { width: 24px; height: 24px; fill: #ffd23f; } #msTag .rt small { font-size: 16px; color: #fff; }
#msTag .pts { display: block; font-size: 34px; color: #ffd23f; } #msTag .zn { display: block; font-size: 22px; }
#msTag.pop { animation: pop .35s cubic-bezier(.2,1.6,.4,1) both; bottom: auto; top: 44%; }
.poster .tr i.sg { background: #2b6a8a; }
.poster .stamp { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #c0392b; display: grid; place-items: center; transform: rotate(-14deg); } .poster .stamp svg { width: 22px; height: 22px; fill: #c0392b; }
.shop { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(27,20,36,.96); padding: 6px 10px calc(10px + var(--safe-b)); }
.shop .tabs { display: flex; gap: 8px; margin-bottom: 6px; } .shop .tb { flex: 1; height: 40px; border-radius: 12px; background: #ffffff1a; display: grid; place-items: center; } .shop .tb.on { background: var(--acc); } .shop .tb svg { width: 24px; height: 24px; fill: #fff; } .shop .tb.on svg { fill: var(--ink); }
.shop .guns { position: static; padding: 0; background: none; display: flex; gap: 8px; }
.gn .sw { width: 40px; height: 34px; border-radius: 50% 50% 8px 8px; display: block; margin: 3px 0; border: 3px solid #5a3a1a; } .gn .sw.orig { background: linear-gradient(135deg, #ff5a8a, #fff 50%, #2dadb7); }
.sc-hold { animation: none; transform: translateY(-6px) scale(.92); }
.sc-foe { position: absolute; left: 62%; top: 34px; width: 70px; height: 96px; border-radius: 40px 40px 20px 20px; background: #3b3b44; box-shadow: inset 0 -20px 0 #2a2a30; }
.sc-cross { position: absolute; width: 56px; left: 22%; top: 70px; } .sc-cross.drag { animation: crossDrag 1.6s ease-in-out infinite; } .sc-cross.on { left: calc(62% + 7px); top: 56px; }
.sc-fin.drag { animation: finDrag 1.6s ease-in-out infinite; } .sc-fin.lift { margin-left: 30px; animation: finLift 1.2s ease-in-out infinite; }
@keyframes crossDrag { 0%,15% { left: 22%; top: 70px; } 70%,100% { left: calc(62% + 7px); top: 56px; } }
@keyframes finDrag { 0%,15% { transform: translate(-60px, 0); } 70%,100% { transform: translate(40px, -10px); } }
@keyframes finLift { 0%,50% { transform: translateY(0); } 70%,100% { transform: translateY(-30px); opacity: .4; } }
.sc-bang { position: absolute; left: calc(62% + 12px); top: 48px; width: 46px; height: 46px; background: radial-gradient(circle, #fff7b0 30%, #ff8a1f 60%, transparent 70%); border-radius: 50%; animation: bang 1.2s steps(1) infinite; } @keyframes bang { 0%,55% { opacity: 0; } 60%,80% { opacity: 1; } }
.gn small svg circle { fill: #e8a400; } .gn small svg path { stroke: #fff; }