:root {
  --felt: #0a3d2e;
  --felt-dark: #062318;
  --felt-light: #135e46;
  --gold: #f5c542;
  --gold-deep: #c8961f;
  --red: #e63946;
  --red-deep: #a71d2a;
  --neon-cyan: #22d3ee;
  --neon-mag: #ff4fa3;
  --neon-lime: #d9f635;
  --cream: #f6efd9;
  --ink: #0b0b0b;
}

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

html, body {
  margin: 0;
  padding: 0;
  font-family: "Cairo", "Tahoma", system-ui, sans-serif;
  background: #020705;
  color: var(--cream);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Full screen on all devices — no phone frame cap on mobile */
.phone {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  height: auto; /* grow with content */
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
  background-attachment: local; /* background follows scroll, not viewport */
  overflow-x: hidden;
  overflow-y: visible; /* let content push the height naturally */
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}

@media (max-width: 430px) {
  .phone {
    max-width: 100%;
    box-shadow: none; /* no frame shadow needed on actual mobile */
  }
}

/* felt noise texture */
.phone::before {
  content: "";
  position: fixed; /* fixed so it always covers viewport */
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.02) 0 1px, transparent 2px);
  background-size: 8px 8px, 11px 11px, 14px 14px;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* subtle diamond pattern on felt */
.phone::after {
  content: "";
  position: fixed; /* fixed so it always covers viewport */
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 24px),
                    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 24px);
  z-index: 1;
}

/* ---- Shared screen base ---- */
.screen,
.admin-screen {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  padding: 20px 18px calc(100px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: transparent; /* let .phone background show through */
}

/* admin-screen also needs column flex for its internal layout */
.admin-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* floating suits */
.suits-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.suit-float {
  position: absolute;
  font-family: "Rakkas", serif;
  user-select: none;
  opacity: 0.08;
  animation: drift linear infinite;
  will-change: transform;
}
.suit-float.red { color: var(--red); }
.suit-float.black { color: #000; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(30px, -40vh, 0) rotate(20deg); }
  100% { transform: translate3d(-20px, -110vh, 0) rotate(-15deg); }
}

/* ---- Typography helpers ---- */
.display { font-family: "Rakkas", "Cairo", serif; font-weight: 400; letter-spacing: 0; }
.fat { font-family: "Lalezar", "Cairo", serif; font-weight: 400; }
.num { font-family: "Rakkas", serif; line-height: 0.8; }

/* ---- Sticker button ---- */
.sticker {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 14px;
  background: var(--cream);
  color: #000;
  font-weight: 900;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  cursor: pointer;
  font-family: "Cairo", sans-serif;
}
.sticker:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* ---- Header ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.app-title {
  font-family: "Lalezar", serif;
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000, 4px 4px 0 var(--red-deep);
  letter-spacing: 1px;
}
.app-sub {
  font-size: 11px;
  color: var(--cream);
  opacity: 0.7;
  margin-top: 2px;
  font-weight: 600;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,0.35);
  border: 2.5px solid #000;
  border-radius: 16px;
  padding: 5px;
  margin-bottom: 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.05);
}
.tab {
  flex: 1;
  padding: 9px 8px;
  border-radius: 11px;
  text-align: center;
  font-family: "Lalezar", serif;
  font-size: 19px;
  color: var(--cream);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.tab.active {
  background: var(--gold);
  color: #000;
  box-shadow: 0 3px 0 var(--gold-deep), inset 0 0 0 2px #000;
  transform: translateY(-1px);
}

/* ---- Badge strip ---- */
.badge-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  margin: 0 -18px 14px;
  padding-inline: 18px;
  scrollbar-width: none;
}
.badge-strip::-webkit-scrollbar { display: none; }

.badge-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 30px;
  border: 2.5px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  animation: badge-shake 2.6s ease-in-out infinite;
  transform-origin: center;
}
.badge-pill .ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: #000;
  color: var(--gold);
  filter: drop-shadow(0 0 6px currentColor);
}
.badge-pill:nth-child(1) { animation-delay: 0s; }
.badge-pill:nth-child(2) { animation-delay: 0.3s; }
.badge-pill:nth-child(3) { animation-delay: 0.6s; }
.badge-pill:nth-child(4) { animation-delay: 0.9s; }
.badge-pill:nth-child(5) { animation-delay: 1.2s; }

@keyframes badge-shake {
  0%, 88%, 100% { transform: rotate(0deg) scale(1); }
  90%           { transform: rotate(-3deg) scale(1.05); }
  93%           { transform: rotate(3deg) scale(1.05); }
  96%           { transform: rotate(-2deg) scale(1.03); }
}

/* ---- Player Card (leaderboard) ---- */
.player-card {
  position: relative;
  border: 3.5px solid #000;
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 22px;
  box-shadow: 5px 5px 0 #000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(.3,1.4,.5,1), box-shadow 0.12s;
  overflow: visible;
  animation: deal 0.65s cubic-bezier(.2,1.2,.4,1) both;
  transform-origin: 50% -200px;
  will-change: transform;
}
.player-card:hover {
  transform: translateY(-2px) rotate(-0.6deg) scale(1.02);
  box-shadow: 7px 7px 0 #000;
}
.player-card:active {
  transform: translate(2px, 2px) scale(0.98);
  box-shadow: 3px 3px 0 #000;
}

@keyframes deal {
  0%   { transform: translate(20px, -400px) rotate(-25deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(0,0) rotate(var(--tilt, 0deg)); opacity: 1; }
}

.player-card .rank-wm {
  position: absolute;
  left: -12px;
  top: -30px;
  font-family: "Rakkas", serif;
  font-size: 180px;
  line-height: 1;
  color: rgba(0,0,0,0.12);
  pointer-events: none;
  z-index: 0;
}

.avatar {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.35) 0 5px, rgba(255,255,255,0.2) 5px 10px);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  font-family: monospace;
  font-size: 9px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-weight: 700;
  flex-shrink: 0;
}
.avatar .initials {
  position: absolute;
  font-family: "Lalezar", serif;
  font-size: 30px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: -1px;
}
.avatar .photo-tag {
  position: absolute;
  bottom: 3px;
  background: #000;
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 7px;
  letter-spacing: 0.5px;
}

.pc-body { position: relative; z-index: 1; min-width: 0; }
.pc-name {
  font-family: "Lalezar", serif;
  font-size: 24px;
  line-height: 1;
  color: #000;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.4);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-stats {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.pc-stat { display: flex; align-items: baseline; gap: 4px; }
.pc-stat .v { font-family: "Rakkas", serif; font-size: 22px; line-height: 0.8; color: #000; }
.pc-stat .k { font-size: 10px; font-weight: 800; color: rgba(0,0,0,0.65); }

.pc-winrate {
  margin-top: 8px;
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  border: 1.5px solid #000;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.15) 0 3px,
    rgba(255,255,255,0.08) 3px 6px
  );
}
.pc-winrate .fill {
  height: 100%;
  background: #000;
  border-radius: 99px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

.pc-rank-badge {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 60px;
  display: grid;
  place-items: center;
  background: #000;
  border-radius: 10px;
  border: 3px solid var(--cream);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.pc-rank-badge .r {
  font-family: "Rakkas", serif;
  font-size: 38px;
  line-height: 0.8;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
}
.pc-rank-badge .label {
  font-size: 8px;
  color: var(--cream);
  font-weight: 800;
  letter-spacing: 1px;
  position: absolute;
  bottom: 4px;
}

.pc-badges {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pc-badges .mini {
  font-size: 10px;
  background: #000;
  color: var(--cream);
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 800;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pc-badges .mini .dot { font-size: 11px; filter: drop-shadow(0 0 4px currentColor); }

.pc-crown {
  position: absolute;
  top: -18px;
  right: 14px;
  background: var(--gold);
  color: #000;
  font-family: "Lalezar", serif;
  font-size: 14px;
  padding: 3px 10px 4px;
  border-radius: 99px;
  border: 2.5px solid #000;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(6deg);
  z-index: 10;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ---- Bottom nav ---- */
.bottom-nav {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  max-width: 394px;
  background: #000;
  border: 3px solid var(--cream);
  border-radius: 22px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.4), 0 0 25px rgba(245,197,66,0.15);
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-btn {
  border: none;
  background: transparent;
  color: var(--cream);
  padding: 8px 4px 6px;
  border-radius: 14px;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  min-height: 52px;
  transition: all 0.15s ease;
}
.nav-btn .ico {
  font-family: "Rakkas", serif;
  font-size: 20px;
  line-height: 1;
}
.nav-btn.active {
  background: var(--gold);
  color: #000;
  box-shadow: inset 0 0 0 2px #000;
}
.nav-btn.active .ico { filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)); }

/* ---- Profile page ---- */
.profile-hero {
  border: 3.5px solid #000;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 6px 6px 0 #000;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.profile-hero .big-wm {
  position: absolute;
  font-family: "Rakkas", serif;
  font-size: 260px;
  right: -30px;
  top: -80px;
  color: rgba(0,0,0,0.12);
  line-height: 1;
  pointer-events: none;
}
.profile-name {
  font-family: "Lalezar", serif;
  font-size: 44px;
  line-height: 0.9;
  color: #000;
  text-shadow: 3px 3px 0 rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.profile-rank {
  display: inline-block;
  background: #000;
  color: var(--gold);
  font-family: "Lalezar", serif;
  font-size: 16px;
  padding: 4px 12px;
  border-radius: 99px;
  letter-spacing: 1px;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.stat-card {
  background: rgba(0,0,0,0.45);
  border: 2.5px solid #000;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 3px 3px 0 #000, inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.stat-card .v {
  font-family: "Rakkas", serif;
  font-size: 48px;
  line-height: 0.8;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(245,197,66,0.5);
}
.stat-card .k {
  font-size: 12px;
  font-weight: 800;
  color: var(--cream);
  opacity: 0.8;
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.stat-card.red .v  { color: var(--red);      text-shadow: 0 0 12px rgba(230,57,70,0.5); }
.stat-card.cyan .v { color: var(--neon-cyan); text-shadow: 0 0 12px rgba(34,211,238,0.6); }
.stat-card.mag .v  { color: var(--neon-mag);  text-shadow: 0 0 12px rgba(255,79,163,0.6); }

.section-title {
  font-family: "Lalezar", serif;
  font-size: 24px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before {
  content: "";
  width: 6px; height: 22px;
  background: var(--gold);
  border: 2px solid #000;
  border-radius: 3px;
  flex-shrink: 0;
}

.partner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.partner-card {
  border: 3px solid #000;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
}
.partner-card .label {
  font-family: "Lalezar", serif;
  font-size: 14px;
  background: #000;
  color: var(--cream);
  padding: 3px 10px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 10px;
}
.partner-card.best .label  { background: var(--neon-lime); color: #000; }
.partner-card.worst .label { background: var(--red); color: #fff; }
.partner-card .pname {
  font-family: "Lalezar", serif;
  font-size: 22px;
  color: #000;
  line-height: 1;
  margin-bottom: 4px;
}
.partner-card .pstat { font-family: "Rakkas", serif; font-size: 30px; color: #000; line-height: 0.8; }
.partner-card .pstat small { font-size: 13px; opacity: 0.6; margin-inline-start: 4px; }

.breakdown {
  background: rgba(0,0,0,0.45);
  border: 3px solid #000;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 4px 4px 0 #000;
  margin-bottom: 16px;
}
.breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1.5px dashed rgba(255,255,255,0.12);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row .name { font-family: "Lalezar", serif; font-size: 18px; color: var(--cream); width: 78px; }
.breakdown-row .bar {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid #000;
  border-radius: 99px;
  overflow: hidden;
}
.breakdown-row .bar .fill {
  height: 100%;
  border-radius: 99px;
  position: relative;
}
.breakdown-row .bar .fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,0.25) 5px 10px);
}
.breakdown-row .nums {
  font-family: "Rakkas", serif;
  font-size: 20px;
  color: var(--cream);
  line-height: 0.8;
  min-width: 62px;
  text-align: end;
}
.breakdown-row .nums small {
  font-size: 11px; opacity: 0.6;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  margin-inline-start: 3px;
}

/* ---- Match history ---- */
.match-card {
  border: 3px solid #000;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 5px 5px 0 #000;
  background: rgba(0,0,0,0.5);
  position: relative;
  animation: deal 0.6s cubic-bezier(.2,1.2,.4,1) both;
}
.match-card .date-chip {
  position: absolute;
  top: -11px; right: 14px;
  background: #000;
  color: var(--gold);
  font-family: "Lalezar", serif;
  font-size: 13px;
  padding: 2px 10px 3px;
  border-radius: 99px;
  border: 2px solid var(--gold);
  letter-spacing: 0.5px;
}
.match-card .game-chip {
  position: absolute;
  top: -11px; left: 14px;
  background: var(--gold);
  color: #000;
  font-family: "Lalezar", serif;
  font-size: 13px;
  padding: 2px 10px 3px;
  border-radius: 99px;
  border: 2px solid #000;
}
.teams-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.team {
  border: 2.5px dashed rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  position: relative;
}
.team.winner {
  background: var(--gold);
  border: 2.5px solid #000;
  box-shadow: inset 0 0 0 3px var(--gold-deep);
  color: #000;
}
.team.winner::before {
  content: "♛";
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  font-family: "Rakkas", serif;
  font-size: 36px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(245,197,66,0.8);
  animation: crown-bob 2s ease-in-out infinite;
}
@keyframes crown-bob {
  0%, 100% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
  50%       { transform: translateX(-50%) rotate(-5deg) translateY(-4px); }
}
.team .players { display: flex; flex-direction: column; gap: 6px; }
.team .ph {
  display: flex; align-items: center; gap: 8px;
  font-family: "Lalezar", serif; font-size: 16px; line-height: 1;
}
.team .mini-ava {
  width: 26px; height: 26px;
  border-radius: 7px; border: 2px solid #000; flex-shrink: 0;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.35) 0 4px, rgba(255,255,255,0.25) 4px 8px);
  display: grid; place-items: center;
  font-family: "Lalezar", serif; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000;
}
.vs-blob {
  font-family: "Lalezar", serif; font-size: 28px;
  color: var(--red);
  text-shadow: 2px 2px 0 #000, -2px -2px 0 var(--gold);
  transform: rotate(-8deg); text-align: center;
}

/* ---- Admin ---- */
.pin-shell { margin: auto 0; text-align: center; }
.pin-title {
  font-family: "Lalezar", serif; font-size: 44px;
  color: var(--gold);
  text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--red-deep);
  margin-bottom: 4px; line-height: 1;
}
.pin-sub { color: var(--cream); opacity: 0.7; margin-bottom: 24px; font-weight: 600; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.pin-dot {
  width: 44px; height: 54px;
  border: 3px solid #000; border-radius: 12px;
  background: rgba(0,0,0,0.5); box-shadow: 3px 3px 0 #000;
  display: grid; place-items: center;
  font-family: "Rakkas", serif; font-size: 34px; color: var(--gold);
}
.pin-dot.filled { background: var(--gold); color: #000; }
.pin-dot.wrong  { animation: shake 0.4s; background: var(--red); color: #fff; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.pin-pad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; max-width: 290px; margin: 0 auto;
}
.pin-key {
  height: 62px; border-radius: 16px;
  border: 3px solid #000; background: var(--cream); color: #000;
  font-family: "Rakkas", serif; font-size: 34px;
  box-shadow: 4px 4px 0 #000; cursor: pointer; line-height: 1;
  transition: all 0.1s ease;
}
.pin-key:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }
.pin-key.ghost  { background: transparent; border-color: transparent; box-shadow: none; }
.pin-key.del    { background: var(--red); color: #fff; font-family: "Lalezar", serif; font-size: 22px; }

.game-select { display: grid; gap: 12px; margin-top: 10px; }
.game-opt {
  border: 3.5px solid #000; border-radius: 20px; padding: 22px 18px;
  box-shadow: 6px 6px 0 #000; text-align: start; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.game-opt:active { transform: translate(2px,2px); box-shadow: 3px 3px 0 #000; }
.game-opt .gn { font-family: "Lalezar", serif; font-size: 42px; color: #000; line-height: 0.9; text-shadow: 3px 3px 0 rgba(255,255,255,0.4); }
.game-opt .gd { font-weight: 800; color: rgba(0,0,0,0.7); margin-top: 6px; font-size: 13px; }
.game-opt .suit-mask { position: absolute; font-family: "Rakkas", serif; font-size: 200px; line-height: 1; left: -20px; top: -40px; color: rgba(0,0,0,0.12); pointer-events: none; }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick-item {
  border: 3px solid #000; border-radius: 16px; padding: 10px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 3px 3px 0 #000; cursor: pointer;
  background: var(--cream); color: #000;
  position: relative; transition: transform 0.1s ease; min-height: 64px;
}
.pick-item .nm { font-family: "Lalezar", serif; font-size: 18px; line-height: 1; }
.pick-item.picked { box-shadow: 3px 3px 0 #000, 0 0 0 4px var(--gold), 0 0 20px rgba(245,197,66,0.5); }
.pick-item .team-tag {
  position: absolute; top: -10px; right: -8px;
  background: var(--neon-cyan); color: #000;
  font-family: "Lalezar", serif; font-size: 13px;
  padding: 2px 8px; border: 2px solid #000; border-radius: 99px;
  box-shadow: 2px 2px 0 #000; transform: rotate(8deg);
}
.pick-item.team-b .team-tag { background: var(--neon-mag); }

.team-panel { border: 3.5px solid #000; border-radius: 20px; padding: 14px; margin-bottom: 12px; box-shadow: 5px 5px 0 #000; position: relative; }
.team-panel.a { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.team-panel.b { background: linear-gradient(135deg, #ff4fa3, #c026d3); }
.team-panel .tname { font-family: "Lalezar", serif; font-size: 28px; color: #000; text-shadow: 2px 2px 0 rgba(255,255,255,0.4); margin-bottom: 8px; }
.team-slot {
  background: rgba(0,0,0,0.25); border: 2.5px dashed rgba(0,0,0,0.5);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
  color: #000; font-family: "Lalezar", serif; font-size: 18px; min-height: 46px;
}
.team-slot.filled { background: rgba(255,255,255,0.85); border-style: solid; }
.team-slot.filled .remove {
  margin-inline-start: auto; background: #000; color: #fff;
  border: none; width: 26px; height: 26px; border-radius: 50%;
  font-family: "Lalezar", serif; font-size: 18px; cursor: pointer;
}

.winner-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.winner-btn {
  border: 4px solid #000; border-radius: 22px; padding: 26px 14px;
  text-align: center; cursor: pointer; box-shadow: 6px 6px 0 #000;
  position: relative; overflow: hidden; transition: transform 0.1s ease;
}
.winner-btn:active { transform: translate(2px,2px); box-shadow: 3px 3px 0 #000; }
.winner-btn .crown-hint { font-family: "Rakkas", serif; font-size: 66px; line-height: 0.8; color: rgba(0,0,0,0.25); margin-bottom: 4px; }
.winner-btn .wtname { font-family: "Lalezar", serif; font-size: 28px; color: #000; line-height: 1; }
.winner-btn .wpl { font-size: 12px; font-weight: 800; color: rgba(0,0,0,0.8); margin-top: 6px; line-height: 1.3; }

.btn-primary {
  display: block; width: 100%; padding: 16px;
  background: var(--gold); color: #000;
  border: 3.5px solid #000; border-radius: 18px;
  box-shadow: 5px 5px 0 #000;
  font-family: "Lalezar", serif; font-size: 26px;
  cursor: pointer; text-align: center; transition: all 0.1s ease;
}
.btn-primary:active   { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary {
  background: transparent; color: var(--cream);
  border: 2.5px solid var(--cream); border-radius: 14px;
  padding: 10px 16px; font-family: "Lalezar", serif; font-size: 18px; cursor: pointer;
}

.admin-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.admin-step-head .step-num {
  width: 40px; height: 40px; background: var(--gold);
  border: 3px solid #000; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Rakkas", serif; font-size: 22px; color: #000;
  box-shadow: 3px 3px 0 #000; flex-shrink: 0;
}
.admin-step-head .step-title { font-family: "Lalezar", serif; font-size: 28px; color: var(--cream); text-shadow: 2px 2px 0 #000; line-height: 1; }
.admin-step-head .back {
  margin-inline-start: auto; background: rgba(0,0,0,0.4);
  border: 2px solid var(--cream); color: var(--cream);
  padding: 6px 10px; border-radius: 10px;
  font-family: "Lalezar", serif; cursor: pointer;
}

.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti-piece {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 18px; border: 2px solid #000;
  animation: confetti-fly 1800ms cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx),var(--ty)) rotate(var(--tr)); opacity: 0; }
}

.saved-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 95; display: grid; place-items: center; padding: 30px;
}
.saved-card {
  background: var(--gold); border: 4px solid #000; border-radius: 28px;
  box-shadow: 10px 10px 0 #000; padding: 34px 28px;
  text-align: center; max-width: 340px;
  animation: pop 0.5s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes pop {
  0%   { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(3deg); }
  100% { transform: scale(1) rotate(-2deg); opacity: 1; }
}
.saved-card .headline { font-family: "Lalezar", serif; font-size: 48px; color: #000; line-height: 0.9; text-shadow: 3px 3px 0 #fff; }
.saved-card .sub      { font-weight: 800; margin-top: 8px; color: #000; font-size: 15px; }
.saved-card .win-team { margin-top: 14px; background: #000; color: var(--gold); font-family: "Lalezar", serif; font-size: 24px; padding: 8px 16px; border-radius: 12px; display: inline-block; }

.tweaks-panel {
  position: fixed; bottom: 88px; right: 12px; width: 220px;
  background: #000; border: 3px solid var(--gold); border-radius: 16px;
  padding: 12px; z-index: 90; box-shadow: 0 0 20px rgba(245,197,66,0.4);
  font-family: "Cairo", sans-serif;
}
.tweaks-panel .th { font-family: "Lalezar", serif; font-size: 18px; color: var(--gold); margin-bottom: 8px; }
.tweaks-panel label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--cream); padding: 6px 0; font-weight: 700; cursor: pointer; }
.tweaks-panel input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); }
.tweaks-panel .row-btn { width: 100%; background: var(--gold); color: #000; border: 2px solid #fff; border-radius: 10px; padding: 8px; font-family: "Lalezar", serif; font-size: 15px; cursor: pointer; margin-top: 6px; }

.field {
  background: rgba(0,0,0,0.5); border: 2.5px solid #000; border-radius: 12px;
  padding: 10px 12px; color: var(--cream); font-family: "Cairo", sans-serif;
  font-weight: 700; width: 100%;
}

/* ── Shilletna Main Landing (shilletna.com/) ─────────────── */
.shilletna-screen {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  padding: 32px 20px 16px;
  position: relative;
  z-index: 3;
  gap: 0;
}

.shilletna-hero {
  text-align: center;
  margin-bottom: 28px;
}

.shilletna-suit {
  font-family: "Rakkas", serif;
  font-size: 90px;
  color: var(--gold);
  text-shadow: 0 0 40px var(--gold), 2px 2px 0 #000;
  line-height: 0.85;
  animation: badge-shake 3s ease-in-out infinite;
}

.shilletna-title {
  font-family: "Rakkas", serif;
  font-size: 52px;
  color: var(--gold);
  text-shadow: 3px 3px 0 #000, 0 0 24px var(--gold);
  line-height: 1;
  margin-top: 4px;
}

.shilletna-tagline {
  font-family: "Lalezar", serif;
  font-size: 15px;
  color: var(--cream);
  opacity: 0.6;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

.shilletna-section {
  background: rgba(0,0,0,0.4);
  border: 3px solid #000;
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 5px 5px 0 #000;
}

.group-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 2.5px solid #000;
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 8px;
  text-decoration: none;
  box-shadow: 3px 3px 0 #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: manipulation;
}

.group-card:last-child { margin-bottom: 0; }

.group-card:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

.group-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 2.5px solid #000;
  display: grid; place-items: center;
  font-family: "Rakkas", serif;
  font-size: 26px;
  color: #000;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 #000;
}

.group-card-info { flex: 1; min-width: 0; }

.group-card-name {
  font-family: "Lalezar", serif;
  font-size: 20px;
  color: var(--cream);
  line-height: 1;
}

.group-card-url {
  font-family: "Cairo", sans-serif;
  font-size: 11px;
  color: var(--gold);
  font-weight: 800;
  margin-top: 3px;
  opacity: 0.8;
  direction: ltr;
  text-align: right;
}

.group-card-arrow {
  font-family: "Rakkas", serif;
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
}

/* ── Landing Page ─────────────────────────────────────────── */
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-screen {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px 40px;
  position: relative;
  z-index: 3;
}

.landing-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
}

.landing-content.landing-in {
  animation: landing-rise 0.55s cubic-bezier(.22,.68,0,1.2) forwards;
}

.landing-logo {
  text-align: center;
  margin-bottom: 4px;
}

.landing-suit {
  font-family: "Rakkas", serif;
  font-size: 96px;
  color: var(--gold);
  text-shadow: 0 0 40px var(--gold), 2px 2px 0 #000;
  line-height: 0.85;
  animation: badge-shake 3s ease-in-out infinite;
}

.landing-title {
  font-family: "Rakkas", serif;
  font-size: 44px;
  color: var(--gold);
  text-shadow: 3px 3px 0 #000, 0 0 24px var(--gold);
  line-height: 1.1;
  margin-top: 6px;
}

.landing-sub {
  font-family: "Lalezar", serif;
  font-size: 15px;
  color: var(--cream);
  opacity: 0.6;
  margin-top: 6px;
  letter-spacing: 1px;
}

.landing-players {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.45);
  border: 3px solid #000;
  border-radius: 22px;
  box-shadow: 5px 5px 0 #000;
}

.landing-stats {
  width: 100%;
  display: flex;
  gap: 10px;
}

.landing-stat {
  flex: 1;
  background: rgba(0,0,0,0.5);
  border: 2.5px solid #000;
  border-radius: 16px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 4px 4px 0 #000;
}

.landing-stat-num {
  font-family: "Rakkas", serif;
  font-size: 38px;
  line-height: 1;
}

.landing-stat-label {
  font-family: "Lalezar", serif;
  font-size: 13px;
  color: var(--cream);
  opacity: 0.65;
  margin-top: 2px;
}

.landing-enter {
  width: 100%;
  font-family: "Lalezar", serif;
  font-size: 26px;
  letter-spacing: 2px;
  background: var(--gold);
  color: #000;
  border: 3px solid #000;
  border-radius: 20px;
  padding: 18px 0;
  box-shadow: 6px 6px 0 #000;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: manipulation;
}

.landing-enter:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #000;
}

.landing-footer {
  font-family: "Cairo", sans-serif;
  font-size: 11px;
  color: var(--cream);
  opacity: 0.25;
  font-weight: 700;
  letter-spacing: 1px;
}

.d0  { animation-delay: 0.02s; } .d1 { animation-delay: 0.09s; }
.d2  { animation-delay: 0.16s; } .d3 { animation-delay: 0.23s; }
.d4  { animation-delay: 0.30s; } .d5 { animation-delay: 0.37s; }
.d6  { animation-delay: 0.44s; } .d7 { animation-delay: 0.51s; }
.d8  { animation-delay: 0.58s; } .d9 { animation-delay: 0.65s; }

.tilt-1 { --tilt: -0.8deg; } .tilt-2 { --tilt:  0.6deg; }
.tilt-3 { --tilt: -0.4deg; } .tilt-4 { --tilt:  0.9deg; }

.screen-scroll { overflow-y: auto; }

.filter-row { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 4px; }
.filter-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 6px 14px; border-radius: 99px;
  background: rgba(0,0,0,0.4); border: 2px solid #000;
  font-family: "Lalezar", serif; font-size: 15px; color: var(--cream);
  cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--cream); color: #000; }

/* ── Shilletna full-width wrapper (main landing, no phone cap) */
.shilletna-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
.shilletna-wrapper::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.02) 0 1px, transparent 2px);
  background-size: 8px 8px, 11px 11px, 14px 14px;
  mix-blend-mode: overlay;
}
.shilletna-wrapper::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,0,0,0.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 24px);
}

/* ---- Root container fix ---- */
#root {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Mobile touch improvements ---- */
button, .pick-item, .player-card, .game-opt, .winner-btn, .nav-btn, .tab, .chip {
  touch-action: manipulation; /* removes 300ms tap delay */
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on interactive elements */
.player-card, .pick-item, .badge-pill, .nav-btn {
  user-select: none;
  -webkit-user-select: none;
}

/* Make inputs mobile-friendly */
input.field {
  font-size: 16px; /* prevents iOS zoom on focus */
  -webkit-appearance: none;
  appearance: none;
}

/* Safe area for saved overlay and confetti on notched phones */
.saved-overlay {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Smooth scrolling on iOS */
.screen, .admin-screen {
  -webkit-overflow-scrolling: touch;
}

/* ── Sidebar nav (desktop only, hidden on mobile) ────────── */
.sidebar-nav  { display: none !important; }
.content-area { flex: 1; min-width: 0; }

/* ── Desktop layout (≥1024px) ────────────────────────────── */
@media (min-width: 1024px) {
  body { align-items: stretch; }

  /* Phone becomes full-width flex row */
  .phone {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    box-shadow: none;
  }

  /* Hide mobile bottom nav */
  .bottom-nav { display: none !important; }

  /* ── Sidebar ── */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 210px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.55);
    border-inline-end: 2px solid rgba(255,255,255,0.07);
    padding: 28px 10px 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 10;
    gap: 4px;
  }

  .sidebar-brand {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(245,197,66,0.18);
    margin-bottom: 10px;
  }

  .sidebar-suit {
    font-family: "Rakkas", serif;
    font-size: 46px;
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold);
    line-height: 1;
    animation: badge-shake 3s ease-in-out infinite;
  }

  .sidebar-name {
    font-family: "Lalezar", serif;
    font-size: 20px;
    color: var(--gold);
    text-shadow: 1px 1px 0 #000;
    margin-top: 4px;
  }

  .sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: 2.5px solid transparent;
    border-radius: 14px;
    color: var(--cream);
    font-family: "Lalezar", serif;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: start;
    touch-action: manipulation;
  }

  .sidebar-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
  }

  .sidebar-btn.active {
    background: var(--gold);
    color: #000;
    border-color: #000;
    box-shadow: 3px 3px 0 #000;
  }

  .sidebar-ico {
    font-family: "Rakkas", serif;
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
  }

  /* ── Content area (right of sidebar) ── */
  .content-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .screen, .admin-screen {
    padding: 32px 40px 40px;
    max-width: 1000px;
    width: 100%;
  }

  /* Leaderboard 2-col */
  .players-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  /* Admin 4-col player picker */
  .pick-grid { grid-template-columns: repeat(4, 1fr); }

  /* Profile 4-col stat grid */
  .stat-grid  { grid-template-columns: repeat(4, 1fr); }

  /* Typography scaling */
  .app-title     { font-size: 40px; }
  .section-title { font-size: 26px; }
  .pc-name       { font-size: 26px; }

  /* Per-group landing desktop */
  .landing-suit      { font-size: 120px; }
  .landing-title     { font-size: 54px; }
  .landing-sub       { font-size: 17px; }
  .landing-stat-num  { font-size: 46px; }

  /* Shilletna landing desktop */
  .shilletna-suit    { font-size: 110px; }
  .shilletna-title   { font-size: 68px; }
  .shilletna-tagline { font-size: 17px; }
  .group-card-name   { font-size: 22px; }
}

/* ── Shilletna 2-column hero layout on very wide screens ─── */
@media (min-width: 1100px) {
  .shilletna-screen {
    max-width: 1080px;
    margin: 0 auto;
    padding: 60px 48px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    column-gap: 56px;
    align-items: start;
    min-height: 100vh;
  }

  .shilletna-hero {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: 60px;
    margin-bottom: 0;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .shilletna-section { grid-column: 2; }

  .shilletna-suit    { font-size: 140px; }
  .shilletna-title   { font-size: 80px; }
  .shilletna-tagline { font-size: 20px; margin-top: 12px; }

  .group-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #000;
    background: rgba(255,255,255,0.1);
  }
}