@font-face { font-family: 'Titan One'; src: url('fonts/titanone.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Russo One'; src: url('fonts/russoone.woff2') format('woff2'); font-display: swap; }
:root { --u: 8px; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: 'Russo One', 'Arial Black', sans-serif; color: #fff; user-select: none; }
#frame { position: relative; width: 800px; height: 600px; background: #000; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui .screen, #ui button, #ui .css-tile, #ui .css-card, #ui .menu-btn, #ui .sss-tile, #ui .opt-row, #ui .css-ready { pointer-events: auto; }
button { font-family: inherit; cursor: pointer; }

/* ---------- loading ---------- */
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*2); background: radial-gradient(circle at 50% 40%, #1d2a8a, #05081e 70%); z-index: 10; }
#loadbar { width: 50%; height: calc(var(--u)*1.4); border: 3px solid #fff; border-radius: 99px; overflow: hidden; background: #0008; }
#loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23a, #ff7a1a); transition: width .1s; }
#loadtxt { font-size: calc(var(--u)*1.6); opacity: .8; }

/* ---------- logo ---------- */
.lb-logo { font-family: 'Titan One', 'Russo One', sans-serif; display: flex; flex-direction: column; align-items: center; line-height: .9; transform: rotate(-4deg); filter: drop-shadow(0 calc(var(--u)*.6) 0 #000a); }
.lb-logo span { display: block; -webkit-text-stroke: calc(var(--u)*.35) #1b1b3a; paint-order: stroke fill; }
.lb-logo .l1 { font-size: calc(var(--u)*7); color: #dfe6f5; letter-spacing: calc(var(--u)*.8); }
.lb-logo .l2 { font-size: calc(var(--u)*11); background: linear-gradient(180deg, #fff27a 0%, #ffc21a 45%, #ff6a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: calc(var(--u)*.35) #3a1400; }
.lb-logo .l3 { font-size: calc(var(--u)*8); color: #ff3b3b; margin-top: calc(var(--u)*-1); }
.lb-logo.small { transform: none; font-size: calc(var(--u)*5); color: #ffd23a; -webkit-text-stroke: 2px #000; }

/* ---------- title ---------- */
.title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--u)*5) 0 calc(var(--u)*2); cursor: pointer; }
.title .press { font-size: calc(var(--u)*3.6); color: #fff; text-shadow: 0 0 calc(var(--u)) #ff0, 3px 3px 0 #000; animation: blink 1s steps(2) infinite; margin-top: auto; margin-bottom: calc(var(--u)*3); }
.title .copy { font-size: calc(var(--u)*1.2); opacity: .7; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- menus ---------- */
.mainmenu, .options, .howto { position: absolute; inset: 0; padding: calc(var(--u)*4) calc(var(--u)*5); background: linear-gradient(115deg, rgba(10,20,90,.85) 0 45%, rgba(10,20,90,0) 70%); }
.menu-head { font-family: 'Titan One', sans-serif; font-size: calc(var(--u)*5.5); color: #ffd23a; -webkit-text-stroke: calc(var(--u)*.25) #3a1400; paint-order: stroke fill; font-style: italic; margin-bottom: calc(var(--u)*2.5); text-shadow: 0 calc(var(--u)*.5) 0 #000a; }
.menu-list { display: flex; flex-direction: column; gap: calc(var(--u)*1.4); width: 48%; }
.menu-btn { font-size: calc(var(--u)*3.2); font-style: italic; padding: calc(var(--u)*1.1) calc(var(--u)*2.5); border-radius: calc(var(--u)*1.5) calc(var(--u)*.5); background: linear-gradient(180deg, #5a6bd8, #2a38a0); border: calc(var(--u)*.35) solid #cfd8ff; box-shadow: 0 calc(var(--u)*.5) 0 #0008; transform: skewX(-10deg) translateX(calc(var(--i)*var(--u)*-.6)); transition: transform .08s, background .08s; cursor: pointer; }
.menu-btn span { display: inline-block; transform: skewX(10deg); text-shadow: 2px 2px 0 #0008; }
.menu-btn.sel { background: linear-gradient(180deg, #ffe066, #ff9a1a); border-color: #fff; color: #3a1400; transform: skewX(-10deg) translateX(calc(var(--u)*2)) scale(1.04); }
.menu-btn.sel span { text-shadow: none; }
.menu-desc { margin-top: calc(var(--u)*3); width: 50%; font-size: calc(var(--u)*1.8); font-family: Arial, sans-serif; font-weight: bold; background: #0009; border-left: calc(var(--u)*.6) solid #ffd23a; padding: calc(var(--u)*1.2) calc(var(--u)*1.6); min-height: calc(var(--u)*7); }
.menu-foot { position: absolute; bottom: calc(var(--u)*1.5); left: 0; right: 0; text-align: center; font-size: calc(var(--u)*1.4); opacity: .75; font-family: Arial, sans-serif; font-weight: bold; }
.opt-list { display: flex; flex-direction: column; gap: calc(var(--u)*.9); width: 70%; }
.opt-row { display: flex; justify-content: space-between; font-size: calc(var(--u)*2.3); padding: calc(var(--u)*.8) calc(var(--u)*2); background: #0008; border: 3px solid #36a; border-radius: calc(var(--u)); cursor: pointer; }
.opt-row.sel { background: #ffd23a; color: #2a1400; border-color: #fff; }
.howto-body { font-family: Arial, sans-serif; font-size: calc(var(--u)*1.55); line-height: 1.4; background: #000b; padding: calc(var(--u)*1.5) calc(var(--u)*2); border-radius: calc(var(--u)); border: 3px solid #36a; }
.howto-body table { width: 100%; border-collapse: collapse; margin: calc(var(--u)) 0; font-size: calc(var(--u)*1.4); }
.howto-body td, .howto-body th { border-bottom: 1px solid #fff3; padding: calc(var(--u)*.35); text-align: left; }
.howto-body th { color: #ffd23a; }

/* ---------- character select ---------- */
.css { position: absolute; inset: 0; }
.css-grid { background: repeating-linear-gradient(135deg, #1c2366 0 calc(var(--u)*2), #232b7a calc(var(--u)*2) calc(var(--u)*4)); animation: slide 3s linear infinite; padding-bottom: calc(var(--u)*1.2) !important; }
@keyframes slide { to { background-position: calc(var(--u)*5.66) 0; } }
.css-top { display: flex; align-items: center; gap: calc(var(--u)*1.5); padding: calc(var(--u)*1.2) calc(var(--u)*2); background: linear-gradient(180deg, #d82020, #8a0c0c); border-bottom: calc(var(--u)*.4) solid #ffd23a; }
.css-title { font-family: 'Titan One', sans-serif; font-style: italic; font-size: calc(var(--u)*3.4); -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.css-rules { display: flex; gap: calc(var(--u)*.8); margin-left: auto; }
.css-rules button, .css-back { font-size: calc(var(--u)*1.4); padding: calc(var(--u)*.5) calc(var(--u)*1.1); border-radius: calc(var(--u)*.6); border: 2px solid #fff; background: #0006; color: #fff; }
.css-rules button:hover, .css-back:hover { background: #ffd23a; color: #000; }
.css-back { margin-left: calc(var(--u)); }
.css-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u)*1); padding: calc(var(--u)*1.2) 16% 0; }
.css-tile { position: relative; height: calc(var(--u)*16.5); background: linear-gradient(180deg, #6b7fe8, #27329a); border: calc(var(--u)*.35) solid #d9e0ff; border-radius: calc(var(--u)*.8); overflow: hidden; cursor: pointer; box-shadow: 0 calc(var(--u)*.4) 0 #0008; }
.css-tile img { position: absolute; left: 50%; bottom: calc(var(--u)*1.8); height: 118%; transform: translateX(-50%); image-rendering: auto; }
.css-tile .tname { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: calc(var(--u)*1.35); background: #000c; padding: calc(var(--u)*.3) 0; letter-spacing: 1px; }
.css-tile .tokens { position: absolute; top: calc(var(--u)*.4); left: calc(var(--u)*.4); display: flex; flex-wrap: wrap; gap: 3px; }
.tok { font-size: calc(var(--u)*1.2); background: var(--pc); border: 2px solid #fff; border-radius: 99px; padding: 0 calc(var(--u)*.5); box-shadow: 0 2px 0 #0008; opacity: .75; }
.tok.chosen { opacity: 1; transform: scale(1.12); }
.css-tile:hover { border-color: #ffd23a; }
.css-ready { position: absolute; left: 0; right: 0; top: 55%; transform: translateY(-50%) scaleY(0); text-align: center; font-family: 'Titan One', sans-serif; font-style: italic; font-size: calc(var(--u)*3.2); background: linear-gradient(180deg, #ffec5a, #ff8a1a); color: #3a1400; border-top: calc(var(--u)*.35) solid #fff; border-bottom: calc(var(--u)*.35) solid #fff; padding: calc(var(--u)*.2) 0; transition: transform .15s; cursor: pointer; z-index: 3; text-shadow: 0 2px 0 #fff8; }
.css-ready small { font-size: .45em; margin-left: calc(var(--u)*2); }
.css-ready.show { transform: translateY(-50%) scaleY(1); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.2); } }
.css-cards { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u)*1); padding: calc(var(--u)*1); }
.css-card { position: relative; background: transparent; border: calc(var(--u)*.4) solid #fff; border-radius: calc(var(--u)*1.2); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; box-shadow: 0 calc(var(--u)*.4) 0 #0009; }
.css-card.off { opacity: .8; }
.css-card.active { outline: calc(var(--u)*.35) solid #ffd23a; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u)*.4) calc(var(--u)*.7); background: var(--pc); border-bottom: 2px solid #fff; }
.css-card.cpu .card-head { background: #777; } .css-card.off .card-head { background: #444; }
.pnum { font-family: 'Titan One', sans-serif; font-style: italic; font-size: calc(var(--u)*2.4); -webkit-text-stroke: 1px #000; }
.ptype { font-size: calc(var(--u)*1.3); padding: calc(var(--u)*.2) calc(var(--u)*.7); border-radius: calc(var(--u)*.5); border: 2px solid #fff; background: #000; color: #fff; }
.card-view { flex: 1; }
.card-name { text-align: center; font-size: calc(var(--u)*1.5); background: #000b; padding: calc(var(--u)*.3) 0; }
.card-sub { text-align: center; font-size: calc(var(--u)*1.1); background: #0008; padding: calc(var(--u)*.3) 0; font-family: Arial, sans-serif; font-weight: bold; min-height: calc(var(--u)*2); }

/* ---------- stage select ---------- */
.sss { position: absolute; inset: 0; }
.sss-preview { position: absolute; left: 12%; right: 12%; top: 14%; height: 52%; border: calc(var(--u)*.5) solid #fff; border-radius: calc(var(--u)); box-shadow: 0 0 0 calc(var(--u)*.4) #000, 0 calc(var(--u)) 0 #0008; background: transparent; }
.sss-name { position: absolute; bottom: calc(var(--u)*-2.6); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'Titan One', sans-serif; font-style: italic; font-size: calc(var(--u)*3); background: linear-gradient(180deg, #ffec5a, #ff8a1a); color: #3a1400; padding: calc(var(--u)*.2) calc(var(--u)*2.5); border: 3px solid #fff; border-radius: calc(var(--u)); }
.sss-tiles { position: absolute; left: 6%; right: 6%; bottom: 8%; display: flex; gap: calc(var(--u)*1.2); justify-content: center; }
.sss-tile { width: calc(var(--u)*15); border: calc(var(--u)*.35) solid #cfd8ff; border-radius: calc(var(--u)*.8); background: #000a; overflow: hidden; text-align: center; font-size: calc(var(--u)*1.2); cursor: pointer; }
.sss-tile .sw { height: calc(var(--u)*6); }
.sss-tile span { display: block; padding: calc(var(--u)*.4) 0; }
.sss-tile.sel { border-color: #ffd23a; transform: scale(1.08); box-shadow: 0 0 calc(var(--u)*1.5) #ffd23a; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-bar { position: absolute; left: 0; right: 0; bottom: calc(var(--u)*1.2); display: flex; justify-content: center; gap: calc(var(--u)*3.5); }
.hud-p { position: relative; width: calc(var(--u)*17); display: flex; flex-direction: column; align-items: center; }
.hud-stocks { height: calc(var(--u)*2.6); display: flex; gap: 2px; align-items: center; font-size: calc(var(--u)*1.8); }
.hud-stocks img { width: calc(var(--u)*2.5); height: calc(var(--u)*2.5); border-radius: 50%; background: var(--pc); border: 2px solid #fff; object-fit: cover; }
.hud-stocks b { -webkit-text-stroke: 1px #000; }
.hud-main { position: relative; display: flex; align-items: flex-end; }
.hud-face { width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: 50%; background: radial-gradient(circle, var(--pc), #000 110%); border: calc(var(--u)*.35) solid #fff; box-shadow: 0 0 0 2px #000; margin-right: calc(var(--u)*-1.5); z-index: 0; }
.hud-dmg { position: relative; z-index: 1; font-family: 'Titan One', 'Russo One', sans-serif; font-style: italic; line-height: .9; display: flex; align-items: flex-end; transform: skewX(-8deg); }
.hud-dmg .num { font-size: calc(var(--u)*6.4); color: #fff; -webkit-text-stroke: calc(var(--u)*.3) #000; paint-order: stroke fill; text-shadow: calc(var(--u)*.35) calc(var(--u)*.35) 0 var(--pc), calc(var(--u)*.55) calc(var(--u)*.55) 0 #000; min-width: calc(var(--u)*4); text-align: right; }
.hud-dmg .pct { font-size: calc(var(--u)*2.8); color: #fff; -webkit-text-stroke: calc(var(--u)*.22) #000; paint-order: stroke fill; margin-left: 2px; margin-bottom: calc(var(--u)*.6); }
.hud-name { font-size: calc(var(--u)*1.25); background: var(--pc); border: 2px solid #fff; border-radius: 99px; padding: 0 calc(var(--u)*.9); margin-top: calc(var(--u)*.3); box-shadow: 0 2px 0 #000; text-shadow: 1px 1px 0 #000; }
.hud-p.hit .hud-dmg { animation: dmgshake .25s; }
@keyframes dmgshake { 0% { transform: skewX(-8deg) translate(0,0) scale(1.25); } 25% { transform: skewX(-8deg) translate(-4px,2px) scale(1.15); } 50% { transform: skewX(-8deg) translate(4px,-2px) scale(1.08); } 100% { transform: skewX(-8deg); } }
.hud-p.ko .hud-face { animation: kopulse .6s; }
@keyframes kopulse { 30% { transform: scale(1.5); filter: brightness(3); } }
.hud-p.out { opacity: .35; filter: grayscale(1); }
.tag { position: absolute; left: 0; top: 0; font-size: calc(var(--u)*1.25); color: #fff; background: var(--pc); border: 2px solid #fff; border-radius: calc(var(--u)*.5); padding: 0 calc(var(--u)*.45); text-shadow: 1px 1px 0 #000; box-shadow: 0 2px 0 #0008; }
.tag::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--u)*-1); transform: translateX(-50%); border: calc(var(--u)*.5) solid transparent; border-top-color: var(--pc); }
.offscreen { position: absolute; left: 0; top: 0; width: calc(var(--u)*5); height: calc(var(--u)*5); border-radius: 50%; border: calc(var(--u)*.35) solid var(--pc); background: #000a; overflow: hidden; box-shadow: 0 0 calc(var(--u)) var(--pc); }
.offscreen img { width: 100%; height: 100%; }
.timer { position: absolute; top: calc(var(--u)*1.5); right: calc(var(--u)*2.5); font-family: 'Titan One', sans-serif; font-size: calc(var(--u)*4); -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.timer.urgent { color: #ff4040; animation: blink .5s steps(2) infinite; }
.bigtext { position: absolute; left: 0; right: 0; top: 36%; text-align: center; font-family: 'Titan One', sans-serif; font-style: italic; font-size: calc(var(--u)*14); opacity: 0; transform: scale(3); -webkit-text-stroke: calc(var(--u)*.5) #000; paint-order: stroke fill; pointer-events: none; }
.bigtext.show { animation: bigin .8s forwards; }
.bigtext.count { color: #ffe23a; text-shadow: 0 calc(var(--u)*.8) 0 #b33a00; }
.bigtext.go { color: #ff3b3b; text-shadow: 0 calc(var(--u)*.8) 0 #600; font-size: calc(var(--u)*16); }
.bigtext.game { color: #fff; text-shadow: 0 0 calc(var(--u)*3) #ffd23a, 0 calc(var(--u)*.8) 0 #b33a00; animation: gamein 2.6s forwards; }
@keyframes bigin { 0% { opacity: 0; transform: scale(3); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(.8); } }
@keyframes gamein { 0% { opacity: 0; transform: scale(4) rotate(-8deg); } 12% { opacity: 1; transform: scale(1) rotate(-4deg); } 90% { opacity: 1; transform: scale(1.08) rotate(-4deg); } 100% { opacity: 0; } }
.pause { position: absolute; inset: 0; background: #0007; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*2); }
.pause.hidden { display: none; }
.pause-title { font-family: 'Titan One', sans-serif; font-size: calc(var(--u)*9); font-style: italic; color: #ffd23a; -webkit-text-stroke: 3px #000; }
.pause-help { font-size: calc(var(--u)*2); text-align: center; }

/* ---------- results ---------- */
.results { position: absolute; inset: 0; }
.win-banner { position: absolute; top: calc(var(--u)*2); left: 0; right: 0; text-align: center; background: linear-gradient(90deg, transparent, var(--pc) 20%, var(--pc) 80%, transparent); border-top: 3px solid #fff; border-bottom: 3px solid #fff; padding: calc(var(--u)*.6) 0; }
.win-banner small { display: block; font-size: calc(var(--u)*1.6); letter-spacing: 3px; }
.win-banner span { font-family: 'Titan One', sans-serif; font-style: italic; font-size: calc(var(--u)*4.5); -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.res-table { position: absolute; left: 4%; right: 4%; bottom: calc(var(--u)*5); display: flex; flex-direction: column; gap: calc(var(--u)*.6); }
.res-row { display: flex; align-items: center; gap: calc(var(--u)*1.5); background: linear-gradient(90deg, var(--pc), #000c 40%); border: 2px solid #fff; border-radius: calc(var(--u)*.6); padding: calc(var(--u)*.3) calc(var(--u)*1); font-size: calc(var(--u)*1.5); }
.res-row img { width: calc(var(--u)*3.2); height: calc(var(--u)*3.2); border-radius: 50%; border: 2px solid #fff; background: #0006; }
.res-row .place { font-family: 'Titan One', sans-serif; font-size: calc(var(--u)*2.6); width: calc(var(--u)*3); -webkit-text-stroke: 1px #000; }
.res-row .rn { width: 30%; }
.res-row b { color: #ffd23a; }

/* ---------- intermission ---------- */
.inter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*2); background: radial-gradient(circle, #1d2a8a, #05081e 70%); }
.inter-stage { font-family: 'Titan One', sans-serif; font-size: calc(var(--u)*7); color: #ffd23a; font-style: italic; -webkit-text-stroke: 2px #000; animation: bigin 3s forwards; opacity: 1; }
.inter-vs { font-size: calc(var(--u)*4); color: #ff3b3b; }
.inter-names { font-family: 'Titan One', sans-serif; font-size: calc(var(--u)*4.5); text-align: center; }