/* Ticket to Ride — RTL, vanilla */

#ttr-root { max-width: 1100px; margin: 14px auto; }

.ttr-code {
  font-size: 1.4rem; background: var(--clr-bg2);
  padding: 4px 14px; border-radius: 8px; letter-spacing: 1px;
}
.ttr-actions { margin-top: 12px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---- bar ---- */
.ttr-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--clr-bg2); border: 1px solid var(--clr-border);
  border-radius: 12px; padding: 10px 16px; margin-bottom: 14px;
}
.ttr-round { font-weight: 700; }
.ttr-turn { font-size: .95rem; }
.ttr-turn.you { color: #2563eb; font-weight: 700; }
.ttr-trains-left { font-size: .85rem; color: var(--clr-muted); }

/* ---- section titles ---- */
.ttr-section-title { font-size: 1rem; font-weight: 700; margin: 12px 0 8px; }

/* ---- train car cards (sprite: train-cards.jpg 2250×161, 9 cols) ---- */
.tcard {
  width: 72px; height: 46px; border-radius: 7px;
  display: inline-flex; align-items: flex-end; justify-content: flex-end;
  border: 2px solid rgba(0,0,0,.4); font-size: 0; /* hide color name text */
  cursor: default; box-sizing: border-box; position: relative;
  background-image: url('/static/img/ttr/train-cards.jpg');
  background-repeat: no-repeat;
  background-size: 900%;
  transition: transform .1s;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.tcard.selectable { cursor: pointer; }
.tcard.selectable:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.tcard.picked { outline: 3px solid #2563eb; outline-offset: 2px; }
/* sprite positions — right-to-left in image: green(8)…loco(0) */
.tcard-0 { background-position: 0%   50%; } /* locomotive */
.tcard-1 { background-position: 12.5% 50%; } /* pink */
.tcard-2 { background-position: 25%  50%; } /* white */
.tcard-3 { background-position: 37.5% 50%; } /* blue */
.tcard-4 { background-position: 50%  50%; } /* yellow */
.tcard-5 { background-position: 62.5% 50%; } /* orange */
.tcard-6 { background-position: 75%  50%; } /* black */
.tcard-7 { background-position: 87.5% 50%; } /* red */
.tcard-8 { background-position: 100% 50%; } /* green */

.tcard-count {
  position: absolute; top: -7px; right: -7px;
  background: #1e293b; border: 2px solid #f8fafc;
  border-radius: 50%; width: 22px; height: 22px; font-size: .72rem;
  display: flex; align-items: center; justify-content: center;
  color: #f8fafc; font-weight: 800; z-index: 1;
}

/* ---- face up area ---- */
.ttr-face-up-area {
  background: var(--clr-bg2); border: 1px solid var(--clr-border);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
/* face-up cards + deck side by side */
.ttr-cards-row { display: flex; gap: 12px; align-items: flex-start; }
.ttr-face-up { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }

/* deck buttons — each button IS the card-back image */
.ttr-deck-area { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.ttr-deck-btn {
  position: relative; width: 110px; height: 72px;
  padding: 0; border: 3px solid #c9a227; border-radius: 8px;
  cursor: default; overflow: hidden;
  box-shadow: 3px 5px 14px rgba(0,0,0,.55);
  transition: transform .12s, box-shadow .12s;
  background: #222;
}
/* the card-back image fills the entire button */
.ttr-deck-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
}
.deck-thumb-train { background-image: url('/static/img/ttr/deck-card.png'); }
.deck-thumb-dest  { background-image: url('/static/img/ttr/deck-dest.png'); }
/* count badge — bottom-left corner overlay */
.ttr-deck-info {
  position: absolute; bottom: 5px; left: 6px;
  display: flex; align-items: baseline; gap: 3px; z-index: 1;
}
.ttr-deck-num {
  font-size: 1.1rem; font-weight: 900; line-height: 1;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.ttr-deck-label {
  font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,.8); text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.ttr-deck-btn.selectable { border-color: #fbbf24; cursor: pointer; }
.ttr-deck-btn.selectable:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 0 2px #ffd700, 0 8px 18px rgba(0,0,0,.5);
}
.ttr-deck-btn:not(.selectable) { opacity: .82; }

/* ---- hand ---- */
.ttr-hand-area {
  background: var(--clr-bg2); border: 1px solid var(--clr-border);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.ttr-hand { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- destination choice (offer) ---- */
.ttr-dest-choice {
  background: rgba(37,99,235,.06); border: 2px solid #2563eb;
  border-radius: 14px; padding: 16px; margin-bottom: 6px; text-align: center;
}
.ttr-dest-offer { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }

/* destination card — sprite: destinations.jpg 2500×483, 10 cols × 3 rows */
.dest-card {
  width: 160px; height: 103px;
  border-radius: 8px; cursor: pointer; position: relative;
  background-image: url('/static/img/ttr/destinations.jpg');
  background-repeat: no-repeat;
  background-size: 1000% 300%;
  border: 3px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  transition: all .15s;
  overflow: hidden;
}
.dest-card:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.dest-card.selected {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.5), 0 6px 16px rgba(0,0,0,.5);
}
.dest-card.deselected { opacity: .55; filter: grayscale(.4); }

/* ---- map ---- */
.ttr-map-wrap {
  background: var(--clr-bg2); border: 1px solid var(--clr-border);
  border-radius: 14px; padding: 10px; margin-bottom: 14px; overflow: hidden;
}
.ttr-map { position: relative; line-height: 0; }
.ttr-map-img { width: 100%; border-radius: 10px; display: block; }

/* SVG overlay holding the wagon slots */
.ttr-map-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.ttr-hit { stroke: transparent; fill: none; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.ttr-hit-c { fill: transparent; stroke: none; pointer-events: fill; cursor: pointer; }

/* a single wagon slot (rectangle) */
.ttr-car {
  fill-opacity: .22; stroke: rgba(0,0,0,.42); stroke-width: .16;
  pointer-events: none; transition: fill-opacity .15s, stroke .15s;
}
/* route color tint */
.ttr-car-color-0 { fill: #9aa0a6; }
.ttr-car-color-1 { fill: #d946a8; }
.ttr-car-color-2 { fill: #e8e8e8; }
.ttr-car-color-3 { fill: #3b82f6; }
.ttr-car-color-4 { fill: #eab308; }
.ttr-car-color-5 { fill: #ea580c; }
.ttr-car-color-6 { fill: #222222; }
.ttr-car-color-7 { fill: #dc2626; }
.ttr-car-color-8 { fill: #22c55e; }

/* city markers for destination tickets */
.ttr-city-dot, .ttr-city-glow { pointer-events: none; }
.ttr-city-dot-owned  { fill: #22d3ee; stroke: #fff; stroke-width: .35; }
.ttr-city-glow-owned { fill: none; stroke: #22d3ee; stroke-width: .5; opacity: .45; }
.ttr-city-dot-hover  { fill: #ef4444; stroke: #fff; stroke-width: .4; animation: city-pulse .8s ease-in-out infinite; }
.ttr-city-glow-hover { fill: none; stroke: #ef4444; stroke-width: .8; opacity: .5; animation: city-pulse .8s ease-in-out infinite; }
@keyframes city-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* claimable on your turn — gold glow + pulse */
.ttr-route.claimable .ttr-car {
  fill-opacity: .92;
  stroke: #fbbf24;
  stroke-width: .45;
  animation: ttr-pulse 1s ease-in-out infinite;
}
.ttr-route.claimable:hover .ttr-car {
  fill-opacity: 1; stroke: #ffd700; stroke-width: .65; animation: none;
}
@keyframes ttr-pulse {
  0%,100% { fill-opacity: .55; stroke-width: .22; stroke: #f59e0b; }
  50%      { fill-opacity: .95; stroke-width: .5;  stroke: #ffd700; }
}

/* claimed — solid player-colored wagons */
.ttr-route.claimed .ttr-car {
  fill-opacity: 1; stroke: rgba(0,0,0,.6); stroke-width: .28; animation: none;
}
.ttr-route.claimed.p0 .ttr-car { fill: #e11d2a; }
.ttr-route.claimed.p1 .ttr-car { fill: #1f6fe0; }
.ttr-route.claimed.p2 .ttr-car { fill: #1faa4d; }
.ttr-route.claimed.p3 .ttr-car { fill: #f4c20d; }
.ttr-route.claimed.p4 .ttr-car { fill: #222222; }

/* wagon icon (train-icons.png 460×92, 5 cols) */
.ttr-wagon-icon {
  display: inline-block; width: 26px; height: 26px;
  background-image: url('/static/img/ttr/train-icons.png');
  background-repeat: no-repeat; background-size: 500%;
  vertical-align: middle; margin-left: 4px; flex-shrink: 0;
}

/* stat icons (icons.png 128×32, 4 icons of 32×32 each, display at 22×22) */
.ttr-stat-icon {
  display: inline-block; width: 22px; height: 22px;
  background-image: url('/static/img/ttr/icons.png');
  background-repeat: no-repeat; background-size: 88px 22px;
  vertical-align: middle; margin-left: 3px;
}
.ttr-stat-cards     { background-position: 0px 0; }    /* leftmost: train card icon */
.ttr-stat-tickets   { background-position: -22px 0; }  /* destination ticket icon */
.ttr-stat-completed { background-position: -44px 0; }  /* completed destination */
.ttr-stat-uncomplete { background-position: -66px 0; } /* uncompleted destination */

/* payment chooser modal */
.ttr-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ttr-modal {
  background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-radius: 14px; padding: 18px; max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.4); text-align: center;
}
.ttr-modal-title { margin: 0 0 4px; font-size: 1.05rem; }
.ttr-modal-sub { margin: 0 0 12px; font-size: .85rem; color: var(--clr-muted); }
.ttr-pay-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ttr-pay-opt {
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: .95rem;
  background: var(--clr-bg2); border: 2px solid var(--clr-border); color: var(--clr-text);
}
.ttr-pay-opt:hover { border-color: #2563eb; background: rgba(37,99,235,.08); }
.ttr-pay-cancel { background: transparent; border: 1px solid var(--clr-border); }

/* ---- routes list (claim panel) ---- */
.ttr-routes-area {
  background: rgba(37,99,235,.06); border: 2px solid #2563eb;
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.ttr-routes-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.route-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-radius: 8px; gap: 8px;
}
.route-item:hover { border-color: #2563eb; }
.route-cities { font-weight: 600; font-size: .88rem; }
.route-info { display: flex; gap: 6px; align-items: center; font-size: .8rem; }
.route-color-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3);
  display: inline-block;
}
.route-color-0 { background: #999; }
.route-color-1 { background: #d946a8; }
.route-color-2 { background: #ddd; border-color: #aaa; }
.route-color-3 { background: #3b82f6; }
.route-color-4 { background: #eab308; }
.route-color-5 { background: #ea580c; }
.route-color-6 { background: #333; }
.route-color-7 { background: #dc2626; }
.route-color-8 { background: #22c55e; }

/* ---- player boards ---- */
.ttr-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ttr-pboard {
  border-radius: 12px; padding: 10px 12px;
  border: 2px solid rgba(255,255,255,.12);
  background: var(--clr-bg2);
}
/* seat background tints */
.ttr-pboard.seat-bg-0 { background: linear-gradient(135deg, rgba(225,29,42,.15) 0%, var(--clr-bg2) 60%); border-color: rgba(225,29,42,.35); }
.ttr-pboard.seat-bg-1 { background: linear-gradient(135deg, rgba(31,111,224,.15) 0%, var(--clr-bg2) 60%); border-color: rgba(31,111,224,.35); }
.ttr-pboard.seat-bg-2 { background: linear-gradient(135deg, rgba(31,170,77,.15) 0%, var(--clr-bg2) 60%);  border-color: rgba(31,170,77,.35); }
.ttr-pboard.seat-bg-3 { background: linear-gradient(135deg, rgba(244,194,13,.15) 0%, var(--clr-bg2) 60%); border-color: rgba(244,194,13,.35); }
.ttr-pboard.seat-bg-4 { background: linear-gradient(135deg, rgba(80,80,80,.15) 0%, var(--clr-bg2) 60%);   border-color: rgba(80,80,80,.35); }
.ttr-pboard.active { box-shadow: 0 0 0 2px #fbbf24, 0 4px 12px rgba(0,0,0,.3); border-color: #fbbf24 !important; }
.ttr-phead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ttr-pname { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ttr-pscore { font-weight: 800; font-size: 1.2rem; }
.ttr-pstats { display: flex; gap: 10px; font-size: .85rem; }
.ttr-pstat { display: flex; align-items: center; gap: 4px; }
.ttr-pstat b { font-weight: 700; font-size: .95rem; }
.ttr-you-badge {
  font-size: .7rem; font-weight: 700; background: #2563eb; color: #fff;
  padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}

/* ---- my destinations ---- */
.ttr-my-dests {
  background: var(--clr-bg2); border: 1px solid var(--clr-border);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.ttr-dests-list { display: flex; gap: 8px; flex-wrap: wrap; }
/* smaller sprite usage for owned destinations */
.my-dest {
  width: 96px; height: 62px;
  border-radius: 6px; position: relative; cursor: default;
  background-image: url('/static/img/ttr/destinations.jpg');
  background-repeat: no-repeat;
  background-size: 1000% 300%;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  overflow: hidden;
}
.my-dest { cursor: pointer; }
.my-dest::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.18); transition: background .15s;
}
.my-dest:hover::after { background: rgba(0,0,0,.04); }
.my-dest.done { border-color: #4ade80; }
.my-dest.done::after { background: rgba(74,222,128,.15); }
.my-dest.fail { border-color: #ef4444; }
.my-dest.fail::after { background: rgba(239,68,68,.2); }
.my-dest-pts {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fbbf24; font-size: .7rem; font-weight: 800;
  padding: 1px 5px; border-radius: 5px; z-index: 2; white-space: nowrap;
}
.my-dest-cities {
  display: none; /* hidden, sprite shows the cities visually */
}

/* ---- messages ---- */
.ttr-msg {
  position: fixed; bottom: 18px; right: 18px; z-index: 50;
  background: #dc2626; color: #fff; padding: 10px 16px;
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 320px;
}
.ttr-msg.ok { background: #16a34a; }

/* ---- finished ---- */
.ttr-final { display: flex; flex-direction: column; gap: 8px; max-width: 400px; margin: 14px auto; }
.ttr-final-row {
  display: flex; justify-content: space-between; padding: 10px 14px;
  background: var(--clr-bg2); border: 1px solid var(--clr-border); border-radius: 10px;
}
.ttr-final-row.win { border-color: #f4c430; background: rgba(244,196,48,.12); font-weight: 700; }

@media (max-width: 560px) {
  .tcard    { width: 58px; height: 38px; }
  .dest-card { width: 120px; height: 77px; }
  .my-dest  { width: 72px;  height: 46px; }
}