/* HOOF IT! look: a claymation Sunday-league ground. Cream match-programme paper, tomato red and royal blue clay,
   chunky rounded plasticine shapes with a soft highlight and a hard drop shadow. LITE / Chromecast safe: no filters,
   no blend modes, no backdrop blur; animations are transform + opacity one-shots. */
:root { --hf-red: #d8342b; --hf-red-d: #7d1712; --hf-blue: #2f6fd6; --hf-blue-d: #163a7d; --hf-cream: #f4ecd6; --hf-ink: #2a2116; --hf-mud: #5a4127; --hf-grass: #4f7a2c; --hf-gold: #ffc53d; }
html[data-game="hoof"] body { background: #2a2116; }
html[data-game="hoof"] .studio { background: radial-gradient(120% 90% at 50% 0%, #6b8c3a 0%, #3e5a22 55%, #2a2116 100%); }
.hf-logo { width: min(86vw, 620px); height: auto; display: block; margin: 0 auto; }
.hf-logo.sm { width: min(70vw, 420px); }
.kicker { letter-spacing: .14em; }

/* ---------------------------------------------------------------- title */
.hf-title { position: relative; min-height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.hf-key { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-titlein { position: relative; display: grid; justify-items: center; gap: 18px; padding: 24px 12px; animation: hf-drop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.hf-plate { display: grid; justify-items: center; gap: 2px; background: var(--hf-cream); color: var(--hf-ink); border: 4px solid var(--hf-ink); border-radius: 14px; padding: 10px 22px; box-shadow: 6px 7px 0 rgba(0, 0, 0, .55); font: 800 18px/1.15 Archivo, sans-serif; text-transform: uppercase; }
.hf-plate b { font: 400 30px/1 Anton, Impact, sans-serif; letter-spacing: .02em; }
.hf-title.tv .hf-logo { width: 62vw; }
.hf-title.tv .hf-plate { font-size: 2.2vh; } .hf-title.tv .hf-plate b { font-size: 4.6vh; }
@keyframes hf-drop { from { transform: translateY(-40px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- line-up */
.hf-lineup { display: grid; gap: 2.4vh; padding: 3vh 4vw; color: var(--hf-cream); }
.hf-lhead { text-align: center; } .hf-vs { font: 400 7vh/1 Anton, Impact, sans-serif; text-transform: uppercase; }
.hf-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3vw; }
.hf-vsbig { font: 400 12vh/1 Anton, Impact, sans-serif; color: var(--hf-gold); text-shadow: 5px 6px 0 rgba(0, 0, 0, .5); }
.hf-team { border: 5px solid var(--hf-ink); border-radius: 22px; padding: 2vh 2vw; box-shadow: 8px 10px 0 rgba(0, 0, 0, .5), inset 0 6px 0 rgba(255, 255, 255, .25); }
.hf-team.t0 { background: var(--hf-red); } .hf-team.t1 { background: var(--hf-blue); }
.hf-teamhead { display: flex; justify-content: space-between; align-items: baseline; font: 800 2.4vh/1 Archivo, sans-serif; text-transform: uppercase; }
.hf-teamhead b { font: 400 4.6vh/1 Anton, Impact, sans-serif; letter-spacing: .02em; }
.hf-roster { display: flex; justify-content: center; gap: 2vw; margin-top: 1.5vh; }
.hf-man { display: grid; justify-items: center; gap: .6vh; animation: hf-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.hf-man:nth-child(2) { animation-delay: .15s; }
.hf-face { height: 24vh; width: auto; display: block; }
.hf-nm { font: 800 2.6vh/1.1 Archivo, sans-serif; background: var(--hf-cream); color: var(--hf-ink); border: 3px solid var(--hf-ink); border-radius: 10px; padding: .4vh .8vw; white-space: nowrap; }
.hf-cpu { font-style: normal; margin-left: .5em; font-size: .7em; background: var(--hf-ink); color: var(--hf-cream); border-radius: 5px; padding: 1px 5px; vertical-align: middle; }
.hf-benchrow { text-align: center; font: 700 2.4vh/1.3 Archivo, sans-serif; } .hf-benchrow b { color: var(--hf-gold); margin-right: .6em; text-transform: uppercase; }
.hf-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hf-step { display: grid; gap: 4px; background: var(--hf-cream); color: var(--hf-ink); border: 3px solid var(--hf-ink); border-radius: 14px; padding: 10px 12px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .45); font: 600 15px/1.25 Archivo, sans-serif; animation: hf-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.hf-step:nth-child(2) { animation-delay: .9s; } .hf-step:nth-child(3) { animation-delay: 1.8s; }
.hf-step i { font: 400 28px/1 Anton, Impact, sans-serif; font-style: normal; color: var(--hf-red); }
.hf-step b { font: 800 18px/1 Archivo, sans-serif; text-transform: uppercase; }
.hf-lineup.tv .hf-step { font-size: 2.2vh; padding: 1.4vh 1.2vw; } .hf-lineup.tv .hf-step b { font-size: 2.8vh; } .hf-lineup.tv .hf-step i { font-size: 4vh; }
@keyframes hf-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* phone: your kit */
.hf-you { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 14px; border-radius: 22px; border: 5px solid var(--hf-ink); color: #fff; box-shadow: 8px 10px 0 rgba(0, 0, 0, .5), inset 0 8px 0 rgba(255, 255, 255, .22); }
.hf-you.t0 { background: var(--hf-red); } .hf-you.t1 { background: var(--hf-blue); } .hf-you.bench { background: var(--hf-mud); }
.hf-youkit .hf-face.big { height: 34vh; }
.hf-youteam { font: 400 52px/1 Anton, Impact, sans-serif; text-transform: uppercase; text-shadow: 3px 4px 0 rgba(0, 0, 0, .35); }
.hf-yousub { font: 700 16px/1.3 Archivo, sans-serif; }
.hf-you .hf-howto { grid-template-columns: 1fr; width: 100%; }

/* ---------------------------------------------------------------- the match */
.hf-play { position: absolute; inset: 0; overflow: hidden; }
.hf-play.tv { background: #2a2116; }
.hf-stage { position: absolute; inset: 0; }
.hf-play.mini .hf-stage { bottom: auto; height: min(56.25vw, 46vh); top: 0; }
.hf-cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.hf-hud { position: absolute; left: 0; right: 0; top: 1.6vh; display: flex; justify-content: center; pointer-events: none; }
.hf-play.mini .hf-hud { top: 4px; transform: scale(.62); transform-origin: 50% 0; }
.hf-board { display: flex; align-items: stretch; border: 4px solid var(--hf-ink); border-radius: 16px; overflow: hidden; box-shadow: 6px 7px 0 rgba(0, 0, 0, .55); }
.hf-side { display: flex; align-items: center; gap: 14px; padding: 6px 16px; color: #fff; font: 800 2.2vh/1 Archivo, sans-serif; text-transform: uppercase; }
.hf-side.t0 { background: var(--hf-red); } .hf-side.t1 { background: var(--hf-blue); }
.hf-num { font: 400 6vh/1 Anton, Impact, sans-serif; min-width: 1.1em; text-align: center; }
.hf-mid { display: grid; place-items: center; background: var(--hf-cream); color: var(--hf-ink); padding: 4px 18px; min-width: 9vw; }
.hf-clock { font: 400 4.4vh/1 Anton, Impact, sans-serif; }
.hf-sub { font: 800 1.4vh/1 Archivo, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.hf-play.low .hf-clock { color: var(--hf-red); }
.hf-play.golden .hf-mid { background: var(--hf-gold); }
.hf-clive { position: absolute; left: 1.6vw; top: 1.6vh; display: flex; align-items: center; gap: 8px; pointer-events: none; transition: transform .18s; }
.hf-clive img { width: 8vh; height: 8vh; border-radius: 50%; border: 4px solid var(--hf-ink); box-shadow: 4px 5px 0 rgba(0, 0, 0, .5); object-fit: cover; }
.hf-clive span { font: 800 1.6vh/1 Archivo, sans-serif; color: var(--hf-cream); background: var(--hf-ink); padding: 4px 8px; border-radius: 6px; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.hf-clive.on { transform: scale(1.12) rotate(-3deg); } .hf-clive.on span { opacity: 1; }
.hf-banner { position: absolute; left: 0; right: 0; top: 30%; display: grid; place-items: center; pointer-events: none; }
.hf-play.mini .hf-banner { top: 10%; transform: scale(.6); }
.hf-bn { font: 400 12vh/1 Anton, Impact, sans-serif; color: #fff; text-transform: uppercase; text-align: center; padding: 1vh 4vw; border: 6px solid var(--hf-ink); border-radius: 26px; background: var(--hf-ink); box-shadow: 10px 12px 0 rgba(0, 0, 0, .45); animation: hf-slam .45s cubic-bezier(.2, 1.7, .4, 1) both; transition: transform .35s, opacity .35s; }
.hf-bn small { display: block; font: 800 3vh/1.2 Archivo, sans-serif; margin-top: .6vh; }
.hf-bn.goal.t0 { background: var(--hf-red); } .hf-bn.goal.t1 { background: var(--hf-blue); }
.hf-bn.ko, .hf-bn.bar { font-size: 7vh; background: var(--hf-cream); color: var(--hf-ink); }
.hf-bn.gg { font-size: 7vh; background: var(--hf-gold); color: var(--hf-ink); }
.hf-bn.ft { background: var(--hf-cream); color: var(--hf-ink); }
.hf-bn.out { opacity: 0; transform: scale(.8) translateY(-20px); }
@keyframes hf-slam { from { transform: scale(2.2) rotate(-6deg); opacity: 0; } to { transform: rotate(-2deg); opacity: 1; } }
.hf-play.replay::before, .hf-play.replay::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: #0d0a06; z-index: 2; pointer-events: none; }
.hf-play.replay::before { top: 0; } .hf-play.replay::after { bottom: 0; }
.hf-play.replay .hf-hud { opacity: 0; }
.hf-play.replay .hf-stage::after { content: 'REPLAY'; position: absolute; right: 3vw; top: 11vh; font: 400 5vh/1 Anton, Impact, sans-serif; color: var(--hf-ink); background: var(--hf-gold); border: 4px solid var(--hf-ink); padding: .4vh 1.4vw; border-radius: 10px; z-index: 3; }
.hf-roar { position: absolute; bottom: 14vh; font: 800 2.6vh/1 Archivo, sans-serif; color: #fff; background: var(--hf-mud); border: 3px solid var(--hf-ink); border-radius: 10px; padding: .6vh .8vw; pointer-events: none; animation: hf-float 1.6s ease-out both; white-space: nowrap; }
.hf-roar.t0 { background: var(--hf-red); } .hf-roar.t1 { background: var(--hf-blue); }
@keyframes hf-float { from { transform: translateY(20px) scale(.7); opacity: 0; } 15% { transform: none; opacity: 1; } to { transform: translateY(-14vh); opacity: 0; } }
.hf-nogl { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hf-cream); font: 700 3vh/1.3 Archivo, sans-serif; }

/* the button: the whole phone */
.hf-pad { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; width: 100%; height: 100%; margin: 0; border: 0; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 22px);
  color: #fff; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none; }
.hf-pad.t0 { background: radial-gradient(90% 70% at 45% 38%, #f0574c 0%, var(--hf-red) 48%, #a82018 100%); }
.hf-pad.t1 { background: radial-gradient(90% 70% at 45% 38%, #5d93f0 0%, var(--hf-blue) 48%, #1d4fa8 100%); }
.hf-pad.mini { top: min(56.25vw, 46vh); }
.hf-padtop { display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.hf-padtop b { font: 800 26px/1 Archivo, sans-serif; background: rgba(0, 0, 0, .22); padding: 6px 14px; border-radius: 12px; max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-padtop span { font: 800 13px/1 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hf-padword { font: 400 min(30vw, 26vh)/.9 Anton, Impact, sans-serif; letter-spacing: .02em; text-shadow: 0 .06em 0 rgba(0, 0, 0, .28); pointer-events: none; display: grid; place-items: center; width: min(78vw, 60vh); aspect-ratio: 1; border-radius: 50%; border: 8px solid rgba(0, 0, 0, .25); box-shadow: inset 0 14px 0 rgba(255, 255, 255, .22), inset 0 -16px 0 rgba(0, 0, 0, .18), 0 14px 0 rgba(0, 0, 0, .25); }
.hf-pad.mini .hf-padword { width: min(60vw, 34vh); font-size: min(22vw, 13vh); }
.hf-padhint { font: 700 15px/1 Archivo, sans-serif; opacity: .85; pointer-events: none; transition: opacity .4s; } .hf-padhint.gone { opacity: 0; }
.hf-pad.hit .hf-padword { animation: hf-press .16s ease-out; }
@keyframes hf-press { 0% { transform: scale(.88) translateY(8px); } 100% { transform: none; } }
.hf-pad.yay .hf-padword { background: rgba(255, 197, 61, .35); } .hf-pad.boo .hf-padword { background: rgba(0, 0, 0, .25); }
.hf-bench { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px); background: radial-gradient(90% 70% at 50% 30%, #7a5a38 0%, var(--hf-mud) 60%, #3a2a18 100%); color: var(--hf-cream); }
.hf-bench.mini { top: min(56.25vw, 46vh); }
.hf-benchtitle { display: grid; justify-items: center; gap: 4px; text-align: center; } .hf-benchtitle b { font: 400 40px/1 Anton, Impact, sans-serif; text-transform: uppercase; } .hf-benchtitle span { font: 700 15px/1.3 Archivo, sans-serif; }
.hf-roars { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.hf-roarbtn { border: 6px solid var(--hf-ink); border-radius: 26px; color: #fff; display: grid; place-content: center; gap: 4px; touch-action: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 0 rgba(0, 0, 0, .35), inset 0 10px 0 rgba(255, 255, 255, .2); }
.hf-roarbtn.t0 { background: var(--hf-red); } .hf-roarbtn.t1 { background: var(--hf-blue); }
.hf-roarbtn b { font: 400 64px/1 Anton, Impact, sans-serif; } .hf-roarbtn span { font: 800 16px/1 Archivo, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.hf-roarbtn.hit { animation: hf-press .16s ease-out; }

/* ---------------------------------------------------------------- result, table, final */
.hf-result, .hf-tablev, .hf-final { display: grid; justify-items: center; gap: 14px; padding: 16px 10px; color: var(--hf-cream); text-align: center; }
.hf-rhead { font: 400 44px/1 Anton, Impact, sans-serif; text-transform: uppercase; text-shadow: 4px 5px 0 rgba(0, 0, 0, .45); }
.hf-rcols { display: flex; align-items: center; gap: 12px; }
.hf-rcol { border: 5px solid var(--hf-ink); border-radius: 20px; padding: 10px 14px; min-width: 38vw; box-shadow: 6px 8px 0 rgba(0, 0, 0, .5); }
.hf-rcol.t0 { background: var(--hf-red); } .hf-rcol.t1 { background: var(--hf-blue); }
.hf-rcol.lose { opacity: .8; } .hf-rcol.win { transform: rotate(-1.5deg) scale(1.03); }
.hf-rname { font: 800 14px/1.1 Archivo, sans-serif; text-transform: uppercase; }
.hf-rbig { font: 400 80px/1 Anton, Impact, sans-serif; }
.hf-rmen { display: flex; justify-content: center; gap: 10px; } .hf-rmen .hf-face { height: 13vh; } .hf-rmen em { font: 800 12px/1 Archivo, sans-serif; font-style: normal; }
.hf-rdash { font: 400 40px/1 Anton, Impact, sans-serif; }
.hf-goals { display: grid; gap: 6px; background: var(--hf-cream); color: var(--hf-ink); border: 4px solid var(--hf-ink); border-radius: 14px; padding: 10px 16px; min-width: 60%; font: 700 15px/1.2 Archivo, sans-serif; }
.hf-g { display: flex; gap: 10px; align-items: baseline; } .hf-g .t { font-family: 'Space Mono', monospace; } .hf-g i { font-size: .8em; opacity: .75; }
.hf-g.t0 b { color: var(--hf-red); } .hf-g.t1 b { color: var(--hf-blue); }
.hf-mvp { display: grid; gap: 2px; background: var(--hf-gold); color: var(--hf-ink); border: 4px solid var(--hf-ink); border-radius: 12px; padding: 8px 18px; transform: rotate(1.5deg); font: 800 14px/1 Archivo, sans-serif; text-transform: uppercase; } .hf-mvp span { font: 400 28px/1 Anton, Impact, sans-serif; text-transform: none; }
.hf-verdict { font: 400 30px/1 Anton, Impact, sans-serif; text-transform: uppercase; padding: 6px 16px; border-radius: 10px; border: 3px solid var(--hf-ink); }
.hf-verdict.won { background: var(--hf-gold); color: var(--hf-ink); } .hf-verdict.lost { background: var(--hf-ink); } .hf-verdict.drew { background: var(--hf-cream); color: var(--hf-ink); }
.hf-table { border-collapse: separate; border-spacing: 0; background: var(--hf-cream); color: var(--hf-ink); border: 4px solid var(--hf-ink); border-radius: 14px; overflow: hidden; font: 700 15px/1 Archivo, sans-serif; box-shadow: 6px 8px 0 rgba(0, 0, 0, .5); min-width: min(92vw, 640px); }
.hf-table th { background: var(--hf-ink); color: var(--hf-cream); padding: 8px 8px; font-size: 12px; letter-spacing: .1em; }
.hf-table td { padding: 8px 8px; border-top: 2px dashed rgba(42, 33, 22, .25); text-align: center; } .hf-table .l { text-align: left; } .hf-table .pts { font: 400 20px/1 Anton, Impact, sans-serif; }
.hf-table tr.me td { background: rgba(255, 197, 61, .45); } .hf-table tr.champ td { background: var(--hf-gold); }
.tv .hf-table { font-size: 2.6vh; min-width: 56vw; } .tv .hf-table th { font-size: 1.8vh; } .tv .hf-table td { padding: 1.2vh 1vw; } .tv .hf-table .pts { font-size: 3.4vh; }
.tv .hf-rhead { font-size: 8vh; } .tv .hf-rbig { font-size: 16vh; } .tv .hf-rname { font-size: 2.6vh; } .tv .hf-goals { font-size: 2.6vh; min-width: 40vw; } .tv .hf-rcol { min-width: 26vw; } .tv .hf-rmen .hf-face { height: 18vh; }
.hf-drum { font: 400 52px/1 Anton, Impact, sans-serif; text-transform: uppercase; animation: hf-pop .5s both; }
.hf-champ { display: grid; justify-items: center; gap: 6px; animation: hf-drop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.hf-champ b { font: 400 60px/1 Anton, Impact, sans-serif; color: var(--hf-gold); text-shadow: 5px 6px 0 rgba(0, 0, 0, .5); } .hf-champ span { font: 800 16px/1 Archivo, sans-serif; text-transform: uppercase; }
.hf-cup { width: 74px; height: 80px; background: radial-gradient(60% 50% at 40% 30%, #ffe9a3, #e0a51c 60%, #8f6200); border: 4px solid var(--hf-ink); border-radius: 10px 10px 40px 40px; position: relative; box-shadow: 5px 6px 0 rgba(0, 0, 0, .45); }
.hf-cup::after { content: ''; position: absolute; left: 50%; bottom: -22px; width: 44px; height: 16px; margin-left: -22px; background: var(--hf-mud); border: 4px solid var(--hf-ink); border-radius: 4px; }
.tv .hf-champ b { font-size: 11vh; } .tv .hf-drum { font-size: 9vh; } .tv .hf-cup { width: 12vh; height: 13vh; }
.hf-again { display: grid; gap: 10px; width: min(92vw, 420px); }
.hf-btn { font: 400 26px/1 Anton, Impact, sans-serif; text-transform: uppercase; padding: 18px 16px; border-radius: 18px; border: 5px solid var(--hf-ink); background: var(--hf-gold); color: var(--hf-ink); box-shadow: 0 8px 0 rgba(0, 0, 0, .45); }
.hf-btn.ghost { background: var(--hf-cream); font-size: 20px; padding: 12px; }
.hf-btn:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .hf-bn, .hf-man, .hf-step, .hf-titlein, .hf-champ, .hf-roar { animation: none; } }

/* ---------------------------------------------------------------- lobby panel */
.hf-lobby { display: grid; gap: 10px; background: var(--hf-cream); color: var(--hf-ink); border: 4px solid var(--hf-ink); border-radius: 16px; padding: 12px; box-shadow: 5px 6px 0 rgba(0, 0, 0, .45); }
.hf-lcols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.hf-lcol { display: grid; justify-items: center; gap: 6px; border: 3px solid var(--hf-ink); border-radius: 12px; padding: 8px 6px; color: #fff; min-height: 120px; }
.hf-lcol.t0 { background: var(--hf-red); } .hf-lcol.t1 { background: var(--hf-blue); }
.hf-lcol > b { font: 800 12px/1 Archivo, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.hf-lman { display: grid; justify-items: center; gap: 2px; } .hf-lman img { height: 64px; width: auto; } .hf-lman span { font: 800 13px/1 Archivo, sans-serif; background: rgba(0, 0, 0, .25); border-radius: 6px; padding: 3px 6px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-lman.cpu { opacity: .75; }
.hf-lv { font: 400 30px/1 Anton, Impact, sans-serif; font-style: normal; }
.hf-lbench, .hf-lplan { font: 700 13px/1.3 Archivo, sans-serif; text-align: center; } .hf-lbench span { opacity: .7; }
.hf-lobby.tv { padding: 2vh 1.5vw; } .hf-lobby.tv .hf-lman img { height: 14vh; } .hf-lobby.tv .hf-lman span, .hf-lobby.tv .hf-lplan, .hf-lobby.tv .hf-lbench { font-size: 2vh; } .hf-lobby.tv .hf-lcol > b { font-size: 1.8vh; }
.hf-homelogo { display: grid; justify-items: center; gap: 8px; } .hf-homelogo .hf-logo { width: min(84vw, 460px); } .hf-homelogo.tv .hf-logo { width: 34vw; }
.hf-tag { font: 800 14px/1.25 Archivo, sans-serif; color: var(--hf-cream); text-align: center; max-width: 320px; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
