:root {
  --font-geist-sans: Arial;
  --ink: #173137;
  --cream: #f6f0df;
  --paper: #fffaf0;
  --coral: #f04f38;
  --coral-dark: #d53b29;
  --teal: #008b87;
  --teal-dark: #00716e;
  --gold: #f3ad24;
  --line: #d9d1bf;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--cream); }
.actions .add-players-button{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--teal);color:white;text-transform:uppercase}
.actions .connect-phone-button{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--gold);color:var(--ink);text-transform:uppercase}
.actions .connect-phone-button span{font-size:1.25rem;font-weight:900}
.actions .add-players-button .people-icon{position:relative;display:block;width:29px;height:25px;margin:0;border-radius:0;background:transparent}
.people-icon i{position:absolute;bottom:1px;width:14px;height:10px;border-radius:8px 8px 4px 4px;background:white}
.people-icon i:before{content:'';position:absolute;left:4px;bottom:8px;width:8px;height:8px;border-radius:50%;background:white}
.people-icon i:first-child{left:1px}.people-icon i:last-child{right:1px;opacity:.82}
.connect-card{position:fixed;z-index:60;inset:0;width:100%;height:100svh;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border:0;border-radius:0;background:#173137d9;overflow-y:auto}
.connect-card[hidden]{display:none}
.connect-heading,.connect-body{width:min(100%,390px);margin:auto;background:#fffaf0}
.connect-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:2px solid var(--ink);border-bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(135deg,var(--gold),#ffd66e)}
.connect-heading h2{margin:0;font:900 1.45rem/1 Georgia,serif}
.connect-heading button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:2px solid var(--ink);border-radius:50%;background:white;color:var(--ink);box-shadow:0 3px 0 var(--ink);font-size:1.5rem;font-weight:900;cursor:pointer}
.connect-heading button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.connect-body{padding:14px 16px 16px;border:2px solid var(--ink);border-top:0;border-radius:0 0 20px 20px;box-shadow:7px 7px 0 #071417}
.connect-body h3{margin:8px 0;text-align:center;font:900 1rem/1 Georgia,serif}
.connect-actions{display:grid;grid-template-columns:1fr 88px;gap:8px}
.connect-actions label{position:absolute;left:-9999px}
.connect-actions input,.connect-actions button{min-height:42px;border:2px solid var(--ink);border-radius:10px;font:800 .78rem/1 Arial,sans-serif}
.connect-actions input{width:100%;text-align:center;background:white;font-size:1rem;letter-spacing:.12em}
.connect-actions button{padding:8px;background:var(--gold);color:var(--ink);cursor:pointer}
.connect-actions button:last-child{background:var(--teal);color:white}
.connection-status{margin-top:10px;font-size:.78rem;font-weight:700;color:var(--ink)}
.connection-status.connected{color:var(--teal-dark)}
.qr-join-card{display:grid;justify-items:center;gap:8px;margin:0;padding:12px;border:2px solid var(--ink);border-radius:16px;background:white;text-align:center}
.qr-join-card[hidden]{display:none}
.qr-code-box{display:grid;place-items:center;width:min(164px,48vw);margin:auto;aspect-ratio:1;border-radius:8px;background:white}.qr-code-box canvas,.qr-code-box img{display:block;max-width:100%;height:auto}
.qr-join-card>strong{font:900 1.1rem/1.05 Georgia,serif;color:var(--teal-dark)}
.new-game-number{width:100%;min-height:46px;border:2px solid var(--ink);border-radius:12px;background:#fff5d7;color:var(--ink);font:900 .85rem/1 Arial,sans-serif;letter-spacing:.03em;cursor:pointer}
.new-game-number:active{transform:translateY(1px)}
.code-display{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:7px 10px;border-radius:10px;background:#fff1c7}
.code-display small{font-size:.62rem;font-weight:900;letter-spacing:.08em}
.code-display b{font:900 1.9rem/1 Georgia,serif;letter-spacing:.1em;color:var(--coral-dark)}
.extra-player-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0}
.extra-player-fields label{display:grid;gap:5px;font-size:.7rem;font-weight:900;text-transform:uppercase}
.extra-player-fields input{width:100%;min-height:44px;border:2px solid var(--ink);border-radius:10px;background:white;padding:8px 10px;font-weight:800;text-transform:none}
.or-line{display:flex;align-items:center;gap:10px;margin:10px 0;color:#667478;font-size:.7rem;font-weight:900}.or-line:before,.or-line:after{content:'';height:1px;flex:1;background:var(--line)}
.live-score-strip{display:flex;gap:7px;margin-top:10px;overflow-x:auto;padding:2px 0}
.live-score-strip[hidden]{display:none}
.live-score-strip span{flex:1 0 auto;display:flex;justify-content:space-between;gap:12px;min-width:120px;padding:8px 10px;border:2px solid var(--ink);border-radius:999px;background:white;font-size:.76rem;font-weight:800}
.live-score-strip b{color:var(--coral-dark);font-size:.92rem}
.continue-game{width:100%;min-height:52px;margin-top:12px;border:2px solid var(--ink);border-radius:12px;background:var(--teal);color:white;box-shadow:0 4px 0 var(--ink);font-weight:900;text-transform:uppercase;cursor:pointer;transition:.2s opacity,.2s filter,.2s transform}
.continue-game:hover{filter:brightness(1.08)}
@media(max-width:380px){.extra-player-fields{grid-template-columns:1fr}}

.join-welcome{position:fixed;z-index:100;left:50%;bottom:max(20px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;width:min(calc(100% - 32px),360px);padding:13px 16px;border:2px solid var(--ink);border-radius:18px;background:linear-gradient(135deg,#fff6d8,#ffd76f);box-shadow:6px 6px 0 var(--ink);transform:translateX(-50%);animation:welcome-pop .36s cubic-bezier(.2,.9,.3,1.35)}
.join-welcome[hidden]{display:none}
.join-welcome .welcome-star{grid-row:1/3;color:var(--coral);font:900 2rem/1 Georgia,serif;text-shadow:1px 1px 0 var(--ink)}
.join-welcome strong{font:900 1.05rem/1 Georgia,serif}.join-welcome span:last-child{font-size:.78rem;font-weight:800}
@keyframes welcome-pop{from{opacity:0;transform:translate(-50%,18px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
}
body.modal-open{overflow:hidden}

button, input, textarea { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
}

.page-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.app-card {
  width: min(100%, 760px);
  padding: 34px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 28px;
  box-shadow: 10px 10px 0 var(--ink);
}

.topbar {
  position: relative;
  padding: 2px 0 28px;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-logo {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: -34px auto -18px;
}


h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 10vw, 5.8rem);
  line-height: .85;
  letter-spacing: -.075em;
}

h1 span { color: var(--coral); }

.eyebrow {
  margin: 14px 0 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .025em;
}

.game-name-field {
  width: min(100%, 430px);
  margin: 24px auto 0;
  text-align: left;
}

.game-name-field label {
  display: block;
  margin: 0 0 6px 2px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-name-field label span { float: right; }

.game-name-field input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 4px 0 var(--ink);
}

.game-name-field small {
  display: block;
  margin-top: 9px;
  color: #6c797b;
  font-size: .72rem;
  font-weight: 750;
  text-align: center;
}

.editable-default {
  color: #5e7073 !important;
  border-color: #b88619 !important;
  box-shadow: 0 4px 0 var(--ink), 0 0 0 3px rgba(243,173,36,.2) !important;
}

.game-name-field input::placeholder { color: #7c8889; opacity: 1; }

.scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.player {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  color: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}

.remove-player{position:absolute;z-index:2;top:9px;right:9px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--coral-dark);box-shadow:2px 2px 0 var(--ink);font-size:1.25rem;font-weight:900;line-height:1;cursor:pointer}.remove-player:active{transform:translate(2px,2px);box-shadow:none}
.required-player{background:#fff5d7;color:#a87513}.required-player:after{content:'2';position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:14px;height:14px;border:1px solid var(--ink);border-radius:50%;background:var(--gold);color:var(--ink);font:900 .55rem/1 Arial,sans-serif}

.player-1 { background: var(--coral); }
.player-2 { background: var(--teal); }
.player-3 { background: var(--coral); }
.player-4 { background: var(--teal); }
.player-5 { background: var(--coral); }
.player-6 { background: var(--teal); }
.player-7 { background: var(--coral); }
.player-8 { background: var(--teal); }

.player > label {
  width: 100%;
  margin: 0 0 6px;
  color: rgba(255,255,255,.85);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.player > label span { float: right; font-size: .8rem; }

.player-name {
  width: 100%;
  padding: 10px 8px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 850;
  text-align: center;
  box-shadow: 0 3px 0 var(--ink);
}

.player-name::placeholder { color: #7c8889; opacity: 1; }
.player-name::selection { background: #ffe3a4; }

.score {
  display: block;
  margin: 18px 0 22px;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6rem, 22vw, 10rem);
  font-weight: 800;
  line-height: .75;
  letter-spacing: -.09em;
  font-variant-numeric: tabular-nums;
  text-shadow: 3px 3px 0 rgba(23,49,55,.28);
  transform-origin: center;
}

.score.score-pop { animation: scorePop .28s cubic-bezier(.2,.9,.3,1.35); }
@keyframes scorePop { 45% { transform: scale(1.16) rotate(-2deg); text-shadow: 5px 7px 0 rgba(23,49,55,.2); } }

.score-button {
  width: 100%;
  min-height: clamp(110px, 23vw, 160px);
  display: grid;
  place-content: center;
  gap: 5px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}

.score-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.score-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.score-button:disabled { cursor: not-allowed; opacity: .58; transform: none; box-shadow: 0 5px 0 var(--ink); }
.score-button .plus { color: inherit; font: 800 3.8rem/.7 Georgia, serif; }
.score-button span:last-child { font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; }
.player-1 .score-button { color: var(--coral-dark); }
.player-2 .score-button { color: var(--teal-dark); }
.player-3 .score-button { color: var(--coral-dark); }
.player-4 .score-button { color: var(--teal-dark); }
.player-5 .score-button { color: var(--coral-dark); }
.player-6 .score-button { color: var(--teal-dark); }
.player-7 .score-button { color: var(--coral-dark); }
.player-8 .score-button { color: var(--teal-dark); }

.player.is-leading { box-shadow: 5px 5px 0 var(--ink), 0 0 0 4px rgba(243,173,36,.72); }
.player.is-leading::after { content: '★ LEADING'; margin-top: 12px; color: #fff5c7; font-size: .65rem; font-weight: 900; letter-spacing: .1em; }

.edit-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.edit-controls button {
  width: 54px;
  height: 50px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}

.edit-controls button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.edit-controls button:disabled { opacity: .4; cursor: not-allowed; }
.edit-controls span { color: white; font-size: .72rem; font-weight: 800; text-align: center; text-transform: uppercase; }

.mode-message {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 0;
  color: #667478;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}

.mode-message span { color: var(--gold); }

.actions, .winner-actions {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 10px;
}

.actions button, .winner-actions button, .restart-button {
  min-height: 52px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 850;
  box-shadow: 0 4px 0 var(--ink);
}

.actions button:active, .winner-actions button:active, .restart-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.secondary-action, .back-action {
  background: var(--paper);
  color: var(--ink);
}

.secondary-action.active { background: #ffe7a7; }

.celebrate-action, .share-action {
  background: var(--gold);
  color: var(--ink);
}

.actions button span, .winner-actions button span { margin-right: 6px; }

.winner-card {
  position: relative;
  padding: 30px 20px 20px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #fff6d8;
  box-shadow: 5px 5px 0 var(--ink);
  text-align: center;
}

.winner-kicker {
  margin: 0 0 5px;
  color: #7d5b11;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.winner-card h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2.4rem, 8vw, 4rem);
  letter-spacing: -.05em;
}

.final-score {
  margin: 5px 0 20px;
  font: 800 clamp(2.4rem, 8vw, 4rem)/1 Georgia, serif;
}

.final-score span { color: var(--coral); }
.winner-card label {
  display: block;
  margin-bottom: 7px;
  color: #59686b;
  font-size: .7rem;
  font-weight: 900;
  text-align: left;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.winner-card textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 13px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.45;
}

.winner-burst{position:relative;z-index:1;display:grid;place-items:center;width:86px;height:86px;margin:-16px auto 6px;border:3px solid var(--ink);border-radius:50%;background:var(--gold);box-shadow:4px 4px 0 var(--ink)}
.winner-burst span{font-size:3rem;line-height:1;filter:drop-shadow(1px 2px 0 #fff5d7)}
.winner-burst i{position:absolute;font:900 1.45rem/1 Georgia,serif;color:var(--coral)}
.winner-burst i:nth-child(2){left:-18px;top:4px}.winner-burst i:nth-child(3){right:-15px;bottom:1px;color:var(--teal)}
.winner-card.is-celebrating .winner-burst{animation:trophy-pop .7s cubic-bezier(.2,1.3,.35,1)}
.winner-card.is-celebrating .confetti i{animation:confetti-fall 1.1s ease-out both}
.winner-card.is-celebrating .confetti i:nth-child(2){animation-delay:.08s}.winner-card.is-celebrating .confetti i:nth-child(3){animation-delay:.14s}.winner-card.is-celebrating .confetti i:nth-child(4){animation-delay:.04s}.winner-card.is-celebrating .confetti i:nth-child(5){animation-delay:.18s}.winner-card.is-celebrating .confetti i:nth-child(6){animation-delay:.11s}
@keyframes trophy-pop{0%{transform:scale(.35) rotate(-20deg)}55%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes confetti-fall{0%{opacity:0;transform:translateY(-28px) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(148px) rotate(260deg)}}
.social-choices{display:grid;grid-template-columns:1.25fr 1fr .65fr 1fr;gap:8px;margin-top:10px}
.social-choices button{min-height:46px;border:2px solid var(--ink);border-radius:11px;background:var(--gold);color:var(--ink);box-shadow:0 3px 0 var(--ink);font:900 .75rem/1 Arial,sans-serif;cursor:pointer}
.social-choices button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.x-action{font-size:1.05rem!important}
.winner-actions{grid-template-columns:1fr;margin-top:10px}
.confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; }
.confetti i:nth-child(1) { left: 8%; top: 20px; background: var(--coral); transform: rotate(-25deg); }
.confetti i:nth-child(2) { left: 18%; top: 52px; background: var(--teal); transform: rotate(44deg); }
.confetti i:nth-child(3) { right: 9%; top: 26px; background: var(--gold); transform: rotate(32deg); }
.confetti i:nth-child(4) { right: 19%; top: 60px; background: var(--coral); transform: rotate(-40deg); }
.confetti i:nth-child(5) { left: 29%; top: 18px; background: var(--gold); transform: rotate(72deg); }
.confetti i:nth-child(6) { right: 30%; top: 14px; background: var(--teal); transform: rotate(-65deg); }

.footer { padding-top: 18px; text-align: center; }

.restart-button {
  width: 100%;
  background: var(--paper);
  color: var(--coral-dark);
}

.footer p {
  margin: 13px 0 0;
  color: #778184;
  font-size: .7rem;
  font-weight: 700;
}

.footer p span { color: var(--teal); }
.footer-links { margin-top: 14px; }
.footer-links a {
  color: var(--teal-dark);
  font-size: .78rem;
  font-weight: 900;
  text-underline-offset: 3px;
}
.footer .legal-line {
  margin-top: 9px;
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.45;
}
.support-card { max-width: 680px; }
.support-header { text-align: center; }
.support-header .brand-logo { width: min(100%, 390px); }
.support-copy { display: grid; gap: 12px; margin-top: 8px; }
.support-copy section {
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: white;
}
.support-copy h2 { margin: 0 0 7px; font: 900 1.15rem/1.1 Georgia,serif; }
.support-copy p { margin: 0; font-size: .88rem; line-height: 1.55; }
.support-back {
  display: inline-flex;
  margin-top: 18px;
  color: var(--teal-dark);
  font-weight: 900;
  text-underline-offset: 3px;
}
.top-install{display:inline-flex;align-items:center;justify-content:center;margin:12px auto 0;border:2px solid var(--ink);border-radius:999px;background:var(--paper);padding:8px 12px;color:var(--teal-dark);box-shadow:2px 2px 0 var(--ink);font-size:.7rem;font-weight:900;cursor:pointer}.top-install:active{transform:translate(2px,2px);box-shadow:none}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23,49,55,.66);
}

.confirm-dialog {
  width: min(100%, 410px);
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
  text-align: center;
}

.dialog-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--coral);
  color: white;
  font-size: 1.6rem;
}

.confirm-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: 1.8rem; }
.confirm-dialog p { margin: 9px 0 22px; color: #667478; line-height: 1.5; }
.confirm-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.confirm-dialog button { min-height: 48px; border: 2px solid var(--ink); border-radius: 10px; cursor: pointer; font-weight: 850; }
.cancel-button { grid-column: 1 / -1; background: var(--paper); color: var(--ink); }
.keep-players-button { background: var(--teal); color: white; }
.confirm-button { background: var(--coral); color: white; }

.install-backdrop{position:fixed;z-index:110;inset:0;display:grid;place-items:center;padding:18px;background:rgba(23,49,55,.82)}
.install-backdrop[hidden]{display:none}.install-sheet{width:min(100%,390px);padding:18px;border:2px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:8px 8px 0 #071417;text-align:center}.install-heading{display:flex;align-items:flex-start;justify-content:space-between;text-align:left}.install-heading p{margin:0 0 3px;color:var(--coral-dark);font-size:.62rem;font-weight:900;letter-spacing:.12em}.install-heading h2{margin:0;font:900 1.4rem/1 Georgia,serif}.install-heading button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid var(--ink);border-radius:50%;background:white;font-size:1.35rem;font-weight:900;cursor:pointer}.install-icon{display:grid;place-items:center;width:92px;height:92px;margin:22px auto 12px;border:4px solid var(--ink);border-radius:24px;background:linear-gradient(135deg,var(--coral) 0 49%,var(--teal) 49% 100%);box-shadow:0 8px 0 var(--ink);color:var(--paper);font:900 2rem/1 Georgia,serif;text-shadow:2px 2px 0 var(--ink)}.install-sheet>h3{margin:0 0 16px;font:900 1.25rem/1 Georgia,serif}.install-steps{display:grid;gap:8px;margin:0 0 18px;text-align:left}.install-steps p{display:grid;grid-template-columns:65px 1fr;gap:8px;margin:0;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:.75rem;line-height:1.4}.install-steps b{color:var(--coral-dark);font-weight:900}.install-steps strong{font-size:1.1rem}.install-done{width:100%;min-height:48px;border:2px solid var(--ink);border-radius:12px;background:var(--teal);color:white;box-shadow:0 4px 0 var(--ink);font-weight:900;text-transform:uppercase;cursor:pointer}

@media (max-width: 560px) {
  .page-shell { padding: 0; place-items: start center; }
  .app-card {
    min-height: 100svh;
    width:100%;
    padding: max(22px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .topbar { padding: 6px 0 24px; }
  .scoreboard { gap: 8px; }
  h1{font-size:clamp(3rem,17vw,4.4rem)}
  .game-name-field{margin-top:18px}
  .game-name-field input{padding:10px 12px}
  .player { padding: 16px 8px 10px; border-radius: 15px; box-shadow: 3px 3px 0 var(--ink); }
  .score { margin: 16px 0 18px; font-size:clamp(5.8rem,25vw,8rem); }
  .score-button { min-height: 115px; }
  .mode-message { min-height: 46px; }
  .actions button { min-height: 50px; font-size: .8rem; }
  .connect-card{margin:0}
  .winner-card { padding: 28px 12px 14px; box-shadow: 3px 3px 0 var(--ink); }
  .winner-actions { grid-template-columns: 1fr; }
}

/* Full-screen TapPodium championship celebration */
body.celebration-open { overflow: hidden; }
.winner-card {
  position: fixed;
  z-index: 200;
  inset: 0;
  width: 100%;
  height: 100svh;
  margin: 0;
  padding: max(34px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 30%,rgba(255,255,255,.98) 0 15%,rgba(255,236,108,.94) 36%,transparent 60%),linear-gradient(145deg,#12c7bf 0 23%,#1169e8 23% 54%,#0b176b 54% 76%,#ff7615 76% 100%);
  box-shadow: none;
  color: #fff;
  isolation: isolate;
}
.winner-card::before,.winner-card::after { content:"";position:fixed;z-index:-1;inset:-30%;pointer-events:none; }
.winner-card::before { background:repeating-conic-gradient(from 0deg at 50% 31%,rgba(255,255,255,.2) 0 8deg,transparent 8deg 18deg);animation:victory-spin 18s linear infinite; }
.winner-card::after { inset:0;background:radial-gradient(circle at 9% 12%,#ffc928 0 7px,transparent 8px),radial-gradient(circle at 88% 17%,#fff 0 5px,transparent 6px),radial-gradient(circle at 16% 70%,#ff7a18 0 8px,transparent 9px),radial-gradient(circle at 83% 76%,#16c7bd 0 9px,transparent 10px),radial-gradient(circle at 68% 8%,#ff7a18 0 6px,transparent 7px),radial-gradient(circle at 30% 88%,#ffc928 0 6px,transparent 7px);animation:victory-sparkle 1.1s ease-in-out infinite alternate; }
.victory-rays { position:absolute;z-index:-1;left:50%;top:26%;width:min(118vw,760px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#ffc928 0 9deg,transparent 9deg 20deg);opacity:.34;transform:translate(-50%,-50%); }
.winner-card .winner-burst { width:132px;height:132px;margin:8px auto 12px;border:4px solid var(--ink);box-shadow:0 9px 0 var(--ink),0 18px 38px rgba(0,0,0,.28); }
.winner-card .winner-burst span { width:122px;height:122px;font-size:4.4rem; }
.winner-card .winner-kicker { color:var(--ink);font-size:.86rem;letter-spacing:.2em; }
.winner-card h2 { color:#fff;font:1000 clamp(3.3rem,14vw,6.8rem)/.88 Arial,sans-serif;letter-spacing:-.07em;text-transform:uppercase;text-shadow:0 5px 0 var(--ink),0 10px 24px rgba(0,0,0,.28); }
.winner-card .final-score { display:inline-block;margin:18px auto 22px;padding:12px 22px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 6px 0 var(--ink);font:1000 clamp(1.35rem,5.5vw,2.25rem)/1.1 Arial,sans-serif; }
.winner-card label { width:min(100%,620px);margin-inline:auto;color:#fff;text-shadow:0 2px 0 var(--ink); }
.winner-card textarea { display:block;width:min(100%,620px);min-height:94px;margin-inline:auto;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink); }
.winner-card .social-choices,.winner-card .winner-actions { width:min(100%,620px);margin-inline:auto; }
.winner-card .social-choices button,.winner-card .winner-actions button { min-height:54px;border-width:3px;border-radius:14px;box-shadow:0 5px 0 var(--ink); }
.winner-card .back-action { background:#fff; }
.victory-effects { position:fixed;z-index:8;inset:0;overflow:hidden;pointer-events:none; }
.mega-confetti { position:absolute;left:0;top:-28px;width:11px;height:22px;border-radius:3px;background:var(--color);box-shadow:0 0 0 1px rgba(11,23,107,.25);transform:translateX(var(--x));animation:mega-confetti-fall var(--fall) cubic-bezier(.2,.65,.4,1) var(--delay) both; }
.mega-confetti:nth-child(3n) { width:16px;height:9px;border-radius:50%; }.mega-confetti:nth-child(4n) { clip-path:polygon(50% 0,100% 100%,0 100%); }
.firework { position:absolute;left:var(--fx);top:var(--fy);width:8px;height:8px;border-radius:50%;color:var(--fcolor);background:currentColor;opacity:0;box-shadow:0 -54px,38px -38px,54px 0,38px 38px,0 54px,-38px 38px,-54px 0,-38px -38px,0 -30px 0 2px,21px -21px 0 2px,30px 0 0 2px,21px 21px 0 2px,0 30px 0 2px,-21px 21px 0 2px,-30px 0 0 2px,-21px -21px 0 2px;animation:firework-burst 1.15s ease-out var(--fdelay) 2 both; }
.celebration-crowd { position:relative;z-index:9;display:flex;justify-content:center;align-items:end;gap:clamp(2px,2vw,18px);width:min(100%,680px);margin:24px auto -18px;font-size:clamp(2rem,9vw,4.5rem);filter:drop-shadow(0 5px 0 var(--ink)); }
.celebration-crowd span { display:inline-block;transform-origin:50% 100%;animation:crowd-jump .55s ease-in-out infinite alternate; }.celebration-crowd span:nth-child(2n){animation-delay:-.25s}.celebration-crowd span:nth-child(3n){animation-delay:-.42s}
.winner-card.is-celebrating { animation:victory-arrive .42s cubic-bezier(.2,.9,.25,1) both; }
.winner-card.is-celebrating h2 { animation:champion-bounce .85s cubic-bezier(.2,1.4,.3,1) .18s both,champion-glow 1s ease-in-out 1.05s infinite alternate; }
.winner-card.is-celebrating .winner-kicker { animation:banner-drop .6s cubic-bezier(.2,1.3,.3,1) .1s both; }
.winner-card.is-celebrating .final-score { animation:score-pulse .7s cubic-bezier(.2,1.35,.3,1) .55s both,score-float 1.25s ease-in-out 1.3s infinite alternate; }
.winner-card.is-celebrating textarea { animation:rise-in .55s ease-out .82s both; }
.winner-card.is-celebrating .social-choices button { animation:rise-in .48s cubic-bezier(.2,1.2,.3,1) both; }.winner-card.is-celebrating .social-choices button:nth-child(1){animation-delay:.95s}.winner-card.is-celebrating .social-choices button:nth-child(2){animation-delay:1.05s}.winner-card.is-celebrating .social-choices button:nth-child(3){animation-delay:1.15s}.winner-card.is-celebrating .social-choices button:nth-child(4){animation-delay:1.25s}
.winner-card.is-celebrating .winner-actions { animation:rise-in .48s ease-out 1.35s both; }
@keyframes victory-arrive{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes victory-spin{to{transform:rotate(360deg)}}@keyframes victory-sparkle{to{opacity:.45;transform:scale(1.035)}}
@keyframes mega-confetti-fall{0%{opacity:0;transform:translate(var(--x),-5vh) rotate(0)}8%{opacity:1}100%{opacity:.95;transform:translate(calc(var(--x) + var(--drift)),110vh) rotate(var(--spin))}}@keyframes firework-burst{0%{opacity:0;transform:scale(.08)}18%{opacity:1}72%{opacity:.95;transform:scale(1.55)}100%{opacity:0;transform:scale(1.9)}}@keyframes crowd-jump{from{transform:translateY(5px) rotate(-4deg)}to{transform:translateY(-12px) rotate(5deg) scale(1.08)}}
@keyframes champion-bounce{0%{opacity:0;transform:translateY(-70px) scale(.55) rotate(-5deg)}62%{opacity:1;transform:translateY(8px) scale(1.11) rotate(2deg)}100%{transform:none}}@keyframes champion-glow{to{text-shadow:0 5px 0 var(--ink),0 0 18px #fff,0 0 38px #ffc928,0 12px 28px rgba(0,0,0,.34);transform:scale(1.025)}}@keyframes banner-drop{from{opacity:0;transform:translateY(-24px) rotate(-4deg)}to{opacity:1;transform:none}}@keyframes score-pulse{from{opacity:0;transform:scale(.4) rotate(7deg)}70%{opacity:1;transform:scale(1.12) rotate(-2deg)}to{transform:none}}@keyframes score-float{to{transform:translateY(-7px) scale(1.035);box-shadow:0 11px 0 var(--ink),0 18px 28px rgba(0,0,0,.22)}}@keyframes rise-in{from{opacity:0;transform:translateY(38px) scale(.88)}to{opacity:1;transform:none}}
@media(max-width:520px){.winner-card{padding-inline:12px}.winner-card .winner-burst{width:116px;height:116px;margin-top:0}.winner-card .winner-burst span{width:106px;height:106px;font-size:3.8rem}.winner-card .social-choices{grid-template-columns:1.4fr 1fr 1fr}.winner-card .copy-action{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.winner-card::before,.winner-card::after,.winner-card.is-celebrating,.mega-confetti,.firework,.celebration-crowd span{animation:none!important}}

@media (max-width: 350px) {
  .app-card { padding-inline: 8px; }
  .player { padding-inline: 6px; }
  .edit-controls { grid-template-columns: 46px 1fr 46px; }
  .edit-controls button { width: 46px; }
  .actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .score.score-pop { animation: none !important; }
}

/* TapPodium brand theme */
:root {
  --ink: #0b176b;
  --cream: #fff8ec;
  --paper: #ffffff;
  --coral: #ff7a18;
  --coral-dark: #c84b00;
  --teal: #16c7bd;
  --teal-dark: #087d78;
  --gold: #ffc928;
  --line: rgba(11, 23, 107, .2);
  --royal: #1268e8;
  --cyan: #19bfea;
}

html {
  background: #fff8ec;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 12%, rgba(25,191,234,.18) 0 10px, transparent 11px),
    radial-gradient(circle at 91% 18%, rgba(255,201,40,.24) 0 13px, transparent 14px),
    radial-gradient(circle at 12% 88%, rgba(255,122,24,.14) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 83%, rgba(22,199,189,.15) 0 11px, transparent 12px),
    radial-gradient(circle at 50% 0, #fffef9 0, #fff8ec 68%);
  font-family: ui-rounded, "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

button, input, textarea,
.score, .winner-card h2, .final-score, .confirm-dialog h2,
.install-heading h2, .install-sheet > h3, .support-copy h2 {
  font-family: ui-rounded, "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 4px solid var(--cyan);
  outline-offset: 3px;
}

.page-shell {
  padding: 24px;
}

.app-card {
  position: relative;
  width: min(100%, 860px);
  padding: 30px;
  border: 3px solid var(--ink);
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 0 rgba(11,23,107,.9), 0 24px 50px rgba(11,23,107,.15);
}

.topbar {
  padding: 0 0 22px;
}

.brand-logo {
  width: min(100%, 560px);
  margin: -58px auto -48px;
}

.eyebrow {
  margin-top: 4px;
  color: var(--ink);
  font-family: ui-rounded, "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.5vw, 1.32rem);
  font-weight: 900;
}

.product-deck {
  margin: 6px 0 0;
  color: #566080;
  font-size: .92rem;
  font-weight: 700;
}

.game-name-field {
  margin-top: 18px;
}

.game-name-field label,
.player > label {
  color: var(--ink);
  font-size: .75rem;
}

.game-name-field input,
.player-name {
  min-height: 48px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fffef9;
  color: var(--ink);
  font-size: max(16px, 1.08rem);
  box-shadow: 0 4px 0 rgba(11,23,107,.72);
}

.game-name-field input {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.scoreboard {
  gap: 16px;
}

.player {
  padding: 18px 16px 16px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}

.player-1, .player-5 { background: linear-gradient(145deg, #ffb22e, #ff7518); }
.player-2, .player-6 { background: linear-gradient(145deg, #52e7db, #16bcb4); }
.player-3, .player-7 { background: linear-gradient(145deg, #35c9f2, #167fea); }
.player-4, .player-8 { background: linear-gradient(145deg, #ffe15d, #ffc928); }

.remove-player {
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

.player-name {
  padding-inline: 48px;
  font-weight: 900;
}

.score {
  margin: 22px 0 24px;
  color: #fff;
  font-family: ui-rounded, "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(5.4rem, 14vw, 8rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.04em;
  text-shadow: 0 5px 0 var(--ink), 0 8px 16px rgba(11,23,107,.18);
}

.player-4 .score, .player-8 .score { color: var(--ink); text-shadow: 0 4px 0 rgba(255,255,255,.62); }

.score-button {
  min-height: clamp(128px, 19vw, 168px);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fff8e8);
  color: var(--ink) !important;
  box-shadow: 0 6px 0 var(--ink);
  user-select: none;
}

.score-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.score-button:active { transform: translateY(4px) scale(.985); box-shadow: 0 2px 0 var(--ink); }
.score-button .plus { color: var(--royal); font-family: inherit; font-size: 4rem; }
.score-button span:last-child { color: var(--ink); font-size: 1rem; text-transform: none; }

.player.is-leading {
  box-shadow: 0 7px 0 var(--ink), 0 0 0 5px rgba(255,201,40,.9), 0 0 28px rgba(255,201,40,.58);
}
.player.is-leading::after { color: var(--ink); font-size: .75rem; }
.edit-controls span { color: var(--ink); }

.mode-message {
  min-height: 54px;
  margin-top: 16px;
  color: #566080;
  font-size: .9rem;
}
.mode-message span { color: var(--orange, #ff7a18); }

.actions, .winner-actions { gap: 12px; }
.actions button, .winner-actions button, .restart-button {
  min-height: 54px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 4px 0 var(--ink);
  text-transform: none !important;
}
.celebrate-action, .share-action { background: linear-gradient(180deg, #ffe86c, var(--gold)); }
.actions .add-players-button { background: linear-gradient(180deg, #52e7db, var(--teal)); color: var(--ink); }
.actions .connect-phone-button { background: #fff; color: var(--ink); }
.secondary-action, .back-action { background: #fff; color: var(--ink); }

.install-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: #566080;
  font-size: .82rem;
  font-weight: 700;
}
.top-install {
  margin: 0;
  min-height: 44px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #eef9ff;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font-size: .78rem;
}

.winner-card {
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: linear-gradient(150deg, #fff9d8, #fff1a8);
  box-shadow: 0 7px 0 var(--ink);
}
.winner-kicker { color: var(--ink); }
.winner-card h2 { color: var(--royal); }

.footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.restart-button { background: #fff; color: #a73925; }
.footer p { font-size: .84rem; line-height: 1.45; }
.footer .legal-line { font-size: .78rem; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 12px;
  color: var(--royal);
  font-size: .88rem;
}

.support-card { max-width: 760px; }
.support-header .brand-logo { width: min(100%, 480px); }
.support-copy { gap: 14px; margin-top: 20px; }
.support-copy section {
  padding: 18px;
  border: 2px solid var(--line);
  border-left: 8px solid var(--cyan);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(11,23,107,.08);
}
.support-copy section:nth-child(2) { border-left-color: var(--orange, #ff7a18); }
.support-copy section:nth-child(3) { border-left-color: var(--teal); }
.support-copy section:nth-child(4) { border-left-color: var(--gold); }
.support-copy h2 { color: var(--ink); font-size: 1.16rem; }
.support-copy p { color: #485270; font-size: .95rem; }
.support-back { min-height: 44px; align-items: center; color: var(--royal); }

.install-backdrop { background: rgba(11,23,107,.78); }
.install-sheet, .confirm-dialog {
  border: 3px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink), 0 22px 48px rgba(7,25,111,.26);
}
.install-icon {
  border-color: var(--ink);
  background: linear-gradient(135deg, var(--orange, #ff7a18) 0 49%, var(--cyan) 49% 100%);
  box-shadow: 0 7px 0 var(--ink);
}

@media (max-width: 560px) {
  body { background: #fff; }
  .page-shell { padding: 0; }
  .app-card {
    padding: max(14px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .topbar { padding-bottom: 18px; }
  .brand-logo { width: min(96vw, 430px); margin: -48px auto -42px; }
  .product-deck { font-size: .84rem; }
  .scoreboard { gap: 8px; }
  .player { padding: 12px 7px 10px; border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
  .remove-player { width: 44px; height: 44px; top: 5px; right: 5px; }
  .player-name { min-height: 46px; padding-inline: 40px; font-size: 16px; }
  .score { margin: 18px 0 20px; font-size: clamp(4.8rem, 25vw, 7rem); }
  .score-button { min-height: 126px; border-radius: 16px; }
  .score-button .plus { font-size: 3.5rem; }
  .score-button span:last-child { font-size: .9rem; }
  .actions { gap: 9px; }
  .actions button { font-size: .82rem; }
  .install-prompt { margin-top: 16px; }
  .footer p { font-size: .78rem; }
  .footer .legal-line { font-size: .72rem; }
  .support-card { padding-inline: 16px; }
  .support-header .brand-logo { width: min(92vw, 400px); }
}

/* Keep the celebration above later brand-card overrides. */
body.celebration-open .winner-card {
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 30%,rgba(255,255,255,.98) 0 15%,rgba(255,236,108,.94) 36%,transparent 60%),linear-gradient(145deg,#12c7bf 0 23%,#1169e8 23% 54%,#0b176b 54% 76%,#ff7615 76% 100%);
  box-shadow: none;
}
body.celebration-open .winner-card h2 { color:#fff; }
body.celebration-open .winner-card .winner-kicker { color:var(--ink); }