:root{
  --felt:#0F2A22;
  --felt-2:#16382D;
  --felt-3:#20493B;
  --bone:#EFE9DC;
  --bone-dim:#8FA79B;
  --ink:#14100E;
  --heart:#C4342B;
  --gold:#C9A227;
  --line:rgba(239,233,220,.13);
  --radius:12px;
}

/* the whole table darkens when the sun goes down */
body.night{
  --felt:#101426;
  --felt-2:#171C31;
  --felt-3:#232941;
  --bone-dim:#8B90AB;
  --line:rgba(239,233,220,.11);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100dvh;
  background:var(--felt);
  color:var(--bone);
  font-family:'Karla',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  padding:26px 18px 40px;
  transition:background .8s ease;
}
/* felt weave */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}

.stage{width:100%;max-width:560px;position:relative;z-index:1}
.screen{width:100%}
.hidden{display:none !important}
.center{text-align:center}

.stack{display:flex;flex-direction:column;gap:16px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.stack-lg{display:flex;flex-direction:column;gap:30px}

/* ---------------- type ---------------- */
.wordmark{
  font-family:'Bodoni Moda',serif;
  font-weight:400;
  font-size:clamp(2.7rem,12vw,4.1rem);
  line-height:.94;
  letter-spacing:-.015em;
}
.wordmark .amp{
  display:block;font-style:italic;color:var(--gold);
  font-size:.55em;line-height:1;margin:.04em 0;
}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
}
.eyebrow.spread{display:flex;justify-content:space-between;align-items:baseline}
.lede{color:var(--bone-dim);font-size:1rem;line-height:1.6;max-width:40ch}
.status{
  font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.08em;
  color:var(--bone-dim);text-align:center;line-height:1.6;
}
.dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.error{
  color:#FF9E96;font-size:.9rem;line-height:1.5;
  padding:12px 14px;background:rgba(196,52,43,.16);border-radius:10px;
}

/* ---------------- controls ---------------- */
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.btn{
  display:block;width:100%;padding:16px 18px;border-radius:var(--radius);
  font-size:1.02rem;font-weight:600;text-align:start;
  transition:transform .12s ease,background .15s ease,opacity .15s ease;
}
.btn small{display:block;font-weight:300;font-size:.84rem;opacity:.72;margin-top:3px}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-gold{background:var(--gold);color:#231B05}
.btn-gold:hover:not(:disabled){background:#dbb432}
.btn-quiet{background:var(--felt-2);border:1px solid var(--line);color:var(--bone)}
.btn-quiet:hover{background:var(--felt-3)}

.linkbtn{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);padding:10px 0;width:100%;
}
.linkbtn:hover{color:var(--bone)}
.linkbtn.armed{color:#FF9E96}
.linkbtn.armed:hover{color:#FF9E96}

label{
  display:block;font-family:'Space Mono',monospace;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:8px;
}
input{
  width:100%;padding:14px 16px;background:rgba(0,0,0,.24);
  border:1px solid var(--line);border-radius:10px;color:var(--bone);
  font-family:'Karla',sans-serif;font-size:1rem;
}
input:focus{outline:2px solid var(--gold);outline-offset:1px}
.code-in{
  font-family:'Space Mono',monospace;font-size:1.55rem;
  letter-spacing:.35em;text-align:center;text-transform:uppercase;
  direction:ltr;
}
.code-display{
  font-family:'Space Mono',monospace;font-weight:700;
  font-size:clamp(2.6rem,15vw,3.7rem);letter-spacing:.22em;
  color:var(--gold);text-align:center;padding-left:.22em;
  direction:ltr;
}

/* ---------------- the card (signature) ---------------- */
.card-wrap{perspective:1400px;display:flex;justify-content:center}
.card{
  width:min(280px,78vw);aspect-ratio:5/7;position:relative;
  transform-style:preserve-3d;
}
.card.deal{animation:deal 1.05s cubic-bezier(.22,1,.28,1) both}
@keyframes deal{
  0%{transform:translateY(46px) rotateY(180deg) scale(.9);opacity:0}
  30%{opacity:1}
  100%{transform:none}
}
.card-face,.card-back{
  position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;
  display:flex;flex-direction:column;
}
.card-back{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(45deg,#7E1F19 0 6px,#93251E 6px 12px);
  border:8px solid var(--bone);
}
.card-face{
  background:var(--bone);color:var(--ink);
  padding:16px;box-shadow:0 22px 44px rgba(0,0,0,.45);
  align-items:center;justify-content:center;text-align:center;
}
/* Suit mark on the personal card: kept small and a single neutral ink colour
   (never --heart red) on purpose — from arm's length across the table it
   should read as "a card", not as which suit it is. */
.card-face .pip{
  font-size:clamp(1.3rem,5vw,1.6rem);line-height:1;color:var(--ink);
}
.card-face .title{
  font-family:'Bodoni Moda',serif;font-size:1.55rem;margin-top:10px;letter-spacing:-.01em;
}
.card-face .power{
  font-size:.86rem;line-height:1.45;color:#4B443E;margin-top:10px;max-width:24ch;
}
.card-face .mates{
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(20,16,14,.16);
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.06em;
  color:#4B443E;line-height:1.9;max-width:24ch;
}
.suit-heart{color:var(--heart)}
.suit-spade{color:var(--ink)}
.card-face.is-king{box-shadow:0 22px 44px rgba(0,0,0,.45),0 0 0 3px var(--gold)}

/* ---------------- phase header ---------------- */
.phasebar{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.phase-name{
  font-family:'Bodoni Moda',serif;font-size:1.7rem;letter-spacing:.01em;
}
.phase-clock{
  font-family:'Space Mono',monospace;font-weight:700;font-size:1.7rem;
  font-variant-numeric:tabular-nums;color:var(--gold);direction:ltr;
}
.phase-clock.urgent{color:#FF7A6E;animation:pulse .9s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.track{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.track-fill{height:100%;background:var(--gold);width:100%;transition:width .35s linear}
.prompt{font-size:1.05rem;line-height:1.55;color:var(--bone)}

/* ---------------- target grid ---------------- */
/* Names run to 32 characters, which won't fit in half a phone's width — so the
   grid drops to one column when two would be too narrow to read.
   minmax(0,…), never a bare 1fr: 1fr floors each column at min-content, which
   let a long name push the columns (and the whole page) wider than the screen
   instead of wrapping inside the tile. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px}
.target{
  background:var(--felt-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 14px;text-align:start;display:flex;align-items:center;gap:10px;
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.target:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
.target:disabled{opacity:.4;cursor:not-allowed}
/* Names run to 32 characters, so wrap to two lines rather than ellipsizing on
   one — two long names that share a prefix have to stay tellable apart. */
.target .t-name{
  font-weight:600;font-size:.98rem;line-height:1.25;min-width:0;
  overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.target .t-count{
  margin-inline-start:auto;font-family:'Space Mono',monospace;font-size:.78rem;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.target.picked{border-color:var(--gold);background:var(--felt-3)}
.target.picked .t-name::after{content:" ✓";color:var(--gold)}

/* Your own tile in the day-vote grid: informational only, not a click target.
   It carries the disabled attribute, so it has to opt back out of the dimming
   above — you need to read your own tally clearly. */
.target.self,.target.self:disabled{cursor:default;opacity:1}
.target.self:hover{border-color:var(--line);transform:none}
.target.self .t-name{color:var(--gold)}
.target .t-you{
  flex:none;font-family:'Space Mono',monospace;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}

/* ---------------- table list ---------------- */
.table-list{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:10px;padding:12px 2px;
  border-top:1px solid var(--line);font-size:.95rem;
}
.row:first-child{border-top:none}
.row .seat{
  font-family:'Space Mono',monospace;font-size:.7rem;color:var(--bone-dim);
  min-width:1.8em;
}
.row .r-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tag{
  margin-left:auto;font-family:'Space Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);
}
.row.dead .r-name{text-decoration:line-through;opacity:.45}
.row.dead .seat{opacity:.45}
.row.me .r-name{color:var(--gold);font-weight:600}
.row .suit{font-size:1.05rem}
.row.away .tag{color:#FF9E96}

/* ---------------- notes, awards ---------------- */
.note{
  background:var(--felt-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:14px 16px;font-size:.95rem;line-height:1.55;
}
.note.blow{
  animation:blow .5s cubic-bezier(.2,1.3,.4,1) both;
  border-left-color:var(--heart);
}
@keyframes blow{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.note .n-head{
  font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);display:block;margin-bottom:6px;
}

.final{
  font-family:'Bodoni Moda',serif;font-size:clamp(2rem,9vw,2.9rem);line-height:1.08;
}
.final.hearts{color:var(--heart)}
.final.spades{color:var(--bone)}
.award{
  background:var(--felt-2);border:1px solid var(--gold);border-radius:var(--radius);
  padding:18px;text-align:center;
}
.award .a-label{
  font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
.award .a-name{font-family:'Bodoni Moda',serif;font-size:1.8rem;margin-top:6px}
.award .a-sub{font-size:.82rem;color:var(--bone-dim);margin-top:4px}

/* ---------------- modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:50;background:rgba(6,14,11,.88);
  display:flex;align-items:center;justify-content:center;padding:24px;
  backdrop-filter:blur(3px);
}
.modal-inner{display:flex;flex-direction:column;gap:22px;width:100%;max-width:320px}

.footer{
  margin-top:36px;display:flex;justify-content:center;align-items:center;gap:9px;
  font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  color:rgba(239,233,220,.16);
}
.footer .dot{opacity:.6}
.footer .lang-toggle{
  font:inherit;letter-spacing:inherit;color:var(--bone-dim);direction:ltr;
  transition:color .15s ease;
}
.footer .lang-toggle:hover{color:var(--bone)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}