* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0b3d1e; --panel: #0f2e1a; --panel2: #14431f;
  --ink: #eafff0; --gold: #fcc419; --muted: rgba(234,255,240,.62);
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 15%, #12572c, #0b3d1e 70%);
  font-family: -apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}

.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; }
#game.screen { justify-content: flex-start; }
#home.screen, #overModal.screen { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); }
#home .panel, #overModal .panel { margin: auto; }
.panel { text-align: center; padding: 22px 26px; width: min(400px, 94vw); animation: pin .3s ease; }
@keyframes pin { from { transform: translateY(16px) scale(.97); opacity: 0; } }

.logoF { font-size: 54px; }
h1 { font-size: 40px; font-weight: 900; letter-spacing: 1px; line-height: 1; }
h1 span {
  display: block; font-size: 24px; letter-spacing: 5px;
  background: linear-gradient(135deg, #ffe07a, var(--gold), #ff8a3d);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
h2 { font-size: 30px; font-weight: 900; letter-spacing: 2px; margin-bottom: 8px; }
.tag { color: var(--muted); font-weight: 600; margin: 10px 0 20px; }

.diffRow { margin: 6px 0 18px; }
.diffRow .lbl { display: block; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.segs { display: flex; gap: 8px; justify-content: center; }
.segs button { border: 2px solid var(--panel2); background: var(--panel); color: var(--ink); border-radius: 12px; padding: 10px 18px; font-weight: 800; font-size: 14px; cursor: pointer; }
.segs button.sel { border-color: var(--gold); background: var(--panel2); box-shadow: 0 0 16px rgba(252,196,25,.25); }
.segs button:disabled { opacity: .35; cursor: not-allowed; }
#stakeHint { margin-top: 8px; min-height: 16px; }

.skinBlock { margin-top: 16px; }
.segs.skins { gap: 12px; }
.skin {
  width: 48px; height: 48px; border-radius: 14px; padding: 0;
  border: 2px solid var(--panel2); background: var(--panel);
  display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;
}
.skin.sel { border-color: var(--gold); background: var(--panel2); box-shadow: 0 0 14px rgba(252,196,25,.3); }
.skin .ball { display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0,0,0,.35); }
.skin.locked .ball { filter: grayscale(1) brightness(.45); }
.skin .lock { position: absolute; font-size: 15px; }
.skin .need { position: absolute; bottom: -15px; font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; }
#skinHint { margin-top: 16px; min-height: 15px; }

button.big {
  display: block; width: 100%; margin: 10px 0; padding: 15px 0;
  font-size: 18px; font-weight: 900; letter-spacing: 1px;
  color: #08331a; background: linear-gradient(135deg, #6dedb0, #22c76a);
  border: none; border-radius: 16px; cursor: pointer;
  box-shadow: 0 5px 0 #169148, 0 10px 24px rgba(0,0,0,.4);
}
button.big small { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-top: 2px; }
button.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #169148; }
button.big.share { color: #062a4a; background: linear-gradient(135deg, #74c0fc, #339af0); box-shadow: 0 5px 0 #1864ab, 0 10px 24px rgba(0,0,0,.4); }
button.big.share:active { box-shadow: 0 2px 0 #1864ab; }
.ghost { display: inline-block; background: none; border: none; color: var(--muted); font-size: 14px; font-weight: 700; margin-top: 12px; text-decoration: none; padding: 8px; }
.best { color: var(--gold); font-weight: 800; margin-top: 16px; min-height: 20px; }
.hint { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ================= game ================= */
#scoreBar {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; gap: 14px; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
  position: relative;
}
.team { display: flex; align-items: center; gap: 8px; }
.team span { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 1px; }
.team b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.team.you b { color: #6dedb0; }
.team.cpu b { color: #ff8787; }
#roundInfo { font-size: 13px; font-weight: 800; color: var(--gold); }
.quit { position: absolute; right: 12px; top: max(10px, env(safe-area-inset-top)); width: 32px; height: 32px; border-radius: 10px; border: none; background: rgba(255,255,255,.12); color: var(--ink); font-size: 17px; font-weight: 800; }
.quit::after { content: ''; position: absolute; inset: -7px; } /* 46px hit area, 44px+ thumb rule */

#dots { display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.dotRow { display: flex; gap: 5px; justify-content: center; min-height: 18px; }
.dotRow .d { width: 14px; height: 14px; border-radius: 50%; background: var(--panel2); }
.dotRow .d.goal { background: #22c76a; }
.dotRow .d.miss, .dotRow .d.save { background: #e03131; }

#phaseLabel { font-weight: 900; font-size: 16px; margin: 6px 0; min-height: 22px; letter-spacing: .5px; }
#phaseLabel.kick { color: #6dedb0; }
#phaseLabel.keep { color: #ffd75e; }

#field { width: min(96vw, 560px); flex: 1; min-height: 0; display: block; margin: 0 auto; border-radius: 12px; }

#controls { width: 100%; max-width: 560px; padding: 8px 16px max(14px, env(safe-area-inset-bottom)); text-align: center; }
.chint { font-weight: 800; font-size: 15px; color: var(--gold); }

#bigMsg {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  font-size: 52px; font-weight: 900; font-style: italic;
  text-shadow: 0 6px 20px rgba(0,0,0,.6); pointer-events: none; opacity: 0; z-index: 8;
}
#bigMsg.show { animation: bigPop 1.1s ease; }
@keyframes bigPop { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 22% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

.coinWin {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(252,196,25,.15); border: 1px solid rgba(252,196,25,.4);
  color: #ffd75e; font-weight: 900; font-size: 18px;
  padding: 6px 18px; border-radius: 20px; margin-bottom: 12px;
}

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* compress the home menu on short screens so it fits without scrolling */
@media (max-height: 720px) {
  #home .logoF { font-size: 42px; }
  #home h1 { font-size: 32px; }
  #home h1 span { font-size: 20px; }
  #home .tag { margin: 6px 0 12px; }
  #home .diffRow { margin: 4px 0 12px; }
  #home button.big { padding: 12px 0; margin: 8px 0; }
}

/* ================= 4v4 match ================= */
#match { justify-content: flex-start; }
#mTop {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
  position: relative;
}
.mScore { display: flex; align-items: center; gap: 8px; }
.mScore span { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 1px; }
.mScore b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mScore.you b { color: #74c0fc; }
.mScore.cpu b { color: #ff8787; }
#mClock { font-size: 14px; font-weight: 900; color: var(--gold); min-width: 90px; text-align: center; }
#fieldM { width: min(96vw, 560px); flex: 1; min-height: 0; display: block; margin: 4px auto; border-radius: 12px; touch-action: none; }
#mControls {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px max(14px, env(safe-area-inset-bottom));
}
#joyHint { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; max-width: 40%; }
#joyHint span { color: var(--gold); font-size: 11px; font-weight: 800; opacity: .9; }
#actionBtns { display: flex; align-items: center; gap: 12px; flex: none; }
#passBtn {
  width: 70px; height: 70px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  font-size: 14px; font-weight: 900; letter-spacing: .5px;
  color: #06243f; background: radial-gradient(circle at 35% 30%, #cbe7ff, #3f9bff 72%);
  box-shadow: 0 5px 0 #2b6fc7, 0 8px 22px rgba(0,0,0,.4);
  touch-action: none;
}
#passBtn small { font-size: 8px; font-weight: 800; letter-spacing: 0; opacity: .82; margin-top: 2px; }
#passBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #2b6fc7; }
#passBtn.thru { background: radial-gradient(circle at 35% 30%, #d5ffe4, #12c266 72%); box-shadow: 0 5px 0 #0a8f49, 0 8px 22px rgba(0,0,0,.4); }
#shootBtn {
  width: 84px; height: 84px; border-radius: 50%;
  border: none; cursor: pointer; flex: none;
  font-size: 15px; font-weight: 900; letter-spacing: 1px;
  color: #4a2c00; background: radial-gradient(circle at 35% 30%, #ffe07a, var(--gold) 70%);
  box-shadow: 0 5px 0 #c77e0a, 0 8px 22px rgba(0,0,0,.4);
  touch-action: none;
}
#shootBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c77e0a; }
@media (max-width: 380px) {
  #mControls { padding-left: 12px; padding-right: 12px; }
  #joyHint span { display: none; }
  #passBtn { width: 64px; height: 64px; }
  #shootBtn { width: 78px; height: 78px; }
  #actionBtns { gap: 10px; }
}
#bigMsgM {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  font-size: 48px; font-weight: 900; font-style: italic;
  text-shadow: 0 6px 20px rgba(0,0,0,.6); pointer-events: none; opacity: 0; z-index: 8;
}
#bigMsgM.show { animation: bigPop 1.2s ease; }