/* =====================================================================
   fencing.css - THE PISTE. Rough-draft duel UI: referee line, big
   direction buttons, cards. Steel blues from the room theme.
   ===================================================================== */

/* a piste stripe behind the game */
.piste-game{
  position:relative; overflow:hidden; text-align:center;
}
.piste-game::before{
  content:""; position:absolute; inset:auto 0 0 0; height:10px;
  background:repeating-linear-gradient(90deg,
    var(--accent2) 0 40px, transparent 40px 48px);
  opacity:.35;
}

/* ---- the strip: two fencers acting out each exchange ---------------- */
.piste-strip{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  height:74px; margin:2px 0 10px; padding:0 8%;
  background:linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--accent2) 14%, transparent) 47%, transparent 62%);
  user-select:none;
}
.strip-mid{
  position:absolute; left:50%; top:12%; bottom:12%; width:2px;
  background:repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
}
/* fencers drawn in CSS: a masked head, a lunging body, a blade */
.fencer{
  position:relative; width:46px; height:52px; display:inline-block;
  transition:transform .14s ease;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));
  --suit:#e8edf5; --blade:#cfd8e6;
}
.fencer::before{               /* head + torso */
  content:""; position:absolute; left:6px; top:4px;
  width:19px; height:19px; border-radius:50% 46% 46% 50%;
  background:var(--suit);
  box-shadow:0 20px 0 -2px var(--suit), 2px 34px 0 -6px var(--suit);
}
.fencer::after{                /* extended arm + blade */
  content:""; position:absolute; left:22px; top:22px;
  width:24px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--suit) 0 6px, var(--blade) 6px);
}
.fencer.machine{ transform:scaleX(-1); --suit:#7fb2d9; --blade:#9fd0ef; }
.fencer.you.lunge{ animation:lungeL .5s ease; }
.fencer.machine.lunge{ animation:lungeR .5s ease; }
@keyframes lungeL{ 35%{ transform:translateX(-46px) rotate(-8deg) } }
@keyframes lungeR{ 35%{ transform:scaleX(-1) translateX(-46px) rotate(-8deg) } }
.fencer.you.hit{ animation:stungL .5s ease; }
.fencer.machine.hit{ animation:stungR .5s ease; }
@keyframes stungL{ 30%{ transform:translateX(14px) rotate(14deg); filter:drop-shadow(0 0 10px var(--down)) } }
@keyframes stungR{ 30%{ transform:scaleX(-1) translateX(14px) rotate(14deg); filter:hue-rotate(140deg) drop-shadow(0 0 10px var(--down)) } }
.fencer.you.salute{ animation:saluteL 1.4s ease; }
.fencer.machine.salute{ animation:saluteR 1.4s ease; }
@keyframes saluteL{ 30%,60%{ transform:rotate(-22deg) translateY(-6px) } }
@keyframes saluteR{ 30%,60%{ transform:scaleX(-1) rotate(-22deg) translateY(-6px) } }
.piste-strip.clash::after{
  content:"✦"; position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  font-size:30px; color:#fff; text-shadow:0 0 14px var(--accent2), 0 0 30px #fff;
  animation:clashPop .45s ease forwards;
}
@keyframes clashPop{ 0%{ opacity:0; scale:.4 } 30%{ opacity:1; scale:1.3 } 100%{ opacity:0; scale:.8 } }

.ref-line{
  font-family:var(--font-pixel); font-size:clamp(18px, 4vw, 26px);
  letter-spacing:2px; min-height:1.5em; margin:6px 0 4px; color:var(--ink);
}
.ref-line.feint{ color:var(--warn); font-style:italic; }
.ref-line.allez{ color:var(--accent2); animation:allezFlash .25s steps(2) 3; }
@keyframes allezFlash{ 50%{ opacity:.3 } }
.ref-line.good{ color:var(--ok); }
.ref-line.bad{ color:var(--down); }
.ref-line.card-y{ color:var(--warn); }
.ref-line.card-y::after{ content:" ▮"; color:var(--warn); }
.ref-line.card-r{ color:var(--down); }
.ref-line.card-r::after{ content:" ▮"; color:var(--down); }

.fence-msg{
  font-family:var(--font-term); font-size:19px; color:var(--muted);
  min-height:1.4em; margin:0 0 10px;
}

.dir-row{ display:flex; gap:14px; justify-content:center; margin:14px 0; }
.dir-btn{
  width:86px; height:86px; font-size:40px; line-height:1;
  color:var(--ink); background:var(--bg3);
  border:2px solid var(--line); border-radius:14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:transform .08s, border-color .12s, box-shadow .12s;
  touch-action:manipulation; user-select:none;
}
.dir-btn small{ font-family:var(--font-pixel); font-size:9px; color:var(--muted); }
.dir-btn:active{ transform:scale(.94); }
.dir-btn.target{
  border-color:var(--accent2);
  box-shadow:0 0 22px color-mix(in srgb, var(--accent2) 60%, transparent);
}

.duel-hud{
  font-family:var(--font-term); font-size:18px; color:var(--muted);
  border-top:1px dashed var(--line); padding-top:10px; margin-top:6px;
  white-space:pre-wrap;
}

.weapon-row{
  display:flex; gap:8px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin:10px 0 4px;
}
.weapon-row label{
  font-family:var(--font-pixel); font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer;
}
.weapon-row input{ position:absolute; opacity:0; pointer-events:none; }
.weapon-row input:checked + span{ color:var(--accent2); }
.weapon-row label:has(input:checked){
  border-color:var(--accent2); color:var(--accent2);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent2) 35%, transparent);
}
#bout-start{
  font-family:var(--font-pixel); font-size:13px; letter-spacing:1px;
  color:var(--bg); background:var(--accent2); border:0; border-radius:10px;
  padding:12px 22px; cursor:pointer; margin:8px 0 2px;
  transition:transform .12s, filter .12s;
}
#bout-start:hover{ transform:translateY(-2px); filter:brightness(1.1); }

@media (max-width:560px){
  .dir-row{ gap:10px; }
  .dir-btn{ width:31%; height:76px; font-size:34px; }
}