/* HOLE IN PHONE look: a clay mini-golf club. Felt green, cream scorecard paper, varnished wood rails, a red flag.
   Rounded type (Fredoka) for the club, Archivo for the small print. LITE / Chromecast safe: no filters, no blend
   modes, no backdrop blur; animations are transform + opacity one-shots. The phone's course is full-bleed (the
   canvas must span the whole screen, centred, so the tiles line up across the phones on the table). */
:root { --hip-felt: #4f9a4a; --hip-felt-d: #2f6a2e; --hip-cream: #fbf3df; --hip-ink: #23301f; --hip-wood: #c98b52; --hip-wood-d: #8a5a30; --hip-flag: #e94f43; --hip-gold: #f5c542; --hip-water: #4aa3c8; }
html[data-game="hip"] body { background: #1f3a1d; }
html[data-game="hip"] { --pink: #e94f43; --pink-deep: #9c2b22; --blue: #3a8fb7; --blue-deep: #1f5a78; --yellow: #f5c542; --yellow-deep: #c9971a; --orange: #e98b3a; --lilac: #8cc56a; }
html[data-game="hip"] .studio { background: radial-gradient(120% 90% at 50% 0%, #66b35c 0%, #3c7d3a 50%, #1f3a1d 100%); }
html[data-game="hip"] .onair { color: var(--hip-cream); background: rgba(35, 48, 31, .7); border-color: rgba(251, 243, 223, .35); box-shadow: none; }
html[data-game="hip"] .onair.live { color: #fff; background: var(--hip-flag); border-color: var(--hip-ink); }
.hip-logo { width: min(86vw, 600px); height: auto; display: block; margin: 0 auto; }
.hip-logo.sm { width: min(68vw, 400px); }
.hip-homelogo.tv .hip-logo { width: min(36vw, 560px); }
.hip-big { font: 700 clamp(40px, 11vw, 78px)/1 Fredoka, Archivo, sans-serif; color: var(--hip-cream); text-shadow: 0 5px 0 rgba(0, 0, 0, .35); text-align: center; }
.hip-sub { font: 600 16px/1.35 Archivo, sans-serif; color: rgba(251, 243, 223, .85); text-align: center; text-wrap: balance; }
.hip-h { font: 700 26px/1.1 Fredoka, Archivo, sans-serif; color: var(--hip-cream); text-align: center; text-wrap: balance; }
.kicker { letter-spacing: .14em; }

/* ---------------------------------------------------------------- title */
.hip-title { position: relative; min-height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.hip-key { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hip-titlein { position: relative; display: grid; justify-items: center; gap: 18px; padding: 24px 12px; animation: hip-drop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.hip-plate { display: grid; justify-items: center; gap: 2px; background: var(--hip-cream); color: var(--hip-ink); border: 4px solid var(--hip-ink); border-radius: 16px; padding: 10px 24px; box-shadow: 0 7px 0 rgba(0, 0, 0, .45); font: 600 15px/1.2 Archivo, sans-serif; }
.hip-plate b { font: 700 28px/1.05 Fredoka, sans-serif; }
.hip-title.tv .hip-logo { width: 58vw; }
.hip-title.tv .hip-plate { font-size: 2.2vh; } .hip-title.tv .hip-plate b { font-size: 4.4vh; }
@keyframes hip-drop { from { transform: translateY(-40px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- lay the course */
.hip-order { display: grid; justify-items: center; align-content: center; gap: 16px; min-height: 100%; padding: 24px 16px; text-align: center; }
.hip-phones { display: flex; gap: 6px; margin: 8px 0; }
.hip-phones i { width: 26px; height: 48px; border-radius: 6px; background: var(--hip-felt); border: 3px solid var(--hip-ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); animation: hip-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.hip-tap { display: grid; justify-items: center; gap: 4px; width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--hip-ink); background: radial-gradient(closest-side, #ffe7a3 0%, var(--hip-gold) 70%, #d9a52a 100%); color: var(--hip-ink); box-shadow: 0 10px 0 rgba(0, 0, 0, .4); place-content: center; cursor: pointer; }
.hip-tap b { font: 700 64px/1 Fredoka, sans-serif; } .hip-tap span { font: 600 15px/1.2 Archivo, sans-serif; max-width: 70%; }
.hip-tap:active { transform: translateY(6px); box-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.hip-tap:disabled { opacity: .6; }
.hip-placed { display: grid; justify-items: center; gap: 4px; } .hip-placed b { font: 700 72px/1 Fredoka, sans-serif; color: var(--hip-gold); text-shadow: 0 6px 0 rgba(0, 0, 0, .4); } .hip-placed span { font: 600 16px/1.2 Archivo, sans-serif; color: var(--hip-cream); }
.hip-order.tv { gap: 2.4vh; } .hip-order.tv .hip-h { font-size: 6vh; } .hip-order.tv .hip-sub { font-size: 2.6vh; }
.hip-slots { display: flex; gap: 1.4vw; flex-wrap: wrap; justify-content: center; margin-top: 2vh; }
.hip-slot { display: grid; justify-items: center; gap: 1vh; width: 9vw; min-width: 90px; aspect-ratio: 9 / 19; border-radius: 1.6vw; border: .5vh solid rgba(251, 243, 223, .35); background: rgba(0, 0, 0, .25); padding: 1.6vh .6vw; color: rgba(251, 243, 223, .6); align-content: center; }
.hip-slot i { font: 700 6vh/1 Fredoka, sans-serif; font-style: normal; } .hip-slot b { font: 700 2.2vh/1.15 Archivo, sans-serif; overflow-wrap: anywhere; }
.hip-slot.in { background: var(--hip-felt); border-color: var(--hip-ink); color: var(--hip-cream); animation: hip-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes hip-in { from { transform: translateY(20px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- tee card */
.hip-teecard { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 100%; padding: 20px 14px; }
.hip-strip { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.hip-chip { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 8px 4px; border-radius: 12px; background: var(--hip-felt-d); border: 3px solid var(--hip-ink); color: var(--hip-cream); animation: hip-in .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.hip-chip b { font: 700 22px/1 Fredoka, sans-serif; } .hip-chip span { font: 700 10px/1.15 Archivo, sans-serif; text-align: center; } .hip-chip em { font: 600 10px/1.1 Archivo, sans-serif; font-style: normal; opacity: .8; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hip-chip.me { background: var(--hip-gold); color: var(--hip-ink); transform: translateY(-4px); }
.hip-mine { display: grid; gap: 4px; justify-items: center; text-align: center; background: var(--hip-cream); color: var(--hip-ink); border: 4px solid var(--hip-ink); border-radius: 16px; padding: 12px 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); max-width: 420px; }
.hip-mine b { font: 700 20px/1.1 Fredoka, sans-serif; } .hip-mine span { font: 600 15px/1.35 Archivo, sans-serif; }
.hip-teecard.tv .hip-big { font-size: 12vh; } .hip-teecard.tv .hip-chip { width: 8vw; min-width: 80px; } .hip-teecard.tv .hip-chip b { font-size: 4vh; } .hip-teecard.tv .hip-chip span, .hip-teecard.tv .hip-chip em { font-size: 1.6vh; }

/* ---------------------------------------------------------------- the hole */
.hip-play { position: absolute; inset: 0; overflow: hidden; background: #6b4a30; }
.hip-play.phone { position: fixed; inset: 0; z-index: 20; touch-action: none; user-select: none; -webkit-user-select: none; }
.hip-stage { position: absolute; inset: 0; }
.hip-cv { display: block; width: 100%; height: 100%; }
.hip-nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--hip-cream); font: 700 18px/1.3 Archivo, sans-serif; }
.hip-hud { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 5px 12px; background: var(--hip-cream); color: var(--hip-ink); border: 3px solid var(--hip-ink); border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); font: 700 13px/1 Archivo, sans-serif; white-space: nowrap; pointer-events: none; z-index: 2; }
.hip-score { display: flex; align-items: baseline; gap: 5px; } .hip-score b { font: 700 20px/1 Fredoka, sans-serif; }
.hip-play.tv .hip-hud { top: 2vh; font-size: 2.2vh; padding: 1vh 2vw; gap: 2vw; } .hip-play.tv .hip-score b { font-size: 4vh; }
.hip-tilename { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); transform: translateX(-50%); font: 700 12px/1 Archivo, sans-serif; color: var(--hip-cream); background: rgba(35, 48, 31, .7); border-radius: 999px; padding: 5px 10px; pointer-events: none; z-index: 2; white-space: nowrap; }
.hip-tilename i { font-style: normal; opacity: .75; margin-left: 6px; }
.hip-watch { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--hip-cream); font: 600 14px/1.3 Archivo, sans-serif; background: rgba(35, 48, 31, .7); padding: 8px 14px; border-radius: 12px; z-index: 2; }
/* banners in the middle of the screen */
.hip-banner { position: absolute; left: 0; right: 0; top: 30%; display: grid; justify-items: center; pointer-events: none; z-index: 3; }
.hip-bn { display: grid; justify-items: center; gap: 4px; font: 700 34px/1 Fredoka, sans-serif; color: var(--hip-ink); background: var(--hip-cream); border: 4px solid var(--hip-ink); border-radius: 18px; padding: 10px 20px; box-shadow: 0 7px 0 rgba(0, 0, 0, .4); animation: hip-pop .45s cubic-bezier(.2, 1.7, .4, 1) both; text-align: center; }
.hip-bn small { font: 700 15px/1 Archivo, sans-serif; }
.hip-bn.out { animation: hip-out .35s ease-in forwards; }
.hip-bn.wet { background: var(--hip-water); color: #fff; } .hip-bn.sunk { background: var(--hip-gold); } .hip-bn.ace { background: var(--hip-flag); color: #fff; font-size: 44px; } .hip-bn.save { background: #9fdc7a; } .hip-bn.in { font-size: 22px; }
.hip-play.tv .hip-bn { font-size: 7vh; padding: 1.6vh 3vw; } .hip-play.tv .hip-bn small { font-size: 2.6vh; } .hip-play.tv .hip-bn.ace { font-size: 9vh; }
@keyframes hip-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hip-out { to { transform: translateY(-20px) scale(.9); opacity: 0; } }
/* the TV's name tags under each phone, and Gus */
.hip-tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hip-tag { position: absolute; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 2px; text-align: center; white-space: nowrap; }
.hip-tag b { font: 700 2.4vh/1 Fredoka, sans-serif; color: var(--hip-ink); background: var(--hip-cream); border: .35vh solid var(--hip-ink); border-radius: 999px; padding: .5vh 1.2vw; }
.hip-tag span { font: 700 1.6vh/1 Archivo, sans-serif; color: var(--hip-cream); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.hip-host { position: absolute; left: 2vw; bottom: 3vh; display: grid; justify-items: center; gap: .6vh; z-index: 2; }
.hip-host img { width: 13vh; height: 13vh; object-fit: cover; border-radius: 50%; border: .6vh solid var(--hip-ink); background: var(--hip-cream); }
.hip-host span { font: 700 2vh/1 Fredoka, sans-serif; color: var(--hip-ink); background: var(--hip-gold); padding: .4vh 1vw; border-radius: 999px; border: .3vh solid var(--hip-ink); }
.hip-host.on img { animation: hip-talk .35s ease-in-out infinite alternate; }
@keyframes hip-talk { to { transform: translateY(-.6vh) scale(1.03); } }

/* ---------------------------------------------------------------- the phone's controls */
.hip-prompt { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 54px); transform: translateX(-50%); font: 700 15px/1.2 Archivo, sans-serif; color: var(--hip-ink); background: var(--hip-gold); border: 3px solid var(--hip-ink); border-radius: 999px; padding: 7px 14px; opacity: 0; pointer-events: none; z-index: 2; white-space: nowrap; transition: opacity .2s; }
.hip-prompt.on { opacity: 1; } .hip-prompt.putt { animation: hip-nudge 1.2s ease-in-out infinite; } .hip-prompt.wet { background: var(--hip-water); color: #fff; } .hip-prompt.coming { background: var(--hip-cream); }
@keyframes hip-nudge { 50% { transform: translateX(-50%) translateY(3px); } }
.hip-gadget { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-width: min(78vw, 300px); justify-content: center; padding: 16px 22px; border-radius: 22px; border: 4px solid var(--hip-ink); background: var(--hip-cream); color: var(--hip-ink); box-shadow: 0 7px 0 rgba(0, 0, 0, .45); font: 700 20px/1 Fredoka, sans-serif; z-index: 3; overflow: hidden; touch-action: manipulation; }
.hip-gadget.ready { background: var(--hip-gold); animation: hip-ready .6s ease-in-out infinite alternate; }
.hip-gadget.on { background: #9fdc7a; animation: none; }
.hip-gadget.hit { transform: translateX(-50%) translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.hip-gicon { width: 26px; height: 26px; border-radius: 6px; background: var(--hip-wood); border: 3px solid var(--hip-ink); }
.hip-gadget.windmill .hip-gicon { border-radius: 50%; background: conic-gradient(var(--hip-cream) 0 25%, var(--hip-flag) 0 50%, var(--hip-cream) 0 75%, var(--hip-flag) 0); }
.hip-gadget.gate .hip-gicon { background: repeating-linear-gradient(90deg, var(--hip-flag) 0 5px, var(--hip-cream) 5px 10px); }
.hip-gbar { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--hip-ink); transform: scaleX(0); transform-origin: left; }
@keyframes hip-ready { to { transform: translateX(-50%) scale(1.05); } }
.hip-level { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); width: 66px; height: 66px; border-radius: 50%; border: 4px solid var(--hip-ink); background: radial-gradient(closest-side, rgba(251, 243, 223, .95), rgba(251, 243, 223, .7)); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); display: grid; place-items: center; z-index: 3; opacity: .65; }
.hip-level i { width: 18px; height: 18px; border-radius: 50%; background: var(--hip-water); border: 3px solid var(--hip-ink); }
.hip-level.live { opacity: 1; }

/* ---------------------------------------------------------------- hole done, scorecard, final */
.hip-done, .hip-cardv, .hip-final { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 100%; padding: 20px 14px; }
.hip-big.k-ace, .hip-big.k-eagle, .hip-big.k-albatross { color: var(--hip-gold); } .hip-big.k-birdie { color: #9fdc7a; } .hip-big.k-pickup { color: #c8b8a0; }
.hip-tiles { display: grid; gap: 6px; width: min(100%, 520px); }
.hip-trow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: rgba(251, 243, 223, .1); border-radius: 12px; padding: 8px 12px; color: var(--hip-cream); font: 600 14px/1.2 Archivo, sans-serif; }
.hip-trow b { font: 700 16px/1 Fredoka, sans-serif; } .hip-trow span { opacity: .75; } .hip-trow em { font-style: normal; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.hip-trow em.save { background: #9fdc7a; color: var(--hip-ink); } .hip-trow em.wet { background: var(--hip-water); color: #fff; }
.hip-trow.me { outline: 3px solid var(--hip-gold); }
.hip-run { font: 700 15px/1 Archivo, sans-serif; color: var(--hip-cream); background: rgba(0, 0, 0, .25); padding: 8px 14px; border-radius: 999px; }
.hip-card { border-collapse: collapse; background: var(--hip-cream); color: var(--hip-ink); border: 4px solid var(--hip-ink); border-radius: 12px; overflow: hidden; font: 700 15px/1 Archivo, sans-serif; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); max-width: 100%; display: block; overflow-x: auto; }
.hip-card th, .hip-card td { padding: 8px 9px; text-align: center; border-right: 1px solid rgba(35, 48, 31, .2); font-variant-numeric: tabular-nums; }
.hip-card th { background: var(--hip-felt-d); color: var(--hip-cream); } .hip-card .l { text-align: left; }
.hip-card tr.us td { font: 700 18px/1 Fredoka, sans-serif; }
.hip-card td.k-ace, .hip-card td.k-eagle, .hip-card td.k-albatross { background: var(--hip-gold); } .hip-card td.k-birdie { background: #c4ecac; } .hip-card td.k-pickup, .hip-card td.k-over, .hip-card td.k-double { color: #a33a2c; }
.hip-cardv.tv .hip-card, .hip-final.tv .hip-card { font-size: 2.6vh; } .hip-cardv.tv .hip-card tr.us td, .hip-final.tv .hip-card tr.us td { font-size: 3.6vh; }
.hip-golden { display: grid; justify-items: center; gap: 4px; background: var(--hip-gold); color: var(--hip-ink); border: 4px solid var(--hip-ink); border-radius: 18px; padding: 12px 20px; box-shadow: 0 7px 0 rgba(0, 0, 0, .4); animation: hip-pop .6s cubic-bezier(.2, 1.7, .4, 1) both; }
.hip-golden i { width: 26px; height: 46px; border-radius: 6px; background: linear-gradient(160deg, #fff4c2, #e2a91c); border: 3px solid var(--hip-ink); }
.hip-golden b { font: 700 14px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .hip-golden span { font: 700 30px/1 Fredoka, sans-serif; } .hip-golden em { font: 600 14px/1.2 Archivo, sans-serif; font-style: normal; }
.hip-mestat { font: 600 14px/1.3 Archivo, sans-serif; color: var(--hip-cream); opacity: .9; text-align: center; }
.hip-again { display: grid; gap: 10px; width: min(100%, 380px); }
.hip-btn { font: 700 19px/1 Fredoka, sans-serif; padding: 16px 18px; border-radius: 16px; border: 4px solid var(--hip-ink); background: var(--hip-gold); color: var(--hip-ink); box-shadow: 0 6px 0 rgba(0, 0, 0, .4); cursor: pointer; }
.hip-btn.ghost { background: var(--hip-cream); } .hip-btn:disabled { opacity: .6; }
.hip-btn:focus-visible, .hip-tap:focus-visible, .hip-gadget:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------------------------------------------------------------- lobby panel */
.hip-lobby { display: grid; gap: 10px; }
.hip-lrow { display: flex; gap: 5px; flex-wrap: wrap; }
.hip-lphone { display: grid; justify-items: center; gap: 3px; width: 52px; }
.hip-lphone i { width: 30px; height: 56px; border-radius: 7px; background: var(--hip-felt); border: 3px solid var(--hip-ink); position: relative; }
.hip-lphone.tee i::after { content: 'T'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 Fredoka, sans-serif; color: var(--hip-cream); font-style: normal; }
.hip-lphone.cup i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hip-ink); }
.hip-lphone span { font: 600 11px/1.1 Archivo, sans-serif; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hip-lsub, .hip-lplan { font: 600 13px/1.35 Archivo, sans-serif; opacity: .85; }
.hip-lobby.tv .hip-lphone { width: 6vw; } .hip-lobby.tv .hip-lphone i { width: 3.4vw; height: 6.6vw; } .hip-lobby.tv .hip-lphone span { font-size: 1.6vh; max-width: 6vw; } .hip-lobby.tv .hip-lsub, .hip-lobby.tv .hip-lplan { font-size: 2vh; }

@media (prefers-reduced-motion: reduce) { .hip-prompt.putt, .hip-gadget.ready, .hip-host.on img { animation: none; } }

/* versus: red against blue (muted clay) */
.team0 { --team: #c8553d; } .team1 { --team: #3d6fa8; }
.hip-chip.team0, .hip-chip.team1 { border-color: var(--team); box-shadow: inset 0 -5px 0 var(--team); }
.hip-play.phone.team0, .hip-play.phone.team1 { box-shadow: inset 0 0 0 5px var(--team); }
.hip-hud.vs .hip-score b { color: var(--team); }
.hip-prompt.team0, .hip-prompt.team1 { white-space: normal; text-align: center; width: max-content; max-width: 88vw; }
.hip-prompt.team0.putt, .hip-prompt.team1.putt { background: var(--team); color: #fff; }
.hip-bn.team0, .hip-bn.team1 { background: var(--team); color: #fff; }
.hip-vsline { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.hip-vsteam { display: grid; justify-items: center; min-width: 96px; padding: 8px 12px; border-radius: 14px; border: 3px solid var(--hip-ink); background: var(--team); color: #fff; }
.hip-vsteam b { font: 700 20px/1 Fredoka, sans-serif; } .hip-vsteam span { font: 700 12px/1.2 Archivo, sans-serif; opacity: .9; }
.hip-vsteam.me { transform: translateY(-4px); outline: 3px solid var(--hip-gold); }
.hip-big.team0, .hip-big.team1 { color: var(--team); }
.hip-vsrows { display: grid; gap: 8px; margin: 12px auto; width: min(420px, 92vw); }
.hip-vsrow { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 12px; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--hip-ink); background: var(--hip-cream); color: var(--hip-ink); box-shadow: inset 6px 0 0 var(--team); }
.hip-vsrow b { font: 700 20px/1 Fredoka, sans-serif; color: var(--team); } .hip-vsrow span { font: 700 14px/1.2 Archivo, sans-serif; } .hip-vsrow em { font: 700 20px/1 Fredoka, sans-serif; font-style: normal; }
.hip-vsrow small { grid-column: 1 / -1; font: 600 12px/1.2 Archivo, sans-serif; opacity: .75; }
.hip-vsrow.me { outline: 3px solid var(--hip-gold); }
.hip-card.vs tr.team0 td.l, .hip-card.vs tr.team1 td.l { color: var(--team); font-weight: 700; } .hip-card.vs td.win { background: var(--team); color: #fff; }
.hip-done.tv .hip-vsrows { width: 40vw; } .hip-done.tv .hip-vsrow b, .hip-done.tv .hip-vsrow em { font-size: 4vh; } .hip-done.tv .hip-vsrow span { font-size: 2.4vh; }