/* Turf Wars (turf/turf.js): three district cards with the holder's flag, this week's race and the crew's actions. */
.turfx { width: min(1100px, 100%); margin: 14px 0 110px; text-align: left; --gold: #ffd23f; }
.turfx .empty-line { color: var(--muted); font-size: 13px; padding: 10px 4px; text-align: center; list-style: none; }
.tf-head, .tf-district { border: 1px solid rgba(255, 120, 200, .22); border-radius: 18px; background: linear-gradient(180deg, rgba(30, 12, 52, .92), rgba(16, 8, 32, .92)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tf-head { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.tf-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .tf-head p b { color: #fff; }
.tf-clock { flex: none; text-align: center; padding: 8px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .3); }
.tf-clock b { display: block; font: 700 26px/1 var(--head, Oswald), sans-serif; color: var(--gold); }
.tf-clock small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.tf-me { margin: 12px 4px; color: var(--muted); font-size: 14px; } .tf-me b { color: #fff; } .tf-me a { color: #ff9ad5; }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.tf-district { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tf-district.d-beach { background: linear-gradient(180deg, rgba(64, 40, 20, .55), rgba(16, 8, 32, .92) 55%); }
.tf-district.d-harbour { background: linear-gradient(180deg, rgba(20, 50, 80, .55), rgba(16, 8, 32, .92) 55%); }
.tf-district.d-casino { background: linear-gradient(180deg, rgba(80, 16, 50, .55), rgba(16, 8, 32, .92) 55%); }
.tf-district header { display: flex; align-items: center; gap: 10px; }
.tf-art { font-size: 28px; }
.tf-district h3 { margin: 0; font: 700 22px var(--head, Oswald), sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.tf-district h4 { margin: 4px 0 0; font: 600 12px var(--head, Oswald), sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #ff9ad5; }
.tf-focus { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; color: #9fe8ff; padding: 2px 8px; border-radius: 999px; background: rgba(80, 200, 255, .12); }
.tf-holder { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); min-height: 54px; }
.tf-holder small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.tf-holder b { color: #fff; font-size: 16px; }
.tf-flag { position: relative; display: inline-flex; align-items: flex-start; height: 40px; padding-left: 4px; }
.tf-flag i { position: absolute; left: 0; top: 0; width: 3px; height: 40px; border-radius: 2px; background: #d8d0e6; }
.tf-flag b { display: inline-block; margin-top: 2px; padding: 4px 12px 4px 8px; font: 700 13px var(--head, Oswald), sans-serif; letter-spacing: 1.5px; color: #14081f; background: var(--crew);
  clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%); box-shadow: 0 0 14px var(--crew); animation: tf-wave 2.4s ease-in-out infinite; transform-origin: left center; }
@keyframes tf-wave { 50% { transform: skewY(3deg) scaleX(.95); } }
.tf-race { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tf-race li { position: relative; display: grid; grid-template-columns: 52px 1fr 54px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, .22); font-size: 13px; overflow: hidden; }
.tf-race li.me { box-shadow: inset 0 0 0 1px var(--gold); }
.tf-race li i { height: 8px; border-radius: 999px; background: var(--crew); box-shadow: 0 0 8px var(--crew); }
.tf-race strong { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.tf-race .cx-tag { text-align: center; }
.tf-acts { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tf-push { display: inline-flex; gap: 6px; }
.tf-push input { width: 80px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: #fff; font: 600 13px Inter, sans-serif; }
.tf-hint { margin: 14px 4px 0; color: var(--muted); font-size: 12.5px; text-align: center; }
@media (max-width: 680px) { .tf-head { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .tf-flag b { animation: none; } }
.tf-race li.empty-line { display: block; background: none; }