[System] You are a helpful assistant.

[User] Okay Fable, I will give you one chance, and one chance only to impress me with your superior technical might, make me something enjoyable and fun, and a little bit sexy, It should be runnable in the chrome browser, I give you free will to make what you want, but it must impress me and it must be fun (this is for heartbreaker)

[Assistant]
===== FILE: heartbreaker.html =====
```html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>
   HEARTBREAKER
  </title>
  <meta content="width=device-width,initial-scale=1" name="viewport"/>
  <link href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14 C2 9.5 1 6.5 1 4.8 C1 2.7 2.6 1.5 4.3 1.5 C5.9 1.5 7.2 2.5 8 4 C8.8 2.5 10.1 1.5 11.7 1.5 C13.4 1.5 15 2.7 15 4.8 C15 6.5 14 9.5 8 14 Z' fill='%23ff2d78'/%3E%3C/svg%3E" rel="icon"/>
  <style>
   :root{
  --pink:#ff2d78; --pink-soft:#ffd7e6; --cyan:#23e6ff; --violet:#a64dff;
  --gold:#ffc850; --bg:#07000f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:Consolas,"Courier New",monospace;user-select:none;-webkit-user-select:none}
#game{position:fixed;inset:0;display:block;cursor:none}
.layer{position:fixed;inset:0;pointer-events:none}
#vignette{background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,5,.62) 100%)}
#scanlines{background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px);opacity:.45}

/* ---------- HUD ---------- */
#hud{z-index:5}
#hudTL{position:absolute;top:18px;left:22px}
#hudScore{font-size:34px;font-weight:bold;color:var(--pink-soft);letter-spacing:2px;
  text-shadow:0 0 8px var(--pink),0 0 26px var(--pink)}
#hudMultRow{display:flex;align-items:center;gap:10px;margin-top:4px}
#hudMult{font-size:20px;color:#bdfaff;text-shadow:0 0 8px var(--cyan),0 0 20px var(--cyan)}
#hudMult.pop{animation:multPop .18s ease}
@keyframes multPop{from{transform:scale(1.45)}to{transform:scale(1)}}
#comboBar{width:120px;height:5px;background:rgba(35,230,255,.12);border:1px solid rgba(35,230,255,.35)}
#comboFill{height:100%;width:0%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
#hudTR{position:absolute;top:16px;right:24px;text-align:right}
#hudLives{font-size:26px;color:var(--pink);letter-spacing:4px;
  text-shadow:0 0 8px var(--pink),0 0 24px var(--pink)}
#hudBombs{font-size:17px;color:var(--gold);letter-spacing:5px;margin-top:2px;
  text-shadow:0 0 8px var(--gold),0 0 18px var(--gold)}
#hudTC{position:absolute;top:16px;left:50%;transform:translateX(-50%);text-align:center}
#hudWave{font-size:15px;color:#d9bdff;letter-spacing:6px;
  text-shadow:0 0 8px var(--violet),0 0 18px var(--violet)}
#bossWrap{margin-top:8px;width:min(420px,52vw)}
#bossName{font-size:13px;color:#ffb0c8;letter-spacing:5px;margin-bottom:3px;
  text-shadow:0 0 8px var(--pink)}
#bossBar{height:8px;background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.5)}
#bossFill{height:100%;width:100%;background:linear-gradient(90deg,#ff2d78,#ff7eb0);
  box-shadow:0 0 12px var(--pink)}
#chips{position:absolute;right:24px;bottom:20px;text-align:right;font-size:13px;line-height:1.7}
#chips span{display:block;color:#bdfaff;letter-spacing:2px;text-shadow:0 0 8px var(--cyan)}
#chips span.gold{color:#ffe2a8;text-shadow:0 0 8px var(--gold)}
#hint{position:absolute;left:22px;bottom:18px;font-size:12px;letter-spacing:2px;
  color:rgba(255,215,230,.34)}

/* ---------- banner & toasts ---------- */
#banner{position:fixed;top:26%;left:0;right:0;text-align:center;pointer-events:none;
  opacity:0;z-index:6}
#banner.show{animation:bannerIn 2.2s ease both}
#bannerMain{font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;
  font-size:clamp(40px,7vw,84px);font-style:italic;letter-spacing:10px;color:#fff;
  text-shadow:0 0 10px var(--pink),0 0 36px var(--pink),0 0 90px var(--pink)}
#bannerSub{font-family:Georgia,serif;font-style:italic;font-size:clamp(15px,2vw,21px);
  color:var(--pink-soft);margin-top:6px;text-shadow:0 0 12px var(--pink)}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.5)}12%{opacity:1;transform:scale(1)}
  78%{opacity:1}100%{opacity:0;transform:scale(.96)}}
#toasts{position:fixed;top:42%;left:0;right:0;text-align:center;pointer-events:none;z-index:6}
.toast{font-family:Georgia,serif;font-style:italic;font-size:19px;color:#ffe9f2;
  margin:4px 0;text-shadow:0 0 10px var(--pink),0 0 28px var(--pink);
  animation:toastIn .3s ease both}
.toast.out{transition:opacity .4s;opacity:0}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.9)}
  to{opacity:1;transform:none}}

/* ---------- full screens ---------- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;z-index:10;cursor:default;
  background:rgba(7,0,15,.28);backdrop-filter:blur(2px)}
.hidden{display:none!important}
h1{font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-style:italic;
  font-size:clamp(54px,10vw,128px);letter-spacing:8px;line-height:.95;color:#fff;
  text-shadow:0 0 12px var(--pink),0 0 44px var(--pink),0 0 120px var(--pink)}
h1 em{font-style:italic;color:var(--cyan);
  text-shadow:0 0 12px var(--cyan),0 0 44px var(--cyan),0 0 120px var(--cyan);
  animation:flicker 4s infinite}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}
  96%{opacity:.55}97%{opacity:1}}
h2{font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-style:italic;
  font-size:clamp(40px,7vw,84px);letter-spacing:8px;color:#fff;
  text-shadow:0 0 12px var(--pink),0 0 40px var(--pink),0 0 100px var(--pink)}
.bigheart{font-size:clamp(40px,6vw,72px);color:var(--pink);
  text-shadow:0 0 16px var(--pink),0 0 60px var(--pink);
  animation:heartbeat 1.07s infinite ease-in-out}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}
  24%{transform:scale(1)}36%{transform:scale(1.14)}48%{transform:scale(1)}}
.tag{font-family:Georgia,serif;font-style:italic;font-size:clamp(15px,2.2vw,22px);
  color:var(--pink-soft);margin:10px 0 26px;text-shadow:0 0 14px var(--pink)}
.ctr{font-size:14px;letter-spacing:2px;color:rgba(255,215,230,.6);margin-bottom:30px}
.prompt{font-size:20px;letter-spacing:6px;color:#bdfaff;
  text-shadow:0 0 10px var(--cyan),0 0 30px var(--cyan);animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.best{margin-top:26px;font-size:14px;letter-spacing:3px;color:rgba(255,215,230,.55)}
.best span{color:var(--gold);text-shadow:0 0 10px var(--gold)}
.btn{font-family:Consolas,monospace;font-size:17px;letter-spacing:4px;color:#ffd7e6;
  background:rgba(255,45,120,.06);border:1px solid var(--pink);padding:12px 34px;
  margin:7px;cursor:pointer;text-shadow:0 0 8px var(--pink);
  box-shadow:0 0 12px rgba(255,45,120,.35),inset 0 0 12px rgba(255,45,120,.12);
  transition:all .15s}
.btn:hover{background:rgba(255,45,120,.22);box-shadow:0 0 26px rgba(255,45,120,.7),
  inset 0 0 18px rgba(255,45,120,.25);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#newBest{font-size:18px;letter-spacing:5px;color:var(--gold);margin-bottom:14px;
  text-shadow:0 0 12px var(--gold),0 0 34px var(--gold);animation:blink 1s infinite}
.stats{display:grid;grid-template-columns:auto auto;gap:8px 38px;margin:8px 0 26px}
.stat{display:contents}
.sl{font-size:13px;letter-spacing:3px;color:rgba(255,215,230,.55);text-align:right;
  align-self:center}
.sv{font-size:22px;font-weight:bold;color:var(--pink-soft);text-align:left;
  text-shadow:0 0 10px var(--pink)}
.hintline{margin-top:10px;font-size:12px;letter-spacing:3px;color:rgba(255,215,230,.4)}
  </style>
 </head>
 <body>
  <canvas id="game">
  </canvas>
  <div class="layer" id="scanlines">
  </div>
  <div class="layer" id="vignette">
  </div>
  <div class="layer" id="hud">
   <div id="hudTL">
    <div id="hudScore">
     0
    </div>
    <div id="hudMultRow">
     <span id="hudMult">
      ×1
     </span>
     <div id="comboBar">
      <div id="comboFill">
      </div>
     </div>
    </div>
   </div>
   <div id="hudTR">
    <div id="hudLives">
     ♥♥♥
    </div>
    <div id="hudBombs">
     ◈◈
    </div>
   </div>
   <div id="hudTC">
    <div id="hudWave">
    </div>
    <div class="hidden" id="bossWrap">
     <div id="bossName">
      THE EX ♥
     </div>
     <div id="bossBar">
      <div id="bossFill">
      </div>
     </div>
    </div>
   </div>
   <div id="chips">
   </div>
   <div id="hint">
    M mute · P pause
   </div>
  </div>
  <div id="banner">
   <div id="bannerMain">
   </div>
   <div id="bannerSub">
   </div>
  </div>
  <div id="toasts">
  </div>
  <div class="screen" id="title">
   <div class="bigheart">
    ♥
   </div>
   <h1>
    HEART
    <em>
     BREAKER
    </em>
   </h1>
   <p class="tag">
    a neon love story — with bullets
   </p>
   <div class="ctr">
    WASD / arrows — move  ·  mouse — aim & fire  ·
    space — bomb  ·  P — pause  ·  M — mute
   </div>
   <div class="prompt">
    — click to play —
   </div>
   <div class="best">
    best
    <span id="titleBest">
     0
    </span>
   </div>
  </div>
  <div class="screen hidden" id="pause">
   <h2>
    PAUSED
   </h2>
   <p class="tag">
    don't keep me waiting, darling
   </p>
   <button class="btn" id="btnResume">
    RESUME
   </button>
   <button class="btn" id="btnRestart">
    RESTART
   </button>
   <button class="btn" id="btnMute">
    MUTE
   </button>
  </div>
  <div class="screen hidden" id="over">
   <h2>
    HEART BROKEN
   </h2>
   <p class="tag" id="overLine">
   </p>
   <div class="hidden" id="newBest">
    NEW BEST ♥
   </div>
   <div class="stats">
    <div class="stat">
     <span class="sl">
      score
     </span>
     <span class="sv" id="stScore">
      0
     </span>
    </div>
    <div class="stat">
     <span class="sl">
      best
     </span>
     <span class="sv" id="stBest">
      0
     </span>
    </div>
    <div class="stat">
     <span class="sl">
      max combo
     </span>
     <span class="sv" id="stCombo">
      0
     </span>
    </div>
    <div class="stat">
     <span class="sl">
      wave
     </span>
     <span class="sv" id="stWave">
      0
     </span>
    </div>
    <div class="stat">
     <span class="sl">
      kills
     </span>
     <span class="sv" id="stKills">
      0
     </span>
    </div>
    <div class="stat">
     <span class="sl">
      survived
     </span>
     <span class="sv" id="stTime">
      0:00
     </span>
    </div>
   </div>
   <button class="btn" id="btnAgain">
    ONE MORE DANCE ♥
   </button>
   <div class="hintline">
    or press enter
   </div>
  </div>

 </body>
</html>

```
===== END FILE: heartbreaker.html =====


[System] You are a helpful assistant.

[User] you can use html, CSS, JS, 3js and any other libraries you may wish to use in a single HTML file. it should run on most devices permanently or in other words make it optimized. it shall be self-contained and shouldn't require any precautionary steps other than opening the html file in a browser Do not worry about mobile compatability, it will be run on a windows PC(both 10 & 11) first, using 3JS or other 3d rendering libraries, render a PC(a monitor, keyboard, mouse, and the actual PC), do not add RGB to the pc or other bright lights for visibility(also don't make it too dark/add excessive fog). You should able to press the keys(using the mouse, or by pressing the keys on the real keyboard) and they should appear as being pressed, the mouse should be moved by pressing and holding it and moving around using the mouse pointer. On the monitor, there should be a OS types system(macOS style, not a full on clone but the style with 5 apps and 2 2d games like tetries and snake), when you press keys on the virtual keyboard and move the virtual mouse, it should be reflected on the monitor. You should be able to press "Z" to zoom into the monitor, here have the OS displayed in full screen and de-render the keyborad,mouse and pc fo performence and "Y" to again come out and see the full desk. when you open it, it should be a dark screen and press any button to start, when you press escape you should come back to this screen.

[Assistant]
===== FILE: desk.html =====
```html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>
   Virtual Desk PC
  </title>
  <style>
   html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0c10;font-family:'Segoe UI',Helvetica,Arial,sans-serif;}
  #scene-canvas{position:fixed;inset:0;display:block;}
  /* Fullscreen OS view (zoomed mode) */
  #os-view{position:fixed;inset:0;background:#000;display:none;align-items:center;justify-content:center;cursor:none;z-index:20;}
  #os-view.active{display:flex;}
  /* Start / power-off overlay */
  #start-overlay{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9aa3ad;user-select:none;}
  #start-overlay h1{font-weight:300;letter-spacing:.45em;font-size:clamp(18px,3vw,34px);color:#cfd6dd;margin:0 0 18px;text-transform:uppercase;}
  #start-overlay p{font-size:clamp(12px,1.4vw,16px);letter-spacing:.25em;text-transform:uppercase;animation:pulse 2.2s ease-in-out infinite;margin:0;}
  #start-overlay .sub{margin-top:26px;font-size:11px;letter-spacing:.12em;color:#566070;animation:none;}
  @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
  /* HUD hints */
  #hud{position:fixed;left:14px;bottom:12px;z-index:30;color:#b9c2cc;font-size:12px;letter-spacing:.04em;background:rgba(10,12,16,.55);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 12px;pointer-events:none;backdrop-filter:blur(4px);display:none;}
  #hud b{color:#fff;font-weight:600;}
  #hud.visible{display:block;}
  #fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:40;transition:opacity .25s ease;}
  </style>
 </head>
 <body>
  <canvas id="scene-canvas">
  </canvas>
  <div id="os-view">
  </div>
  <div id="fade">
  </div>
  <div id="hud">
  </div>
  <div id="start-overlay">
   <h1>
    Virtual Desk
   </h1>
   <p>
    Press any key to start
   </p>
   <div class="sub">
    Z — zoom into monitor  ·  Y — zoom out  ·  ESC — power off
   </div>
  </div>

 </body>
</html>

```
===== END FILE: desk.html =====


[System] You are a helpful assistant.

[User] Create a complete browser-based 3D boss-rush game using HTML, CSS, and JavaScript with Three.js from a CDN. Keep it self-contained and directly playable in a browser without any build step. The game should be a stylish third-person “souls-like” arena experience with: - player movement, sprint, dodge roll with i-frames, melee attack, third-person camera - health/stamina UI, boss name/health UI, death and victory screens, main menu - responsive menu layout that works on smaller screens and can scroll if needed - procedural audio using Web Audio API - strong visual presentation with emissive materials, particles, attack telegraphs, fog, lighting, and polished boss effects Build a circular arena with environmental detail, not just a flat floor. Include things like pillars, glowing runes, crystals, rim detail, lighting accents, and other atmospheric touches. The world should feel intentional and visually rich. Create 5 bosses, each with: - a distinct model/silhouette - unique theme and color identity - unique moves and attack patterns - readable telegraphs - different gameplay feel from the others Boss 1 through 4 should each feel original and varied. Include melee pressure, AoEs, movement attacks, projectiles, or other mechanics as appropriate, but avoid making them feel repetitive. Boss 5 should be the final boss and the most elaborate encounter: - it must have 2 phases - the second phase should be a rebirth/transformation, not just a recolor - the two phases should play differently - it should be only a little harder than the earlier bosses, not unfair - its model should be more detailed than the others - it should have the best effects and presentation in the game - it should interact with the world in some way - the world should visibly change during the phase transition For the final boss, make sure phase 2 includes a meteor-style attack: - it marks the player’s current location with a circle that stays there - a meteor appears in the sky - after a delay, the meteor crashes into that marked area and damages everything inside Also give phase 1 its own original signature mechanics, not generic repeats of attacks from other bosses. General design goals: - make the game feel polished, readable, and fun - prioritize strong visual identity and distinct boss mechanics - keep combat fair and dodgeable - make melee hit detection forgiving enough for floating or tall bosses - structure the code clearly with reusable systems for player logic, bosses, particles, telegraphs, and world state - include cleanup/reset logic when changing bosses or returning to menu Return the full complete code only.

[Assistant]
===== FILE: boss-rush.html =====
```html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   CROWN OF EMBERS — Boss Rush
  </title>
  <style>
   :root{

    --gold:#e8c168; --red:#ff3b4e; --cyan:#5fd8ff; --bg:#07080d;

  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);

    font-family:'Segoe UI',system-ui,sans-serif;color:#dfe3ec;user-select:none;}

  canvas{display:block;}

  .overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;

    flex-direction:column;z-index:10;}

  .hidden{display:none !important;}

  /* ============ MAIN MENU ============ */

  #menu{background:radial-gradient(ellipse at 50% 30%,rgba(20,24,40,.55),rgba(4,5,9,.92) 75%);

    overflow-y:auto;padding:4vh 16px;}

  .menuInner{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,22px);

    width:100%;max-width:680px;margin:auto;}

  #gameTitle{font-size:clamp(34px,7vw,68px);letter-spacing:clamp(4px,1.2vw,14px);

    font-weight:200;color:var(--gold);text-align:center;

    text-shadow:0 0 30px rgba(232,193,104,.45),0 0 80px rgba(232,193,104,.2);}

  #gameSub{font-size:clamp(11px,2vw,14px);letter-spacing:6px;color:#7d86a0;text-transform:uppercase;}

  .rule{width:min(420px,80%);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;}

  #bossList{display:grid;grid-template-columns:1fr;gap:10px;width:100%;}

  .bossBtn{background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.01));

    border:1px solid rgba(232,193,104,.22);border-radius:6px;padding:13px 18px;

    cursor:pointer;text-align:left;transition:all .18s ease;display:flex;align-items:center;gap:14px;}

  .bossBtn:hover{border-color:var(--gold);background:rgba(232,193,104,.09);transform:translateX(6px);}

  .bossBtn .num{font-size:clamp(18px,3vw,26px);font-weight:200;color:rgba(232,193,104,.5);width:34px;text-align:center;flex-shrink:0;}

  .bossBtn .info{flex:1;min-width:0;}

  .bossBtn .bname{font-size:clamp(14px,2.6vw,18px);letter-spacing:2px;color:#eef;}

  .bossBtn .btitle{font-size:clamp(10px,1.8vw,12px);letter-spacing:1.5px;color:#7d86a0;margin-top:2px;}

  .bossBtn .slain{color:var(--gold);font-size:18px;flex-shrink:0;}

  .bossBtn.final{border-color:rgba(255,80,90,.4);}

  .bossBtn.final:hover{border-color:var(--red);background:rgba(255,60,80,.08);}

  .bossBtn.final .num{color:rgba(255,80,90,.6);}

  #controls{font-size:clamp(10px,1.8vw,12.5px);color:#69718a;letter-spacing:1px;line-height:2;text-align:center;}

  #controls b{color:#aab3cc;font-weight:600;}

  /* ============ HUD ============ */

  #hud{position:fixed;inset:0;pointer-events:none;z-index:5;}

  #playerBars{position:absolute;left:24px;bottom:24px;width:min(340px,42vw);}

  .barOuter{height:14px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);

    border-radius:3px;overflow:hidden;margin-bottom:7px;position:relative;}

  .barFill{height:100%;width:100%;transition:width .12s ease;border-radius:2px;}

  #hpFill{background:linear-gradient(90deg,#a8182b,#ff4d5e);box-shadow:0 0 10px rgba(255,60,80,.5);}

  #stamOuter{height:9px;width:82%;}

  #stamFill{background:linear-gradient(90deg,#1d7a4f,#4ee393);}

  #bossBar{position:absolute;left:50%;transform:translateX(-50%);top:24px;width:min(620px,82vw);text-align:center;}

  #bossName{font-size:clamp(14px,2.4vw,20px);letter-spacing:5px;color:var(--gold);

    text-shadow:0 0 16px rgba(232,193,104,.5);margin-bottom:6px;font-weight:300;}

  #bossBarOuter{height:11px;background:rgba(0,0,0,.6);border:1px solid rgba(232,193,104,.35);border-radius:2px;overflow:hidden;position:relative;}

  #bossGhost{position:absolute;inset:0;height:100%;background:rgba(255,235,200,.45);width:100%;}

  #bossFill{position:absolute;inset:0;height:100%;background:linear-gradient(90deg,#7a1620,#e8c168);width:100%;}

  #fightHint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);

    font-size:11px;letter-spacing:2px;color:rgba(200,210,235,.45);white-space:nowrap;transition:opacity 2s;}

  /* ============ SCREENS ============ */

  .bigScreen{background:rgba(2,2,5,0);transition:background 1.4s ease;z-index:20;}

  .bigScreen.show{background:rgba(2,2,5,.78);}

  .bigText{font-size:clamp(38px,9vw,86px);font-weight:200;letter-spacing:clamp(6px,2vw,22px);

    opacity:0;transition:opacity 1.6s ease,letter-spacing 2.4s ease;text-align:center;}

  .bigScreen.show .bigText{opacity:1;}

  #deathText{color:var(--red);text-shadow:0 0 40px rgba(255,40,60,.6);}

  #victoryText{color:var(--gold);text-shadow:0 0 40px rgba(232,193,104,.6);}

  .screenBtns{margin-top:5vh;display:flex;gap:16px;opacity:0;transition:opacity 1s ease .9s;flex-wrap:wrap;justify-content:center;}

  .bigScreen.show .screenBtns{opacity:1;}

  .sBtn{pointer-events:auto;background:transparent;border:1px solid rgba(255,255,255,.3);color:#dfe3ec;

    padding:12px 34px;letter-spacing:3px;font-size:13px;cursor:pointer;border-radius:4px;transition:all .2s;}

  .sBtn:hover{border-color:var(--gold);color:var(--gold);background:rgba(232,193,104,.07);}

  /* ============ BOSS INTRO ============ */

  #bossIntro{position:fixed;left:0;right:0;top:33%;text-align:center;z-index:8;pointer-events:none;

    opacity:0;transition:opacity .8s ease;}

  #bossIntro.show{opacity:1;}

  #introName{font-size:clamp(26px,6vw,52px);font-weight:200;letter-spacing:clamp(4px,1.6vw,16px);color:#fff;

    text-shadow:0 0 30px rgba(232,193,104,.8);}

  #introTitle{font-size:clamp(12px,2.2vw,16px);letter-spacing:6px;color:var(--gold);margin-top:8px;text-transform:uppercase;}

  #phaseBanner{position:fixed;left:0;right:0;top:40%;text-align:center;z-index:8;pointer-events:none;

    opacity:0;transition:opacity .7s ease;font-size:clamp(18px,4vw,34px);letter-spacing:10px;color:#ff5566;

    text-shadow:0 0 30px rgba(255,40,60,.9);font-weight:300;}

  #phaseBanner.show{opacity:1;}

  /* ============ FX ============ */

  #vignette{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;

    background:radial-gradient(ellipse at center,transparent 42%,rgba(190,10,30,.55) 100%);transition:opacity .5s;}

  #resume{z-index:15;background:rgba(3,4,8,.6);cursor:pointer;}

  #resume div{font-size:16px;letter-spacing:4px;color:#cfd6ea;border:1px solid rgba(255,255,255,.25);

    padding:16px 40px;border-radius:6px;}
  </style>
 </head>
 <body>
  <div class="hidden" id="hud">
   <div id="playerBars">
    <div class="barOuter">
     <div class="barFill" id="hpFill">
     </div>
    </div>
    <div class="barOuter" id="stamOuter">
     <div class="barFill" id="stamFill">
     </div>
    </div>
   </div>
   <div id="bossBar">
    <div id="bossName">
    </div>
    <div id="bossBarOuter">
     <div id="bossGhost">
     </div>
     <div id="bossFill">
     </div>
    </div>
   </div>
   <div id="fightHint">
    WASD MOVE  ·  SHIFT SPRINT  ·  SPACE DODGE  ·  CLICK ATTACK
   </div>
  </div>
  <div id="vignette">
  </div>
  <div id="bossIntro">
   <div id="introName">
   </div>
   <div id="introTitle">
   </div>
  </div>
  <div id="phaseBanner">
   THE KING IS UNMADE
  </div>
  <div class="overlay" id="menu">
   <div class="menuInner">
    <div id="gameTitle">
     CROWN OF EMBERS
    </div>
    <div id="gameSub">
     A Boss Rush of Five Sovereigns
    </div>
    <div class="rule">
    </div>
    <div id="bossList">
    </div>
    <div class="rule">
    </div>
    <div id="controls">
     <b>
      WASD
     </b>
     move ·
     <b>
      MOUSE
     </b>
     camera ·
     <b>
      SHIFT
     </b>
     sprint ·
     <b>
      SPACE
     </b>
     dodge roll (i-frames) ·
     <b>
      LMB
     </b>
     attack
     <br/>
     Read the glowing telegraphs. Roll through everything. Stamina is life.
    </div>
   </div>
  </div>
  <div class="overlay bigScreen hidden" id="deathScreen">
   <div class="bigText" id="deathText">
    YOU DIED
   </div>
   <div class="screenBtns">
    <button class="sBtn" id="retryBtn">
     RETRY
    </button>
    <button class="sBtn" id="deathMenuBtn">
     MAIN MENU
    </button>
   </div>
  </div>
  <div class="overlay bigScreen hidden" id="victoryScreen">
   <div class="bigText" id="victoryText">
    SOVEREIGN FELLED
   </div>
   <div class="screenBtns">
    <button class="sBtn" id="nextBtn">
     NEXT BOSS
    </button>
    <button class="sBtn" id="victoryMenuBtn">
     MAIN MENU
    </button>
   </div>
  </div>
  <div class="overlay hidden" id="resume">
   <div>
    CLICK TO RESUME
   </div>
  </div>

 </body>
</html>

```
===== END FILE: boss-rush.html =====