:root{color-scheme:dark}#app{position:relative;background:#0e1116}canvas#arena{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(59,130,246,.15),transparent 60%),#0e1116cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overlay.hidden{display:none}.game-title{font-size:34px;font-weight:800;letter-spacing:.5px;background:linear-gradient(135deg,#60a5fa,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.player-name{font-size:16px;color:#a8b3c2;margin:0}.big-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:20px;padding:18px 48px;font-size:20px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1);box-shadow:0 8px 24px #3b82f673;cursor:pointer;transition:transform .12s ease}.big-button:active{transform:scale(.96)}.secondary-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:12px 30px;font-size:15px;font-weight:600;color:#e8ecf1;background:#ffffff0f;cursor:pointer}.spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:#60a5fa;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.searching-text{font-size:17px;color:#cdd6e2}.result-title{font-size:40px;font-weight:800;margin:0}.result-title.win{color:#4ade80}.result-title.lose{color:#f87171}.result-title.draw{color:#facc15}.result-crowns{font-size:22px;letter-spacing:4px}.conn-badge{position:absolute;top:8px;right:10px;font-size:10px;color:#9fb0c3;background:#00000059;padding:3px 8px;border-radius:8px;z-index:20;pointer-events:none;font-variant-numeric:tabular-nums}.conn-badge.bad{color:#f87171}.toast{position:absolute;left:50%;bottom:200px;transform:translate(-50%) translateY(10px);background:#14161ceb;color:#fff;padding:10px 18px;border-radius:12px;font-size:14px;box-shadow:0 6px 20px #0006;opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none;z-index:30;max-width:80%}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}