/* Duck-gate — human-verification overlay shown once per session before a free
   scorekeeper game. Everything is namespaced .dkg-* and scoped under #dkg-gate so
   it cannot leak into (or inherit from) the scoreboard behind it. The board renders
   underneath; on "verify" the overlay is removed and the board (with the user's
   session + game state already loaded) becomes live. Logic: public/js/score-keeper/duck-gate.js */

#dkg-gate{
  position:fixed;inset:0;z-index:100000;overflow:hidden;
  font-family:"Nunito",system-ui,sans-serif;color:#20303f;line-height:1.5;
  /* Translucent so the board the visitor just configured reads through — it must
     be obvious a scoreboard is waiting, not that the duck is the whole page.
     Deliberately NO backdrop-filter: a full-viewport blur is expensive to
     composite and made the board harder to recognise, which is the opposite of
     the point. A flat wash is free and shows more. */
  background:linear-gradient(180deg,rgba(143,208,255,.70) 0%,rgba(215,240,255,.68) 55%,rgba(244,251,255,.72) 100%);
  -webkit-font-smoothing:antialiased;
}
#dkg-gate[hidden]{display:none}
#dkg-gate *{box-sizing:border-box;margin:0;padding:0}
#dkg-gate button{font:inherit;cursor:pointer}

#dkg-gate .dkg-cloud{position:absolute;background:#fff;border-radius:100px;opacity:.85}
#dkg-gate .dkg-cloud::before,#dkg-gate .dkg-cloud::after{content:"";position:absolute;background:#fff;border-radius:100px}
#dkg-gate .dkg-c1{width:150px;height:44px;top:14%;left:-200px;animation:dkg-drift 38s linear infinite}
#dkg-gate .dkg-c1::before{width:70px;height:70px;top:-30px;left:26px}
#dkg-gate .dkg-c1::after{width:56px;height:56px;top:-22px;left:80px}
#dkg-gate .dkg-c2{width:110px;height:34px;top:30%;left:-160px;animation:dkg-drift 52s linear infinite;animation-delay:-12s;opacity:.7}
#dkg-gate .dkg-c2::before{width:52px;height:52px;top:-24px;left:18px}
#dkg-gate .dkg-c2::after{width:44px;height:44px;top:-16px;left:60px}
#dkg-gate .dkg-c3{width:190px;height:52px;top:62%;left:-240px;animation:dkg-drift 64s linear infinite;animation-delay:-30s;opacity:.6}
#dkg-gate .dkg-c3::before{width:82px;height:82px;top:-36px;left:34px}
#dkg-gate .dkg-c3::after{width:64px;height:64px;top:-26px;left:96px}
@keyframes dkg-drift{to{transform:translateX(calc(100vw + 300px))}}

#dkg-gate .dkg-hud{position:absolute;top:0;left:0;right:0;padding:20px clamp(14px,4vw,30px);display:flex;justify-content:space-between;align-items:flex-start;gap:14px;z-index:20;pointer-events:none}
/* The wash is translucent now, so the site header shows through underneath this
   label — give it the same card backing as the aura readout instead of bare
   dark text landing on top of the nav. */
#dkg-gate .dkg-title{font-weight:700;font-size:15px;color:#20303f;background:rgba(255,255,255,.85);border:1px solid #e2edf4;border-radius:14px;padding:9px 14px;box-shadow:0 6px 18px rgba(32,48,63,.12)}
#dkg-gate .dkg-title small{display:block;font-weight:600;font-size:11.5px;color:#4d6274;letter-spacing:.06em;text-transform:uppercase}
#dkg-gate .dkg-aura{background:rgba(255,255,255,.82);border:1px solid #e2edf4;border-radius:14px;padding:10px 14px;min-width:186px;box-shadow:0 6px 18px rgba(32,48,63,.12)}
#dkg-gate .dkg-aura .dkg-lab{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4d6274}
#dkg-gate .dkg-aura .dkg-val{font-weight:800}
#dkg-gate .dkg-aura .dkg-rank{font-size:12.5px;font-weight:700;margin-top:2px}
#dkg-gate .dkg-meter{height:9px;border-radius:6px;background:linear-gradient(90deg,#e23b3b 0%,#f0f0f0 50%,#159b8a 100%);position:relative;margin-top:8px}
#dkg-gate .dkg-meter .dkg-mid{position:absolute;left:50%;top:-2px;width:2px;height:13px;background:rgba(32,48,63,.35);transform:translateX(-50%)}
#dkg-gate .dkg-meter .dkg-knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #20303f;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.34,1.56,.64,1);left:50%}

#dkg-gate .dkg-banner{position:absolute;top:92px;left:50%;transform:translateX(-50%);text-align:center;z-index:15;pointer-events:none;width:min(92vw,640px)}
#dkg-gate .dkg-banner h1{font-family:"Fredoka","Nunito",sans-serif;font-weight:700;font-size:clamp(26px,5.4vw,44px);line-height:1.05;color:#20303f;text-shadow:0 2px 0 rgba(255,255,255,.85),0 0 14px rgba(255,255,255,.9)}
#dkg-gate .dkg-banner p{font-weight:700;font-size:clamp(15px,2.6vw,19px);color:#3d5567;margin-top:8px;text-shadow:0 1px 0 rgba(255,255,255,.85),0 0 10px rgba(255,255,255,.9)}

#dkg-gate .dkg-duck{position:absolute;top:40%;left:-140px;width:104px;height:88px;z-index:12;cursor:crosshair;will-change:transform;filter:drop-shadow(0 10px 10px rgba(32,48,63,.18))}
#dkg-gate .dkg-duck svg{width:100%;height:100%;display:block;pointer-events:none}
#dkg-gate .dkg-wing{transform-origin:52px 40px;animation:dkg-flap .28s ease-in-out infinite}
@keyframes dkg-flap{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(24deg)}}
#dkg-gate.dkg-flying{cursor:crosshair}

#dkg-gate .dkg-reticle{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:14;pointer-events:none;opacity:0;transition:opacity .2s}
#dkg-gate .dkg-reticle::before,#dkg-gate .dkg-reticle::after{content:"";position:absolute;background:rgba(226,59,59,.85)}
#dkg-gate .dkg-reticle::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#dkg-gate .dkg-reticle::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
#dkg-gate .dkg-reticle b{position:absolute;inset:6px;border:2px solid rgba(226,59,59,.85);border-radius:50%}

#dkg-gate .dkg-boom{position:absolute;z-index:16;pointer-events:none}
#dkg-gate .dkg-feather{position:absolute;width:14px;height:14px;left:0;top:0;border-radius:60% 60% 60% 0;background:#ffd23f;will-change:transform,opacity}
#dkg-gate .dkg-flash{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ff8c42 40%,rgba(255,140,66,0) 70%);animation:dkg-flash .5s ease-out forwards}
@keyframes dkg-flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}

#dkg-gate .dkg-panel{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:24px}
#dkg-gate .dkg-panel.dkg-show{display:flex}
#dkg-gate .dkg-card{background:#fff;border-radius:26px;padding:clamp(24px,4vw,42px);width:min(94vw,520px);text-align:center;box-shadow:0 30px 80px rgba(32,48,63,.32);transform:scale(.86);opacity:0;animation:dkg-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes dkg-pop{to{transform:scale(1);opacity:1}}
#dkg-gate .dkg-card.dkg-bad{background:linear-gradient(180deg,#fff 0%,#fff6f5 100%)}
#dkg-gate .dkg-card.dkg-zen{background:linear-gradient(180deg,#fff 0%,#f2faf8 100%)}
#dkg-gate .dkg-emoji{font-size:clamp(50px,12vw,84px);line-height:1;display:block;margin-bottom:6px;animation:dkg-bob 2.4s ease-in-out infinite}
@keyframes dkg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#dkg-gate .dkg-card h2{font-family:"Fredoka","Nunito",sans-serif;font-weight:700;font-size:clamp(23px,5vw,33px);line-height:1.08;margin-bottom:10px;color:#20303f}
#dkg-gate .dkg-card p{font-size:clamp(15px,2.6vw,17px);color:#4d6274;font-weight:600;max-width:38ch;margin:0 auto 6px}
#dkg-gate .dkg-card p.dkg-strong{color:#20303f;font-weight:800}
#dkg-gate .dkg-n-spared{color:#159b8a}
#dkg-gate .dkg-n-killed{color:#e23b3b}
#dkg-gate .dkg-delta{display:inline-flex;align-items:center;gap:8px;font-family:"Fredoka","Nunito",sans-serif;font-weight:700;font-size:22px;margin:16px 0 4px;padding:8px 18px;border-radius:40px}
#dkg-gate .dkg-delta.dkg-neg{color:#a51e1e;background:#fdecec}
#dkg-gate .dkg-delta.dkg-pos{color:#159b8a;background:#e3f6f2}
#dkg-gate .dkg-memo{font-size:13px;font-weight:700;color:#4d6274;opacity:.8;margin-top:10px}
#dkg-gate .dkg-yy{width:108px;height:108px;margin:2px auto 4px;animation:dkg-spin 9s linear infinite}
@keyframes dkg-spin{to{transform:rotate(360deg)}}

#dkg-gate .dkg-btn{font-family:"Fredoka","Nunito",sans-serif;font-weight:600;font-size:18px;border:none;border-radius:16px;padding:15px 30px;margin-top:18px;color:#fff;background:#20303f;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 8px 0 rgba(32,48,63,.28)}
#dkg-gate .dkg-btn:hover{transform:translateY(-2px);box-shadow:0 10px 0 rgba(32,48,63,.28)}
#dkg-gate .dkg-btn:active{transform:translateY(3px);box-shadow:0 4px 0 rgba(32,48,63,.28)}
#dkg-gate .dkg-btn.dkg-go{background:#159b8a;box-shadow:0 8px 0 #0e6f63}
#dkg-gate .dkg-btn.dkg-go:active{box-shadow:0 4px 0 #0e6f63}
#dkg-gate .dkg-btn-ghost{background:none;color:#4d6274;box-shadow:none;font-size:14px;font-weight:600;padding:10px;margin-top:6px;text-decoration:underline;border:none}
#dkg-gate .dkg-alt{margin-top:16px;display:flex;flex-direction:column;gap:7px}
#dkg-gate .dkg-alt-signup{font-family:"Fredoka","Nunito",sans-serif;font-weight:600;font-size:15px;color:#159b8a;text-decoration:none}
#dkg-gate .dkg-alt-signup:hover{text-decoration:underline}
#dkg-gate .dkg-alt-login{font-size:13px;font-weight:600;color:#4d6274;text-decoration:underline}
#dkg-gate a.dkg-btn{display:inline-block;text-decoration:none;text-align:center}
#dkg-gate .dkg-done-save{margin-top:14px}
#dkg-gate .dkg-ledger-done{margin-top:18px;opacity:.92}

#dkg-gate .dkg-ledger{display:flex;gap:10px;justify-content:center;margin-top:14px}
#dkg-gate .dkg-ledger div{background:#fff;border:1px solid #e2edf4;border-radius:12px;padding:8px 14px;min-width:82px}
#dkg-gate .dkg-ledger .dkg-n{font-family:"Fredoka","Nunito",sans-serif;font-weight:700;font-size:20px}
#dkg-gate .dkg-ledger .dkg-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#4d6274}
#dkg-gate .dkg-float{position:fixed;z-index:40;font-family:"Fredoka","Nunito",sans-serif;font-weight:700;font-size:26px;pointer-events:none;animation:dkg-rise 1.3s ease-out forwards}
@keyframes dkg-rise{0%{opacity:0;transform:translateY(6px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translateY(-54px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){#dkg-gate *{animation-duration:.001s !important}}