/* WatchGameTape (Nov 15 2026). Deep teal + a white VHS tape label with red/gold/teal stripes; Bungee (stamped label) + Permanent Marker (handwritten line) + Rubik. */
:root{--deep:#12343b;--deep2:#1b4a52;--ink:#22262a;--mut:#5c656c;--red:#e63946;--gold:#f4a261;--teal:#2a9d8f;--soft:#eef3f2;--line:rgba(34,38,42,.13)}
*{box-sizing:border-box}html,body{overflow-x:hidden}html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.6 Rubik,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
a{color:inherit}img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}.narrow{max-width:860px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero{background:var(--deep);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px);color:#fff;padding:0 0 56px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0 22px}
.brand{text-decoration:none;font:400 21px/1 Bungee,sans-serif;display:flex;align-items:center;gap:10px;letter-spacing:.01em}
.brand i{width:30px;height:20px;border:3px solid #fff;border-radius:4px;position:relative;flex:0 0 auto}
.brand i::before,.brand i::after{content:"";position:absolute;top:4px;width:7px;height:7px;border:2px solid #fff;border-radius:50%}.brand i::before{left:3px}.brand i::after{right:3px}
.nav .j{flex:0 0 auto;display:inline-flex;align-items:center;text-decoration:none;font-weight:700;font-size:14px;background:var(--gold);color:var(--deep);padding:9px 15px;border-radius:999px;line-height:1}
.crumbs{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:rgba(255,255,255,.8)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}.crumbs a{text-decoration:none}
.hgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.tape{background:#fff;color:var(--ink);border-radius:10px;padding:0 0 26px;box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:hidden;transform:rotate(-1.2deg)}
.stripes{display:flex;height:16px}.stripes i{flex:1}.stripes i:nth-child(1){background:var(--red)}.stripes i:nth-child(2){background:var(--gold)}.stripes i:nth-child(3){background:var(--teal)}
.marker{font:400 24px/1.2 'Permanent Marker',cursive;color:#1d3fa8;margin:18px 30px 6px;transform:rotate(-1deg)}
.tape h1{font:400 clamp(34px,5vw,60px)/1.05 Bungee,sans-serif;margin:0 30px 14px;overflow-wrap:anywhere}
.lede{font-size:18px;color:var(--mut);margin:0 30px;max-width:56ch}.lede a.kw{color:var(--teal)}
.reels{display:flex;align-items:center;gap:0;margin:22px 30px 0;height:34px}
.reels b{width:34px;height:34px;border-radius:50%;border:6px solid var(--ink);background:repeating-conic-gradient(var(--ink) 0 20deg,#fff 20deg 60deg)}
.reels span{flex:1;height:10px;margin:0 10px;background:var(--ink);border-radius:5px;opacity:.85}
.form{background:#fff;color:var(--ink);border-radius:16px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.form h2{font:400 24px/1.1 Bungee,sans-serif;margin:0 0 4px}.form .s{margin:0 0 12px;color:var(--mut);font-size:15px}
.form label,.form .lbl{display:block;font-size:13px;font-weight:700;margin:10px 0 4px}
.form input,.form select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(42,157,143,.25)}
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.roles button{font:600 14px/1 Rubik,sans-serif;padding:11px 4px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.roles button.on{background:var(--deep);border-color:var(--deep);color:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex!important;gap:8px;align-items:flex-start;font-weight:500!important;font-size:13px!important;margin-top:14px!important}.chk input{width:auto;margin-top:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.err{display:none;background:#fdecec;color:#9b1c1f;border-radius:8px;padding:8px 10px;font-size:14px;margin-top:10px}
.go{display:block;width:100%;margin-top:14px;background:var(--red);color:#fff;border:0;border-radius:10px;padding:14px;font:700 17px/1 Rubik,sans-serif;cursor:pointer;text-align:center;text-decoration:none}
.go:disabled{opacity:.6}.fine{font-size:12px;color:var(--mut);margin:10px 0 0}
.done h2{font:400 24px/1.15 Bungee,sans-serif;margin:0 0 8px}
.band{padding:56px 0}.band.soft{background:var(--soft)}.band.dark{background:var(--deep);color:#fff}.dark .d{color:rgba(255,255,255,.75)}
.t{font:400 clamp(26px,3.2vw,38px)/1.12 Bungee,sans-serif;margin:0 0 8px;overflow-wrap:anywhere}.t.sm{font-size:clamp(20px,2.2vw,26px)}
.h3{font:700 18px/1.3 Rubik,sans-serif;margin:24px 0 6px}
.d{color:var(--mut);margin:0 0 22px;max-width:64ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards div{background:#fff;border-radius:12px;padding:16px 18px;border-top:4px solid var(--teal);color:var(--ink)}.cards div:nth-child(3n+2){border-top-color:var(--gold)}.cards div:nth-child(3n){border-top-color:var(--red)}
.cards b,.steps b{display:block;font-weight:800;margin-bottom:4px}.cards span,.steps span{color:var(--mut);font-size:15px}
.steps{display:grid;gap:12px}.steps div{border-left:4px solid var(--teal);padding:4px 0 4px 14px}
.dark .cards span{color:var(--mut)}
.sports{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sports a{display:block;text-decoration:none;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px}
.sports a:hover{border-color:var(--teal)}.sports b{display:block;font:400 18px/1.2 Bungee,sans-serif}.sports span{font-size:14px;color:var(--mut)}
.more{display:inline-block;margin-top:20px;background:var(--deep);color:#fff;font-weight:700;text-decoration:none;padding:12px 18px;border-radius:10px}
.dark .more{background:var(--gold);color:var(--deep)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ticks{list-style:none;margin:0;padding:0}.ticks li{position:relative;padding:0 0 12px 26px}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--red)}
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vid{text-decoration:none;position:relative}.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;background:var(--soft)}
.vid b{font-weight:700;font-size:15px;line-height:1.3;margin:8px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vid span{font-size:13px;color:var(--mut)}
.vids .vid:first-child::after{content:"Watch on BallerTube";position:absolute;left:10px;top:10px;background:var(--red);color:#fff;font-weight:700;font-size:13px;line-height:1;padding:7px 11px;border-radius:999px}
@media(min-width:901px){.vids .vid:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}.vids .vid:first-child img{flex:1 1 auto;height:0;min-height:260px;aspect-ratio:auto}.vids .vid:first-child b{font-size:21px;-webkit-line-clamp:3}}
details{background:var(--soft);border-radius:12px;padding:14px 18px;margin-bottom:10px}summary{font-weight:700;cursor:pointer}details p{margin:10px 0 0;color:var(--mut)}
footer{background:var(--deep);color:rgba(255,255,255,.72);font-size:13px;padding:30px 0}footer b{color:#fff}
@media(max-width:900px){.hgrid,.cols{grid-template-columns:1fr}.tape{transform:none}.cards{grid-template-columns:1fr}.sports{grid-template-columns:1fr 1fr}.vids{grid-template-columns:repeat(2,1fr)}.vids .vid:first-child{grid-column:span 2}}
@media(max-width:560px){.brand{font-size:16px;gap:8px}.brand i{width:24px;height:16px;border-width:2.5px}.brand i::before,.brand i::after{top:3px;width:5px;height:5px}.nav .j{font-size:13px;padding:8px 12px}
  .tape h1,.marker,.lede,.reels{margin-left:20px;margin-right:20px}.roles{grid-template-columns:1fr 1fr}.row2{grid-template-columns:1fr}.band{padding:44px 0}.sports{grid-template-columns:1fr}}

/* domain offer link (Nov 15 2026) */
footer .offer{margin-top:10px;font-size:13px;opacity:.85}footer .offer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
