.colorly-puzzle-app{max-width:1100px;margin:20px auto;padding:18px;font-family:Arial,"Noto Sans Arabic",sans-serif;color:#28205e}.cp-head{text-align:center;margin-bottom:18px}.cp-head h2{margin:0 0 6px;font-size:28px}.cp-head p{margin:0;color:#6e6788}.cp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.cp-card{border:2px solid transparent;background:#fff;border-radius:18px;padding:8px;box-shadow:0 5px 18px #40208018;cursor:pointer;text-align:center;transition:.18s}.cp-card:hover,.cp-card.active{border-color:#8a4de8;transform:translateY(-2px)}.cp-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:13px;display:block;margin-bottom:8px}.cp-card span{font-weight:700;font-size:14px}.cp-controls{margin:18px 0;padding:14px;background:#fff;border-radius:18px;box-shadow:0 5px 18px #40208018;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cp-selected{display:flex;align-items:center;gap:10px;margin-left:auto}.cp-selected img{width:52px;height:52px;object-fit:cover;border-radius:10px}.cp-controls label{font-weight:700}.cp-controls select,.cp-controls button,.cp-win button{border:0;border-radius:12px;padding:11px 14px;font-weight:800;cursor:pointer;background:#7139d8;color:#fff}.cp-controls select{background:#fff;color:#28205e;border:1px solid #ddd}.cp-controls .secondary,.secondary{background:#f0ebff!important;color:#50319b!important}.cp-empty{padding:25px;text-align:center;background:#fff;border-radius:18px}.cp-game{text-align:center}.cp-board-wrap{display:flex;justify-content:center;margin:10px 0}.cp-board{position:relative;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 10px 30px #3920782a}.cp-board>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.10;pointer-events:none}.cp-piece{position:absolute;left:0;top:0;touch-action:none;cursor:grab;filter:drop-shadow(0 3px 4px #0002);will-change:transform}.cp-piece.drag{cursor:grabbing;filter:drop-shadow(0 9px 12px #0003);z-index:1000}.cp-frame{position:absolute;inset:0;border:7px solid #7d46e7;border-radius:18px;pointer-events:none}.cp-tray-title{font-weight:800;margin:18px 0 8px}.cp-tray{position:relative;min-height:220px;background:linear-gradient(135deg,#fff,#f5f0ff);border:2px dashed #c8b7ef;border-radius:18px;overflow:auto;padding:10px;display:block}.cp-tray .cp-piece{position:absolute;display:block;box-sizing:border-box;visibility:visible!important;opacity:1!important}.cp-tray canvas{display:block;visibility:visible!important;opacity:1!important}.cp-status{min-height:25px;text-align:center;font-weight:800;margin:10px}.cp-win{position:absolute;left:50%;transform:translateX(-50%);margin-top:-50%;background:#ffffffed;padding:24px 30px;border-radius:20px;box-shadow:0 10px 30px #0002;z-index:20}.cp-win b{display:block;font-size:28px;color:#7139d8}.cp-win span{display:block;margin:8px 0 14px}@media(max-width:600px){.colorly-puzzle-app{padding:10px}.cp-head h2{font-size:22px}.cp-controls{justify-content:center}.cp-selected{width:100%;justify-content:center}.cp-tray{min-height:240px}.cp-card{border-radius:14px}}

.cp-piece, .cp-piece canvas{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
/* v2.2: tray pieces are always visible and have no clipping/opacity inherited from the page */
.colorly-puzzle-app .cp-tray{position:relative!important;overflow:auto!important;min-height:240px!important;isolation:isolate}
.colorly-puzzle-app .cp-tray .cp-piece{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.colorly-puzzle-app .cp-tray .cp-piece canvas{display:block!important;visibility:visible!important;opacity:1!important}