/* PEGNIO v2 — original portal layout inspired by modern gaming directories. */
:root { --bg:#0f111b;--panel:#1c2030;--panel2:#222737;--line:#30364b;--text:#f8f9fc;--muted:#a3adc5;--lime:#adf36b;--purple:#9a81fb; }
html {scroll-behavior:smooth}
body {background:#111420!important;color:#f5f7ff}
.brod-head {height:66px;background:#171a27;border-bottom:1px solid #303345;padding:0 25px;gap:20px;box-shadow:0 4px 25px #0607104d}
.brod-logo {font-size:27px;letter-spacing:-1.5px;font-weight:950;white-space:nowrap}
.brod-logo span:nth-child(2){background:linear-gradient(105deg,#f5f8ff,#c4b4ff 70%,#9afbd7);-webkit-background-clip:text;background-clip:text;color:transparent}
.search-top {max-width:690px;height:43px;background:#252a3a;border:1px solid #3b4056;border-radius:10px;box-shadow:none}
.search-top:focus-within {border-color:#a18af7;box-shadow:0 0 0 3px #9a81fb25}
.search-top input::placeholder {color:#a5adbf}
.head-pill {background:transparent;border:1px solid transparent;padding:9px 11px;color:#cdd4e8}
.head-pill:hover {background:#282d40;color:#fff}
.head-profile {border-radius:12px}
.brod-sidebar {width:220px;top:66px;padding:16px 11px;background:#181b29;border-right:1px solid #303345}
.main-brod {margin-left:220px;min-height:calc(100vh - 66px);padding:18px 23px 0;background:#111420}
.page-body {max-width:1800px}
.side-heading {color:#9da9c2;font-size:10px;letter-spacing:1.3px}
.side-link {font-size:13px;color:#cbd2e4;padding:10px 13px;gap:12px;font-weight:700}
.side-link:hover {background:#2b3042!important;color:#fff}
.side-link.current {background:#30354a!important;color:#fff}
.side-ico {font-size:18px}
.side-divider {border-color:#343849;margin:15px 4px}
.side-blurb,.side-note {color:#9ca7ba}
.peg-v2-navlabel {color:#a1aec8;font-size:11px;letter-spacing:1.2px;font-weight:800;margin:18px 12px 6px}
.peg-v2-navgroup {display:grid;gap:3px;margin-bottom:14px}
.peg-v2-navgroup button {border:0;border-radius:9px;background:transparent;color:#cdd5e7;padding:10px 12px;text-align:left;font:700 13px system-ui;cursor:pointer}
.peg-v2-navgroup button:hover {background:#303548;color:#fff}
.peg-v2-tabs {display:flex;align-items:center;gap:9px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding-bottom:3px}
.peg-v2-tabs::-webkit-scrollbar{display:none}
.peg-v2-tab {display:inline-flex;align-items:center;gap:8px;border:1px solid #343a51;background:#212638;color:#d7ddef;padding:10px 17px;border-radius:11px;font:750 13px system-ui;cursor:pointer;white-space:nowrap}
.peg-v2-tab:hover,.peg-v2-tab.active {border-color:#99a1c4;background:#353a53;color:#fff}
.peg-v2-tab.primary {color:#111525;background:#b7f887;border-color:#b7f887;font-weight:850}
.peg-v2-tab.primary:hover {background:#cafcaa}
.hero-mosaic {grid-template-columns:1.52fr 1fr;height:360px;gap:12px;margin-bottom:24px}
.hero-obby,.hero-side button {border-radius:13px!important}
.hero-obby:after {content:"FEATURED • PLAY NOW";position:absolute;bottom:14px;left:18px;border-radius:8px;background:#111827d9;color:#fff;letter-spacing:1px;font-size:11px;font-weight:850;padding:8px 11px}
.hero-obby:hover img,.brod-cover:hover img {transform:scale(1.045)}
.hero-obby img,.brod-cover img {transition:transform .24s ease}
.brod-section {margin-bottom:25px}
.brod-heading {margin-bottom:12px}
.brod-heading h2 {font-size:19px!important;font-weight:900;letter-spacing:-.4px;color:#f8f9ff}
.quiet-label {color:#a4afc4}
.game-row {grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.all-card-grid {grid-template-columns:repeat(7,minmax(0,1fr));gap:13px}
.brod-game {min-width:0;background:#1b2030;border-radius:12px;overflow:hidden;border:1px solid #2c3349;transition:transform .18s,border-color .18s,box-shadow .18s}
.brod-game:hover {transform:translateY(-3px);border-color:#707caa;box-shadow:0 10px 25px #0005}
.brod-cover {border:0;border-radius:10px 10px 0 0;overflow:hidden}
.brod-cardfoot {min-height:55px;height:auto;padding:7px 26px 8px 9px}
.card-name {font-weight:800;color:#f4f7ff}
.card-sub {font-size:11px;color:#a8b4c7}
.filter-band {padding:12px;background:#1b1f2d;border-radius:13px;border:1px solid #2d3549;margin-bottom:15px}
.chip {border-radius:9px}
.chip.active {background:#baef86!important;color:#111827!important}
#partner-games {scroll-margin-top:90px}
#all-games {scroll-margin-top:90px}
.peg-v2-banner {border:1px solid #333b54;border-radius:14px;background:linear-gradient(110deg,#2c244e,#1a2945 62%,#1e3d3d);margin:2px 0 18px;padding:14px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.peg-v2-banner .text {font-weight:800;font-size:15px;color:#f8f8ff}
.peg-v2-banner small {font-size:12px;color:#bec7df}
.peg-v2-banner a {font-weight:850;color:#101522;text-decoration:none;background:#baf48e;border-radius:10px;padding:9px 14px;white-space:nowrap}
.feature-strip {gap:14px}
.feature-info {background:#1e2331;border:1px solid #333950;border-radius:13px}
.footer {border-top-color:#2d3243}
@media (max-width:1400px) {.all-card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.game-row{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1100px) {.brod-sidebar{width:188px}.main-brod{margin-left:188px;padding:16px 15px 0}.all-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.game-row{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-mosaic{height:310px}}
@media (max-width:760px) {.brod-head{height:62px;padding:0 12px;gap:10px}.brod-sidebar{top:62px;width:248px}.main-brod{margin-left:0;padding:13px 10px 0}.brod-logo{font-size:22px}.search-top{height:39px;min-width:80px}.head-pill{display:none}.head-profile{display:none}.hero-mosaic{grid-template-columns:1fr;height:auto;gap:10px}.hero-obby{min-height:210px;aspect-ratio:16/9}.hero-side{height:220px}.peg-v2-tabs{margin-bottom:12px}.peg-v2-tab{padding:9px 12px}.all-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.game-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.brod-heading h2{font-size:17px!important}.peg-v2-banner{padding:12px;align-items:flex-start}.peg-v2-banner .text{font-size:13px}.peg-v2-banner a{font-size:12px;padding:8px 10px}}
@media (max-width:400px) {.all-card-grid,.game-row{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-side{height:190px}.peg-v2-banner small{display:none}}
/* PEGNIO square, image-only game tiles — title and controls appear when a game opens. */
.hero-mosaic{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;height:auto!important;gap:12px!important;align-items:stretch;margin-bottom:24px!important}
.hero-side{display:contents!important;height:auto!important}
.hero-obby,.mini-spot{width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;aspect-ratio:1/1!important;border-radius:13px!important;overflow:hidden!important;box-shadow:none!important}
.hero-obby>img,.mini-spot>img{width:100%!important;height:100%!important;object-fit:cover!important}
.hero-obby:after,.mini-spot:after{display:none!important}
.spot-badge,.spot-caption,.demo-pill{display:none!important}
.game-row{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important;padding:0!important}
.game-row>.brod-game:nth-child(n){display:block!important}
.game-row .brod-game{flex:none!important}
.brod-game{position:relative!important;display:block!important;aspect-ratio:1/1!important;border:0!important;border-radius:13px!important;background:#262b3a!important;overflow:hidden!important;box-shadow:none!important}
.brod-game>.brod-cover{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;border:0!important;border-radius:13px!important;overflow:hidden!important;cursor:pointer!important}
.brod-game>.brod-cover>img{width:100%!important;height:100%!important;object-fit:cover!important}
.brod-game>.brod-cardfoot,.brod-game .card-name,.brod-game .card-sub,.brod-game .fav-corner,.brod-game .corner-label,.brod-game .play-hover{display:none!important}
.brod-game:focus-within,.hero-obby:focus-visible,.mini-spot:focus-visible{outline:3px solid #aff391!important;outline-offset:2px}
.brod-game:hover,.hero-obby:hover,.mini-spot:hover{transform:translateY(-3px);box-shadow:0 8px 22px #0005!important}
.all-card-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px!important}
@media(max-width:1400px){.all-card-grid,.game-row{grid-template-columns:repeat(6,minmax(0,1fr))!important}.hero-mosaic{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:1100px){.all-card-grid,.game-row{grid-template-columns:repeat(5,minmax(0,1fr))!important}.hero-mosaic{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:760px){.all-card-grid,.game-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}.hero-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;height:auto!important}.hero-obby{min-height:0!important;aspect-ratio:1/1!important}.hero-side{height:auto!important}.brod-game{border-radius:11px!important}.brod-game>.brod-cover{border-radius:11px!important}}
@media(max-width:370px){.all-card-grid,.game-row,.hero-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* PEGNIO — dark violet gaming-portal palette and periodic large image tiles */
:root {
  --bg:#101116!important;
  --panel:#1d1f29!important;
  --panel2:#252733!important;
  --line:#323442!important;
  --text:#f6f7fa!important;
  --muted:#abb0c1!important;
  --lime:#a076ff!important;
  --purple:#a076ff!important;
}
html,body{background:#101116!important;color:#f5f5fa!important}
.brod-head{background:#191a22!important;border-bottom:1px solid #333440!important;box-shadow:0 4px 16px #08090e55!important}
.brod-sidebar{background:#191a23!important;border-right:1px solid #33343f!important}
.main-brod{background:#101116!important}
.page-body,.new-home{background:transparent!important}
.search-top,.inline-search{background:#292a35!important;border:1px solid #454552!important;color:#c8cada!important;box-shadow:none!important}
.search-top:focus-within,.inline-search:focus-within{border-color:#a076ff!important;box-shadow:0 0 0 2px #a076ff33!important}
.search-top input,.inline-search input{color:#fff!important}
.side-link{color:#d6d6e1!important}
.side-link.current,.side-link:hover,.peg-v2-navgroup button:hover{background:#343044!important;color:#fff!important}
.side-link.current .side-ico{color:#bd9cff!important}
.side-divider{border-color:#323440!important}
.peg-v2-navlabel,.side-heading{color:#b6a6d2!important}
.peg-v2-navgroup button{color:#d6d7e2!important}
.peg-v2-tab,.chip{background:#24252e!important;color:#d7d7e2!important;border:1px solid #393a47!important}
.peg-v2-tab:hover,.peg-v2-tab.active,.chip:hover,.chip.active{background:#42345e!important;border-color:#8769bf!important;color:#fff!important}
.peg-v2-tab.primary{background:#8057d9!important;color:#fff!important;border-color:#a076ff!important}
.peg-v2-tab.primary:hover{background:#9269ea!important}
.brod-see,.count-pill{color:#c6afff!important}
.count-pill{background:#30263e!important}
.brod-heading h2,.peg-v2-banner .text{color:#faf8ff!important}
.brod-logo{text-shadow:none!important}
.brod-logo>span:nth-child(2),.brod-logo span:nth-child(2){background:linear-gradient(180deg,#fff 10%,#ccb8ff 55%,#a887f2)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;filter:drop-shadow(0 1px #4e326f)!important}
.brod-crown,.brod-logo i{color:#caaaff!important}
.head-pill,.lang-select{background:#252630!important;border:1px solid #393946!important;color:#e1deea!important}
.avatar-pip{background:#523e7f!important;border-color:#9876e1!important}
.brod-game{background:#242630!important;border:1px solid #30313c!important}
.brod-game:hover,.mini-spot:hover,.hero-obby:hover{box-shadow:0 9px 27px #0008,0 0 0 2px #ab87ef66!important}
.brod-game:focus-within,.mini-spot:focus-visible,.hero-obby:focus-visible{outline:3px solid #c5a5ff!important}
.filter-band,.feature-info,.panel,.item{background:#1d1f2a!important;border-color:#333440!important}
.feature-info,.panel{color:#dddce8}
.peg-v2-banner{background:linear-gradient(115deg,#29233b,#201f30 70%,#322347)!important;border-color:#463b60!important}
.peg-v2-banner a,.mini-action,.btn:not(.secondary):not(.ghost):not(.danger){background:#875fe0!important;color:#fff!important;box-shadow:none!important}
.modal{background:#1d1f28!important;border-color:#444250!important}
.modal-backdrop{background:#090910e8!important}
.modal-header{border-color:#383844!important}
.mobile-nav{background:#191922f4!important;border-color:#373641!important}
.mobile-nav .active{color:#c3a4ff!important}
.footer,.site-caution{color:#9fa1b3!important}
.game-row,.all-card-grid{grid-auto-flow:dense!important;grid-auto-rows:auto!important;align-items:stretch!important}
.game-row>.brod-game:nth-child(11n + 1),
.all-card-grid>.brod-game:nth-child(13n + 1){grid-column:span 2!important;grid-row:span 2!important;aspect-ratio:1/1!important}
.hero-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;aspect-ratio:2/1!important;gap:12px!important}
.hero-obby{grid-column:span 2!important;grid-row:span 2!important;aspect-ratio:1/1!important}
.mini-spot{aspect-ratio:1/1!important}
.hero-obby,.mini-spot,.brod-game{border-radius:12px!important}
.brod-game>.brod-cover{border-radius:12px!important}
@media(max-width:760px){
  .hero-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;aspect-ratio:auto!important;gap:9px!important}
  .hero-obby{grid-column:span 2!important;grid-row:span 2!important;aspect-ratio:2/1!important}
  .game-row>.brod-game:nth-child(11n + 1),.all-card-grid>.brod-game:nth-child(13n + 1){grid-column:span 2!important;grid-row:span 2!important}
  .game-row,.all-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
}
@media(max-width:370px){
  .game-row,.all-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Keep every game tile square, including the oversized mobile feature. */
@media(max-width:760px){
  .hero-obby{grid-column:span 2!important;grid-row:auto!important;aspect-ratio:1/1!important;height:auto!important}
}