/* FAFI – Falafel Ninja mini-game — edge invite + slice arena. */
.ninja-invite{
  position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px));
  z-index:48;width:min(220px,72vw);padding:0;border:0;background:transparent
}
.ninja-invite[hidden]{display:none}
body.has-order-dock .ninja-invite{bottom:max(150px,calc(env(safe-area-inset-bottom) + 128px))}
.ninja-invite-close{
  position:absolute;top:-6px;right:-6px;z-index:2;width:28px;height:28px;border:0;border-radius:999px;
  background:#2a2925;color:var(--menu-text,#efeee9);font-size:1rem;line-height:1;cursor:pointer
}
.ninja-invite-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:0;border:0;
  background:transparent;color:inherit;text-align:left;cursor:pointer
}
.ninja-bubble{
  position:relative;max-width:100%;padding:10px 12px;border:1px solid #e4e2dc;border-radius:16px 16px 16px 4px;
  background:#fff;color:#1c1c19;font-size:.78rem;font-weight:500;line-height:1.35;
  box-shadow:0 10px 24px rgba(0,0,0,.18)
}
.ninja-bubble::after{
  content:"";position:absolute;left:22px;bottom:-6px;width:10px;height:10px;border-right:1px solid #e4e2dc;
  border-bottom:1px solid #e4e2dc;background:#fff;transform:rotate(45deg)
}

/* Floating invite Fafi mascot */
.ninja-mascot{
  position:relative;display:grid;place-items:center;width:108px;height:96px;margin-left:2px;
  border-radius:0;background:transparent;border:0;
  animation:ninja-bob 2.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.42))
}
.ninja-mascot-art{
  display:block;width:108px;height:96px;object-fit:contain;pointer-events:none;user-select:none
}

@keyframes ninja-bob{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-7px) rotate(1.5deg)}
}
@media (prefers-reduced-motion: reduce){
  .ninja-mascot{animation:none}
}

.ninja-root{position:fixed;inset:0;z-index:80}
.ninja-root[hidden]{display:none}
.ninja-backdrop{position:absolute;inset:0;background:rgba(6,5,4,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ninja-panel{
  position:absolute;left:50%;top:50%;width:min(440px,calc(100vw - 20px));max-height:min(92vh,820px);
  display:flex;flex-direction:column;overflow:auto;overflow-x:hidden;padding:18px 16px 16px;border:1px solid rgba(212,193,160,.22);border-radius:18px;
  color:var(--menu-text,#efeee9);font-family:var(--menu-font,"Instrument Sans","Avenir Next","Segoe UI",sans-serif);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 70% 42% at 82% 38%,rgba(62,140,54,.14),transparent 58%),
    radial-gradient(ellipse 90% 48% at 50% -6%,rgba(232,199,106,.12),transparent 52%),
    radial-gradient(ellipse 80% 50% at 20% 100%,rgba(80,40,12,.35),transparent 55%),
    linear-gradient(165deg,#1a120e 0%,#0c0b0a 42%,#14100c 100%);
  box-shadow:0 28px 64px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,236,190,.08)
}
.ninja-dojo{isolation:isolate}
.ninja-x{
  position:absolute;top:10px;right:10px;z-index:5;display:grid;place-items:center;width:40px;height:40px;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(20,18,16,.78);color:inherit;font-size:1.25rem;cursor:pointer
}
.ninja-dojo-head{position:relative;flex:0 0 auto;margin:0 0 4px;padding:0 36px 6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ninja-kicker{
  margin:0 0 2px;color:rgba(255,255,255,.72);font-size:.58rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase
}
.ninja-panel h2,
.ninja-dojo-head h2{
  margin:0;font-family:var(--menu-font,"Instrument Sans","Avenir Next","Segoe UI",sans-serif);
  font-size:clamp(1.35rem,5.6vw,1.65rem);font-weight:500;letter-spacing:-.01em;line-height:1.15;
  color:var(--menu-text,#efeee9)
}
.ninja-brand-title{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0
}
.ninja-brand-wordmark{
  display:inline-block;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:clamp(1.05rem,4.2vw,1.28rem);font-weight:400;font-style:italic;
  letter-spacing:.045em;line-height:1.1;text-transform:uppercase;
  background:linear-gradient(180deg,#fff8ea 0%,#f2e6c8 52%,#e8c76a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))
}
.ninja-brand-fafi,
.ninja-brand-dash,
.ninja-brand-rest{
  font:inherit;letter-spacing:inherit;color:inherit;background:none;filter:none
}
.ninja-lead{
  margin:3px 0 0;color:rgba(210,205,196,.58);font-size:.62rem;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;max-width:42ch
}
.ninja-lobby-foot{
  position:relative;z-index:1;flex:0 0 auto;margin-top:20px;padding:0 0 max(4px,env(safe-area-inset-bottom));
  background:transparent
}
.ninja-name-label{display:block;margin:0 0 6px;color:rgba(255,255,255,.88);font-size:.76rem;letter-spacing:.02em}
/* Keep Hall of Fafi at content height so ranks 1–5 never shrink under the name/CTA foot. */
#ninja-lobby .ninja-board-wrap{flex:0 0 auto;min-height:auto;overflow:visible;padding-bottom:0;margin-bottom:0}
#ninja-lobby .ninja-hall-stage{padding-bottom:4px}
.ninja-name{
  width:100%;min-height:48px;margin:0 0 8px;padding:12px 14px;border:1px solid rgba(255,255,255,.28);
  border-radius:12px;background:rgba(10,9,8,.72);color:inherit;font:inherit
}
.ninja-name:focus-visible{outline:2px solid #e8c76a;outline-offset:2px}
.ninja-name-hint{margin:0 0 12px;color:var(--menu-gold,#d4c1a0);font-size:.78rem;line-height:1.4}
.ninja-name-hint[hidden]{display:none}
.ninja-start{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;margin-top:6px;border:1px solid rgba(255,236,180,.45);border-radius:14px;
  background:linear-gradient(180deg,#ffe089 0%,#f0c14a 42%,#c9921e 100%);
  color:#1a1208;font-size:1rem;font-weight:700;font-style:italic;letter-spacing:.01em;
  box-shadow:
    0 0 0 1px rgba(255,220,120,.25),
    0 10px 28px rgba(0,0,0,.45),
    0 0 28px rgba(240,193,74,.28),
    inset 0 1px 0 rgba(255,255,255,.55)
}
.ninja-start > span,.ninja-start-ico{position:relative;z-index:1}
.ninja-start-ico{flex:0 0 auto;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.ninja-start::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.45) 50%,transparent 66%);
  transform:translateX(-130%);pointer-events:none
}
.ninja-start:active{transform:translateY(1px)}
@media(prefers-reduced-motion:no-preference){
  .ninja-start::after{animation:ninja-cta-sheen 3.4s ease-in-out infinite}
}
@keyframes ninja-cta-sheen{
  0%,55%{transform:translateX(-130%)}
  75%,100%{transform:translateX(130%)}
}
.ninja-board-wrap{margin-top:2px;padding:0;flex:1 1 auto;min-height:0}
.ninja-hall{position:relative}
.ninja-hall-head{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:0 0 10px;padding:8px 6px 4px;text-align:center;isolation:isolate
}
.ninja-hall-head::before,
.ninja-hall-head::after{content:none}
.ninja-hall-head-compact{margin-bottom:6px;padding:4px 2px 0;gap:1px}
.ninja-hall-crown{
  position:relative;z-index:1;display:grid;place-items:center;margin-bottom:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))
}
.ninja-hall-crown-art{
  display:block;width:36px;height:auto
}
.ninja-hall-head-compact .ninja-hall-crown-art{width:28px}
.ninja-hall-title-row{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px
}
.ninja-hall-laurel{
  flex:0 0 auto;width:16px;height:22px;opacity:.75;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
  transform-origin:center
}
.ninja-hall-head-compact .ninja-hall-laurel{width:14px;height:18px}
.ninja-hall-laurel.is-flip{transform:scaleX(-1)}
.ninja-board-title{
  position:relative;z-index:2;margin:0;max-width:100%;
  font-family:"Barlow","Instrument Sans","Avenir Next","Segoe UI",sans-serif;
  font-size:clamp(1.36rem,6.2vw,1.82rem);font-weight:600;font-style:normal;
  letter-spacing:.1em;word-spacing:.55em;text-transform:uppercase;line-height:1.1;
  white-space:nowrap;color:#fff9e0
}
.ninja-hall-head-compact .ninja-board-title{font-size:clamp(1.14rem,5.4vw,1.48rem);letter-spacing:.08em;word-spacing:.45em}
.ninja-board-mark{
  position:relative;z-index:2;display:inline-block;
  color:#fff9e0;
  -webkit-text-stroke:0;
  text-shadow:0 1px 2px rgba(0,0,0,.92);
  font-family:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;font-style:inherit;
  background:none;-webkit-background-clip:border-box;background-clip:border-box
}
.ninja-board-mark::before{content:none}
.ninja-hall-top{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;margin:4px 0 0;
  color:rgba(255,240,210,.9);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.7)
}
.ninja-hall-top-line{
  display:block;width:36px;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(232,200,120,.75),transparent)
}
.ninja-hall-stage{
  position:relative;isolation:isolate;padding:28px 0 10px;overflow:visible
}
.ninja-hall-cedar{
  position:absolute;right:4px;top:8px;z-index:0;width:92px;height:120px;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 50% 30%,rgba(70,190,70,.22),transparent 70%),
    radial-gradient(ellipse 35% 55% at 50% 58%,rgba(40,140,50,.16),transparent 72%);
  filter:blur(.2px);opacity:.85
}
.ninja-hall-cedar::before{
  content:"";position:absolute;left:50%;top:18%;width:2px;height:58%;
  background:rgba(90,210,90,.35);transform:translateX(-50%);
  box-shadow:0 0 10px rgba(70,200,70,.35)
}
.ninja-hall-cedar::after{
  content:"";position:absolute;left:50%;top:14%;width:54px;height:54px;
  border:1.5px solid rgba(90,220,90,.28);border-radius:50% 50% 40% 40%;
  transform:translateX(-50%);
  box-shadow:0 0 16px rgba(60,180,60,.2),inset 0 0 12px rgba(60,180,60,.08)
}
.ninja-hall-fafi{
  position:absolute;right:-10px;top:-52px;z-index:3;width:min(158px,42%);height:auto;
  max-height:none;object-fit:contain;object-position:right top;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.58)) drop-shadow(-6px 8px 12px rgba(0,0,0,.3));
  transform:rotate(1.5deg);
  animation:ninja-hall-fafi-bob 3.2s ease-in-out infinite
}
@keyframes ninja-hall-fafi-bob{
  0%,100%{transform:rotate(1.5deg) translateY(0)}
  50%{transform:rotate(.6deg) translateY(-5px)}
}
.ninja-board{margin:0;padding:0;list-style:none;border:0}
.ninja-board-arcade{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:stretch
}
.ninja-board-arcade li,
.ninja-board-arcade .ninja-board-row{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  margin:0;padding:12px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:rgba(255,255,255,.04);font-size:.9rem;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
.ninja-board-arcade .rank{
  position:relative;display:inline-grid;place-items:center;min-width:1.85rem;height:1.85rem;padding:0;
  border:0;border-radius:8px;background:rgba(255,255,255,.06);
  color:var(--menu-muted,#aaa79e);font-weight:700;font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.02em
}
.ninja-board-arcade .rank-wreath{
  position:absolute;inset:-4px -2px;border-radius:0;pointer-events:none;
  background:center / contain no-repeat url("assets/fafi/rank-1-badge.png");
  opacity:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))
}
.ninja-board-arcade .rank-num{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.ninja-board-arcade .meta{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0
}
.ninja-board-arcade .who{
  min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--menu-text,#efeee9);font-weight:600
}
.ninja-board-arcade .pts{
  color:var(--menu-gold,#d4c1a0);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:.95rem;
  text-shadow:0 1px 2px rgba(0,0,0,.35)
}
.ninja-board-arcade .is-rank-1{
  grid-column:1 / -1;min-height:84px;padding:14px 16px;gap:12px;
  border:1.5px solid rgba(255,230,150,.75);border-radius:16px;
  background:
    linear-gradient(135deg,rgba(255,236,170,.28) 0%,rgba(212,160,40,.22) 28%,rgba(120,70,10,.35) 62%,rgba(80,45,8,.4) 100%),
    linear-gradient(180deg,#c9962a 0%,#8a5a12 100%);
  box-shadow:
    0 0 0 1px rgba(255,220,120,.45),
    0 0 14px 2px rgba(255,210,90,.55),
    0 0 36px 8px rgba(232,175,50,.5),
    0 0 64px 14px rgba(200,140,30,.28),
    0 14px 32px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,248,210,.7),
    inset 0 0 0 1px rgba(255,230,160,.22),
    inset 0 -10px 24px rgba(60,30,0,.25)
}
.ninja-board-arcade .is-rank-1 .rank{
  min-width:4.6rem;width:4.6rem;height:3.4rem;border-radius:0;background:transparent;
  color:transparent;box-shadow:none
}
.ninja-board-arcade .is-rank-1 .rank-wreath{
  inset:-6px -4px;
  background:center / contain no-repeat url("assets/fafi/rank-1-badge.png");
  filter:drop-shadow(0 0 10px rgba(255,200,80,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.4))
}
.ninja-board-arcade .is-rank-1 .who{font-size:1.05rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.4)}
.ninja-board-arcade .is-rank-1 .pts{color:#ffe7a0;font-size:1.35rem;letter-spacing:.01em;text-shadow:0 0 12px rgba(255,210,90,.35),0 2px 5px rgba(0,0,0,.5)}
.ninja-hall-stage .ninja-board-arcade .is-rank-1{padding-right:132px;min-height:96px}
.ninja-board-arcade .is-rank-2,
.ninja-board-arcade .is-rank-3{position:relative;z-index:4;min-height:68px;padding:10px 10px}
.ninja-board-arcade .is-rank-2{
  border:1.5px solid rgba(180,195,215,.42);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(160,175,195,.22) 0%,rgba(90,105,125,.32) 45%,rgba(40,48,60,.5) 100%),
    linear-gradient(180deg,#7a8798 0%,#4e5a6a 52%,#343c48 100%);
  box-shadow:
    0 0 0 1px rgba(190,205,225,.22),
    0 0 14px rgba(140,160,185,.18),
    0 8px 18px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 18px rgba(20,28,38,.35)
}
.ninja-board-arcade .is-rank-2 .rank{
  min-width:3.8rem;width:3.8rem;height:2.7rem;border-radius:0;background:transparent;
  color:transparent;box-shadow:none
}
.ninja-board-arcade .is-rank-2 .rank-wreath{
  inset:-4px -2px;
  background:center / contain no-repeat url("assets/fafi/rank-2-badge.png");
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.42))
}
.ninja-board-arcade .is-rank-2 .who{font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.4)}
.ninja-board-arcade .is-rank-2 .pts{color:#eef3fa;font-size:1.05rem;text-shadow:0 2px 4px rgba(0,0,0,.45)}
.ninja-board-arcade .is-rank-3{
  border-color:rgba(210,150,90,.45);
  background:
    linear-gradient(145deg,rgba(255,200,140,.22) 0%,rgba(170,100,45,.28) 42%,rgba(90,45,18,.45) 100%),
    linear-gradient(180deg,#b8732e 0%,#6e3a14 100%);
  box-shadow:0 0 18px rgba(190,110,45,.25),0 8px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,210,160,.3)
}
.ninja-board-arcade .is-rank-3 .rank{
  min-width:3.8rem;width:3.8rem;height:2.7rem;border-radius:0;background:transparent;
  color:transparent;box-shadow:none
}
.ninja-board-arcade .is-rank-3 .rank-wreath{
  inset:-4px -2px;
  background:center / contain no-repeat url("assets/fafi/rank-3-badge.png");
  filter:drop-shadow(0 0 8px rgba(190,110,45,.28)) drop-shadow(0 2px 5px rgba(0,0,0,.4))
}
.ninja-board-arcade .is-rank-3 .who{color:#fff0de}
.ninja-board-arcade .is-rank-3 .pts{color:#f0c48a;font-size:1.05rem}
.ninja-board-arcade .is-rank-4,
.ninja-board-arcade .is-rank-5{
  grid-column:1 / -1;min-height:48px;padding:12px 14px;gap:12px;
  border:1px solid rgba(235,215,175,.48);border-radius:11px;
  background:linear-gradient(180deg,#625c54 0%,#48443e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.28);opacity:1
}
.ninja-board-arcade .is-rank-4 .rank,
.ninja-board-arcade .is-rank-5 .rank{
  min-width:2.1rem;height:2rem;border-radius:7px;
  background:rgba(255,255,255,.16);color:#fff;font-size:.8rem;font-weight:700
}
.ninja-board-arcade .is-rank-4 .meta,
.ninja-board-arcade .is-rank-5 .meta{
  flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%
}
.ninja-board-arcade .is-rank-4 .who,
.ninja-board-arcade .is-rank-5 .who{font-weight:600;color:#fff;font-size:.92rem}
.ninja-board-arcade .is-rank-4 .pts,
.ninja-board-arcade .is-rank-5 .pts{font-size:.95rem;color:#fff;font-weight:700}
.ninja-board-arcade .is-empty{opacity:.42}
.ninja-board-arcade .is-empty .who{color:#7d7870;font-weight:400;letter-spacing:.04em}
.ninja-board-arcade .is-empty .pts{color:#6e6a62}
.ninja-board-arcade .is-you{outline:1px solid rgba(240,168,74,.45);outline-offset:0}
.ninja-board-arcade .is-you .who::after{
  content:" · du";color:#f0a84a;font-family:inherit;
  font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:lowercase
}
.ninja-board-arcade .is-pending{
  opacity:0;transform:translateY(12px)
}
.ninja-board-arcade .is-in{
  opacity:1;transform:translateY(0);
  transition:opacity 320ms ease,transform 420ms cubic-bezier(.22,1.1,.36,1)
}
@media(max-width:380px){
  .ninja-board-arcade{grid-template-columns:1fr}
  .ninja-board-arcade .is-rank-2,
  .ninja-board-arcade .is-rank-3{grid-column:1 / -1}
  .ninja-hall-fafi{width:min(132px,40%);right:-4px;top:-40px}
  .ninja-hall-stage .ninja-board-arcade .is-rank-1{padding-right:112px;min-height:88px}
  .ninja-hall-stage{padding-top:22px}
}
@media(min-width:381px) and (max-width:420px){
  .ninja-hall-fafi{width:min(148px,41%);right:-8px;top:-46px}
  .ninja-hall-stage .ninja-board-arcade .is-rank-1{padding-right:124px;min-height:92px}
}
@media(min-width:520px){
  .ninja-hall-fafi{width:min(176px,44%);right:-12px;top:-58px}
  .ninja-hall-stage .ninja-board-arcade .is-rank-1{padding-right:148px;min-height:104px}
  .ninja-hall-stage{padding-top:28px}
}

.ninja-play{position:absolute;inset:0;display:flex;flex-direction:column;background:#0c0c0b}
.ninja-play[hidden]{display:none}
.ninja-hud{
  position:relative;z-index:2;display:flex;align-items:center;gap:10px;min-height:56px;
  padding:10px 56px 10px 16px;border-bottom:1px solid #2a2925;
  background:linear-gradient(180deg,rgba(18,17,14,.96),rgba(12,12,11,.92));color:#efeee9
}
.ninja-hud-name{margin:0;min-width:0;flex:1 1 auto;font-size:.8rem;color:#a6a397;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ninja-hud-lives{display:flex;align-items:center;gap:4px;margin:0;flex:0 0 auto}
.ninja-heart{display:block;width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(220,60,60,.45));transition:opacity 160ms ease,filter 160ms ease,transform 160ms ease}
.ninja-heart.is-off{opacity:.28;filter:grayscale(1) brightness(.55);transform:scale(.92)}
.ninja-hud-score,.ninja-hud-time{margin:0;flex:0 0 auto;font-size:.84rem;font-variant-numeric:tabular-nums}
.ninja-hud strong{color:var(--menu-gold,#d4c1a0);font-weight:600}
.ninja-hud-combo{
  margin:0;flex:0 0 auto;min-width:2.2rem;padding:3px 8px;border:1px solid rgba(212,193,160,.35);
  border-radius:999px;background:rgba(212,193,160,.12);color:var(--menu-gold,#d4c1a0);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums
}
.ninja-hud-combo[hidden]{display:none}
.ninja-hud-combo.is-x2{color:#f0a84a;border-color:rgba(240,168,74,.45);background:rgba(240,168,74,.14)}
.ninja-hud-combo.is-x3{color:#ff6b4a;border-color:rgba(255,107,74,.5);background:rgba(255,107,74,.16)}
.ninja-hud-combo.is-x4{color:#c9a0ff;border-color:rgba(201,160,255,.5);background:rgba(201,160,255,.16)}
.ninja-milestone{
  position:absolute;left:50%;top:28%;z-index:4;margin:0;padding:10px 16px;
  border:1px solid rgba(212,193,160,.35);border-radius:14px;background:rgba(20,18,14,.88);
  color:var(--menu-gold,#d4c1a0);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 220ms ease,transform 220ms ease
}
.ninja-milestone.is-show{opacity:1;transform:translate(-50%,-60%)}
.ninja-milestone[hidden]{display:none}
.ninja-x-play{top:6px;right:8px}
#ninja-canvas{display:block;width:100%;flex:1 1 auto;touch-action:none;cursor:crosshair}

/* Full-bleed result / game-over arena */
.ninja-result{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:max(20px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 70% 45% at 50% 16%,rgba(212,193,160,.1),transparent 58%),
    radial-gradient(ellipse 80% 40% at 50% 100%,rgba(0,0,0,.35),transparent 55%),
    var(--menu-bg,#10100f);
  color:var(--menu-text,#efeee9);font-family:var(--menu-font,"Instrument Sans","Avenir Next","Segoe UI",sans-serif);
  overflow:auto
}
.ninja-result[hidden]{display:none}
.ninja-result.is-beat .ninja-result-beat{opacity:1;transform:translateY(0) scale(1)}
.ninja-result.is-beat .ninja-result-main{display:none}
.ninja-result.is-board .ninja-result-beat{display:none}
.ninja-result.is-board .ninja-result-main{display:block}
.ninja-result-beat{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(420px,100%);padding:0 8px 168px;text-align:center;
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity 380ms ease,transform 480ms cubic-bezier(.22,1.15,.36,1)
}
.ninja-result-outcome{
  margin:0;max-width:16ch;color:var(--menu-gold,#d4c1a0);
  font-family:var(--menu-font,"Instrument Sans","Avenir Next","Segoe UI",sans-serif);
  font-size:clamp(1.55rem,6.2vw,2.05rem);font-weight:500;
  letter-spacing:-.015em;line-height:1.12
}
.ninja-result.is-outcome-gameover .ninja-result-outcome{color:#e8b4a4}
.ninja-result.is-outcome-highscore .ninja-result-outcome,
.ninja-result.is-outcome-personal .ninja-result-outcome{color:#e8d7b4}
.ninja-result.is-outcome-top5 .ninja-result-outcome{color:var(--menu-gold,#d4c1a0)}
.ninja-result-scorebeat{
  margin:0;color:var(--menu-muted,#aaa79e);font-size:1.05rem;font-variant-numeric:tabular-nums
}
.ninja-result-scorebeat strong{color:var(--menu-text,#efeee9);font-weight:600;font-size:1.3rem}
.ninja-result-main{
  position:relative;z-index:2;width:min(400px,100%);margin:0 auto;padding:24px 18px 18px;
  border:1px solid var(--menu-line,#2d2c28);border-radius:16px;
  background:
    radial-gradient(ellipse 90% 45% at 50% -10%,rgba(212,193,160,.07),transparent 55%),
    #141311;
  box-shadow:0 22px 52px rgba(0,0,0,.45);
  animation:ninja-result-main-in 420ms cubic-bezier(.22,1.1,.36,1) both
}
.ninja-result-kicker{
  margin:0 0 8px;color:var(--menu-gold,#d4c1a0);font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase
}
.ninja-result-main h2{
  margin:0;font-family:var(--menu-font,"Instrument Sans","Avenir Next","Segoe UI",sans-serif);
  font-size:clamp(1.3rem,5.2vw,1.55rem);font-weight:500;letter-spacing:-.01em;line-height:1.15;
  color:var(--menu-text,#efeee9)
}
.ninja-result-time,.ninja-result-best{margin:0 0 8px;color:var(--menu-muted,#aaa79e);font-size:.86rem}
.ninja-result-score{margin:12px 0 8px;font-size:1.1rem;letter-spacing:.01em}
.ninja-result-score strong{color:var(--menu-gold,#d4c1a0);font-weight:600;font-variant-numeric:tabular-nums}
.ninja-result-rank{margin:0 0 14px;color:var(--menu-muted,#aaa79e);font-size:.86rem}
.ninja-board-end-wrap{margin-top:6px;padding-top:2px}
.ninja-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
@keyframes ninja-result-main-in{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* In-game Fafi mascot — decorative overlay only (play + result) */
.fafi-mascot{
  position:absolute;left:50%;bottom:max(4px,env(safe-area-inset-bottom));z-index:3;
  width:min(112px,28vw);height:auto;margin:0;padding:0;
  transform:translateX(-50%);transform-origin:50% 100%;
  pointer-events:none;user-select:none;will-change:transform;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
  animation:fafi-idle 2.8s ease-in-out infinite
}
.fafi-mascot[hidden]{display:none}
.fafi-mascot-art{
  display:block;width:100%;height:auto;aspect-ratio:656/819;object-fit:contain;object-position:center bottom;
  pointer-events:none;user-select:none
}
.fafi-mascot.is-hit{
  animation:fafi-hit .38s cubic-bezier(.22,1.35,.36,1) 1
}
.fafi-mascot.is-combo{
  animation:fafi-combo .52s cubic-bezier(.18,1.4,.32,1) 1
}
.fafi-mascot.is-gold{
  animation:fafi-gold .62s cubic-bezier(.18,1.4,.32,1) 1
}
.fafi-mascot.is-goldShawarma{
  animation:fafi-gold-shawarma .78s cubic-bezier(.16,1.45,.3,1) 1
}
.fafi-mascot.is-miss,
.fafi-mascot.is-fear{
  animation:fafi-miss .48s cubic-bezier(.33,.1,.25,1) 1
}
.fafi-mascot.is-nervous{
  animation:fafi-nervous .7s ease-in-out 1
}
.fafi-mascot.is-highscore{
  animation:fafi-highscore .9s cubic-bezier(.18,1.35,.32,1) 1
}
.fafi-mascot.is-gameover{
  animation:fafi-gameover .7s cubic-bezier(.33,.12,.2,1) 1
}
.fafi-mascot.is-result-hero{
  bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));
  width:min(220px,58vw);z-index:5;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
  animation:fafi-result-hero 1.15s cubic-bezier(.2,1.2,.36,1) 1
}
.fafi-mascot.is-result-hero.is-highscore{
  animation:fafi-result-win 1.05s cubic-bezier(.18,1.35,.32,1) 1
}
.fafi-mascot.is-result-hero.is-combo{
  animation:fafi-result-top 1s cubic-bezier(.18,1.3,.32,1) 1
}
.fafi-mascot.is-result-hero.is-gameover{
  animation:fafi-result-lose .95s cubic-bezier(.33,.12,.2,1) 1
}
.ninja-result.is-board ~ .fafi-mascot{
  width:min(96px,24vw);bottom:max(8px,env(safe-area-inset-bottom));opacity:.45;z-index:1;
  pointer-events:none
}

@keyframes fafi-idle{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-1.2deg) scale(1)}
  50%{transform:translateX(-50%) translateY(-5px) rotate(1.4deg) scale(1.015)}
}
@keyframes fafi-hit{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  35%{transform:translateX(-50%) translateY(-18px) rotate(-4deg) scale(1.04)}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
}
@keyframes fafi-combo{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  25%{transform:translateX(-50%) translateY(-28px) rotate(6deg) scale(1.08)}
  55%{transform:translateX(-50%) translateY(-10px) rotate(-5deg) scale(1.05)}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
}
@keyframes fafi-gold{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  30%{transform:translateX(-50%) translateY(-24px) rotate(-8deg) scale(1.1)}
  60%{transform:translateX(-50%) translateY(-12px) rotate(6deg) scale(1.06)}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
}
@keyframes fafi-gold-shawarma{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  20%{transform:translateX(-50%) translateY(-32px) rotate(8deg) scale(1.14)}
  45%{transform:translateX(-50%) translateY(-14px) rotate(-7deg) scale(1.08)}
  70%{transform:translateX(-50%) translateY(-22px) rotate(4deg) scale(1.1)}
  100%{transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes fafi-miss{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  40%{transform:translateX(-50%) translateY(4px) rotate(-3deg) scale(.97)}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
}
@keyframes fafi-nervous{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
  20%{transform:translateX(calc(-50% - 3px)) translateY(2px) rotate(-2deg)}
  40%{transform:translateX(calc(-50% + 3px)) translateY(0) rotate(2deg)}
  60%{transform:translateX(calc(-50% - 2px)) translateY(2px) rotate(-1deg)}
  80%{transform:translateX(calc(-50% + 2px)) translateY(0) rotate(1deg)}
}
@keyframes fafi-highscore{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
  30%{transform:translateX(-50%) translateY(-22px) rotate(4deg) scale(1.07)}
  60%{transform:translateX(-50%) translateY(-8px) rotate(-3deg) scale(1.03)}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1)}
}
@keyframes fafi-gameover{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  55%{transform:translateX(-50%) translateY(6px) scale(.96)}
  100%{transform:translateX(-50%) translateY(4px) scale(.97)}
}
@keyframes fafi-result-hero{
  0%{transform:translateX(-50%) translateY(28px) scale(.88);opacity:.35}
  55%{transform:translateX(-50%) translateY(-6px) scale(1.04);opacity:1}
  100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
}
@keyframes fafi-result-win{
  0%{transform:translateX(-50%) translateY(24px) scale(.9) rotate(0deg)}
  35%{transform:translateX(-50%) translateY(-18px) scale(1.08) rotate(4deg)}
  65%{transform:translateX(-50%) translateY(-4px) scale(1.03) rotate(-3deg)}
  100%{transform:translateX(-50%) translateY(0) scale(1) rotate(0deg)}
}
@keyframes fafi-result-top{
  0%{transform:translateX(-50%) translateY(20px) scale(.92)}
  40%{transform:translateX(-50%) translateY(-14px) scale(1.06) rotate(-4deg)}
  100%{transform:translateX(-50%) translateY(0) scale(1) rotate(0deg)}
}
@keyframes fafi-result-lose{
  0%{transform:translateX(-50%) translateY(10px) scale(.96)}
  45%{transform:translateX(-50%) translateY(8px) scale(.94) rotate(-2deg)}
  100%{transform:translateX(-50%) translateY(4px) scale(.97) rotate(0deg)}
}

.ninja-hint{
  position:absolute;left:50%;bottom:max(120px,calc(env(safe-area-inset-bottom) + 108px));z-index:2;margin:0;padding:8px 14px;
  border:1px solid #2a2925;border-radius:999px;background:rgba(28,28,25,.9);color:#a6a397;font-size:.76rem;
  transform:translateX(-50%);pointer-events:none;transition:opacity 200ms ease
}
.ninja-hint.is-dim{opacity:0}

@media(min-width:768px){
  .ninja-invite{left:max(24px,calc((100vw - 780px) / 2 - 8px))}
  .ninja-mascot{width:108px;height:120px}
  .ninja-mascot-art{width:108px;height:120px}
  .ninja-mascot-logo-badge{width:30px;height:22px}
  .fafi-mascot{width:min(132px,18vw)}
  .fafi-mascot.is-result-hero{width:min(240px,34vw)}
}
@media(prefers-reduced-motion:reduce){
  .ninja-mascot{animation:none}
  .ninja-hall-fafi{animation:none}
  .ninja-start::after{animation:none}
  .fafi-mascot,
  .fafi-mascot.is-hit,
  .fafi-mascot.is-combo,
  .fafi-mascot.is-gold,
  .fafi-mascot.is-goldShawarma,
  .fafi-mascot.is-miss,
  .fafi-mascot.is-fear,
  .fafi-mascot.is-nervous,
  .fafi-mascot.is-highscore,
  .fafi-mascot.is-gameover,
  .fafi-mascot.is-result-hero,
  .fafi-mascot.is-result-hero.is-highscore,
  .fafi-mascot.is-result-hero.is-combo,
  .fafi-mascot.is-result-hero.is-gameover{animation:none}
  .ninja-result-beat{transition:none;opacity:1;transform:none}
  .ninja-result-main{animation:none}
  .ninja-board-arcade .is-pending{opacity:1;transform:none}
  .ninja-board-arcade .is-in{transition:none}
  .ninja-heart{transition:none}
  .ninja-milestone{transition:none}
  .ninja-hint{transition:none}
}