*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--spectrum-gray-75,#111318);color:var(--spectrum-gray-900,#e0e0e0);font-family:var(--spectrum-sans-font-family-stack,ui-sans-serif, system-ui, sans-serif);-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;min-height:100vh;padding:32px 16px 64px;display:flex}@property --grad-btn-angle{syntax:"<angle>";inherits:false;initial-value:135deg}@property --grad-btn-start{syntax:"<color>";inherits:false;initial-value:oklch(58% .2 280)}@property --grad-btn-end{syntax:"<color>";inherits:false;initial-value:oklch(62% .22 305)}@property --grad-border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}:root{--font-sans:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--fs-display:60px;--fs-h1:34px;--fs-h2:26px;--fs-title:20px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--lh-tight:1.1;--lh-snug:1.25;--lh-normal:1.5;--ls-display:-.035em;--ls-h1:-.03em;--ls-h2:-.02em;--ls-normal:0;--sp-0:0;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--r-xs:4px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:9999px;--bg:oklch(18% .012 270);--surface:oklch(22% .012 270);--surface-2:oklch(26% .012 270);--surface-3:oklch(32% .012 270);--muted:oklch(66% .012 270);--ink:oklch(96% .005 270);--faint:oklch(52% .012 270);--line:oklch(100% 0 0/.08);--line-2:oklch(100% 0 0/.14);--red:oklch(70% .19 25);--orange:oklch(72% .19 55);--amber:oklch(76% .17 80);--yellow:oklch(84% .16 100);--lime:oklch(80% .19 130);--green:oklch(74% .19 155);--teal:oklch(76% .13 190);--cyan:oklch(78% .13 215);--blue:oklch(66% .18 250);--indigo:oklch(58% .2 280);--violet:oklch(62% .22 305);--pink:oklch(68% .24 350);--on-light:oklch(18% .012 270);--on-dark:oklch(98% .005 270);--c:var(--indigo);--c-ink:var(--on-dark);--info:var(--blue);--success:var(--green);--warning:var(--amber);--danger:var(--red);--grad-rainbow:linear-gradient(90deg, var(--red), var(--orange), var(--amber), var(--yellow), var(--lime), var(--green), var(--teal), var(--cyan), var(--blue), var(--indigo), var(--violet), var(--pink));--grad-rainbow-soft:linear-gradient(90deg, color-mix(in oklch, var(--red) 24%, transparent), color-mix(in oklch, var(--orange) 24%, transparent), color-mix(in oklch, var(--yellow) 24%, transparent), color-mix(in oklch, var(--green) 24%, transparent), color-mix(in oklch, var(--cyan) 24%, transparent), color-mix(in oklch, var(--violet) 24%, transparent), color-mix(in oklch, var(--pink) 24%, transparent));--grad-btn:linear-gradient(var(--grad-btn-angle), var(--grad-btn-start), var(--grad-btn-end));--grad-spinner:conic-gradient(var(--red), var(--orange), var(--yellow), var(--green), var(--cyan), var(--blue), var(--violet), var(--pink), var(--red));--el-1:0 1px 0 oklch(100% 0 0/.04), 0 2px 8px oklch(0% 0 0/.3);--el-2:0 1px 0 oklch(100% 0 0/.06), 0 8px 24px oklch(0% 0 0/.4);--el-3:0 2px 0 oklch(100% 0 0/.06), 0 20px 48px oklch(0% 0 0/.55);--ring:0 0 0 3px color-mix(in oklch, var(--c) 36%, transparent);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-fast:.12s;--dur-base:.18s;--dur-slow:.28s}.hue-red{--c:var(--red);--c-ink:var(--on-dark)}.hue-orange{--c:var(--orange);--c-ink:var(--on-dark)}.hue-amber{--c:var(--amber);--c-ink:var(--on-light)}.hue-yellow{--c:var(--yellow);--c-ink:var(--on-light)}.hue-lime{--c:var(--lime);--c-ink:var(--on-light)}.hue-green{--c:var(--green);--c-ink:var(--on-light)}.hue-teal{--c:var(--teal);--c-ink:var(--on-light)}.hue-cyan{--c:var(--cyan);--c-ink:var(--on-light)}.hue-blue{--c:var(--blue);--c-ink:var(--on-dark)}.hue-indigo{--c:var(--indigo);--c-ink:var(--on-dark)}.hue-violet{--c:var(--violet);--c-ink:var(--on-dark)}.hue-pink{--c:var(--pink);--c-ink:var(--on-dark)}body.spectrum,.spectrum-root{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.pcc-header{text-align:center}.pcc-header--compact{margin-bottom:16px}.pcc-wordmark{letter-spacing:-1px;background:linear-gradient(135deg,#a78bfa 0%,#60a5fa 50%,#34d399 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:900;line-height:1.1}.pcc-wordmark--sm{font-size:1.8rem}.pcc-sub{color:var(--spectrum-gray-500,#ffffff59);letter-spacing:3px;text-transform:uppercase;margin-top:6px;font-size:.7rem}#setup-screen{flex-direction:column;align-items:center;gap:24px;width:100%;max-width:560px;padding-top:36px;display:flex}.pcc-card{width:100%}.pcc-card-note{color:#ffffff61;letter-spacing:0;font-size:.72rem;font-weight:400}.size-grid{flex-wrap:wrap;gap:6px;display:flex}#grid-dims{color:var(--spectrum-gray-700,#ffffff73);background:var(--spectrum-gray-75,#00000040);border:1px solid var(--spectrum-gray-300,#ffffff0f);border-radius:6px;margin-top:12px;padding:8px 12px;font-size:.72rem}#grid-dims span{color:#a78bfa;font-weight:600}.upload-zone{border:2px dashed var(--spectrum-gray-400,#ffffff1f);text-align:center;cursor:pointer;border-radius:10px;padding:24px 20px;transition:border-color .15s,background .15s;position:relative}.upload-zone:hover,.upload-zone.drag-over{background:#a78bfa0d;border-color:#a78bfa}.upload-zone input{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-icon{margin-bottom:8px;font-size:2rem}.upload-text{color:var(--spectrum-gray-600,#ffffff61);font-size:.75rem;line-height:1.8}.upload-text em{color:#a78bfa;font-style:normal}#preview-wrap{text-align:center;margin-top:16px;display:none}#preview-canvas{image-rendering:pixelated;border-radius:6px;max-width:100%;margin:0 auto;display:block}.preview-label{color:var(--spectrum-gray-600,#ffffff4d);margin-top:8px;font-size:.62rem}#game-screen{flex-direction:column;align-items:center;display:none}.pcc-topbar{background:var(--spectrum-gray-100,#1e2028);border:1px solid var(--spectrum-gray-300,#ffffff14);border-radius:10px;align-items:center;margin-bottom:16px;display:flex;overflow:hidden}.stat-cell{text-align:center;border-right:1px solid var(--spectrum-gray-300,#ffffff0f);padding:10px 20px}.stat-cell:last-child{border-right:none}.stat-val{color:#a78bfa;font-size:1.2rem;font-weight:700;line-height:1}.stat-lbl{color:var(--spectrum-gray-600,#ffffff59);text-transform:uppercase;letter-spacing:1.5px;margin-top:3px;font-size:.54rem}.game-layout{align-items:flex-start;gap:16px;display:flex}.sec-lbl{color:var(--spectrum-gray-600,#ffffff59);text-transform:uppercase;letter-spacing:2px;font-size:.59rem;font-weight:600}.panel-left{flex-direction:column;flex-shrink:0;align-items:center;gap:16px;width:140px;padding-top:16px;display:flex}.panel-section{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}#ref-canvas{border:1px solid var(--spectrum-gray-300,#ffffff1a);image-rendering:pixelated;border-radius:6px;max-width:130px;max-height:130px;display:block}.region-row{align-items:center;gap:5px;margin-bottom:5px;font-size:.62rem;display:flex}.rdot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.rname{color:var(--spectrum-gray-600,#ffffff61);flex:1}.rbar-bg{background:var(--spectrum-gray-300,#ffffff14);border-radius:2px;flex:2;height:4px;overflow:hidden}.rbar-fill{border-radius:2px;height:100%;transition:width .3s}.rcnt{color:var(--spectrum-gray-600,#ffffff4d);text-align:right;min-width:24px;font-size:.58rem}.unlock-hint{color:var(--spectrum-gray-600,#ffffff61);font-size:.62rem;line-height:1.7}.board-section{flex-direction:column;align-items:center;gap:8px;display:flex}#puzzle-board{background:var(--spectrum-gray-100,#1e2028);border:2px solid var(--spectrum-gray-300,#ffffff1a);border-radius:8px;gap:2px;padding:3px;display:grid}.board-slot{background:var(--spectrum-gray-75,#00000059);border:1px solid var(--spectrum-gray-300,#ffffff12);cursor:pointer;border-radius:2px;transition:background .1s,border-color .1s;position:relative;overflow:hidden}.board-slot:hover:not(.filled){border-color:var(--spectrum-gray-500,#fff3);background:var(--spectrum-gray-200,#ffffff0a)}.board-slot.ghost{animation:1.3s ease-in-out infinite ghost-pulse;background:#a78bfa1f!important;border-color:#a78bfae6!important}.board-slot.wrong{animation:.25s shake;background:#ef44441a!important;border-color:#ef4444!important}.piece-placed{width:100%;height:100%;animation:.2s cubic-bezier(.17,.67,.35,1.3) pop-in}.panel-right{flex-direction:column;flex-shrink:0;gap:14px;width:196px;padding-top:16px;display:flex}.ability-list{flex-direction:column;gap:7px;margin:10px 0;display:flex}.ability-list ds-tooltip{display:block}.ab-btn{border:1px solid var(--spectrum-gray-300,#ffffff14);width:100%;color:var(--spectrum-gray-500,#ffffff38);cursor:not-allowed;text-align:left;background:0 0;border-radius:8px;padding:9px 12px;font-family:inherit;font-size:.7rem;line-height:1.4;transition:all .18s}.ab-btn.unlocked{color:#a78bfa;cursor:pointer;border-color:#a78bfa73}.ab-btn.unlocked:hover{background:#a78bfa14;border-color:#a78bfa}.ab-btn.active{color:#c4b5fd;background:#a78bfa24;border-color:#a78bfa;box-shadow:0 0 12px #a78bfa26}.ab-name{font-size:.73rem;font-weight:600;display:block}.ab-desc{opacity:.65;margin-top:2px;font-size:.59rem;display:block}.ab-lock{opacity:.38;margin-top:3px;font-size:.55rem;display:block}.scatter-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.scatter-count-label{color:var(--spectrum-gray-600,#ffffff61);font-size:.62rem}#scatter-area{background:var(--spectrum-gray-75,#00000040);border:1px solid var(--spectrum-gray-300,#ffffff12);border-radius:8px;align-content:start;gap:3px;width:100%;max-height:380px;padding:8px;display:grid;overflow-y:auto}#scatter-area::-webkit-scrollbar{width:3px}#scatter-area::-webkit-scrollbar-thumb{background:var(--spectrum-gray-400,#ffffff1f);border-radius:2px}.sp{cursor:pointer;border:2px solid #0000;border-radius:3px;flex-shrink:0;transition:transform .12s,box-shadow .12s,border-color .12s,opacity .18s}.sp:hover{filter:brightness(1.2);transform:scale(1.1)}.sp.sel{z-index:2;border-color:#fff;transform:scale(1.12);box-shadow:0 0 10px #ffffff73}.sp.eglow{border-color:#60a5fae6;box-shadow:0 0 7px #60a5fa66}.sp.out{pointer-events:none;transition:transform .18s,opacity .18s;opacity:0!important;transform:scale(.3)!important}.notif-stack{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.notif-stack ds-snackbar{pointer-events:auto}.win-icon-emoji{font-size:22px;line-height:1}.win-sub{color:#ffffff61;text-align:center;margin-bottom:20px;font-size:.82rem}.win-stats{justify-content:center;gap:32px;display:flex}.win-stats .stat-val{font-size:1.6rem}@keyframes ghost-pulse{0%,to{box-shadow:0 0 5px #a78bfa40}50%{box-shadow:0 0 14px #a78bfa99}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}