/* POOGROUNDS styles. Its own look, separate from the main site: header, nav, three columns, panels, cards, ribbons.
   Sections: base, header, login joke, nav, columns and panels, cards and ribbons, pages, footer, narrow screens. */

/* ---------- base ---------- */
:root{
  --pg-bg:#0d1120; --pg-panel:#151b2d; --pg-panel-2:#1c2338; --pg-line:#2b3452;
  --pg-ink:#ecebe6; --pg-soft:#a0a8c0; --pg-link:#8fb8ff;
  --pg-yel:#ffd400; --pg-yel-ink:#111; --pg-red:#d11212; --pg-green:#3ccf5a;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{background:var(--pg-bg);}
body{margin:0;background:var(--pg-bg);color:var(--pg-ink);font:14px/1.45 Verdana,Tahoma,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
:lang(ja) body,html:lang(ja){font-family:"Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",Verdana,sans-serif;}
a{color:var(--pg-link);}
img{max-width:100%;}
[hidden]{display:none !important;}
.pg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.pg-skip{position:absolute;left:8px;top:-60px;z-index:9;background:var(--pg-yel);color:var(--pg-yel-ink);padding:8px 12px;font-weight:bold;}
.pg-skip:focus{top:8px;}
:focus-visible{outline:3px solid var(--pg-yel);outline-offset:2px;}
.pg-ico{width:1.25em;height:1.25em;fill:currentColor;flex:none;vertical-align:-.25em;}
.pg-soft{color:var(--pg-soft);font-size:13px;margin:0;}

/* ---------- header: one lockup like the 2008 Newgrounds one. The tank, wordmark and tagline sit together
   on the black ground; the crowd stands on the ground line with the sunburst behind. ---------- */
.pg-head{
  position:relative;overflow:hidden;
  background:
    linear-gradient(to top,#111 0,#111 118px,transparent 118px),
    url(/poogrounds/img/crowd.png) center bottom 117px / auto 120px repeat-x,
    repeating-conic-gradient(from 0deg at 14% 55%,rgba(255,244,140,.55) 0deg 7.5deg,transparent 7.5deg 15deg),
    linear-gradient(#ffd21a,#ff9500 85%);
  border-bottom:3px solid #000;
}
.pg-head-in{
  position:relative;max-width:1280px;margin:0 auto;min-height:330px;padding:34px 16px 0;
  display:grid;grid-template-columns:300px minmax(0,1fr) 300px;grid-template-rows:auto 1fr 74px 44px;
  grid-template-areas:"logo search login" "logo . login" "logo word login" "logo tag login";column-gap:20px;
}
.pg-back{position:absolute;top:8px;left:16px;z-index:2;color:#111;font-size:12px;font-weight:bold;text-decoration:none;background:rgba(255,255,255,.55);padding:3px 8px;}
.pg-back:hover{background:#fff;}
.pg-brand{display:contents;color:inherit;text-decoration:none;}
.pg-logo{grid-area:logo;align-self:end;width:300px;height:auto;margin-bottom:10px;position:relative;z-index:1;}   /* treads on the black ground */
.pg-words{display:contents;}
.pg-wordmark{grid-area:word;align-self:end;width:100%;max-width:480px;height:auto;}
.pg-tagline{grid-area:tag;align-self:center;width:100%;max-width:480px;height:auto;}
.pg-search{grid-area:search;align-self:start;display:flex;gap:8px;max-width:560px;padding-top:4px;}
.pg-search-box{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:var(--pg-yel);border-radius:8px;padding:0 10px;color:#111;}
.pg-search-box input{flex:1;min-width:0;border:0;background:transparent;color:#111;font:inherit;font-size:16px;padding:8px 0;}
.pg-search-box input:focus{outline:none;}
.pg-search-box:focus-within{outline:3px solid #fff;outline-offset:2px;}
.pg-search select{font:inherit;background:#1c2338;color:#fff;border:1px solid #3a4466;border-radius:6px;padding:0 8px;}
.pg-search button,.pg-btn{font:bold 15px/1 Verdana,Tahoma,sans-serif;background:linear-gradient(#ffb21a,#ff7a00);color:#111;border:0;border-radius:6px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-block;}
.pg-search button:hover,.pg-btn:hover{background:linear-gradient(#ffd24a,#ff9500);}

/* ---------- the login box: a joke that never works ---------- */
.pg-login{grid-area:login;align-self:stretch;background:#111;border:3px solid #2a2a2a;border-bottom:0;padding:12px 16px 14px;margin-top:-26px;color:#fff;font-size:13px;}
.pg-login p{margin:0;}
.pg-login a{color:var(--pg-yel);font-weight:bold;text-decoration:none;}
.pg-login-top a{font-size:17px;}
.pg-login-forgot a{color:#ddd;font-weight:normal;}
.pg-login label{display:block;margin:8px 0 3px;font-weight:bold;letter-spacing:.03em;}
.pg-login input[type=text]{width:100%;background:var(--pg-yel);border:0;padding:6px 8px;font:inherit;color:#111;}
.pg-fakepass{-webkit-text-security:disc;}
.pg-login-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px;}
.pg-login .pg-check{display:flex;align-items:center;gap:6px;margin:0;font-weight:normal;}
.pg-login button{font:bold 14px Verdana,sans-serif;background:linear-gradient(#ffb21a,#ff7a00);color:#111;border:0;padding:7px 12px;cursor:pointer;}
.pg-login-msg{min-height:1.4em;margin-top:6px !important;color:#ff8a7a;font-weight:bold;}

/* ---------- nav ---------- */
.pg-nav{background:#161d30;border-bottom:1px solid #000;}
.pg-nav{display:flex;max-width:1280px;margin:0 auto;padding:8px 16px;gap:4px;align-items:stretch;}
body > .pg-nav{max-width:none;padding-left:max(16px,calc((100% - 1280px) / 2 + 16px));padding-right:max(16px,calc((100% - 1280px) / 2 + 16px));}
.pg-nav ul{list-style:none;margin:0;padding:0;display:flex;flex:1;gap:4px;}
.pg-nav li{flex:1;}
.pg-nav a{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;min-height:44px;padding:6px 10px;color:#dfe3ee;text-decoration:none;font-size:15px;border-radius:3px;background:#1e2640;}
.pg-nav a .pg-ico{width:22px;height:22px;color:#c9cfde;}
.pg-nav a:hover{background:#28314f;color:#fff;}
.pg-nav a[aria-current=page]{background:var(--pg-yel);color:#111;font-weight:bold;}
.pg-nav a[aria-current=page] .pg-ico{color:#111;}
.pg-lang{display:flex;gap:2px;align-items:center;margin-left:6px;}
.pg-lang button{font:12px Verdana,sans-serif;min-height:44px;padding:0 10px;background:transparent;color:var(--pg-soft);border:1px solid var(--pg-line);cursor:pointer;}
.pg-lang button[aria-pressed=true]{background:var(--pg-yel);color:#111;border-color:var(--pg-yel);font-weight:bold;}

/* ---------- columns and panels ---------- */
.pg-cols{max-width:1280px;margin:0 auto;padding:14px 16px 24px;display:grid;grid-template-columns:240px minmax(0,1fr) 270px;grid-template-areas:"left main right";gap:14px;align-items:start;}
.pg-main{grid-area:main;display:flex;flex-direction:column;gap:14px;min-width:0;}
.pg-main:focus{outline:none;}
.pg-left{grid-area:left;display:flex;flex-direction:column;gap:14px;}
.pg-right{grid-area:right;display:flex;flex-direction:column;gap:14px;}
.pg-panel{background:var(--pg-panel);border:1px solid var(--pg-line);border-radius:4px;padding:12px 14px 14px;}
.pg-panel > h1,.pg-panel > h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--pg-line);color:var(--pg-yel);font-size:18px;font-weight:bold;}
.pg-panel > h1 .pg-ico,.pg-panel > h2 .pg-ico{width:26px;height:26px;}
.pg-menu{list-style:none;margin:0;padding:0;}
.pg-menu li + li{border-top:1px solid var(--pg-line);}
.pg-menu a{display:flex;align-items:center;gap:12px;padding:8px 2px;color:var(--pg-yel);text-decoration:none;font-size:15px;}
.pg-menu a .pg-ico{width:24px;height:24px;}
.pg-menu a:hover{color:#fff;}
.pg-news{list-style:none;margin:0;padding:0;}
.pg-news li{padding:4px 0;}
.pg-news li::before{content:"» ";color:var(--pg-yel);}
.pg-news time{display:block;color:var(--pg-soft);font-size:11px;padding-left:1.1em;}
.pg-online{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;font-size:13px;}
.pg-dot{width:12px;height:12px;border-radius:50%;background:var(--pg-green);box-shadow:0 0 6px var(--pg-green);flex:none;}

/* ---------- cards, thumbnails, ribbons ---------- */
.pg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.pg-card h3{margin:8px 0 2px;font-size:15px;line-height:1.3;}
.pg-card h3 a,.pg-feat h3 a{color:#fff;text-decoration:none;}
.pg-card h3 a:hover,.pg-feat h3 a:hover{color:var(--pg-yel);text-decoration:underline;}
.pg-by{margin:0;font-size:13px;color:var(--pg-soft);}
.pg-guest{display:inline-block;font-size:11px;color:var(--pg-yel);border:1px solid var(--pg-yel);padding:0 5px;margin-left:4px;border-radius:2px;}
.pg-kind{margin:2px 0 0;font-size:12px;color:var(--pg-soft);}
.pg-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#000;border:1px solid #000;box-shadow:0 0 0 1px var(--pg-line);}
.pg-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease;}
a.pg-thumb:hover img{transform:scale(1.04);}
.pg-soon{position:absolute;top:20px;left:-42px;width:160px;padding:6px 0;transform:rotate(-45deg);background:var(--pg-red);color:#fff;
  font:italic 800 12px/1 Arial,Helvetica,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;letter-spacing:.04em;text-align:center;white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(0,0,0,.35);pointer-events:none;}
.pg-thumb-big .pg-soon{top:34px;left:-58px;width:240px;padding:9px 0;font-size:17px;}
.pg-new{position:absolute;top:6px;right:6px;background:var(--pg-yel);color:#111;font:bold 11px/1 Verdana,sans-serif;padding:4px 6px;text-transform:uppercase;}

/* Newgrounds-style rating letter next to "Game" */
.pg-rating{display:inline-block;min-width:17px;height:17px;margin-left:6px;padding:0 3px;border-radius:2px;color:#fff;font:bold 11px/17px Verdana,Tahoma,sans-serif;text-align:center;vertical-align:1px;cursor:help;}
.pg-rating-E{background:#3a9d23;} .pg-rating-T{background:#2f6fd6;} .pg-rating-M{background:#e07b00;} .pg-rating-A{background:var(--pg-red);}

/* "Under Judgment": a red rubber stamp, like brand-new submissions on Newgrounds */
.pg-judge{position:absolute;right:6px;bottom:8px;transform:rotate(-8deg);padding:3px 6px;border:3px double var(--pg-red);border-radius:3px;
  background:rgba(255,255,255,.82);color:var(--pg-red);font:italic 900 10px/1 "Arial Black",Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;letter-spacing:.06em;white-space:nowrap;pointer-events:none;}
.pg-thumb-big .pg-judge{font-size:14px;padding:5px 9px;right:10px;bottom:12px;}
.pg-stage .pg-judge{bottom:auto;top:14px;}   /* game page: "Not ready yet" runs along the bottom, so the stamp goes top right */
/* ---------- drips (0 to 5) and the Views / Faves line ---------- */
.pg-drips{display:flex;align-items:center;gap:2px;margin:6px 0 0;font-size:12px;color:var(--pg-soft);}
.pg-drip{width:18px;height:18px;fill:transparent;stroke:#7a7f92;stroke-width:1.6;}
.pg-drip.on{fill:var(--pg-yel);stroke:#b89a00;}
.pg-drips span{margin-left:6px;}
.pg-counts{margin:2px 0 0;font-size:12px;color:var(--pg-soft);}
.pg-counts b{color:var(--pg-ink);font-weight:normal;}

/* ---------- pages ---------- */
.pg-feat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;}
.pg-feat-info{display:flex;flex-direction:column;gap:4px;}
.pg-feat h3{margin:0;font-size:22px;}
.pg-blurb{margin:8px 0;}
.pg-feat .pg-btn{align-self:flex-start;margin-top:auto;font-size:17px;background:var(--pg-yel);}
.pg-feat .pg-btn:hover{background:#fff;}
.pg-users{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.pg-users li{display:flex;flex-direction:column;gap:2px;background:var(--pg-panel-2);padding:10px;border:1px solid var(--pg-line);}
.pg-users a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:bold;font-size:16px;}
.pg-users a:hover .pg-uname{color:var(--pg-yel);text-decoration:underline;}
.pg-users img{width:56px;height:56px;object-fit:cover;border:1px solid #000;}
.pg-profile{display:flex;gap:16px;align-items:flex-start;}
.pg-avatar{width:120px;height:120px;object-fit:cover;border:2px solid #000;flex:none;}
.pg-profile h1{margin:0 0 6px;color:var(--pg-yel);font-size:24px;}
.pg-profile p{margin:0 0 8px;}
.pg-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;}
.pg-game h1{margin:4px 0 2px;color:var(--pg-yel);font-size:26px;}
.pg-crumb{margin:0;font-size:13px;}
.pg-stage{position:relative;margin:12px 0;}
.pg-wait{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px;background:rgba(0,0,0,.78);color:#fff;font-weight:bold;text-align:center;font-size:16px;}
.pg-beta{background:#2f6fd6;color:#fff;}
/* official status note under a game, e.g. Open Beta */
.pg-notice{margin:0 0 12px;padding:10px 12px;border:1px solid #2f6fd6;border-left-width:5px;background:rgba(47,111,214,.12);font-size:14px;}
.pg-notice strong{display:block;color:#7fb0ff;font:bold 12px/1.4 Verdana,sans-serif;letter-spacing:.08em;}
.pg-notice p{margin:4px 0 0;}
.pg-meta{margin:0;font-size:13px;color:var(--pg-soft);}
.pg-meta .pg-kind{display:inline;}

/* ---------- footer ---------- */
.pg-foot{border-top:1px solid var(--pg-line);text-align:center;padding:18px 16px 28px;color:var(--pg-soft);font-size:12px;}
.pg-foot p{margin:0;}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .pg-head-in{grid-template-columns:220px minmax(0,1fr) 260px;}
  .pg-logo{width:220px;}
  .pg-nav a{font-size:13px;gap:6px;padding:6px;}
}
/* below desktop the joke login box goes; the black ground holds the wordmark, tagline and search */
@media (max-width:980px){
  .pg-head{background:
    linear-gradient(to top,#111 0,#111 158px,transparent 158px),
    url(/poogrounds/img/crowd.png) center bottom 157px / auto 120px repeat-x,
    repeating-conic-gradient(from 0deg at 14% 55%,rgba(255,244,140,.55) 0deg 7.5deg,transparent 7.5deg 15deg),
    linear-gradient(#ffd21a,#ff9500 85%);}
  .pg-head-in{grid-template-columns:180px minmax(0,1fr);grid-template-rows:minmax(110px,1fr) 60px 34px 64px;grid-template-areas:"logo ." "logo word" "logo tag" "search search";min-height:0;padding-top:40px;}
  .pg-logo{width:180px;margin-bottom:8px;}
  .pg-search{max-width:none;align-self:center;padding:0;}
  .pg-login{display:none;}
  .pg-nav{flex-wrap:wrap;}
  .pg-nav ul{display:grid;grid-template-columns:repeat(4,1fr);}
  .pg-lang{margin:0;width:100%;justify-content:flex-end;}
  .pg-cols{grid-template-columns:1fr 1fr;grid-template-areas:"main main" "left right";}
}
@media (max-width:640px){
  .pg-head-in{grid-template-columns:110px minmax(0,1fr);column-gap:12px;padding-top:36px;grid-template-rows:minmax(60px,1fr) 44px 30px 104px;grid-template-areas:"logo ." "logo word" "tag tag" "search search";}
  .pg-logo{width:110px;margin-bottom:4px;}
  .pg-wordmark{align-self:center;}
  .pg-search{flex-wrap:wrap;}
  .pg-search-box{flex:1 1 100%;}
  .pg-search select,.pg-search button{flex:1;min-height:44px;}
  .pg-head{background:
    linear-gradient(to top,#111 0,#111 178px,transparent 178px),
    url(/poogrounds/img/crowd.png) center bottom 177px / auto 80px repeat-x,
    repeating-conic-gradient(from 0deg at 16% 50%,rgba(255,244,140,.55) 0deg 7.5deg,transparent 7.5deg 15deg),
    linear-gradient(#ffd21a,#ff9500 85%);}
  .pg-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px 12px;}
  .pg-nav ul{display:contents;}
  .pg-nav a{flex-direction:column;gap:2px;min-height:52px;padding:6px 2px;font-size:11px;text-align:center;}
  .pg-nav a .pg-ico{width:20px;height:20px;}
  .pg-lang{width:auto;justify-content:stretch;}
  .pg-lang button{flex:1;min-height:52px;padding:0 2px;}
  .pg-cols{grid-template-columns:1fr;grid-template-areas:"main" "left" "right";padding:12px 12px 20px;}
  .pg-feat{grid-template-columns:1fr;}
  .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .pg-profile{flex-direction:column;}
}

/* Live Poogrounds voting controls */
.pg-vote{display:inline-flex;padding:2px;border:0;background:transparent;cursor:pointer;color:inherit}
.pg-vote:hover .pg-drip,.pg-vote[aria-pressed=true] .pg-drip{fill:var(--pg-yel);stroke:#b89a00}
.pg-vote:focus-visible,.pg-fave:focus-visible{outline:2px solid var(--pg-yel);outline-offset:2px}
.pg-vote:disabled,.pg-fave:disabled{cursor:wait;opacity:.55}
.pg-fave{margin-left:8px;border:1px solid #70778b;background:#202638;color:var(--pg-ink);padding:3px 8px;cursor:pointer;font:inherit}
.pg-fave[aria-pressed=true]{color:var(--pg-yel);border-color:var(--pg-yel)}

/* Preserve the full XDF title and Grey on wide key art. */
.pg-thumb img[src*="/xdf/thumb-"]{object-fit:contain;background:#070c13}
.pg-thumb-big:has(img[src*="/xdf/thumb-"]){aspect-ratio:4/3}

.pg-thumb img[src*='/horse-plinko/menu-thumb.png']{object-fit:contain;background:#1b1009}

/* Main-site navigation shared by all portal pages. */
.pc-topbar{position:sticky;top:0;z-index:40;background:#eae7de;color:#17181c;border-bottom:1px solid #c7c2b2;font-family:Inter,sans-serif}
.pc-topbar-in{max-width:1180px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pc-wordmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.02em;color:#9a7f00;text-decoration:none}
.pc-topbar nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.pc-topbar nav a{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:#4b4a45;padding:8px 12px;text-decoration:none}
.pc-topbar nav a:hover,.pc-topbar nav a[aria-current]{color:#17181c;text-decoration:underline;text-underline-offset:7px;text-decoration-color:#565a37}
@media(prefers-color-scheme:dark){.pc-topbar{background:#17181a;color:#e9e6dd;border-color:#3a3a35}.pc-wordmark{color:#f4d000}.pc-topbar nav a{color:#a8a496}.pc-topbar nav a:hover,.pc-topbar nav a[aria-current]{color:#e9e6dd;text-decoration-color:#b3b884}}
@media(max-width:600px){.pc-topbar-in{padding:12px 16px;gap:8px;flex-wrap:wrap}.pc-topbar nav{justify-content:flex-start;gap:0;width:100%}.pc-topbar nav a{padding:7px 9px;font-size:10px}.pc-topbar nav a:first-child{padding-left:0}}