/* SPEC: 2025-10-13d sha=9fd2a1b */
/* TriFront handover recap styles (20251029-c)
   - ローカル受け渡しモーダル内リキャップの見た目
   - 勝点/累計の表示はなし。各レーンの上下数値の中央に WIN/DRAW/LOSE を表示する。
   - WIN/LOSE は白固定。勝者側の色で枠をやわらかく発光。 */

:root{
  --ho-line:#2b3442;
  --ho-panel:#0f141a;
  --ho-fg:#e6edf3;
  --ho-mut:#9fb0c2;
  --ho-accent:#7dd3fc;
  --ho-danger:#fda4a4;
  --ho-draw:#cfe0f5;
}

.ho-recap{
  margin:10px 0 12px;
  padding:12px;
  border:1px solid var(--ho-line);
  border-radius:12px;
  background:var(--ho-panel);
  color:var(--ho-fg);
}

.ho-title{
  font-weight:900;
  letter-spacing:.2px;
  margin:0 0 8px;
  font-size:16px;
  color:var(--ho-fg);
}

.ho-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.ho-lane{
  position:relative;
  border:1px dashed var(--ho-line);
  border-radius:12px;
  padding:26px 8px 24px;
  background:#0e141a;
  min-height:120px;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

/* 3-stage reveal (left -> center -> right) */
.ho-lane.ho-off{ opacity:0; transform: translateY(6px); }
.ho-lane.ho-on{ opacity:1; transform: translateY(0); }

.ho-lab{
  position:absolute;
  top:6px; left:8px;
  font-size:12px;
  color:var(--ho-mut);
}

.ho-vcol{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ho-vcol .t, .ho-vcol .b{
  font:900 22px/1 ui-rounded, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ho-vcol .sep{
  width:56px; height:2px; border-radius:2px;
  background:var(--ho-line);
  opacity:.9;
}

/* 中央 verdict ラベル(WIN/LOSE は白固定) */
.ho-mid{
  position:absolute;
  left:8px; right:8px;
  top:50%; transform:translateY(-50%);
  text-align:center;
  font:900 18px/1 ui-rounded, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing:.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:.95;
}
.ho-mid.win{  color: var(--ho-fg); }
.ho-mid.lose{ color: var(--ho-fg); }
.ho-mid.draw{ color: var(--ho-draw); }

/* 勝者カラーでやわらかく発光。DRAW はそのまま */
.ho-lane.win-p0{
  border-color: color-mix(in srgb, var(--p0-glow, var(--ho-accent)) 60%, var(--ho-line));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--p0-glow, var(--ho-accent)) 55%, transparent) inset,
    0 0 18px 2px color-mix(in srgb, var(--p0-glow, var(--ho-accent)) 45%, transparent);
}
.ho-lane.win-p1{
  border-color: color-mix(in srgb, var(--p1-glow, var(--ho-danger)) 60%, var(--ho-line));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--p1-glow, var(--ho-danger)) 55%, transparent) inset,
    0 0 18px 2px color-mix(in srgb, var(--p1-glow, var(--ho-danger)) 45%, transparent);
}
.ho-lane.draw{
  border-color: var(--ho-line);
  box-shadow: none;
}

/* 小画面調整 */
@media (max-width:480px){
  .ho-vcol .t, .ho-vcol .b{ font-size:20px; }
  .ho-mid{ font-size:16px; }
}


/* ================================
 * Juice: verdict pop + recap shimmer
 * ================================ */
@keyframes trfVerdictPulse{
  0%{ opacity:0; text-shadow:0 0 0 rgba(0,0,0,0); letter-spacing:2px; }
  60%{ opacity:1; text-shadow:0 4px 16px rgba(0,0,0,.55); letter-spacing:.6px; }
  100%{ opacity:.95; text-shadow:0 2px 8px rgba(0,0,0,.35); letter-spacing:.5px; }
}
@keyframes trfRecapGlow{
  0%{ box-shadow:0 0 0 rgba(0,0,0,0); }
  50%{ box-shadow:0 0 22px rgba(255,255,255,.10); }
  100%{ box-shadow:0 0 0 rgba(0,0,0,0); }
}

/* Modal open: play once */
.ho-mid{ animation: trfVerdictPulse .28s ease-out 1; }
.ho-recap{ animation: trfRecapGlow .55s ease-out 1; }


/* ===== Juice: shake + particles (20260222) ===== */
.ho-lane{ position:relative; overflow:hidden; }
#handover.ho-shake{ animation:hoShakeWin .22s ease-out 1; }
@keyframes hoShakeWin{
  0%{ transform:translateY(0); }
  30%{ transform:translateY(6px); }
  60%{ transform:translateY(-2px); }
  100%{ transform:translateY(0); }
}
.ho-pfx{ position:absolute; inset:0; pointer-events:none; }
.ho-pfx::before{
  content:"";
  position:absolute;
  left:50%;
  top:65%;
  width:5px;
  height:5px;
  border-radius:50%;
  opacity:.95;
  transform:translateX(-50%);
  animation:hoPfxFloat .65s ease-out forwards;
  box-shadow:
    -22px  6px 0 0 currentColor,
    -10px -6px 0 0 currentColor,
      0px 10px 0 0 currentColor,
     10px -8px 0 0 currentColor,
     22px  4px 0 0 currentColor,
     -6px  -14px 0 0 currentColor,
      6px  -16px 0 0 currentColor;
}
@keyframes hoPfxFloat{
  0%{ transform:translateX(-50%) translateY(0) scale(.95); opacity:.95; filter:blur(0px); }
  100%{ transform:translateX(-50%) translateY(-26px) scale(1.15); opacity:0; filter:blur(0.5px); }
}
.ho-gold{ color:rgba(255, 200, 90, .95); }
.ho-ash{ color:rgba(190, 200, 210, .85); }