/* style.css — Minigolf */
:root{
  --bg:#1a3d2a;
  --ink:#e8f0ea;
  --panel:rgba(12,28,18,0.82);
  --accent:#4a9eff;
  --good:#5fd07a;
  --warn:#ffd24a;
  --hot:#ff5a5a;
  color-scheme: dark;
}
html[data-theme="light"]{
  --panel:rgba(255,255,255,0.92);
  --ink:#15281c;
  color-scheme: light;
}
@media (prefers-color-scheme: light){
  :root{ color-scheme: light; }
}
html,body{ margin:0; padding:0; height:100%; }
body{
  overflow:hidden;
  touch-action:manipulation;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
#game{ position:fixed; inset:0; }
#c{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none;
  cursor:grab;
}
#c:active{ cursor:grabbing; }

/* HUD */
#hud{
  position:absolute; top:0; left:0; right:0;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
  user-select:none;
}
.row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chip{
  background:var(--panel);
  color:#f6fff8;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px; font-weight:600;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.chip b{ color:var(--warn); font-size:15px; margin:0 2px; }
.chip.dim{ opacity:.85; }
.chip.good{ background:rgba(28,120,60,0.92); opacity:1; }
.chip.accent{ border:1px solid rgba(74,158,255,0.35); }
#status{ min-width:90px; text-align:right; }
#totalChip{ font-size:12px; }
#totalChip b{ color:var(--accent); font-size:14px; }

#power{
  position:relative;
  height:14px; width:100%; max-width:340px;
  background:rgba(0,0,0,0.35);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.15);
  align-self:flex-start;
}
#powerfill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#5fd07a,#ffd24a 60%,#ff5a5a);
  border-radius:999px;
  transition:width .05s linear, background .15s;
}
#powerfill.high{ background:linear-gradient(90deg,#ff8a3a,#ff5a5a); }
#powerfill.mid{ background:linear-gradient(90deg,#ffd24a,#ff8a3a); }
#powerlabel{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:10px; font-weight:800; letter-spacing:.18em;
  color:rgba(255,255,255,0.85);
  opacity:.4; transition:opacity .2s;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
#hint{
  font-size:12px; color:#f6fff8;
  background:rgba(0,0,0,0.28);
  padding:6px 12px; border-radius:999px;
  align-self:flex-start;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Win modal */
#win{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,18,12,0.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:5;
}
#win.hidden{ display:none; }
.card{
  background:var(--panel);
  color:#f6fff8;
  padding:30px 34px 26px;
  border-radius:22px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.12);
  min-width:260px; max-width:340px;
  animation:pop .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{ from{ transform:scale(.8); opacity:0; } to{ transform:scale(1); opacity:1; } }
.card h1{
  margin:0 0 6px; font-size:28px; letter-spacing:.01em;
  color:#fff;
}
#winRating{ margin:0 0 14px; color:#bfe6c8; font-size:14px; line-height:1.4; }
#winStrokes{
  font-size:13px; font-weight:700; color:var(--warn);
  margin-bottom:18px; letter-spacing:.04em;
}
#nextBtn{
  font-size:15px; font-weight:800;
  padding:14px 30px;
  border:none; border-radius:999px;
  background:var(--good);
  color:#0c2417;
  cursor:pointer;
  letter-spacing:.02em;
  min-height:44px;
  box-shadow:0 8px 18px rgba(0,0,0,0.3);
  transition:transform .12s, box-shadow .12s, background .15s;
}
#nextBtn:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,0.35); }
#nextBtn:active{ transform:translateY(0); }

#loading{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:16px;
  align-items:center; justify-content:center;
  background:var(--bg);
  color:#e8f0ea;
  font-weight:700; letter-spacing:.04em;
  z-index:6;
  transition:opacity .35s ease;
}
#loading.done{ opacity:0; pointer-events:none; }
.spin{
  width:34px; height:34px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.15);
  border-top-color:#8fe388;
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:480px){
  #hud{ padding:10px 12px; gap:8px; }
  .chip{ font-size:12px; padding:7px 12px; }
  #hint{ font-size:11px; }
  .card{ padding:24px 24px 20px; min-width:230px; }
  .card h1{ font-size:24px; }
}