:root {
  --ink: #0a0d12;
  --paper: #eef4ff;
  --chakra: #4fc3ff;
  --chakra-deep: #1a6fd6;
  --dim: #8a94a8;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%;
  height: 100%;
  /* dvh tracks the mobile browser chrome sliding in and out; without it the
     stage is sized to a viewport that does not exist once the address bar
     collapses, and the video is cropped. */
  height: 100dvh;
  background: #000; color: var(--paper);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* no pull-to-refresh or rubber-banding while reaching for a button */
body { touch-action: manipulation; }

/* ---------------------------------------------------------------- stage */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  /* THE ONLY MIRROR IN THE APP. Do not mirror the scene, the landmarks,
     or the frames fed to MediaPipe -- only this. */
  transform: scaleX(-1);
  transform-origin: 50% 50%;
  will-change: transform;
}

#cam, #gl {
  position: absolute;
  left: 0; top: 0;
  display: block;
}

#cam { object-fit: cover; }

/* ------------------------------------------------------------------ hud */

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

#ring-wrap {
  position: absolute;
  left: 24px; bottom: 24px;
  width: 120px; height: 120px;
  opacity: 0.92;
  transition: opacity .25s;
}
#ring-wrap.hidden { opacity: 0; }

#ring { width: 100%; height: 100%; transform: rotate(-90deg); }
#ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring-bg   { stroke: rgba(255,255,255,.16); }
.ring-fill {
  stroke: var(--chakra-deep);
  stroke-dasharray: 326.7;      /* 2*pi*52 */
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .06s linear, stroke .2s;
}
#ring-wrap.active .ring-fill { stroke: var(--chakra); filter: drop-shadow(0 0 6px var(--chakra)); }
.ring-tick { stroke: rgba(255,255,255,.55); stroke-width: 2; }

#ring-label {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em;
  text-shadow: 0 1px 4px #000;
}

#state-label {
  position: absolute;
  left: 24px; bottom: 156px;
  font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--chakra);
  text-shadow: 0 1px 4px #000, 0 0 12px rgba(79,195,255,.5);
  opacity: 0;
  transition: opacity .15s;
}
#state-label.on { opacity: 1; }

#debug-panel {
  position: absolute;
  right: 16px; top: 16px;
  min-width: 220px;
  padding: 10px 12px;
  background: rgba(0,0,0,.66);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  font: 11px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  color: #cfe9ff;
}

/* -------------------------------------------------------------- settings */

#settings-btn {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 30;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.55);
  color: var(--paper);
  font-size: 19px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#settings-btn:hover { background: rgba(0,0,0,.78); }

#settings-panel {
  position: fixed;
  right: 16px; bottom: 72px;
  z-index: 30;
  width: 302px;
  padding: 16px 18px 18px;
  background: rgba(10,13,18,.93);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}
#settings-panel h2 {
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  font-size: 13px;
}
.row.buttons { justify-content: flex-start; flex-wrap: wrap; margin-top: 15px; }

select, input[type=range] { max-width: 158px; }
select, button {
  font: inherit; font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: #161b24; color: var(--paper);
  cursor: pointer;
}
button:hover { background: #222a38; }
button.primary {
  background: var(--chakra-deep); border-color: var(--chakra-deep);
  font-weight: 700;
}
button.primary:hover { background: #2a83ef; }
input[type=range] { cursor: pointer; }

.hint, .fine {
  margin: 10px 0 0;
  font-size: 11px; line-height: 1.5;
  color: var(--dim);
}

/* -------------------------------------------------------------- screens */

#overlays {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: rgba(6,9,14,.9);
  backdrop-filter: blur(9px);
  pointer-events: auto;
}
.screen[hidden] { display: none; }

.screen h1 {
  margin: 0;
  font-size: 60px; line-height: 1;
  color: var(--chakra);
  letter-spacing: .08em;
  text-shadow: 0 0 34px rgba(79,195,255,.55);
}
.screen h2 { margin: 0; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; }
.screen p  { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.6; color: #dde6f5; }
.screen p.fine { color: var(--dim); font-size: 11.5px; }
.screen p.fine.tip { color: var(--paper); opacity: .85; margin-top: 10px; }

.bar {
  width: min(420px, 74vw); height: 5px;
  background: rgba(255,255,255,.14);
  border-radius: 3px; overflow: hidden;
}
#load-bar {
  width: 0%; height: 100%;
  background: var(--chakra);
  transition: width .25s;
}

@media (prefers-reduced-motion: reduce) {
  .ring-fill { transition: none; }
}

/* ----------------------------------------------------------- jutsu menu */

#jutsu-btn {
  position: fixed;
  right: 68px; bottom: 16px;
  z-index: 30;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.55);
  color: var(--paper);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#jutsu-btn:hover { background: rgba(0,0,0,.78); }

/* ---------------------------------------------------------------- hint */

#hint {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 28;
  max-width: min(92vw, 520px);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.62);
  color: var(--paper);
  font-size: 13px; letter-spacing: .04em;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#hint[hidden] { display: none; }

/* --------------------------------------------------------------- flash */

/* The Rasenshuriken hitting the camera. Above the stage, below the buttons. */
#flash {
  position: fixed; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
}

/* ---------------------------------------------------------------- mute */

#mute-btn {
  position: fixed;
  right: 120px; bottom: 16px;
  z-index: 30;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.55);
  color: var(--paper);
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#mute-btn:hover { background: rgba(0,0,0,.78); }
#mute-btn[aria-pressed="true"] { opacity: .6; }

#jutsu-panel {
  position: fixed;
  right: 16px; bottom: 72px;
  z-index: 30;
  width: 348px;
  padding: 16px 18px 14px;
  background: rgba(10,13,18,.94);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}
#jutsu-panel h2 {
  margin: 0 0 14px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}

.jutsu {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px; row-gap: 7px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  color: var(--paper);
  transition: color .2s;
}
.jutsu:first-of-type { border-top: 0; padding-top: 2px; }

/* One cell holding either a reference photo or the drawn glyph. */
.sign-art {
  grid-row: 1 / 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
}

.jutsu svg {
  width: 100%; height: 100%;
  color: #9fb6d4;
  transition: color .2s, filter .2s;
}
.jutsu.on svg { color: var(--chakra); filter: drop-shadow(0 0 7px rgba(79,195,255,.65)); }

/* The cross and ram references are scans and screen grabs, not icons: one is
   black ink on white, the other a dark frame. Desaturating both makes them sit
   quietly next to the drawn paper glyph instead of fighting it, and letting the
   colour back in on match doubles as the "you are doing it" cue. */
.jutsu img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.15);
  background: #0d1119;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  transition: filter .2s, border-color .2s, box-shadow .2s;
}
.jutsu.on img {
  filter: none;
  border-color: var(--chakra);
  box-shadow: 0 0 8px rgba(79,195,255,.5);
}

.jutsu-text b {
  display: block;
  font-size: 13.5px; letter-spacing: .04em;
}
.jutsu-text b span {
  margin-left: 7px;
  font-size: 12px; font-weight: 400;
  color: var(--dim);
}
.jutsu-text p {
  margin: 3px 0 0;
  font-size: 11.5px; line-height: 1.5;
  color: #c2cddc;
}
.jutsu-text p b { display: inline; font-size: inherit; color: var(--paper); }
.jutsu-text em {
  display: block;
  margin-top: 4px;
  font-size: 11.5px; font-style: normal;
  color: var(--chakra);
}

.jutsu-meter {
  position: relative;
  grid-column: 2;
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  overflow: hidden;
}
.jutsu-meter i {
  display: block; height: 100%; width: 0%;
  background: var(--chakra-deep);
  border-radius: 2px;
  transition: width .08s linear, background .2s;
}
.jutsu.on .jutsu-meter i { background: var(--chakra); }
.jutsu-meter u {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px;
  background: rgba(255,255,255,.45);
}


/* ------------------------------------------------------------ small screens */

@media (max-width: 620px), (pointer: coarse) {
  /* Panels become bottom sheets: a 348px panel anchored bottom-right does not
     fit a phone, and a half-offscreen menu is worse than none. */
  #jutsu-panel, #settings-panel {
    left: 10px; right: 10px; bottom: 78px;
    width: auto;
    max-height: 66dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #jutsu-btn, #settings-btn, #mute-btn { width: 50px; height: 50px; bottom: 14px; }
  #settings-btn { right: 14px; }
  #jutsu-btn { right: 72px; }
  #mute-btn { right: 130px; }

  /* the HUD ring competes with the effect for space on a small screen */
  #ring-wrap { left: 14px; bottom: 14px; width: 82px; height: 82px; }
  #ring-label { font-size: 11px; }
  #state-label { left: 14px; bottom: 104px; font-size: 10px; letter-spacing: .18em; }

  #debug-panel {
    right: 10px; left: 10px; top: 10px;
    min-width: 0;
    font-size: 9.5px; line-height: 1.45;
  }

  .screen { padding: 22px 18px; gap: 10px; }
  .screen h1 { font-size: 46px; }
  .screen h2 { font-size: 16px; }
  .screen p { font-size: 13px; }

  .jutsu { grid-template-columns: 44px 1fr; column-gap: 11px; }
  .sign-art { width: 44px; height: 44px; }
  .jutsu-text p, .jutsu-text em { font-size: 11px; }
}

/* landscape phone: very little vertical room, so trim the chrome further */
@media (pointer: coarse) and (max-height: 460px) {
  #jutsu-panel, #settings-panel { max-height: 78dvh; bottom: 66px; }
  #ring-wrap { width: 66px; height: 66px; }
  #state-label { bottom: 86px; }
}