@font-face{
  font-family:'Card Characters';
  src:url('assets/fonts/Card%20Characters/CARDC___.TTF') format('truetype');
  font-display:swap;
}

:root{
  --felt-1:#0e3d2b;
  --felt-2:#06241a;
  --felt-hi:#155c40;
  --gold:#d4af6a;
  --gold-bright:#f3d99a;
  --card-bg:#fbfaf6;
  --card-line:#d8d2c2;
  --bicycle-blue:#123a7a;
  --bicycle-blue-2:#0a2758;
  --red:#c0392b;
  --black:#1a1a1a;
  --ink:#eef1ee;
  --muted:#9fb3a8;
  font-size:16px;
}

*{box-sizing:border-box;}
button{font-family:inherit;}
html,body{height:100%;}
body{
  margin:0;
  height:100vh;
  overflow:hidden;
  background:var(--felt-2);
  color:var(--ink);
  font-family:'Card Characters','Poppins',system-ui,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}

.table-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212,175,106,.10), transparent 55%),
    radial-gradient(ellipse at 50% 50%, var(--felt-hi) 0%, var(--felt-1) 45%, var(--felt-2) 100%);
}
.table-bg::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px);
  opacity:.15;
  mix-blend-mode:multiply;
}

h1{
  font-family:'Card Characters','Cinzel',serif;
  font-weight:900;
  letter-spacing:.03em;
  color:var(--gold-bright);
  text-shadow:0 2px 20px rgba(212,175,106,.35);
  margin:0;
}

.hidden{display:none !important;}

/* ---------- SELECTION ---------- */
#screen-mode, #screen-select{
  display:flex; flex-direction:column; align-items:center;
  max-width:640px; padding:0 20px; animation:fadeIn .8s ease both;
}
#screen-mode h1, #screen-select h1{ text-align:center; font-size:2.2rem; }
.subtitle{
  text-align:center; font-size:1.05rem; opacity:.8; margin:1em 0 2em; line-height:1.5;
}

.mode-picker{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.mode-card{
  width:220px; padding:1.6em 1.4em; border-radius:16px; cursor:pointer;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(160deg, var(--felt-1), var(--felt-2));
  border:2px solid rgba(212,175,106,.5); box-shadow:0 10px 25px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column; align-items:center; gap:.6em; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.mode-card:hover{ transform:translateY(-8px) scale(1.03); box-shadow:0 18px 34px rgba(212,175,106,.35); }
.mode-icon{ width:46px; height:46px; filter:invert(1); opacity:.9; }
.mode-title{ font-family:'Card Characters','Cinzel',serif; font-size:1.15rem; font-weight:700; color:var(--gold-bright); }
.mode-desc{ font-size:.85rem; color:var(--ink); opacity:.75; line-height:1.4; }

.king-picker{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.pick-card{
  border:none; background:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .25s ease;
}
.pick-card .card-face{
  width:110px; height:154px; border-radius:12px;
  transition:box-shadow .25s ease;
}
.pick-card:hover{ transform:translateY(-8px) scale(1.04); }
.pick-card:hover .card-face{ box-shadow:0 18px 34px rgba(212,175,106,.35); }
.name-input{
  width:64px; padding:.4em .3em; text-align:center;
  border-radius:8px; border:1px solid rgba(212,175,106,.4);
  background:rgba(255,255,255,.06); color:var(--ink); font-size:.95rem;
  font-family:'Card Characters','Cinzel',serif; letter-spacing:.1em; text-transform:uppercase;
}
.name-input::placeholder{ color:var(--muted); }
.name-input:focus{ outline:none; border-color:var(--gold-bright); }
.setup-warning{ color:#ff8b7a; font-size:.9rem; margin:.4em 0 0; }
#screen-select .btn-row{ margin-top:2.4em; }

/* ---------- RACE SCREEN (single-page layout) ---------- */
#screen-race{
  position:relative;
  width:100vw; height:100vh; padding:14px 22px;
  display:flex; flex-direction:column; gap:8px;
  animation:fadeIn .6s ease both;
}
.race-header{
  display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
}
.mini-title{
  font-size:1.55rem; white-space:nowrap; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.mini-title:hover{ opacity:.8; }
.mini-title:active{ transform:scale(.94); }

.pause-btn{
  font-weight:600; font-size:.85rem; letter-spacing:.03em;
  padding:.55em 1.2em; border-radius:24px; cursor:pointer;
  color:var(--felt-2); background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  border:none; box-shadow:0 6px 16px rgba(212,175,106,.35);
  transition:transform .15s ease, filter .15s ease;
}
.pause-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.pause-btn:disabled{ opacity:.4; cursor:default; transform:none; }

.race-main{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:stretch; justify-content:center; gap:20px;
}

/* ---------- timeline (pinned to the left, below the title) ---------- */
.timeline-panel{
  position:absolute; left:22px; top:74px; bottom:34px;
  width:340px; height:300px; margin:auto 0;
  display:flex; flex-direction:column; gap:8px;
}
.timeline-title{
  font-family:'Card Characters','Cinzel',serif; font-size:.85rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); opacity:.8; flex:0 0 auto;
}
.timeline{
  list-style:none; margin:0; padding:6px 10px 6px 0;
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:flex-end; gap:7px;
  mask-image:linear-gradient(to bottom, transparent 0, black 24px);
}
.timeline::-webkit-scrollbar{ width:5px; }
.timeline::-webkit-scrollbar-thumb{ background:rgba(212,175,106,.3); border-radius:3px; }
.tl-entry{
  flex:0 0 auto;
  font-size:.82rem; line-height:1.4; color:var(--ink);
  padding:7px 10px; border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(255,255,255,.04); border-left:2px solid var(--gold);
  animation:tlIn .35s ease both;
}
@keyframes tlIn{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:translateX(0); }
}

/* ---------- deck panel (left of board) ---------- */
.deck-panel{
  flex:0 0 auto; width:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.pile{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.pile-label{
  font-family:'Card Characters','Cinzel',serif; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); opacity:.65;
}

.deck-stack, .discard-stack{ position:relative; width:78px; height:112px; --th:5px; }
.deck-stack i, .discard-stack i{
  position:absolute; inset:0; transition:transform .5s ease, opacity .5s ease;
}
.deck-stack i:nth-child(1){ transform:translate(var(--th),var(--th)); }
.deck-stack i:nth-child(2){ transform:translate(calc(var(--th) * .5),calc(var(--th) * .5)); }
.deck-stack i:nth-child(3){ transform:translate(0,0); }
.discard-stack{ --th:0px; }
.discard-stack i:nth-child(1){ transform:translate(calc(var(--th) * -1),var(--th)); opacity:.6; }
.discard-stack i:nth-child(2){ transform:translate(calc(var(--th) * -.5),calc(var(--th) * .5)); opacity:.8; }
.discard-stack i:nth-child(3){ transform:translate(0,0); }

.deck-stack.shuffling i:nth-child(1){ animation:shuffleA .28s ease-in-out 5; }
.deck-stack.shuffling i:nth-child(2){ animation:shuffleB .28s ease-in-out 5; }
.deck-stack.shuffling i:nth-child(3){ animation:shuffleC .28s ease-in-out 5; }
@keyframes shuffleA{ 50%{ transform:translate(-12px,-5px) rotate(-10deg);} }
@keyframes shuffleB{ 50%{ transform:translate(12px,-7px) rotate(10deg);} }
@keyframes shuffleC{ 50%{ transform:translate(0,-9px) rotate(2deg);} }

.flip-container{ width:96px; height:138px; perspective:800px; }
.flip-container .flipper, .token.bonus-card .flipper{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
  border-radius:8px;
}
.flip-container .flipper.flipped, .token.bonus-card.flipped .flipper{ transform:rotateY(180deg); }
.flip-container .face, .token.bonus-card .face{
  position:absolute; inset:0; border-radius:8px; backface-visibility:hidden;
}
.token.bonus-card .face.pc-front{ transform:rotateY(180deg); }
.flip-container .face.pc-front{ transform:rotateY(180deg); }

.deck-counter{ font-size:.8rem; color:var(--muted); letter-spacing:.03em; }

/* ---------- Bicycle-style playing cards (shared) ---------- */
.pc-back{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 2px, transparent 2.5px) 0 0/14px 14px,
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--bicycle-blue), var(--bicycle-blue-2));
  border:2px solid #f4f1e8;
  outline:1px solid var(--bicycle-blue-2);
  outline-offset:-4px;
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.pc-front{
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
  font-family:'Card Characters','Cinzel',serif;
}
.pc-corner{
  position:absolute; font-weight:700;
  line-height:1.05; text-align:center; font-size:.8rem;
}
.pc-corner.tl{ top:6%; left:9%; }
.pc-corner.br{ bottom:6%; right:9%; transform:rotate(180deg); }
.pc-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.pc-center .big-pip{ font-size:1.8rem; }
.pc-center.has-figure .big-pip{ font-size:.85rem; margin-top:-2px; }
.pc-center .figure-img{ width:56%; height:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.pc-center .joker-img{ width:58%; }
.joker-star{
  width:1.6em; height:1.6em; border-radius:50%;
  border:1.5px solid currentColor;
  display:flex; align-items:center; justify-content:center;
}
.joker-star svg{ width:60%; height:60%; }
.pc-front.red .pc-corner, .pc-front.red .big-pip{ color:var(--red); }
.pc-front.black .pc-corner, .pc-front.black .big-pip{ color:var(--black); }

/* current-card face sizing */
.flip-container .pc-center .big-pip{ font-size:2.4rem; }
.flip-container .pc-corner{ font-size:1rem; }

/* ---------- BOARD ---------- */
.board-wrap{
  height:100%; flex:0 1 auto;
  display:flex; align-items:flex-start;
  padding-right:96px; /* reserved for the START/FINISH rails outside the grid */
  padding-bottom:38px; /* reserved for the YOU/PC rider labels below the grid */
}
#board{
  position:relative;
  height:100%;
  aspect-ratio:10/16;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(160deg, var(--felt-1), var(--felt-2));
  border:2px solid rgba(212,175,106,.5);
  border-radius:16px;
  box-shadow:0 25px 60px rgba(0,0,0,.6), inset 0 0 50px rgba(0,0,0,.5);
  padding:8px;
}
.rail{
  position:absolute; left:100%; margin-left:14px; width:max-content;
  display:flex; align-items:center; z-index:3;
  font-family:'Card Characters','Cinzel',serif; letter-spacing:.2em; font-size:.78rem; color:var(--gold);
  opacity:.85; pointer-events:none; white-space:nowrap;
}
.rail-top{ top:0; height:12.5%; }
.rail-bottom{ bottom:0; height:12.5%; }

.rider-label{
  position:absolute; top:100%; margin-top:12px; width:20%; text-align:center;
  font-family:'Card Characters','Cinzel',serif; font-size:.85rem; font-weight:700; letter-spacing:.1em;
  color:var(--gold-bright); opacity:.9; pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#label-S{ left:0%; }
#label-D{ left:20%; }
#label-C{ left:40%; }
#label-H{ left:60%; }

#cells{
  position:absolute; inset:8px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(8,1fr);
  gap:3px;
}
.cell{
  border:1px dashed rgba(212,175,106,.16);
  border-radius:6px;
  background:rgba(255,255,255,.02);
}
.cell.bonus-col{ background:rgba(212,175,106,.05); border-color:rgba(212,175,106,.28); }
.cell.start-row{ background:rgba(212,175,106,.06); }
.cell.finish-row{ background:rgba(212,175,106,.1); }

#tokens{ position:absolute; inset:8px; }

.token{
  position:absolute;
  border-radius:6px;
  transition: top .65s cubic-bezier(.34,1.3,.4,1);
}
.token.king{ z-index:2; }
.token.king .pc-corner{ font-size:.6rem; }
.token.king .big-pip{ font-size:.7rem; margin-top:-1px; }
.token.king.player{ box-shadow:0 0 0 2px var(--gold-bright), 0 4px 14px rgba(243,217,154,.5); }
.token.king.computer{ box-shadow:0 0 0 2px #7a9bc4, 0 4px 14px rgba(122,155,196,.5); }
.token.king.winner{ animation:winnerPulse 1s ease infinite; z-index:5; }

.token.bonus-card{ perspective:600px; }
.token.bonus-card .pc-corner{ font-size:.55rem; }
.token.bonus-card .big-pip{ font-size:1.05rem; }

/* entrance dealt-from-left animation */
.token.enter{ animation:dealIn .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes dealIn{
  from{ opacity:0; transform:translateX(-30px) scale(.7); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes winnerPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}

/* ---------- COUNTDOWN ---------- */
.countdown{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); z-index:50; pointer-events:none;
}
#countdown-number{
  font-family:'Card Characters','Cinzel',serif; font-size:8rem; color:var(--gold-bright);
  text-shadow:0 0 40px rgba(243,217,154,.7);
}
#countdown-number.pulse{ animation:countPulse .65s ease; }
@keyframes countPulse{
  from{ transform:scale(.4); opacity:0; }
  35%{ transform:scale(1.15); opacity:1; }
  to{ transform:scale(1); opacity:1; }
}

/* ---------- PAUSE OVERLAY ---------- */
.paused-overlay{
  position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,7,.55); backdrop-filter:blur(2px);
  animation:fadeIn .25s ease both;
}
.paused-box{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.paused-title{
  font-family:'Card Characters','Cinzel',serif; font-size:2.4rem; letter-spacing:.15em; color:var(--gold-bright);
  text-shadow:0 0 40px rgba(243,217,154,.5);
}

/* ---------- VICTORY ---------- */
#screen-victory{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,7,.78); backdrop-filter:blur(3px);
  animation:fadeIn .5s ease both;
}
.victory-card{
  position:relative; z-index:2;
  background:linear-gradient(160deg,var(--felt-1),var(--felt-2));
  border:1px solid rgba(212,175,106,.5);
  border-radius:18px; padding:2.4em 2.6em; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:victoryPop .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes victoryPop{
  from{ opacity:0; transform:scale(.6) translateY(30px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.victory-winner{
  width:96px; height:134px; margin:0 auto 1em;
  border-radius:10px; position:relative;
  animation:winnerPulse 1.4s ease infinite;
}
.victory-winner .pc-front{ width:100%; height:100%; }
.victory-winner .big-pip{ font-size:1rem; }

.pick-card .big-pip{ font-size:1rem; }
#victory-title{ font-family:'Card Characters','Cinzel',serif; color:var(--gold-bright); margin:.3em 0 .2em; font-size:1.9rem; }
#victory-subtitle{ opacity:.85; font-size:1rem; max-width:340px; }
.btn-row{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:1.4em; }
.btn-row button{
  min-width:150px; padding:.7em 1.2em; font-size:.95rem; font-weight:600;
  letter-spacing:.03em; border-radius:24px; cursor:pointer; text-align:center;
  transition:transform .2s ease;
}
#replay-btn, #resume-btn{
  color:var(--felt-2); background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  border:none; box-shadow:0 8px 20px rgba(212,175,106,.4);
}
.btn-ghost{
  color:var(--gold-bright); background:none; border:1px solid rgba(212,175,106,.5); box-shadow:none;
}
.btn-row button:hover{ transform:translateY(-3px); }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* ---------- RULES ---------- */
#rules-btn{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  font-family:'Card Characters','Cinzel',serif; font-size:1.3rem; font-weight:700;
  color:var(--felt-2); background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  box-shadow:0 8px 20px rgba(212,175,106,.4);
  transition:transform .15s ease, filter .15s ease;
}
#rules-btn:hover{ transform:translateY(-2px) scale(1.05); filter:brightness(1.05); }

.side-links{ position:fixed; left:24px; bottom:24px; z-index:70; display:flex; gap:12px; }
.side-btn{
  width:46px; height:46px; border-radius:50%; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--felt-2); background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  box-shadow:0 8px 20px rgba(212,175,106,.4);
  transition:transform .15s ease, filter .15s ease;
}
.side-btn img{ width:56%; height:56%; }
.side-btn:hover{ transform:translateY(-2px) scale(1.05); filter:brightness(1.05); }

#rules-panel{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,7,.78); backdrop-filter:blur(3px);
  animation:fadeIn .25s ease both;
}
.rules-card{
  background:linear-gradient(160deg,var(--felt-1),var(--felt-2));
  border:1px solid rgba(212,175,106,.5);
  border-radius:18px; padding:2em 2.6em; width:560px; max-width:88vw;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:victoryPop .4s cubic-bezier(.2,1.4,.4,1) both;
  display:flex; flex-direction:column; align-items:center;
}
.rules-card h2{ font-family:'Card Characters','Cinzel',serif; color:var(--gold-bright); margin:0 0 .8em; font-size:1.35rem; }
.rules-card ul{ margin:0 0 1.3em; padding-left:1.1em; display:flex; flex-direction:column; gap:.55em; align-self:stretch; }
.rules-card li{ font-size:.92rem; line-height:1.4; }

@media (max-width:1100px){
  .timeline-panel{ width:260px; height:190px; }
  .tl-entry{ font-size:.74rem; padding:6px 8px; }
}
@media (max-width:900px){
  #board{ aspect-ratio:9/16; }
  .board-wrap{ padding-right:70px; }
  .rail{ font-size:.62rem; margin-left:8px; }
  .deck-panel{ width:110px; }
  .flip-container{ width:78px; height:112px; }
  #countdown-number{ font-size:5rem; }
}