/* Monkey Do: all of the game's styles, shared by index.html (the game) and dev.html (the same game with the dev tools on) */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Nunito:wght@600;700;800;900&display=swap');
  :root { --gold: #ffd35a; --ink: #1a0a00; --red: #ff4d5a; --panel: rgba(12, 16, 30, .74); }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #05070f; color: #fff;
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; user-select: none; }
  #game canvas { display: block; }
  .imp { font-family: Impact, "Arial Black", sans-serif; letter-spacing: .5px; }
  #hud { display: none; }
  #hud > div { position: fixed; pointer-events: none; }

  /* XP bar along the very top, with Cap's level. Made more noticeable (2026-10-01): thicker, brighter, a shine running along it
     and a bright leading edge; each gem flashes it and it pulses once a level-up is close (XP_BAR in game.js). Everything
     anchored to the top of the screen sits 10px lower to make room */
  #xpbar { top: 0; left: 0; right: 0; height: 20px; background: rgba(4,10,18,.72); border-bottom: 3px solid var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.45); }
  #xpbar i { position: relative; display: block; height: 100%; width: 0; overflow: hidden; background: linear-gradient(180deg, #c8ffe2 0%, #5aff9a 38%, #2ad8b0 72%, #1ab8d8 100%);
    box-shadow: 0 0 14px #5affb0, 0 0 4px #c8ffe2; transition: width .15s; }
  #xpbar i::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) 0 0 / 260px 100% repeat-x; animation: xpShine 1.8s linear infinite; }
  #xpbar i::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; background: #fff; box-shadow: 0 0 10px 3px #c8ffe2; }
  #xpbar.near i { animation: xpNear .55s ease-in-out infinite alternate; }
  @keyframes xpShine { from { background-position: -260px 0; } to { background-position: 0 0; } }
  @keyframes xpNear { from { box-shadow: 0 0 10px #5affb0, 0 0 4px #c8ffe2; } to { box-shadow: 0 0 26px 4px #8affc8, 0 0 8px 2px #fff; } }
  #xptxt { top: 26px; left: 16px; font: 900 30px Impact, "Arial Black", sans-serif; color: #7affb8; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink), 0 0 14px rgba(90,255,176,.55); }
  /* top left, under the level: the difficulty panel, then the active powerups (with timers) */
  #tl { top: 68px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  #pwrs { display: flex; flex-direction: column; gap: 6px; }
  /* the difficulty: its tier's name (NORMAL until the clock runs out), then in overtime the overtime clock and a bar
     filling toward the next step up. Each step up flashes the panel and shakes the name, word by word. (Made about half as
     big again by request, 2026-10-02: the name, the overtime clock and its bar) */
  #diff { --tc: #7affb8; display: none; width: 270px; background: var(--panel); border: 2px solid rgba(255,255,255,.85); border-radius: 14px; padding: 5px 16px 10px; }
  #diff .lab, #quest .lab { font: 900 14px Impact, "Arial Black", sans-serif; letter-spacing: 2.5px; opacity: .7; }
  #tierName { color: var(--tc); font: 900 34px/1.05 Impact, "Arial Black", sans-serif; letter-spacing: 1px; -webkit-text-stroke: 1.6px var(--ink); text-shadow: 3px 3px 0 var(--ink), 0 0 18px var(--tc); text-wrap: balance; }
  #tierName span { display: inline-block; }
  #otRow { display: none; justify-content: space-between; align-items: baseline; margin-top: 6px; font: 900 21px Impact, "Arial Black", sans-serif; letter-spacing: 1px; }
  #otRow b { color: var(--tc); font-weight: 900; font-size: 26px; -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
  #otBar { display: none; height: 9px; margin-top: 6px; background: rgba(0,0,0,.55); border-radius: 5px; overflow: hidden; }
  #otBar i { display: block; height: 100%; width: 0; background: var(--tc); }
  #diff.ot { border-color: var(--tc); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }
  #diff.ot #tierName { animation: tierGlow .5s infinite alternate; }
  #diff.ot #otRow { display: flex; } #diff.ot #otBar { display: block; } #diff.last #otBar { display: none; }
  #endRow { display: none; justify-content: space-between; margin-top: 4px; font: 900 19px Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #f2d8ff; }
  #endRow b { color: var(--tc); font-weight: 900; }
  #diff.last #endRow { display: flex; } /* (the last tier never tops out: how far it's climbed) */
  #diff.up { animation: diffFlash 1.2s ease-out; }
  #diff.up #tierName span { animation: wordShake 1.1s cubic-bezier(.36, .07, .19, .97) both; }
  #diff.up #tierName span:nth-child(2) { animation-delay: .07s; } #diff.up #tierName span:nth-child(3) { animation-delay: .14s; } #diff.up #tierName span:nth-child(4) { animation-delay: .21s; }
  @keyframes tierGlow { from { filter: brightness(1); } to { filter: brightness(1.35); } }
  @keyframes diffFlash { 0% { background: color-mix(in srgb, var(--tc) 75%, #000); transform: scale(1.06); } 35% { transform: none; } 100% { background: var(--panel); } }
  @keyframes wordShake {
    0% { transform: scale(1.25) rotate(-4deg); }
    8% { transform: translate(-5px, 2px) rotate(-8deg) scale(1.18); } 16% { transform: translate(5px, -2px) rotate(7deg) scale(1.13); }
    24% { transform: translate(-5px, -1px) rotate(-6deg) scale(1.09); } 32% { transform: translate(4px, 2px) rotate(5deg) scale(1.05); }
    40% { transform: translate(-4px, -2px) rotate(-4deg) scale(1.02); } 50% { transform: translate(3px, 1px) rotate(3deg); }
    60% { transform: translate(-3px, 1px) rotate(-3deg); } 70% { transform: translate(2px, -1px) rotate(2deg); }
    80% { transform: translate(-1px, 1px) rotate(-1deg); } 90% { transform: translate(1px, 0) rotate(1deg); } 100% { transform: none; }
  }
  /* the objective panel, under the difficulty (user request, 2026-10-02; "quest" in the code): what to do next on the stage, in
     its color. Only the portal gets an arrow pointing the way (up: the way the camera faces; game.js turns it) and how far: the
     shrine, the chests and the boss don't. It flashes when the objective changes */
  #quest { --qc: #ff6a4a; display: none; width: 270px; background: var(--panel); border: 2px solid rgba(255,255,255,.85); border-radius: 14px; padding: 5px 14px 9px; }
  #qMain { color: var(--qc); font: 900 23px/1.08 Impact, "Arial Black", sans-serif; letter-spacing: .5px; -webkit-text-stroke: 1.2px var(--ink); text-shadow: 2px 2px 0 var(--ink), 0 0 12px color-mix(in srgb, var(--qc) 55%, transparent); text-wrap: balance; }
  #qMain .qi { margin-right: 7px; font-size: 20px; -webkit-text-stroke: 0; text-shadow: none; vertical-align: 2px; }
  .qrow { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 15px; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
  .qrow .qa { flex: none; width: 18px; height: 18px; background: var(--qc); clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); }
  .qrow .qd { flex: none; color: var(--qc); font: 900 18px Impact, "Arial Black", sans-serif; letter-spacing: .5px; -webkit-text-stroke: .8px var(--ink); }
  .qrow .qd:empty { display: none; }
  .qrow .qh { opacity: .95; }
  #quest.new { animation: questNew .9s ease-out; }
  @keyframes questNew { 0% { transform: scale(1.07); background: color-mix(in srgb, var(--qc) 55%, #000); border-color: var(--qc); } 40% { transform: none; } 100% { background: var(--panel); } }
  .chestIco { display: inline-block; width: 1.25em; height: 1.05em; flex: none; vertical-align: -.15em; background: center / contain no-repeat var(--chestIco); }
  .pw { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 2px solid #fff; border-radius: 12px; padding: 4px 10px 5px 6px; width: 270px;
    animation: pwIn .3s cubic-bezier(.2, 1.6, .4, 1); }
  .pw .ic { font-size: 26px; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.5)); }
  .pw > div { flex: 1; }
  .pw .nm { font: 900 14px Impact, "Arial Black", sans-serif; letter-spacing: .5px; display: flex; justify-content: space-between; }
  .pw .nm span { color: #fff; opacity: .85; }
  .pw .bar { height: 6px; background: rgba(0,0,0,.55); border-radius: 3px; overflow: hidden; margin-top: 3px; }
  .pw .bar i { display: block; height: 100%; width: 100%; }
  @keyframes pwIn { from { transform: translateX(-40px) scale(1.2); opacity: 0; } to { transform: none; opacity: 1; } }
  /* stage info, top middle */
  #topbar { top: 26px; left: 50%; transform: translateX(-50%); text-align: center; width: min(380px, calc(100vw - 620px)); } /* (the bars up top keep clear of the difficulty and quest panels on narrow screens) */
  #islandName { font: 900 22px Impact, "Arial Black", sans-serif; letter-spacing: 1px; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
  #islandSub { margin-top: 3px; display: flex; gap: 10px; justify-content: center; align-items: center; }
  .badge { padding: 2px 10px; border-radius: 20px; background: #e07a1a; font-size: 12px; font-weight: bold; letter-spacing: 1px; border: 2px solid var(--ink); }
  #timer { font: 900 34px Impact, "Arial Black", sans-serif; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink); min-width: 80px; }
  #timer.over { color: var(--red); animation: pulse .4s infinite alternate; }
  @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.15); } }
  #enemyBar { margin: 5px auto 0; width: 300px; height: 12px; background: rgba(0,0,0,.55); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
  #enemyBar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a3a, #ffb03a); transition: width .2s; }
  #enemyTxt { font-size: 15px; font-weight: bold; margin-top: 3px; text-shadow: 0 2px 0 #000, 0 0 8px #000; }
  /* what to do next, flashing big at the top (by request, 2026-10-01): FIND BOSS SHRINE once the clock runs out, then OPEN THE
     BOSS CHEST and EXIT PORTAL FOR NEXT STAGE once the boss is beaten. The stage's name steps aside while it's up */
  #objective { top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: none; font: 900 36px Impact, "Arial Black", sans-serif; letter-spacing: 2px;
    color: var(--oc); -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink), 0 0 20px var(--oc); animation: objFlash .5s ease-in-out infinite alternate; }
  @keyframes objFlash { from { opacity: 1; filter: brightness(1.3); } to { opacity: .4; filter: brightness(.85); } }

  /* boss health */
  #bossbar { top: 114px; left: 50%; transform: translateX(-50%); width: min(640px, 80vw, calc(100vw - 620px)); display: none; text-align: center; }
  #bossName { font: 900 26px Impact, "Arial Black", sans-serif; color: #ff6a5a; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink); letter-spacing: 1px; }
  #bossbar .bar { height: 20px; background: rgba(0,0,0,.6); border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; position: relative; margin-top: 3px; }
  #bossbar .bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255,255,255,.7); transition: width .6s .15s; }
  #bossbar .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #ff6a4a, #c81a1a); }
  /* the final boss: a bigger bar, a gold name, and marks where its phases change (66% and 33%) */
  #bossbar.final { width: min(860px, 92vw, calc(100vw - 620px)); top: 106px; }
  #bossbar.final #bossName { font-size: 36px; color: var(--gold); letter-spacing: 4px; }
  #bossbar.final .bar { height: 30px; border-width: 4px; border-radius: 14px; }
  #bossbar.final .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33% - 2px), rgba(0,0,0,.85) calc(33% - 2px), rgba(0,0,0,.85) calc(33% + 2px), transparent calc(33% + 2px), transparent calc(66% - 2px), rgba(0,0,0,.85) calc(66% - 2px), rgba(0,0,0,.85) calc(66% + 2px), transparent calc(66% + 2px)); }
  #minibar { top: 122px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw, calc(100vw - 620px)); display: none; text-align: center; }
  #miniName { font: 900 20px Impact, "Arial Black", sans-serif; color: #c890ff; -webkit-text-stroke: 1.2px var(--ink); text-shadow: 2px 2px 0 var(--ink); letter-spacing: 1px; }
  #minibar .bar { height: 14px; background: rgba(0,0,0,.6); border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; position: relative; margin-top: 2px; }
  #minibar .bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255,255,255,.7); transition: width .6s .15s; }
  #minibar .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #c07aff, #7a2ad8); }
  /* poisoned (by request, 2026-10-02): the part of its health the poison is still going to take shows green at the end of the
     bar (it used to turn the whole bar green), with a green glow and its stacks written on it (see poisonBar) */
  #bossbar .bar u, #minibar .bar u { position: absolute; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #c4ff6a, #3e9e12); box-shadow: inset 2px 0 0 rgba(0,0,0,.35); } /* (the health its poison is still going to take: game.js bigBar) */
  #bossbar.pois .bar, #minibar.pois .bar { box-shadow: 0 0 10px rgba(150,255,70,.7); }
  #bossbar.pois .bar::before, #minibar.pois .bar::before { content: '☠ POISONED ' attr(data-pz); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    font: 900 12px Impact, "Arial Black", sans-serif; letter-spacing: 1.5px; color: #f0ffe0; text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 3px #000; }
  #minibar.pois .bar::before { font-size: 10px; }

  /* collected loot, top right */
  #build { top: 30px; right: 12px; width: 230px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .bi { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); border: 2px solid #aaa; display: flex; align-items: center; justify-content: center; font-size: 21px; position: relative; }
  .bi b { position: absolute; right: -4px; bottom: -6px; font: 900 14px Impact, sans-serif; -webkit-text-stroke: 1px #000; color: #fff; }
  .r0 { border-color: #d8d8d8 !important; } .r1 { border-color: #4aa8ff !important; } .r2 { border-color: #c070ff !important; } .r3 { border-color: #ffc23a !important; }
  .t0 { color: #e8e8e8; } .t1 { color: #6ab8ff; } .t2 { color: #d08aff; } .t3 { color: #ffcf4a; }

  /* health & coins, bottom left */
  /* (the gold and the chest price are big on purpose: you check them at a glance mid-fight) */
  #botleft { left: 18px; bottom: 18px; width: 480px; }
  #coins { font: 900 50px Impact, "Arial Black", sans-serif; line-height: 1; color: var(--gold); -webkit-text-stroke: 2.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); margin-bottom: 6px; }
  #coins.bump { animation: bump .15s; }
  @keyframes bump { 50% { transform: scale(1.18); } }
  /* the next chest's price, right of the gold: a small carved-stone tag with a treasure chest on it. Dim while Cap can't
     afford it; once he can, it lights up gold, with a slow glow */
  #coinRow { display: flex; align-items: center; gap: 22px; margin-bottom: 8px; }
  #coinRow #coins { margin-bottom: 0; }
  :is(#chestTag, .gChest) { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 18px 3px 13px; font: 900 36px/1 Impact, "Arial Black", sans-serif; letter-spacing: .8px;
    color: #d2c7b0; -webkit-text-stroke: 1.6px var(--tInk); text-shadow: 2px 3px 0 var(--tInk);
    background: var(--tNoise), linear-gradient(180deg, #8f8674, #6a6252 58%, #514a3d); border: 3px solid #2e2618; border-radius: 14px 19px 13px 18px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -5px 0 rgba(0,0,0,.35), 0 0 0 3px #6e5a36, 0 6px 12px rgba(0,0,0,.45);
    opacity: .72; filter: grayscale(.8); transition: opacity .3s, filter .3s, color .3s, box-shadow .3s; }
  :is(#chestTag, .gChest) i { width: 44px; height: 37px; flex: none; background: center / contain no-repeat var(--chestIco); } /* (the chest's picture: the quest panel and the quick tip show it too) */ :root { --chestIco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M2 10V7Q2 2 13 2Q24 2 24 7V10Z' fill='%23b0692c' stroke='%232a1606' stroke-width='1.6' stroke-linejoin='round'/%3E%3Crect x='2' y='10' width='22' height='10' rx='1.5' fill='%238a4a1c' stroke='%232a1606' stroke-width='1.6'/%3E%3Cpath d='M6.5 3v17M19.5 3v17' stroke='%23f2c14e' stroke-width='2.6'/%3E%3Cpath d='M2.8 10h20.4' stroke='%23f2c14e' stroke-width='1.8'/%3E%3Crect x='10.8' y='8' width='4.4' height='5.6' rx='1' fill='%23ffe07a' stroke='%232a1606' stroke-width='1.2'/%3E%3C/svg%3E"); }
  :is(#chestTag, .gChest) b { font-weight: 900; }
  :is(#chestTag, .gChest).can { opacity: 1; filter: none; color: #ffe066; text-shadow: 2px 3px 0 var(--tInk), 0 0 14px rgba(255,205,90,.75);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -5px 0 rgba(0,0,0,.35), 0 0 0 3px #c8962e, 0 0 20px rgba(255,190,70,.5), 0 6px 12px rgba(0,0,0,.45); }
  :is(#chestTag, .gChest).can::after { content: ''; position: absolute; inset: -4px; border-radius: 18px; box-shadow: 0 0 24px 4px rgba(255,200,80,.6); animation: chestGlow 1.8s ease-in-out infinite; pointer-events: none; }
  @keyframes chestGlow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  :is(#chestTag, .gChest).bump { animation: bump .22s; }
  /* Cap's health: a bar floating over his head, placed there every frame (flat on the screen, so it always faces the camera
     and never tips over with him) */
  #hpbar { position: fixed; left: -999px; top: -999px; width: 150px; height: 18px; transform: translate(-50%, -100%); background: rgba(0,0,0,.62); border: 2px solid var(--ink); border-radius: 9px; overflow: hidden; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
  /* a little gold arrow under the floating health bar, pointing down at whoever you're playing (2026-10-03: Rin is tiny, and it finds him in any crowd) */
  #hpPtr { position: fixed; left: -999px; top: -999px; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; border-top: 13px solid #ffd84a; border-bottom: 0; pointer-events: none; filter: drop-shadow(0 0 1px #2a1806) drop-shadow(0 1px 0 #2a1806) drop-shadow(0 0 5px rgba(255,200,60,.7)); animation: hpPtr 0.9s ease-in-out infinite alternate; }
  @keyframes hpPtr { from { transform: translateY(0); } to { transform: translateY(3px); } }
  #hpbar em { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; opacity: .65; transition: width .5s .2s; }
  #hpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #8dff6a, #2fae3a); }
  #hpbar.low i { background: linear-gradient(180deg, #ff8a6a, #d82a2a); }
  #hpbar.low { animation: hpLow .6s ease-in-out infinite alternate; }
  @keyframes hpLow { to { box-shadow: 0 0 12px rgba(255,60,40,.85); } }
  #hptxt { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 900 13px/14px Impact, sans-serif; letter-spacing: .5px; color: #fff; -webkit-text-stroke: .7px var(--ink); }
  #shield { margin-top: 5px; font-size: 18px; height: 22px; }
  /* tail grip, bottom left: shown once he's swung on a vine (game.js), drains vine to vine, flashes red when it's nearly gone */
  #stamrow { display: flex; align-items: center; gap: 6px; margin-top: 5px; max-width: 320px; visibility: hidden; }
  #stamrow b { font: 900 11px Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #ffe46a; -webkit-text-stroke: 0.6px var(--ink); opacity: .85; }
  #stambar { flex: 1; height: 11px; background: rgba(0,0,0,.6); border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
  #stambar i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #fff08a, #f0b020); }
  #stambar.out i { background: linear-gradient(180deg, #ff9a7a, #d83a1a); animation: stamOut .5s infinite alternate; }
  @keyframes stamOut { from { opacity: 1; } to { opacity: .45; } }

  /* weapon & abilities, bottom right */
  #botright { right: 18px; bottom: 18px; text-align: right; }
  #abil { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
  .ab { width: 60px; height: 60px; border-radius: 14px; background: var(--panel); border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-size: 28px; }
  .ab .k { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: bold; opacity: .85; }
  .ab .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.7); }
  .ab.ready { border-color: var(--gold); }
  #abAim span { opacity: .4; filter: grayscale(1); transition: opacity .2s, filter .2s; } /* manual aim (T): lit up while it's on */
  #abAim.on { border-color: #ff6a5a; box-shadow: 0 0 10px rgba(255,90,74,.55); } #abAim.on span { opacity: 1; filter: none; }
  #abBoss span { opacity: .4; filter: grayscale(1); transition: opacity .2s, filter .2s; } /* Boss Focus (B, or X on a pad): lit up gold while it's on */
  #abBoss.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,200,60,.6); } #abBoss.on span { opacity: 1; filter: none; }
  /* weapon & tome slots (5 + 5) */
  #slots { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
  .srow { display: flex; gap: 6px; align-items: center; }
  .srow > span:last-child { display: flex; gap: 7px; }
  .srow .lab { font: 900 11px Impact, "Arial Black", sans-serif; letter-spacing: 1px; opacity: .7; writing-mode: vertical-rl; transform: rotate(180deg); }
  .sl { width: 50px; height: 50px; border-radius: 12px; background: var(--panel); border: 2px solid #ffc23a; display: flex; align-items: center; justify-content: center;
    font-size: 27px; position: relative; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
  .sl.tome { border-color: #c070ff; }
  .sl.empty { border-style: dashed; border-color: rgba(255,255,255,.28); font-size: 18px; color: rgba(255,255,255,.35); }
  .sl b { position: absolute; right: -6px; bottom: -7px; font: 900 12px Impact, sans-serif; background: #1a1f33; border: 2px solid var(--ink); border-radius: 8px;
    padding: 0 4px; color: #7affb8; letter-spacing: .5px; }
  .sl.max b { color: var(--gold); }
  .sl.evo { border-color: #ffd24a; box-shadow: 0 0 12px rgba(255,210,74,.75); } .sl.evo b { color: #ffd24a; }
  .lc.evo { border-color: #ffd24a !important; box-shadow: 0 0 14px rgba(255,200,60,.45); } .lc.evo .n small { color: #ffd24a; }
  /* loadout (pause menu and Tab) */
  .loadout { width: min(780px, 94vw); text-align: left; margin: 2px 0 8px; }
  .loadout h4 { margin: 10px 0 5px; font: 900 15px Impact, "Arial Black", sans-serif; letter-spacing: 2px; color: var(--gold); }
  .loadout h4 small { color: #fff; opacity: .6; letter-spacing: 0; font-size: 13px; }
  .lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
  .lc { display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.14); border-radius: 12px; padding: 6px 10px; }
  .lc .i { font-size: 29px; width: 38px; text-align: center; flex: none; }
  .lc .n { font-weight: bold; font-size: 15px; }
  .lc .n small { color: #7affb8; font-weight: 900; margin-left: 5px; font-size: 13px; }
  .lc .d { font-size: 12.5px; opacity: .88; line-height: 1.3; margin-top: 1px; }
  .lc.w { border-color: rgba(255,194,58,.55); } .lc.t { border-color: rgba(192,112,255,.6); } .lc.pw { border-color: rgba(122,216,255,.6); }
  .lc.empty { opacity: .45; border-style: dashed; }
  .lstats { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 13px; background: rgba(0,0,0,.3); border-radius: 10px; padding: 6px 10px; }
  /* the pause menu's evolution chart: every weapon + its tome -> what it becomes (yours lit up, ready / evolved tagged) */
  .evoChart { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 5px; }
  .evoChart .ev { background: rgba(0,0,0,.32); border: 2px solid rgba(255,255,255,.1); border-radius: 10px; padding: 5px 9px; font-size: 13px; line-height: 1.3; }
  .evoChart .ev .ln { font-weight: 700; } .evoChart .ev .ln b { color: #ffd24a; } .evoChart .ev .ln span { opacity: .6; } .evoChart .ev .ln span.have { opacity: 1; color: #9aff8a; }
  .evoChart .ev .d { font-size: 11.5px; opacity: .75; margin-top: 1px; }
  .evoChart .ev em { font-style: normal; font-weight: 900; font-size: 11px; letter-spacing: 1px; margin-left: 7px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.14); }
  .evoChart .ev.part { border-color: rgba(154,255,138,.35); }
  .evoChart .ev.ready { border-color: #6aff7a; box-shadow: 0 0 12px rgba(106,255,122,.4); } .evoChart .ev.ready em { background: #3aa84a; color: #fff; }
  .evoChart .ev.done { border-color: #ffd24a; box-shadow: 0 0 12px rgba(255,200,60,.4); } .evoChart .ev.done em { background: #c8961a; color: #2e1804; }
  /* a weapon or tome card's evolution hint */
  .card .evo { margin: 8px auto 0; padding: 4px 8px; border-radius: 8px; background: rgba(20,14,6,.5); box-shadow: 0 0 0 1px rgba(255,210,90,.55); font-size: 12px; font-weight: 800; line-height: 1.3; color: #ffe08a; }
  .card .evo b { color: #fff3b0; } .card .evo i { font-style: normal; color: #9aff8a; }
  #buildPanel .lgrid { grid-template-columns: 1fr 1fr; gap: 4px; } #buildPanel .lc { padding: 4px 8px; }
  #buildPanel h4 { margin: 8px 0 4px; font: 900 14px Impact, "Arial Black", sans-serif; letter-spacing: 2px; color: var(--gold); } #buildPanel h4 small { color: #fff; opacity: .6; letter-spacing: 0; }
  #buildPanel .lc .d { font-size: 11.5px; } #buildPanel .lc .i { font-size: 24px; width: 30px; }

  /* crosshair: only with manual aim on (it sits a little above the middle of the screen, clear of Cap: game.js places it) */
  #crosshair, #hitmark { display: none; }
  #hud.maim #crosshair, #hud.maim #hitmark { display: block; }
  #crosshair { left: 50%; top: 50%; width: 0; height: 0; --g: 7px; }
  #crosshair i { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); border-radius: 1px; }
  #crosshair .c1, #crosshair .c2 { width: 10px; height: 2px; top: -1px; }
  #crosshair .c1 { left: calc(-10px - var(--g)); } #crosshair .c2 { left: var(--g); }
  #crosshair .c3, #crosshair .c4 { width: 2px; height: 10px; left: -1px; }
  #crosshair .c3 { top: calc(-10px - var(--g)); } #crosshair .c4 { top: var(--g); }
  #crosshair b { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
  #crosshair.enemy i, #crosshair.enemy b { background: #ff5a4a; }
  #hitmark { left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
  #hitmark i { position: absolute; width: 3px; height: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
  #hitmark i:nth-child(1) { left: -13px; top: -13px; transform: rotate(-45deg); } #hitmark i:nth-child(2) { left: 10px; top: -13px; transform: rotate(45deg); }
  #hitmark i:nth-child(3) { left: -13px; top: 2px; transform: rotate(45deg); } #hitmark i:nth-child(4) { left: 10px; top: 2px; transform: rotate(-45deg); }
  #hitmark.kill i { background: #ff4a3a; }

  /* kill streak */
  #streak { right: 28px; top: 36%; font: 900 50px Impact, "Arial Black", sans-serif; color: var(--gold); text-align: right;
    -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); display: none; }
  #streak small { display: block; font-size: 19px; color: #fff; -webkit-text-stroke: 1px var(--ink); letter-spacing: 1px; }
  #streak.pop { animation: pop .18s ease-out; }
  @keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
  #prompt { left: 50%; top: 63%; transform: translateX(-50%); font-weight: bold; font-size: 18px; background: rgba(12,16,30,.85);
    padding: 8px 16px; border-radius: 10px; border: 2px solid var(--gold); display: none; text-align: center; }
  #prompt small { display: block; font-size: 13px; opacity: .8; font-weight: normal; }

  #labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
  .dmg { position: absolute; font: 900 21px Impact, "Arial Black", sans-serif; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink);
    transform: translate(-50%, -50%); white-space: nowrap; display: none; }
  .dmg.crit { color: var(--gold); font-size: 30px; }
  .pow { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 36px; pointer-events: none;
    -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); font-family: Impact, "Arial Black", sans-serif; white-space: nowrap; }
  .ehp { position: absolute; width: 50px; height: 7px; background: rgba(0,0,0,.65); border: 1px solid #000; border-radius: 4px; overflow: hidden; transform: translate(-50%, -100%); display: none; }
  .ehp i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #ff7a5a, #d8281a); }
  .ehp.elite { border: 2px solid var(--gold); width: 64px; height: 9px; }
  .ehp b { position: absolute; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #c8ff6a, #44b014); } /* poisoned (2026-10-02): the health the poison is still going to take, green at the end of the red (game.js poisonLeft) */
  .ehp.pois { box-shadow: 0 0 6px rgba(150,255,70,.7); }
  .bubble { position: absolute; transform: translate(-50%, -100%); background: #fffbe8; color: #222; padding: 6px 11px; border-radius: 12px;
    font-size: 16px; font-weight: bold; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.3); display: none; }
  .bubble:after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fffbe8; border-bottom: 0; }
  .plabel { position: absolute; transform: translate(-50%, -100%); text-align: center; background: rgba(12,16,30,.85); border: 3px solid #fff;
    border-radius: 14px; padding: 6px 14px; white-space: nowrap; display: none; }
  .plabel .t { font: 900 22px Impact, "Arial Black", sans-serif; letter-spacing: 1px; }
  .plabel .r { font-size: 14px; font-weight: bold; opacity: .95; }

  #banner { position: fixed; top: 20%; left: 0; right: 0; text-align: center; pointer-events: none; display: none; }
  #banner .big { font: 900 clamp(44px, 7vw, 88px) Impact, "Arial Black", sans-serif; color: var(--gold); -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 5px 0 var(--ink); letter-spacing: 2px; }
  #banner .small { font-size: 22px; font-weight: bold; text-shadow: 0 2px 0 #000, 0 0 12px #000; margin-top: 2px; }
  #banner.show { animation: bannerIn .35s cubic-bezier(.2, 1.6, .4, 1); }
  /* the warning before a mini boss crashes in: a flashing WARNING, and the screen's edges pulsing purple */
  #warn { position: fixed; top: 34%; left: 0; right: 0; text-align: center; pointer-events: none; display: none; }
  #warn b { display: inline-block; font: 900 clamp(32px, 4.6vw, 58px) Impact, "Arial Black", sans-serif; letter-spacing: 4px; color: #ff5a78; -webkit-text-stroke: 2px var(--ink);
    text-shadow: 4px 4px 0 var(--ink), 0 0 20px rgba(255,60,110,.85); animation: warnBlink .5s linear infinite; }
  #warn span { display: block; margin-top: 4px; font: 900 24px Impact, "Arial Black", sans-serif; letter-spacing: 5px; color: #eac2ff; -webkit-text-stroke: 1px var(--ink);
    text-shadow: 2px 2px 0 var(--ink), 0 0 14px rgba(200,90,255,.85); }
  #warn::before { content: ''; position: fixed; inset: 0; box-shadow: inset 0 0 140px 36px rgba(190,50,255,.5); animation: warnEdge .5s ease-in-out infinite alternate; }
  @keyframes warnBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } }
  @keyframes warnEdge { from { opacity: .3; } to { opacity: 1; } }
  @keyframes bannerIn { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  #toast { position: fixed; top: 150px; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: bold; padding: 8px 18px;
    background: rgba(12,16,30,.85); border: 2px solid var(--gold); border-radius: 10px; display: none; text-align: center; pointer-events: none; z-index: 50; } /* (over the menu screens too: "controller connected") */
  /* a game controller (game.js PAD): the card, button or option the D-pad is on, and the pad's buttons in prompts as colored
     badges (Xbox colors; PlayStation's shapes in theirs; a Switch pad's in grey) */
  .card.padFocus { outline: 4px solid #ffe08a; outline-offset: 6px; filter: brightness(1.12) drop-shadow(0 0 16px rgba(255,200,90,.6)); }
  .card.settled.padFocus { animation: tabletShake .38s ease; } .card.r3.settled.padFocus { animation: tabletShake .38s ease, goldShine 2.4s linear infinite; }
  .btn.padFocus { outline: 3px solid #ffe08a; outline-offset: 4px; filter: brightness(1.12) drop-shadow(0 0 12px rgba(255,170,60,.55)); }
  .opts label.padFocus, .devbox .padFocus { outline: 2px solid #ffe08a; outline-offset: 3px; border-radius: 8px; background: rgba(255,224,138,.14); }
  :is(#prompt, #quest) b.pk { display: inline-block; min-width: 1.5em; padding: 0 .35em; margin: 0 .1em; border-radius: 999px; color: #fff; text-align: center; line-height: 1.5em; text-shadow: 0 1px 0 rgba(0,0,0,.5); box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); background: #555; }
  :is(#prompt, #quest) b.pk-a { background: #3a9a48; } :is(#prompt, #quest) b.pk-b { background: #c8403a; } :is(#prompt, #quest) b.pk-x { background: #3a72c8; } :is(#prompt, #quest) b.pk-y { background: #c8982e; }
  :is(#prompt, #quest) b.pk.ps.pk-a { background: #4a74c8; } :is(#prompt, #quest) b.pk.ps.pk-x { background: #b860a8; } :is(#prompt, #quest) b.pk.ps.pk-y { background: #2e9a80; } :is(#prompt, #quest) b.pk.nin { background: #4a4a52; }
  /* a keyboard key in the objective panel: a little key cap (a controller's buttons are the badges above) */
  #quest .qh > b:not(.pk) { display: inline-block; min-width: 1.45em; padding: 0 .3em; margin: 0 .1em; border-radius: 6px; background: #f2ead8; color: #1a0a00; text-align: center; line-height: 1.35em; text-shadow: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
  /* arrows pointing at things (game.js ptrAt): a chunky arrow bobbing toward what it points at (game.js turns it), with how far
     it is behind it. A boss off the screen gets one on an ellipse round the middle of the screen: red for the boss, purple for
     a mini boss (2026-10-02) */
  .ptr { position: absolute; width: 0; height: 0; }
  .ptr i { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; }
  .ptr i::before, .ptr i::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 50%, 69% 50%, 69% 100%, 31% 100%, 31% 50%, 0 50%); animation: ptrBob .5s ease-in-out infinite alternate; }
  .ptr i::before { inset: 0; background: var(--ink); }
  .ptr i::after { inset: 5px 6px 4px; background: var(--tc); }
  @keyframes ptrBob { from { translate: 0 3px; } to { translate: 0 -7px; } }
  .ptr b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font: 900 17px Impact, "Arial Black", sans-serif; letter-spacing: .5px; color: var(--tc); -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
  #offs { inset: 0; }
  #offs .off { display: none; opacity: .92; --tc: #ff6a5a; }
  #offs .off.mini { --tc: #d6a8ff; }
  #hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(ellipse at center, rgba(255,0,0,0) 48%, rgba(220,0,20,.6) 100%); }
  #lowhp { position: fixed; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at center, rgba(255,0,0,0) 55%, rgba(160,0,20,.5) 100%); }
  #lowhp.on { animation: throb 1s infinite; }
  @keyframes throb { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
  #fade { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .28s; }
  #buildPanel { position: fixed; right: 14px; top: 70px; width: min(620px, 60vw); max-height: 84vh; overflow: hidden; display: none; padding: 10px 14px; transform-origin: top right;
    background: rgba(12,16,30,.9); border: 2px solid rgba(255,255,255,.2); border-radius: 14px; pointer-events: none; }
  .bl { display: flex; gap: 10px; align-items: center; margin: 5px 0; font-size: 14px; text-align: left; }
  .bl .i { font-size: 24px; width: 32px; text-align: center; }
  .bl b { font-size: 15px; }

  /* menus */
  .overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: safe center; flex-direction: column; text-align: center; overflow-y: auto;
    background: radial-gradient(ellipse at center, rgba(20,40,70,.84), rgba(3,5,12,.96)); padding: 20px; }
  .overlay h1 { font: 900 clamp(56px, 10vw, 118px) Impact, "Arial Black", sans-serif; margin: 0; color: var(--gold); letter-spacing: 4px;
    -webkit-text-stroke: 3px var(--ink); text-shadow: 0 7px 0 #6b3b12, 0 12px 30px rgba(0,0,0,.6); }
  .overlay h2 { margin: 6px 0 16px; font-weight: normal; font-size: 21px; opacity: .92; max-width: 760px; }
  .overlay h3 { margin: 14px 0 8px; font-size: 18px; letter-spacing: 2px; color: var(--gold); }
  .overlay p { max-width: 660px; font-size: 17px; line-height: 1.5; opacity: .92; margin: 8px 0; }
  .sub { font: 900 30px Impact, "Arial Black", sans-serif; letter-spacing: 6px; color: #7ae0ff; -webkit-text-stroke: 1.5px var(--ink); margin-top: -4px; }
  .btn { background: #2f7d3b; color: #fff; border: 0; border-bottom: 5px solid #1c4d24; font: inherit; font-size: 22px; font-weight: bold;
    padding: 12px 34px; border-radius: 14px; cursor: pointer; margin: 8px; }
  .btn:hover { background: #38923f; }
  .btn.alt { background: #5a4a7a; border-bottom-color: #3a2d52; } .btn.alt:hover { background: #6a5a8a; }
  .btn:disabled, .btn:disabled:hover { background: #3a3a44; border-bottom-color: #22222a; color: #888; cursor: default; }
  #rerollBtn { font-size: 18px; padding: 8px 24px; margin-top: 14px; }
  .controls { display: grid; grid-template-columns: auto auto; gap: 3px 18px; text-align: left; font-size: 14px; margin: 14px 0 8px;
    background: rgba(0,0,0,.35); padding: 10px 18px; border-radius: 12px; }
  .controls b { color: var(--gold); }
  #dead h1 { color: #ff6a5a; text-shadow: 0 7px 0 #5a1010, 0 12px 30px rgba(0,0,0,.6); }
  .stats { display: grid; grid-template-columns: auto auto; gap: 4px 24px; font-size: 19px; margin: 6px 0 14px; text-align: left; }
  .stats b { color: var(--gold); text-align: right; }
  .buildlist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 640px; margin: 4px 0 12px; }
  /* the end of a run: the stats and, beside them, how much damage each weapon did (side by side when there's room, stacked when not) */
  .endCols { display: flex; flex-wrap: wrap; gap: 0 20px; justify-content: center; align-items: flex-start; max-width: 96vw; }
  .endCols .stats { padding: 8px 14px 10px; gap: 2px 24px; } /* (room inside its border, like the panel beside it; the rows a touch closer so it's no taller) */
  .dmgBy { text-align: left; font-size: 17px; margin: 6px 0 14px; padding: 10px 16px 12px; min-width: 300px; max-width: min(440px, 92vw); box-sizing: border-box; }
  .dmgBy h3 { margin: 0 0 8px; text-align: center; font-size: 19px; }
  .dbRow { display: grid; grid-template-columns: minmax(130px, 1fr) 62px 64px 36px; gap: 8px; align-items: center; padding: 2px 0; }
  .dbN { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbN i { font-style: normal; display: inline-block; width: 1.55em; }
  .dbBar { height: 9px; border-radius: 5px; background: rgba(0,0,0,.4); overflow: hidden; box-shadow: inset 0 1px 0 rgba(0,0,0,.5); }
  .dbBar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ff9a2e, #ffe27a); }
  .dbRow b { color: var(--tGold, var(--gold)); text-align: right; font-variant-numeric: tabular-nums; }
  .dbRow em { font-style: normal; opacity: .75; text-align: right; font-size: .85em; font-variant-numeric: tabular-nums; }
  .dbRow.gone .dbN { opacity: .6; } /* (a weapon swapped away during the run) */
  #cards { background: radial-gradient(ellipse at center, rgba(10,14,30,.7), rgba(3,5,12,.9)); }
  #cardRow, #wpick { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
  .card { width: 224px; min-height: 290px; background: linear-gradient(180deg, #273052, #141827); border: 4px solid #d8d8d8; border-radius: 18px;
    padding: 16px 14px; cursor: pointer; transition: transform .12s, box-shadow .12s; position: relative; text-align: center; animation: cardIn .4s backwards; }
  .card:hover { transform: translateY(-8px) scale(1.04); }
  .card .rar { font-size: 12px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
  .card .ic { font-size: 66px; margin: 10px 0 6px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.5)); }
  .card .nm { font: 900 25px Impact, "Arial Black", sans-serif; letter-spacing: .5px; line-height: 1.05; }
  .card .ds { font-size: 15px; opacity: .92; margin-top: 8px; line-height: 1.35; }
  .card .ky { position: absolute; top: 8px; left: 12px; font: 900 18px Impact, sans-serif; opacity: .55; }
  .card .ow { position: absolute; top: 8px; right: 12px; font-size: 12px; font-weight: bold; opacity: .8; }
  .card .pun { font-size: 13px; font-style: italic; opacity: .65; margin-top: 8px; }
  .card.r1 { border-color: #4aa8ff; box-shadow: 0 0 26px rgba(74,168,255,.35); }
  .card.r2 { border-color: #c070ff; box-shadow: 0 0 30px rgba(192,112,255,.45); }
  .card.r3 { border-color: #ffc23a; box-shadow: 0 0 36px rgba(255,194,58,.6); background: linear-gradient(180deg, #4a3a18, #1a1408); }
  .card.small { width: 190px; min-height: 230px; }
  @keyframes cardIn { from { transform: translateY(60px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
  .hint { opacity: .65; font-size: 14px; margin-top: 10px; }
  .opts { display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,.35); padding: 14px 22px; border-radius: 12px; margin: 10px 0; font-size: 16px; text-align: left; }
  .opts input[type=range] { width: 200px; vertical-align: middle; margin-left: 10px; }
  #best { margin-top: 6px; opacity: .85; font-size: 15px; }
  #clickLock { position: fixed; left: 50%; top: 55%; transform: translateX(-50%); font-weight: bold; font-size: 20px; background: rgba(12,16,30,.85);
    padding: 10px 20px; border-radius: 12px; border: 2px solid var(--gold); display: none; pointer-events: none; }

  /* ================= THE JUNGLE TEMPLE MENUS =================
     Carved stone (with grain, cracks and moss), worn gold trim, hanging vines that sway, flickering torchlight.
     Stone is drawn with layered gradients plus tiny inline SVG textures, so nothing needs downloading. */
  :root {
    --tNoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --tCracks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='rgba(255,240,210,.16)' stroke-width='1.4' transform='translate(1 1)'%3E%3Cpath d='M34 0 L46 22 L39 40 L56 62 L50 84'/%3E%3Cpath d='M46 22 L66 28'/%3E%3Cpath d='M320 150 L288 160 L279 184 L254 192 L246 222'/%3E%3Cpath d='M279 184 L295 204'/%3E%3Cpath d='M160 240 L168 218 L159 202 L176 186'/%3E%3C/g%3E%3Cg stroke='rgba(18,12,6,.55)' stroke-width='1.6'%3E%3Cpath d='M34 0 L46 22 L39 40 L56 62 L50 84'/%3E%3Cpath d='M46 22 L66 28'/%3E%3Cpath d='M320 150 L288 160 L279 184 L254 192 L246 222'/%3E%3Cpath d='M279 184 L295 204'/%3E%3Cpath d='M160 240 L168 218 L159 202 L176 186'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --tVine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M20 0 C29 20 11 40 20 60 S29 100 20 120' stroke='%23254a12' stroke-width='7' fill='none'/%3E%3Cpath d='M20 0 C29 20 11 40 20 60 S29 100 20 120' stroke='%235a9a2e' stroke-width='3.5' fill='none'/%3E%3Cpath d='M18 28 Q3 18 1 35 Q14 40 18 28Z' fill='%236cbc3e' stroke='%23254a12' stroke-width='1.6'/%3E%3Cpath d='M10 31 L17 29' stroke='%23254a12' stroke-width='1'/%3E%3Cpath d='M22 88 Q37 78 39 95 Q26 100 22 88Z' fill='%237ccc4a' stroke='%23254a12' stroke-width='1.6'/%3E%3Cpath d='M30 91 L23 89' stroke='%23254a12' stroke-width='1'/%3E%3C/svg%3E");
    --tGlyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='18'%3E%3Cpath d='M0 9 L7 2 L14 9 L21 16 L28 9 L35 2 L42 9 L49 16 L56 9' fill='none' stroke='%23e8b54a' stroke-width='2.2'/%3E%3Ccircle cx='14' cy='9' r='2' fill='%23e8b54a'/%3E%3Ccircle cx='42' cy='9' r='2' fill='%23e8b54a'/%3E%3C/svg%3E");
    --tStone: linear-gradient(165deg, #948b79 0%, #736b5b 45%, #595041 100%);
    --tGold: #e9b347; --tGoldDk: #8a5a12; --tInk: #231708; --tCream: #fff4dc;
  }
  .overlay { font-family: 'Nunito', "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: var(--tCream);
    background: radial-gradient(ellipse at 50% 40%, rgba(46,30,10,.55), rgba(8,6,3,.9) 72%),
                radial-gradient(circle at 6% 62%, rgba(255,150,40,.3), transparent 32%), radial-gradient(circle at 94% 62%, rgba(255,150,40,.3), transparent 32%); }
  #cards { background: radial-gradient(ellipse at 50% 42%, rgba(46,30,10,.42), rgba(8,6,3,.86) 74%),
                radial-gradient(circle at 5% 60%, rgba(255,150,40,.28), transparent 30%), radial-gradient(circle at 95% 60%, rgba(255,150,40,.28), transparent 30%); }
  .overlay h1, .tLogo { font-family: 'Luckiest Guy', Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: 3px; color: transparent;
    background: linear-gradient(180deg, #fff8c8 0%, #ffd64a 36%, #eb9d1c 62%, #b8680e 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-stroke: 3px #2e1804; text-shadow: none; filter: drop-shadow(0 6px 0 #4e2a08) drop-shadow(0 12px 16px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(255,170,60,.35)); }
  #dead h1 { background: linear-gradient(180deg, #ffd2b8 0%, #ff7a4a 40%, #c8321a 70%, #7a160a 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
  .overlay h2 { font-family: 'Nunito', sans-serif; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
  .overlay h3 { font-family: 'Luckiest Guy', Impact, sans-serif; font-weight: 400; letter-spacing: 3px; color: var(--tGold); text-shadow: 0 3px 0 #3a2206, 0 0 14px rgba(255,170,60,.4); font-size: 22px; }
  .sub { font-family: 'Luckiest Guy', Impact, sans-serif; font-weight: 400; color: #bff08a; -webkit-text-stroke: 1.5px #1c3208; text-shadow: 0 3px 0 #1c3208, 0 0 14px rgba(160,255,90,.35); }
  /* carved stone panels */
  .tStone, .controls, .opts, .stats, .dmgBy, .loadout, .buildlist:not(:empty), .tPlaque, .devbox {
    position: relative; color: var(--tCream); text-shadow: 0 2px 0 rgba(0,0,0,.55);
    background: var(--tCracks), radial-gradient(circle at 0 0, rgba(76,128,34,.62), transparent 64px), radial-gradient(circle at 100% 100%, rgba(76,128,34,.5), transparent 78px),
                radial-gradient(circle at 100% 0, rgba(76,128,34,.35), transparent 44px), var(--tNoise), var(--tStone) !important;
    border: 3px solid #362d20 !important; border-radius: 14px 20px 12px 18px / 18px 12px 20px 14px !important;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -6px 0 rgba(0,0,0,.34), inset 0 0 30px rgba(0,0,0,.38), 0 0 0 3px #a8822f, 0 0 0 6px #2a2216, 0 12px 26px rgba(0,0,0,.6) !important; }
  .controls { font-size: 14.5px; padding: 14px 20px 14px; max-width: 900px; }
  .controls b, .stats b, .opts b { color: var(--tGold); }
  .tPlaque { display: inline-block; padding: 10px 22px; margin: 6px 0; font-size: 16.5px; line-height: 1.45; max-width: 760px; }
  .tPlaque p { margin: 0; }
  .tPlaque::before, .controls::before, .opts::before { content: ''; position: absolute; left: 18px; right: 18px; top: 5px; height: 14px; background: var(--tGlyph) repeat-x 0 50% / 42px 14px; opacity: .55; pointer-events: none; }
  .controls { padding-top: 24px; } .opts { padding-top: 26px !important; }
  /* stone-tablet buttons: press them in */
  .btn { font-family: 'Luckiest Guy', Impact, sans-serif; font-weight: 400; letter-spacing: 1.5px; font-size: 22px; color: #ffe39a; padding: 12px 30px 9px; margin: 10px;
    background: var(--tNoise), linear-gradient(180deg, #a09784, #756c5b 58%, #5a5143) !important; border: 3px solid #362d20; border-radius: 12px 16px 10px 14px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.34), 0 0 0 2px #c8962e, 0 7px 0 #2e2618, 0 12px 18px rgba(0,0,0,.5);
    text-shadow: 0 2px 0 #2e1804, 0 0 10px rgba(255,190,80,.4); transition: transform .07s, box-shadow .07s, filter .15s; }
  .btn:hover { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255,170,60,.55)); }
  .btn:active, .btn.pressed { transform: translateY(6px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.34), 0 0 0 2px #c8962e, 0 1px 0 #2e2618, 0 3px 8px rgba(0,0,0,.5); }
  .btn.alt { color: #d8ffb0; background: var(--tNoise), radial-gradient(circle at 12% 20%, rgba(90,150,40,.7), transparent 40%), linear-gradient(180deg, #8a9474, #5e6a4c 58%, #465238) !important; }
  .btn:disabled, .btn:disabled:hover { filter: grayscale(.8) brightness(.7); cursor: default; transform: none; }
  #rerollBtn { font-size: 19px; padding: 9px 24px 7px; }
  #rerollN { display: inline-block; min-width: 26px; margin-left: 4px; padding: 1px 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe79a, #c8861a); color: #2e1804; text-shadow: none; }
  .opts { font-size: 16px; }
  .opts input[type=range] { accent-color: #e9b347; } .opts input[type=checkbox] { accent-color: #e9b347; transform: scale(1.2); margin-right: 6px; }
  /* dev mode (dev.html only: these elements are never created in index.html) */
  #devBadge { position: fixed; top: 6px; right: 8px; z-index: 100000; pointer-events: none; padding: 1px 9px 2px; border-radius: 7px; background: #d8283a; color: #fff;
    border: 2px solid #3a0a10; font: 900 13px Impact, 'Arial Black', sans-serif; letter-spacing: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
  body.dev #build { top: 36px; } /* (the upgrade icons move down, clear of the badge) */
  #godTag { top: 32px; left: 128px; padding: 2px 9px; border-radius: 8px; background: #d8283a; color: #fff; border: 2px solid var(--ink); font: 900 14px Impact, sans-serif; letter-spacing: 1px; display: none; }
  .devbox { display: flex; flex-wrap: wrap; gap: 5px 7px; align-items: center; justify-content: center; max-width: 1180px; margin: 6px 0 2px; padding: 6px 12px !important; font-size: 13px; }
  .devbox b { color: #ffb0b8; } .devbox label { cursor: pointer; font-weight: 800; } .devbox input { accent-color: #e9b347; margin-right: 4px; }
  .devbox button { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; padding: 3px 8px; cursor: pointer; background: var(--tNoise), linear-gradient(180deg, #7a7262, #544c3e) !important;
    border: 2px solid #2e2618; color: var(--tCream); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #2e2618; border-radius: 8px; transition: transform .06s; }
  .devbox button:active { transform: translateY(3px); box-shadow: 0 0 0 #2e2618; }
  .devbox button.on { background: var(--tNoise), linear-gradient(180deg, #e8a632, #a8661a) !important; color: #2e1804; text-shadow: none; }
  #godRow { color: #ff9aa4; }
  /* level-up tablets, hanging on vines */
  #cardsTitle, #cardsSub { position: relative; z-index: 2; }
  #cardRow { gap: 26px; margin-top: 30px; }
  /* the swap screen (a stage gun with every slot full): five smaller tablets, one per weapon you could give up */
  #cardRow.swapRow { gap: 14px; }
  #cardRow.swapRow .card { width: 164px; min-height: 232px; padding: 14px 10px 12px; }
  #cardRow.swapRow .card .ic { width: 72px; height: 72px; font-size: 40px; }
  #cardRow.swapRow .card .nm { font-size: 19px; }
  #cardRow.swapRow .card .ds { font-size: 13px; }
  .card { width: 236px; min-height: 306px; padding: 18px 14px 16px; color: var(--tCream); text-shadow: 0 2px 0 rgba(0,0,0,.6);
    background: var(--tCracks), radial-gradient(circle at 0 100%, rgba(76,128,34,.5), transparent 70px), var(--tNoise), var(--tStone);
    border: 4px solid #362d20 !important; border-radius: 14px 18px 12px 16px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -8px 0 rgba(0,0,0,.3), inset 0 0 28px rgba(0,0,0,.42), 0 0 0 3px #a8822f, 0 14px 26px rgba(0,0,0,.6);
    transform-origin: 50% -220px; animation: vineSwing .95s cubic-bezier(.3,.9,.35,1) backwards; transition: filter .15s; }
  .card::before, .card::after { content: ''; position: absolute; top: -236px; width: 22px; height: 240px; background: var(--tVine) repeat-y 50% 100% / 22px 66px; pointer-events: none; }
  .card::before { left: 14%; } .card::after { right: 14%; transform: scaleX(-1); }
  .card.small::before, .card.small::after { display: none; }
  .card:hover { transform: none; filter: brightness(1.1) drop-shadow(0 0 14px rgba(255,190,90,.45)); }
  .card.settled { animation: none; } .card.settled:hover, .card.chosen { animation: tabletShake .38s ease; }
  .card.chosen { filter: brightness(1.35) drop-shadow(0 0 26px rgba(255,220,120,.9)); }
  .card .ic { width: 104px; height: 104px; margin: 8px auto 8px; display: grid; place-items: center; font-size: 58px; border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, rgba(255,255,255,.2), transparent 55%), radial-gradient(circle, #5a5242, #3a3328);
    box-shadow: inset 0 4px 12px rgba(0,0,0,.65), 0 0 0 4px #b08a3a, 0 0 0 7px #2e2618; filter: none; }
  .card .ic > * { filter: drop-shadow(2px 3px 0 rgba(0,0,0,.45)); }
  .card .nm { font-family: 'Luckiest Guy', Impact, sans-serif; font-weight: 400; font-size: 25px; letter-spacing: .5px; color: #fff0c0; text-shadow: 0 3px 0 #2e1804, 0 0 10px rgba(0,0,0,.4); }
  .card .rar { display: inline-block; padding: 2px 10px; border-radius: 6px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 11.5px; letter-spacing: 2.5px;
    background: rgba(20,14,6,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(232,181,74,.6); color: #e8e0cc !important; }
  .card .ds { font-weight: 700; font-size: 14.5px; } .card .ds b { color: #ffe08a; }
  .card .ky { font-family: 'Luckiest Guy', Impact, sans-serif; font-weight: 400; color: #ffe08a; opacity: .75; top: 10px; left: 14px; }
  .card .pun { font-weight: 600; opacity: .72; }
  .card .stat { margin: 7px auto 0; display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(20,14,6,.55); font-weight: 900; font-size: 15px; color: #fff; box-shadow: 0 0 0 1px rgba(232,181,74,.55); }
  .card .stat i { font-style: normal; opacity: .75; } .card .stat b { color: #9aff8a; }
  /* rarity: stone, jade, amethyst, glowing gold */
  .card.r1 { background: var(--tCracks), var(--tNoise), radial-gradient(circle at 30% 20%, rgba(200,255,230,.35), transparent 45%), linear-gradient(165deg, #5fcf9c, #2a8a62 52%, #175a3e);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -8px 0 rgba(0,0,0,.28), inset 0 0 30px rgba(0,40,20,.45), 0 0 0 3px #bfe9a0, 0 0 30px rgba(90,255,180,.5), 0 14px 26px rgba(0,0,0,.6); }
  .card.r1 .rar { color: #c8ffe4 !important; box-shadow: 0 0 0 1px rgba(160,255,210,.7); }
  .card.r2 { background: var(--tCracks), conic-gradient(from 210deg at 70% 30%, rgba(255,255,255,.14), transparent 25%, rgba(255,255,255,.1) 50%, transparent 75%), var(--tNoise), linear-gradient(165deg, #c890ff, #7a3ad4 50%, #3e1680);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -8px 0 rgba(0,0,0,.3), inset 0 0 30px rgba(40,0,70,.5), 0 0 0 3px #e0c0ff, 0 0 34px rgba(190,120,255,.6), 0 14px 26px rgba(0,0,0,.6); }
  .card.r2 .rar { color: #f0dcff !important; box-shadow: 0 0 0 1px rgba(220,180,255,.75); }
  .card.r3 { color: #2e1804; text-shadow: 0 1px 0 rgba(255,240,190,.6);
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%) 0 0 / 320% 100% no-repeat, var(--tNoise), linear-gradient(165deg, #fff3a8, #ffcd40 36%, #dc9018 68%, #a0600a);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -8px 0 rgba(90,50,0,.35), inset 0 0 30px rgba(120,60,0,.35), 0 0 0 3px #fff0a0, 0 0 44px rgba(255,200,70,.85), 0 14px 26px rgba(0,0,0,.6);
    animation: vineSwing .95s cubic-bezier(.3,.9,.35,1) backwards, goldShine 2.4s linear infinite; }
  .card.r3.settled { animation: goldShine 2.4s linear infinite; } .card.r3.settled:hover, .card.r3.chosen { animation: tabletShake .38s ease, goldShine 2.4s linear infinite; }
  .card.r3 .nm { color: #3a1e04; text-shadow: 0 2px 0 rgba(255,245,200,.7); } .card.r3 .ds b { color: #7a2a00; } .card.r3 .ky { color: #5a3408; }
  .card.r3 .rar { color: #3a1e04 !important; background: rgba(255,240,180,.55); box-shadow: 0 0 0 1px rgba(120,70,0,.6); }
  .card.r3 .ic { box-shadow: inset 0 4px 12px rgba(0,0,0,.65), 0 0 0 4px #fff0a0, 0 0 0 7px #8a5a0a, 0 0 22px rgba(255,220,120,.9); }
  .card.r3 .pun { color: #4a2a06; opacity: .85; } .card.r3 .stat { background: rgba(80,40,0,.55); }
  .card.small { width: 196px; min-height: 238px; transform-origin: 50% 50%; animation: tabletRise .6s cubic-bezier(.3,.9,.35,1) backwards; }
  .card.small.settled { animation: none; } .card.small.settled:hover, .card.small.settled.padFocus { animation: tabletShake .38s ease; } /* (once risen it stays put: pointing away from it doesn't replay its rise) */
  .card.small .ic { width: 82px; height: 82px; font-size: 46px; }
  @keyframes vineSwing { 0% { transform: translateY(-115vh) rotate(-16deg); } 55% { transform: translateY(0) rotate(8deg); } 71% { transform: rotate(-4.5deg); } 85% { transform: rotate(2.2deg); } 94% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
  @keyframes tabletShake { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-4deg) translateY(-3px); } 42% { transform: rotate(3.5deg); } 66% { transform: rotate(-2deg); } 86% { transform: rotate(1deg); } }
  @keyframes tabletRise { from { transform: translateY(40px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes goldShine { 0% { background-position: 130% 0, 0 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0, 0 0; } }
  /* a chest's loot rolls before it lands */
  .card.rolling { pointer-events: none; animation: rollShake .09s linear infinite !important; }
  .card.rolling .ic { filter: blur(1.2px); }
  .card.landed { animation: landPop .45s cubic-bezier(.2,1.6,.4,1) !important; }
  .card.r3.landed { animation: landPop .45s cubic-bezier(.2,1.6,.4,1), goldShine 2.4s linear infinite !important; }
  @keyframes rollShake { 0% { transform: translateX(-2px) rotate(-.6deg); } 50% { transform: translateX(2px) rotate(.6deg); } 100% { transform: translateX(-2px) rotate(-.6deg); } }
  @keyframes landPop { 0% { transform: scale(1.18); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
  #goldBurst { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,240,170,.95), rgba(255,190,60,.55) 22%, transparent 60%); }
  #goldBurst.on { animation: goldFlash 1.1s ease-out; }
  @keyframes goldFlash { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
  /* torches, hanging vines, leaves and fireflies */
  .torch { position: fixed; bottom: 16%; width: 44px; height: 170px; pointer-events: none; z-index: 1; }
  .torch.l { left: 2.5%; } .torch.r { right: 2.5%; }
  .torch .stick { position: absolute; left: 16px; bottom: 0; width: 12px; height: 118px; border-radius: 4px; background: linear-gradient(90deg, #2a180a, #6a4424 50%, #2a180a); box-shadow: 0 0 0 2px #1a0e04; }
  .torch .stick::before { content: ''; position: absolute; left: -12px; top: -6px; width: 36px; height: 20px; border-radius: 4px 4px 14px 14px; background: var(--tNoise), linear-gradient(180deg, #8a8272, #4a4234); box-shadow: 0 0 0 2px #1a0e04, inset 0 2px 0 rgba(255,255,255,.25); }
  .torch .stick::after { content: ''; position: absolute; left: -4px; top: 24px; width: 20px; height: 7px; border-radius: 3px; background: #b08a3a; box-shadow: 0 30px 0 #b08a3a; }
  .torch .fire { position: absolute; left: 2px; bottom: 116px; width: 40px; height: 62px; border-radius: 50% 50% 42% 42% / 64% 64% 36% 36%;
    background: radial-gradient(ellipse at 50% 82%, #fffbe0 0%, #ffd26a 22%, #ff9a28 48%, #ff4e10 70%, transparent 74%); transform-origin: 50% 100%; animation: flicker .16s infinite alternate; filter: drop-shadow(0 0 10px rgba(255,140,40,.9)); }
  .torch .fire::after { content: ''; position: absolute; left: 11px; top: 20px; width: 18px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #ffffff, #fff0b0 45%, transparent 72%); animation: flicker .11s infinite alternate-reverse; }
  .torch .glow { position: absolute; left: -130px; bottom: 30px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,160,50,.36), rgba(255,120,30,.12) 40%, transparent 68%); animation: glowPulse 1.7s ease-in-out infinite alternate; }
  @keyframes flicker { 0% { transform: scale(1, 1) skewX(0deg); opacity: .94; } 40% { transform: scale(.93, 1.08) skewX(4deg); } 100% { transform: scale(1.06, .92) skewX(-4deg); opacity: 1; } }
  @keyframes glowPulse { 0% { opacity: .75; transform: scale(.96); } 35% { opacity: 1; } 60% { opacity: .82; transform: scale(1.04); } 100% { opacity: .95; transform: scale(1); } }
  .vineHang { position: fixed; top: -12px; width: 26px; background: var(--tVine) repeat-y 50% 100% / 26px 78px; transform-origin: 50% 0; pointer-events: none; animation: vineSway 4s ease-in-out infinite alternate; z-index: 1; }
  .leafClump { position: fixed; top: -30px; width: 230px; height: 150px; pointer-events: none; z-index: 1; background-repeat: no-repeat; background-size: contain; animation: vineSway 6s ease-in-out infinite alternate; transform-origin: 50% 0; }
  .leafClump.l { left: -40px; } .leafClump.r { right: -40px; transform: scaleX(-1); animation-name: vineSwayR; }
  @keyframes vineSway { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
  @keyframes vineSwayR { from { transform: scaleX(-1) rotate(-2.6deg); } to { transform: scaleX(-1) rotate(2.6deg); } }
  .firefly { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 10px 4px rgba(255,236,120,.6); pointer-events: none; z-index: 1; animation: ffly 7s ease-in-out infinite, ffBlink 2.3s ease-in-out infinite; }
  @keyframes ffly { 0% { transform: translate(0, 0); } 25% { transform: translate(40px, -30px); } 50% { transform: translate(-20px, -60px); } 75% { transform: translate(-50px, -20px); } 100% { transform: translate(0, 0); } }
  @keyframes ffBlink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
  .fallLeaf { position: fixed; top: -40px; width: 26px; height: 26px; pointer-events: none; z-index: 1; animation: leafFall 11s linear infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M3 22 Q2 6 22 3 Q24 20 3 22Z' fill='%236cbc3e' stroke='%23254a12' stroke-width='1.5'/%3E%3Cpath d='M4 21 L19 6' stroke='%23254a12' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain; }
  @keyframes leafFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(60px, 55vh) rotate(260deg); } 92% { opacity: .9; } 100% { transform: translate(-20px, 112vh) rotate(520deg); opacity: 0; } }
  /* the title: MONKEY DO carved in gold, vines wrapped round it, the temple and Cap in the middle */
  #title { justify-content: space-between; background: radial-gradient(ellipse at 50% 52%, transparent 30%, rgba(6,4,2,.55) 78%, rgba(4,3,1,.85) 100%); padding: 14px 20px 18px; }
  .logoWrap { position: relative; display: inline-block; margin-top: 4px; }
  .logoWrap h1 { position: relative; z-index: 1; font-size: clamp(56px, min(11vw, 14.5vh), 136px); letter-spacing: 6px; line-height: .95; margin: 0; }
  #title .sub { font-size: clamp(20px, 3.3vh, 30px); }
  .logoWrap svg { position: absolute; left: -3%; top: -6%; width: 106%; height: 116%; pointer-events: none; overflow: visible; }
  .logoWrap svg.back { z-index: 0; } .logoWrap svg.front { z-index: 2; }
  .titleTop, .titleBottom { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 3; }
  /* Play: the title's one big button (2026-10-03: it leads to the character select screen; three starter-gun tablets stood here before) */
  #playBtn { font-size: 40px; letter-spacing: 3px; padding: 16px 76px 11px; margin: 4px 10px 10px; color: #fff3b8; animation: playGlow 1.6s ease-in-out infinite alternate; }
  @keyframes playGlow { from { filter: brightness(1) drop-shadow(0 0 6px rgba(255,180,60,.35)); } to { filter: brightness(1.14) drop-shadow(0 0 20px rgba(255,190,70,.85)); } }
  #playBtn:hover, #playBtn.padFocus { animation: none; filter: brightness(1.2) drop-shadow(0 0 22px rgba(255,200,80,.95)); }
  /* the character select screen (2026-10-03, after Play): the monkeys (three of them: --n) stand on stone pedestals in the 3D scene, in the room
     between the heading and their stone tablets (game.js lines each monkey up over his tablet). A click on a tablet (or on
     the monkey over it) chooses him: the chosen tablet (.on) lights up gold and lifts, the others dim (and brighten under
     the pointer). Each has the name, the starting gun, and bars for move speed and max health, with a tag saying how that
     compares with the other monkey. The Play button under them (#selGo, glowing like the title's) starts the run */
  #select { justify-content: space-between; background: radial-gradient(ellipse at 50% 46%, transparent 40%, rgba(6,4,2,.5) 82%, rgba(4,3,1,.84) 100%); padding: 14px 20px 12px; }
  #select .torch { display: none; }
  .selTop, .selBottom { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 3; }
  .selTop h1 { font-size: clamp(32px, min(6.2vw, 8.2vh), 74px); letter-spacing: 4px; margin: 4px 0 0; line-height: 1; }
  #selRow { display: flex; gap: clamp(8px, 1.6vw, 36px); justify-content: center; margin: 0 0 4px; }
  .selCard { width: min(330px, calc((100vw - 76px) / var(--n, 3))) !important; min-height: 0 !important; padding: 12px 16px 13px !important; text-align: left; opacity: .8; filter: saturate(.7) brightness(.84); transition: filter .18s, opacity .18s, translate .18s; }
  .selCard.on, .selCard.on:hover { opacity: 1; filter: none; translate: 0 -6px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -8px 0 rgba(0,0,0,.3), inset 0 0 28px rgba(0,0,0,.42), 0 0 0 3px #ffd24a, 0 0 28px rgba(255,200,80,.8), 0 14px 26px rgba(0,0,0,.6); }
  .selCard .nm { font-size: 34px; letter-spacing: 2px; display: inline-block; margin-right: 10px; }
  .selCard .rar { vertical-align: 7px; }
  .selCard .ds { margin-top: 2px; font-size: 14px; line-height: 1.3; min-height: 1.3em; }
  .selCard .ky { left: auto; right: 14px; top: 10px; }
  .selGun { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 6px 10px; border-radius: 10px; background: rgba(20,14,6,.5); box-shadow: 0 0 0 1px rgba(232,181,74,.5); }
  .selGun .gi { font-size: 30px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.45)); }
  .selGun b { display: block; font-family: 'Luckiest Guy', Impact, sans-serif; font-weight: 400; font-size: 18px; letter-spacing: .5px; color: #ffe08a; }
  .selGun small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: 1.5px; opacity: .75; }
  .selStat { display: grid; grid-template-columns: 84px 1fr 42px 62px; align-items: center; gap: 7px; margin-top: 6px; font-weight: 800; font-size: 14px; white-space: nowrap; }
  .selStat .stb { height: 14px; border-radius: 8px; background: rgba(20,14,6,.62); box-shadow: inset 0 2px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(232,181,74,.45); overflow: hidden; }
  .selStat .stb i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(180deg, #8ae8ff, #2a9ad8); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
  .selStat .stb.hp i { background: linear-gradient(180deg, #ff9a8a, #e03a2e); }
  .selStat b { color: #fff; font-size: 16px; text-align: right; }
  .selStat em { font-style: normal; font-size: 12.5px; font-weight: 900; padding: 1px 5px; border-radius: 6px; text-align: center; white-space: nowrap; text-shadow: none; }
  .selStat em.up { background: #2f8a3a; color: #eaffea; } .selStat em.dn { background: #9a3528; color: #ffe9e4; } .selStat em.eq { background: rgba(20,14,6,.5); color: #e8e0cc; }
  #selHint { margin-top: 2px; } #selHint b { color: var(--tGold); }
  #select .menuRow .btn { margin: 6px 8px; } #selGo { font-size: 26px; letter-spacing: 2px; padding: 10px 30px 7px; min-width: 250px; color: #fff3b8; animation: playGlow 1.6s ease-in-out infinite alternate; }
  #selGo:hover, #selGo.padFocus { animation: none; filter: brightness(1.2) drop-shadow(0 0 22px rgba(255,200,80,.95)); }
  @media (max-height: 700px) { /* (short windows: tighter tablets, so the monkeys keep their room) */
    .selCard { padding: 8px 14px 9px !important; } .selCard .nm { font-size: 27px; } .selCard .ds { font-size: 12.5px; min-height: 0; }
    .selGun { margin: 5px 0; padding: 4px 9px; } .selGun .gi { font-size: 24px; } .selGun b { font-size: 16px; } .selGun small { font-size: 11.5px; }
    .selStat { margin-top: 4px; font-size: 13px; grid-template-columns: 76px 1fr 38px 58px; gap: 6px; } .selStat .stb { height: 12px; } #selHint { display: none; }
    #select .menuRow .btn { font-size: 16px; padding: 6px 18px 4px; margin: 4px 6px; } #select .menuRow #selGo { min-width: 200px; font-size: 21px; }
  }
  @media (max-width: 760px) { .selStat { grid-template-columns: 1fr 44px 64px; } .selStat .stl { grid-column: 1 / -1; margin-bottom: -4px; } .selCard .rar { display: none; } }
  .menuRow { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
  .menuRow .btn { font-size: 18px; padding: 8px 22px 6px; margin: 6px 8px 8px; }
  #howTo { margin: 10px 0 4px; }
  #howTo[hidden] { display: none !important; }
  #howTo .story { grid-column: 1 / -1; margin: 0 0 6px; font-size: 15px; line-height: 1.4; opacity: .95; }
  #pause .loadout { padding: 14px 18px; }
  #pause h1 { font-size: 72px !important; }
  #pause .pauseBtns, #keys .pauseBtns { position: sticky; bottom: 0; z-index: 3; align-self: stretch; padding: 22px 0 12px; background: linear-gradient(rgba(8, 12, 6, 0), rgba(8, 12, 6, 0.82) 45%); } /* (a full build is tall: the buttons stay in view) */
  #pause .pauseBtns .btn { margin: 8px 7px; }
  /* the Controls screen (key bindings, user request 2026-10-02): each action with its key and a second key, as key caps; click
     one and press the new key (game.js KEY BINDINGS) */
  #keys { background: radial-gradient(ellipse at 50% 40%, rgba(46,30,10,.9), rgba(8,6,3,.97) 72%); } /* (solid enough that the title or the pause menu doesn't show through) */
  #keys h2 { margin: 2px 0 10px; font-size: 17px; }
  #keyList { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; width: min(1180px, 94vw); padding: 24px 22px 12px !important; margin: 4px 0; }
  @media (max-width: 1100px) { .krow { grid-template-columns: 1fr 92px 92px !important; gap: 6px !important; } .krow .kn { font-size: 14px !important; } .kb { font-size: 13.5px !important; } }
  @media (max-width: 760px) { #keyList { grid-template-columns: 1fr; width: min(640px, 94vw); } }
  #keyList::before { content: ''; position: absolute; left: 18px; right: 18px; top: 5px; height: 14px; background: var(--tGlyph) repeat-x 0 50% / 42px 14px; opacity: .55; pointer-events: none; }
  .krow { display: grid; grid-template-columns: 1fr 112px 112px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,240,210,.13); text-align: left; }
  .krow .kn { font-weight: 800; font-size: 15.5px; line-height: 1.2; }
  .kb { font: 900 15px 'Nunito', "Trebuchet MS", sans-serif; padding: 5px 8px 6px; border-radius: 8px; cursor: pointer; color: #2a1806; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: linear-gradient(180deg, #fff6dc, #d9caa4); border: 2px solid #2e2618; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), 0 3px 0 #2e2618; transition: transform .06s, filter .15s; }
  .kb:hover { filter: brightness(1.08) drop-shadow(0 0 8px rgba(255,200,90,.55)); }
  .kb:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.22), 0 1px 0 #2e2618; }
  .kb.none { background: rgba(20,14,6,.32); color: rgba(255,244,220,.55); border-style: dashed; box-shadow: none; font-weight: 700; font-size: 13.5px; }
  .kb.wait { color: #2a1806; background: linear-gradient(180deg, #ffe58a, #e9b347); border-style: solid; font-size: 12px !important; animation: kbWait .55s ease-in-out infinite alternate; }
  @keyframes kbWait { from { box-shadow: 0 0 0 2px #fff4c0, 0 0 6px rgba(255,210,90,.5); } to { box-shadow: 0 0 0 3px #fff4c0, 0 0 18px rgba(255,210,90,1); } }
  .kb.padFocus { outline: 3px solid #ffe08a; outline-offset: 3px; }
  .keyFixed { font-size: 13.5px; font-weight: 700; opacity: .8; max-width: 760px; margin: 8px 12px 0; line-height: 1.4; }
  /* the title screen's corner guide (user request, 2026-10-02, in place of the quick tips that used to stop the game): the play
     screen's four corners, mocked up small where they sit in a run (level, difficulty and objective top left; upgrades top
     right; gold and the chest price bottom left; moves, weapons and tomes bottom right), each with an arrow and a line saying
     what it is. The mock-ups reuse the HUD's own looks (.ab, .sl, .bi, the chest tag), shrunk with zoom (--gz). It steps aside
     while How to Play is open, and on windows too small for it */
  #guide { position: fixed; inset: 0; z-index: 3; pointer-events: none; --gz: .72; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #fff; }
  #guide .gq { position: absolute; display: flex; flex-direction: column; gap: 7px; max-width: 250px; }
  #guide .gtl { left: 14px; top: 30px; align-items: flex-start; }
  #guide .gtr { right: 14px; top: 38px; align-items: flex-end; }
  #guide .gbl { left: 16px; bottom: 16px; align-items: flex-start; }
  #guide .gbr { right: 16px; bottom: 16px; align-items: flex-end; }
  #guide .gm { zoom: var(--gz); display: flex; flex-direction: column; gap: 8px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
  #guide .gtl .gm, #guide .gbl .gm { align-items: flex-start; } #guide .gtr .gm, #guide .gbr .gm { align-items: flex-end; }
  .gLv { font: 900 30px Impact, "Arial Black", sans-serif; color: #7affb8; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink), 0 0 14px rgba(90,255,176,.55); }
  .gPanel { width: 270px; text-align: left; background: var(--panel); border: 2px solid rgba(255,255,255,.85); border-radius: 14px; padding: 5px 16px 9px; }
  .gPanel .lab { font: 900 14px Impact, "Arial Black", sans-serif; letter-spacing: 2.5px; opacity: .7; }
  .gTier { color: #7affb8; font: 900 34px/1.05 Impact, "Arial Black", sans-serif; letter-spacing: 1px; -webkit-text-stroke: 1.6px var(--ink); text-shadow: 3px 3px 0 var(--ink), 0 0 18px #7affb8; }
  .gMain { color: #ff6a4a; font: 900 23px/1.08 Impact, "Arial Black", sans-serif; letter-spacing: .5px; -webkit-text-stroke: 1.2px var(--ink); text-shadow: 2px 2px 0 var(--ink); text-wrap: balance; }
  .gHint { margin-top: 5px; font-size: 15px; font-weight: 800; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
  .gItems { display: flex; gap: 6px; }
  .gCoinRow { display: flex; align-items: center; gap: 22px; }
  .gCoins { font: 900 50px Impact, "Arial Black", sans-serif; line-height: 1; color: var(--gold); -webkit-text-stroke: 2.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
  .gAbil { display: flex; gap: 8px; justify-content: flex-end; }
  .gAbil .k { text-transform: uppercase; }
  .gAbil .ab.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,211,90,.55), 0 0 16px rgba(255,200,60,.95); animation: gFocus .7s ease-in-out infinite alternate; }
  @keyframes gFocus { from { filter: brightness(1); } to { filter: brightness(1.35); } }
  .gSlots { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
  .gc { display: flex; align-items: flex-start; gap: 7px; max-width: 250px; padding: 6px 10px 7px; border-radius: 10px; background: rgba(12,16,30,.84); border: 2px solid rgba(255,211,90,.75); color: #fff4dc;
    font: 700 13.5px/1.35 'Nunito', "Trebuchet MS", sans-serif; text-align: left; text-shadow: 0 1px 0 rgba(0,0,0,.6); box-shadow: 0 4px 10px rgba(0,0,0,.45); }
  .gc b { color: var(--gold); }
  .gc b.kc { display: inline-block; min-width: 1.45em; padding: 0 .3em; border-radius: 5px; background: #f2ead8; color: #1a0a00; text-align: center; line-height: 1.3em; text-shadow: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
  .gar { flex: none; width: 20px; height: 22px; margin-top: 1px; background: var(--gold); filter: drop-shadow(0 0 2px #000); clip-path: polygon(50% 100%, 100% 48%, 68% 48%, 68% 0, 32% 0, 32% 48%, 0 48%); animation: garBob .6s ease-in-out infinite alternate; } /* (pointing down at the mock-up under it) */
  .gar.up { clip-path: polygon(50% 0, 100% 52%, 68% 52%, 68% 100%, 32% 100%, 32% 52%, 0 52%); animation-name: garBobUp; }
  @keyframes garBob { from { translate: 0 -2px; } to { translate: 0 3px; } }
  @keyframes garBobUp { from { translate: 0 2px; } to { translate: 0 -3px; } }
  .gNote { margin-top: 5px; font: 800 13.5px 'Nunito', "Trebuchet MS", sans-serif; letter-spacing: .4px; color: #ffe9a8; text-shadow: 0 2px 0 rgba(0,0,0,.65), 0 0 8px rgba(0,0,0,.6); }
  #title.how #guide, #title.how .gNote { display: none; }
  @media (max-width: 1150px) { #guide { --gz: .6; } #guide .gq, .gc { max-width: 178px; } .gc { font-size: 12px; line-height: 1.3; padding: 5px 8px 6px; gap: 5px; } .gar { width: 16px; height: 18px; } .gNote { font-size: 12px; } }
  @media (min-width: 1500px) and (min-height: 800px) { #guide { --gz: .88; } #guide .gq, .gc { max-width: 300px; } .gc { font-size: 15px; } }
  @media (max-width: 899px), (max-height: 539px) { #guide, .gNote { display: none; } }
  /* the decorations hang behind each screen's contents (the title has real torches in its 3D scene instead) */
  .tDecor { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  :where(.overlay > :not(.tDecor)) { position: relative; z-index: 2; }
  #cardsTitle, #cardsSub { z-index: 3; }
  #title .torch { display: none; }
  #title { background: radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(6,4,2,.5) 80%, rgba(4,3,1,.82) 100%); }
  @media (max-height: 780px) { /* (short windows: a smaller Play button, so the monkey on the steps still has room) */
    #playBtn { font-size: 30px; padding: 12px 54px 8px; margin: 2px 10px 6px; } .menuRow .btn { margin: 4px 8px 6px; }
  }
  /* a legendary reveal shakes the whole screen; landing loot throws sparks the color of its rarity */
  #cards.quake { animation: quake .6s cubic-bezier(.3,.7,.4,1); }
  @keyframes quake { 0% { transform: none; } 9% { transform: translate(-16px, 9px) rotate(-.7deg); } 20% { transform: translate(14px, -10px) rotate(.6deg); } 33% { transform: translate(-10px, 7px) rotate(-.3deg); } 48% { transform: translate(8px, -5px); } 66% { transform: translate(-4px, 3px); } 82% { transform: translate(2px, -1px); } 100% { transform: none; } }
  .cSpark { position: absolute; left: 50%; top: 42%; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; z-index: 5; animation: cSpark .75s cubic-bezier(.15,.7,.35,1) forwards; }
  @keyframes cSpark { from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }