/* ================================================
   CB PALLEJÀ — CRONÒMETRE  ·  game.css
   Responsive · iOS + Android compatible
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&display=swap');

/* ─── RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red       : #e82020;
  --red-dark  : #b01010;
  --green     : #00b84a;
  --green-dark: #008a36;
  --orange    : #f05a1a;
  --gold      : #f0c040;
  --white     : #f5f0e8;
  --gray      : #8090a8;
  --dark      : #0a0a1a;
  --panel-bg  : rgba(8, 12, 30, 0.90);
  --border    : rgba(255,255,255,0.12);
}

html {
  height: 100%;
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  background: #1a1000;
  color: var(--white);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── COURT BACKGROUND ─────────────────────────── */
.court-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
}
.court-bg svg {
  width: 100%; height: 100%;
  display: block;
}
.court-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(0,0,0,0.62);
}

/* ─── SCREENS ───────────────────────────────────── */
.screen {
  position: fixed; inset: 0; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 12px) env(safe-area-inset-right, 12px)
           env(safe-area-inset-bottom, 12px) env(safe-area-inset-left, 12px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ─── PANEL BASE ────────────────────────────────── */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 22px 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
}

/* ─── LOGO / HEADER ─────────────────────────────── */
.panel-logo { text-align: center; }
.logo-badge {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #7d1e2a, #1e1c42);
  border: 3px solid #c8a060;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 0 22px rgba(200,160,96,.35);
  font-family: 'Bebas Neue', serif;
  font-size: 22px; letter-spacing: 2px;
  color: #c8a060;
}
.panel-title {
  font-family: 'Bebas Neue', serif;
  font-size: clamp(1.8rem, 8vw, 3rem);
  letter-spacing: 5px;
  color: var(--white);
}
.panel-sub {
  font-size: .78rem; letter-spacing: 3px;
  color: #c8a060; margin-top: 3px;
}

/* ─── REGISTER SCREEN ───────────────────────────── */
.register-panel { max-width: 400px; }
.register-desc {
  font-size: .88rem; line-height: 1.6;
  color: var(--gray); text-align: center;
}
.register-desc strong { color: var(--white); }

.input-group { width: 100%; }
.input-label {
  display: block; font-size: .75rem; letter-spacing: 3px;
  color: var(--gray); margin-bottom: 6px; text-transform: uppercase;
}
.name-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem; font-weight: 600;
  padding: 12px 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.name-input::placeholder { color: rgba(255,255,255,0.28); }
.name-input:focus {
  border-color: var(--gold);
  background: rgba(240,192,64,0.06);
}

/* ─── BUTTONS ────────────────────────────────────── */
.btn-main {
  width: 100%;
  padding: 15px 24px;
  border: none; border-radius: 12px;
  font-family: 'Bebas Neue', serif;
  font-size: 1.5rem; letter-spacing: 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .2s, background .2s;
  color: #fff;
}
.btn-main:active { transform: scale(0.97); }
.btn-main:disabled { opacity: .3; cursor: not-allowed; transform: none; }

.btn-green {
  background: var(--green);
  box-shadow: 0 4px 20px rgba(0,184,74,.4);
}
.btn-green:not(:disabled):active { background: var(--green-dark); }

.btn-red {
  background: var(--red);
  box-shadow: 0 4px 20px rgba(232,32,32,.4);
  animation: pulse-red .8s ease-in-out infinite alternate;
}
@keyframes pulse-red {
  from { box-shadow: 0 4px 20px rgba(232,32,32,.4); }
  to   { box-shadow: 0 4px 36px rgba(232,32,32,.75); }
}

.btn-secondary {
  width: 100%;
  padding: 11px 20px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--gray);
  font-family: 'Bebas Neue', serif;
  font-size: 1rem; letter-spacing: 2px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .2s;
}
.btn-secondary:active { border-color: var(--white); color: var(--white); }

/* ─── GAME SCREEN ────────────────────────────────── */
.game-panel { max-width: 400px; gap: 12px; }

/* Attempt header */
.attempts-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.attempt-label {
  font-family: 'Bebas Neue', serif;
  font-size: 1rem; letter-spacing: 2px; color: var(--gray);
}
.attempt-dots { display: flex; gap: 7px; }
.dot {
  width: 14px; height: 14px; border-radius: 50%;
  transition: background .3s, box-shadow .3s;
}
.dot-empty   { background: rgba(255,255,255,0.15); }
.dot-made    { background: var(--green); box-shadow: 0 0 8px rgba(0,184,74,.6); }
.dot-miss    { background: var(--red);   box-shadow: 0 0 8px rgba(232,32,32,.6); }
.dot-current { background: var(--gold);  box-shadow: 0 0 8px rgba(240,192,64,.6); animation: blink .6s infinite alternate; }
@keyframes blink { from { opacity: .6; } to { opacity: 1; } }

/* Pilota decorativa */
.crono-ball-wrap { display: flex; align-items: center; justify-content: center; }
.crono-ball { width: 36px; height: 36px; object-fit: contain; opacity: .75; }

/* Target (shot clock style) */
.target-section { width: 100%; text-align: center; }
.target-label {
  font-size: .7rem; letter-spacing: 4px;
  color: var(--gray); margin-bottom: 6px;
}
.target-display {
  font-family: 'Bebas Neue', serif;
  font-size: clamp(3.5rem, 14vw, 6rem);
  letter-spacing: .05em;
  color: #ff2a10;
  background: #080808;
  display: inline-block;
  padding: 6px 28px;
  border-radius: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(255,42,16,0.55);
  border: 2px solid rgba(255,42,16,0.25);
  min-width: 200px;
}
.target-unit {
  font-size: .7rem; letter-spacing: 3px;
  color: rgba(255,42,16,0.6); margin-top: 5px;
}

/* Chronometer */
.chrono-section { width: 100%; text-align: center; }
.chrono-label {
  font-size: .7rem; letter-spacing: 4px;
  color: var(--gray); margin-bottom: 6px;
}
.chrono-display {
  font-family: 'Bebas Neue', serif;
  font-size: clamp(2.2rem, 10vw, 3.8rem);
  letter-spacing: .08em;
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 180px;
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.chrono-display.running {
  border-color: rgba(240,90,26,0.5);
  background: rgba(240,90,26,0.06);
}
.chrono-display.result-good { border-color: rgba(0,184,74,0.5); background: rgba(0,184,74,0.06); }
.chrono-display.result-ok   { border-color: rgba(240,192,64,0.5); background: rgba(240,192,64,0.06); }
.chrono-display.result-bad  { border-color: rgba(232,32,32,0.5); background: rgba(232,32,32,0.06); }

/* Running dots animation */
.running-dots span { animation: dot-pulse 1.2s ease-in-out infinite; font-size: 2rem; color: var(--orange); }
.running-dots span:nth-child(2) { animation-delay: .2s; }
.running-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pulse { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

.chrono-diff {
  font-family: 'Bebas Neue', serif;
  font-size: 1.3rem; letter-spacing: 2px;
  min-height: 26px; margin-top: 5px;
}
.diff-good  { color: var(--green); }
.diff-ok    { color: var(--gold);  }
.diff-bad   { color: var(--red);   }

/* Action button */
.btn-action {
  width: 100%;
  padding: 18px 24px;
  border: none; border-radius: 14px;
  font-family: 'Bebas Neue', serif;
  font-size: 1.8rem; letter-spacing: 5px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  min-height: 64px;
  transition: transform .1s;
}
.btn-action:active { transform: scale(0.96); }

/* Attempts list */
.attempts-list {
  width: 100%;
  display: flex; flex-direction: column; gap: 5px;
}
.attempt-row {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  font-size: .82rem;
  padding: 5px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 7px;
  border-left: 3px solid var(--gray);
}
.attempt-row.ar-good { border-left-color: var(--green); }
.attempt-row.ar-ok   { border-left-color: var(--gold); }
.attempt-row.ar-bad  { border-left-color: var(--red); }
.attempt-row .ar-n   { color: var(--gray); font-weight: 700; }
.attempt-row .ar-tgt { color: var(--white); font-weight: 600; text-align: center; }
.attempt-row .ar-act { color: var(--white); text-align: center; }
.attempt-row .ar-dif { font-weight: 700; text-align: right; font-family: 'Bebas Neue',serif; font-size: 1rem; letter-spacing: 1px; }

/* ─── RESULTS SCREEN ─────────────────────────────── */
.results-panel { max-width: 440px; gap: 12px; }
.result-name { font-size: .9rem; letter-spacing: 4px; color: var(--orange); text-transform: uppercase; }
.result-score-big {
  font-family: 'Bebas Neue', serif;
  font-size: clamp(2.5rem, 12vw, 5rem);
  color: var(--gold); letter-spacing: 4px; line-height: 1;
}
.result-score-label { font-size: .72rem; color: var(--gray); letter-spacing: 1px; text-align: center; margin-top: -6px; }

.result-table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem;
}
.result-table th, .result-table td {
  padding: 6px 8px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.result-table th { color: var(--gray); font-size: .7rem; letter-spacing: 2px; font-weight: 600; }
.result-table td { color: var(--white); }
.result-table .td-diff.diff-good { color: var(--green); font-weight: 700; }
.result-table .td-diff.diff-ok   { color: var(--gold);  font-weight: 700; }
.result-table .td-diff.diff-bad  { color: var(--red);   font-weight: 700; }

/* ─── HOF ─────────────────────────────────────────── */
.result-hof-section { width: 100%; }
.hof-section-title {
  font-family: 'Bebas Neue', serif;
  font-size: 1.2rem; letter-spacing: 3px;
  color: var(--gray); text-align: center; margin-bottom: 6px;
}
.hof-month-line { font-size: .78rem; color: var(--gold); letter-spacing: 2px; text-align: center; }
.hof-note, .hof-reset { font-size: .72rem; color: var(--gray); text-align: center; }

.hof-list { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.hof-entry {
  display: grid;
  grid-template-columns: 32px 1fr 80px;
  align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px; font-size: .88rem;
}
.hof-entry:first-child { background: rgba(240,192,64,.08); border-color: rgba(240,192,64,.3); }
.hof-entry:nth-child(2){ background: rgba(184,192,204,.05); border-color: rgba(184,192,204,.2); }
.hof-entry:nth-child(3){ background: rgba(205,128,64,.05); border-color: rgba(205,128,64,.2); }
.hof-pos  { font-family: 'Bebas Neue',serif; font-size: 1.2rem; text-align: center; }
.hof-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-score{ font-family: 'Bebas Neue',serif; font-size: 1.3rem; color: var(--gold); text-align: right; letter-spacing: 1px; }
.hof-empty{ text-align: center; color: var(--gray); padding: 18px; font-size: .88rem; }

.hof-panel { max-width: 400px; gap: 10px; }

.result-btns {
  width: 100%;
  display: flex; flex-direction: column; gap: 9px;
}

/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-height: 680px) {
  .panel { padding: 14px 18px 18px; gap: 9px; }
  .target-display { font-size: clamp(2.8rem, 12vw, 4.5rem); padding: 4px 20px; }
  .btn-action { padding: 14px 20px; font-size: 1.5rem; min-height: 54px; }
  .logo-badge { width: 46px; height: 46px; font-size: 18px; }
  .panel-title { font-size: 1.8rem; }
}
@media (max-width: 380px) {
  .panel { padding: 14px 14px 18px; }
  .target-display { padding: 5px 16px; }
  .attempt-row { font-size: .76rem; }
}
@media (min-height: 900px) {
  .panel { padding: 28px 26px 30px; gap: 16px; }
}

/* Prevé teclat mòbil al canvas */
canvas{touch-action:none;-webkit-user-select:none;user-select:none;}

.ceb-logo-panel {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 8px;
  border: 2px solid #CDA470;
}