:root {
  --ink: #161a26; --ink2: #232a3d; --paper: #f2ead9; --gold: #ffcf6a; --sun: #ffb347; --mag: #ff3d8b;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2130; color: var(--paper);
  font-family: 'Nunito Sans', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.logo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: clamp(40px, 9vw, 88px);
  letter-spacing: 0.04em; line-height: 0.95; color: var(--paper);
  background: linear-gradient(100deg, #f7efe0 0%, #ffd27a 45%, #ff8f5a 70%, #ff3d8b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(10, 12, 20, 0.55)); }
.logo.small { font-size: clamp(30px, 6vw, 54px); }
.tag { font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; font-size: 12px; color: #c9d2e3; margin-top: 6px; }
#load { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #2a3350 0%, #12151f 75%); }
#bar { width: min(320px, 70vw); height: 6px; border-radius: 3px; background: #2c3346; margin-top: 26px; overflow: hidden; }
#barf { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--mag)); transition: width 0.2s; }
#loadmsg { margin-top: 10px; font-size: 12px; color: #8f9ab3; letter-spacing: 0.1em; }

.screen { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; text-align: center;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); }
.screen.on { display: flex; }
#title { background: #12151f; overflow: hidden; }
#slides { position: absolute; inset: 0; }
#slides .sl { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s; transform: scale(1.04); }
#slides .sl.on { opacity: 1; animation: kb 14s linear forwards; }
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.12); } }
#title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,16,26,0.15) 0%, rgba(14,16,26,0.25) 45%, rgba(14,16,26,0.85) 100%); pointer-events: none; }
.tcol { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 560px; }
.blurb { font-size: 15px; line-height: 1.45; color: #e9e3d6; margin: 14px 8px 18px; text-shadow: 0 1px 3px #000; }
.btn { font: 800 18px 'Nunito Sans', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #1b1420; border: 0; border-radius: 999px;
  padding: 15px 44px; background: linear-gradient(100deg, #ffe08a, #ffb347 60%, #ff7a59); box-shadow: 0 6px 0 #8a4a2a, 0 10px 24px rgba(0,0,0,0.45); cursor: pointer; margin: 6px; }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a4a2a; }
.btn.ghost { background: rgba(20, 24, 36, 0.75); color: var(--paper); box-shadow: inset 0 0 0 2px #4a5470; font-size: 14px; padding: 11px 26px; }
#best { margin-top: 8px; font-size: 13px; color: var(--gold); min-height: 16px; }
.keys { margin-top: 10px; font-size: 12px; color: #aab3c8; }
body.touchdev .keys.desk, body:not(.touchdev) .keys.touch { display: none; }

#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; display: none; }
body.playing #hud { display: block; }
#hp { position: absolute; left: calc(14px + var(--sal)); top: calc(12px + var(--sat)); width: 150px; height: 9px; border-radius: 5px; background: rgba(15,18,28,0.6); box-shadow: 0 0 0 2px rgba(240,230,210,0.35); overflow: hidden; }
#hpf { height: 100%; width: 100%; background: linear-gradient(90deg, #ffcf6a, #ff9a5a); transition: width 0.15s; }
#hp.low #hpf { background: var(--mag); }
#score { position: absolute; top: calc(8px + var(--sat)); left: 50%; transform: translateX(-50%); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 30px; color: #fff4dc; text-shadow: 0 2px 0 rgba(10,12,20,0.7), 0 0 14px rgba(255,190,90,0.35); white-space: nowrap; }
#combo { margin-left: 10px; font-size: 22px; color: var(--gold); }
#combo.hot { color: #ff8f5a; } #combo.max { color: var(--mag); }
#obj { position: absolute; left: calc(14px + var(--sal)); top: calc(30px + var(--sat)); max-width: 46vw; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,0.6); }
#objt { font-weight: 800; font-size: 14px; color: #fff3d6; }
#objs { font-size: 12px; color: #c9d2e3; margin-top: 2px; }
#restored { position: absolute; right: calc(14px + var(--sar)); top: calc(10px + var(--sat)); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: #c9d2e3; text-shadow: 0 1px 3px #000; }
#restn { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; color: var(--gold); }
#compass { position: absolute; top: calc(46px + var(--sat)); left: 50%; width: 200px; margin-left: -100px; height: 4px; border-radius: 2px; background: rgba(240,230,210,0.18); }
#cmark { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); display: none; }
#cmark.edge { opacity: 0.6; }
#xhair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#xhair i { position: absolute; width: 3px; height: 9px; background: #fff7e6; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.8); transition: transform 0.08s; }
#xhair i:nth-child(1) { left: -1.5px; top: -17px; } #xhair i:nth-child(2) { left: -1.5px; top: 8px; }
#xhair i:nth-child(3) { width: 9px; height: 3px; left: -17px; top: -1.5px; } #xhair i:nth-child(4) { width: 9px; height: 3px; left: 8px; top: -1.5px; }
#xhair.lock i { background: var(--gold); box-shadow: 0 0 6px var(--sun); }
#xhair.lock i:nth-child(1) { transform: translateY(4px); } #xhair.lock i:nth-child(2) { transform: translateY(-4px); }
#xhair.lock i:nth-child(3) { transform: translateX(4px); } #xhair.lock i:nth-child(4) { transform: translateX(-4px); }
#hitm { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; opacity: 0; transform: rotate(45deg);
  border: 3px solid #fff; border-radius: 3px; clip-path: polygon(0 0, 35% 0, 35% 35%, 0 35%, 0 0, 0 65%, 35% 65%, 35% 100%, 0 100%, 0 65%, 100% 65%, 100% 100%, 65% 100%, 65% 65%, 100% 65%, 100% 0, 65% 0, 65% 35%, 100% 35%); }
#hitm.k { border-color: var(--mag); }
#floaters { position: absolute; inset: 0; overflow: hidden; }
.fl { position: absolute; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; color: #fff3d6; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(10,12,20,0.75); transform: translate(-50%, -50%); animation: flu 0.9s ease-out forwards; }
.fl.big { font-size: 24px; color: var(--gold); } .fl.mag { color: #ff9ac2; }
@keyframes flu { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
#callout { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: 0.06em;
  color: var(--gold); text-shadow: 0 3px 0 rgba(10,12,20,0.8), 0 0 22px rgba(255,160,80,0.6); opacity: 0; white-space: nowrap; }
#callout.on { animation: co 1.1s ease-out forwards; }
@keyframes co { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-18px); } }
#banner { position: absolute; left: 0; right: 0; top: 9%; text-align: center; opacity: 0; transition: opacity 0.6s; text-shadow: 0 2px 6px #000; }
#banner.on { opacity: 1; }
#bannert { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(22px, 4.6vw, 34px); color: #fff3d6; letter-spacing: 0.05em; }
#banners { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
#caption { position: absolute; left: 50%; bottom: calc(18px + var(--sab)); transform: translateX(-50%); max-width: min(560px, 70vw); text-align: center; font-size: 14px; line-height: 1.4;
  color: #fff3d6; background: rgba(14,17,27,0.62); border-radius: 10px; padding: 7px 14px; opacity: 0; transition: opacity 0.4s; }
#caption.on { opacity: 1; }
#caption b { color: var(--gold); }
#dmg { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(120,10,60,0.75) 100%); transition: opacity 0.25s; }
#bossbar { position: absolute; left: 50%; top: calc(64px + var(--sat)); width: min(420px, 60vw); transform: translateX(-50%); display: none; }
#bossbar.on { display: block; }
#bossn { font-weight: 800; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #ff9ac2; text-align: center; margin-bottom: 3px; text-shadow: 0 1px 3px #000; }
#bossf { height: 7px; border-radius: 4px; background: var(--mag); box-shadow: 0 0 0 2px rgba(20,10,20,0.6); width: 100%; transition: width 0.2s; }
#pauseb { position: absolute; right: calc(12px + var(--sar)); top: calc(40px + var(--sat)); width: 36px; height: 36px; border-radius: 50%; border: 0; pointer-events: auto;
  background: rgba(14,17,27,0.55); color: #e9e3d6; font: 800 13px 'Nunito Sans', sans-serif; }

#touch { position: fixed; inset: 0; z-index: 25; display: none; }
body.playing.touchdev #touch { display: block; }
#stick { position: absolute; left: 0; bottom: 0; width: 42%; height: 72%; }
#stickb { position: absolute; width: 124px; height: 124px; margin: -62px; border-radius: 50%; left: calc(96px + var(--sal)); bottom: calc(34px + var(--sab));
  background: radial-gradient(circle, rgba(240,230,210,0.08) 0%, rgba(240,230,210,0.16) 70%, rgba(240,230,210,0.3) 72%, rgba(0,0,0,0) 74%); }
#stickk { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(245,236,220,0.55); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
#look { position: absolute; right: 0; top: 0; width: 58%; height: 100%; }
.tb { position: absolute; border: 0; border-radius: 50%; font: 800 12px 'Nunito Sans', sans-serif; letter-spacing: 0.06em; color: #1b1420;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); overflow: hidden; }
#bfire { right: calc(26px + var(--sar)); bottom: calc(30px + var(--sab)); width: 84px; height: 84px; background: rgba(255,214,130,0.55); }
#bfire.on { background: rgba(255,170,90,0.95); }
#bdash { right: calc(124px + var(--sar)); bottom: calc(26px + var(--sab)); width: 62px; height: 62px; background: rgba(205,225,255,0.5); }
#bdash.cd { opacity: 0.4; }
#bbloom { right: calc(40px + var(--sar)); bottom: calc(128px + var(--sab)); width: 68px; height: 68px; background: rgba(60,50,80,0.6); color: #ffe7b0; }
#bbloom.ready { background: radial-gradient(circle, #fff3c4 0%, #ffb347 55%, #ff3d8b 100%); color: #2a1020; animation: pulse 0.9s ease-in-out infinite; }
#bloomf { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(255,190,100,0.45); z-index: -1; }
@keyframes pulse { 50% { transform: scale(1.08); } }
#rotate { position: fixed; left: 50%; bottom: calc(150px + var(--sab)); transform: translateX(-50%); z-index: 30; font-size: 12px; color: #e9e3d6; background: rgba(14,17,27,0.6);
  padding: 6px 12px; border-radius: 8px; display: none; pointer-events: none; white-space: nowrap; }
@media (orientation: portrait) {
  body.playing.touchdev #rotate.show { display: block; }
  #rotate { bottom: auto; top: calc(130px + var(--sat)); }
  #caption { bottom: calc(196px + var(--sab)); max-width: 86vw; }
  #stick { width: 50%; height: 46%; }
  #look { width: 100%; height: 100%; }
  #stickb { left: calc(84px + var(--sal)); bottom: calc(60px + var(--sab)); }
  #bfire { bottom: calc(64px + var(--sab)); }
  #bdash { bottom: calc(60px + var(--sab)); right: calc(118px + var(--sar)); }
  #bbloom { bottom: calc(160px + var(--sab)); }
  #obj { max-width: 62vw; top: calc(30px + var(--sat)); }
  #score { top: calc(64px + var(--sat)); font-size: 26px; }
  #compass { top: calc(100px + var(--sat)); }
  #bossbar { top: calc(116px + var(--sat)); }
}
#overmap { margin: 12px 0; border-radius: 12px; box-shadow: 0 0 0 2px #4a5470; background: #1c2230; }
#overs { font-size: 15px; line-height: 1.6; color: #e9e3d6; }
#overs b { color: var(--gold); font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; }
#over { background: rgba(12,14,22,0.72); }
#pause { background: rgba(12,14,22,0.8); }
#slidecap { position: absolute; left: 50%; top: calc(14px + var(--sat)); transform: translateX(-50%); width: min(620px, 86vw); z-index: 3; font-size: 14px; line-height: 1.4; color: #f7efe0;
  text-shadow: 0 1px 4px #000; opacity: 0; transition: opacity 0.8s; text-align: center; }
#slidecap.on { opacity: 1; }
#dmgdir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity 0.5s; }
#dmgdir.on { opacity: 1; transition: opacity 0.05s; }
#dmgdir i { position: absolute; left: -110px; top: -170px; width: 220px; height: 60px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 12px solid rgba(255, 61, 139, 0.95); filter: drop-shadow(0 0 10px rgba(255,61,139,0.9)); }
@media (orientation: portrait) { #dmgdir i { top: -210px; } }
#wp { position: absolute; display: none; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
#wp b { display: block; width: 16px; height: 16px; margin: 0 auto 3px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 10px var(--sun), 0 0 0 2px rgba(20,16,10,0.6); }
#wp span { font-weight: 800; font-size: 12px; color: #fff3d6; text-shadow: 0 1px 3px #000; }
#wp.edge { opacity: 0.85; } #wp.edge b { width: 13px; height: 13px; }
@media (max-height: 520px) {
  #over .tcol { display: grid; grid-template-columns: auto auto; grid-template-areas: "t t" "s m" "a m" "k m"; column-gap: 22px; align-items: center; max-width: 760px; }
  #overt { grid-area: t; } #overs { grid-area: s; font-size: 13px; } #overs b { font-size: 20px; }
  #overmap { grid-area: m; width: 170px; height: 170px; margin: 6px 0; }
  #againb { grid-area: a; } #keepb { grid-area: k; justify-self: center; }
}
#lenspick { background: rgba(12,14,22,0.55); z-index: 45; }
#lensopts { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.lensb { width: min(240px, 40vw); padding: 16px 14px; border-radius: 16px; border: 0; background: linear-gradient(160deg, #fff1c8, #ffc061); color: #26160a; font: 800 17px 'Nunito Sans', sans-serif; box-shadow: 0 6px 0 #8a4a2a; }
.lensb small { display: block; font-weight: 600; font-size: 13px; margin-top: 6px; color: #4a3020; }
#threats i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; display: none; margin: -14px 0 0 -12px;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 22px solid rgba(255, 61, 139, 0.92); filter: drop-shadow(0 0 6px rgba(255,61,139,0.9)); }