/* Small custom layer on top of Tailwind CDN — pick tiles, line cards, grid. */

/* --- Pick tiles -------------------------------------------------------- */
.pickbtn {
    border: 1px solid rgb(51 65 85);          /* slate-700 */
    background: rgb(15 23 42 / 0.6);          /* slate-900/60 */
    border-radius: 0.75rem;
    padding: 0.15rem 0.25rem 0.2rem;          /* condensed: minimal chrome, logo dominates */
    text-align: center;
    transition: background 120ms, border-color 120ms, transform 80ms;
    -webkit-tap-highlight-color: transparent;
}
.pickbtn:not(:disabled):active { transform: scale(0.98); }
.pickbtn:not(:disabled):hover { border-color: rgb(71 85 105); }
.pickbtn.picked {
    border-color: rgb(56 189 248);            /* sky-400 */
    background: rgb(56 189 248 / 0.12);
    box-shadow: inset 0 0 0 1px rgb(56 189 248 / 0.4);
}
.pickbtn:disabled { cursor: not-allowed; }

/* Oversized, cropped team logo inside a pick tile. The image is taller than its
   window, so the top/bottom bleed off — the "big cropped logo" look. Smaller tile
   chrome + a larger image ratio makes the logo fill more of the space. */
.logo-tile { display: block; }
.logo-tile .logo-crop {
    height: 3.5rem;                           /* shorter crop = condensed card */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.6rem;
}
.logo-tile .logo-crop img {
    height: 5.5rem;                           /* bigger relative to the crop = fuller logo */
    width: 5.5rem;                            /* square box so the logo is centered both axes */
    object-fit: contain;                      /* keep aspect, no horizontal drift */
    object-position: center;
    max-width: none;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.4));   /* symmetric-ish, no downward bias */
    transition: transform 140ms ease;
}
.logo-tile:not(:disabled):active .logo-crop img { transform: scale(0.96); }
.logo-tile.picked .logo-crop img { transform: scale(1.06); }
/* Subtle ring on the favorite's tile so the board reads at a glance. */
.logo-tile.is-fav:not(.picked) { border-color: rgb(71 85 105); }
.logo-tile .abbr {
    margin-top: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgb(226 232 240);                  /* slate-200 */
    line-height: 1.05;
}
/* '@' marks the home team (away @ home) in place of a "HOME" tag. */
.logo-tile .abbr .at { color: rgb(100 116 139); font-weight: 600; margin-right: 0.05rem; }

/* Kickoff date + weather float over the top of the tiles so they cost no extra
   vertical height. `.tiles-top` reserves a thin strip so logos never collide. */
.game-meta {
    position: absolute;
    top: 0.3rem; left: 0.55rem; right: 0.55rem;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.66rem; color: rgb(148 163 184);   /* slate-400 */
    z-index: 3; pointer-events: none;
}
.game-meta .gm-chip {
    background: rgb(15 23 42 / 0.72);
    border-radius: 9999px;
    padding: 0.02rem 0.4rem;
    white-space: nowrap;
    font-weight: 500;
}
.tiles-top { padding-top: 0.85rem; }          /* headroom for the floated meta strip */

/* "live · locks Tue" marker under the Line-set card while the graded number is pending. */
.linecard .tag-live {
    margin-top: 0.1rem;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(52 211 153);                    /* emerald-400 */
    line-height: 1;
}

/* --- Betting-line mini cards ------------------------------------------- */
.linecard {
    border: 1px solid rgb(30 41 59);          /* slate-800 */
    background: rgb(15 23 42 / 0.5);
    border-radius: 0.6rem;
    padding: 0.28rem 0.2rem;
    text-align: center;
}
.linecard .cap {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(100 116 139);                  /* slate-500 */
    line-height: 1.05;
}
/* second line inside a card header, e.g. "as of Fri 8/21" / "after lock" */
.linecard .cap-sub {
    display: block;
    font-size: 0.5rem;
    text-transform: none;
    letter-spacing: 0;
    color: rgb(71 85 105);                    /* slate-600 */
    line-height: 1;
    margin-top: 0.05rem;
}
.linecard .val {
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.15;
    margin-top: 0.08rem;
}

/* --- Utilities --------------------------------------------------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }