/* ===================================================================
   Pickleball Rally — styles
   =================================================================== */
:root{
  --court-blue:#2f6fb0;
  --court-blue-d:#255a90;
  --surround:#2f7d4f;
  --ink:#123048;
  --card:#fbf6e9;
  --card-line:#e4d9bd;
  --teal:#2b8f9c;
  --teal-d:#1f6f7a;
  --p1:#2b7a8f;
  --p2:#d1483f;
  --gold:#f4d21e;
  --shadow:0 6px 18px rgba(6,30,50,.28);
  --radius:18px;
  --focus:#ffd24a;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}
html,body{height:100%;max-width:100%;overflow-x:hidden;}
body{
  font-family:"Baloo 2","Nunito",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:#0e2436;color:var(--ink);
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit;cursor:pointer;}
button:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--focus);outline-offset:2px;}

.app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------- Top bar ---------------- */
.topbar{
  flex:0 0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;
  padding:8px 12px 4px;
}
.pchip{
  display:flex;align-items:center;gap:8px;
  background:var(--p1);color:#fff;border-radius:14px;padding:6px 10px;
  box-shadow:var(--shadow);max-width:230px;
}
.pchip.p1{justify-self:start;}
.pchip.p2{justify-self:end;background:var(--p2);flex-direction:row;}
.pchip .avatar{width:40px;height:40px;border-radius:50%;background:#fff;flex:0 0 auto;overflow:hidden;border:2px solid rgba(255,255,255,.75);}
.pchip .avatar canvas,.pchip .avatar svg{width:100%;height:100%;display:block;}
.pchip-name{font-weight:800;font-size:14px;letter-spacing:.3px;white-space:nowrap;}
.pchip-score{font-weight:900;font-size:26px;font-variant-numeric:tabular-nums;min-width:26px;text-align:center;
  background:rgba(255,255,255,.16);border-radius:10px;padding:0 8px;}
.pchip.dim{filter:saturate(.5) brightness(.85);}
.pchip.active{box-shadow:0 0 0 3px var(--gold),var(--shadow);}

.targetcard{
  justify-self:center;background:var(--card);border:3px solid var(--card-line);
  border-radius:20px;box-shadow:var(--shadow);padding:8px 20px 10px;text-align:center;
  min-width:min(72vw,340px);max-width:92vw;
}
.tc-instr{color:var(--teal-d);font-weight:800;font-size:15px;}
.tc-target{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 6px;line-height:1.05;}
.tc-emoji{font-size:30px;}
.tc-word{color:var(--ink);font-weight:900;font-size:clamp(20px,4.4vw,34px);letter-spacing:.5px;}
.tc-target.prompt .tc-word{font-size:clamp(15px,2.6vw,20px);font-weight:800;line-height:1.25;}
.reps{display:flex;gap:12px;justify-content:center;}
.rep{
  width:34px;height:34px;border-radius:50%;border:3px solid var(--teal);
  background:#fff;transition:transform .12s,background .2s;
}
.rep.filled{background:radial-gradient(circle at 38% 34%,#fff27a,#f4d21e 60%,#d9ad00);border-color:#c79b06;transform:scale(1.08);}
.rep:disabled{opacity:.55;cursor:default;}

/* ---------------- Court ---------------- */
.courtwrap{flex:1 1 auto;position:relative;min-height:0;}
#court{position:absolute;inset:0;width:100%;height:100%;display:block;}

.topcontrols{
  position:absolute;top:8px;right:10px;z-index:5;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:60%;
}
.iconbtn{
  width:44px;height:44px;border-radius:12px;border:none;background:rgba(10,30,45,.62);
  color:#fff;font-size:20px;box-shadow:var(--shadow);
}
.iconbtn[aria-pressed="false"]{background:rgba(120,40,40,.7);}
.pillbtn{
  border:none;border-radius:12px;padding:10px 14px;font-weight:800;font-size:14px;
  background:rgba(10,30,45,.62);color:#fff;box-shadow:var(--shadow);
}
.pillbtn:active,.iconbtn:active{transform:translateY(2px);}

.bottomui{position:absolute;left:0;right:0;bottom:10px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.bottomui>*{pointer-events:auto;}
.actionrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;}
.serve{
  border:none;border-radius:16px;padding:16px 34px;font-size:clamp(18px,3.4vw,26px);font-weight:900;letter-spacing:1px;
  color:#fff;background:linear-gradient(180deg,#39a7b6,#227c8a);box-shadow:0 5px 0 #185b66,var(--shadow);
  text-transform:uppercase;
}
.serve:active{transform:translateY(3px);box-shadow:0 2px 0 #185b66,var(--shadow);}
.serve:disabled{background:linear-gradient(180deg,#8fa6ad,#6d868d);box-shadow:0 5px 0 #55686d;opacity:.9;cursor:not-allowed;}
.serve.ready{animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}

.judge{display:flex;gap:12px;}
.judgebtn{border:none;border-radius:16px;padding:15px 22px;font-size:clamp(15px,2.6vw,19px);font-weight:900;color:#fff;box-shadow:var(--shadow);}
.judgebtn.correct{background:linear-gradient(180deg,#3bbf76,#1f8f52);box-shadow:0 5px 0 #15693c,var(--shadow);}
.judgebtn.tryagain{background:linear-gradient(180deg,#e0873a,#c26a1f);box-shadow:0 5px 0 #8f4d14,var(--shadow);}
.judgebtn:active{transform:translateY(3px);}

.rallymeter{
  display:flex;align-items:center;gap:10px;background:rgba(10,30,45,.6);
  border-radius:30px;padding:8px 18px;box-shadow:var(--shadow);
}
.rmlabel{color:#fff;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1px;opacity:.9;}
.rmball{width:26px;height:26px;border-radius:50%;background:#e9edf0;border:2px solid #b9c4cc;
  box-shadow:inset -2px -2px 3px rgba(0,0,0,.15);position:relative;transition:transform .2s;}
.rmball::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(0,0,0,.06));}
.rmball.on{background:radial-gradient(circle at 38% 34%,#fff27a,#f4d21e 60%,#d9ad00);border-color:#c79b06;transform:scale(1.12);}

.banner{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:6;
  background:rgba(251,246,233,.96);border:4px solid var(--gold);border-radius:20px;
  padding:16px 30px;font-size:clamp(22px,5vw,40px);font-weight:900;color:var(--ink);
  box-shadow:var(--shadow);text-align:center;pointer-events:none;
  animation:pop .4s cubic-bezier(.2,1.4,.5,1);
}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0;}100%{transform:translate(-50%,-50%) scale(1);opacity:1;}}

/* ---------------- Overlays / sheets ---------------- */
.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(9,28,42,.86),rgba(9,28,42,.94));padding:16px;overflow:auto;overflow-x:hidden;}
.overlay.show{display:flex;}
.sheet{background:#0f2c42;border:2px solid #245b7d;border-radius:22px;box-shadow:var(--shadow);
  width:100%;max-width:720px;max-height:94vh;overflow:auto;padding:22px 22px 24px;color:#dcecf7;}
.sheet.small{max-width:440px;text-align:center;}
.backlink{display:inline-block;color:#8fb9d4;text-decoration:none;font-weight:800;font-size:13px;margin-bottom:8px;padding:4px 2px;}
.backlink:hover{color:#eaf6ff;}
.brand{font-size:26px;font-weight:900;color:#eaf6ff;display:flex;align-items:center;gap:10px;justify-content:center;}
.brand-ball{color:var(--gold);}
.subtitle{color:#8fb9d4;font-size:15px;text-align:center;margin:6px 0 14px;line-height:1.4;}
.sec{color:#7fd4c6;font-size:14px;text-transform:uppercase;letter-spacing:1.5px;margin:14px 0 8px;}

.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px;}
.actbtn{background:#12374f;border:2px solid #245b7d;border-radius:14px;padding:14px 10px;color:#dcecf7;
  font-weight:800;font-size:15px;text-align:center;transition:all .15s;}
.actbtn .ico{display:block;font-size:26px;margin-bottom:4px;}
.actbtn:hover{border-color:#49a7c9;transform:translateY(-2px);}
.actbtn.sel{border-color:var(--gold);background:#153f5b;box-shadow:0 0 0 2px rgba(244,210,30,.4) inset;}

.actparams{margin-top:12px;display:flex;flex-direction:column;gap:12px;}
.paramgroup{display:flex;flex-direction:column;gap:6px;}
.paramlabel{color:#9fd0e6;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{background:#12374f;border:2px solid #245b7d;border-radius:22px;padding:8px 16px;color:#dcecf7;font-weight:800;font-size:14px;}
.chip.sel{border-color:var(--gold);background:#153f5b;color:#fff;}
.customwrap textarea{width:100%;min-height:96px;border-radius:12px;border:2px solid #245b7d;background:#0b2233;color:#eaf6ff;
  padding:10px 12px;font-family:inherit;font-size:15px;resize:vertical;}
.customhint{color:#7fa9c4;font-size:12px;margin-top:4px;}

.modes{display:flex;gap:10px;flex-wrap:wrap;}
.modebtn{flex:1 1 200px;background:#12374f;border:2px solid #245b7d;border-radius:14px;padding:14px;color:#dcecf7;font-weight:800;font-size:16px;}
.modebtn.sel{border-color:var(--gold);background:#153f5b;}

.bigbtn{border:none;border-radius:14px;padding:15px 20px;font-size:18px;font-weight:900;color:#fff;box-shadow:var(--shadow);margin-top:14px;width:100%;}
.bigbtn.go{background:linear-gradient(180deg,#39a7b6,#227c8a);box-shadow:0 5px 0 #185b66,var(--shadow);}
.bigbtn.go:disabled{background:#4a6169;box-shadow:0 5px 0 #37484d;opacity:.8;cursor:not-allowed;}
.bigbtn.back{background:#173a52;border:2px solid #2f6c8f;box-shadow:none;}
.bigbtn:active{transform:translateY(2px);}

/* player select */
.selectstage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:6px;}
.pcard{background:#12374f;border:2px solid #245b7d;border-radius:18px;padding:14px;}
.pcard h3{color:#eaf6ff;font-size:18px;margin-bottom:8px;text-align:center;}
.pcard .preview{width:100%;height:150px;background:#0b2233;border-radius:12px;margin-bottom:10px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.pcard .preview canvas{width:100%;height:100%;}
.optrow{margin:8px 0;}
.optrow .lab{color:#9fd0e6;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;display:block;}
.genderrow{display:flex;gap:8px;}
.genderrow button{flex:1;background:#0b2233;border:2px solid #245b7d;border-radius:10px;padding:9px;color:#dcecf7;font-weight:800;}
.genderrow button.sel{border-color:var(--gold);background:#153f5b;}
.swatches{display:flex;flex-wrap:wrap;gap:8px;}
.sw{width:34px;height:34px;border-radius:50%;border:3px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.sw.sel{border-color:var(--gold);transform:scale(1.1);}
.selectnav{display:flex;gap:12px;}
.selectnav .bigbtn{flex:1;}

.endbig{font-size:60px;margin:8px 0;}

/* responsive tweaks */
@media (max-width:560px){
  .pchip-name{display:none;}
  .pchip{padding:5px 7px;gap:6px;}
  .pchip-score{font-size:22px;}
  .topcontrols .pillbtn{padding:9px 10px;font-size:12px;}
  .targetcard{padding:6px 12px 8px;min-width:56vw;}
  .rep{width:28px;height:28px;}
  .serve{padding:13px 22px;}
}
@media (max-height:520px){
  .tc-emoji{font-size:22px;}
  .topbar{padding:4px 8px 2px;}
}
@media (max-width:440px){
  .actbtn{padding:12px 6px;font-size:13px;}
  .actbtn .ico{font-size:22px;}
  .modes{flex-direction:column;}
  .sheet{padding:16px 14px 18px;}
  .brand{font-size:22px;}
  .chip{padding:7px 12px;font-size:13px;}
}