/* WIND GAME Duel: themed background + sword battle stage (TZ3 sections 2, 4).
 * Visual only. Loaded by /pages/duel-w(.en).html and /arena/duel-training. */

/* ---- shared stage ---- */
.wgdf-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* ---- training: /arena/duel-training ---- */
body.wgdf-training .duel-stage{position:relative;isolation:isolate}
body.wgdf-training .duel-stage.wgdf-on{background:
  radial-gradient(ellipse 60% 55% at 50% 46%,transparent 40%,color-mix(in srgb,var(--wg-s0) 55%,transparent) 100%),
  url('/assets/duel-fx/bg-1600.webp?v=tz3-20261016') center 60%/cover no-repeat,
  linear-gradient(90deg,var(--wg-s3),var(--wg-s1) 50%,#4a1222)}
@media (max-width:700px){body.wgdf-training .duel-stage.wgdf-on{background:
  radial-gradient(ellipse 70% 55% at 50% 46%,transparent 40%,color-mix(in srgb,var(--wg-s0) 55%,transparent) 100%),
  url('/assets/duel-fx/bg-900.webp?v=tz3-20261016') center 60%/cover no-repeat,
  linear-gradient(90deg,var(--wg-s3),var(--wg-s1) 50%,#4a1222)}}
/* State tint over the background: signal = cold flash, result = winner's colour. */
body.wgdf-training .duel-stage.wgdf-on::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--wg-accent) 38%,transparent),transparent 62%)}
body.wgdf-training .duel-stage.wgdf-on[data-state=go]::after{opacity:1;transition-duration:.08s}
body.wgdf-training.wgdf-shown .duel-stage.wgdf-on[data-wgdf-winner=left]::after{opacity:1;background:radial-gradient(circle at 35% 45%,color-mix(in srgb,var(--wg-accent) 32%,transparent),transparent 60%)}
body.wgdf-training.wgdf-shown .duel-stage.wgdf-on[data-wgdf-winner=right]::after{opacity:1;background:radial-gradient(circle at 65% 45%,rgba(255,80,90,.3),transparent 60%)}
/* The live swords replace the static crossed-swords picture and avatars. */
body.wgdf-training .duel-stage.wgdf-on::before{display:none}
body.wgdf-training .duel-stage.wgdf-on .duel-arena{position:relative;z-index:2}
body.wgdf-training .duel-stage.wgdf-on .avatar{display:none}
body.wgdf-training .duel-stage.wgdf-on .duelist span{padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--wg-s1) 72%,transparent);border:1px solid color-mix(in srgb,var(--wg-accent-hi) 45%,transparent);color:var(--wg-text-tint);backdrop-filter:blur(4px)}
body.wgdf-training .duel-stage.wgdf-on .duelist:last-child span{border-color:rgba(255,130,120,.5);color:#ffe0da}
body.wgdf-training .duel-stage.wgdf-on .duel-stage-copy{z-index:3}
body.wgdf-training .duel-stage.wgdf-on .duel-signal{position:relative;z-index:3}
/* Result waits for the battle, then fades in. */
body.wgdf-training .duel-stage.wgdf-on .duel-stage-copy,
body.wgdf-training .duel-stage.wgdf-on .duel-signal{transition:opacity .4s ease,transform .4s ease}
body.wgdf-training.wgdf-busy .duel-stage.wgdf-on .duel-stage-copy,
body.wgdf-training.wgdf-busy .duel-stage.wgdf-on .duel-signal{opacity:0;transform:translateY(8px) scale(.97);transition:none}
body.wgdf-training.wgdf-busy #player-time,body.wgdf-training.wgdf-busy #npc-time,body.wgdf-training.wgdf-busy #feedback{opacity:0;transition:none}
body.wgdf-training #player-time,body.wgdf-training #npc-time,body.wgdf-training #feedback{transition:opacity .4s ease}
body.wgdf-training.wgdf-shown .duel-stage.wgdf-on .duel-stage-copy strong{text-shadow:0 0 22px rgba(255,220,140,.5)}
body.wgdf-training.wgdf-shown .duel-stage.wgdf-on[data-wgdf-winner=left] .duel-stage-copy span{color:var(--wg-text-tint)}
body.wgdf-training.wgdf-shown .duel-stage.wgdf-on[data-wgdf-winner=right] .duel-stage-copy span{color:#ff9d94}

/* ---- W duel: /pages/duel-w(.en).html ---- */
.wgdf-panel{margin:0 0 18px;border:1px solid var(--wg-accent-lo);border-radius:24px;overflow:hidden;background:var(--wg-s1);box-shadow:0 15px 40px color-mix(in srgb,var(--wg-s0) 30.2%,transparent)}
.wgdf-arena{position:relative;isolation:isolate;height:clamp(300px,34vw,420px);background:
  radial-gradient(ellipse 60% 55% at 50% 46%,transparent 40%,color-mix(in srgb,var(--wg-s0) 55%,transparent) 100%),
  url('/assets/duel-fx/bg-1600.webp?v=tz3-20261016') center 60%/cover no-repeat,
  linear-gradient(90deg,var(--wg-s3),var(--wg-s1) 50%,#4a1222)}
@media (max-width:700px){.wgdf-arena{background:
  radial-gradient(ellipse 70% 55% at 50% 46%,transparent 40%,color-mix(in srgb,var(--wg-s0) 55%,transparent) 100%),
  url('/assets/duel-fx/bg-900.webp?v=tz3-20261016') center 60%/cover no-repeat,
  linear-gradient(90deg,var(--wg-s3),var(--wg-s1) 50%,#4a1222)}}
.wgdf-names{position:absolute;z-index:3;left:14px;right:14px;top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.wgdf-n{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--wg-s1) 74%,transparent);border:1px solid color-mix(in srgb,var(--wg-accent-hi) 50%,transparent);color:var(--wg-text-tint);font-weight:850;font-size:13px;letter-spacing:.02em;backdrop-filter:blur(4px)}
.wgdf-r{border-color:rgba(255,130,120,.55);color:#ffe0da}
.wgdf-vs{font-weight:950;font-size:15px;letter-spacing:.12em;color:#fff3cf;text-shadow:0 0 14px rgba(255,200,110,.7)}
.wgdf-moves{position:absolute;z-index:3;left:0;right:0;bottom:14px;display:flex;justify-content:space-between;padding:0 18px;pointer-events:none}
.wgdf-moves b{min-width:0;padding:5px 11px;border-radius:10px;background:color-mix(in srgb,var(--wg-s1) 70%,transparent);font-size:13px;letter-spacing:.06em;color:var(--wg-text-tint);opacity:0;transition:opacity .35s ease}
.wgdf-moves b.wgdf-mr{color:#ffd2cc}
.wgdf-arena[data-mode=done] .wgdf-moves b:not(:empty){opacity:1}
.wgdf-result{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-30%) scale(.94);opacity:0;pointer-events:none;display:grid;justify-items:center;gap:4px;padding:12px 20px 13px;border-radius:18px;text-align:center;max-width:calc(100% - 28px);
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,236,160,.2),color-mix(in srgb,var(--wg-s1) 88%,transparent) 64%);border:1px solid rgba(255,214,120,.5);box-shadow:0 12px 34px rgba(0,0,0,.5);transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.4,.4,1)}
.wgdf-result strong{font-size:clamp(22px,4.4vw,36px);font-weight:950;letter-spacing:-.02em;color:#fff4cf;text-shadow:0 0 18px rgba(255,200,90,.55)}
.wgdf-result span{font-size:13px;font-weight:750;color:var(--wg-text-tint)}
.wgdf-arena[data-mode=done] .wgdf-result{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wgdf-arena[data-result=loss] .wgdf-result{border-color:rgba(255,120,120,.5);background:radial-gradient(120% 140% at 50% 0%,rgba(255,120,120,.18),color-mix(in srgb,var(--wg-s1) 88%,transparent) 64%)}
.wgdf-arena[data-result=loss] .wgdf-result strong{color:#ffd6d0;text-shadow:0 0 18px rgba(255,90,90,.45)}
.wgdf-arena[data-result=draw] .wgdf-result{border-color:color-mix(in srgb,var(--wg-accent-pale) 50%,transparent);background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--wg-accent) 16%,transparent),color-mix(in srgb,var(--wg-s1) 88%,transparent) 64%)}
.wgdf-arena[data-result=draw] .wgdf-result strong{color:var(--wg-text-tint);text-shadow:0 0 18px color-mix(in srgb,var(--wg-accent-hi) 45%,transparent)}
.wgdf-status{position:absolute;z-index:3;left:50%;top:54px;transform:translateX(-50%);padding:5px 12px;border-radius:10px;background:color-mix(in srgb,var(--wg-s1) 60%,transparent);margin:0;max-width:min(560px,calc(100% - 28px));text-align:center;font-size:13px;font-weight:700;color:var(--wg-text-tint);text-shadow:0 1px 6px #000;pointer-events:none}
.wgdf-status:empty{display:none}
.wgdf-arena[data-mode=done] .wgdf-status{opacity:.85;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none}
.wgdf-arena[data-mode=prep] .wgdf-vs{animation:wgdf-pulse 1.1s ease-in-out infinite}
@keyframes wgdf-pulse{50%{opacity:.55;transform:scale(1.12)}}
.wgdf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--wg-accent-deep);background:linear-gradient(145deg,var(--wg-s3),var(--wg-s2))}
.wgdf-hint{font-size:13px;color:var(--wg-text-tint);line-height:1.4}
.wgdf-replay{flex:none;min-height:40px;padding:0 14px;border-radius:11px;border:1px solid var(--wg-accent);background:var(--wg-s3);color:var(--wg-text-tint);font-weight:800}
.wgdf-replay:hover:not(:disabled),.wgdf-replay:focus-visible{background:var(--wg-s5)}
.wgdf-replay:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:620px){
  body.wgdf-wpage main .hero img{display:none}
  .wgdf-panel{border-radius:18px}
  .wgdf-arena{height:clamp(270px,78vw,330px)}
  .wgdf-n{font-size:12px;padding:6px 9px}
  .wgdf-bar{flex-wrap:wrap;padding:10px 12px}
  .wgdf-hint{font-size:12px}
  .wgdf-replay{min-height:44px}
  .wgdf-result{max-width:58%;padding:9px 12px 10px}
  .wgdf-result strong{font-size:20px}
  .wgdf-result span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .wgdf-result,.wgdf-moves b,body.wgdf-training .duel-stage.wgdf-on .duel-stage-copy,body.wgdf-training .duel-stage.wgdf-on .duel-signal{transition-duration:.2s;transform:none!important}
  .wgdf-arena[data-mode=done] .wgdf-result{transform:translate(-50%,-50%)!important}
  .wgdf-result{transform:translate(-50%,-50%)!important}
  .wgdf-arena[data-mode=prep] .wgdf-vs{animation:none}
}
/* Light theme (group 1, item 12): the battle scene keeps its night art; its frame and bar follow the page. */
html[data-theme="light"] .wgdf-panel{border-color:var(--wg-pale-2);background:#ffffff;box-shadow:0 12px 30px color-mix(in srgb,var(--wg-s4) 12.2%,transparent)}
html[data-theme="light"] .wgdf-bar{border-top-color:var(--wg-pale-2);background:linear-gradient(145deg,#ffffff,var(--wg-pale));color:var(--wg-s2)}
html[data-theme="light"] .wgdf-bar .wgdf-status,html[data-theme="light"] .wgdf-bar span,html[data-theme="light"] .wgdf-bar p{color:var(--wg-accent-lo)}
html[data-theme="light"] .wgdf-replay{background:#ffffff;color:var(--wg-accent-lo);border-color:var(--wg-accent-hi)}
html[data-theme="light"] .wgdf-hint{color:var(--wg-accent-lo)}