:root{--bg-0: #0a0421;--bg-1: #170a3d;--bg-2: #2a1566;--bg-3: #3d1f7a;--panel: rgba(40, 18, 80, .55);--panel-strong: rgba(30, 12, 60, .8);--panel-border: rgba(255, 255, 255, .12);--panel-stroke: rgba(255, 255, 255, .07);--fg: #f5efff;--fg-dim: #c9bce8;--muted: #8e80b8;--dim: #655694;--err: #ff7a8f;--purple: #a26bff;--purple-2:#7b3fff;--pink: #ff5ec7;--pink-2: #ff2d9d;--cyan: #4fc3f7;--cyan-2: #00b4ff;--gold: #ffd54a;--gold-2: #ffa000;--mint: #5df5b9;--mint-2: #10dba0;--accent: var(--purple);--cta: var(--gold);--grad-primary: linear-gradient(135deg, #ff5ec7 0%, #a26bff 55%, #4fc3f7 100%);--grad-primary-soft: linear-gradient(135deg, rgba(255,94,199,.25) 0%, rgba(162,107,255,.25) 55%, rgba(79,195,247,.25) 100%);--grad-gold: linear-gradient(135deg, #ffd54a 0%, #ffa000 100%);--grad-mint: linear-gradient(135deg, #5df5b9 0%, #10dba0 100%);--grad-cyan: linear-gradient(135deg, #4fc3f7 0%, #7b3fff 100%);--grad-rose: linear-gradient(135deg, #ff7a8f 0%, #ff2d9d 100%);--grad-bg: radial-gradient(ellipse at 20% 10%, #3d1f7a 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, #2a1566 0%, transparent 55%), linear-gradient(160deg, #0a0421 0%, #170a3d 55%, #2a1566 100%);--sh-card: 0 10px 40px -12px rgba(0,0,0,.6), 0 0 0 1px var(--panel-border);--sh-float: 0 20px 50px -20px rgba(0,0,0,.7);--glow-purp: 0 0 24px rgba(162,107,255,.55);--glow-pink: 0 0 24px rgba(255,94,199,.55);--glow-cyan: 0 0 24px rgba(79,195,247,.55);--glow-gold: 0 0 28px rgba(255,213,74,.6);--r-sm: 6px;--r-md: 12px;--r-lg: 20px;--r-xl: 28px;--font-display: "Bungee", "Impact", "Arial Black", system-ui, sans-serif;--font-body: "Nunito", -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh}body{color:var(--fg);font-family:var(--font-body);font-weight:600;background:var(--bg-0);overflow-x:hidden;display:grid;place-items:start center;min-height:100vh}.bg-decor{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;overflow:hidden}.bg-grad{position:absolute;top:-10%;right:-10%;bottom:-10%;left:-10%;background:var(--grad-bg);animation:bgShift 40s linear infinite alternate}@keyframes bgShift{0%{transform:translate(0) scale(1)}50%{transform:translate(-3%,-2%) scale(1.05)}to{transform:translate(2%,3%) scale(1.02)}}.bg-blocks{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'><g fill='%234fc3f7' fill-opacity='0.12'><rect x='1' y='1' width='28' height='28' rx='4'/><rect x='31' y='1' width='28' height='28' rx='4'/><rect x='61' y='1' width='28' height='28' rx='4'/><rect x='91' y='1' width='28' height='28' rx='4'/></g></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'><g fill='%23a26bff' fill-opacity='0.14'><rect x='31' y='1' width='28' height='28' rx='4'/><rect x='1' y='31' width='28' height='28' rx='4'/><rect x='31' y='31' width='28' height='28' rx='4'/><rect x='61' y='31' width='28' height='28' rx='4'/></g></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='%23ffd54a' fill-opacity='0.10'><rect x='1' y='1' width='28' height='28' rx='4'/><rect x='31' y='1' width='28' height='28' rx='4'/><rect x='1' y='31' width='28' height='28' rx='4'/><rect x='31' y='31' width='28' height='28' rx='4'/></g></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'><g fill='%23ff5ec7' fill-opacity='0.10'><rect x='1' y='1' width='28' height='28' rx='4'/><rect x='1' y='31' width='28' height='28' rx='4'/><rect x='31' y='31' width='28' height='28' rx='4'/><rect x='61' y='31' width='28' height='28' rx='4'/></g></svg>");background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-position:8% 12%,82% 22%,12% 78%,85% 70%;animation:floatBlocks 28s ease-in-out infinite alternate}@keyframes floatBlocks{0%{transform:translate(0) rotate(0)}50%{transform:translate(-8px,-12px) rotate(-1.5deg)}to{transform:translate(6px,10px) rotate(1.5deg)}}#app{padding:1.25rem 1rem 2rem;width:100%;max-width:900px}.screen{display:flex;flex-direction:column;gap:1.25rem}.brand{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.5rem);letter-spacing:.04em;line-height:1;margin:0;text-align:center;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 20px rgba(162,107,255,.45)) drop-shadow(0 2px 0 rgba(0,0,0,.3));letter-spacing:.08em}.brand .sub{display:block;font-family:var(--font-body);font-weight:800;font-size:.28em;letter-spacing:.35em;color:var(--fg-dim);margin-top:.5em;background:none;-webkit-text-fill-color:var(--fg-dim);filter:none}.brand.small{font-size:clamp(1.2rem,3.5vw,1.6rem);text-align:left}h1,h2,h3{font-weight:800;margin:0;color:var(--fg)}h2{font-size:1.5rem;letter-spacing:.02em}h3{font-size:1.1rem;letter-spacing:.02em}.screen>header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.hello{margin:0;color:var(--fg-dim);font-weight:600}.hello b{color:var(--fg);font-weight:800}.hint{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--r-lg);padding:1.25rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-card)}.panel.strong{background:var(--panel-strong)}button{font-family:inherit;font-weight:800;font-size:.95rem;letter-spacing:.02em;cursor:pointer;border:0;color:#fff;background:var(--grad-primary);padding:.7rem 1.3rem;border-radius:var(--r-md);position:relative;transition:transform .12s ease,filter .15s ease,box-shadow .2s ease;box-shadow:0 4px 16px -4px #a26bff99,inset 0 -3px #00000038}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 8px 22px -4px #a26bffcc,inset 0 -3px #00000038}button:active:not(:disabled){transform:translateY(1px);filter:brightness(.95);box-shadow:0 2px 8px -2px #a26bff66,inset 0 -1px #00000038}button:disabled,button[disabled]{background:#ffffff14!important;color:var(--muted)!important;cursor:not-allowed!important;box-shadow:none!important;opacity:.7}button.btn-cta{background:var(--grad-gold);color:#2a1566;box-shadow:0 4px 18px -4px #ffd54abf,inset 0 -3px #00000038}button.btn-cta:hover:not(:disabled){box-shadow:0 8px 28px -4px #ffd54af2,inset 0 -3px #00000038}button.btn-mint{background:var(--grad-mint);color:#0a3a2b;box-shadow:0 4px 18px -4px #5df5b9a6,inset 0 -3px #00000038}button.btn-rose{background:var(--grad-rose);color:#fff;box-shadow:0 4px 18px -4px #ff2d9da6,inset 0 -3px #00000038}button.btn-ghost{background:#ffffff0f;color:var(--fg);border:1px solid var(--panel-border);box-shadow:none}button.btn-ghost:hover:not(:disabled){background:#ffffff1f;filter:none}button.link{background:transparent;color:var(--purple);padding:.25rem .5rem;font-size:inherit;font-weight:700;box-shadow:none}button.link:hover:not(:disabled){background:#a26bff24;color:var(--fg);filter:none;box-shadow:none}button.icon{background:#ffffff0f;border:1px solid var(--panel-border);color:var(--fg);padding:.45rem .6rem;border-radius:var(--r-md);box-shadow:none;font-size:1.05rem}button.icon:hover:not(:disabled){background:#ffffff24;filter:none}.mute-btn{background:#ffffff0f;border:1px solid var(--panel-border);color:var(--fg);padding:.4rem .6rem;border-radius:var(--r-md);font-size:1.05rem;box-shadow:none}input[type=text]{background:#00000059;color:var(--fg);border:1.5px solid var(--panel-border);border-radius:var(--r-md);padding:.7rem 1rem;font:inherit;font-weight:600;min-width:18rem;transition:border-color .15s ease,box-shadow .15s ease}input[type=text]::placeholder{color:var(--muted)}input[type=text]:focus{outline:none;border-color:var(--purple);box-shadow:var(--glow-purp)}.err{color:var(--err);font-size:.9rem;min-height:1.2em;margin:0;font-weight:700}.screen-start{align-items:center;padding-top:3rem;text-align:center;animation:fadeUp .6s ease}.screen-start .brand{margin-bottom:.5rem}.screen-start .tagline{color:var(--fg-dim);font-size:1.05rem;font-weight:700;margin:0 0 2rem;letter-spacing:.05em}.screen-start form{display:flex;gap:.75rem;align-items:stretch;justify-content:center;flex-wrap:wrap}.screen-start form button{padding:.7rem 1.75rem;font-size:1.05rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.screen-menu{animation:fadeUp .5s ease}.menu-top-right{display:flex;align-items:center;gap:.6rem}nav.menu-stack{display:flex;flex-direction:column;gap:.9rem;max-width:26rem;margin:1.5rem auto 0}.menu-btn{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;text-align:left;font-size:1.1rem;border-radius:var(--r-lg)}.menu-btn .ico{font-size:1.6rem;width:2.2rem;height:2.2rem;display:grid;place-items:center;background:#ffffff2e;border-radius:10px;flex:0 0 auto}.menu-btn .tip{margin-left:auto;font-size:.75rem;font-weight:700;opacity:.85;letter-spacing:.06em}.screen-leaderboard{animation:fadeUp .4s ease}.screen-leaderboard .tabs{display:flex;gap:.5rem;padding:.35rem;background:#0000004d;border-radius:var(--r-xl);border:1px solid var(--panel-border);width:max-content;max-width:100%;margin:0 auto;flex-wrap:wrap}.tab{background:transparent;color:var(--fg-dim);padding:.45rem 1.1rem;border-radius:var(--r-lg);font-size:.9rem;box-shadow:none}.tab:hover:not(:disabled){background:#ffffff0f;filter:none;color:var(--fg)}.tab.active{background:var(--grad-primary);color:#fff;box-shadow:0 4px 14px -4px #a26bffa6}table.leaderboard{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:.5rem}.leaderboard thead th{color:var(--muted);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem .8rem;text-align:left}.leaderboard thead th:nth-child(1){text-align:center;width:3.5rem}.leaderboard thead th:nth-child(n+3){text-align:right}.leaderboard tbody td{background:var(--panel);border-top:1px solid var(--panel-stroke);border-bottom:1px solid var(--panel-stroke);padding:.7rem .8rem;font-weight:700}.leaderboard tbody td:first-child{border-left:1px solid var(--panel-stroke);border-radius:var(--r-md) 0 0 var(--r-md);text-align:center;color:var(--muted)}.leaderboard tbody td:last-child{border-right:1px solid var(--panel-stroke);border-radius:0 var(--r-md) var(--r-md) 0;text-align:right;color:var(--fg-dim)}.leaderboard tbody td:nth-child(n+3){text-align:right;color:var(--fg-dim)}.leaderboard tbody tr.rank-1 td{background:linear-gradient(90deg,#ffd54a40,#ffa00014);color:var(--fg)}.leaderboard tbody tr.rank-1 td:first-child{background:linear-gradient(135deg,#ffd54a,#ffa000);color:#2a1566}.leaderboard tbody tr.rank-2 td{background:linear-gradient(90deg,#c8c8dc33,#c8c8dc0d)}.leaderboard tbody tr.rank-2 td:first-child{background:linear-gradient(135deg,#e4e4f0,#b4b4cf);color:#2a1566}.leaderboard tbody tr.rank-3 td{background:linear-gradient(90deg,#cd7f3238,#cd7f320f)}.leaderboard tbody tr.rank-3 td:first-child{background:linear-gradient(135deg,#e09a55,#a05a20);color:#2a1566}.crown{display:inline-block;margin-right:.3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.screen-collection{animation:fadeUp .4s ease}.collection-summary{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:-.25rem 0 .25rem}.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}.col-tile{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:3 / 4;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--panel-border);background:#0006;font-family:inherit;font-weight:800;cursor:default;padding:0;box-shadow:none;color:var(--fg)}.col-tile img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.col-tile--done{cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,filter .15s ease}.col-tile--done:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 12px 30px -10px #a26bff8c;filter:brightness(1.06)}.col-tile--locked{background:repeating-linear-gradient(45deg,#ffffff08 0,#ffffff08 8px,#ffffff0f 8px,#ffffff0f 16px),#0f0c1ed9;color:var(--muted)}.col-tile__num{position:absolute;top:.35rem;left:.4rem;background:#0000008c;color:var(--fg);font-size:.7rem;padding:.15rem .45rem;border-radius:999px;letter-spacing:.05em;z-index:2}.col-tile__lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:1.6rem;filter:grayscale(.4)}.col-tile__theme{position:relative;z-index:1;font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:.4rem .4rem .5rem;text-align:center}.col-tile__meta{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:baseline;padding:.4rem .5rem;background:linear-gradient(180deg,#0000,#000000a6 70%);font-size:.72rem;color:var(--fg-dim)}.col-tile__meta b{color:var(--fg);font-weight:900;font-size:.85rem}.col-tile__meta em{font-style:normal;color:var(--muted);font-size:.62rem}.collection-card{max-width:26rem;width:92%}.collection-full{width:100%;height:auto;max-height:50vh;object-fit:contain;border-radius:var(--r-md);margin:.5rem 0 1rem;display:block;background:#0006}.screen-campaign{animation:fadeUp .4s ease}.screen-campaign .stats{display:flex;gap:.6rem;flex-wrap:wrap}.stat-pill{display:inline-flex;align-items:baseline;gap:.35rem;padding:.4rem .75rem;background:#ffffff0f;border:1px solid var(--panel-border);border-radius:999px;font-size:.82rem;color:var(--fg-dim);font-weight:700}.stat-pill b{color:var(--fg);font-weight:900}.stat-pill.highlight{background:var(--grad-primary-soft);border-color:#a26bff80;color:var(--fg)}.screen-campaign .board-wrap{display:flex;gap:1rem;align-items:flex-start;flex-wrap:nowrap;justify-content:center}.screen-campaign #board,.screen-campaign #next,.screen-campaign #hold{flex:0 0 auto}.screen-campaign .right{display:flex;flex-direction:column;gap:.6rem;min-width:130px;flex:0 0 auto}.picture-thumb{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .6rem .25rem .3rem;background:#ffffff0f;border:1px solid var(--panel-border);border-radius:var(--r-md);cursor:pointer;font:inherit;color:var(--fg-dim);font-weight:700;font-size:.82rem;box-shadow:none;transition:background .15s ease,transform .1s ease}.picture-thumb:hover{background:#ffffff1f}.picture-thumb:active{transform:scale(.97)}.picture-thumb #picture{width:32px;height:42px;border-radius:4px;box-shadow:0 0 0 1px var(--panel-border);flex:0 0 auto}.picture-thumb .picture-name b{color:var(--fg);font-weight:900}.picture-modal canvas{width:100%;height:auto;max-height:60vh;margin:.5rem 0 1rem;display:block;background:#0006}.next-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:800}canvas{background:#00000073;border-radius:var(--r-md);display:block;box-shadow:0 0 0 1px var(--panel-border),0 10px 30px -12px #0009,inset 0 0 0 2px #a26bff33}#board,#board-p,#board-c,#board-o{box-shadow:0 0 0 1px var(--panel-border),0 0 40px -10px #a26bff80,inset 0 0 0 2px #a26bff4d}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050212b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:10;animation:fadeIn .2s ease}.overlay[hidden]{display:none}.overlay-card{background:var(--panel-strong);padding:2rem 2.25rem;border-radius:var(--r-xl);text-align:center;min-width:20rem;max-width:32rem;box-shadow:var(--sh-float);position:relative;overflow:hidden;animation:popIn .3s cubic-bezier(.2,1.3,.4,1)}.overlay-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:2px;border-radius:var(--r-xl);background:var(--grad-primary);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.overlay-card h2{margin:0 0 .5rem;font-family:var(--font-display);font-size:2rem;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.04em}.overlay-card p{color:var(--fg-dim);margin:0 0 1.5rem;font-weight:600}.overlay-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.screen-vs-cpu,.screen-vs-net{animation:fadeUp .4s ease}.screen-vs-cpu .vs-wrap,.screen-vs-net .vs-wrap{display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:nowrap;justify-content:center}.screen-vs-cpu .player,.screen-vs-net .player{display:flex;flex-direction:column;gap:.5rem;align-items:center;flex:0 0 auto;padding:.75rem;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--r-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.side-label{font-family:var(--font-display);font-size:.9rem;color:var(--fg);letter-spacing:.15em;text-transform:uppercase}.screen-vs-cpu .player:first-child .side-label,.screen-vs-net .player:first-child .side-label{background:var(--grad-mint);-webkit-background-clip:text;background-clip:text;color:transparent}.screen-vs-cpu .player:last-child .side-label,.screen-vs-net .player:last-child .side-label{background:var(--grad-rose);-webkit-background-clip:text;background-clip:text;color:transparent}.side-stats{display:flex;gap:.6rem;font-size:.82rem;font-weight:700;color:var(--fg-dim)}.side-stats b{color:var(--fg);font-weight:900}.touch-controls{display:none;gap:.45rem;justify-content:center;margin-top:.5rem;flex-wrap:wrap}.touch-controls button.tc{flex:1 1 auto;max-width:4.5rem;min-width:3rem;padding:.85rem .5rem;font-size:1.25rem;font-weight:800;border-radius:var(--r-md);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.touch-controls button.tc.wide{flex:2 1 auto;max-width:8rem}.screen-campaign,.screen-vs-cpu,.screen-vs-net{touch-action:manipulation}@media (prefers-reduced-motion: reduce){.bg-grad,.bg-blocks,.screen-start,.screen-menu,.screen-leaderboard,.screen-campaign,.screen-vs-cpu,.screen-vs-net{animation:none}}@media (max-width: 720px){#app{padding:.5rem;max-width:100%}.brand{font-size:clamp(1.9rem,9vw,3rem);letter-spacing:.05em}.brand.small{font-size:1.15rem}nav.menu-stack{max-width:100%;margin-top:.75rem;gap:.65rem}.menu-btn{padding:.85rem .95rem;font-size:1rem}.menu-btn .tip{display:none}.screen-campaign .board-wrap{flex-direction:column;gap:.4rem;align-items:center}.screen-campaign #board{height:60vh;width:auto;aspect-ratio:1 / 2;max-width:90vw}.screen-campaign .right{flex-direction:row;align-items:center;justify-content:center;min-width:0;width:100%;gap:.75rem}.screen-campaign #next,.screen-campaign #hold{width:52px;height:52px}.screen-campaign .hint{display:none}.screen-campaign .next-label{font-size:.6rem}.screen-campaign .stats{justify-content:center;gap:.35rem}.stat-pill{font-size:.72rem;padding:.25rem .55rem}.picture-thumb{font-size:.72rem;padding:.2rem .5rem .2rem .25rem}.picture-thumb #picture{width:26px;height:34px}.picture-modal canvas{max-height:55vh}.screen-vs-cpu .vs-wrap,.screen-vs-net .vs-wrap{gap:.5rem}.screen-vs-cpu .player,.screen-vs-net .player{padding:.5rem;flex:1 1 0;min-width:0}.screen-vs-cpu .player canvas,.screen-vs-net .player canvas{width:100%;max-width:100%;height:auto}.screen-vs-cpu #next-p,.screen-vs-cpu #next-c,.screen-vs-net #next-p{width:56px;height:56px}.side-label{font-size:.75rem}.side-stats{font-size:.72rem;gap:.4rem}.overlay-card{padding:1.5rem 1.25rem;min-width:unset;width:92%}.overlay-card h2{font-size:1.6rem}.touch-controls{display:flex}.leaderboard tbody td{padding:.5rem .55rem;font-size:.9rem}.leaderboard thead th{padding:.35rem .55rem;font-size:.65rem}.collection-grid{grid-template-columns:repeat(3,1fr);gap:.45rem}.col-tile__num{font-size:.65rem;padding:.1rem .4rem}.col-tile__theme{font-size:.58rem;padding:.3rem}.col-tile__meta{font-size:.65rem;padding:.3rem .4rem}.col-tile__meta b{font-size:.78rem}.col-tile__meta em{font-size:.55rem}}