:root{
  --myk-blue:#1a75c4; --myk-dark:#0d3c6e; --ink:#12263a;
  --paper:#f4f8fc; --line:#cfe0f0; --green:#3ba55c; --red:#e0483d;
  --p305:#1a75c4; --p315:#7b4ea0; --p335:#e8722a; --plat:#1a9dd4; --psp:#5aa832; --pst:#0f9b8e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#0d3c6e}
#stage{position:fixed;inset:0;background:linear-gradient(160deg,#eaf3fb,#f4f8fc 60%,#e3eef8);display:flex;flex-direction:column;overflow:hidden;touch-action:none}
.hdr{flex:0 0 auto;padding:12px 14px 6px;text-align:center;background:#fff;border-bottom:3px solid var(--myk-blue);box-shadow:0 2px 10px rgba(13,60,110,.08)}
.hdr img{height:34px;display:block;margin:0 auto 6px}
.hdr h1{font-size:19px;letter-spacing:.5px;color:var(--myk-blue);font-weight:800;line-height:1}
.hdr .sub{font-size:11px;color:#5a6b7a;margin-top:3px;font-weight:600}
.roundtag{display:inline-block;margin-top:6px;background:var(--myk-blue);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;letter-spacing:.4px}

.board{flex:1 1 auto;position:relative;display:flex;padding:10px 6px 6px;gap:62px;min-height:0;touch-action:none}
#wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8;overflow:visible}
.col{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px;z-index:2}
.colhdr{font-size:10px;font-weight:800;color:#fff;background:var(--myk-dark);text-align:center;padding:4px;border-radius:6px;letter-spacing:.5px}

.card{position:relative;flex:1;background:#fff;border:2px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:6px;padding:5px 7px;box-shadow:0 1px 4px rgba(13,60,110,.08);min-height:0;transition:border-color .15s,transform .1s}
.card.matched{border-color:var(--green);background:#f2fbf5}
.card.bad{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.pcard .thumb{flex:0 0 40px;height:100%;max-height:52px;display:flex;align-items:center;justify-content:center}
.pcard .thumb img{max-width:100%;max-height:52px;object-fit:contain}
.pcard .txt{flex:1;min-width:0}
.pcard .pname{font-size:13px;font-weight:800;line-height:1;color:var(--ink)}
.pcard .pcat{font-size:8.5px;font-weight:700;color:#8a99a8;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

.tcard{padding:5px 8px}
.tcard .ticon{flex:0 0 34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:19px;background:#eaf3fb}
.tcard .tname{font-size:12px;font-weight:800;color:var(--ink);line-height:1.05}
.tcard .tdesc{font-size:8px;color:#7a8a98;line-height:1.15;margin-top:2px;display:none}

/* connector dots */
.dot{position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--myk-blue);top:50%;transform:translateY(-50%);z-index:6;touch-action:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.pcard .dot{right:-13px}
.tcard .dot{left:-13px}
.dot.active{transform:translateY(-50%) scale(1.3);box-shadow:0 0 0 7px rgba(26,117,196,.22)}
.dot.done{background:var(--green);border-color:var(--green)}
.dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--myk-blue);opacity:.55}
.dot.done::after{background:#fff;opacity:1}
/* target being aimed at during a drag */
.tcard.hover{border-color:var(--myk-blue);box-shadow:0 0 0 3px rgba(26,117,196,.25);transform:scale(1.02)}
.tcard.hover .dot{transform:translateY(-50%) scale(1.3);box-shadow:0 0 0 7px rgba(26,117,196,.22)}
.pcard.dragging{border-color:var(--myk-blue);box-shadow:0 0 0 3px rgba(26,117,196,.2)}

.foot{flex:0 0 auto;padding:7px 12px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-top:1px solid var(--line)}
.prog{font-size:12px;font-weight:800;color:var(--myk-dark)}
.prog span{color:var(--green)}
.btn{background:var(--myk-blue);color:#fff;border:none;font-weight:800;font-size:13px;padding:9px 20px;border-radius:22px;letter-spacing:.3px;box-shadow:0 3px 0 var(--myk-dark);cursor:pointer}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--myk-dark)}
.btn.ghost{background:#fff;color:var(--myk-blue);border:2px solid var(--myk-blue);box-shadow:0 3px 0 var(--line)}
.btn:disabled{opacity:.4;box-shadow:none}

/* overlay screens */
.screen{position:absolute;inset:0;z-index:30;background:linear-gradient(160deg,#1a75c4,#0d3c6e);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}
.screen img.logo{height:40px;margin-bottom:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));background:#fff;padding:8px 12px;border-radius:8px}
.screen h2{font-size:30px;font-weight:900;letter-spacing:.5px;line-height:1.05;margin-bottom:10px}
.screen p{font-size:14px;opacity:.9;max-width:300px;line-height:1.45;margin-bottom:26px}
.screen .btn{font-size:15px;padding:13px 34px;background:#fff;color:var(--myk-blue);box-shadow:0 4px 0 #0a2f56}
.trust{display:flex;gap:16px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.trust div{font-size:10px;font-weight:700;opacity:.85;display:flex;flex-direction:column;align-items:center;gap:4px}
.trust .ic{font-size:20px}
.tagline{margin-top:20px;font-size:12px;font-weight:800;letter-spacing:1px;opacity:.95}
.hidden{display:none!important}
.scoreline{font-size:15px;font-weight:700;margin-bottom:6px}
.big{font-size:44px;font-weight:900;color:#ffd34d;margin:4px 0 2px}