/* Drawing workspace only. The gallery and create dialog retain the shared theme. */
.studio-page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.studio-header{height:56px;min-height:56px;padding:0 18px;gap:20px;background:#fafaf6;z-index:5}
.studio-header .brand{font-size:21px;letter-spacing:-.8px;flex-shrink:0;gap:10px}
.studio-header .brand-mark{grid-template-columns:7px 7px;gap:3px}.studio-header .brand-mark i{height:7px}
.header-divider{height:20px;width:1px;background:var(--line);flex-shrink:0}
.studio-header h1,.studio-header .header-title{font-size:14px;font-weight:500;letter-spacing:0;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.studio-actions .status{margin-right:12px;font-size:11px}
.studio-link{color:var(--muted);font-size:12px;text-decoration:none;padding:8px}.studio-link:hover{color:var(--orange)}
.studio-actions .account-link{display:inline-flex;white-space:nowrap}
.studio-page .icon-button{width:32px;height:32px;display:grid;place-items:center;padding:0;flex-shrink:0;font-size:19px;background:transparent;border-color:transparent}
.studio-page .icon-button:hover{background:#e9ebe2}
#settings svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.palette-toggle{display:flex;align-items:center;gap:8px;font-size:12px;height:33px;padding:0 11px;background:#fffef9}
.palette-toggle[aria-expanded=true]{background:#edf0e6;border-color:#cbd2be}
#active-color-dot{width:12px;height:12px;border-radius:3px;background:#ef4444;border:1px solid #0002}
.studio-main{display:flex;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0;gap:0;position:relative}
.studio-workspace{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#e9ebe2}
.studio-page #viewport{height:auto;min-height:0;flex:1;width:100%}
.studio-page #canvas{position:absolute;inset:0}
.studio-page .overlay{z-index:2}
.studio-page #toast{z-index:3;bottom:20px}
.pixel-cooldown{position:absolute;left:12px;bottom:8px;z-index:2;display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #c4cbb8;border-radius:8px;background:#fafaf6f5;color:#416331;font-size:12px;pointer-events:none}
.pixel-cooldown[hidden]{display:none}.pixel-cooldown>span{font-size:10px;color:#747d6d}.pixel-cooldown strong{min-width:83px;text-align:right;font-variant-numeric:tabular-nums}.pixel-cooldown.waiting{color:#a84423;border-color:#ecc5b0}
.pixel-cooldown.timed-out{max-width:calc(100% - 24px);flex-wrap:wrap;gap:5px 10px;overflow-wrap:anywhere}.pixel-cooldown.timed-out #timeout-reason{flex-basis:100%;font-size:12px;color:inherit}
.tool-rail{position:absolute;top:16px;left:16px;z-index:1;display:flex;flex-direction:column;gap:3px;padding:5px;background:#fafaf6f5;border:1px solid #d6dacb;border-radius:10px;box-shadow:0 3px 14px #26341d0d}
.tool-rail button{width:38px;height:38px;border-color:transparent;padding:9px;display:grid;place-items:center;font-size:22px;border-radius:6px}
.tool-rail button:hover{background:#e9ebe2}.tool-rail button.active,.tool-rail button[aria-pressed=true]{background:#f6e1d6;color:#b94e29;border-color:#ecc5b0}
.tool-rail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail-divider{height:1px;background:var(--line);margin:4px 6px}
.mobile-brush,.shortcut-list .mobile-brush-help{display:none}
.mobile-brush{touch-action:none;position:absolute;left:50%;bottom:calc(44px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1;align-items:center;justify-content:center;gap:9px;min-width:128px;min-height:46px;padding:10px 18px;border:1px solid #c4cbb8;border-radius:24px;background:#fafaf6;box-shadow:0 3px 14px #26341d20;font-size:14px;font-weight:600;touch-action:manipulation}
.mobile-brush>span:first-child{font-size:21px}
.mobile-brush[aria-pressed=true],.mobile-brush[aria-pressed=true]:hover{background:var(--orange);border-color:var(--orange);color:#fff}
@media(any-pointer:coarse),(max-width:800px){.mobile-brush,.shortcut-list .mobile-brush-help{display:flex}}
.chat-panel{position:absolute;left:12px;top:12px;z-index:4;width:min(380px,calc(100% - 24px));height:min(var(--chat-height,330px),calc(100% - 52px));display:flex;flex-direction:column;background:#fafaf6;border:1px solid #d1d7c5;border-radius:10px;box-shadow:0 8px 35px #25341c26;overflow:hidden}
.chat-panel,.chat-toggle{font-family:"Noto Sans",Verdana,sans-serif;font-feature-settings:"ss01" 0}
.chat-content{display:flex;flex-direction:column;flex:1;min-height:0}
.chat-tabs{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.chat-tabs button{position:relative;flex:1;padding:6px 10px;font-size:12px}
.chat-tabs button[aria-pressed=true]{background:#f6e1d6;border-color:#ecc5b0;color:#943d20}
.chat-panel .panel-heading{padding:10px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.chat-heading{cursor:grab;touch-action:none;user-select:none}
.chat-heading.dragging{cursor:grabbing}
.chat-panel h2{font-size:14px;margin:0;letter-spacing:0;flex:1}
.chat-panel h2::before{content:"⠿";margin-right:8px;color:var(--muted)}
.chat-panel h2:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.chat-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;font-size:12px;line-height:1.7;scrollbar-width:thin}
.chat-message{margin:0;overflow-wrap:anywhere;white-space:pre-wrap;unicode-bidi:plaintext}
.chat-message time{color:var(--muted)}.chat-message bdi{font-weight:600;color:#a84423}
.chat-message a{color:#a84423;text-decoration:underline;text-underline-offset:2px}
.chat-message a:hover{color:#702b17}
.chat-count.over-limit{color:#a62f26;font-weight:600}
.chat-empty{margin:0;padding:0 12px 12px;font-size:12px;color:var(--muted)}
.chat-form{padding:10px 12px;border-top:1px solid var(--line);flex-shrink:0}
.chat-compose{display:flex;gap:7px}.chat-compose input{width:0;min-width:0;flex:1;font-family:inherit;font-feature-settings:inherit;font-size:16px;padding:8px;border:1px solid #d6dacb;border-radius:5px;background:#fffefb;color:inherit}
.chat-compose button{font-size:12px;background:var(--orange);border-color:var(--orange);color:#fff}
.chat-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-top:7px}
.chat-error{font-size:12px;color:#a62f26;margin:8px 0 0}
.chat-toggle{position:relative}
.chat-toggle.has-unread{background:#f6e1d6;border-color:#b94e29;color:#943d20;box-shadow:0 0 0 2px #ecc5b066}
.chat-unread{position:absolute;top:-7px;right:-7px;font-size:10px;line-height:14px;min-width:18px;padding:1px 4px;border:1px solid #fafaf6;border-radius:10px;text-align:center;color:#fff;background:#b94e29}
.color-panel{width:200px;min-width:200px;padding:0;display:flex;flex-direction:column;gap:0;background:#fafaf6;border-left:1px solid var(--line);z-index:3;min-height:0;overflow-y:auto}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.color-panel .panel-heading{padding:10px 12px 8px 17px;flex-shrink:0}.color-panel h2{font-size:17px;letter-spacing:-.2px;margin:0}.color-panel .panel-heading{align-items:center}

.personal-palette{padding:0 17px 12px;flex-shrink:0}
.palette-modes{display:flex;gap:6px;margin-bottom:7px}
.palette-modes button{flex:1;font-size:11px;padding:7px 4px}
.palette-modes button[aria-pressed=true],#palette-edit[aria-pressed=true]{background:#f6e1d6;border-color:#ecc5b0;color:#943d20}
#palette-edit{width:100%;font-size:11px;padding:7px}
#palette-edit-actions{display:flex;gap:6px;margin-top:7px}
#palette-edit-actions button{flex:1;font-size:11px;padding:6px}
#palette-personal-note{font-size:10px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.studio-page .swatch.palette-excluded{opacity:.4}
.studio-page .swatch.palette-excluded:hover{opacity:1}
.palette-filters{padding:0 17px 12px;display:grid;gap:8px;flex-shrink:0}
.palette-filters input,.palette-filters select{width:100%;min-width:0;font:11px Arial,Helvetica,sans-serif;color:inherit;background:#fffefb;border:1px solid #d6dacb;border-radius:5px;padding:9px 10px;height:34px}
.palette-filters input:focus-visible,.palette-filters select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.palette-scroll{flex:1;min-height:96px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bfc6b4 transparent;padding:5px 17px 16px}
.studio-page #palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.studio-page .swatch{width:100%;min-width:0;aspect-ratio:1;border-radius:3px;max-height:none;transition:transform .1s}
.studio-page .swatch[aria-pressed=true]{outline:2px solid #37432f;outline-offset:2px;z-index:1}
.studio-page .swatch:hover{transform:scale(1.13);z-index:2}
#palette-empty{font-size:12px;color:var(--muted);text-align:center;padding:24px 0}
.palette-hint{font-size:9px;color:var(--muted);line-height:1.6;margin:13px 17px 17px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.settings-dialog{width:min(560px,calc(100vw - 24px));overflow-y:auto;overscroll-behavior:contain}
.settings-dialog .panel-heading{align-items:flex-start;position:sticky;top:-30px;background:#fafaf5;padding:12px 0;z-index:1}
.settings-dialog h2{margin:8px 0 0;font-size:26px}
.settings-dialog h3{font-size:14px;font-weight:600;margin:22px 0 10px}
.settings-dialog .settings-note{font-size:11px;background:#eff0e8;padding:12px;border-radius:6px}
.settings-guide p{margin-bottom:18px}
.shortcut-list{margin:12px 0 24px}
.shortcut-list>div{margin:0;padding:11px 0;border-bottom:1px solid #e8eadf;gap:12px}
.shortcut-list dt{font-size:12px;color:#5c6556}.shortcut-list dd{font:11px Arial,Helvetica,sans-serif;text-align:right}
.shortcut-list kbd{font:10px monospace;background:#eff0e8;border:1px solid #daddd1;border-radius:4px;padding:3px 5px}
.session-summary{display:flex;justify-content:space-between;font:10px monospace;color:var(--muted);padding:0 0 20px}
@media(max-width:900px){.studio-header{gap:12px}.studio-actions{gap:5px}.studio-actions .status{margin-right:3px}.color-panel{width:200px;min-width:200px}.studio-page #palette{gap:5px}}
@media(max-width:800px){
 .color-panel{position:absolute;right:10px;top:10px;bottom:38px;width:min(200px,calc(100vw - 82px));min-width:0;border:1px solid #d1d7c5;border-radius:10px;box-shadow:0 8px 35px #25341c26}
 .studio-header{height:52px;min-height:52px;padding:0 12px;gap:10px}.studio-header .brand{font-size:19px}.studio-header .brand-mark{display:none}
 .studio-header h1,.studio-header .header-title{font-size:12px}.header-divider{display:none}.studio-actions .status{display:none}.studio-link{display:none}
 .tool-rail{top:10px;left:10px;padding:4px}.tool-rail button{width:34px;height:34px;padding:7px}
 .studio-page #palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
 .workspace-status{padding:0 10px;gap:12px;font-size:9px}.workspace-status #queue{display:none}.workspace-status #coordinates{min-width:85px}
 .palette-hint{font-size:10px}
}
@media(max-width:430px){.studio-header h1{display:block}.studio-actions{margin-left:auto}.studio-header .brand{font-size:18px}.studio-header{gap:5px}.palette-toggle{padding:0 8px}.studio-page .icon-button{width:28px}.shortcut-list dt{font-size:11px}.shortcut-list dd{font-size:10px}}
@media(max-width:560px){.studio-header{flex-wrap:wrap;height:auto;min-height:90px;padding:8px 12px;row-gap:8px}.studio-actions{width:100%;justify-content:flex-end;gap:8px}}
@media(max-height:480px){.tool-rail{top:8px;left:8px;gap:1px;padding:3px}.tool-rail button{width:29px;height:29px;padding:5px}.rail-divider{margin:2px 4px}.color-panel .panel-heading{padding:8px 12px 6px 17px}.palette-hint{display:none}.palette-filters{padding-bottom:6px}}
/* Scoped canvas tools use the same rail on public and profile canvases. */

#canvas-tools{display:flex;flex-direction:column;gap:3px}
#canvas-tools[hidden],.tool-rail button[hidden],.tool-rail #watch-tools button[hidden],.brush-settings[hidden]{display:none}
.tool-rail{max-height:calc(100% - 72px);overflow-y:auto;scrollbar-width:thin}
.tool-rail button.named-tool{padding:3px;gap:0;min-height:38px;line-height:1;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.named-tool span{font-size:19px;width:20px;text-align:center}.named-tool small{font-size:9px;font-weight:600;max-width:100%}
.brush-settings{position:absolute;left:70px;top:16px;z-index:1;width:190px;background:#fafaf6f5;border:1px solid #d6dacb;border-radius:10px;padding:12px;box-shadow:0 3px 14px #26341d0d}
.brush-settings label,.brush-settings .brush-field{display:flex;gap:6px;align-items:center;font-size:12px;margin-top:10px}
/* Color dropdown with swatches (public/color-select.js): Fill → Only replace */
.brush-field{flex-wrap:wrap}.color-select{position:relative;flex:1 1 100%;min-width:0}
.color-select-button{display:flex;align-items:center;gap:7px;width:100%;padding:5px 26px 5px 7px;font-size:12px;text-align:left;background:#fffef9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23596452' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center/10px 6px;border:1px solid #cfd4c4;border-radius:7px;min-height:30px}
.color-select-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.color-select-swatch{width:16px;height:16px;flex:0 0 16px;border-radius:4px;border:1px solid #0000002e}
.color-select-swatch[data-transparent=true]{background:#fff linear-gradient(45deg,#d9ddd4 25%,transparent 25%,transparent 75%,#d9ddd4 75%),linear-gradient(45deg,#d9ddd4 25%,transparent 25%,transparent 75%,#d9ddd4 75%);background-size:8px 8px;background-position:0 0,4px 4px}
.color-select-swatch[data-any=true]{background:conic-gradient(#e53935,#fbc02d,#43a047,#1e88e5,#8e24aa,#e53935)}
.color-select-list{position:absolute;left:0;top:calc(100% + 4px);z-index:30;width:max(100%,230px);max-height:min(320px,55vh);overflow-y:auto;margin:0;padding:4px;list-style:none;background:#fffef9;border:1px solid #cfd4c4;border-radius:8px;box-shadow:0 8px 24px #26341d26}
.color-select-list[hidden]{display:none}.color-select-list:focus{outline:none}
.color-select-list li{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:5px;font-size:12px;cursor:pointer;white-space:nowrap}
.color-select-list li:hover,.color-select-list li.active{background:#edf0e6}.color-select-list li[aria-selected=true]{font-weight:700}
.color-select-list li.active{outline:2px solid #343c32;outline-offset:-2px}
.brush-settings input[type=number]{width:62px;padding:5px}.brush-settings input[type=range]{width:100%;margin:10px 0 0}.brush-settings p{font-size:11px;line-height:1.5;color:#65705b;margin:8px 0 0}
#canvas-role-form{display:grid;gap:12px}#canvas-role-form label{display:grid;gap:5px}#canvas-role-form input,#canvas-role-form select{width:100%;padding:9px}
#canvas-role-list{margin:18px 0}.protected-cursor{border-color:#2875db!important;background:#2875db30!important}
@media(max-width:800px){.brush-settings{left:58px;top:10px;width:160px}}
.pixel-cooldown #cooldown-label{pointer-events:auto;padding:0;border:0;border-radius:2px;font-size:10px;color:#65705b;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.pixel-cooldown #cooldown-label:disabled{pointer-events:none;text-decoration:none;cursor:default;opacity:1}
#canvas-limits-form{display:grid;gap:12px}#canvas-limits-form label{display:grid;gap:5px}#canvas-limits-form input{width:100%;padding:9px}#canvas-limits-list p{overflow-wrap:anywhere;font-size:13px;line-height:1.6}#canvas-limits-list button{font-size:12px;padding:5px 8px}

.studio-page .workspace-status{height:36px;min-height:36px}

#protect-color-option{display:block}#protect-color{display:block;max-width:100%;width:100%;margin-top:6px;padding:7px;font:inherit;border:1px solid var(--line);border-radius:5px;background:#fffefa}

/* Translated tool names need more room than the compact English labels. */
html:is([lang=es],[lang=tr]) .tool-rail button{width:46px}
html:is([lang=es],[lang=tr]) .brush-settings{left:80px}
html[lang=es] .tool-rail button{width:56px}
html[lang=es] .brush-settings{left:90px}
/* Brush option dropdowns stack under their label in the narrow brush panel. */
#fill-filter-option,#protect-color-option{display:grid;gap:4px;margin-top:8px;font-size:13px}
#fill-filter-option[hidden],#protect-color-option[hidden]{display:none}
#fill-filter,#protect-color{width:100%;max-width:100%;box-sizing:border-box;font:inherit;padding:5px 6px;border:1px solid #d5d9cd;border-radius:6px;background:#fffefa}
/* Replay (public/canvas-replay.js) */
.replay-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:min(760px,calc(100% - 20px));padding:8px 10px;border:1px solid #c4cbb8;border-radius:10px;background:#fafaf6f5;box-shadow:0 4px 14px #20281c22;font-size:12px}
.replay-bar button,.replay-bar select{padding:5px 9px;font-size:12px}
.replay-play{min-width:34px}.replay-step{min-width:44px;font-variant-numeric:tabular-nums;font-weight:600}
.replay-range{flex:1 1 220px;min-width:140px;accent-color:#416331;background:linear-gradient(90deg,#e4e7dc calc(100% - var(--loaded,100%)),transparent 0);border-radius:4px}
.replay-when{font-variant-numeric:tabular-nums;min-width:150px;font-weight:600}
.replay-jumps{display:flex;gap:3px}.replay-jumps button{padding:5px 7px}
.replay-status{color:#5d6656;flex:1 1 160px}
.replay-gold{border-color:#d99a00!important;background:#fff1bd!important;color:#5a3a00;font-weight:600}.replay-gold:before{content:"★ ";color:#d99a00}
.replay-exit{margin-left:auto;font-weight:600}
.replay-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;max-width:320px;padding:6px 9px;border-radius:6px;background:#292f29;color:#fff;font-size:12px;line-height:1.35;white-space:normal}
#replay-toggle[aria-pressed=true]{background:#dce2d3}
@media(max-width:700px){.replay-bar{top:6px;gap:6px;padding:6px}.replay-range{flex:1 1 90px;min-width:80px}.replay-step{min-width:40px;padding:5px 6px}.replay-when{flex-basis:100%;order:1}.replay-when{min-width:0}.replay-status{flex-basis:100%;order:9}}
/* Header cleanup step 2 (2026-10-26): Painters and Replay are rail buttons. */
.tool-rail #watch-tools{display:flex;flex-direction:column;gap:inherit}.tool-rail #watch-tools .rail-divider{display:block}
.tool-rail #watch-tools button.named-tool{padding-left:0;padding-right:0}.tool-rail #watch-tools small{font-size:8px;letter-spacing:-.3px;line-height:1.1}
.tool-rail button.named-tool svg{width:18px;height:18px}
.tool-rail button[aria-expanded=true]{background:#f6e1d6;color:#b94e29;border-color:#ecc5b0}
.tool-rail{max-height:calc(100% - 116px);overflow-y:auto;scrollbar-width:thin} /* stays above the palette dock and status bar */
.mobile-brush{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
.replaying .painters-panel{top:var(--replay-bar-bottom,96px);max-height:calc(100% - var(--replay-bar-bottom,96px) - 52px)}
/* Getting-started checklist (public/onboarding.js) */
.onboarding-card{position:absolute;top:16px;left:84px;z-index:2;width:290px;border:1px solid #c4cbb8;border-radius:10px;background:#fafaf6f5;box-shadow:0 4px 14px #20281c22;font-family:"Noto Sans",Verdana,sans-serif;font-size:12px}
.onboarding-head{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;text-align:left}
.onboarding-head strong{font-size:13px}.onboarding-count{font-weight:700;color:#b94e29;font-variant-numeric:tabular-nums}
.onboarding-list{list-style:none;margin:0;padding:0 12px 6px;display:grid;gap:7px}
.onboarding-list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px}
.onboarding-check{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #b9c1ad;border-radius:50%;font-size:11px;font-weight:700;color:#fff}
.onboarding-list li.done .onboarding-check{background:#5f8f45;border-color:#5f8f45}.onboarding-list li.done .onboarding-text{color:#7c8573;text-decoration:line-through}
.onboarding-text{display:flex;flex-direction:column;gap:1px}.onboarding-text small{color:#7c8573;font-size:11px}
.onboarding-go{padding:3px 8px;font-size:11px;font-weight:600;background:#fffef9}
.onboarding-complete{grid-template-columns:1fr!important;font-weight:600;color:#3e6531}
.onboarding-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px 10px;border-top:1px solid #e3e6db;color:#7c8573;font-size:11px}
.onboarding-hide{padding:2px 6px;border:0;background:none;color:#7c8573;text-decoration:underline;font-size:11px}
.replaying .onboarding-card{display:none}
@media(max-width:600px){.onboarding-card{left:56px;top:8px;width:min(280px,calc(100% - 64px))}}
.onboarding-card:has(.onboarding-list[hidden]){width:auto}.onboarding-card:has(.onboarding-list[hidden]) .onboarding-head{gap:10px}
/* "Naturals" heading before Skin, Moss and Mauve (palette additions, 2026-10-27). */
.palette-section-label{grid-column:1/-1;flex-basis:100%;margin:8px 0 2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3f7d3a}

/* Replay bar layout (owner-approved review, 2026-10-28): header, main row, Jump to, hint and extras. Overrides the
   older single-row rules above. */
.replay-bar{flex-direction:column;align-items:stretch;gap:6px;width:min(780px,calc(100% - 20px))}
.replay-head,.replay-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.replay-title{font-size:14px}.replay-subtitle{color:#5d6656;font-size:12px;flex:1 1 200px}
.replay-exit{margin-left:auto;font-weight:600}
.replay-track{flex:1 1 220px;min-width:140px;display:flex;flex-direction:column}
.replay-track .replay-range{width:100%;min-width:0;flex:none}
.replay-scale{display:flex;justify-content:space-between;color:#6b7364;font-size:10px;line-height:1;margin-top:1px}
.replay-when{min-width:150px;font-variant-numeric:tabular-nums;font-weight:400;color:#3b4436}.replay-when strong{font-weight:700;color:#24301e}
.replay-speed-label{display:flex;align-items:center;gap:5px;font-size:12px;color:#5d6656}
.replay-jumps-label{font-size:12px;color:#5d6656}
.replay-jumps button{padding:5px 9px}
.replay-jump-row .replay-status{margin-left:auto;flex:0 1 auto;font-size:12px}
.replay-foot{font-size:12px}.replay-hint{color:#5d6656;flex:1 1 220px}
.replay-gold{background:none!important;border:0!important;padding:0 2px!important;color:#7a5200;text-decoration:underline;font-weight:600}
.replay-badge{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:#fff1bd;color:#5a3a00;font-size:10px;font-weight:700;vertical-align:1px}
.replay-badge[hidden]{display:none}
@media(max-width:700px){.replay-subtitle{display:none}.replay-when{flex:1 1 auto;order:5;min-width:0}.replay-speed-label{order:6}.replay-speed-label select{min-height:34px}
 .replay-bar button,.replay-bar select{min-height:40px}.replay-track{flex:1 1 90px;min-width:80px}.replay-jump-row .replay-status{flex-basis:100%;margin-left:0}.replay-hint{flex-basis:100%}}

/* Compact two-row replay bar (owner, 2026-10-28: the four rows crowded the canvas). Overrides the rules above. */
.replay-bar{gap:4px;padding:6px 8px;width:min(880px,calc(100% - 20px))}
.replay-bar button,.replay-bar select{padding:3px 8px;font-size:12px;min-height:28px}
.replay-row{gap:6px}
.replay-title{font-size:13px;margin-right:2px;cursor:help}
.replay-exit{margin-left:auto;padding:3px 9px!important;font-size:13px!important}
.replay-track{flex:1 1 200px}
.replay-scale{align-items:center;gap:8px;white-space:nowrap}.replay-scale .replay-status{flex:1;text-align:center;margin:0;font-size:10px;color:#6b7364;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Fixed width (owner, 2026-10-28): a changing time label made the slider and +1m shift; now +1m stays put for repeated clicks. */.replay-when{flex:0 0 15.5em;width:15.5em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replay-jumps button{padding:3px 8px}
.replay-hint{flex:1 1 150px;font-size:11px;color:#6b7364;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.replay-bar button,.replay-bar select{min-height:34px}.replay-title{display:none}.replay-when{flex:1 1 auto;width:auto;order:5;font-size:12px}.replay-speed{order:6}.replay-exit{order:7;margin-left:0}
 .replay-jumps-label{display:none}.replay-hint{display:none}.replay-scale .replay-status{order:0;flex:1 1 auto;flex-basis:auto}.replay-gold,.replay-export{order:10}.replay-track{flex:1 1 90px;min-width:80px}}