@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#f8f6f1;background:#111024;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% 45%,#23203d 0,#151329 41%,#111024 75%);min-height:100vh}.page-shell{max-width:1440px;margin:auto;min-height:100vh;padding:0 48px;display:flex;flex-direction:column}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #36334b}.brand{color:#fff;text-decoration:none;font:21px 'Archivo Black',sans-serif;letter-spacing:-1.4px}.brand>span:nth-child(2){color:#a5ef77}.brand-mark{display:inline-flex;width:31px;height:31px;align-items:center;justify-content:center;background:#a5ef77;color:#111024;border-radius:8px;font-size:24px;vertical-align:-3px;margin-right:8px}.brand-dot{color:#ff89bd}.topbar-right,.version,.eyebrow,.panel-label,.stat-title,.stat-caption,.board-top,.board-bottom,.preview-card>span,.controls-heading,.controls-card>div:not(:first-child)>span:last-child,.overlay-kicker,.overlay-small,footer,.toast{font-family:'DM Mono',monospace}.topbar-right{font-size:10px;letter-spacing:1.2px;color:#87859d;display:flex;align-items:center;gap:10px}.live-dot{width:7px;height:7px;background:#a5ef77;border-radius:50%;box-shadow:0 0 10px #a5ef77}.version{border:1px solid #413d55;border-radius:4px;padding:6px 8px;margin-left:18px;color:#bbb8ca}.main-content{flex:1}.intro{text-align:center;padding:31px 0 26px}.eyebrow{font-size:10px;color:#a5ef77;letter-spacing:2.4px;display:flex;align-items:center;justify-content:center;gap:10px}.eyebrow-line{width:25px;height:1px;background:#a5ef77}.intro h1{font:clamp(42px,5vw,69px)/.99 'Archivo Black',sans-serif;letter-spacing:-3.5px;margin:13px 0 13px}.intro h1 em{color:#a5ef77;font-style:normal}.intro p{font-size:14px;color:#aaa7ba;margin:0}.game-layout{display:grid;grid-template-columns:minmax(190px,236px) minmax(300px,366px) minmax(190px,236px);gap:24px;justify-content:center;align-items:start}.left-panel,.right-panel{padding-top:27px}.panel-label{font-size:11px;letter-spacing:1.6px;color:#c6c4d2;display:flex;justify-content:space-between;margin:0 2px 12px}.panel-label span{color:#79758e;font-size:15px}.stat-card,.preview-card,.controls-card{border:1px solid #3b3851;background:#201e37;border-radius:10px}.stat-card{padding:18px;display:flex;flex-direction:column}.stat-title{color:#aaa6c1;font-size:10px;letter-spacing:1.4px}.stat-card strong{font-family:'Archivo Black',sans-serif;font-size:35px;letter-spacing:-2px;line-height:1.2;margin:10px 0 4px;color:#fff}.score-card strong{color:#a5ef77}.stat-caption{font-size:10px;color:#77738d;display:flex;justify-content:space-between}.stat-caption span{color:#a5ef77}.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.mini-stats .stat-card{padding:15px}.mini-stats .stat-card strong{font-size:29px;margin-bottom:0}.best-card strong{font-size:27px}.side-note{display:flex;align-items:flex-start;gap:12px;border:1px dashed #49465e;border-radius:9px;padding:15px;margin-top:17px;font-size:11px;line-height:1.55;color:#9e9ab2}.side-note>span{font-size:23px;color:#f8c66d;line-height:1}.board-column{max-width:366px;width:100%;margin:auto}.board-top,.board-bottom{height:28px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.2px;color:#a6a1ba}.board-top #status-text{color:#a5ef77}.tiny-diamond{color:#a5ef77;font-size:9px}.board-frame{position:relative;border:7px solid #35324c;border-radius:12px;overflow:hidden;box-shadow:0 25px 70px #07061190,0 0 0 1px #5b5671;background:#17152c;aspect-ratio:1/2}.board-frame canvas{width:100%;height:100%;display:block}.board-bottom{color:#76728d}.preview-card{height:132px;display:flex;align-items:center;justify-content:center;flex-direction:column}.preview-card canvas{width:144px;height:108px}.preview-card>span{font-size:9px;letter-spacing:1.1px;color:#77738e;margin-top:-5px}.hold-label{margin-top:22px}.controls-card{margin-top:20px;padding:16px}.controls-heading{color:#f5f3fb;font-size:10px;letter-spacing:1.4px;display:flex;justify-content:space-between;margin-bottom:11px}.controls-heading span{font-size:15px;color:#a5ef77}.controls-card>div:not(:first-child){display:flex;justify-content:space-between;align-items:center;padding:5px 0}.controls-card>div:not(:first-child)>span:last-child{font-size:9px;color:#8e8aa4;letter-spacing:.5px}kbd{font-family:'DM Mono',monospace;background:#302d47;border:1px solid #55516c;border-bottom-width:2px;border-radius:4px;color:#e5e1ef;padding:3px 5px;font-size:10px;line-height:1;margin-right:3px}.overlay{position:absolute;inset:0;background:#121024d9;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.overlay-card{max-width:260px}.overlay-face{font-size:49px;filter:drop-shadow(0 8px 10px #0005);margin-bottom:13px}.overlay-kicker{color:#a5ef77;font-size:9px;letter-spacing:1.5px}.overlay h2{font:35px/1.04 'Archivo Black',sans-serif;letter-spacing:-1.5px;margin:12px 0}.overlay p{color:#b8b4c7;font-size:12px;line-height:1.5;margin:0 0 22px}.primary-button{width:100%;border:0;background:#a5ef77;color:#17152a;border-radius:7px;padding:14px 17px;text-align:left;font:13px 'Archivo Black',sans-serif;cursor:pointer;display:flex;justify-content:space-between;transition:transform .15s,background .15s}.primary-button:hover{transform:translateY(-2px);background:#bbfa91}.primary-button span{font-size:19px;line-height:12px}.overlay-small{display:block;font-size:9px;color:#77738d;letter-spacing:1.2px;margin-top:15px}.toast{pointer-events:none;position:absolute;left:50%;top:39%;transform:translate(-50%,-10px) scale(.9);opacity:0;background:#a5ef77;color:#161329;padding:9px 13px;border-radius:5px;font-size:12px;font-weight:bold;white-space:nowrap;transition:all .25s}.toast.visible{opacity:1;transform:translate(-50%,0) scale(1)}footer{height:54px;margin-top:27px;border-top:1px solid #36334b;display:flex;justify-content:space-between;align-items:center;color:#67637e;letter-spacing:1.2px;font-size:9px}.footer-star{color:#a5ef77;font-size:14px}.mobile-controls{display:none}button{touch-action:manipulation}@media(max-width:950px){.page-shell{padding:0 24px}.game-layout{gap:12px;grid-template-columns:minmax(150px,205px) minmax(270px,340px) minmax(150px,205px)}.stat-card{padding:14px}.controls-card{padding:12px}.side-note{display:none}}@media(max-width:700px){.page-shell{padding:0 14px}.topbar{height:60px}.topbar-right{font-size:0}.version{font-size:9px;margin-left:3px}.intro{padding:22px 0}.intro h1{font-size:clamp(39px,10vw,60px);letter-spacing:-2px}.intro p{font-size:12px;max-width:300px;margin:auto}.game-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:480px;margin:auto}.board-column{grid-column:1/-1;grid-row:1;max-width:340px}.left-panel,.right-panel{padding-top:4px}.panel-label{font-size:9px}.left-panel{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}.left-panel .panel-label{grid-column:1/-1;margin-bottom:2px}.score-card,.best-card{grid-column:1/-1}.mini-stats{display:contents}.stat-card{padding:10px}.stat-card strong{font-size:24px;margin:5px 0}.mini-stats .stat-card strong{font-size:21px}.best-card strong{font-size:21px}.preview-card{height:91px}.preview-card canvas{width:105px;height:75px}.hold-label{margin-top:10px}.controls-card{display:none}.mobile-controls{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:480px;margin:16px auto 0}.mobile-controls button{border:1px solid #5b5671;background:#302d47;color:#fff;border-radius:7px;height:45px;font:700 14px 'DM Sans',sans-serif}.mobile-controls button:active{background:#a5ef77;color:#111024}footer{font-size:8px}.right-panel .panel-label{margin-bottom:5px}.preview-card>span{font-size:8px}}@media(max-width:380px){.mobile-controls{gap:3px}.mobile-controls button{font-size:11px}.brand{font-size:18px}}
.cast-card{border:1px solid #3b3851;background:#201e37;border-radius:10px;padding:10px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;color:#77738e;font:10px 'DM Mono',monospace}.cast-card span{white-space:nowrap}.cast-card b{color:#e5e1ef;font-weight:500}
@media(max-width:700px){.mobile-controls{grid-template-columns:repeat(6,1fr)}.cast-card{grid-template-columns:1fr 1fr;padding:8px;gap:5px;font-size:8px}}
.overlay-face{width:74px;height:74px;margin:0 auto 13px;background-image:url('./meme-sprites.png');background-size:400% 200%;background-position:0 0;background-repeat:no-repeat;filter:drop-shadow(0 8px 10px #0005)}
.page-shell{position:relative;z-index:1}
body{background:#111024 url('./peptris-background.png') center top / cover fixed no-repeat}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#10102435 0%,#1010247a 31%,#101024a8 50%,#1010247a 69%,#10102435 100%);z-index:0}
@media(max-width:700px){body{background-position:center center}body::before{background:#101024a8}}
.wallet-button{border:1px solid #a5ef77;color:#a5ef77;background:#1d2330;padding:9px 12px;border-radius:7px;font:10px 'DM Mono',monospace;letter-spacing:1px;cursor:pointer}.wallet-button:hover{background:#a5ef77;color:#151329}
.mode-section{max-width:886px;margin:0 auto 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mode-card{text-align:left;border:1px solid #514c66;background:#201e37ee;border-radius:10px;color:#fff;padding:13px 16px;display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:transform .15s,border-color .15s}.mode-card:hover{transform:translateY(-2px);border-color:#a5ef77}.mode-card.selected{border-color:#a5ef77;box-shadow:inset 0 0 0 1px #a5ef7755;background:#273530f2}.mode-card .mode-tag{color:#a5ef77;font:9px 'DM Mono',monospace;letter-spacing:1px}.mode-card strong{font:17px 'Archivo Black',sans-serif;letter-spacing:-.5px}.mode-card small{color:#a9a5ba;font-size:11px}.mode-status{max-width:886px;min-height:30px;margin:0 auto 7px;color:#b6b2c8;font:10px 'DM Mono',monospace;text-align:center;line-height:1.5}
.leaderboard-section{max-width:886px;margin:45px auto 8px}.leaderboard-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.leaderboard-heading .eyebrow{display:block;letter-spacing:1.7px;text-align:left}.leaderboard-heading h2{font:30px 'Archivo Black',sans-serif;letter-spacing:-1.5px;margin:8px 0 0}.leaderboard-heading h2 span{color:#a5ef77}.leaderboard-heading button{border:1px solid #615b79;background:#27243d;color:#e8e5f1;border-radius:5px;padding:8px 11px;font:10px 'DM Mono',monospace;cursor:pointer}.leaderboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.leaderboard-card{border:1px solid #49445f;background:#211f38ef;border-radius:12px;overflow:hidden}.leaderboard-top{display:flex;justify-content:space-between;padding:14px 17px;border-bottom:1px solid #49445f;font:10px 'DM Mono',monospace;color:#b9b4ce;letter-spacing:.7px}.leaderboard-top strong{color:#a5ef77}.pool-row{display:grid;grid-template-columns:1fr 1fr;padding:17px;gap:10px}.pool-row div{display:flex;flex-direction:column;gap:6px}.pool-row small{font:9px 'DM Mono',monospace;color:#8f8aa4;letter-spacing:.8px}.pool-row b{font:24px 'Archivo Black',sans-serif;color:#fff}.leaders{margin:0;padding:0 17px 12px;list-style:none}.leaders li{display:grid;grid-template-columns:28px 1fr auto;gap:7px;align-items:center;border-top:1px solid #3d394f;padding:10px 0;font-size:12px}.leaders li .rank{font:10px 'DM Mono',monospace;color:#a5ef77}.leaders li .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaders li .points{font:11px 'DM Mono',monospace;color:#f7d479}.leaders li.empty-leaders{display:block;color:#858097;font:11px 'DM Mono',monospace}.payout-note{font-size:11px;color:#b6b1c7;line-height:1.6;max-width:850px;margin:12px 0 0}.game-layout{margin-top:10px}
@media(max-width:700px){.mode-section{gap:6px}.mode-card{padding:9px 8px}.mode-card strong{font-size:12px}.mode-card .mode-tag{font-size:7px}.mode-card small{font-size:9px}.leaderboard-section{margin-top:32px}.leaderboard-heading h2{font-size:23px}.leaderboard-grid{grid-template-columns:1fr}.wallet-button{font-size:8px;padding:7px}.topbar-right .live-dot{display:none}}
.peptris-dialog{width:min(92vw,410px);border:1px solid #747088;border-radius:12px;padding:22px;background:#211f38;color:#fff;box-shadow:0 25px 80px #000b}.peptris-dialog::backdrop{background:#0d0b1fc9;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font:22px 'Archivo Black',sans-serif;margin:0}.dialog-heading button{border:0;background:none;color:#aaa5c1;font-size:26px;cursor:pointer}.peptris-dialog p{font-size:12px;color:#bab5cd;line-height:1.5}.peptris-dialog label{display:block;font:10px 'DM Mono',monospace;letter-spacing:1px;color:#a5ef77;margin:18px 0 7px}.peptris-dialog input,.peptris-dialog select{width:100%;border:1px solid #655f7b;background:#302d47;color:#fff;border-radius:6px;padding:11px;font:13px 'DM Sans',sans-serif}.peptris-dialog .primary-button{margin-top:18px}.peptris-dialog .entry-terms{font-size:10px;color:#817c99}.peptris-dialog #payment-status{min-height:16px;color:#a5ef77}
.recovery-button{width:100%;margin-top:8px;border:1px solid #a5ef77;background:#26342f;color:#a5ef77;border-radius:6px;padding:10px;font:10px 'DM Mono',monospace;cursor:pointer}.recovery-button:hover{background:#a5ef77;color:#151329}
.payout-note{background:#1d1b35d9;border:1px solid #49445f;border-radius:8px;padding:12px 14px;margin-top:12px}
.manual-payouts{max-width:886px;margin:30px auto;border:1px solid #a5ef7770;background:#1d2530ef;border-radius:12px;padding:20px}.manual-payouts[hidden]{display:none}.manual-payouts>.leaderboard-heading{margin-bottom:8px}.manual-payouts>p{font-size:12px;color:#bab5cd;line-height:1.5}.payout-list{display:grid;gap:10px;margin-top:14px}.payout-row{border:1px solid #4b5d54;background:#1d1e32;border-radius:8px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:10px}.payout-details{display:grid;gap:5px;min-width:0}.payout-details code{font:11px 'DM Mono',monospace;color:#d7d2e5;overflow-wrap:anywhere}.payout-row strong{font:12px 'DM Mono',monospace;color:#a5ef77}.payout-row small{display:block;color:#aaa5bd;font:10px 'DM Mono',monospace;margin-top:5px;overflow-wrap:anywhere}.payout-row .payout-actions{display:flex;gap:7px;align-items:center;grid-column:1/-1}.payout-row input{min-width:0;flex:1;border:1px solid #655f7b;background:#302d47;color:#fff;border-radius:5px;padding:9px;font:11px 'DM Mono',monospace}.payout-row button{border:1px solid #a5ef77;background:#26342f;color:#a5ef77;border-radius:5px;padding:9px;cursor:pointer;font:10px 'DM Mono',monospace}.payout-row button:hover{background:#a5ef77;color:#151329}.payout-empty{color:#a5ef77;font:11px 'DM Mono',monospace}
@media(max-width:700px){.payout-row{grid-template-columns:1fr}.payout-row .payout-actions{flex-wrap:wrap}.payout-row input{flex-basis:100%}}
.board-frame{--board-bg:#17152b;--board-accent:#a5ef77;border-color:var(--board-accent);background:var(--board-bg);box-shadow:0 25px 70px #07061190,0 0 19px color-mix(in srgb,var(--board-accent) 28%,transparent);transition:border-color .35s,box-shadow .35s,background .35s}
.board-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.board-effects::after{content:'';position:absolute;inset:0;background:var(--board-accent);opacity:0}
.board-frame.clear-burst .board-effects::after{animation:board-flash .42s ease-out}
.board-frame.big-burst .board-effects::after{animation:board-flash .7s ease-out}
.board-frame.big-burst{animation:board-shake .42s ease-out}
.burst-bit{position:absolute;width:9px;height:12px;border-radius:2px;box-shadow:0 0 8px currentColor;animation:burst-fly .8s ease-out forwards}
.sound-toggle{border:0;background:transparent;color:var(--board-accent,#a5ef77);font:10px 'DM Mono',monospace;letter-spacing:1px;cursor:pointer;padding:5px;white-space:nowrap}
.sound-toggle:hover{text-decoration:underline}
@keyframes board-flash{0%{opacity:.55}100%{opacity:0}}
@keyframes board-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes burst-fly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.35)}}
@media(prefers-reduced-motion:reduce){.board-frame,.burst-bit,.board-effects::after{animation:none!important;transition:none!important}}