:root {
  --bg: #0e1116;
  --card: #171c24;
  --card2: #1e2530;
  --text: #f2f4f8;
  --muted: #9aa4b2;
  --accent: #7ed957; /* wasabi */
  --accent2: #ff7a6e; /* salmón */
  --danger: #e5484d;
  --gold: #ffd166;
  --radius: 18px;
  --shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
[data-theme="light"] {
  --bg: #f6f7fb;
  --card: #ffffff;
  --card2: #eef1f7;
  --text: #171c24;
  --muted: #5c6672;
  --shadow: 0 6px 18px rgba(20, 30, 60, .10);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  transition: background .25s, color .25s;
}
#app { max-width: 520px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)); }

header { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 12px; }
header h1 { margin: 0; font-size: 26px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.logo { font-size: 30px; }
.iconbtn {
  border: 0; background: var(--card2); color: var(--text); font-size: 20px;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  box-shadow: var(--shadow);
}

.card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px; margin: 10px 0; box-shadow: var(--shadow);
  transition: background .25s;
}
.timer-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.timer-display {
  font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 700;
  letter-spacing: 1px; color: var(--accent);
}
.timer-btns { display: flex; gap: 8px; }
.timer-hint { margin-top: 10px; color: var(--muted); font-size: 13px; }

.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card2); border-radius: 12px; padding: 8px 2px; }
.stat .k { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: .4px; }
.stat .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

.players { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.player {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border-left: 6px solid var(--pc, #888); padding: 10px 12px 12px;
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  animation: none;
}
.player.top1 { border-left-color: var(--gold); }
.player.bump { animation: bump .35s ease; }
.player.overtake { animation: overtake .9s ease; box-shadow: 0 0 0 3px var(--pc), var(--shadow); }
.phead { display: flex; align-items: center; gap: 10px; }
.rank {
  font-size: 15px; font-weight: 800; min-width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); color: var(--muted);
}
.rank.r1 { background: #3a2f00; color: var(--gold); }
.rank.r2 { background: #2f3338; color: #d7dde4; }
.rank.r3 { background: #3a2b1c; color: #e8a25c; }
.pname-wrap { flex: 1; min-width: 0; }
.pname { font-weight: 700; font-size: 17px; cursor: pointer; }
.pname-input {
  font: inherit; font-weight: 700; color: var(--text); background: var(--card2);
  border: 2px solid var(--pc); border-radius: 8px; padding: 2px 6px; width: 100%;
  outline: none;
}
.pdiff { font-size: 12px; color: var(--muted); }
.pdiff.lead { color: var(--gold); }
.pbody { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 8px; }
.pcount {
  font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 96px; text-align: center; color: var(--text);
  position: relative;
}
.pcount.pop { animation: pop .3s ease; }
.pbtns { display: flex; gap: 10px; }
.pbtn {
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 34px; font-weight: 800; color: #fff; user-select: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, filter .15s;
  touch-action: manipulation;
}
.pbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pbtn.minus { background: var(--accent2); }
.pbtn.plus { background: var(--accent); }
.pbtn:disabled { filter: grayscale(.6) brightness(.75); cursor: default; }
.float-emoji {
  position: absolute; font-size: 24px; pointer-events: none; z-index: 5;
  animation: floatUp 1s ease forwards;
}

.actions { display: flex; gap: 10px; }
.btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: 13px 16px; border-radius: 14px; color: var(--text); background: var(--card2);
  box-shadow: var(--shadow); transition: filter .15s, transform .08s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: #10240a; flex: 1; }
.btn.ghost { background: var(--card2); flex: 1; }
.btn.danger { background: var(--danger); color: #fff; flex: 1; }
.btn.big { font-size: 17px; padding: 15px 12px; }

.history h2 { margin: 0 0 8px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
#historyList { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; }
#historyList li {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px;
  border-bottom: 1px solid var(--card2); font-size: 14px;
}
#historyList li .hdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#historyList li .ht { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#historyList .empty { color: var(--muted); justify-content: center; border: 0; }
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 14px 0 4px; }

.toast {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: var(--card2); color: var(--text);
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow);
  border: 1px solid var(--pc, transparent); font-weight: 700; z-index: 60;
  max-width: 92vw; text-align: center; animation: toastIn .25s ease;
}
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-box { background: var(--card); border-radius: 20px; padding: 20px; max-width: 360px; width: 100%; box-shadow: var(--shadow); }
.modal-box h3 { margin: 0 0 8px; font-size: 20px; }
.modal-box p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0 0 16px; }
.modal-btns { display: flex; gap: 10px; }

@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes overtake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-70px) scale(1.4); }
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- capa de efectos ---- */
.fx { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 55; }
.fparticle {
  position: absolute; line-height: 1; opacity: 1; will-change: transform;
  animation: fpart .9s ease-out forwards;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
@keyframes fpart {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.3); }
}
.frain {
  position: absolute; top: -50px; line-height: 1; will-change: transform;
  animation: frain linear forwards;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
@keyframes frain {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(115vh) rotate(340deg); }
}

/* racha de fuego */
.flame {
  position: absolute; top: 4px; right: 10px; z-index: 4;
  font-size: 20px; font-weight: 900; line-height: 1;
  background: linear-gradient(90deg,#ffb020,#ff5d5d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(255,120,0,.85));
  animation: flamePop .5s ease;
}
@keyframes flamePop {
  0% { transform: scale(.3) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* corona + aura del líder */
.crown {
  display: inline-block;
  animation: crownBounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,209,102,.8));
}
@keyframes crownBounce {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-4px) rotate(6deg); }
}
.player.top1::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius);
  animation: leaderAura 2s ease-in-out infinite;
}
@keyframes leaderAura {
  0%,100% { box-shadow: inset 0 0 0 0 rgba(255,209,102,0); }
  50% { box-shadow: inset 0 0 22px 2px rgba(255,209,102,.45); }
}

/* input de renombrado */
.rename-input {
  width: 100%; box-sizing: border-box; margin: 10px 0 4px;
  font: inherit; font-size: 18px; font-weight: 700; color: var(--text);
  background: var(--card2); border: 2px solid var(--accent); border-radius: 12px;
  padding: 10px 12px; outline: none;
}
.rename-input:focus { border-color: var(--accent2); }
.rename-btns { margin-top: 14px; }

/* ---------- v3: registro y permisos ---------- */
.header-btns { display: flex; align-items: center; gap: 8px; }
.chip {
  border: 0; background: var(--card2); color: var(--text); border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow);
  max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip.is-me { border: 1.5px solid var(--accent); }

.pavatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  border: 2px solid transparent; background: var(--card2);
}
.pname-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youbadge {
  font-size: 10px; font-weight: 800; color: #10240a; background: var(--accent);
  border-radius: 999px; padding: 1px 8px; width: max-content; letter-spacing: .5px;
}
.lockbadge {
  width: 72px; height: 72px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 28px; opacity: .8;
}
.pcount-spacer { flex: none; }
.player.mine { box-shadow: 0 0 0 2px var(--pc), var(--shadow); }

/* pantalla de registro */
.join-screen {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--bg);
}
.join-screen[hidden] { display: none; }
.join-box {
  background: var(--card); border-radius: 24px; padding: 18px; box-shadow: var(--shadow);
  max-width: 430px; width: 100%; margin: auto;
}
.join-box h2 { margin: 0 0 6px; font-size: 24px; }
.join-box p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0 0 6px; }
.join-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.join-opt {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--card2); background: var(--card2); border-radius: 16px;
  padding: 10px 14px; color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, transform .08s;
}
.join-opt:not(:disabled):active { transform: scale(.98); }
.join-opt.sel { border-color: var(--jc, var(--accent)); background: var(--card); }
.join-opt.taken, .join-opt:disabled { opacity: .55; cursor: not-allowed; }
.join-emoji-big { font-size: 28px; width: 36px; text-align: center; flex: none; }
.join-name { font-weight: 700; flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-state { font-size: 12px; color: var(--muted); flex: none; }
.join-emoji { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.join-emoji > span { color: var(--muted); font-size: 13px; }
.emoji-options { display: flex; flex-wrap: wrap; gap: 7px; }
.emoji-opt {
  border: 2px solid var(--card2); background: var(--card); border-radius: 12px;
  font-size: 24px; width: 46px; height: 46px; cursor: pointer; line-height: 1;
}
.emoji-opt.sel { border-color: var(--accent); }
.join-btns { display: flex; gap: 10px; margin-top: 12px; }