.pcc-game{--pcc-ink:#172033;--pcc-muted:#5f6b7a;--pcc-blue:#2563eb;--pcc-blue-dark:#1d4ed8;--pcc-soft:#f5f8ff;--pcc-border:#d8deea;--pcc-success:#087f5b;--pcc-error:#b42318;width:100%;max-width:1040px;margin:24px auto;overflow:hidden;border:1px solid var(--pcc-border);border-radius:24px;background:#fff;box-shadow:0 18px 55px rgba(35,55,90,.12);color:var(--pcc-ink);font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.45}.pcc-game *{box-sizing:border-box}.pcc-game button,.pcc-game input{font:inherit}.pcc-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(22px,4vw,40px);background:linear-gradient(135deg,#f7fbff,#eef4ff)}.pcc-hero h2{margin:2px 0 7px;color:var(--pcc-ink);font-size:clamp(1.8rem,5vw,3rem);line-height:1.05;letter-spacing:-.035em}.pcc-hero p{margin:0;color:var(--pcc-muted)}.pcc-eyebrow{margin:0!important;color:var(--pcc-blue)!important;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.pcc-best{display:grid;grid-template-columns:auto auto;min-width:116px;padding:14px 16px;border:1px solid #cbd9f6;border-radius:18px;background:#fff;text-align:center}.pcc-best span{grid-column:1/-1;color:var(--pcc-muted);font-size:.72rem;font-weight:800;text-transform:uppercase}.pcc-best strong{align-self:end;color:var(--pcc-blue);font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}.pcc-best small{align-self:end;color:var(--pcc-muted);font-weight:700}.pcc-content{display:grid;grid-template-columns:minmax(300px,1.4fr) minmax(255px,.72fr);gap:28px;padding:clamp(18px,4vw,36px)}.pcc-play-area{min-width:0}.pcc-field{display:grid;gap:7px;margin-bottom:18px}.pcc-field label,.pcc-colors legend{color:var(--pcc-ink);font-size:.82rem;font-weight:800}.pcc-field input{width:100%;min-height:48px;padding:10px 13px;border:1px solid var(--pcc-border);border-radius:12px;background:#fff;color:var(--pcc-ink)}.pcc-colors{min-width:0;margin:0 0 18px;padding:0;border:0}.pcc-color-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}.pcc-swatch,.pcc-custom-color{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:64px;min-height:48px;padding:6px 9px;border:2px solid var(--pcc-border);border-radius:12px;background:#fff;color:var(--pcc-ink);cursor:pointer}.pcc-swatch span{display:block;width:25px;height:25px;border:1px solid #7d8797;border-radius:50%;background:var(--pcc-swatch)}.pcc-swatch b,.pcc-custom-color span{font-size:.7rem}.pcc-swatch.is-selected,.pcc-custom-color.is-selected{border-color:var(--pcc-blue);box-shadow:0 0 0 2px rgba(37,99,235,.12)}.pcc-swatch.is-selected:after,.pcc-custom-color.is-selected:after{content:"✓";position:absolute;top:-7px;right:-6px;display:grid;width:20px;height:20px;place-items:center;border:2px solid #fff;border-radius:50%;background:var(--pcc-blue);color:#fff;font-size:.7rem;font-weight:900}.pcc-custom-color{flex-direction:column;gap:1px}.pcc-custom-color input{width:30px;height:26px;padding:0;border:0;background:transparent;cursor:pointer}.pcc-canvas-shell{position:relative;width:100%;max-width:620px;margin:0 auto;overflow:hidden;border:2px solid #aeb8c7;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px #fff,0 8px 24px rgba(31,45,70,.08);aspect-ratio:1}.pcc-canvas-shell canvas{display:block;max-width:100%;background:#fff;cursor:crosshair;touch-action:none}.pcc-canvas-hint{pointer-events:none;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#6b7584;text-align:center}.pcc-canvas-hint[hidden]{display:none}.pcc-canvas-hint span{color:#c7ced9;font-size:clamp(7rem,28vw,12rem);font-weight:200;line-height:.72}.pcc-canvas-hint strong{margin-top:14px;color:#4c5768}.pcc-canvas-hint small{margin-top:4px}.pcc-feedback{margin-top:14px;padding:14px 16px;border:1px solid #cfe2ff;border-radius:14px;background:var(--pcc-soft)}.pcc-feedback[hidden]{display:none}.pcc-feedback strong{display:block;color:var(--pcc-blue-dark);font-size:1.05rem}.pcc-feedback p{margin:4px 0 0;color:var(--pcc-muted);font-size:.88rem}.pcc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.pcc-button,.pcc-refresh{min-height:48px;border-radius:12px;font-weight:800;cursor:pointer}.pcc-button{padding:10px 15px}.pcc-button-primary{border:1px solid var(--pcc-blue);background:var(--pcc-blue);color:#fff}.pcc-button-primary:hover{background:var(--pcc-blue-dark)}.pcc-button-secondary{border:1px solid var(--pcc-border);background:#fff;color:var(--pcc-ink)}.pcc-button:disabled{cursor:not-allowed;opacity:.48}.pcc-status{min-height:1.5em;margin:11px 0 0;color:var(--pcc-muted);font-size:.84rem;text-align:center}.pcc-status[data-state=error]{color:var(--pcc-error);font-weight:700}.pcc-status[data-state=success]{color:var(--pcc-success);font-weight:700}.pcc-leaderboard{align-self:start;min-width:0;padding:20px;border:1px solid var(--pcc-border);border-radius:18px;background:#fbfcff}.pcc-leaderboard-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.pcc-leaderboard h3{margin:2px 0 0;color:var(--pcc-ink);font-size:1.6rem}.pcc-refresh{width:48px;border:1px solid var(--pcc-border);background:#fff;color:var(--pcc-blue);font-size:1.35rem}.pcc-leaderboard ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}.pcc-leaderboard li{display:grid;grid-template-columns:30px 14px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:54px;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:#fff}.pcc-leaderboard li.is-current{border-color:#f0b429;background:#fff9e8;box-shadow:0 0 0 2px rgba(240,180,41,.15)}.pcc-rank{display:grid;width:27px;height:27px;place-items:center;border-radius:9px;background:#edf2ff;color:var(--pcc-blue-dark);font-size:.75rem;font-weight:900}.pcc-leaderboard li:nth-child(1) .pcc-rank{background:#ffd75e;color:#553800}.pcc-leaderboard li:nth-child(2) .pcc-rank{background:#dce3ed;color:#394456}.pcc-leaderboard li:nth-child(3) .pcc-rank{background:#d99b62;color:#3f230d}.pcc-entry-color{display:block;width:12px;height:32px;border:1px solid #8e99a8;border-radius:6px}.pcc-entry-details{min-width:0}.pcc-entry-details strong,.pcc-entry-details small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcc-entry-details strong{color:var(--pcc-ink);font-size:.86rem}.pcc-entry-details small{color:var(--pcc-muted);font-size:.7rem}.pcc-entry-score{color:var(--pcc-blue-dark);font-size:1rem;font-variant-numeric:tabular-nums}.pcc-leaderboard .pcc-leaderboard-message{display:block;padding:20px 10px;color:var(--pcc-muted);text-align:center}.pcc-leaderboard .pcc-leaderboard-message.is-error{color:var(--pcc-error)}.pcc-instance-message{padding:12px;border:1px solid #d8deea;border-radius:10px;background:#fff}.pcc-game button:focus-visible,.pcc-game input:focus-visible,.pcc-game canvas:focus-visible{outline:3px solid #f0b429;outline-offset:3px}@media(max-width:780px){.pcc-game{margin:14px auto;border-radius:18px}.pcc-content{grid-template-columns:1fr}.pcc-leaderboard{order:2}.pcc-leaderboard ol{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.pcc-hero{align-items:flex-start;padding:20px 17px}.pcc-best{min-width:88px;padding:10px}.pcc-best strong{font-size:1.65rem}.pcc-content{padding:16px}.pcc-color-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.pcc-swatch,.pcc-custom-color{min-width:0;min-height:52px;padding:5px 3px}.pcc-swatch{flex-direction:column;gap:1px}.pcc-swatch span{width:23px;height:23px}.pcc-swatch b,.pcc-custom-color span{font-size:.62rem}.pcc-actions{position:sticky;z-index:3;bottom:6px;padding:7px;border:1px solid rgba(216,222,234,.9);border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(20,35,55,.12);backdrop-filter:blur(8px)}.pcc-leaderboard{padding:15px}.pcc-leaderboard ol{grid-template-columns:1fr}.pcc-canvas-hint small{max-width:220px}}@media(max-width:360px){.pcc-hero{display:block}.pcc-best{display:inline-grid;margin-top:14px}.pcc-color-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.pcc-game *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}