/* ============================================================================
   minigolf/style.css — CogniBump Golf (turn-based match, smooth ribbon courses)
   Everything is scoped under #golfgame so it never collides with the global
   site.css or the shared header/footer partials.
   ========================================================================== */
#golfgame{
  --brass:#f2b134;--brass2:#ffd576;--mint:#3fe08b;--blue:#4aa8ff;
  --gink:#eaf0fb;--gmuted:#93a1c0;--gcard:#131c33;--gcard2:#1a2542;--gedge:#28324f;
  --gfont:"Trebuchet MS","Segoe UI",Tahoma,system-ui,sans-serif;
  position:relative;max-width:430px;margin:16px auto 6px;padding:0 14px;
  font-family:var(--gfont);color:var(--gink);-webkit-user-select:none;user-select:none;
}
#golfgame *{box-sizing:border-box;}
#golfgame .players{display:flex;gap:10px;margin-bottom:11px;}
#golfgame .pl{flex:1;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:16px;position:relative;overflow:hidden;transition:.25s;
  background:linear-gradient(180deg,var(--gcard2),var(--gcard));border:1px solid var(--gedge);}
#golfgame .pl.lead{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 10px 26px -14px var(--brass);}
#golfgame .pl.lead::after{content:"LEAD";position:absolute;top:7px;right:9px;font-size:.52rem;font-weight:900;color:var(--brass2);letter-spacing:.14em;}
#golfgame .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.05rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 3px 8px -3px #000;}
#golfgame .av1{background:radial-gradient(circle at 32% 28%,#fff,#c6d0e2);}
#golfgame .av2{background:radial-gradient(circle at 32% 28%,#8fd0ff,#2f7fd6);}
#golfgame .meta{display:flex;flex-direction:column;line-height:1.08;min-width:0;}
#golfgame .who{font-size:.86rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#golfgame .lbl{font-size:.56rem;color:var(--gmuted);text-transform:uppercase;letter-spacing:.16em;}
#golfgame .sc{margin-left:auto;font-size:1.55rem;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
#golfgame .holerow{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;padding:0 3px;gap:8px;}
#golfgame .holerow h1{font-size:1.18rem;margin:0;font-weight:900;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#golfgame .chip{font-size:.72rem;font-weight:900;color:#231603;flex:none;border-radius:999px;padding:6px 13px;letter-spacing:.01em;
  background:linear-gradient(180deg,var(--brass2),var(--brass));box-shadow:0 5px 14px -7px var(--brass);}
#golfgame .stagewrap{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 34px 70px -34px #000,0 0 0 1px rgba(255,255,255,.05);}
#golfgame canvas{display:block;width:100%;height:auto;touch-action:none;}
#golfgame .banner{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:26px;
  background:radial-gradient(120% 90% at 50% 28%,rgba(14,22,42,.82),rgba(5,9,18,.93));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
#golfgame .banner.show{display:flex;animation:g-pop .34s cubic-bezier(.2,1.25,.3,1);}
@keyframes g-pop{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:none;}}
#golfgame .banner h2{margin:0;font-size:1.5rem;font-weight:900;color:var(--mint);text-shadow:0 2px 24px rgba(63,224,139,.45);}
#golfgame .banner p{margin:0;color:var(--gmuted);line-height:1.45;max-width:290px;}
#golfgame .banner .big{font-size:2.7rem;font-weight:900;letter-spacing:-.04em;color:var(--gink);}
#golfgame .btn{font:inherit;font-weight:800;cursor:pointer;border:0;border-radius:13px;padding:13px 18px;transition:transform .09s;
  background:linear-gradient(180deg,var(--brass2),var(--brass));color:#231603;box-shadow:0 9px 22px -9px var(--brass);}
#golfgame .btn:active{transform:translateY(1px);}
#golfgame .btn.ghost{background:rgba(255,255,255,.03);color:var(--gink);border:1px solid var(--gedge);box-shadow:none;}
#golfgame .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
#golfgame .controls{display:flex;gap:10px;justify-content:center;margin-top:14px;}
#golfgame .hint{text-align:center;color:var(--gmuted);font-size:.84rem;margin-top:12px;line-height:1.55;}
#golfgame .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:9999;
  background:var(--gcard2);border:1px solid var(--gedge);color:var(--gink);padding:12px 20px;border-radius:12px;font-weight:800;font-size:.9rem;transition:.3s;box-shadow:0 14px 34px -14px #000;}
#golfgame .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion:reduce){#golfgame .banner.show{animation:none;}}