/* Game-specific surface and tools. The shared page.css is unchanged. */
.atelier{position:relative;max-width:100%;margin:0 auto;--active-color:#d9ad46}
.motif-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 1px 8px;color:var(--gold-soft);font:15px Georgia,serif}
.motif-strip span{min-width:0}.motif-strip time{font:12px Arial,sans-serif;color:var(--muted)}
.canvas-window{position:relative;width:100%;aspect-ratio:2/3;max-height:calc(100svh - 245px);min-height:280px;overflow:hidden;border:1px solid #a78b51;border-radius:15px;background:transparent;touch-action:none;isolation:isolate}
#painting{position:absolute;top:0;left:0;transform-origin:0 0;touch-action:none;cursor:crosshair;display:block}
.zoom-tools{position:absolute;right:9px;bottom:9px;display:flex;align-items:center;gap:0;border:1px solid #b89a5a;border-radius:25px;background:#0b1018ed;color:var(--ivory);box-shadow:0 2px 12px #0005;z-index:3}
.zoom-tools button{min-width:40px;height:40px;border:0;background:transparent;color:inherit;font-size:22px;cursor:pointer;border-radius:50%}
.zoom-tools button#zoom-reset{font-size:12px;min-width:48px}
.tool-dock{position:relative;margin-top:8px}
.tool-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.tool-button{position:relative;display:grid;place-items:center;min-height:48px;border:1px solid #6f5b31;border-radius:12px;background:linear-gradient(150deg,#222937,#0c111a);color:#eed596;cursor:pointer}
.tool-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tool-button[aria-expanded=true],.tool-button[aria-pressed=true]{border-color:#f1d590;box-shadow:inset 0 0 0 1px #e9c87a}
.tool-button:disabled{opacity:.35;cursor:default}
.color-indicator{position:absolute;bottom:4px;right:5px;width:11px;height:11px;border-radius:50%;background:var(--active-color);border:1px solid #fff}
.color-button{background:conic-gradient(#c66768,#d7b457,#7c9b66,#5c8f9d,#9b7eac,#c66768);border:6px solid #141b26}
.color-button::before{content:'';width:25px;height:25px;border-radius:50%;background:var(--active-color);border:2px solid #f8edd0}
.tool-caption{display:flex;justify-content:space-between;gap:12px;margin:7px 2px 0;color:var(--muted);font-size:11px;min-height:15px}
.palette-panel{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:8;border:1px solid #a7894d;border-radius:16px;padding:13px;background:#101722fa;box-shadow:0 -12px 40px #0007;backdrop-filter:blur(16px)}
.palette-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px;color:var(--gold-light)}
.palette-top button{width:36px;height:36px;background:transparent;color:var(--ivory);border:1px solid var(--line);border-radius:50%;cursor:pointer}
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.swatch{width:100%;aspect-ratio:1;border:2px solid #ffffff40;border-radius:50%;background:var(--swatch);min-height:36px;position:relative;cursor:pointer}
.swatch[aria-pressed=true]{outline:2px solid #f8d989;outline-offset:2px}
.swatch[aria-pressed=true]::after{content:'✓';display:grid;place-items:center;position:absolute;inset:0;color:#fff;text-shadow:0 1px 3px #000;font-size:22px;font-weight:700}
.precision-lens{position:absolute;width:106px;height:106px;border-radius:50%;border:2px solid #f1cf7b;z-index:5;pointer-events:none;box-shadow:0 4px 22px #0009;background:#fff}
.aim{position:absolute;width:26px;height:26px;border:2px solid #151515;border-radius:50%;box-shadow:0 0 0 1px white;transform:translate(-50%,-50%);z-index:4;pointer-events:none}
.aim::before,.aim::after{content:'';position:absolute;background:#151515;box-shadow:0 0 0 1px #fff8}
.aim::before{width:2px;height:34px;left:10px;top:-6px}.aim::after{height:2px;width:34px;top:10px;left:-6px}
.atelier-notice{padding:12px 0;font-size:13px;color:var(--gold-light);line-height:1.5}.atelier-notice:empty{display:none}
.atelier-loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:15px;padding:25px;background:#eeeae0;color:#37342b;z-index:6;font:16px Georgia,serif}
.atelier-loading button{border:1px solid #78602c;border-radius:8px;padding:10px;background:#e5d3a4;color:#282218}
.atelier-file{display:grid;gap:12px;margin-top:14px}.atelier-file a{display:block;text-align:center}
.atelier-help{line-height:1.6}.atelier-help p{margin:10px 0}.atelier-hex{display:flex;align-items:center;gap:12px;padding:16px 0}.atelier-hex input{height:52px;width:80px;padding:3px;border:1px solid var(--line);border-radius:8px;background:#111}
.atelier-toast{position:fixed;z-index:100;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);background:#182131;border:1px solid #b4995c;border-radius:12px;padding:12px 18px;color:var(--ivory);font-size:14px;text-align:center;pointer-events:none}
.atelier-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.preview-capture .game-sitebar,.preview-capture .zoom-tools,.preview-capture .tool-dock,.preview-capture .motif-strip,.preview-capture .play-secondary{display:none!important}
.preview-capture .canvas-window{max-height:none;min-height:0}
.preview-capture .game-shell{min-height:0;padding:10px}
@media(pointer:coarse) and (orientation:portrait) and (min-width:600px){.canvas-window{max-height:calc(100svh - 265px);min-height:520px}.tool-button{min-height:58px}.motif-strip{font-size:19px}.swatches{gap:16px}.swatch{max-width:65px;justify-self:center}}
@media(prefers-reduced-motion:reduce){.atelier *{scroll-behavior:auto;transition:none}}

.atelier-timer{display:block;text-align:right;margin-bottom:6px;color:var(--muted);font-size:12px}
.atelier-timer[hidden]{display:none}
.brush-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 22px}
.brush-choice{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#151d29;color:var(--ivory);font:inherit;text-align:left;cursor:pointer}
.brush-choice[aria-pressed=true]{border-color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold-light)}
.brush-choice>span:first-child{flex-shrink:0;width:28px;text-align:center;color:var(--gold-light);font-size:26px}
.brush-choice .brush-sample{display:block;height:4px;background:var(--gold-light);border-radius:100%}
.brush-choice .brush-sample.medium{height:10px}.brush-choice .brush-sample.broad{height:18px}
#brush-dialog input[type=range]{width:100%;min-height:44px;accent-color:var(--gold-light)}

.palette-panel{max-height:min(65svh,560px);overflow-y:auto}
.palette-heading{font-size:14px;margin:14px 0 10px;color:var(--gold-light)}
.favorites-empty{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.custom-color-controls{display:grid;gap:8px;margin:16px 0}
.color-square{position:relative;height:170px;border-radius:12px;border:1px solid #ffffff40;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue,#ffbf00);touch-action:none;cursor:crosshair}
#color-point{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}
.color-range{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:8px;font-size:14px;color:var(--ivory)}
.color-range input{width:100%;min-width:0;min-height:36px;accent-color:var(--gold-light)}
#color-hue{accent-color:auto}
.color-value-row{display:flex;align-items:center;gap:12px;margin-top:4px}
#color-preview{width:44px;height:44px;border:1px solid #ffffff80;border-radius:10px;flex-shrink:0}
.hex-field{display:grid;gap:4px;flex:1;min-width:0;font-size:12px;color:var(--muted)}
.hex-field input{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:#101722;color:var(--ivory);font-size:16px}
.favorite-color{width:48px;height:48px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;background:#151d29;color:var(--gold-light);font-size:30px;cursor:pointer}
.favorite-color[aria-pressed=true]{border-color:var(--gold-light)}
#color-dialog>#apply-color{width:100%;margin-top:8px}

.zoom-tools[data-corner="top-left"]{top:9px;left:9px;right:auto;bottom:auto}
.zoom-tools[data-corner="top-right"]{top:9px;right:9px;left:auto;bottom:auto}
.zoom-tools[data-corner="bottom-left"]{bottom:9px;left:9px;right:auto;top:auto}
.zoom-tools[data-corner="bottom-right"]{bottom:9px;right:9px;left:auto;top:auto}
.zoom-position-picker{margin:20px 0 0;padding:0;border:0;min-width:0}
.zoom-position-picker legend{font-size:15px;color:var(--gold-light);margin-bottom:12px}
.zoom-position-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zoom-position-grid label{display:flex;align-items:center;gap:8px;min-height:50px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#151d29;color:var(--ivory);font-size:14px;cursor:pointer}
.zoom-position-grid label:has(input:checked){border-color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold-light)}
.zoom-position-grid input{margin:0;accent-color:var(--gold-light);flex-shrink:0}
.zoom-position-grid label>span[aria-hidden]{color:var(--gold-light);font-size:22px}

.motif-picker{border:0;padding:0;margin:18px 0;min-width:0}.motif-picker legend{color:var(--gold-light);font-size:15px;margin-bottom:12px}
.motif-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.motif-choice{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#151d29;color:var(--ivory);font:inherit;text-align:left;cursor:pointer}
.motif-choice img{display:block;width:100%;aspect-ratio:2/3;object-fit:contain;background:#fff;max-height:185px}.motif-choice span{display:block;padding:10px;font-size:13px;line-height:1.4}
.motif-choice[aria-pressed=true]{border-color:var(--gold-light);box-shadow:0 0 0 2px var(--gold-light)}
.motif-save-note{font-size:13px;line-height:1.6;color:var(--muted)}

.palette-selector{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px;font-size:14px;color:var(--gold-light)}
.palette-selector select{min-height:44px;min-width:0;max-width:65%;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#151d29;color:var(--ivory);font:inherit}

.color-mode-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0}
.color-mode-switch button{min-height:44px;padding:8px 4px;background:#151d29;color:var(--ivory);border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;cursor:pointer}
.color-mode-switch button[aria-pressed=true]{border-color:var(--gold-light);color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold-light)}
#hsv-controls,.rgb-controls{display:grid;gap:8px}
.color-wheel{position:relative;width:min(100%,220px);aspect-ratio:1;margin:0 auto 4px;border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none;cursor:crosshair}
#wheel-point{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}
.rgb-controls .color-range{grid-template-columns:44px minmax(0,1fr) 30px}.rgb-controls output{text-align:right;font-size:13px}
#color-red{accent-color:#db7474}#color-green{accent-color:#86b57d}#color-blue{accent-color:#86a4cf}
#hsv-controls[hidden],.rgb-controls[hidden],.color-wheel[hidden],.color-square[hidden]{display:none}

/* Guidance outlines preserve the original canvas brightness. */
.atelier-demo-focus{outline:2px solid var(--gold,#d9ad46);outline-offset:3px}
dialog .demo-bar{position:sticky;top:0;z-index:3;margin-block:10px}

/* Farbatelier needs readable step instructions alongside its visual demonstration. */
#demo-bar small{display:block!important;font-size:13px;line-height:1.4}
#demo-bar>span{min-width:0}