@font-face { font-family: 'Lilita One'; src: url(../assets/fonts/lilita-one-latin.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Nunito'; src: url(../assets/fonts/nunito-latin.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --ink: #170f2b;
  --cream: #fff6e3;
  --gold: #ffc83d;
  --gold2: #ff9d1c;
  --red: #ff4b5c;
  --panel: rgba(23, 15, 43, .86);
  --line: rgba(255, 246, 227, .14);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0a18; color: var(--cream); font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; }
body { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }

#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10, 6, 22, .55) 100%); }
#danger { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(255, 40, 60, .55) 100%); }
#danger.on { animation: pulse .7s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.5); } }
#flash { position: fixed; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
#speedlines { position: fixed; inset: -10%; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.0) 0deg 5deg, rgba(255,255,255,.22) 5.4deg 6deg, rgba(255,255,255,0) 6.4deg 11deg);
  -webkit-mask: radial-gradient(circle at 50% 52%, transparent 28%, #000 62%); mask: radial-gradient(circle at 50% 52%, transparent 28%, #000 62%);
  animation: spin 1.6s linear infinite; }
#speedlines.on { opacity: 1; }
@keyframes spin { to { transform: rotate(6deg); } }

.screen { position: fixed; inset: 0; display: none; pointer-events: none; padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
.screen.show { display: flex; }
.screen > * { pointer-events: auto; }
.modal { align-items: center; justify-content: center; background: rgba(13, 8, 26, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto; }

.logo { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: 'Lilita One', 'Arial Black', sans-serif; line-height: .86; letter-spacing: .5px; pointer-events: none; }
.logo .l1 { font-size: clamp(30px, 8.5vw, 64px); color: var(--cream); text-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(0,0,0,.4); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.logo .l2 { font-size: clamp(54px, 16vw, 124px); background: linear-gradient(180deg, #fff3b0 0%, var(--gold) 45%, var(--gold2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 10px 18px rgba(0,0,0,.45)); transform: rotate(-3deg); margin-top: 4px; }
.logo .tag { margin-top: 14px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(14px, 3.6vw, 20px); color: var(--cream); background: var(--panel); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; line-height: 1.1; }
.logo.small .l1 { font-size: 30px; } .logo.small .l2 { font-size: 60px; }

#loading { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #3a2463 0%, #170f2b 70%); }
.load-box { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(320px, 80vw); }
.bar { width: 100%; height: 14px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; border: 2px solid rgba(255,255,255,.18); }
.bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold2), var(--gold)); border-radius: 99px; transition: width .2s; }
.sub { font-size: 14px; opacity: .85; text-align: center; font-weight: 800; }

#title { flex-direction: column; align-items: center; justify-content: flex-start; }
#title .logo { margin-top: 2vh; }
#title .bottom { margin-top: auto; }
.topbar { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(420px, 100%); }
.row { display: flex; gap: 10px; width: 100%; justify-content: center; }
.row .btn { flex: 1; }
.hint-keys { font-size: 12px; opacity: .75; text-align: center; min-height: 1em; }

.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 900; letter-spacing: .4px; }
.pill b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 18px; color: var(--gold); letter-spacing: .5px; }
.ico { display: inline-block; width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; }
.roll-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd77a'/%3E%3Cstop offset='.55' stop-color='%23e9962f'/%3E%3Cstop offset='1' stop-color='%23a85a18'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='18' width='52' height='28' rx='14' fill='url(%23g)' stroke='%23542a0b' stroke-width='3'/%3E%3Cpath d='M18 22l-4 20M28 22l-4 20M38 22l-4 20M48 22l-4 20' stroke='%23fff1c9' stroke-width='3' stroke-linecap='round' opacity='.8'/%3E%3Cellipse cx='9' cy='32' rx='4' ry='9' fill='%23c56b2c'/%3E%3Cellipse cx='55' cy='32' rx='4' ry='9' fill='%23c56b2c'/%3E%3C/svg%3E"); }

.btn { appearance: none; border: 0; cursor: pointer; font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: 18px; letter-spacing: .6px; color: var(--cream); background: linear-gradient(180deg, #4b3480, #33225c); border-radius: 16px; padding: 12px 16px; box-shadow: 0 5px 0 #1d1236, 0 8px 18px rgba(0,0,0,.35); position: relative; transition: transform .06s, box-shadow .06s; touch-action: manipulation; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #1d1236, 0 3px 8px rgba(0,0,0,.35); }
.btn.big { font-size: 30px; padding: 16px 20px; width: 100%; border-radius: 22px; }
.btn.gold { color: #3a1d00; background: linear-gradient(180deg, #ffe28a, var(--gold) 40%, var(--gold2)); box-shadow: 0 6px 0 #a15a00, 0 10px 24px rgba(255, 160, 30, .35); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.btn.gold:active { box-shadow: 0 2px 0 #a15a00; }
.btn.icon { width: 50px; height: 50px; padding: 0; font-size: 22px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.btn.icon.small { width: 42px; height: 42px; font-size: 14px; border-radius: 13px; }
.btn.toggle { width: 100%; }
.btn.off { opacity: .55; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 15px; }
.cost .ico { width: 18px; height: 18px; }

.card { width: min(400px, 100%); max-height: 100%; background: linear-gradient(180deg, rgba(48, 30, 88, .96), rgba(23, 15, 43, .97)); border: 2px solid rgba(255,255,255,.12); border-radius: 28px; padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; box-shadow: 0 20px 60px rgba(0,0,0,.5); position: relative; }
.card.scroll { overflow-y: auto; }
.card h2 { margin: 0; text-align: center; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: 1px; color: var(--gold); text-shadow: 0 3px 0 var(--ink); }

.over-card { padding-top: 64px; margin-top: 50px; }
.over-face { position: absolute; left: 50%; top: -56px; width: 112px; height: 112px; transform: translateX(-50%) rotate(-4deg); border-radius: 50%; border: 5px solid var(--gold); background: #2a1c4a center 30% / cover no-repeat; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats div { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; }
.stats span { font-size: 11px; opacity: .7; letter-spacing: 1px; }
.stats b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 24px; color: var(--cream); }
.newbest { display: none; text-align: center; font-family: 'Lilita One', sans-serif; font-size: 26px; color: #3a1d00; background: linear-gradient(90deg, #fff0a8, var(--gold), #fff0a8); border-radius: 12px; padding: 4px; animation: shine 1s ease-in-out infinite alternate; }
.newbest.on { display: block; }
@keyframes shine { to { transform: scale(1.04); } }

.missions-mini, .missions-full { display: flex; flex-direction: column; gap: 6px; }
.mission { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.mission .chk { width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(255,255,255,.35); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.mission.done .chk { background: #4bd37b; border-color: #4bd37b; color: #0b2a14; }
.mission .txt { flex: 1; }
.mission .prog { opacity: .7; font-size: 12px; }

#hud { flex-direction: column; }
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none !important; }
.hud-right .pill { pointer-events: none; }
.hud-left { display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.hud-right { display: flex; gap: 8px; align-items: center; }
#h-score { font-family: 'Lilita One', sans-serif; font-size: 38px; line-height: 1; color: var(--cream); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
#h-dist { font-size: 15px; font-weight: 900; text-shadow: 0 2px 0 var(--ink), 0 0 6px rgba(0,0,0,.6); }
#h-mult { color: var(--gold); margin-left: 6px; }
#h-powers { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pw { display: flex; align-items: center; gap: 6px; background: var(--panel); border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 12px; font-weight: 900; }
.pw .bar2 { width: 70px; height: 7px; border-radius: 9px; background: rgba(255,255,255,.15); overflow: hidden; }
.pw .bar2 i { display: block; height: 100%; background: var(--gold); }
.pw .em { font-size: 16px; }
#b-pause { pointer-events: auto; }

#banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-family: 'Lilita One', sans-serif; font-size: clamp(30px, 9vw, 64px); line-height: .95; color: var(--cream); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); opacity: 0; transform: scale(.8); transition: opacity .35s, transform .35s; pointer-events: none; padding: 0 16px; }
#banner small { display: block; font-size: .42em; -webkit-text-stroke: 2px var(--ink); color: var(--gold); margin-bottom: 6px; letter-spacing: 2px; }
#banner.on { opacity: 1; transform: scale(1); }
#toasts { position: absolute; left: 0; right: 0; top: calc(14% + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: linear-gradient(180deg, #ffe28a, var(--gold)); color: #3a1d00; font-family: 'Lilita One', sans-serif; font-size: 18px; padding: 7px 16px; border-radius: 999px; box-shadow: 0 4px 0 #a15a00; animation: toast 2.6s ease forwards; }
.toast.blue { background: linear-gradient(180deg, #a8e2ff, #4fb4ff); color: #04253d; box-shadow: 0 4px 0 #1c5f94; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px) scale(.9); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
#hint { position: absolute; left: 0; right: 0; bottom: calc(18% + var(--safe-b)); text-align: center; font-family: 'Lilita One', sans-serif; font-size: clamp(22px, 6.5vw, 40px); color: var(--cream); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); opacity: 0; transition: opacity .2s; pointer-events: none; }
#hint.on { opacity: 1; animation: bob .6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-8px); } }
#fluffcam { position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(16px + var(--safe-b)); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(20px); transition: opacity .25s, transform .25s; pointer-events: none; }
#fluffcam.on { opacity: 1; transform: none; }
#fluffcam .face { width: 66px; height: 66px; border-radius: 50%; border: 4px solid var(--red); background: #222 center 30% / cover; box-shadow: 0 0 0 4px rgba(255,75,92,.35); animation: shake .25s linear infinite; }
#fluffcam span { font-family: 'Lilita One', sans-serif; font-size: 16px; color: #fff; background: var(--red); padding: 4px 10px; border-radius: 999px; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.panel-bottom { flex-direction: column; justify-content: space-between; }
.sheet { width: min(520px, 100%); margin: 0 auto; background: linear-gradient(180deg, rgba(48, 30, 88, .95), rgba(23, 15, 43, .97)); border: 2px solid rgba(255,255,255,.12); border-radius: 26px; padding: 12px; max-height: 52vh; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.tabs { display: flex; gap: 6px; }
.tab { flex: 1; appearance: none; border: 0; border-radius: 12px; padding: 10px; font-family: 'Lilita One', sans-serif; font-size: 17px; letter-spacing: .5px; color: var(--cream); background: rgba(255,255,255,.07); cursor: pointer; }
.tab.on { background: var(--gold); color: #3a1d00; }
.list[hidden] { display: none; }
.list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 16px; padding: 10px; cursor: pointer; }
.item.sel { border-color: var(--gold); background: rgba(255, 200, 61, .12); }
.item .sw { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.item .nm { flex: 1; display: flex; flex-direction: column; }
.item .nm b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .4px; }
.item .nm span { font-size: 12px; opacity: .75; }
.item .act { font-family: 'Lilita One', sans-serif; font-size: 15px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.1); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.item .act.buy { background: var(--gold); color: #3a1d00; }
.item .act.poor { opacity: .5; }
.lv { display: flex; gap: 3px; margin-top: 4px; }
.lv i { width: 16px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.lv i.on { background: var(--gold); }

.credits { font-size: 13px; line-height: 1.5; font-weight: 700; opacity: .9; }
.credits h3 { font-family: 'Lilita One', sans-serif; font-weight: 400; color: var(--gold); margin: 12px 0 4px; font-size: 18px; }

#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: auto 0 0 0; justify-content: center; pointer-events: none; padding-bottom: calc(6px + var(--safe-b)); }
  #rotate div { background: var(--panel); padding: 5px 12px; border-radius: 999px; font-size: 12px; }
  .logo .l2 { font-size: 64px; } .logo .l1 { font-size: 30px; } #title .logo { margin-top: 0; }
  .btn.big { font-size: 24px; padding: 10px; }
}