/* W5: HUD, menus, touch. Everything lives in #ui. Scale unit --u = 1vw on wide screens, capped by height. */
/* Bangers (SIL OFL 1.1, game/fonts/OFL-Bangers.txt): arcade display lettering. Weight/style ranges stop the browser faking bold or oblique. */
@font-face { font-family: "Bangers"; src: url("fonts/Bangers-Regular.ttf") format("truetype"); font-weight: 100 900; font-style: normal italic; font-display: swap; }
.fk-root, .fk-hud, .fk-menu, .fk-touch { --u: min(1vw, 1.78vh); --gold1: #fff7b8; --gold2: #ffd23f; --gold3: #ff9a1f; --gold4: #c24f00;
  --font: "Bangers", Impact, "Arial Narrow Bold", "Haettenschweiler", "Arial Black", system-ui, sans-serif; font-family: var(--font); }
@media (orientation: portrait) { .fk-hud, .fk-menu, .fk-touch { --u: 1vw; } }

/* ---------- gold lettering ---------- */
.fk-gold { position: relative; display: inline-block; font-family: var(--font); font-style: italic; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.fk-gold > i { position: relative; z-index: 1; font: inherit; color: transparent; background: linear-gradient(180deg, var(--gold1) 8%, var(--gold2) 40%, var(--gold3) 58%, var(--gold4) 100%);
  -webkit-background-clip: text; background-clip: text; padding-right: .14em; margin-right: -.14em; /* Bangers leans right: keep the last glyph inside the clip box */ }
.fk-gold::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: 0; color: #5a1d00; -webkit-text-stroke: .28em #5a1d00; paint-order: stroke fill;
  text-shadow: 0 .04em 0 #7a2a00, 0 .08em 0 #7a2a00, 0 .12em 0 #6a2400, 0 .16em 0 #5a1d00, 0 .2em 0 #4a1700, 0 .26em .12em rgba(0,0,0,.55); }

/* ---------- HUD ---------- */
.fk-hud { position: absolute; inset: 0; pointer-events: none !important; color: #fff; }
.fk-hud * { pointer-events: none !important; }
.fk-top { position: absolute; left: 1.2%; right: 1.2%; top: max(1.2vh, env(safe-area-inset-top)); display: flex; align-items: flex-start; justify-content: center; gap: 1%; }
.fk-side { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: calc(var(--u) * .6); }
.fk-side.p2 { flex-direction: row-reverse; }
.fk-port { flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border: calc(var(--u) * .35) solid #f5f0e0; box-shadow: 0 0 0 calc(var(--u) * .2) #111, 0 calc(var(--u) * .4) calc(var(--u) * 1) rgba(0,0,0,.5);
  background: #222 center 18% / cover no-repeat; clip-path: polygon(0 0, 100% 0, 100% 78%, 82% 100%, 0 100%); }
.p2 .fk-port { clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 78%); }
.fk-col { flex: 1 1 0; min-width: 0; }
.fk-name { font: italic 900 max(12px, calc(var(--u) * 2.3))/1.1 var(--font); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: clip; padding: 0 calc(var(--u) * 1); }
.p2 .fk-name { text-align: right; }
.fk-bar { position: relative; height: calc(var(--u) * 2.6); background: #1b1206; border: calc(var(--u) * .28) solid #f5f0e0; box-shadow: 0 0 0 calc(var(--u) * .18) #111, 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0,0,0,.45);
  overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - var(--u) * 1.4) 100%, 0 100%); }
.p2 .fk-bar { clip-path: polygon(var(--u) * 1.4 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(calc(var(--u) * 1.4) 0, 100% 0, 100% 100%, 0 100%); }
.fk-lag, .fk-fill { position: absolute; inset: 0; transform-origin: left center; }
.p2 .fk-lag, .p2 .fk-fill { transform-origin: right center; }
.fk-lag { background: #e02a1c; transition: transform .55s ease-out .45s; }
.fk-fill { background: linear-gradient(180deg, #fff59a 0%, #ffd417 45%, #f0a500 100%); transition: transform .12s ease-out; }
.fk-fill::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; background: rgba(255,255,255,.35); }
.fk-bar.low .fk-fill { background: linear-gradient(180deg, #ff9a8a, #e83b22 50%, #b01a0c); animation: fk-pulse .5s infinite alternate; }
@keyframes fk-pulse { to { filter: brightness(1.5); } }
.fk-stars { display: flex; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * .5); padding: 0 calc(var(--u) * 1); }
.p2 .fk-stars { justify-content: flex-end; }
.fk-star { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); min-width: 9px; min-height: 9px; background: #1a1a1a; border: 1px solid #777;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); transition: transform .3s, background .3s; }
.fk-star.on { background: #ffd23f; border-color: #fff; transform: scale(1.25); }
.fk-timer { flex: none; position: relative; width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); margin: calc(var(--u) * -.6) calc(var(--u) * .4) 0; display: grid; place-items: center; }
.fk-timer .star1, .fk-timer .star2 { position: absolute; inset: 0; }
.fk-timer .star1 { background: #ffd23f; }
.fk-timer .star2 { inset: calc(var(--u) * .45); background: #0c0c0c; }
.fk-timer b { position: relative; font: italic 900 calc(var(--u) * 5.2)/1 var(--font); color: #ffd23f; text-shadow: 0 0 calc(var(--u) * .5) #ff9a1f, 0 calc(var(--u) * .25) 0 #7a2a00; }
.fk-timer.low b { color: #ff4a3a; animation: fk-pulse .4s infinite alternate; }

.fk-meter { position: absolute; bottom: max(2.5vh, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: calc(var(--u) * .8); width: 32%; }
.fk-meter.p1 { left: 1.5%; } .fk-meter.p2 { right: 1.5%; flex-direction: row-reverse; }
.fk-lvl { font: italic 900 calc(var(--u) * 6)/1 var(--font); color: var(--c, #ff9a1f); -webkit-text-stroke: calc(var(--u) * .3) #111; text-shadow: 0 calc(var(--u) * .35) 0 #111, 0 0 calc(var(--u) * 1) var(--c); }
.fk-mcol { flex: 1; min-width: 0; }
.fk-max { font: italic 900 max(11px, calc(var(--u) * 1.8))/1 var(--font); color: var(--c); text-shadow: 0 2px 0 #000; opacity: .45; }
.p2 .fk-max { text-align: right; }
.fk-meter.full .fk-max { opacity: 1; animation: fk-pulse .35s infinite alternate; }
.fk-mbar { position: relative; height: calc(var(--u) * 1.7); background: #111; border: calc(var(--u) * .25) solid #f5f0e0; overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - var(--u) * 1) 100%, 0 100%); }
.p2 .fk-mbar { clip-path: polygon(calc(var(--u) * 1) 0, 100% 0, 100% 100%, 0 100%); }
.fk-mfill { position: absolute; inset: 0; background: linear-gradient(180deg, #ffe08a, var(--c) 50%, #8a3a00); transform-origin: left center; transition: transform .1s; }
.p2 .fk-mfill { transform-origin: right center; background: linear-gradient(180deg, #bdf0ff, var(--c) 50%, #0b4b9a); }
.fk-mticks { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.3% - 1px), #000 calc(33.3% - 1px) 33.3%, transparent 33.3% calc(66.6% - 1px), #000 calc(66.6% - 1px) 66.6%, transparent 66.6%); }
@media (orientation: portrait) {
  .fk-meter { bottom: auto; top: calc(max(1.2vh, env(safe-area-inset-top)) + 17vw); width: 38%; }
  .fk-lvl { font-size: 9vw; }
  .fk-port { width: 11vw; height: 11vw; }
  .fk-timer { width: 15vw; height: 15vw; } .fk-timer b { font-size: 7.4vw; }
  .fk-bar { height: 4vw; } .fk-name { font-size: 12px; }
}

/* combo + callouts */
.fk-combo { position: absolute; top: 26%; opacity: 0; transform: translateX(0); transition: opacity .15s; text-align: center; line-height: 1; }
.fk-combo.p1 { left: 3%; } .fk-combo.p2 { right: 3%; }
.fk-combo.on { opacity: 1; }
.fk-combo .n { display: block; font-size: calc(var(--u) * 7.5); }
.fk-combo .w { display: block; font: italic 900 calc(var(--u) * 2.6)/1 var(--font); color: #fff; text-shadow: 0 3px 0 #000; letter-spacing: .08em; margin-top: calc(var(--u) * .3); }
.fk-combo .d { display: block; font: italic 800 max(12px, calc(var(--u) * 1.9))/1.2 var(--font); color: #ffe27a; text-shadow: 0 2px 0 #000; }
.fk-combo.pop .n { animation: fk-pop .22s ease-out; }
@keyframes fk-pop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.fk-counter { position: absolute; top: 22%; left: 50%; font-size: calc(var(--u) * 4.5); opacity: 0; transform: translate(-50%, 0) scale(1); }
.fk-counter.go { animation: fk-counter .9s ease-out forwards; }
@keyframes fk-counter { 0% { opacity: 0; transform: translate(-50%, 0) scale(2) rotate(-6deg); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-6deg); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30%) scale(1) rotate(-6deg); } }

/* banners */
.fk-banner { position: absolute; left: 0; right: 0; top: 36%; text-align: center; opacity: 0; pointer-events: none; }
.fk-banner .fk-gold { font-size: min(calc(var(--u) * 11), var(--fit, 100vw)); }
.fk-banner.small .fk-gold { font-size: min(calc(var(--u) * 7), var(--fit, 100vw)); }
.fk-banner .sub { display: block; margin-top: calc(var(--u) * 1.4); font: italic 900 max(13px, calc(var(--u) * 2.2))/1 var(--font); color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; letter-spacing: .08em; }
.fk-banner.go { animation: fk-banner var(--dur, 1.6s) cubic-bezier(.2, .9, .3, 1) forwards; }
.fk-banner.hold { animation-name: fk-banner-hold; }
.fk-banner.low { top: 62%; }
@keyframes fk-banner { 0% { opacity: 0; transform: scale(2.4) translateY(-4%); } 12% { opacity: 1; transform: scale(1); } 18% { transform: scale(1.06); } 24% { transform: scale(1); }
  82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92); } }
@keyframes fk-banner-hold { 0% { opacity: 0; transform: scale(2.4); } 12% { opacity: 1; transform: scale(1); } 18% { transform: scale(1.06); } 24%, 100% { opacity: 1; transform: scale(1); } }
@media (orientation: portrait) { .fk-banner .fk-gold { font-size: min(15vw, var(--fit, 100vw)); } .fk-banner.small .fk-gold { font-size: min(10vw, var(--fit, 100vw)); } .fk-banner { top: 28%; } }

/* judges */
.fk-judge { position: absolute; left: 50%; bottom: 16%; display: flex; gap: calc(var(--u) * 1.2); transform: translateX(-50%); }
.fk-card { width: calc(var(--u) * 7); min-width: 64px; padding: calc(var(--u) * .8) 0 calc(var(--u) * .6); text-align: center; background: #fdfcf6; color: #111; border: calc(var(--u) * .3) solid #111;
  border-radius: calc(var(--u) * .8); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0,0,0,.5); opacity: 0; transform: translateY(160%) rotate(0); }
.fk-card b { display: block; font: italic 900 calc(var(--u) * 3.6)/1 var(--font); }
.fk-card i { display: block; font: 700 max(10px, calc(var(--u) * 1.1))/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #666; margin-top: 2px; }
.fk-judge.go .fk-card { animation: fk-card 2.6s ease-out forwards; animation-delay: calc(var(--i) * .18s); }
@keyframes fk-card { 0% { opacity: 0; transform: translateY(160%) rotate(8deg); } 14% { opacity: 1; transform: translateY(0) rotate(calc(var(--r) * 1deg)); } 80% { opacity: 1; transform: translateY(0) rotate(calc(var(--r) * 1deg)); } 100% { opacity: 0; transform: translateY(-30%) rotate(calc(var(--r) * 1deg)); } }

/* ---------- menus ---------- */
.fk-menu { position: absolute; inset: 0; color: #fff; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, rgba(18, 52, 110, .88), rgba(6, 14, 34, .96)); display: none; }
.fk-menu.clear { background: rgba(4, 10, 26, .72); }
.fk-menu.on { display: block; }
.fk-screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3vh 4vw; }
.fk-screen.on { display: flex; animation: fk-fadein .35s ease-out; }
@keyframes fk-fadein { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.fk-title { font-size: calc(var(--u) * 9); line-height: .95; max-width: 94vw; white-space: normal; text-align: center; }
.fk-title .fk-gold { white-space: normal; }
.fk-tag { margin-top: 2.2vh; font: italic 800 max(14px, calc(var(--u) * 2.2))/1.3 var(--font); letter-spacing: .1em; color: #cfe6ff; text-shadow: 0 2px 0 #000; }
.fk-press { margin-top: 5vh; font: italic 900 max(16px, calc(var(--u) * 2.8))/1 var(--font); letter-spacing: .14em; color: #fff; text-shadow: 0 2px 0 #000; animation: fk-blink 1.1s infinite alternate; }
@keyframes fk-blink { to { opacity: .25; } }
.fk-h { font: italic 900 max(22px, calc(var(--u) * 4))/1 var(--font); letter-spacing: .06em; color: #ffd23f; text-shadow: 0 3px 0 #7a2a00, 0 0 12px rgba(0,0,0,.6); margin: 0 0 3vh; text-transform: uppercase; }
.fk-list { display: flex; flex-direction: column; gap: 1.6vh; width: min(92vw, 560px); }
.fk-btn { display: block; box-sizing: border-box; min-height: 48px; padding: 1.6vh 4vw; width: 100%; font: italic 900 max(18px, calc(var(--u) * 2.8))/1.1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #2b4f95, #15295a); border: 3px solid #f5f0e0; border-radius: 4px; transform: skewX(-8deg); box-shadow: 0 5px 0 #000, 0 8px 14px rgba(0,0,0,.5);
  cursor: pointer; text-shadow: 0 2px 0 #000; transition: transform .1s; -webkit-appearance: none; appearance: none; }
.fk-btn small { display: block; font: 600 max(12px, calc(var(--u) * 1.3))/1.3 system-ui, sans-serif; letter-spacing: .02em; text-transform: none; opacity: .8; margin-top: 3px; }
.fk-btn.sel, .fk-btn:hover { background: linear-gradient(180deg, #ffe27a, #ff9a1f); color: #2a1200; text-shadow: 0 1px 0 rgba(255,255,255,.5); transform: skewX(-8deg) scale(1.05); }

.fk-grid { display: flex; gap: 2.4vw; justify-content: center; align-items: stretch; flex-wrap: wrap; max-width: 96vw; }
.fk-card2 { position: relative; width: min(38vw, 36vh, 340px); aspect-ratio: 1; border: 4px solid #f5f0e0; background: #222 center 15% / cover no-repeat; cursor: pointer;
  box-shadow: 0 6px 0 #000, 0 10px 18px rgba(0,0,0,.6); transform: skewX(-4deg); overflow: hidden; }
.fk-card2 .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2vh 1vw; font: italic 900 max(15px, calc(var(--u) * 2.4))/1 var(--font); letter-spacing: .05em;
  background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,0)); text-shadow: 0 2px 0 #000; }
.fk-card2 .tag { position: absolute; top: 0; padding: 4px 10px; font: italic 900 max(13px, calc(var(--u) * 1.8))/1 var(--font); color: #111; display: none; }
.fk-card2.c0 { border-color: #ff9a1f; box-shadow: 0 0 0 4px rgba(255,154,31,.5), 0 6px 0 #000, 0 0 30px rgba(255,154,31,.7); }
.fk-card2.c1 { border-color: #4ab8ff; box-shadow: 0 0 0 4px rgba(74,184,255,.5), 0 6px 0 #000, 0 0 30px rgba(74,184,255,.7); }
.fk-card2.c0.c1 { border-image: linear-gradient(90deg, #ff9a1f 50%, #4ab8ff 50%) 1; }
.fk-card2.c0 .t0 { display: block; left: 0; background: #ff9a1f; } .fk-card2.c1 .t1 { display: block; right: 0; background: #4ab8ff; }
.fk-hint { margin-top: 3vh; font: 700 max(13px, calc(var(--u) * 1.5))/1.4 system-ui, sans-serif; color: #cfe6ff; max-width: 90vw; }

.fk-vs { flex-direction: row; gap: 0; padding: 0; justify-content: space-between; }
.fk-vs .side { flex: 1 1 0; height: 100%; position: relative; background: center 20% / cover no-repeat; }
.fk-vs .side.a { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); animation: fk-slam-l .45s cubic-bezier(.2, .9, .3, 1) both; }
.fk-vs .side.b { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); animation: fk-slam-r .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes fk-slam-l { from { transform: translateX(-100%); } } @keyframes fk-slam-r { from { transform: translateX(100%); } }
.fk-vs .nm { position: absolute; bottom: 8%; left: 0; right: 0; font-size: calc(var(--u) * 4.6); }
.fk-vs .mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 14); z-index: 2; animation: fk-pop .4s .35s ease-out both; }
@media (orientation: portrait) { .fk-vs { flex-direction: column; } .fk-vs .side.a { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .fk-vs .side.b { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
  .fk-vs .mid { font-size: 22vw; } .fk-vs .nm { font-size: 9vw; } @keyframes fk-slam-l { from { transform: translateY(-100%); } } @keyframes fk-slam-r { from { transform: translateY(100%); } } .fk-title { font-size: 15vw; } .fk-card2 { width: min(40vw, 30vh); } }

.fk-win { width: min(44vw, 40vh, 360px); aspect-ratio: 1; border: 5px solid #ffd23f; background: #222 center 15% / cover no-repeat; box-shadow: 0 0 40px rgba(255,210,63,.6), 0 8px 0 #000; margin-bottom: 3vh; transform: skewX(-4deg); }
.fk-table { border-collapse: collapse; margin: 0 auto; font: 600 max(13px, calc(var(--u) * 1.5))/1.5 system-ui, sans-serif; text-align: left; max-width: 94vw; }
.fk-table th, .fk-table td { padding: 4px 10px; border-bottom: 1px solid rgba(255,255,255,.18); }
.fk-table th { color: #ffd23f; font-family: var(--font); font-style: italic; letter-spacing: .06em; }
.fk-table kbd { display: inline-block; min-width: 1.4em; padding: 1px 6px; margin: 1px; background: #f5f0e0; color: #111; border-radius: 3px; font: 800 .95em system-ui; text-align: center; }
.fk-scroll { max-height: 70vh; overflow: auto; width: 100%; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* ---------- touch ---------- */
.fk-touch { position: absolute; inset: 0; display: none; pointer-events: none !important; touch-action: none; --b: max(58px, min(15vw, 13vh)); }
.fk-touch.on { display: block; }
.fk-touch > * { pointer-events: none; }
.fk-zone { position: absolute; left: 0; bottom: 0; width: 46%; height: 62%; pointer-events: auto !important; touch-action: none; }
.fk-stick-base { position: absolute; width: calc(var(--b) * 1.9); height: calc(var(--b) * 1.9); margin: calc(var(--b) * -.95) 0 0 calc(var(--b) * -.95); border-radius: 50%;
  border: 3px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); opacity: .55; }
.fk-stick-base.idle { left: calc(var(--b) * 1.3); bottom: calc(var(--b) * 1.1); top: auto; margin: 0; opacity: .35; }
.fk-stick-knob { position: absolute; left: 50%; top: 50%; width: calc(var(--b) * .8); height: calc(var(--b) * .8); margin: calc(var(--b) * -.4) 0 0 calc(var(--b) * -.4); border-radius: 50%; background: rgba(255,255,255,.55); border: 3px solid rgba(255,255,255,.8); }
.fk-btns { position: absolute; right: max(2vw, env(safe-area-inset-right)); bottom: max(2vh, env(safe-area-inset-bottom)); width: calc(var(--b) * 3.3); height: calc(var(--b) * 3.3); pointer-events: none; }
.fk-tb { position: absolute; width: var(--b); height: var(--b); border-radius: 50%; display: grid; place-items: center; text-align: center; pointer-events: auto !important; touch-action: none;
  font: italic 900 max(11px, calc(var(--b) * .2))/1.05 var(--font); color: #fff; letter-spacing: .03em; text-shadow: 0 2px 0 #000; background: rgba(20, 30, 60, .5); border: 3px solid rgba(255,255,255,.7); -webkit-tap-highlight-color: transparent; }
.fk-tb.dn { background: rgba(255, 190, 40, .8); color: #2a1200; text-shadow: none; transform: scale(.93); }
.fk-tb[data-k=LP] { left: 0; top: 0; } .fk-tb[data-k=HP] { left: calc(var(--b) * 1.1); top: calc(var(--b) * -.15); }
.fk-tb[data-k=LK] { left: calc(var(--b) * .15); top: calc(var(--b) * 1.15); } .fk-tb[data-k=HK] { left: calc(var(--b) * 1.25); top: calc(var(--b) * 1.0); }
/* */.fk-tb[data-k=SP] { font-size: max(11px, calc(var(--b) * .16)); left: calc(var(--b) * 2.3); top: calc(var(--b) * .55); width: calc(var(--b) * .95); height: calc(var(--b) * .95); border-color: #ffd23f; }
/* FOCUS / EX / ULTRA / SUPER: one row (wraps if ever needed) in a thumb arc just above the attack cluster, right-aligned. >= 46 px each. */
.fk-xtra { position: absolute; right: max(2vw, env(safe-area-inset-right)); bottom: calc(max(2vh, env(safe-area-inset-bottom)) + var(--b) * 3.5 + 8px); width: calc(var(--b) * 3.6); display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 4px; pointer-events: none; }
.fk-xtra .fk-tb { box-sizing: border-box; position: relative; left: auto; top: auto; flex: none; width: max(46px, calc(var(--b) * .8)); height: max(46px, calc(var(--b) * .8)); font-size: max(11px, calc(var(--b) * .17)); }
.fk-tb[data-k=FOCUS] { border-color: #6fd0ff; }
.fk-tb[data-k=EX], .fk-tb[data-k=ULTRA], .fk-tb[data-k=SUPER] { display: none; }
.fk-tb[data-k=EX].show, .fk-tb[data-k=ULTRA].show, .fk-tb[data-k=SUPER].show { display: grid; }
.fk-tb[data-k=EX] { border-color: #ffd23f; background: rgba(200,120,0,.7); }
.fk-tb[data-k=ULTRA] { border-color: #fff3a8; background: rgba(120,40,220,.8); animation: fk-pulse .4s infinite alternate; }
.fk-tb[data-k=SUPER] { border-color: #ffd23f; background: rgba(255,120,0,.85); animation: fk-pulse .4s infinite alternate; }
@media (orientation: portrait) {
  .fk-touch { --b: min(16vw, 11vh); }
  .fk-zone { width: 40%; height: 36%; }   /* ends left of the button column, below the thumb arc */
  .fk-btns { bottom: 4vh; }
}
@media (orientation: portrait) { .fk-banner.low { top: 36%; } }   /* (root) phone portrait: the arena is the top 56% */

/* ---------- SF4 systems: ultra gauge, stun gauge, callouts ---------- */
.fk-stun { position: relative; height: calc(var(--u) * .7); min-height: 4px; margin: calc(var(--u) * .35) calc(var(--u) * 1) 0 0; background: rgba(0,0,0,.65); border: 1px solid rgba(245,240,224,.55); overflow: hidden; }
.p2 .fk-stun { margin: calc(var(--u) * .35) 0 0 calc(var(--u) * 1); }
.fk-stunfill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: linear-gradient(180deg, #ffe9a0, #ffb400); transition: transform .1s linear; }
.p2 .fk-stunfill { transform-origin: right center; }
.fk-stun.hot .fk-stunfill { background: linear-gradient(180deg, #ff9a8a, #e0200f); }
.fk-stun.dizzy { animation: fk-pulse .22s infinite alternate; border-color: #ff4a3a; }
.fk-stun.dizzy .fk-stunfill { background: #ff2a1a; transform: scaleX(1) !important; }

.fk-ultra { display: flex; align-items: center; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .4); }
.p2 .fk-ultra { flex-direction: row-reverse; }
.fk-ulab { flex: none; font: italic 900 max(12px, calc(var(--u) * 1.6))/1 var(--font); letter-spacing: .06em; color: #c9a8ff; text-shadow: 0 2px 0 #000; opacity: .65; }
.fk-ubar { position: relative; flex: 1; min-width: 0; height: calc(var(--u) * 1.2); min-height: 7px; background: #120a1e; border: calc(var(--u) * .22) solid #f5f0e0; overflow: hidden; }
.fk-ufill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; transition: transform .1s; background: linear-gradient(180deg, #e3c9ff, #9a4dff 55%, #4a1a9a); }
.p2 .fk-ufill { transform-origin: right center; }
.fk-umark { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #000; }
.fk-ultra.ready .fk-ulab { opacity: 1; color: #fff; animation: fk-pulse .3s infinite alternate; text-shadow: 0 0 10px #c07bff, 0 2px 0 #000; }
.fk-ultra.ready .fk-ufill { background: linear-gradient(180deg, #fff3a8, #ffb400 55%, #ff6a00); animation: fk-pulse .3s infinite alternate; }
.fk-ultra.ready .fk-ubar { box-shadow: 0 0 calc(var(--u) * 1.2) #ffb400; }

.fk-ex { position: absolute; left: calc(var(--u) * 7); bottom: 100%; margin-bottom: calc(var(--u) * .2); opacity: 0; font-size: calc(var(--u) * 3); }
.fk-meter.p2 .fk-ex { left: auto; right: calc(var(--u) * 7); }
.fk-ex.go { animation: fk-exp .9s ease-out forwards; }
@keyframes fk-exp { 0% { opacity: 0; transform: scale(2) translateY(0); } 15% { opacity: 1; transform: scale(1) translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-40%); } }
.fk-call { position: absolute; left: 0; right: 0; top: 19%; text-align: center; opacity: 0; }
.fk-call .fk-gold { font-size: min(calc(var(--u) * 5.5), var(--fit, 100vw)); }
.fk-call.go { animation: fk-callp 1.1s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes fk-callp { 0% { opacity: 0; transform: scale(2); } 14% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.95) translateY(-20%); } }
.fk-ultrabanner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; opacity: 0; }
.fk-ultrabanner .fk-gold { font-size: min(calc(var(--u) * 11), 15vw); }
.fk-ultrabanner .sub { display: block; margin-top: calc(var(--u) * 1.2); font: italic 900 max(14px, calc(var(--u) * 3))/1 var(--font); color: #fff; letter-spacing: .08em; text-shadow: 0 2px 0 #000, 0 0 10px #c07bff; }
.fk-ultrabanner.on { opacity: 1; }
.fk-ultrabanner.go { animation: fk-ultin .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes fk-ultin { 0% { opacity: 0; transform: scale(2.6); } 60% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
.fk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.fk-flash.go { animation: fk-flash .35s ease-out forwards; }
@keyframes fk-flash { 0% { opacity: .7; } 100% { opacity: 0; } }
@media (orientation: portrait) {
  .fk-call { top: 17%; } .fk-call .fk-gold { font-size: min(9vw, var(--fit, 100vw)); }
  .fk-ultrabanner { top: 28%; } .fk-ultrabanner .fk-gold { font-size: 14vw; }
  .fk-ex { left: 12vw; bottom: auto; top: 100%; margin: 2.5vw 0 0; font-size: 7vw; } .fk-meter.p2 .fk-ex { left: auto; right: 12vw; }
  .fk-stun { height: 1.2vw; }
}