.artist-journey{position:fixed;z-index:22;left:50%;top:14px;transform:translateX(-50%);width:min(440px,calc(100vw - 230px));padding:9px 16px;border:1px solid #c9bea6;border-radius:17px;background:#fffcf5ed;box-shadow:0 4px 20px #392d1810;color:#615745;text-align:center;font-family:system-ui;box-sizing:border-box}
.artist-steps{display:flex;justify-content:center;gap:13px;font:11px system-ui;color:#918674}.artist-steps strong{color:#926328}.artist-journey p{font:12px/1.4 system-ui;margin:5px 0 0}.artist-journey button{border:0;background:transparent;color:#806237;text-decoration:underline;font:11px system-ui;padding:5px 7px;min-height:30px}.artist-journey[hidden]{display:none!important}
.player[data-art-phase=drawing] #board{cursor:url('./pencil-cursor.svg') 3 29,crosshair!important}
.player[data-art-phase=drawing] .paint-bonus-chip,.player[data-art-phase=drawing] #color-tray,.player[data-art-phase=drawing] #palette-toggle,.player[data-art-phase=drawing] #studio-panel,.player[data-art-phase=drawing] #tools-toggle,.player[data-art-phase=drawing] .paint-quick-actions{display:none!important}
.player[data-art-phase=drawing] .artist-journey{width:min(460px,calc(100vw - 120px))}
.player[data-art-phase=painting] .artist-journey{padding:9px 13px;width:auto;max-width:calc(100vw - 240px)}
.player[data-art-phase=painting] .artist-journey p,.player[data-art-phase=painting] .artist-journey button{display:none}
.artist-mixing{border-top:1px solid #d4c5a5;padding-top:12px;margin-top:8px;color:#66573f}.artist-mixing-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.artist-mixing-heading b{font:700 17px Georgia}.artist-mixing-heading small{font:10px system-ui;text-align:right;max-width:160px}
.artist-wood{position:relative;display:flex;justify-content:center;align-items:center;gap:14px;margin:12px 4px 8px;padding:14px 17px 14px 37px;border-radius:45% 38% 44% 40%;border:1px solid #b88950;background:repeating-linear-gradient(3deg,#ffffff00 0 7px,#895d2714 8px 9px),linear-gradient(130deg,#e6be7d,#c99353 50%,#e0b574);box-shadow:inset 0 2px 4px #fff5d799,0 4px 8px #76592e16;isolation:isolate}
.artist-wood>span{font:19px Georgia;color:#6f4d2b}.artist-wood button{flex:none;border-radius:45% 55% 48% 52%;border:2px solid #fff8dc;outline:1px solid #a47843;width:48px;height:48px;min-height:44px;background:var(--well-color,#eadbb8);color:#5b4226;font:700 18px system-ui;box-shadow:inset 0 2px 6px #52371633,0 2px 2px #fff2cf66;touch-action:none}
.artist-wood button[aria-pressed=true]{outline:3px solid #537f76}.artist-wood .artist-mix-result{width:61px;height:61px;color:#fff;text-shadow:0 1px 3px #000;box-shadow:inset 0 2px 7px #392d2255,0 0 0 4px #ffefce44}.artist-wood button:disabled{opacity:.7}
.artist-mix-note{font:10px/1.5 system-ui;margin:6px 0 0;min-height:30px;color:#7c705c;max-width:430px}.artist-pigment-drag{position:fixed;width:35px;height:35px;border-radius:50%;z-index:150;pointer-events:none;transform:translate(-50%,-50%);border:3px solid white;box-shadow:0 4px 15px #0005}
.player .color-tray .swatch{touch-action:none}.color-tray .palette{scrollbar-width:none}.color-tray .palette::-webkit-scrollbar{display:none}
@media(max-width:760px){.artist-journey{top:63px;width:calc(100vw - 30px)!important;max-width:calc(100vw - 30px)!important;padding:8px 12px}.artist-journey p{font-size:11px}.artist-steps{font-size:10px;gap:10px}.player[data-art-phase=painting] .artist-journey{top:12px;width:auto!important;max-width:calc(100vw - 185px)!important;left:60px;transform:none}.player[data-art-phase=painting] .artist-steps{font-size:8px;gap:7px}.artist-mixing-heading b{font-size:15px}.artist-mixing-heading small{font-size:9px;max-width:130px}.artist-wood{gap:12px}.artist-wood button{width:44px;height:44px}.artist-wood .artist-mix-result{width:52px;height:52px}}
@media(max-height:600px){.artist-journey{top:8px!important}.artist-journey p{display:none}.artist-journey button{min-height:24px}.artist-mixing{padding-top:7px;margin-top:3px}.artist-wood{margin:7px 3px;padding-top:7px;padding-bottom:7px}.artist-mix-note{min-height:0;font-size:9px}.artist-mixing-heading small{display:none}}

.artist-mixing summary{cursor:pointer;list-style:none;min-height:24px}.artist-mixing summary::-webkit-details-marker{display:none}.artist-mixing summary::after{content:'⌄';color:#8d724f}.artist-mixing[open] summary::after{content:'⌃'}
@media(max-height:600px){.player .color-tray{max-height:calc(100dvh - 24px)!important;padding:8px 12px!important}.player .color-tray .palette{height:88px;padding-top:5px;padding-bottom:27px}.player .color-tray .swatch{width:44px;height:44px;min-width:44px;font-size:21px}.player .color-tray .swatch small.swatch-count{font-size:12px;bottom:-24px;padding:3px}.color-tray:has(.artist-mixing[open]) .color-purchase{display:none}.artist-mix-note{font-size:9px;margin-bottom:0}.artist-mixing-heading b{font-size:15px}}

/* The wood is a genuine transparent bitmap; paint remains interactive. */
.artist-wood{display:block;aspect-ratio:3/2;min-height:190px;padding:0;margin:9px 0 0;border:0;border-radius:0;background:transparent url('design/artist-palette-real.png') center/contain no-repeat;box-shadow:none}.artist-wood::before{display:none}.artist-wood button{position:absolute;left:38%;top:30%;transform:translate(-50%,-50%);width:43px;height:43px;border:0;outline:0;background:radial-gradient(ellipse at 32% 22%,#fff6,transparent 40%),var(--well-color,#f0d6a766);box-shadow:inset 1px 2px 2px #fff5,2px 4px 4px #65431e44;border-radius:42% 58% 52% 48%;color:#846337;font-size:20px;touch-action:none}.artist-wood button[data-well="1"]{left:68%}.artist-wood button[aria-pressed=true]{outline:2px dashed #3f8177;outline-offset:4px}.artist-wood .has-paint{color:transparent}.artist-wood .artist-mix-result{left:55%;top:65%;width:83px;height:61px;min-height:52px;border:0;outline:0;border-radius:45% 55% 48% 52%;box-shadow:inset 2px 2px 3px #fff6,3px 5px 4px #553a2255;background:radial-gradient(ellipse at 32% 22%,#fff5,transparent 50%),var(--well-color,#f0d6a777);display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px}.artist-mix-result i{font-style:normal;font-size:19px}.artist-wood .artist-mix-clear{left:86%;top:70%;width:32px;height:32px;min-height:32px;background:#fff7dbdd;color:#75593b;font-size:22px;border-radius:50%;box-shadow:0 2px 6px #50371a33}.artist-wood .pigment-plop{animation:pigment-plop .4s ease-out}@keyframes pigment-plop{0%{transform:translate(-50%,-50%) scale(.82) rotate(-7deg)}65%{transform:translate(-50%,-50%) scale(1.1) rotate(4deg)}100%{transform:translate(-50%,-50%) scale(1)}}
@media(max-height:600px){.artist-wood{aspect-ratio:3/1.5;min-height:120px;max-height:155px}.artist-wood button{width:35px;height:35px;min-height:35px}.artist-wood .artist-mix-result{width:67px;height:50px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.artist-wood .pigment-plop{animation:none}}

/* A freestanding wooden tool, without a surrounding popup or extra colour box. */
.player .artist-palette-only{width:min(366px,calc(100vw - 24px));padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;overflow:visible}
.artist-palette-only .floating-panel-head{border:0;margin:0 8px -2px;padding:0;gap:5px;position:relative;z-index:2}
.artist-palette-only .floating-panel-handle{flex:1;min-width:0;min-height:34px;padding:4px 9px;border-radius:18px;background:#fff8e4db;font-size:12px}
.artist-palette-only .floating-panel-close{width:32px;height:32px;min-height:32px;background:#fff8e4db}
.artist-palette-only .tray-heading,.artist-palette-only #artist-balance{display:none}
.artist-palette-only .artist-mixing{border:0;margin:0;padding:0}
.artist-palette-only .artist-wood{height:auto;min-height:0;max-height:none;aspect-ratio:3/2;margin:0;filter:drop-shadow(3px 8px 6px #37271225)}
.player .artist-palette-only .palette{position:absolute;left:10%;top:12%;width:80%;height:87px;padding:7px 5px 29px;box-sizing:border-box;display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:flex-start;touch-action:none;scroll-behavior:smooth}
.player .artist-palette-only .palette .swatch{position:relative;left:auto;top:auto;transform:none;width:48px;height:48px;min-width:48px;min-height:48px;font:800 25px/1 system-ui;color:var(--swatch-ink);background:radial-gradient(ellipse at 30% 20%,#fff5,transparent 50%),var(--swatch);border:1px solid #0002;outline-offset:2px;touch-action:none;box-shadow:inset 2px 2px 3px #fff5,2px 4px 3px #4b301d44}
.player .artist-palette-only .palette .swatch small.swatch-count{position:absolute;bottom:-25px;left:50%;width:54px;transform:translateX(-50%);padding:3px 0;background:#fff5d4e8;border:0;border-radius:9px;font:800 14px/1.1 system-ui;color:#3f3427;text-shadow:none}
.artist-palette-only .artist-wood [data-well]{top:53%;width:43px;height:43px;min-height:43px}
.artist-palette-only .artist-wood .artist-mix-result{top:79%;left:54%;width:78px;height:54px;min-height:48px}
.artist-palette-only .artist-wood .artist-mix-clear{top:80%;left:86%;width:34px;height:34px;min-height:34px}
.artist-free-picker{position:absolute;left:8%;top:38%;width:47px;height:47px;cursor:pointer;background:conic-gradient(#f06b58,#f3d058,#74ae6e,#528ed1,#bc76be,#f06b58);border-radius:45% 55% 48% 52%;box-shadow:inset 1px 2px 3px #fff8,2px 4px 3px #65431e55;border:2px solid #fff6dc;box-sizing:border-box}
.artist-free-picker input{position:absolute;inset:7px;width:29px;height:29px;padding:0;border:0;opacity:0;cursor:pointer}.artist-free-picker:focus-within{outline:3px solid #407b74;outline-offset:3px}
.artist-free-picker::before{content:'＋';position:absolute;inset:7px;border-radius:50%;background:var(--own-pigment,#fff6dd);color:#fff;text-shadow:0 1px 3px #0009;text-align:center;font:700 24px/29px system-ui}
.artist-free-picker span{position:absolute;top:47px;left:-7px;width:61px;text-align:center;font:700 9px/1.2 system-ui;color:#4f3c27;background:#fff1c9c9;border-radius:6px;padding:2px}
.artist-palette-only .artist-mix-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.artist-palette-only .color-purchase{justify-content:center;margin:-2px 0 0;font-size:10px}.artist-palette-only .color-purchase button{min-height:32px;padding:5px 12px;background:#fff7dfdc;font-size:10px;border-radius:18px}
.player .artist-palette-only.panel-dragging{box-shadow:none!important;filter:drop-shadow(0 9px 12px #62472e44)}
@media(max-height:450px){.player .artist-palette-only{width:320px}.artist-palette-only .floating-panel-handle{min-height:30px}.artist-palette-only .color-purchase{display:none}.player .artist-palette-only .palette{height:82px;top:10%;gap:17px}.player .artist-palette-only .palette .swatch{width:44px;height:44px;min-width:44px;min-height:44px;font-size:23px}.artist-palette-only .artist-wood [data-well]{width:40px;height:40px;min-height:40px}}

/* The artwork owns the screen; a small movable palette is the only colour tool. */
.player .artist-palette-only{width:min(336px,calc(100vw - 16px))}
.player .artist-palette-only .floating-panel-head{justify-content:flex-end;gap:2px;margin:0;padding:0;height:44px;pointer-events:none}
.player .artist-palette-only .floating-panel-head button{pointer-events:auto;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#fff7e4db;font-size:24px;display:grid;place-items:center}
.player .artist-palette-only .floating-panel-handle{margin-right:auto;text-align:center}
.player .artist-palette-only .palette-navigation{gap:2px}
.player .artist-palette-only .artist-wood{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.player .artist-palette-only.panel-dragging,.player .artist-palette-only.panel-dragging .artist-wood{cursor:grabbing}
.player .artist-palette-only .palette{top:10%;gap:17px;height:82px;padding-top:7px;padding-bottom:25px}
.player .artist-palette-only .artist-wood [data-well]{top:57%;width:44px;height:44px;min-height:44px}
.player .artist-palette-only .artist-mix-result{top:80%;width:78px;height:50px;min-height:50px;isolation:isolate;overflow:hidden}
.artist-mix-result>span{position:relative;z-index:1;pointer-events:none}
.artist-mix-result[data-drops]::before{content:'';position:absolute;inset:-10px;pointer-events:none;background:conic-gradient(from 0deg,transparent 10%,var(--mix-first) 18%,transparent 32%,var(--mix-last) 50%,transparent 65%,var(--well-color) 85%);opacity:0;animation:artist-stir .65s ease-out}
.artist-mix-result.pigment-plop::before{animation:artist-stir .65s ease-out}
@keyframes artist-stir{0%{transform:rotate(-70deg) scale(1.4);opacity:.85}80%{opacity:.4}100%{transform:rotate(240deg) scale(.8);opacity:0}}
.artist-wood>.artist-mix-caption{position:absolute;left:54%;top:92%;transform:translateX(-50%);padding:2px 5px;white-space:nowrap;font:600 10px/1.2 system-ui;color:#59422c;background:#fff0cdcc;border-radius:6px;pointer-events:none}
.player .peek-colors{width:48px;height:48px;min-height:48px;padding:0!important;border-radius:50%;font-size:0;display:grid;place-items:center}
.player .peek-colors::before{width:28px;height:28px;margin:0;border-radius:45%;box-shadow:inset 2px 2px 3px #fff8,0 0 0 3px #fff7df;background:var(--selected-swatch)}
.player .peek-colors[aria-expanded=true]{display:none}
.player .studio-panel .color-purchase{display:flex;flex-wrap:wrap;gap:7px;padding:7px 0 10px;margin:0}
.player .studio-panel .color-purchase button{min-height:40px;border:1px solid #d8cab3;border-radius:10px;background:#fcf7ec;color:#6e604d;padding:7px 10px;font:600 12px system-ui}
.player .studio-panel .color-purchase span{font:600 11px system-ui}
@media(max-height:450px){.player .artist-palette-only{width:300px}.player .artist-palette-only .artist-wood [data-well]{top:60%}.player .artist-palette-only .artist-mix-result{top:83%}.artist-mix-caption{top:95%}}
@media(prefers-reduced-motion:reduce){.artist-mix-result[data-drops]::before{animation:none}}
