/* =========================================================================
 *  THE BEAN DOJO — styles
 * ========================================================================= */
:root {
  --ink: #1a1208;
  --paper: #f4e9d4;
  --paper-2: #e8d8b8;
  --gold: #e8b04b;
  --crimson: #c0392b;
  --wood: #5a3d22;
  --shadow: rgba(0, 0, 0, .45);
  --r: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #3a2a1d 0%, #1a1208 55%, #0d0904 100%);
  color: var(--paper);
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* floating embers */
.atmos {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(232,176,75,.7), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(232,176,75,.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(192,57,43,.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(232,176,75,.4), transparent);
  background-size: 700px 700px, 600px 600px, 500px 500px, 800px 800px;
  animation: drift 26s linear infinite;
  opacity: .8;
}
@keyframes drift { to { background-position: 0 -700px, 0 600px, 0 -500px, 0 800px; } }

/* ------------------------------- masthead ------------------------------- */
.masthead {
  position: relative; z-index: 1;
  text-align: center;
  padding: 28px 16px 10px;
}
.kanji-stamp {
  font-family: "Noto Sans JP", serif; font-weight: 900;
  font-size: 46px; line-height: 1; color: var(--crimson);
  display: inline-block; border: 3px solid var(--crimson);
  border-radius: 10px; padding: 6px 8px; transform: rotate(-4deg);
  background: rgba(244,233,212,.06);
  box-shadow: 0 0 18px rgba(192,57,43,.35);
  letter-spacing: -2px;
}
.kanji-stamp span { display: inline-block; }
.dojo-name {
  font-family: "Bangers", cursive; letter-spacing: 2px;
  font-size: clamp(34px, 9vw, 64px);
  margin: 10px 0 2px;
  color: var(--gold);
  text-shadow: 0 2px 0 #7a4d12, 0 0 24px rgba(232,176,75,.45);
}
.tagline { margin: 0 0 12px; color: var(--paper-2); font-size: 15px; opacity: .9; }

.countdown {
  display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35); border: 1px solid rgba(232,176,75,.3);
  border-radius: 999px; padding: 8px 16px; font-size: 14px;
}
.cd-prefix { color: var(--paper-2); opacity: .85; margin-right: 4px; }
.countdown b {
  font-variant-numeric: tabular-nums; font-weight: 900; color: var(--gold);
  font-size: 18px;
}
.countdown b i { font-style: normal; font-size: 11px; opacity: .7; margin-left: 1px; }
.countdown .closed { color: var(--gold); font-weight: 700; }

/* -------------------------------- arenas -------------------------------- */
main {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto; padding: 8px 14px 24px;
  display: grid; gap: 26px;
}
.loading { text-align: center; padding: 40px; color: var(--paper-2); opacity: .7; }

.arena {
  background: linear-gradient(180deg, rgba(244,233,212,.05), rgba(0,0,0,.25));
  border: 1px solid rgba(232,176,75,.25);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.arena-head { text-align: center; padding: 14px 12px 4px; }
.arena-head h2 {
  font-family: "Bangers", cursive; letter-spacing: 1.5px;
  font-size: 30px; margin: 0; color: var(--paper);
}
.arena-sub { margin: 2px 0 0; color: var(--gold); font-size: 14px; font-weight: 700; }
.house-badge {
  display: inline-block; margin: 8px 0 0; font-size: 12px; color: var(--paper-2);
  background: rgba(0,0,0,.35); border: 1px solid rgba(232,176,75,.25);
  border-radius: 999px; padding: 4px 12px;
}
.house-badge b { color: var(--paper); }

.scene { line-height: 0; }
.dojo { width: 100%; height: auto; display: block; }

/* tug-of-war bar */
.bar {
  position: relative; height: 22px; margin: 0;
  display: flex; align-items: stretch;
  background: #000; overflow: hidden;
  border-top: 2px solid rgba(0,0,0,.5);
}
.bar-fill { height: 100%; transition: width .7s cubic-bezier(.34,1.4,.5,1); }
.bar-knot {
  position: absolute; top: -3px; width: 4px; height: 28px;
  background: #fff; box-shadow: 0 0 8px #fff;
  transform: translateX(-50%);
  transition: left .7s cubic-bezier(.34,1.4,.5,1);
}
.bar-label {
  position: absolute; top: 1px; font-size: 12px; font-weight: 900;
  color: #fff; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums;
}
.champ-label { left: 8px; }
.chall-label { right: 8px; }

/* fighter pick buttons */
.fighters { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(232,176,75,.2); }
.pick {
  --c: #888;
  appearance: none; border: 0; cursor: pointer; text-align: left;
  background: rgba(13,9,4,.85); color: var(--paper);
  padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 3px;
  position: relative; transition: background .2s, transform .1s;
  border-top: 4px solid var(--c);
}
.pick:active { transform: scale(.985); }
.pick:hover { background: rgba(40,28,16,.95); }
.pick .rank {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c); font-weight: 700;
}
.pick .name { font-family: "Bangers", cursive; font-size: 22px; letter-spacing: .5px; line-height: 1.05; }
.pick .notes { font-size: 12px; color: var(--paper-2); opacity: .85; min-height: 30px; }
.pick .votes { font-weight: 900; font-size: 15px; color: var(--gold); margin-top: 4px; }
.pick .cta {
  margin-top: 6px; font-size: 12px; font-weight: 700;
  color: var(--c); filter: brightness(1.4);
}
.pick.chosen {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, #0d0904), rgba(13,9,4,.9));
  box-shadow: inset 0 0 0 2px var(--c), inset 0 0 22px color-mix(in srgb, var(--c) 35%, transparent);
}
.pick.chosen .name { text-shadow: 0 0 12px var(--c); }

/* -------------------------------- footer -------------------------------- */
.footer {
  position: relative; z-index: 1; text-align: center;
  padding: 8px 16px 40px; color: var(--paper-2);
}
.footer p { margin: 4px 0; font-size: 13px; opacity: .8; }
.footer .totals { color: var(--gold); font-weight: 700; opacity: 1; }
.is-closed .pick { filter: grayscale(.4) brightness(.85); }

/* --------------------------------- toast -------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 120%);
  background: var(--gold); color: #2a1c10; font-weight: 900;
  padding: 12px 22px; border-radius: 999px; z-index: 50;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); font-size: 15px;
  transition: transform .35s cubic-bezier(.34,1.5,.5,1); max-width: 90vw; text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* ============================ SVG fighter art =========================== */
.dojo .sun { animation: pulse 6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .8; transform: scale(1.04); } }
.dojo .sun-rays { transform-origin: 210px 120px; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-kanji {
  font-family: "Noto Sans JP", serif; font-weight: 900; font-size: 20px;
  fill: #e8d8b8; text-anchor: middle;
}
.scroll rect { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

.cup { fill: var(--paper); stroke: #2a1c10; stroke-width: 3.5; stroke-linejoin: round; }
.crema { fill: #6f4e37; stroke: #2a1c10; stroke-width: 3; }
.foot { fill: #2a1c10; }
.shadow { fill: rgba(0,0,0,.4); }
.belt, .belt-knot { stroke: #2a1c10; stroke-width: 2; }
.band { stroke: #2a1c10; stroke-width: 2; }
.band-tail { stroke: #2a1c10; stroke-width: 2; transform-origin: 84px 64px; animation: flutter 1.6s ease-in-out infinite; }
@keyframes flutter { 50% { transform: rotate(8deg) scaleX(1.1); } }

.face .eye { fill: #2a1c10; }
.face .eye-shine { fill: #fff; }
.face .brow { stroke: #2a1c10; stroke-width: 3.5; stroke-linecap: round; fill: none; }
.face .mouth { stroke: #2a1c10; stroke-width: 3; fill: none; stroke-linecap: round; }
.face .mouth.open { fill: #7a2018; }
.face .sweat { fill: #6fb7e8; stroke: #2a6f9e; stroke-width: 1; }
.face .ko-eye { stroke: #2a1c10; stroke-width: 3.5; stroke-linecap: round; }

.arm { stroke: var(--paper); stroke-width: 9; stroke-linecap: round; fill: none;
       /* arm colour follows cup */ }
.fist { stroke: #2a1c10; stroke-width: 0; }
.fist-ring { fill: none; stroke: #2a1c10; stroke-width: 3; }

/* aura behind fighter */
.aura { opacity: 0; }
.aura.faint { opacity: .12; filter: blur(8px); }
.aura { opacity: .35; filter: blur(10px); animation: auraPulse 2.2s ease-in-out infinite; }
.aura.faint { animation: none; }
.aura.big { opacity: .6; filter: blur(14px); transform-box: fill-box; transform-origin: center;
            animation: auraPulse 1.4s ease-in-out infinite; }
@keyframes auraPulse { 50% { opacity: .15; } }

/* ki energy lines */
.ki path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round;
           animation: kiRise .8s ease-out infinite; }
@keyframes kiRise { from { opacity: 1; transform: translateY(4px); } to { opacity: .2; transform: translateY(-6px); } }
.steam path { fill: none; stroke: #cbb89a; stroke-width: 3; stroke-linecap: round; opacity: .5;
              animation: kiRise 2.4s ease-in-out infinite; }

/* stance-level motion */
.fighter { transform-box: fill-box; transform-origin: 55px 150px; }
.fighter.ready { animation: bob 3s ease-in-out infinite; }
.fighter.winning { animation: bobFast 1.1s ease-in-out infinite; }
.fighter.losing { animation: stagger 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes bobFast { 50% { transform: translateY(-6px) scale(1.03); } }
@keyframes stagger { 30% { transform: translateX(-4px) rotate(-1deg); } 70% { transform: translateX(2px); } }
.fist.punch { animation: jab .9s ease-in-out infinite; }
@keyframes jab { 50% { transform: translateX(6px); } }
.fist.push { animation: shove 1s ease-in-out infinite; }
@keyframes shove { 50% { transform: translateX(-4px); } }

/* clash sparks in the middle */
.clash path { fill: var(--gold); stroke: #fff; stroke-width: 1.5;
              transform-box: fill-box; transform-origin: center;
              animation: clashFlash .5s steps(2) infinite; filter: drop-shadow(0 0 6px var(--gold)); }
@keyframes clashFlash { 50% { transform: scale(.8) rotate(20deg); opacity: .7; } }

/* rotate-variant: spinning refresh ring + carousel of guest ghosts */
.rotor { transform-box: fill-box; transform-origin: center; animation: spin 7s linear infinite; }
.rotor.fast { animation-duration: 1.6s; }
.rotor-arc { fill: none; stroke-width: 4; stroke-linecap: round; }
.rotor-head { stroke: none; }
.ghost { transform-box: fill-box; transform-origin: center; animation: bob 3.4s ease-in-out infinite; }

.ko-stars text { fill: var(--gold); font-size: 14px; animation: spinStars 2s linear infinite;
                 transform-box: fill-box; transform-origin: center; }
@keyframes spinStars { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}