/* KATANA: the scene fills the screen; the shell draws the menu and the numbers over it */
html, body { margin: 0; height: 100%; background: #f3f4f5; overflow: hidden; } canvas { display: block; width: 100vw; height: 100vh; }
html, body, canvas { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.ui { position: fixed; pointer-events: none; color: #08090b; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
/* the cut she took: a red stroke drawn across the frame */
#slash { position: fixed; left: 50%; top: 50%; width: 78vmin; height: 7px; background: #b5121b; border-radius: 0 50% 50% 0 / 0 100% 100% 0; transform: translate(-50%, -50%) scaleX(0); opacity: 0; pointer-events: none; z-index: 5; }
/* the fight's words (Counter, Double, Finisher, Too late), high in the middle */
#pop { left: 0; right: 0; top: 22%; text-align: center; opacity: 0; transition: opacity .25s; }
#pop.on { opacity: 1; }
#pop b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; }
#pop span { display: block; margin-top: 6px; font-size: 30px; font-weight: 400; color: #b5121b; }
/* the Ronin's cuts left (rules v4): his name and a row of red marks, under the shell's numbers */
#boss { left: 50%; top: 74px; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .6s; }
#boss.on { opacity: 1; }
#boss b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; margin-bottom: 8px; }
#boss div { font-size: 0; white-space: nowrap; }
#boss i { display: inline-block; width: calc(min(420px, 86vw) / 30 - 3px); height: 5px; margin: 0 1.5px; background: #b5121b; transition: background .25s; }
#boss i.gone { background: rgba(8, 9, 11, .14); }
/* the credits, before a run: small capitals in the corner, quiet (the sound's licence asks for its line) */
#credit { right: 22px; bottom: 18px; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: right; opacity: .45; transition: opacity .5s; }
#credit span + span::before { content: " · "; }
@media (max-width: 520px) { #credit span { display: block; line-height: 1.6; } #credit span + span::before { content: none; } #credit { right: 16px; bottom: 12px; } }
/* on a touch screen: the stick wherever the left thumb lands, the cut button under the right */
#stick { display: none; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(8, 9, 11, .28); }
#stick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(8, 9, 11, .35); }
#stick.on { display: block; }
#cutbtn { display: none; right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(8, 9, 11, .5); background: rgba(243, 244, 245, .35); }
#cutbtn::after { content: ""; position: absolute; left: 22px; top: 39px; width: 40px; height: 3px; background: #b5121b; transform: rotate(-35deg); }
body.touch.playing #cutbtn { display: block; }
#cutbtn.down { background: rgba(8, 9, 11, .25); }