:root{--board-acid:#54f6a7;--board-cyan:#61e9ff;--board-pink:#ff668f;--board-violet:#b184ff;--board-amber:#ffc85d;--board-panel:#09130f;--board-line:rgba(255,255,255,.1);--board-muted:#96aaa1}
.hatchery-board-main{display:grid;gap:1rem;max-width:1440px;padding-bottom:5rem}
.board-surface{position:relative;overflow:hidden;border:1px solid rgba(84,246,167,.24);border-radius:20px;background:linear-gradient(145deg,rgba(14,31,24,.98),rgba(7,17,13,.98));box-shadow:0 20px 55px rgba(0,0,0,.26),inset 0 0 38px rgba(84,246,167,.025)}
.board-surface::before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--board-acid);content:""}
.board-image-hero{padding:0}.board-image-hero>img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;background:#020605}.board-image-hero-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-top:1px solid var(--board-line);background:linear-gradient(115deg,rgba(13,36,27,.98),rgba(5,13,9,.98))}.board-image-hero-meta strong{display:block;margin-top:.2rem;color:#effff6;font:700 clamp(1rem,2vw,1.35rem)/1.15 var(--font-display)}.board-image-hero-meta p{max-width:760px;margin:.3rem 0 0;color:#9eb2a9;font-size:.78rem;line-height:1.45}.board-hero-actions{display:flex;flex:none;flex-wrap:wrap;gap:.65rem}
.board-view-tabs{display:grid;grid-template-columns:1fr 1fr 54px;gap:.55rem;padding:.55rem;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(8,20,15,.86)}.board-view-tabs button{min-height:58px;border:1px solid transparent;border-radius:11px;background:transparent;color:#82978e;cursor:pointer;text-align:left}.board-view-tabs button:not(.board-refresh){padding:.7rem 1rem}.board-view-tabs span,.board-view-tabs strong{display:block}.board-view-tabs span{font:800 .58rem/1 monospace;letter-spacing:.08em}.board-view-tabs strong{margin-top:.3rem;color:#d9e9e2;font-size:.88rem}.board-view-tabs button.active{border-color:rgba(84,246,167,.32);background:linear-gradient(135deg,rgba(84,246,167,.14),rgba(97,233,255,.05))}.board-view-tabs button.active span{color:var(--board-acid)}.board-refresh{display:grid;place-items:center;color:var(--board-acid)!important;font-size:1.25rem;text-align:center!important}.board-refresh.loading{animation:board-spin .8s linear infinite}
.board-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.board-summary article{position:relative;min-width:0;overflow:hidden;padding:1rem 1rem 1rem 1.2rem;border:1px solid rgba(84,246,167,.24);border-radius:15px;background:rgba(8,20,15,.9)}.board-summary article::before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent);content:""}.board-summary article>span{position:absolute;right:.8rem;top:.65rem;color:color-mix(in srgb,var(--accent) 26%,transparent);font:1000 2.15rem/1 monospace}.board-summary small,.board-summary strong,.board-summary p{display:block}.board-summary small{color:var(--accent);font:900 .58rem/1 monospace;letter-spacing:.08em}.board-summary strong{position:relative;max-width:85%;margin-top:.45rem;overflow:hidden;color:#f3fff8;font-size:clamp(1.2rem,2.3vw,1.85rem);text-overflow:ellipsis;white-space:nowrap}.board-summary p{position:relative;margin:.32rem 0 0;color:#83978e;font-size:.7rem;line-height:1.4}.acid{--accent:var(--board-acid)}.cyan{--accent:var(--board-cyan)}.pink{--accent:var(--board-pink)}.violet{--accent:var(--board-violet)}
.epoch-picker-card{padding:1.1rem 1.25rem 1.25rem}.epoch-picker-card::before{background:var(--board-cyan)}.epoch-picker-card>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}.epoch-picker-card h2{margin:.25rem 0 0;color:#f4fff9;font-size:1.18rem}.epoch-picker-card>header>span{color:var(--board-cyan);font:900 .6rem/1 monospace}.epoch-picker{display:flex;gap:.55rem;max-width:100%;padding-bottom:.2rem;overflow-x:auto;scrollbar-color:rgba(97,233,255,.45) transparent}.epoch-picker button{flex:0 0 150px;padding:.7rem .8rem;border:1px solid var(--board-line);border-radius:11px;background:rgba(255,255,255,.035);color:#8fa39a;cursor:pointer;text-align:left}.epoch-picker button span,.epoch-picker button strong,.epoch-picker button small{display:block}.epoch-picker button span{color:#759087;font:800 .48rem/1 monospace}.epoch-picker button strong{margin-top:.35rem;color:#e7f6ef;font-size:.78rem}.epoch-picker button small{margin-top:.3rem;font:700 .52rem/1.25 monospace}.epoch-picker button.active{border-color:rgba(97,233,255,.46);background:linear-gradient(135deg,rgba(97,233,255,.13),rgba(177,132,255,.06));box-shadow:inset 0 -2px 0 var(--board-cyan)}.epoch-picker button.active span{color:var(--board-cyan)}
.leaderboard-card::before{background:var(--board-pink)}.leaderboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.45rem 1.6rem;border-bottom:1px solid var(--board-line)}.leaderboard-card-head h2{margin:.32rem 0 .4rem;color:#f4fff9;font-size:clamp(1.35rem,2.4vw,2rem)}.leaderboard-card-head p{max-width:780px;margin:0;color:#91a69c;font-size:.82rem;line-height:1.55}.board-state{flex:none;padding:.65rem .8rem;border:1px solid rgba(255,102,143,.22);border-radius:11px;background:rgba(255,102,143,.06);text-align:right}.board-state span,.board-state strong{display:block}.board-state span{color:var(--board-pink);font:900 .52rem/1 monospace}.board-state strong{margin-top:.3rem;color:#f7fff9;font-size:.78rem}
.leaderboard-table{overflow:hidden}.leaderboard-head,.leaderboard-row{display:grid;grid-template-columns:minmax(280px,1.35fr) minmax(88px,.42fr) minmax(80px,.38fr) minmax(115px,.52fr) minmax(170px,.8fr) minmax(145px,.58fr);align-items:center;gap:.8rem}.leaderboard-head.alltime,.leaderboard-row.alltime{grid-template-columns:minmax(310px,1.45fr) minmax(100px,.48fr) minmax(90px,.42fr) minmax(120px,.55fr) minmax(220px,1fr)}.leaderboard-head{min-height:42px;padding:0 1.35rem;background:rgba(0,0,0,.27);color:#71877d;font:900 .53rem/1 monospace;letter-spacing:.08em}.leaderboard-row{position:relative;min-height:100px;padding:.55rem 1.35rem;border-top:1px solid var(--board-line);background:rgba(255,255,255,.012)}.leaderboard-row::before{position:absolute;inset:0 auto 0 0;width:4px;background:#33483e;content:""}.leaderboard-row.rank-1{background:linear-gradient(90deg,rgba(255,200,93,.12),transparent 48%)}.leaderboard-row.rank-1::before{background:var(--board-amber)}.leaderboard-row.rank-2{background:linear-gradient(90deg,rgba(97,233,255,.09),transparent 44%)}.leaderboard-row.rank-2::before{background:var(--board-cyan)}.leaderboard-row.rank-3{background:linear-gradient(90deg,rgba(255,102,143,.08),transparent 40%)}.leaderboard-row.rank-3::before{background:var(--board-pink)}
.leader-pet{display:grid;grid-template-columns:38px 78px minmax(0,1fr);align-items:center;gap:.7rem;min-width:0}.rank-badge{display:grid;width:30px;height:30px;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:#10241c;color:#9cb0a7;font:1000 .75rem/1 monospace}.rank-1 .rank-badge{border-color:rgba(255,200,93,.38);background:rgba(255,200,93,.14);color:var(--board-amber)}.rank-2 .rank-badge{color:var(--board-cyan)}.rank-3 .rank-badge{color:var(--board-pink)}.leader-pet img{width:76px;height:88px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.36))}.leader-pet strong,.leader-pet small,.leader-pet em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-pet strong{color:#f2fff8;font-size:.95rem}.leader-pet small{margin-top:.25rem;color:#8ba097;font:700 .56rem/1.3 monospace}.leader-pet em{margin-top:.22rem;color:var(--board-acid);font:800 .52rem/1 monospace;font-style:normal}.leader-value small,.leader-value strong,.leader-value em{display:block}.leader-value small{color:#73887e;font:800 .51rem/1 monospace}.leader-value strong{margin-top:.32rem;color:#effcf5;font-size:1.12rem}.leader-value em{margin-top:.26rem;color:#7f958b;font:800 .48rem/1 monospace;font-style:normal}.leader-value.share strong,.leader-value.gain strong{color:var(--board-acid)}.xp-sources{display:flex;flex-wrap:wrap;gap:.3rem}.xp-sources span{padding:.35rem .45rem;border:1px solid rgba(177,132,255,.15);border-radius:6px;background:rgba(177,132,255,.07);color:#c9afff;font:800 .48rem/1 monospace}.muted-value{color:#657b71;font:800 .5rem/1 monospace}.leaderboard-note{padding:.8rem 1.35rem;border-top:1px solid var(--board-line);background:rgba(0,0,0,.17);color:#7f958b;font-size:.68rem;line-height:1.5}.board-empty{margin:0;padding:2.5rem;color:#8ea299;text-align:center}.board-empty.visual{display:flex;align-items:center;justify-content:center;gap:1rem;text-align:left}.board-empty.visual img{width:100px;height:110px;object-fit:contain}.board-empty.visual strong{display:block;color:#eefbf4;font-size:1rem}.board-empty.visual p{margin:.3rem 0 0;color:#83978e;font-size:.75rem}
.leader-claim-cell{display:flex;justify-content:flex-end}.board-claim-action{width:100%;min-height:39px;padding:.45rem .6rem;border:1px solid rgba(97,233,255,.2);border-radius:8px;background:rgba(97,233,255,.035);color:#758b81;font:900 .5rem/1.25 monospace;cursor:not-allowed}.board-claim-action.ready{border-color:var(--board-acid);background:var(--board-acid);color:#061009;cursor:pointer}.board-claim-action.review{border-color:rgba(97,233,255,.45);background:linear-gradient(115deg,rgba(97,233,255,.1),rgba(177,132,255,.08));color:var(--board-cyan);cursor:pointer}.board-claim-action.claimed{border-color:rgba(84,246,167,.25);color:var(--board-acid)}
.board-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.board-explainer article{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:.8rem;min-height:104px;padding:1rem 1.1rem}.board-explainer article::before{background:var(--accent)}.board-explainer article>span{display:grid;width:46px;height:46px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:13px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);font:1000 .68rem/1 monospace}.board-explainer strong{display:block;color:#effcf5;font-size:.82rem}.board-explainer p{margin:.3rem 0 0;color:#81968c;font-size:.68rem;line-height:1.45}
@keyframes board-spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.board-image-hero-meta{align-items:flex-start}.board-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboard-head{display:none}.leaderboard-row,.leaderboard-row.alltime{grid-template-columns:minmax(280px,1.35fr) repeat(2,minmax(100px,.5fr));}.leaderboard-row>:nth-child(4),.leaderboard-row>:nth-child(5){grid-column:auto}.xp-sources{grid-column:1/-1;padding:0 0 .35rem 126px}.leader-claim-cell{grid-column:3}.board-explainer{grid-template-columns:1fr}}
@media(max-width:700px){.hatchery-board-main{gap:.75rem;padding-inline:.7rem}.board-image-hero-meta{display:grid;padding:.9rem}.board-image-hero-meta p{font-size:.7rem}.board-hero-actions{display:grid}.board-view-tabs{grid-template-columns:1fr 1fr 46px}.board-view-tabs button:not(.board-refresh){padding:.6rem}.board-view-tabs strong{font-size:.72rem}.board-summary{gap:.5rem}.board-summary article{padding:.85rem .8rem .85rem 1rem}.board-summary article>span{font-size:1.5rem}.board-summary strong{font-size:1.05rem}.board-summary p{font-size:.62rem}.leaderboard-card-head{display:grid;padding:1.1rem}.board-state{text-align:left}.leaderboard-row,.leaderboard-row.alltime{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;min-height:0;padding:.85rem 1rem}.leader-pet{grid-column:1/-1;grid-template-columns:34px 72px minmax(0,1fr)}.leader-pet img{width:70px;height:80px}.leader-value{padding:.55rem;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025)}.xp-sources,.leader-claim-cell{grid-column:1/-1;padding:0}.leaderboard-note{padding:.8rem 1rem}.board-empty.visual{display:grid;text-align:center}.board-empty.visual img{margin:auto}.epoch-picker-card{padding:.95rem}.epoch-picker button{flex-basis:134px}.board-explainer article{min-height:0}}
@media(prefers-reduced-motion:reduce){.board-refresh.loading{animation:none}}