.player .canvas-wrap{background-color:#d6c5ab;background-image:radial-gradient(ellipse at 20% 70%,#fffaf288,transparent 60%),repeating-linear-gradient(90deg,#8d755508 0 1px,transparent 1px 7px);border:0}
.player .color-tray{background:#fff9eaf7;border-bottom:1px solid #c5ae86}
.player .color-tray .swatch{border-radius:40% 48% 43% 46%;box-shadow:inset 2px 2px 3px #ffffff70,inset -2px -3px 4px #0002,0 2px 4px #59452c20;border:1px solid #0002}
.player .color-tray .swatch.active{outline-color:#7c5940;outline-width:2px}
.player .tray-heading{font:600 12px system-ui;color:#6e5941}
.artist-brush{display:none;position:absolute;width:56px;height:80px;z-index:9;pointer-events:none;transform-origin:6px 76px;filter:drop-shadow(3px 4px 2px #46322645)}
.artist-brush svg{width:100%;height:100%}.artist-brush.painting-dab{display:block;animation:brush-dab .65s ease-out forwards}
@keyframes brush-dab{0%{opacity:1;transform:translate(-5px,-75px) rotate(-12deg)}40%{opacity:1;transform:translate(12px,-70px) rotate(8deg)}75%{opacity:1;transform:translate(3px,-74px) rotate(-7deg)}100%{opacity:0;transform:translate(13px,-90px) rotate(-12deg)}}
.paint-bonus-chip{position:absolute;top:75px;left:16px;display:flex;align-items:center;gap:10px;max-width:240px;padding:9px 14px;border:1px solid #d2bd99;border-radius:18px;background:#fff9e9ed;box-shadow:0 3px 15px #624b3020;color:#655239;pointer-events:none;font:600 12px system-ui}
.paint-bonus-chip[hidden]{display:none}.paint-bonus-chip i{width:23px;height:23px;background:var(--bonus-color);border-radius:42% 48%;border:1px solid #0002;box-shadow:inset 1px 2px 2px #fff6}.paint-bonus-chip small{display:block;font:11px system-ui;margin-top:3px;color:#8a6b43}.paint-bonus-chip[data-expired=true]{opacity:.8}
@media(max-width:760px){.paint-bonus-chip{top:auto;left:50%;transform:translateX(-50%);bottom:63px;max-width:calc(100% - 32px);padding:7px 11px;font-size:11px;gap:8px}.paint-bonus-chip small{font-size:10px}.paint-bonus-chip i{width:20px;height:20px}.artist-brush{width:45px;height:66px}}
@media(prefers-reduced-motion:reduce){.artist-brush{display:none!important}}
body.dark .player .canvas-wrap{background-color:#635a48;background-image:repeating-linear-gradient(90deg,#fff1 0 1px,transparent 1px 7px)}

/* Paint controls float above the canvas; showing them never resizes the picture. */
.player .player-header,.player .progress-track{display:none!important}
.player .peek-back{display:block!important}
.player .studio{display:block;position:relative}
.player .canvas-wrap{position:absolute;inset:0}
.player .color-tray,.player .studio-panel{position:absolute!important;z-index:10;margin:0!important;width:min(420px,calc(100vw - 24px));box-sizing:border-box;max-height:calc(100dvh - 95px);overflow:auto;padding:12px 16px 16px!important;border:1px solid #cbb69d!important;border-radius:22px;background:linear-gradient(145deg,#fffaf0,#f8f1e2)!important;box-shadow:0 10px 35px #62472e30;backdrop-filter:none;color:#675340}
.player .studio-panel{display:block!important}
.player .color-tray{left:14px;top:72px}.player .studio-panel{left:calc(100% - 434px);top:72px}
.player .floating-paint-panel[hidden]{display:none!important}
.floating-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-2px 0 10px;border-bottom:1px solid #d7c4aa;padding-bottom:8px}
.floating-panel-handle{flex:1;min-height:40px;text-align:left;border:0;background:transparent;color:#655443;font:700 15px system-ui;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.floating-panel-close{width:36px;min-height:36px;border:1px solid #decab0;border-radius:50%;background:#fffdf6;color:#755743;font:24px system-ui;touch-action:manipulation}
.panel-dragging{box-shadow:0 15px 45px #62472e55!important}.panel-dragging .floating-panel-handle{cursor:grabbing}
.player .studio-panel .tools{margin:5px 0 12px}.player .studio-panel .action-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.player .studio-panel .toggle{display:flex;margin:10px 0 0;font-size:12px}.player .studio-panel .studio-tip{font:12px/1.55 system-ui;margin:12px 0 0}.player .studio-panel .zoom-tools{display:flex}
.paint-quick-actions{position:absolute;left:12px;bottom:12px;z-index:8;display:flex;gap:8px}.paint-quick-actions button{min-height:42px;border:1px solid #cfb994;border-radius:18px;background:#fff9eced;color:#69513c;padding:9px 13px;font:600 12px system-ui;box-shadow:0 3px 12px #80633520;touch-action:manipulation}.paint-quick-actions button[aria-pressed=true]{background:#426f6b;color:#fff9ef;border-color:#426f6b}
.player .zoom-tools{bottom:65px}
@media(max-width:760px){.player .color-tray,.player .studio-panel{width:calc(100vw - 24px);max-height:calc(100dvh - 130px);padding:10px 13px 14px!important;border-radius:19px}.floating-panel-handle{font-size:14px}.paint-quick-actions{left:8px;bottom:12px;gap:5px}.paint-quick-actions button{font-size:10px;padding:8px 10px}.player .color-tray .color-purchase{flex-wrap:wrap}.player .color-tray .palette{height:74px}.paint-bonus-chip{bottom:70px}.player .studio-panel .action-tools button{font-size:11px;min-height:39px}}

/* Large colour IDs with an independent, readable remaining-area label for touch devices. */
.player .color-tray .palette{height:112px;gap:25px;padding:12px 10px 38px;align-items:flex-start}
.player .color-tray .swatch{width:56px;height:56px;min-width:56px;flex:none;font-size:25px;font-weight:800;line-height:1;touch-action:pan-x}
.player .color-tray .swatch small.swatch-count{left:50%;right:auto;bottom:-30px;transform:translateX(-50%);width:78px;padding:4px 3px;background:#fffaf0;border:1px solid #dbc6a8;border-radius:9px;color:#4d4438;font:700 15px/1.15 system-ui;white-space:nowrap;text-align:center}
.player .color-tray .swatch.completed{opacity:1;filter:saturate(.5)}
.player .color-tray .swatch.completed small.swatch-count{background:#eaf2e0;color:#3e6140;border-color:#b7cba3}