.pixelbattle-page{--pb-ink:#1e1e1a;--pb-muted:#7e786e;--pb-line:#ddd8cd;--pb-paper:#fffdf8;--pb-soft:#f5f2ea;--pb-green:#718b34;--pb-hot:#b97849;width:min(1180px,calc(100% - 44px));margin:0 auto;padding:46px 0 90px;color:var(--pb-ink)}.pixelbattle-page *{box-sizing:border-box}.pixelbattle-page button{font:inherit}.pixelbattle-page h1,.pixelbattle-page h2{font-family:var(--serif,Georgia,serif);font-weight:400;letter-spacing:-.04em}.pb-eyebrow{margin:0;font-size:8px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#728041}
.pb-head,.pb-board-card,.pb-stats,.pb-rules,.pb-leaders,.pb-recent,.pb-gate,.pb-loading{border:1px solid var(--pb-line);border-radius:29px;background:var(--pb-paper);box-shadow:0 18px 50px rgba(55,49,37,.045)}.pb-head{overflow:hidden;background:radial-gradient(circle at 82% 28%,rgba(184,205,115,.12),transparent 25%),linear-gradient(180deg,#fffefa,#faf7ef)}.pb-headline{display:flex;align-items:center;justify-content:space-between;padding:18px 34px;border-bottom:1px solid var(--pb-line)}.pb-headline>div{display:flex;align-items:center;gap:16px}.pb-headline a,.pb-headline span,.pb-headline>b{font-size:7px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.pb-headline a{color:#747e50;text-decoration:none}.pb-headline span{color:#9b9489}.pb-headline>b{color:#a37a5b}.pb-title-grid{display:grid;grid-template-columns:1fr 330px;gap:45px;align-items:end;padding:44px 42px 46px}.pb-title-grid h1{margin:10px 0 20px;font-size:53px;line-height:.94}.pb-title-grid h1 em{color:#6c7d3c;font-weight:400}.pb-title-grid>div:first-child>p:not(.pb-eyebrow){max-width:650px;margin:0;color:var(--pb-muted);font-size:10px;line-height:1.75}.pb-zone-card{padding:22px;border:1px solid #e1d9c8;border-radius:21px;background:#fffaf1}.pb-zone-card small{display:block;font-size:6px;font-weight:900;letter-spacing:.12em;color:#ad764f}.pb-zone-card b{display:block;margin:8px 0 4px;font-family:var(--serif,Georgia,serif);font-size:20px;font-weight:400}.pb-zone-card span{display:block;color:#91857b;font-size:8px}.pb-zone-card em{display:inline-block;margin-top:15px;padding:5px 8px;border-radius:999px;background:#f1dfcf;color:#9b6644;font-size:7px;font-style:normal;font-weight:850}
.pb-game-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;margin-top:22px;align-items:start}.pb-board-card{overflow:hidden}.pb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;border-bottom:1px solid var(--pb-line)}.pb-energy-wrap{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:7px 12px}.pb-energy-wrap>span{font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.11em;color:#7c765e}.pb-energy{display:flex;gap:4px}.pb-energy i{width:11px;height:11px;border:1px solid #cdc8bc;border-radius:3px;background:#f4f0e7}.pb-energy i.is-full{border-color:#81934f;background:#8ea35d}.pb-energy-wrap>b{font-size:8px}.pb-energy-wrap>small{grid-column:2/-1;font-size:6px;color:#9c958b}.pb-board-actions{display:flex;gap:7px}.pb-board-actions button{padding:8px 11px;border:1px solid #d8d3c8;border-radius:999px;background:#fbf9f3;color:#676157;font-size:7px;font-weight:800;cursor:pointer}.pb-board-actions button:hover:not(:disabled){border-color:#9ca973}.pb-board-actions button.is-on{border-color:#d2ad46;background:#fff8dc;color:#806a2c}.pb-board-actions button:disabled{opacity:.42;cursor:not-allowed}
.pb-canvas-wrap{position:relative;display:grid;place-items:center;min-height:680px;padding:22px;overflow:hidden;background:#282a22;touch-action:none}.pb-canvas-wrap canvas{display:block;max-width:100%;border:1px solid rgba(255,255,255,.15);background:#fffdf8;image-rendering:pixelated;cursor:crosshair;box-shadow:0 16px 46px rgba(0,0,0,.22);touch-action:none}.pb-coords{position:absolute;left:34px;bottom:34px;padding:6px 8px;border-radius:8px;background:rgba(26,27,22,.82);color:#f4f1e6;font:700 7px/1 monospace;pointer-events:none}.pb-place-flash{position:absolute;inset:0;pointer-events:none}.pb-place-flash.is-on{animation:pbFlash .28s ease}.pb-palette{display:grid;grid-template-columns:repeat(16,1fr);gap:7px;padding:16px 20px;border-top:1px solid var(--pb-line);background:#fbf8f1}.pb-palette button{aspect-ratio:1;border:2px solid transparent;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(35,34,28,.15);cursor:pointer}.pb-palette button.is-on{border-color:#26271f;box-shadow:0 0 0 2px #fbf8f1,0 0 0 3px #8f8b7e}.pb-status{min-height:38px;padding:11px 20px;border-top:1px solid var(--pb-line);background:#fffdf8;color:#8b8479;font-size:8px}.pb-status.is-good{color:#627534;background:#f9fbed}.pb-status.is-warn{color:#9b713b;background:#fff8eb}.pb-status.is-error{color:#a34c46;background:#fff4f1}
.pb-side{display:grid;gap:22px}.pb-stats,.pb-rules{padding:24px}.pb-stats>div{display:flex;align-items:end;justify-content:space-between;padding:13px 0;border-bottom:1px solid #ebe6dc}.pb-stats>div span{font-size:7px;color:#918b80}.pb-stats>div b{font-family:var(--serif,Georgia,serif);font-size:22px;font-weight:400}.pb-stats footer{padding-top:18px}.pb-stats footer span,.pb-stats footer small{display:block;font-size:7px;color:#918b80}.pb-stats footer b{display:block;margin:4px 0;font-size:16px}.pb-stats footer small{line-height:1.55}.pb-rules article{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid #ebe6dc}.pb-rules article:last-child{border-bottom:0}.pb-rules article>i{width:25px;height:25px;display:grid;place-items:center;border:1px solid #d6d2c7;border-radius:50%;font-size:6px;font-style:normal}.pb-rules article b{display:block;font-size:8px}.pb-rules article span{display:block;margin-top:4px;color:#918b80;font-size:7px;line-height:1.55}
.pb-bottom{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.pb-leaders,.pb-recent{overflow:hidden}.pb-leaders header,.pb-recent header{padding:25px 28px 18px;border-bottom:1px solid var(--pb-line)}.pb-leaders h2,.pb-recent h2{margin:7px 0 0;font-size:28px}.pb-rank{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:11px 17px;border-bottom:1px solid #eee9df}.pb-rank:last-child{border-bottom:0}.pb-rank.is-me{background:#fafbf3}.pb-rank>b{font-size:7px;color:#9d968b}.pb-person{display:flex;align-items:center;gap:9px;min-width:0}.pb-person img,.pb-person>span{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#e6e1d7}.pb-person strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:8px;white-space:nowrap}.pb-person small{display:block;margin-top:2px;color:#a19a90;font-size:6px}.pb-rank>em{font-family:var(--serif,Georgia,serif);font-size:17px;font-style:normal}.pb-event{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:center;padding:12px 18px;border-bottom:1px solid #eee9df}.pb-event:last-child{border-bottom:0}.pb-event>i{width:11px;height:11px;border:1px solid rgba(0,0,0,.12);border-radius:3px}.pb-event b{display:block;font-size:8px}.pb-event span{display:block;margin-top:3px;color:#9b948a;font-size:6px}.pb-empty{margin:0;padding:25px;color:#958e84;font-size:8px}
.pb-gate,.pb-loading{min-height:430px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:55px}.pb-gate>a{margin-bottom:25px;color:#737c4e;font-size:7px;text-decoration:none}.pb-gate h1{margin:12px 0 18px;font-size:50px}.pb-gate h1 em{color:#6e7e42;font-weight:400}.pb-gate>p:not(.pb-eyebrow){max-width:560px;margin:0 0 22px;color:var(--pb-muted);font-size:10px;line-height:1.7}.pb-gate button{padding:10px 15px;border:0;border-radius:999px;background:#748740;color:#fff;font-size:8px;cursor:pointer}.pb-loading{flex-direction:row;align-items:center;gap:15px}.pb-loading>i{width:36px;height:36px;border:1px solid #d9d5ca;border-top-color:#718b34;border-radius:50%;animation:pbSpin .8s linear infinite}.pb-loading b{display:block;margin-top:6px;font-family:var(--serif,Georgia,serif);font-size:23px;font-weight:400}
@keyframes pbSpin{to{transform:rotate(360deg)}}@keyframes pbFlash{50%{box-shadow:inset 0 0 0 4px rgba(222,196,106,.55)}}
@media(max-width:1000px){.pb-title-grid{grid-template-columns:1fr}.pb-game-grid{grid-template-columns:1fr}.pb-side{grid-template-columns:1fr 1fr}.pb-canvas-wrap{min-height:620px}}
@media(max-width:720px){.pixelbattle-page{width:min(100% - 22px,1180px);padding:24px 0 70px}.pb-head,.pb-board-card,.pb-stats,.pb-rules,.pb-leaders,.pb-recent,.pb-gate{border-radius:22px}.pb-title-grid{padding:32px 22px}.pb-title-grid h1{font-size:44px}.pb-toolbar{align-items:flex-start;flex-direction:column}.pb-board-actions{width:100%}.pb-board-actions button{flex:1}.pb-canvas-wrap{min-height:360px;padding:10px}.pb-palette{grid-template-columns:repeat(8,1fr)}.pb-side,.pb-bottom{grid-template-columns:1fr}.pb-coords{left:18px;bottom:18px}}
@media(prefers-reduced-motion:reduce){.pb-loading>i,.pb-place-flash.is-on{animation:none}}

/* Pixel Battle: keep leaderboard and recent activity compact; scroll only the list bodies. */
.pb-leaders,.pb-recent{
  height:500px;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.pb-leaders>header,.pb-recent>header{
  flex:0 0 auto;
}
#pb-leaders,#pb-recent{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#c8c2b6 transparent;
}
#pb-leaders::-webkit-scrollbar,#pb-recent::-webkit-scrollbar{width:8px}
#pb-leaders::-webkit-scrollbar-track,#pb-recent::-webkit-scrollbar-track{background:transparent}
#pb-leaders::-webkit-scrollbar-thumb,#pb-recent::-webkit-scrollbar-thumb{
  background:#c8c2b6;
  border:2px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}
#pb-leaders::-webkit-scrollbar-thumb:hover,#pb-recent::-webkit-scrollbar-thumb:hover{background:#aaa396;background-clip:padding-box}
@media(max-width:720px){
  .pb-leaders,.pb-recent{height:430px}
}

/* Pixel Battle typography readability pass. */
.pb-eyebrow{font-size:10px}
.pb-headline a,.pb-headline span,.pb-headline>b{font-size:9px}
.pb-title-grid>div:first-child>p:not(.pb-eyebrow){font-size:13px;line-height:1.7}
.pb-zone-card small{font-size:9px}
.pb-zone-card b{font-size:22px}
.pb-zone-card span{font-size:11px;line-height:1.45}
.pb-zone-card em{font-size:9px}
.pb-energy-wrap>span{font-size:9px}
.pb-energy-wrap>b{font-size:10px}
.pb-energy-wrap>small{font-size:8px;line-height:1.4}
.pb-board-actions button{font-size:9px}
.pb-coords{font-size:9px}
.pb-status{font-size:11px;line-height:1.45}
.pb-stats>div span{font-size:10px}
.pb-stats>div b{font-size:24px}
.pb-stats footer span,.pb-stats footer small{font-size:9px}
.pb-stats footer b{font-size:18px}
.pb-stats footer small{line-height:1.6}
.pb-rules article>i{font-size:8px}
.pb-rules article b{font-size:11px}
.pb-rules article span{font-size:10px;line-height:1.55}
.pb-rank>b{font-size:9px}
.pb-person strong{font-size:11px}
.pb-person small{font-size:9px;line-height:1.35}
.pb-rank>em{font-size:19px}
.pb-event b{font-size:11px}
.pb-event span{font-size:9px;line-height:1.4}
.pb-empty{font-size:11px}
.pb-gate>a{font-size:9px}
.pb-gate>p:not(.pb-eyebrow){font-size:13px;line-height:1.7}
.pb-gate button{font-size:10px}
.pb-loading .pb-eyebrow{font-size:10px}
.pb-loading b{font-size:25px}
@media(max-width:720px){
  .pb-title-grid>div:first-child>p:not(.pb-eyebrow){font-size:12px}
  .pb-status{font-size:10px}
  .pb-rules article b,.pb-person strong,.pb-event b{font-size:10px}
  .pb-rules article span,.pb-person small,.pb-event span{font-size:9px}
}

/* Pixel Battle: two-week seasons + read-only archive. */
.pb-headline{gap:18px}
.pb-headline>div{flex:0 0 auto}
.pb-tabs{display:flex;align-items:center;gap:4px;margin-left:auto}
.pb-tabs a{padding:7px 10px;border-radius:999px;color:#8c867b!important;text-decoration:none;font-size:9px!important;letter-spacing:.06em!important;text-transform:none!important;font-weight:800!important}
.pb-tabs a:hover{background:#f2efe7;color:#5d6443!important}
.pb-tabs a.is-on{background:#edefe4;color:#61703b!important}
.pb-season-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid #e2ded4}
.pb-season-note span{font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#8d867a}
.pb-season-note b{font-size:11px;font-weight:750;color:#45443d}
.pb-season-note em{margin-left:auto;padding:6px 9px;border-radius:999px;background:#eef1e5;color:#62713d;font-size:9px;font-style:normal;font-weight:800}
.pb-archive-hero{padding:44px 42px 46px}
.pb-archive-hero h1{margin:10px 0 20px;font-size:53px;line-height:.94}
.pb-archive-hero h1 em{color:#6c7d3c;font-weight:400}
.pb-archive-hero>p:not(.pb-eyebrow){max-width:650px;margin:0;color:var(--pb-muted);font-size:13px;line-height:1.7}
.pb-archive-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
.pb-archive-list,.pb-archive-view,.pb-archive-placeholder{border:1px solid var(--pb-line);border-radius:29px;background:var(--pb-paper);box-shadow:0 18px 50px rgba(55,49,37,.045)}
.pb-archive-list{overflow:hidden;min-height:420px}
.pb-archive-list>header{padding:24px 24px 18px;border-bottom:1px solid var(--pb-line)}
.pb-archive-list>header>b{display:block;margin-top:7px;font-family:var(--serif,Georgia,serif);font-size:22px;font-weight:400}
#pb-archive-list{max-height:610px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c8c2b6 transparent}
#pb-archive-list::-webkit-scrollbar{width:8px}
#pb-archive-list::-webkit-scrollbar-thumb{background:#c8c2b6;border:2px solid transparent;border-radius:999px;background-clip:padding-box}
.pb-archive-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border:0;border-bottom:1px solid #ece7dc;background:transparent;text-align:left;color:var(--pb-ink);cursor:pointer}
.pb-archive-item:last-child{border-bottom:0}
.pb-archive-item:hover{background:#faf8f2}
.pb-archive-item.is-on{background:#f4f6eb}
.pb-archive-item span{min-width:0}
.pb-archive-item b{display:block;font-size:12px}
.pb-archive-item small{display:block;margin-top:4px;color:#918a7f;font-size:9px;line-height:1.35}
.pb-archive-item em{flex:0 0 auto;color:#888176;font-size:9px;font-style:normal;text-align:right}
.pb-archive-item.is-on em{color:#64733f}
.pb-archive-view{overflow:hidden}
.pb-archive-view>header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:24px 28px 20px;border-bottom:1px solid var(--pb-line)}
.pb-archive-view h2{margin:7px 0 0;font-size:28px}
.pb-archive-view>header>span{color:#8e877c;font-size:10px}
.pb-archive-canvas-wrap{display:grid;place-items:center;padding:26px;background:#282a22}
.pb-archive-canvas-wrap canvas{display:block;width:min(100%,720px);height:auto;aspect-ratio:1;border:1px solid rgba(255,255,255,.15);background:#fffdf8;image-rendering:pixelated;box-shadow:0 16px 46px rgba(0,0,0,.22)}
.pb-archive-placeholder{min-height:520px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:50px}
.pb-archive-placeholder h2{margin:10px 0 14px;font-size:36px}
.pb-archive-placeholder>p:not(.pb-eyebrow){max-width:560px;margin:0;color:#888176;font-size:12px;line-height:1.65}
.pb-archive-placeholder.is-quiet{background:linear-gradient(145deg,#fffdf8,#faf7ef)}
@media(max-width:900px){.pb-archive-grid{grid-template-columns:1fr}.pb-archive-list{min-height:0}#pb-archive-list{max-height:320px}}
@media(max-width:720px){.pb-headline{align-items:flex-start;flex-wrap:wrap;padding:16px 20px}.pb-tabs{order:3;width:100%;margin-left:0}.pb-tabs a{flex:1;text-align:center}.pb-season-note{align-items:flex-start;flex-direction:column}.pb-season-note em{margin-left:0}.pb-archive-hero{padding:32px 22px}.pb-archive-hero h1{font-size:44px}.pb-archive-grid{gap:14px}.pb-archive-list,.pb-archive-view,.pb-archive-placeholder{border-radius:22px}.pb-archive-view>header{align-items:flex-start;flex-direction:column}.pb-archive-placeholder{min-height:400px;padding:32px 24px}.pb-archive-placeholder h2{font-size:31px}.pb-archive-canvas-wrap{padding:10px}}


/* Leaderboard avatar frames must keep their transparent center. The generic
   .pb-person img rule gives every image a beige background, which otherwise
   paints over animated/custom avatars underneath the decorative frame. */
.pb-rank-avatar > .pb-flair-frame{
  background:transparent!important;
}