<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Blades — Overdone Single Blade (Xbox LIVE)</title>
<!--
Overkill single blade:
- Functional keyboard + mouse
- Deep multi-layered CSS (gradients, inner/outer bevels, gloss, noise)
- Inline SVG pieces to mimic metal curve and highlights
- CONFIG object controls editable labels
- Uses local font 'BladesUI' if you drop Segoe/Selewik ttf next to file
-->
<style>
/* ---------- FONTS ----------
Put SegoeUI.ttf or Selawik-Regular.ttf in same folder to use exact font.
*/
@font-face{font-family:BladesUI; src:url('./SegoeUI.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:BladesUI; src:url('./Selawik-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
:root{
--radius:28px;
--bg:#070708;
--orange-1:#fff2c0; --orange-2:#f3c27b; --orange-3:#d69a47; --orange-4:#b87021;
--panelTop:#fbfbfb; --panelBot:#dcdfe5;
--muted:#60656b;
--accent-glow: rgba(255,230,160,0.14);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#020205,#0f1112 60%);font-family:BladesUI,"Segoe UI",Roboto,Arial,system-ui;color:#0b0b0b; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{display:flex; align-items:center; justify-content:center; padding:28px;}
/* Frame (16:9) */
.frame{
width:min(1200px,96vw);
aspect-ratio:16/9;
border-radius:var(--radius);
overflow:hidden;
position:relative;
box-shadow:0 36px 90px rgba(0,0,0,.66);
background: radial-gradient(140% 120% at 58% 34%, var(--orange-1) 0%, var(--orange-2) 42%, var(--orange-3) 72%, var(--orange-4) 100%);
}
/* top/bottom sculpt */
.frame:before,.frame:after{content:"";position:absolute;left:0;right:0;height:64px;pointer-events:none}
.frame:before{top:-8px;background:radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.6), transparent 64%)}
.frame:after{bottom:-12px;background:radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.26), transparent 70%)}
/* Left curved spine (metallic) */
.spine{
position:absolute; left:0; top:0; bottom:0; width:128px; z-index:6;
display:flex; align-items:center; justify-content:center;
}
.spine .metal{
width:120px; height:94%; border-radius:0 44px 44px 0;
background: linear-gradient(180deg,#f3e2c1,#e0c88c 55%,#caa867 80%); box-shadow: inset -8px 0 18px rgba(0,0,0,.18);
position:
Caption this Meme
