/* Theme Name: Reviewtal Theme URI: https://reviewtal.com/ Author: Hammad Qaiser Description: A US coupon board built like an arcade cabinet — a HUD masthead with live counters, a marquee wordmark, a hero screen of player cards, a high-score table of the biggest live rates, nine levels to browse and a boss round for the store of the day. Custom theme, no page builder. Version: 1.0.2 Requires at least: 6.0 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: reviewtal */ /* ===================================================================== Reviewtal — the cabinet Cabinet black #0A0D1A · player blue #1B3BFF · credit green #12C36A Orbitron for the marquee, Chakra Petch for the HUD, Hanken Grotesk to read. Every panel is bevelled and dropped on a hard black shadow, the way a silkscreened control deck is. ===================================================================== */ :root{ --bg:#EEF1F6; --ink:#000000; --blue:#1B3BFF; --blue-d:#0A1FA8; --blue-l:#4E68FF; --green:#12C36A; --green-d:#0B8F4D; --cab:#0A0D1A; --cab2:#131A33; --cab3:#1C2444; --white:#FFFFFF; --body:#333A4D; --dim:#59627A; --dim2:#8E9AB5; --dim3:#C9D0DE; --line:#000000; --hair:#D3D9E6; --wrap:1200px; --pad:24px; --disp:'Orbitron','Chakra Petch',sans-serif; --hud:'Chakra Petch','Hanken Grotesk',sans-serif; --read:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--read);font-size:16px;line-height:1.55; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none} a:hover{color:var(--green-d)} button{font:inherit} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em} p{margin:0 0 12px} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} a.sr:focus{position:static;width:auto;height:auto;clip:auto;margin:0;padding:10px 14px;background:var(--blue);color:#fff;display:inline-block} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} /* WordPress puts bare classes such as "search", "home", "page" and "archive" on . Nothing in this sheet may style a bare class of that name, and this rule is the belt-and-braces: a results page is laid out like any other. */ body.search,body.home,body.page,body.archive,body.blog,body.error404{ display:block;height:auto;padding:0;border:0;border-radius:0;background:var(--bg)} /* ---------- arcade furniture ---------- */ .disp{font-family:var(--disp);font-weight:900;letter-spacing:.02em;text-transform:uppercase} .serif{font-family:var(--disp);font-weight:800;letter-spacing:.01em} .sc{font-family:var(--hud);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px} .bev{border:2px solid var(--line);box-shadow:inset 2px 2px 0 rgba(255,255,255,.9),inset -2px -2px 0 rgba(0,0,0,.16),5px 5px 0 var(--line)} .bevd{border:2px solid var(--line);box-shadow:inset 2px 2px 0 rgba(255,255,255,.22),inset -2px -2px 0 rgba(0,0,0,.65),5px 5px 0 var(--line)} @keyframes rvShim{0%{transform:translateY(-130%)}100%{transform:translateY(260%)}} @keyframes rvTick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes rvBlink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}} @keyframes rvGlow{ 0%,100%{box-shadow:inset 2px 2px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(0,0,0,.35),5px 5px 0 #000,0 0 0 rgba(27,59,255,0)} 50%{box-shadow:inset 2px 2px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(0,0,0,.35),5px 5px 0 #000,0 0 26px rgba(27,59,255,.75)} } @keyframes rvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes rvBar{0%{transform:scaleX(.25)}100%{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} } .scan{position:absolute;inset:0;pointer-events:none; background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.085) 0,rgba(255,255,255,.085) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 4px)} .shim{position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none; background-image:linear-gradient(to bottom,rgba(27,59,255,0) 0%,rgba(27,59,255,.42) 45%,rgba(255,255,255,.24) 62%,rgba(27,59,255,0) 100%); animation:rvShim 5.5s linear infinite} /* ===================================================================== 1. Player notice strip + masthead cabinet ===================================================================== */ .pnote{background:var(--cab);color:var(--dim3)} .pnote .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:30px;padding-top:5px;padding-bottom:5px} .pnote p{margin:0;font-size:11.5px;line-height:1.32} .pnote .lft{display:flex;align-items:center;gap:10px;min-width:0} .pnote .upd{font-family:var(--hud);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--green);white-space:nowrap} .mast{background:var(--bg);padding:10px 0 2px} .cab{background:var(--white);padding:12px} .hud{display:flex;align-items:stretch;gap:14px} .hud .meters{width:222px;flex:0 0 222px;display:flex;flex-direction:column;gap:8px} .meter{background:var(--cab);border:2px solid var(--line);padding:6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px} .meter span{font-family:var(--hud);font-size:10.5px;font-weight:600;letter-spacing:.15em;color:var(--dim2);text-transform:uppercase} .meter b{font-family:var(--disp);font-size:16px;font-weight:800;color:var(--green)} .meter.w b{color:#fff} .meter.b{background:var(--blue);padding:6px 12px} .meter.b span{color:#C6D0FF} .meter.b b{font-size:15px;color:#fff} .marq{flex:1 1 auto;min-width:0;position:relative;background:var(--cab);border:2px solid var(--line);overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center;padding:11px 18px 10px;text-align:center} .marq .pips{display:flex;gap:7px;margin-bottom:7px} .marq .pips i{width:9px;height:9px;display:block} .marq .wm{position:relative;font-family:var(--disp);font-size:34px;font-weight:900;letter-spacing:.11em;color:#fff;line-height:1; text-shadow:0 0 14px rgba(27,59,255,.95),0 0 40px rgba(27,59,255,.5);white-space:nowrap} .marq .sub{margin-top:7px;font-family:var(--hud);font-size:11px;font-weight:600;letter-spacing:.3em;color:var(--green)} .slot{width:284px;flex:0 0 284px;display:flex;flex-direction:column;gap:8px} .slot .lab{font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;line-height:1.2} .slot form{background:#0A0D1A;padding:8px 11px;display:flex;align-items:center;gap:9px} .slot input[type=search]{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;color:#fff; font-family:var(--hud);font-size:13.5px;font-weight:500;letter-spacing:.03em} .slot input::placeholder{color:#7F8AA6} .slot .go{background:var(--green);border:2px solid var(--line);color:#04220F;font-family:var(--hud);font-weight:700; font-size:10.5px;letter-spacing:.12em;padding:5px 9px;cursor:pointer;text-transform:uppercase} .slot .go:hover{background:#fff} .slot .coin{display:flex;align-items:center;gap:8px} .slot .coin i{width:38px;height:7px;background:var(--line);display:block} .slot .coin span{font-size:11.5px;color:var(--dim)} .navrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:2px solid var(--line);flex-wrap:wrap} .navrow .grp{display:flex;gap:9px;flex-wrap:wrap} .nbtn{display:inline-block;background:#fff;color:#000;font-family:var(--hud);font-size:12.5px;font-weight:700;letter-spacing:.12em; padding:8px 14px;text-transform:uppercase;border:2px solid var(--line); box-shadow:inset 2px 2px 0 rgba(255,255,255,.9),inset -2px -2px 0 rgba(0,0,0,.16),5px 5px 0 var(--line); transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease} .nbtn:hover,.nbtn:focus-visible{transform:translate(3px,3px);background:var(--blue);color:#fff; box-shadow:inset 2px 2px 0 rgba(255,255,255,.9),inset -2px -2px 0 rgba(0,0,0,.16),2px 2px 0 var(--line)} .nbtn.on{background:var(--blue);color:#fff} .nbtn.g{background:var(--green);color:#04220F} .nbtn.g:hover{background:var(--blue);color:#fff} /* mobile bar */ .mbar{display:none} /* ===================================================================== 2. Disclosure bar / inline notes / cookie ===================================================================== */ .rv-disc{background:var(--blue);color:#EAEEFF;border-top:2px solid var(--line);border-bottom:2px solid var(--line)} .rv-disc .wrap{padding-top:7px;padding-bottom:7px;font-size:12px;line-height:1.38} .rv-disc strong{font-family:var(--hud);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;color:#fff;margin-right:4px} .rv-disc a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap} .rv-disc a:hover{color:#BFFCDC} .rv-inline{background:#fff;border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:11px 14px;font-size:13.5px;color:var(--body);line-height:1.5} .rv-inline strong{font-family:var(--hud);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:#000;margin-right:4px} .rv-inline a{text-decoration:underline;text-underline-offset:2px} .rv-note{display:block;font-size:11.5px;color:var(--dim);line-height:1.4;margin-top:6px} .rv-cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--cab);color:var(--dim3); border-top:3px solid var(--green);display:flex;padding:14px 0} .rv-cookie[hidden]{display:none!important} .rv-cookie .in{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;gap:20px;align-items:center;flex-wrap:wrap} .rv-cookie p{margin:0;flex:1 1 420px;font-size:13px;line-height:1.5} .rv-cookie strong{color:#fff;font-family:var(--hud);letter-spacing:.08em;text-transform:uppercase;font-size:11.5px} .rv-cookie .acts{display:flex;gap:10px;align-items:center;flex:0 0 auto} .rv-cookie .rd{color:var(--green);font-family:var(--hud);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; border:2px solid var(--green);padding:8px 12px} .rv-cookie .rd:hover{background:var(--green);color:#04220F} .rv-cookie .ok{background:var(--green);color:#04220F;border:2px solid var(--green);font-family:var(--hud);font-weight:700; font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;cursor:pointer} .rv-cookie .ok:hover{background:#fff;border-color:#fff} /* ===================================================================== 3. Sections and section heads ===================================================================== */ .sect{padding:44px 0} .band{padding:44px 0;background:var(--cab);color:#EAEEFF;border-top:2px solid var(--line);border-bottom:2px solid var(--line);position:relative} .band-b{padding:44px 0;background:var(--blue);color:#fff;border-top:2px solid var(--line);border-bottom:2px solid var(--line)} .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 22px;flex-wrap:wrap} .shead .kick{display:inline-block;background:var(--green);color:#04220F;border:2px solid var(--line); padding:4px 10px;margin-bottom:9px;font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .shead h2{font-family:var(--disp);font-size:34px;font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.05} .shead .lede{margin:8px 0 0;font-size:14.5px;color:var(--body);max-width:620px} .shead .r{flex:0 0 auto;display:flex;align-items:center;gap:10px} .shead.dark h2{color:#fff} .shead.dark .lede{color:var(--dim3)} .shead.dark .kick{background:var(--blue);color:#fff} .morelink{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#000;border:2px solid var(--line); box-shadow:4px 4px 0 var(--line);padding:9px 14px;font-family:var(--hud);font-size:11.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease} .morelink:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line);background:var(--blue);color:#fff} .arrows{display:flex;gap:8px;background:#fff;border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:7px} .arrows button{width:34px;height:30px;display:grid;place-items:center;background:#fff;color:#000;border:2px solid var(--line);cursor:pointer} .arrows button:last-child{background:var(--blue);color:#fff} .arrows button:disabled{opacity:.3;cursor:default} .arrows button:not(:disabled):hover{background:var(--green);color:#04220F} /* ===================================================================== 4. Hero screen ===================================================================== */ .hero{background:linear-gradient(120deg,#0A0D1A 0%,#111C52 42%,#0C2A2E 100%);border:2px solid var(--line); box-shadow:6px 6px 0 var(--line);position:relative;overflow:hidden;padding:18px} .hero .grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.42fr);gap:28px;align-items:start} .hero .flag{display:inline-block;background:var(--green);color:#04220F;border:2px solid var(--line);padding:4px 10px; font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .hero .score{display:flex;align-items:flex-start;gap:6px;margin:13px 0 2px;line-height:.86} .hero .score b{font-family:var(--disp);font-size:78px;font-weight:900;color:#fff;text-shadow:0 0 16px rgba(27,59,255,.9),0 0 46px rgba(27,59,255,.45)} .hero .score i{font-family:var(--disp);font-size:40px;font-weight:900;color:var(--green);font-style:normal;text-shadow:0 0 16px rgba(18,195,106,.7)} .hero .score em{align-self:flex-end;font-family:var(--hud);font-size:15px;font-weight:700;letter-spacing:.18em;color:#fff;font-style:normal;text-transform:uppercase;padding-bottom:9px} .hero .under{font-family:var(--hud);font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--dim2);text-transform:uppercase;margin:0 0 16px} .hero h1{font-family:var(--disp);font-size:36px;font-weight:900;color:#fff;line-height:1.14;text-transform:none;letter-spacing:-.005em;margin:0 0 12px} .hero .lede{font-size:14.5px;color:var(--dim3);max-width:420px;margin:0 0 16px} .hero .cta{display:flex;gap:10px;flex-wrap:wrap} .hero .foot{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .hero .foot i{width:34px;height:6px;background:var(--blue);display:block;flex:0 0 auto} .hero .foot span{font-size:12px;color:var(--dim2)} .players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .pcardh{background:var(--cab2);border:2px solid var(--blue);box-shadow:5px 5px 0 var(--line);display:flex;flex-direction:column;overflow:hidden} .pcardh .ph{position:relative;aspect-ratio:213/124;overflow:hidden;background:#000;border-bottom:2px solid var(--blue)} .pcardh .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 38%} .pcardh .pn{position:absolute;top:0;left:0;background:var(--blue);color:#fff;font-family:var(--hud);font-size:10px; font-weight:700;letter-spacing:.14em;padding:3px 7px} .pcardh .bd{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto} .pcardh .st{display:block;background:#fff;border:2px solid var(--line);color:#000;text-align:center;padding:6px 8px; font-family:var(--hud);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcardh .st:hover{background:var(--green);color:#04220F} .pcardh .big{font-family:var(--disp);font-size:24px;font-weight:900;color:var(--green);line-height:1} .pcardh .t{font-size:13px;color:#fff;font-weight:600;line-height:1.35} .pcardh .fine{font-size:11.5px;color:var(--dim2);line-height:1.4} .pcardh .ends{font-family:var(--hud);font-size:10px;font-weight:600;letter-spacing:.13em;color:var(--dim2);text-transform:uppercase} .pcardh .sp{flex:0 0 auto;min-height:2px} /* ===================================================================== 5. Ticker ===================================================================== */ .ticker{background:var(--blue);border-top:2px solid var(--line);border-bottom:2px solid var(--line); display:flex;align-items:stretch;overflow:hidden} .ticker .lab{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:var(--cab);color:var(--green); padding:0 16px;border-right:2px solid var(--line)} .ticker .lab span{font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .ticker .run{flex:1 1 auto;overflow:hidden;position:relative} .ticker .row{display:flex;width:max-content;animation:rvTick 34s linear infinite} .ticker .row span{display:flex;align-items:center;white-space:nowrap} .ticker a{color:#fff;font-family:var(--hud);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 0} .ticker a:hover{color:#BFFCDC} .ticker i{display:inline-block;width:8px;height:8px;background:var(--green);transform:rotate(45deg);margin:0 22px} /* ===================================================================== 6. High-score table ===================================================================== */ .board{display:flex;flex-direction:column;gap:10px} .bhead{display:grid;grid-template-columns:52px 160px minmax(0,1fr) 80px 100px 176px;gap:13px;align-items:center; padding:0 12px 6px;font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--dim);text-transform:uppercase} .brow{display:grid;grid-template-columns:52px 160px minmax(0,1fr) 80px 100px 176px;gap:13px;align-items:center; background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:10px 12px; transition:transform .15s ease,box-shadow .15s ease} .brow:hover{transform:translateX(4px);box-shadow:5px 5px 0 var(--green)} .brow .rk{display:grid;place-items:center;background:var(--cab);color:#fff;border:2px solid var(--line); font-family:var(--disp);font-size:13px;font-weight:800;padding:5px 0} .brow .st{display:block;background:#fff;border:2px solid var(--line);text-align:center;padding:6px 6px;color:#000; font-family:var(--hud);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brow .st:hover{background:var(--blue);color:#fff} .brow .off{min-width:0} .brow .off b{display:block;font-size:14px;font-weight:700;line-height:1.3} .brow .off .fine{font-size:12px;color:var(--blue);line-height:1.35} .brow .val{font-family:var(--disp);font-size:22px;font-weight:900;color:var(--blue)} .brow .ends{font-family:var(--hud);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--body);text-transform:uppercase} .brow .cd{justify-self:stretch} /* ===================================================================== 7. Level tiles ===================================================================== */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px} @media (min-width:1000px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}} .tile{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line); color:#000;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease} .tile:hover{transform:translate(-2px,-2px);color:#000;box-shadow:9px 9px 0 var(--blue)} .tile .ph{display:block;aspect-ratio:268/112;overflow:hidden;background:#0A0D1A;border-bottom:2px solid var(--line)} .tile .ph img{width:100%;height:100%;object-fit:cover} .tile .bd{padding:10px 12px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex:1 1 auto} .tile .lv{font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--blue);text-transform:uppercase;display:block} .tile b{display:block;font-family:var(--read);font-size:17px;font-weight:800;line-height:1.2;margin-top:2px} .tile .n{font-family:var(--disp);font-size:15px;font-weight:800;color:var(--dim)} .tile .mt{display:block;font-size:11.5px;color:var(--dim);margin-top:2px} /* ===================================================================== 8. Carousels and combo cards ===================================================================== */ .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 16px;margin:0 -6px; scrollbar-width:none;-ms-overflow-style:none} .rail::-webkit-scrollbar{display:none} .rail>*{scroll-snap-align:start;flex:0 0 268px} .track{display:flex;align-items:center;gap:12px;margin-top:4px} .track .bar{position:relative;flex:1 1 auto;height:8px;background:rgba(0,0,0,.14);border:2px solid var(--line)} .track .bar i{position:absolute;top:0;bottom:0;left:0;background:var(--blue);display:block} .track .lb{font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.13em;color:var(--dim);text-transform:uppercase;flex:0 0 auto} .band .track .bar{background:rgba(255,255,255,.14)} .band .track .lb{color:var(--dim2)} .ccard{background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);display:flex;flex-direction:column; overflow:hidden;transition:transform .18s ease,box-shadow .18s ease} .ccard:hover{transform:translateY(-5px);box-shadow:8px 10px 0 var(--blue)} .ccard .ph{position:relative;aspect-ratio:264/150;overflow:hidden;background:#0A0D1A;border-bottom:2px solid var(--line)} .ccard .ph img{width:100%;height:100%;object-fit:cover} .ccard .ph .cx{position:absolute;top:0;right:0;background:var(--green);color:#04220F;border-left:2px solid var(--line); border-bottom:2px solid var(--line);font-family:var(--disp);font-size:12px;font-weight:800;padding:3px 8px} .ccard .bd{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto} .ccard .st{display:block;background:#fff;border:2px solid var(--line);text-align:center;padding:6px;color:#000; font-family:var(--hud);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ccard .st:hover{background:var(--blue);color:#fff} .ccard .t{font-size:14px;font-weight:700;line-height:1.32} .ccard .fine{font-size:12px;color:var(--blue);line-height:1.4} .ccard .ends{font-family:var(--hud);font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--body);text-transform:uppercase} .ccard .sp{flex:0 0 auto;min-height:2px} /* continue-card (ending soon) */ .ccard .timer{position:absolute;left:0;bottom:0;right:0;background:rgba(10,13,26,.88);padding:6px 9px;border-top:2px solid var(--line)} .ccard .timer u{display:block;font-family:var(--hud);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--dim2);text-decoration:none;text-transform:uppercase} .ccard .timer b{font-family:var(--disp);font-size:18px;font-weight:900;color:var(--green);line-height:1} .ccard .timer i{display:block;height:5px;background:rgba(255,255,255,.2);margin-top:5px;position:relative} .ccard .timer i em{position:absolute;inset:0 auto 0 0;background:var(--blue);display:block;transform-origin:left;animation:rvBar 1.1s ease-out both} /* ===================================================================== 9. Boss round ===================================================================== */ .boss{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;align-items:start} .boss .screen{position:relative;border:2px solid var(--blue);background:#000;overflow:hidden;aspect-ratio:16/10} .boss .screen img{width:100%;height:100%;object-fit:cover} .boss .screen .tag{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;background:rgba(10,13,26,.9); border:2px solid var(--green);padding:4px 9px;font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--green);text-transform:uppercase} .boss .screen .tag i{width:7px;height:7px;background:var(--green);border-radius:50%;animation:rvBlink 1.6s steps(1,end) infinite} .boss .cap{margin:9px 0 0;font-size:12px;color:var(--dim2)} .boss .pan{display:flex;flex-direction:column;gap:12px;min-width:0} .boss .nameplate{border:2px solid var(--blue);background:rgba(27,59,255,.14);padding:14px;text-align:center} .boss .nameplate h3{font-family:var(--disp);font-size:26px;font-weight:900;color:#fff;text-transform:uppercase;line-height:1.1; text-shadow:0 0 14px rgba(27,59,255,.8);overflow-wrap:anywhere} .boss .nameplate .sub{margin-top:6px;font-family:var(--hud);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--green);text-transform:uppercase} .boss .blurb{font-size:14px;color:var(--dim3);margin:0} .boss .orow{background:var(--cab2);border:2px solid var(--cab3);padding:10px 12px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap} .boss .orow .tx{min-width:0;flex:1 1 200px} .boss .orow .tx b{display:block;font-size:13.5px;color:#fff;font-weight:700;line-height:1.3} .boss .orow .tx span{display:block;font-size:11.5px;color:var(--dim2);line-height:1.4} .boss .orow .act{flex:0 0 auto} .boss .enter{display:block;text-align:center;background:var(--green);color:#04220F;border:2px solid var(--line); box-shadow:5px 5px 0 var(--line);padding:12px 16px;font-family:var(--hud);font-size:13px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease} .boss .enter:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line);background:#fff;color:#000} .boss .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .boss .stats div{background:var(--cab2);border:2px solid var(--cab3);padding:9px 10px;text-align:center} .boss .stats b{display:block;font-family:var(--disp);font-size:20px;font-weight:900;color:var(--green);line-height:1.1} .boss .stats i{display:block;font-style:normal;font-family:var(--hud);font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--dim2);margin-top:4px;text-transform:uppercase} /* ===================================================================== 10. Power-ups + newsletter ===================================================================== */ .pups{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px} .pup{background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:18px} .pup .ic{width:40px;height:40px;display:grid;place-items:center;background:var(--blue);color:#fff;border:2px solid var(--line);margin-bottom:12px} .pup:nth-child(2) .ic{background:var(--green);color:#04220F} .pup:nth-child(3) .ic{background:#fff;color:var(--green)} .pup b{display:block;font-size:17px;font-weight:800;margin-bottom:6px} .pup p{margin:0;font-size:13.5px;color:var(--body);line-height:1.5} .token{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:26px;align-items:center; background:var(--blue);border:2px solid var(--line);box-shadow:6px 6px 0 var(--line);padding:24px;color:#fff} .token .kick{font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.18em;color:#C6D0FF;text-transform:uppercase} .token h2{font-family:var(--disp);font-size:30px;font-weight:900;text-transform:uppercase;margin:8px 0 10px;line-height:1.08} .token p{margin:0;font-size:14px;color:#DDE3FF;max-width:430px} .token form{background:var(--cab);border:2px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px} .token input[type=email]{background:#131A33;border:2px solid var(--cab3);color:#fff;padding:11px 12px; font-family:var(--hud);font-size:14px;outline:0;width:100%} .token input[type=email]::placeholder{color:#7F8AA6} .token input[type=email]:focus{border-color:var(--green)} .token button{background:var(--green);color:#04220F;border:2px solid var(--line);box-shadow:4px 4px 0 var(--line); padding:11px 16px;font-family:var(--hud);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .token button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line);background:#fff} .token .fine,.token .done{margin:0;font-size:11.5px;color:#C6D0FF;line-height:1.45} .token .done{color:#BFFCDC} .token .fine a{color:#fff;text-decoration:underline} /* ===================================================================== 11. The code control + modal ===================================================================== */ .codebox{display:flex;align-items:stretch;width:100%;border:2px solid var(--line);background:#fff;cursor:pointer; padding:0;overflow:hidden;text-align:left;transition:transform .15s ease,box-shadow .15s ease} .codebox:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--green)} .codebox .cd{flex:1 1 auto;min-width:0;display:block;padding:7px 6px;text-align:center; font-family:var(--hud);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--blue);text-transform:uppercase; background:#fff;border-right:2px dashed var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5} .codebox .cta{flex:0 0 auto;display:block;padding:7px 10px;background:var(--green);color:#04220F;line-height:1.55; font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap} .codebox.deal .cd{color:var(--dim);border-right-color:var(--line);background:#EDF0F6;border-right-style:solid} .codebox.deal .cta{background:var(--blue);color:#fff} .codebox.revealed .cd{color:#04220F;background:#DCFCE9} .band .codebox,.boss .codebox{background:var(--cab)} .band .codebox .cd,.boss .codebox .cd{background:var(--cab);color:var(--green)} .band .codebox.deal .cd,.boss .codebox.deal .cd{background:#1C2444;color:var(--dim2)} .rv-modal{position:fixed;inset:0;z-index:120;background:rgba(6,8,18,.82);display:none;align-items:center;justify-content:center;padding:20px} .rv-modal.open{display:flex} .rv-modal .box{position:relative;width:100%;max-width:440px;background:#fff;border:2px solid var(--line);box-shadow:8px 8px 0 var(--blue);padding:26px 24px 22px;text-align:center} .rv-modal .x{position:absolute;top:8px;right:8px;background:#fff;border:2px solid var(--line);width:32px;height:32px;display:grid;place-items:center;cursor:pointer} .rv-modal .x:hover{background:var(--blue);color:#fff} .rv-modal .kick{font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--blue);text-transform:uppercase} .rv-modal h3{font-family:var(--disp);font-size:19px;font-weight:800;margin:8px 0 6px;line-height:1.25;text-transform:uppercase} .rv-modal .sub{font-size:13px;color:var(--body);margin:0 0 14px} .rv-modal .cw{display:flex;gap:0;border:2px dashed var(--blue);margin-bottom:14px} .rv-modal .cv{flex:1 1 auto;padding:13px 10px;font-family:var(--disp);font-size:20px;font-weight:800;letter-spacing:.06em;color:var(--blue);overflow-wrap:anywhere} .rv-modal .cp{flex:0 0 auto;background:var(--blue);color:#fff;border:0;border-left:2px dashed var(--blue);padding:0 16px;cursor:pointer; font-family:var(--hud);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .rv-modal .cp:hover{background:var(--green);color:#04220F} .rv-modal .go{display:block;background:var(--green);color:#04220F;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line); padding:12px;font-family:var(--hud);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .rv-modal .go:hover{background:var(--blue);color:#fff} .rv-modal .tl{margin-top:12px;font-size:12px;color:var(--dim);line-height:1.45} /* ===================================================================== 12. Offer rows, terms chips, details ===================================================================== */ .orow{display:grid;grid-template-columns:104px minmax(0,1fr) 190px;gap:16px;align-items:center;background:#fff; border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:13px 14px; transition:transform .15s ease,box-shadow .15s ease} .orow:hover{transform:translateX(4px);box-shadow:5px 5px 0 var(--green)} .orow.hide{display:none} .orow.gone{opacity:.72;box-shadow:5px 5px 0 var(--dim2)} .orow .bigv{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .orow .bigv b{font-family:var(--disp);font-size:24px;font-weight:900;color:var(--blue);line-height:1} .orow .bigv i{font-family:var(--hud);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--dim);font-style:normal;text-transform:uppercase} .orow .mid{min-width:0} .orow .mid .st{display:inline-block;font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.13em; color:var(--blue);text-transform:uppercase;margin-bottom:3px} .orow .mid .t{display:block;font-size:15px;font-weight:700;line-height:1.35;margin-bottom:7px} .orow .act{justify-self:stretch} .rv-terms{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px} .rv-x{display:inline-block;background:var(--cab);color:#fff;border:2px solid var(--line);padding:2px 7px; font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .rv-x.soon{background:var(--blue)} .rv-x.today{background:#B3361F;color:#fff} .rv-x.expired{background:#6C7489} .rv-x.ongoing{background:var(--green);color:#04220F} .rv-t{display:inline-block;background:#EDF0F6;border:2px solid var(--hair);padding:2px 7px;font-size:11.5px;color:var(--body)} .rv-t-quiet{background:#fff;color:var(--dim)} .rv-details{margin:0} .rv-details summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none; font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--blue);text-transform:uppercase} .rv-details summary::-webkit-details-marker{display:none} .rv-d-sign{width:9px;height:9px;border:2px solid var(--blue);border-top:0;border-left:0;transform:rotate(45deg) translateY(-2px);display:inline-block} .rv-details[open] .rv-d-sign{transform:rotate(-135deg) translateY(-2px)} .rv-d-body{margin-top:8px;border-left:3px solid var(--blue);padding:2px 0 2px 11px} .rv-d-body p{margin:0 0 5px;font-size:12.5px;color:var(--body);line-height:1.5} .band .rv-t{background:var(--cab2);border-color:var(--cab3);color:var(--dim3)} .band .rv-t-quiet{background:transparent;color:var(--dim2)} .band .rv-details summary{color:var(--green)} .band .rv-d-sign{border-color:var(--green)} .band .rv-d-body{border-left-color:var(--green)} .band .rv-d-body p{color:var(--dim3)} .band .rv-note{color:var(--dim2)} /* ===================================================================== 13. Store cards / directory ===================================================================== */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px} .scard{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line); padding:13px;color:#000;transition:transform .18s ease,box-shadow .18s ease} .scard:hover{transform:translate(-2px,-2px);color:#000;box-shadow:9px 9px 0 var(--blue)} .scard .av{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--line);background:#EDF0F6; font-family:var(--disp);font-size:15px;font-weight:800;color:var(--blue);overflow:hidden} .scard .av img{width:100%;height:100%;object-fit:cover} .scard .tx{min-width:0;display:flex;flex-direction:column;gap:2px} .scard .nm{font-size:16px;font-weight:800;line-height:1.25;overflow-wrap:anywhere} .scard .mt{font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--dim);text-transform:uppercase} .scard .bv{font-size:13px;color:var(--blue);font-weight:600;margin-top:3px} .scard .bv.none{color:var(--dim)} .azbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px} .azbar a{display:grid;place-items:center;min-width:34px;height:32px;padding:0 7px;background:#fff;border:2px solid var(--line); box-shadow:3px 3px 0 var(--line);font-family:var(--hud);font-size:12px;font-weight:700;color:#000} .azbar a:hover{background:var(--blue);color:#fff} .azgroup{margin:0 0 30px} .azgroup h3{font-family:var(--disp);font-size:24px;font-weight:900;margin:0 0 12px;display:flex;align-items:center;gap:12px} .azgroup h3 i{flex:1 1 auto;height:3px;background:var(--line);display:block} /* ===================================================================== 14. Store page ===================================================================== */ .shero{background:var(--cab);color:#fff;border-bottom:2px solid var(--line);padding:30px 0} .shero .in{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap} .shero .mark{flex:0 0 82px;width:82px;height:82px;border:2px solid var(--blue);background:#fff;display:grid;place-items:center;overflow:hidden} .shero .mark img{width:100%;height:100%;object-fit:cover} .shero .tx{flex:1 1 320px;min-width:0} .shero .crumb{font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--dim2);text-transform:uppercase;margin-bottom:7px} .shero .crumb a{color:var(--green)} .shero h1{font-family:var(--disp);font-size:34px;font-weight:900;text-transform:uppercase;line-height:1.08;overflow-wrap:anywhere} .shero .sub{margin:8px 0 0;font-size:14px;color:var(--dim3);max-width:640px} .shero .stat{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .shero .stat span{background:var(--cab2);border:2px solid var(--cab3);padding:6px 11px;font-family:var(--hud); font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--dim3);text-transform:uppercase} .shero .stat span b{color:var(--green);font-family:var(--disp)} .shero .visit{flex:0 0 auto} .visit{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#04220F;border:2px solid var(--line); box-shadow:5px 5px 0 var(--line);padding:11px 16px;font-family:var(--hud);font-size:12px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease} .visit:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line);background:var(--blue);color:#fff} .tabs{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px} .tabs button{background:#fff;border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:8px 14px;cursor:pointer; font-family:var(--hud);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .tabs button.on{background:var(--blue);color:#fff} .tabs button:hover{background:var(--green);color:#04220F} .olist{display:flex;flex-direction:column;gap:14px} .sgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start} .side{display:flex;flex-direction:column;gap:18px} .sbox{background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:16px} .sbox h4{font-family:var(--disp);font-size:14px;font-weight:800;text-transform:uppercase;margin:0 0 10px;letter-spacing:.04em} .sbox p{font-size:13px;color:var(--body);margin:0 0 8px} .sbox .kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:13px} .sbox .kv:last-child{border-bottom:0} .sbox .kv b{font-family:var(--disp);font-size:14px;color:var(--blue)} .sbox .lst{display:flex;flex-direction:column} .sbox .lst a{padding:6px 0;border-bottom:1px solid var(--hair);font-size:13.5px;font-weight:600} .sbox .lst a:last-child{border-bottom:0} .gonebox{margin-top:26px;background:#EDF0F6;border:2px solid var(--dim2);padding:16px} .gonebox h3{font-family:var(--disp);font-size:16px;font-weight:800;text-transform:uppercase;margin:0 0 6px} .gonebox>p{font-size:13px;color:var(--body);margin:0 0 12px} /* ===================================================================== 15. Pages, prose, contact ===================================================================== */ .phead{background:var(--cab);color:#fff;border-bottom:2px solid var(--line);padding:32px 0} .phead .kick{display:inline-block;background:var(--blue);color:#fff;border:2px solid var(--line);padding:4px 10px; font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px} .phead h1{font-family:var(--disp);font-size:36px;font-weight:900;text-transform:uppercase;line-height:1.06;overflow-wrap:anywhere} .phead .lede{margin:10px 0 0;font-size:15px;color:var(--dim3);max-width:680px} .prose{max-width:760px;font-size:15.5px;color:var(--body);line-height:1.65;min-width:0} .prose h2{font-family:var(--disp);font-size:22px;font-weight:900;color:#000;text-transform:uppercase;margin:30px 0 10px;line-height:1.2} .prose h3{font-family:var(--read);font-size:17px;font-weight:800;color:#000;margin:22px 0 8px} .prose p{margin:0 0 13px;overflow-wrap:anywhere} .prose ul,.prose ol{margin:0 0 14px;padding-left:20px} .prose li{margin:0 0 7px} .prose a{text-decoration:underline;text-underline-offset:2px} .prose .tw,.prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px} .prose th,.prose td{border:2px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere} .prose th{background:#EDF0F6;font-family:var(--hud);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .prose blockquote{margin:0 0 14px;padding:12px 14px;background:#fff;border:2px solid var(--line);box-shadow:4px 4px 0 var(--line)} .prose .cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 18px} .prose .cardgrid>div{background:#fff;border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:14px} .prose .cardgrid b{display:block;font-family:var(--disp);font-size:13px;text-transform:uppercase;margin-bottom:5px} .cgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:start} .cform{background:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:20px} .cform label{display:block;font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;margin:0 0 5px;color:var(--dim)} .cform input,.cform select,.cform textarea{width:100%;border:2px solid var(--line);padding:10px 11px;font-family:var(--read); font-size:14.5px;background:#fff;outline:0;margin-bottom:14px} .cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--blue);box-shadow:3px 3px 0 var(--blue)} .cform textarea{min-height:130px;resize:vertical} .cform button{background:var(--blue);color:#fff;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:12px 20px; font-family:var(--hud);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .cform button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line);background:var(--green);color:#04220F} .cform .ok{background:#DCFCE9;border:2px solid var(--green);padding:12px;margin-bottom:16px;font-size:14px} .cform .fine{font-size:12px;color:var(--dim);margin:10px 0 0} /* ===================================================================== 16. Footer ===================================================================== */ .foot{background:var(--cab);color:var(--dim3);border-top:3px solid var(--blue);padding:40px 0 0;margin-top:0} .foot .cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:28px} .foot .wm{display:inline-block;border:2px solid var(--blue);padding:10px 14px;font-family:var(--disp);font-size:22px; font-weight:900;color:#fff;letter-spacing:.08em;text-shadow:0 0 12px rgba(27,59,255,.85);margin-bottom:14px} .foot .about{font-size:13px;line-height:1.55;margin:0 0 10px;max-width:400px} .foot .disc{font-size:12px;line-height:1.55;color:var(--dim2);margin:0;max-width:400px} .foot h4{font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--green);text-transform:uppercase;margin:0 0 12px} .foot .lst{display:flex;flex-direction:column;gap:8px} .foot .lst a{color:var(--dim3);font-size:13.5px} .foot .lst a:hover{color:#fff} .foot .strip{margin-top:34px;border-top:2px solid var(--cab3);overflow:hidden;display:flex} .foot .strip .row{display:flex;width:max-content;animation:rvTick 48s linear infinite} .foot .strip span{display:flex;align-items:center;white-space:nowrap} .foot .strip a{color:var(--dim2);font-family:var(--hud);font-size:10.5px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;padding:11px 0} .foot .strip a:hover{color:var(--green)} .foot .strip i{display:inline-block;width:4px;height:4px;background:var(--cab3);margin:0 18px} .foot .base{border-top:2px solid var(--cab3);padding:14px 0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12px;color:var(--dim2)} .foot .base .set{font-family:var(--hud);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} /* ===================================================================== 17. Responsive ===================================================================== */ @media (max-width:1100px){ .hero .grid{grid-template-columns:1fr;gap:22px} .hero .score b{font-size:64px} .boss{grid-template-columns:1fr} .sgrid{grid-template-columns:1fr} .cgrid{grid-template-columns:1fr} .token{grid-template-columns:1fr;gap:20px} .bhead,.brow{grid-template-columns:44px 132px minmax(0,1fr) 70px 90px 162px;gap:10px} } @media (max-width:940px){ .hud{flex-wrap:wrap} .hud .meters{flex:1 1 100%;width:auto;flex-direction:row} .hud .meters .meter{flex:1 1 0;min-width:0} .marq{flex:1 1 100%;order:-1} .slot{flex:1 1 100%;width:auto} .bhead{display:none} .brow{grid-template-columns:44px minmax(0,1fr);grid-auto-rows:min-content;gap:10px 12px} .brow .rk{grid-row:span 2} .brow .st{justify-self:start;min-width:150px} .brow .off{grid-column:2} .brow .val{grid-column:2;font-size:19px} .brow .ends{grid-column:2} .brow .cd{grid-column:2;max-width:230px} } @media (max-width:860px){ .players{grid-template-columns:1fr} .pcardh .ph{aspect-ratio:16/7} .orow{grid-template-columns:86px minmax(0,1fr);gap:10px 14px} .orow .act{grid-column:1/-1;justify-self:start;min-width:220px} .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .foot .cols>div:first-child{grid-column:1/-1} } @media (max-width:760px){ :root{--pad:16px} .mast{display:none} .mbar{display:block;background:var(--bg);padding:12px 0;position:sticky;top:0;z-index:70;border-bottom:2px solid var(--line)} .mbar .in{display:flex;align-items:center;justify-content:space-between;gap:12px} .mbar .wm{display:inline-block;background:var(--cab);border:2px solid var(--line);padding:8px 12px; font-family:var(--disp);font-size:17px;font-weight:900;color:#fff;letter-spacing:.07em} .mbar .burger{background:#fff;border:2px solid var(--line);box-shadow:3px 3px 0 var(--line);width:40px;height:38px; display:grid;place-items:center;cursor:pointer} .mdraw{display:none;padding-top:12px} .mdraw.open{display:block} .mdraw form{display:flex;gap:8px;margin-bottom:12px} .mdraw input[type=search]{flex:1 1 auto;min-width:0;border:2px solid var(--line);padding:9px 11px;font-size:15px;outline:0} .mdraw .go{background:var(--blue);color:#fff;border:2px solid var(--line);padding:9px 14px;font-family:var(--hud); font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} .mdraw a{display:block;padding:10px 0;border-bottom:2px solid var(--hair);font-family:var(--hud);font-size:12.5px; font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#000} .sect,.band,.band-b{padding:30px 0} .shead h2{font-size:26px} .hero{padding:16px} .hero h1{font-size:27px} .hero .score b{font-size:56px} .hero .score i{font-size:30px} .phead h1{font-size:27px} .shero h1{font-size:26px} .token{padding:16px} .token h2{font-size:23px} .rail>*{flex:0 0 245px} .pnote .wrap{flex-direction:column;align-items:flex-start;gap:6px} .pnote .upd{font-size:10px} .boss .nameplate h3{font-size:21px} .rv-cookie .in{gap:12px} .rv-cookie .acts{flex:1 1 100%} .rv-cookie .ok,.rv-cookie .rd{flex:1 1 0;text-align:center;justify-content:center} } @media (max-width:520px){ .hud .meters{flex-wrap:wrap} .marq .wm{font-size:26px;letter-spacing:.07em} .foot .cols{grid-template-columns:1fr} .orow{grid-template-columns:1fr} .orow .bigv{flex-direction:row;align-items:baseline;gap:8px} .shead{gap:14px} .boss .stats{grid-template-columns:1fr} }