/* =============================================================
   GAME: Traffic Jam
   ============================================================= */
.board-trafficjam { --cell: min(calc((100vw - 104px) / 6), 66px); --pad: calc(var(--cell) * .2); --tj-glow: #ff3d3d; }
.tj-wrap {
  position: relative; padding: var(--pad); border-radius: 18px; border: 4px solid #8a93a6;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .06), transparent 65%),
    linear-gradient(160deg, #3a3d48, #23252e 75%);
  box-shadow: 0 0 0 2px rgba(255, 61, 61, .55), 0 0 26px rgba(255, 61, 61, .25), inset 0 0 18px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .45);
}
.tj-lot {
  position: relative; width: calc(var(--cell) * 6); height: calc(var(--cell) * 6); border-radius: 8px; touch-action: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    linear-gradient(0deg, rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    radial-gradient(circle at 30% 20%, #34363f, #2a2c34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* exit gap in the right wall, level with the red car's row */
.tj-exit {
  position: absolute; right: -4px; top: calc(var(--pad) + var(--cell) * 2); width: calc(var(--pad) + 8px); height: var(--cell);
  display: grid; place-items: center; color: #ffd2d2;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 61, 61, .5) 7px 10px), #2c2e37;
  border-radius: 0 6px 6px 0; box-shadow: 6px 0 14px rgba(255, 61, 61, .55);
}
.tj-exit svg { width: 70%; max-width: 22px; filter: drop-shadow(0 0 4px #ff3d3d); animation: tjarrow 1.4s ease-in-out infinite; }
@keyframes tjarrow { 50% { transform: translateX(3px); } }

.tj-car {
  position: absolute; left: 0; top: 0; margin: 0; padding: calc(var(--cell) * .05); border: 0; background: none; cursor: grab;
  width: var(--cell); height: var(--cell); border-radius: 12px; z-index: 1; touch-action: none;
  transition: transform .17s cubic-bezier(.3, 1.2, .5, 1), filter .15s ease;
}
.tj-car.tj-h { width: calc(var(--cell) * var(--len)); transform: translate(calc(var(--p) * var(--cell)), calc(var(--line) * var(--cell))); }
.tj-car.tj-v { height: calc(var(--cell) * var(--len)); transform: translate(calc(var(--line) * var(--cell)), calc(var(--p) * var(--cell))); }
.tj-car svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.tj-car:hover svg { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)) brightness(1.12); }
.tj-car:focus { outline: none; }
.tj-car:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.tj-car.tj-drag { transition: none; z-index: 3; cursor: grabbing; }
.tj-car.tj-drag svg { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5)) brightness(1.1); }
.tj-car.tj-sel { z-index: 2; }
.tj-car.tj-sel svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(255, 255, 255, .7)); }
.tj-red svg { filter: drop-shadow(0 0 8px rgba(255, 59, 74, .7)) drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.tj-car.tj-hint svg { animation: tjhint 1s ease-in-out infinite; }
@keyframes tjhint { 50% { filter: drop-shadow(0 0 3px #ffd23f) drop-shadow(0 0 12px #ffd23f); } }
.tj-car:disabled { cursor: default; }
.tj-car.tj-leave { animation: tjleave .7s cubic-bezier(.5, 0, .9, .5) forwards; z-index: 4; }
@keyframes tjleave { to { translate: calc(var(--cell) * 3) 0; opacity: 0; } }

.tj-ghost {
  position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); border-radius: 12px; pointer-events: none;
  border: 2px dashed #ffd23f; background: rgba(255, 210, 63, .1); box-shadow: 0 0 12px rgba(255, 210, 63, .4);
}
.tj-ghost.tj-h { width: calc(var(--cell) * var(--len)); transform: translate(calc(var(--p) * var(--cell)), calc(var(--line) * var(--cell))); }
.tj-ghost.tj-v { height: calc(var(--cell) * var(--len)); transform: translate(calc(var(--line) * var(--cell)), calc(var(--p) * var(--cell))); }
.tj-ghost[hidden] { display: none; }

.tj-dot { background: radial-gradient(circle at 35% 30%, #ffd0d0 0 15%, #ff3b4a 50%, #8a0f1a); }
.tj-note { color: #ffe08a; font-weight: 600; }
.tj-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.tj-star { width: 15px; height: 15px; background: #4a4570; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 98%, 50% 76%, 20% 98%, 30% 60%, 0 38%, 38% 35%); }
.tj-star.on { background: #ffd23f; filter: drop-shadow(0 0 3px rgba(255, 210, 63, .8)); }
.tj-prev, .tj-next-btn { min-width: 42px; padding-left: 10px; padding-right: 10px; font-size: 1.2rem; }

/* level picker over the board */
.tj-levels {
  position: absolute; inset: -6px; z-index: 6; overflow: auto; padding: 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgba(0, 0, 0, .5);
  animation: fade .18s ease;
}
.tj-levels[hidden] { display: none; }
.tj-lv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tj-lv-title { margin: 0; font: 800 1.05rem var(--font-head); text-transform: uppercase; }
.tj-lv-tier { margin: 10px 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tj-lv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tj-lv {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: 700 1rem var(--font-head);
}
.tj-lv:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.tj-lv .tj-star { width: 11px; height: 11px; }
.tj-lv-done { background: linear-gradient(180deg, #2f2a58, #241f48); }
.tj-lv-cur { box-shadow: inset 0 0 0 2px #ff3d3d, 0 0 12px rgba(255, 61, 61, .4); }
.tj-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
@media (prefers-reduced-motion: reduce) { .tj-exit svg, .tj-car.tj-hint svg { animation: none; } }