/* Readability fixes shared by the workshop and the battle result. Load last. */
#battleDialog #result {padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#1d231bb8;backdrop-filter:blur(3px);overflow:auto}
#battleDialog #result .result-card {--result-accent:#842f26;box-sizing:border-box;width:min(100%,480px);max-width:480px;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:22px 26px 16px;margin:auto;background:#fff8e9!important;background-image:none!important;border:1px solid #a68d57!important;border-top:5px solid var(--result-accent)!important;border-radius:12px;color:#3f3026!important;box-shadow:0 12px 52px #0006;overflow:auto;overscroll-behavior:contain;text-shadow:none}
#battleDialog #result[data-outcome=win] .result-card {--result-accent:#2c5039}
#battleDialog #result[data-outcome=draw] .result-card {--result-accent:#66522b}
#battleDialog #result .result-card .eyebrow {color:#794530;font-size:10px;letter-spacing:.13em}
#battleDialog #result .result-card h2 {margin:6px 0 10px;font-size:clamp(25px,3.8vw,38px);line-height:1.35;overflow-wrap:anywhere;color:var(--result-accent)!important}
#battleDialog #result .result-card h2::before {content:'Bravo!';margin:2px 0 6px;font:italic 24px/1.25 Georgia,'Yu Mincho',serif;color:#7c3e29}
#battleDialog #result[data-outcome=loss] h2::before,#battleDialog #result[data-outcome=self-destruct] h2::before {content:'もう一枚、焼いてみよう。';font-size:16px}
#battleDialog #result[data-outcome=draw] h2::before {content:'いい勝負！';font-size:18px}
#battleDialog #resultReason {margin:8px 0 16px;color:#503c2c;font-size:13px;line-height:1.7}
#battleDialog #result #rematch {display:block;width:100%;min-height:52px;padding:13px 12px;background:#9b382c;border:1px solid #893226;border-radius:8px;color:#fff8e9!important;font-size:14px;font-weight:800;line-height:1.5;box-shadow:0 3px 0 #70271e}
#battleDialog #result .clip-actions {display:flex;gap:8px;margin-top:16px}
#battleDialog #result .clip-actions button {flex:1 1 0;min-width:0;min-height:44px;padding:10px 8px;border:1px solid #234330;border-radius:7px;background:#2b5038;color:#fff8e9!important;font-size:12px;font-weight:700;line-height:1.5;opacity:1}
#battleDialog #result .clip-actions button:disabled {background:#677565;color:#fff8e9!important;border-color:#677565;opacity:.66;cursor:not-allowed;box-shadow:none;transform:none}
#battleDialog #result .clip-actions button:not(:disabled):hover {background:#203c2b}
#battleDialog #result button:focus-visible {outline:3px solid #b87329;outline-offset:3px}
#battleDialog #result #clipStatus {max-width:none;margin:9px 0 5px;color:#574638;font-size:11px;line-height:1.6}
#battleDialog #result #clipPreview {display:block;width:100%;max-width:280px;max-height:130px;margin:10px auto 3px;border-radius:6px;background:#211b15}
#battleDialog #result #clipPreview[hidden] {display:none}
#battleDialog #result #editAgain {display:block;min-height:44px;margin:8px auto 0;padding:10px;color:#31513b!important;font-size:12px;line-height:1.4;text-decoration:underline;text-underline-offset:4px}

/* A compact strip below the score, with no pointer interaction. */
#battleDialog #announcer {box-sizing:border-box;top:calc(111px + env(safe-area-inset-top,0px));left:50%;right:auto;width:max-content;max-width:min(76vw,540px);min-height:32px;max-height:44px;padding:5px 12px;display:flex;flex-direction:row;align-items:center;gap:10px;transform:translateX(-50%);background:#253328ec;color:#fff3d7;border:1px solid #b89a60;border-radius:5px;box-shadow:0 2px 6px #0004;filter:none;pointer-events:none;overflow:hidden}
#battleDialog #announcer[hidden] {display:none}
#battleDialog #announcer>span:first-child {flex:0 0 auto;font-size:9px;line-height:1.3;letter-spacing:.05em;padding:2px 4px;color:#ffebc5;background:transparent;transform:none}
#battleDialog #announcer img {display:block;width:auto;height:25px;max-height:25px;min-width:0;max-width:min(59vw,410px);object-fit:contain;transform:none}
#battleDialog #announcer .announcer-text,#battleDialog #announcer #announcerText {min-width:0;margin:0;padding:0;color:#fff3d7;font:700 14px/1.4 sans-serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:none;transform:none}
#battleDialog #announcer.speak {animation:readme-callout .18s ease-out}
@keyframes readme-callout {from{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%,0)}}

/* Labels keep a separate line from full-width controls. */
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen,.shape-panel),.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen,.shape-panel)>* {min-width:0;max-width:100%}
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen) label,.ingredients .shape-panel label:has(input[type=range]) {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;align-items:center;width:100%;margin:12px 0;padding:0;text-indent:0;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.65;color:#3c4e37}
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen,.shape-panel) label>input[type=range],.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen) label>select {display:block;grid-column:1/-1;box-sizing:border-box;width:100%;min-width:0;margin:0}
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen,.shape-panel) input[type=range] {height:28px}
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen) select {min-height:44px}
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen) :is(output,.control-value) {color:#714622;font-weight:700;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.ingredients .topping-pen label:has(input[type=checkbox]) {display:flex;align-items:flex-start;gap:7px}
.ingredients .topping-pen input[type=checkbox] {flex:0 0 auto}
.ingredients #createCrust {width:100%;min-height:44px;white-space:normal;line-height:1.6}
.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen,.shape-panel) input[type=color] {min-width:44px;min-height:44px}

.temperature .dial-wrap {display:flex;align-items:center;justify-content:center;flex:0 0 100px;width:100px;height:100px;padding:0}
#dial {box-sizing:border-box;width:100px;height:100px;min-width:44px;min-height:44px;flex:none;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
#dial:active {cursor:grabbing}
#dial:focus-visible {outline:3px solid #9b382c;outline-offset:4px}
#dial #temperatureValue {font-size:27px;pointer-events:none}
#dial .dial-pointer {pointer-events:none}
@media(min-width:901px) {.cook-bar{height:114px;padding-top:6px;padding-bottom:6px}.workshop{height:calc(100dvh - 261px)}}
@media(max-width:900px) {.temperature .dial-wrap{flex-basis:76px;width:76px;height:76px;padding:0}#dial{width:76px;height:76px}#dial #temperatureValue{font-size:23px}.cook-bar{min-height:90px;padding-top:6px;padding-bottom:6px}.ingredients :is(.sculpt-panel,.coating-panel,.topping-pen,.shape-panel) input[type=range]{height:44px}}
@media(max-width:600px) {#battleDialog #result .result-card{padding:16px 15px 9px;border-radius:9px}#battleDialog #result .result-card h2{font-size:27px;margin-bottom:9px}#battleDialog #result .result-card h2::before{font-size:20px}#battleDialog #result[data-outcome=loss] h2::before,#battleDialog #result[data-outcome=self-destruct] h2::before{font-size:14px}#battleDialog #resultReason{margin-bottom:13px}#battleDialog #result .clip-actions{gap:7px;margin-top:13px}#battleDialog #result #clipPreview{max-height:112px;max-width:230px}#battleDialog #announcer{top:calc(112px + env(safe-area-inset-top,0px));max-width:calc(100vw - 24px);padding:5px 8px;gap:5px;min-height:30px}#battleDialog #announcer>span:first-child{font-size:8px}#battleDialog #announcer img{height:22px;max-height:22px;max-width:72vw}#battleDialog #announcer .announcer-text,#battleDialog #announcer #announcerText{font-size:12px}}
@media(max-height:500px) {#battleDialog #result .result-card{width:min(90vw,680px);max-width:680px;padding:10px 18px}#battleDialog #result .result-card h2{font-size:23px;margin:3px 0}#battleDialog #result .result-card h2::before{display:none}#battleDialog #resultReason{margin:5px 0 8px;font-size:11px}#battleDialog #result #rematch{min-height:44px;padding:9px}#battleDialog #result .clip-actions{margin-top:10px}#battleDialog #result #clipStatus{margin:5px 0}#battleDialog #result #clipPreview{max-height:90px;max-width:160px}#battleDialog #result #editAgain{margin-top:2px}#battleDialog #announcer{top:calc(94px + env(safe-area-inset-top,0px))}}
@media(prefers-reduced-motion:reduce) {#battleDialog #announcer.speak{animation:none}}

/* History stays in the canvas header, independently of panel scrolling. */
.board .board-top {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:8px 10px;min-height:60px;position:relative;z-index:6;flex-shrink:0}
.board .board-top>.history-actions {display:flex;gap:6px;margin-left:auto;flex:0 0 auto}
.board .board-top .history-actions button {box-sizing:border-box;min-width:76px;min-height:44px;padding:8px 10px;border:1px solid #cbb886;border-radius:6px;background:#fff5dc;color:#294a37;font-size:13px;line-height:1.35;font-weight:800;white-space:nowrap}
.board .board-top .history-actions button:disabled {background:#778573;color:#e4e9de;border-color:#879382;opacity:.62;cursor:not-allowed;transform:none}
.board .board-top .history-actions button:focus-visible {outline:3px solid #ffd58a;outline-offset:2px}
.board .board-top>span {min-width:0;overflow-wrap:anywhere}
#battleDialog #announcer img[hidden] {display:none}
@media(max-width:900px) {.board .board-top{padding:6px 8px;gap:6px;font-size:9px;min-height:56px}.board .board-top .history-actions{gap:5px}.board .board-top .history-actions button{min-width:75px;min-height:44px;padding:7px 8px;font-size:12px}.board .board-top>span{max-width:calc(100% - 174px)}}

/* Speech controls remain usable in the narrow settings drawer. */
.stats .effects-settings label {display:block;margin:12px 0;color:#3c4e37;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.stats .effects-settings label>select {display:block;width:100%;min-width:0;max-width:100%;min-height:44px;margin:4px 0 0;padding:6px;font-size:12px}
.stats .effects-settings label>input[type=range] {display:block;width:100%;min-width:0;margin:4px 0 0;min-height:28px}
.stats .effects-settings small {display:block;font-size:10px;line-height:1.7;color:#5c6550}
.stats .announcer-settings label {display:block;min-width:0;margin:12px 0;font-size:12px;line-height:1.6;color:#3c4e37}
.stats .announcer-settings select {display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;margin-top:4px;padding:5px;font-size:12px}
.stats .announcer-settings input[type=range] {display:block;width:100%;min-width:0;min-height:28px}
.stats .announcer-settings small {display:block;font-size:10px;line-height:1.7;color:#5c6550}
@media(max-width:900px) {.stats .effects-settings label>input[type=range]{min-height:44px}}

.blade-picker {margin:10px 0 18px;color:#2d4935}
.blade-picker-hint {font-size:11px;line-height:1.7;margin:6px 0 10px;color:#53604a}
.blade-cards {display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.blade-cards .blade-card {display:block;width:100%;min-width:0;min-height:44px;padding:10px;text-align:left;background:#fffaf0;border:1px solid #c0b18d;border-left:4px solid var(--axis-color);border-radius:8px;color:#2b4533;font-family:inherit;line-height:1.55;white-space:normal;box-shadow:none}
.blade-cards .blade-card:hover {border-color:var(--axis-color);background:#f6edd7}
.blade-cards .blade-card.active {background:#e6eadb!important;color:#243d2d!important;border-color:var(--axis-color)!important;box-shadow:inset 0 0 0 1px var(--axis-color)!important}
.blade-cards .blade-card:focus-visible {outline:3px solid #a76b2c;outline-offset:2px}
.blade-cards .blade-card:disabled {opacity:.5;cursor:wait}
.blade-card-heading {display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.blade-card-heading i {font-size:23px;line-height:1;font-style:normal;color:var(--axis-color)}
.blade-card-heading>b {font-size:15px}
.blade-card-heading>small {font-size:9px;color:#5c654f;margin-left:auto}
.blade-card.active .blade-card-heading>b::after {content:' ✓';color:var(--axis-color)}
.blade-card-action {display:block;font-size:11px;margin:6px 0 7px;font-weight:700;color:#394e39}
.blade-card-detail {display:flex;gap:6px;font-size:10px;margin:3px 0;color:#526148;line-height:1.6}
.blade-card-detail>strong {font-size:9px;flex:0 0 auto;color:#6c4b2f}
.blade-card-boost {display:block;border-top:1px solid #baa16b55;margin-top:7px;padding-top:6px;font-size:11px;color:var(--axis-color)}
.blade-card-boost>b {font-size:12px}
.blade-card-boost>span {display:block;font-size:10px;color:#526148}
.blade-matchup {margin:9px 0 0;border-top:1px solid #b6a777;padding-top:5px}
.blade-matchup summary {font-size:11px;min-height:38px;padding-top:8px}
.blade-matchup svg {display:block;width:min(100%,240px);height:auto;margin:auto;color:#775337}
.blade-matchup p {font-size:10px;line-height:1.7;margin:3px 0;color:#5a634e}
#battleDialog .battle-score .battle-axis {display:block;flex:0 0 100%;font-family:sans-serif;font-size:11px;font-weight:700;line-height:1.45;margin-top:5px;color:#ffe8c0;white-space:nowrap;text-shadow:0 1px 4px #000}
#battleDialog .battle-score>div:last-child .battle-axis {text-align:right}
#battleDialog #boost[data-axis-type=wide] {background:#1d716d;color:#fff5df;box-shadow:0 3px 0 #0a4643}
#battleDialog #boost[data-axis-type=tricky] {background:#75449b;color:#fff5df;box-shadow:0 3px 0 #482360}
#battleDialog #boost[data-axis-type=thin] {background:#ba3e2e;color:#fff5df;box-shadow:0 3px 0 #76251c}
#battleDialog #boost[data-axis-type=normal] {background:#886326;color:#fff5df;box-shadow:0 3px 0 #584015}
#battleDialog #boost[data-axis-type]:disabled {background:#687061;color:#eeeede;box-shadow:0 3px 0 #414c40}
#battleDialog .boost-axis-name {display:block;font-size:clamp(18px,2.2vw,25px);line-height:1.15;white-space:nowrap}
@media(max-width:900px) {.blade-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.blade-cards .blade-card{padding:9px 8px}.blade-card-heading>small{display:block;flex:0 0 100%;margin-left:0}.blade-card-heading>b{font-size:14px}.blade-card-detail{font-size:10px}.blade-card-action{font-size:11px}.blade-card-boost>span{font-size:10px}}
@media(max-width:600px) {#battleDialog .battle-score .battle-axis{font-size:10px;margin-top:4px}#battleDialog .boost-axis-name{font-size:19px}}
@media(max-height:500px) {#battleDialog .battle-score .battle-axis{font-size:9px;margin-top:2px}}
#battleDialog:has(.battle-axis) #announcer {top:calc(137px + env(safe-area-inset-top,0px))}
@media(max-width:600px) {#battleDialog:has(.battle-axis) #announcer{top:calc(132px + env(safe-area-inset-top,0px))}}
@media(max-height:500px) {#battleDialog:has(.battle-axis) #announcer{top:calc(111px + env(safe-area-inset-top,0px))}}

/* The editor uses the central area; all existing controls remain in three groups. */
.editor-workspace {--tool-column:clamp(180px,15vw,230px);--stats-column:clamp(194px,16vw,238px);grid-template-columns:var(--tool-column) minmax(0,1fr) var(--stats-column);gap:10px}
.editor-workspace>.ingredients,.editor-workspace>.stats {padding:12px;min-width:0;overflow-x:hidden}
.editor-workspace>.board {min-width:0}
.editor-workspace>.ingredients {grid-column:1}
.editor-workspace>.board {grid-column:2}
.editor-workspace>.stats {grid-column:3}
.editor-legacy-controls[hidden],.tool-group-panel[hidden],.tool-context-panel[hidden] {display:none!important}
.editor-workspace.tools-collapsed {--tool-column:0px;column-gap:6px}
.editor-workspace.tools-collapsed>.ingredients {display:none}
.editor-workspace.stats-collapsed {--stats-column:0px;column-gap:6px}
.editor-workspace.stats-collapsed>.stats {display:none}
.editor-workspace.tools-collapsed>.board {grid-column:2}
.editor-workspace.stats-collapsed>.board {grid-column:2}
.editor-workspace.tools-collapsed.stats-collapsed {grid-template-columns:minmax(0,1fr)}
.editor-workspace.tools-collapsed.stats-collapsed>.board {grid-column:1}
.tool-groups {position:sticky;top:-12px;z-index:5;display:flex;gap:4px;margin:-12px -12px 10px;padding:10px 8px;background:#f9f2e2;border-bottom:1px solid #b9a472}
.tool-groups button {flex:1;min-width:0;min-height:44px;padding:7px 3px;font-size:12px;font-weight:800;white-space:nowrap;border:1px solid #c6b489;background:#fffaf0;color:#31543d}
.tool-groups button.active {background:#31543d!important;color:#fff8e9!important}
.editor-shared {margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #bbaa7855}
.editor-shared .size-label {font-size:12px;color:#3c4e37;align-items:center;gap:6px;line-height:1.6}
.editor-shared #brushSize {display:block;width:100%;min-height:28px;margin:3px 0 8px}
.editor-shared .symmetry {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.editor-shared .symmetry button {min-width:0;min-height:38px;padding:4px 2px;font-size:10px;white-space:normal}
.editor-shared .symmetry-tip {font-size:9px;line-height:1.6;margin:5px 0 0}
.editor-tools .tool-options,.editor-tools .shape-panel,.editor-tools .sculpt-panel,.editor-tools .color-drawer,.editor-tools .topping-pen {padding:8px 0;margin:7px 0;border-top:1px solid #b3a07066;min-width:0}
.editor-tools details>summary {min-height:38px;font-size:12px;line-height:1.6;color:#3d523c;padding-top:7px;overflow-wrap:anywhere}
.editor-tools .tool-options>summary {font-size:11px}
.editor-tool-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0 0 12px}
.editor-tool-grid .editor-tool-button {min-height:62px;min-width:0;width:100%;padding:7px 5px;border:1px solid #c3b08a;border-radius:7px;background:#fffaf0;color:#294a37;text-align:left;font-family:inherit;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.editor-tool-button>.tool-button-name {display:block;font-size:11px;font-weight:800}
.editor-tool-button>small {display:block;font-size:9px;line-height:1.55;margin-top:3px;color:inherit;opacity:.85}
.editor-tool-grid .editor-tool-button.active {background:#31543d!important;color:#fff7e4!important;border-color:#31543d!important;box-shadow:inset 0 0 0 1px #d2ba87!important}
.editor-tool-button:focus-visible,.editor-view-toolbar button:focus-visible {outline:3px solid #ae6b2b;outline-offset:2px}
.tool-hint {font-size:10px;line-height:1.7;margin:7px 0;color:#58644f}
.tool-context-panel {border:1px solid #bfa97d;background:#f7eed8;padding:9px;border-radius:7px;margin:10px 0}
.editor-tools .editor-setting {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 5px;align-items:center;margin:11px 0;color:#354b35;font-size:11px;line-height:1.6;min-width:0}
.editor-setting>span {min-width:0;overflow-wrap:anywhere}
.editor-setting>.control-value {font-size:11px;color:#704c28;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.editor-tools .editor-setting>input[type=range],.editor-tools .editor-setting>select {grid-column:1/-1;width:100%;max-width:100%;min-width:0;margin:0}
.editor-tools .editor-setting>input[type=range] {min-height:28px}
.editor-tools .editor-setting>select {min-height:44px;padding:5px;font-size:11px}
.editor-tools .editor-check {display:flex!important;gap:7px;align-items:flex-start;margin:10px 0;min-width:0;color:#354b35}
.editor-check>input[type=checkbox] {flex:0 0 auto;width:18px;min-width:18px;min-height:18px;height:18px;margin:3px 0 0;accent-color:#31543d}
.editor-check>span {min-width:0;font-size:11px;line-height:1.6}
.editor-check>span>b {display:block;font-weight:700}
.editor-check>span>small {display:block;font-size:10px;margin-top:2px;color:#697054;line-height:1.6}
.editor-tools .custom-color {flex-wrap:wrap;gap:5px;font-size:11px}
.editor-tools .custom-color input[type=color] {width:42px;height:38px}
.editor-tools .custom-color input[type=text] {width:76px;min-width:0}
.editor-tools .color-drawer #palette {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:10px 1px}
.editor-tools .color-drawer #palette button {width:100%;height:auto;aspect-ratio:1;min-height:0;min-width:0;border-radius:5px;border-width:1px}
.editor-tools .color-drawer .mix-panel {padding:7px 0}
.editor-tools .mix-panel summary {font-size:11px}
.editor-tools .mix-colors {gap:4px}
.editor-tools .mix-colors input,.editor-tools #mixSwatch {width:38px;min-width:0;height:38px}
.editor-tools #useMixed {width:100%;font-size:11px;min-height:44px;white-space:normal;line-height:1.5}
.editor-tools .brush-kinds {grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.editor-tools .brush-kinds button {min-width:0;min-height:40px;font-size:10px;padding:5px 2px}
.editor-tools #brushSample {width:100%;max-width:100%;height:auto}
.editor-tools .mini-toppings {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.editor-tools .mini-toppings button {width:100%;min-width:0;min-height:60px;padding:5px}
.editor-tools .topping-categories {display:flex;flex-wrap:wrap;gap:3px}
.editor-tools .topping-categories button {flex:1;min-width:0;min-height:38px;padding:5px 4px;font-size:10px}
.editor-tools #circleBase {width:100%;min-height:44px;white-space:normal;font-size:12px;padding:9px 5px}
.editor-tools #openToppingPainter {width:100%;min-height:44px;font-size:11px;line-height:1.6;white-space:normal}
.editor-clear-area {margin-top:22px;padding:14px 0 6px;border-top:1px dashed #a98968}
.editor-clear-area #clear {width:100%;min-height:44px;border:1px solid #a4654b;border-radius:6px;background:#fff5e7;color:#85432f;font-size:11px}
.editor-view-toolbar {display:flex;align-items:center;flex-wrap:wrap;flex-shrink:0;gap:5px;padding:6px 8px;background:#f7efdc;border-bottom:1px solid #bcaa80;min-height:48px;z-index:5}
.editor-view-toolbar button {min-width:44px;min-height:36px;padding:5px 8px;border:1px solid #c6b58d;border-radius:5px;background:#fffaf0;color:#31543d;font-size:11px;line-height:1.5;white-space:nowrap}
.editor-view-toolbar button[aria-pressed=true] {background:#31543d;color:#fff8e9;border-color:#31543d}
.editor-view-toolbar #editor-zoomOut,.editor-view-toolbar #editor-zoomIn {font-size:0;padding:4px;min-width:36px}
.editor-view-toolbar #editor-zoomOut::before {content:'−';font-size:20px}
.editor-view-toolbar #editor-zoomIn::before {content:'＋';font-size:18px}
.editor-zoom {font-size:10px;min-width:35px;text-align:center;color:#5c644e;font-variant-numeric:tabular-nums}
.editor-workspace .board-top {flex-wrap:nowrap;min-height:64px;gap:10px}
.editor-workspace .board-top>span:first-child {display:none}
.editor-workspace .board-top>.current-tool-label {display:block;flex:1 1 auto;max-width:none;min-width:0;font-family:inherit;font-size:11px!important;line-height:1.7;white-space:normal;color:#fff6de!important}
.editor-workspace .board-top>.history-actions {flex:0 0 auto;margin-left:auto}
.editor-workspace .canvas-wrap {min-height:0!important;position:relative}
.editor-workspace .stats .preview-wrap {margin-left:0;margin-right:0;height:170px}
.editor-workspace .stats .blade-cards .blade-card {padding:8px}
.editor-workspace .stats .blade-card-heading>small {flex:0 0 100%;margin-left:0}
.editor-workspace .stats .blade-card-heading>b {font-size:14px}
body.canvas-focused .editor-workspace>.board {position:fixed;inset:0;z-index:70;height:100dvh;width:100vw;border-radius:0;border:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.canvas-focused .editor-workspace>.board .board-top {flex-shrink:0}
body.canvas-focused .editor-workspace>.board .studio-foot {display:none}
body.canvas-focused .editor-view-toolbar [data-editor-action=toggleTools],body.canvas-focused .editor-view-toolbar [data-editor-action=toggleStats] {display:none}
body.canvas-focused #toast {z-index:100}
@media(min-width:901px) {.editor-workspace{height:calc(100dvh - 237px)}.intro{height:42px;padding:4px}.intro h1{font-size:19px}.intro:after{font-size:10px}}
@media(max-width:900px) {
  .editor-workspace {display:block;height:calc(100dvh - 202px - env(safe-area-inset-bottom));margin-right:0}
  .editor-workspace>.ingredients,.editor-workspace>.stats {padding:14px;left:8px;right:8px;bottom:calc(145px + env(safe-area-inset-bottom));top:auto;width:auto;max-width:none;height:min(62dvh,540px);z-index:35}
  .editor-workspace.tools-collapsed>.ingredients,.editor-workspace.stats-collapsed>.stats {display:none}
  body[data-tools=paint] .editor-workspace>.ingredients,body[data-tools=stats] .editor-workspace>.stats {display:block}
  .tool-groups {top:-14px;margin:-14px -14px 10px;padding:9px 10px}
  .tool-groups button {min-height:44px;font-size:13px}
  .editor-tool-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .editor-tool-grid .editor-tool-button {min-height:76px;padding:8px 6px}
  .editor-tool-button>.tool-button-name {font-size:12px}
  .editor-tool-button>small {font-size:10px}
  .editor-tools .editor-setting {font-size:12px}
  .editor-tools .editor-setting>input[type=range],.editor-shared #brushSize {min-height:44px}
  .editor-tools .editor-check {min-height:44px;align-items:center}
  .editor-tools .editor-check>input[type=checkbox] {width:22px;height:22px;min-width:22px;min-height:22px;margin-top:0}
  .editor-tools .editor-check>span {font-size:12px}
  .editor-tools .editor-check>span>small {font-size:11px}
  .editor-tools .color-drawer #palette {grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .editor-tools .color-drawer #palette button {min-height:44px;aspect-ratio:auto}
  .editor-tools .brush-kinds {grid-template-columns:repeat(3,minmax(0,1fr))}
  .editor-tools .brush-kinds button,.editor-shared .symmetry button,.editor-tools .topping-categories button {min-height:44px}
  .editor-tools .mini-toppings {grid-template-columns:repeat(3,minmax(0,1fr))}
  .editor-workspace .board-top {min-height:70px;padding:6px 8px;gap:6px}
  .editor-workspace .board-top>.current-tool-label {font-size:10px!important;line-height:1.6;max-height:56px;overflow:hidden}
  .editor-workspace .board-top>.history-actions {gap:4px}
  .editor-workspace .board-top .history-actions button {min-width:72px;padding:6px;font-size:11px}
  .editor-view-toolbar {padding:4px 6px;gap:4px;min-height:52px}
  .editor-view-toolbar button {min-height:44px;min-width:44px;padding:5px 6px;font-size:10px}
  .editor-view-toolbar #editor-zoomOut,.editor-view-toolbar #editor-zoomIn {display:none}
  .editor-view-toolbar #editor-toggleTools,.editor-view-toolbar #editor-toggleStats {display:none}
  .editor-view-toolbar #editor-fullscreen {margin-left:auto}
  .editor-zoom {font-size:10px}
  body.canvas-focused .editor-view-toolbar #editor-zoomOut,body.canvas-focused .editor-view-toolbar #editor-zoomIn {display:block;min-width:44px}
  body.canvas-focused .editor-workspace>.board {height:100dvh}
}
@media(max-width:900px) and (orientation:landscape) {
  .editor-workspace{height:calc(100dvh - 94px);margin-right:174px}
  .editor-workspace>.ingredients,.editor-workspace>.stats{top:48px;bottom:55px;left:auto;right:8px;width:360px;max-width:65vw;height:auto}
  .editor-workspace .board-top{min-height:56px}
  .editor-workspace .board-top>.current-tool-label{max-height:42px}
  .editor-view-toolbar{min-height:42px;padding:3px 5px}
  .editor-view-toolbar button{min-height:44px}
}
@media(max-width:900px) {
  .editor-tools details>summary,.stats details>summary {min-height:44px;display:list-item;padding-top:10px;padding-bottom:7px;box-sizing:border-box}
  .editor-tools #mixRatio,.stats .announcer-settings input[type=range] {min-height:44px;display:block}
}

#playStatsDialog{max-width:min(540px,92vw);padding:24px;color:#294537;background:#fff9e9} .play-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .play-stat-grid p{padding:12px;border:1px solid #cfb987;border-radius:8px} .play-stat-grid strong{display:block;font-size:30px;margin-top:8px} #playStatsDialog button{min-height:44px;padding:8px 20px} #powderColor{width:100%;height:38px}
#powderColor{grid-column:1/-1;box-sizing:border-box;min-width:0}

.extra-options{display:grid;gap:10px;padding:12px 0;min-width:0}.extra-options label{display:grid;gap:5px}.extra-options input,.extra-options select,#foodSearch{width:100%;box-sizing:border-box;min-height:44px;min-width:0}.extra-options small{line-height:1.6}.extra-options button{min-height:44px}#toppingCategories{flex-wrap:wrap}#foodSearch{margin:8px 0}

#rankedDialog{width:min(740px,92vw);max-height:88dvh;overflow:auto;background:#fff9e9;color:#294537;padding:22px;box-sizing:border-box}#rankedDialog header{display:flex;justify-content:space-between;gap:12px}#rankedDialog button,#rankedDialog input{min-height:44px;margin:6px 0}#rankedDialog label{display:grid;gap:6px}#rankMe{display:block;padding:12px}#rankCanvas{width:100%;height:auto;border-radius:12px}.rank-table{overflow:auto}#rankedDialog table{width:100%;border-collapse:collapse}#rankedDialog td,#rankedDialog th{padding:9px;text-align:left;border-bottom:1px solid #d3c7a5}#rankedDialog h2{margin:0;font-size:24px}#rankedDialog small{font-size:12px}

.extra-options input[type=checkbox]{width:22px;min-height:22px;height:22px;margin:0}#foodSearch{background:#fffaf0;color:#294537;border:1px solid #bea779;padding:8px}#foodSearch::placeholder{color:#617466}

#toppingCategories{gap:5px;height:auto;overflow:visible}#toppingCategories button{flex:0 0 calc(50% - 3px);min-width:0;min-height:44px;white-space:normal;font-size:12px;padding:6px}#rankName{background:#fffdf6;color:#294537;border:1px solid #b7a475;padding:8px;width:100%;box-sizing:border-box}#rankedDialog button,.extra-options button{border:1px solid #b7a475;border-radius:7px;padding:10px;color:#294537;background:#fff6df}#rankedDialog #matchRanked,#rankedDialog #registerRanked,#randomPizza{background:#31543d;color:#fff9e9}#rankedDialog button:disabled{opacity:.45}#rankedDialog th,#rankedDialog td{white-space:nowrap}@media(max-width:600px){#toppingCategories button{flex-basis:calc(33.333% - 4px)}}

#rankedDialog header{position:static;display:flex;align-items:center;flex-wrap:nowrap;height:auto;min-height:50px;padding:0 0 12px;margin:0 0 12px;background:none;gap:8px}#rankedDialog header h2{flex:1;font-size:22px;line-height:1.5}#rankedDialog #closeRanked{flex:0 0 auto;white-space:nowrap;font-size:12px;margin:0;padding:8px}#rankedDialog header small{display:block}
.league-eyebrow{letter-spacing:.2em;font-size:10px;color:#ae5236}.league-intro{font-size:14px;line-height:1.9;color:#66705e}.league-profile{display:flex;gap:18px;align-items:center;padding:20px;border:1px solid #c5ad78;border-radius:12px;background:linear-gradient(110deg,#294537,#3c6044);color:#fff4d6;margin:20px 0}.league-emblem{font-size:60px;color:#e5bd6e;line-height:1}.league-profile small{letter-spacing:.15em}.league-profile #rankMe{font-size:32px;line-height:1.3;padding:5px 0}.league-profile #rankRecord{font-size:12px;color:#e3dcc1}.league-entry{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px;margin-top:20px}.league-entry label{font-size:12px}#rankedDialog #matchRanked{width:100%;background:#b74830;font-size:16px;min-height:56px;font-weight:bold}#rankStatus{font-size:12px;min-height:20px;line-height:1.7}.league-rules{font-size:12px;line-height:1.8;border-top:1px solid #d5c298;border-bottom:1px solid #d5c298;padding:12px 0}.league-rules summary{cursor:pointer;min-height:32px}.league-section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:15px}.league-self{background:#e5ecd9}.league-empty{white-space:normal!important;text-align:center!important;padding:28px!important;color:#71816c}.league-replay-actions{display:flex;gap:10px;align-items:center}.league-replay-actions span{font-size:10px;color:#687361}#rankResult{display:grid;gap:7px;background:#ede5d0;border:1px solid #cbb583;border-radius:10px;padding:20px;text-align:center;margin:10px 0}#rankResult[hidden]{display:none}#rankResult[data-outcome=win]{background:#fff0b8}#rankResult small{letter-spacing:.25em;color:#a25330}#rankResult strong{font-size:26px}#rankResult b{font-size:20px}#rankResult span{font-size:11px}#rankHistory{list-style:none;padding:0}#rankHistory li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #d7c8aa;font-size:12px}#rankHistory li span{flex:1}#rankHistory li[data-outcome=win] b{color:#3b7451}#rankHistory li[data-outcome=loss] b{color:#b45439}#rankMatchTitle{text-align:center;font-size:16px}#rankedDialog{border:1px solid #b79859;box-shadow:0 25px 100px #0006;border-radius:14px}#rankedDialog::backdrop{background:#17291ecc;backdrop-filter:blur(4px)}#rankedDialog button:focus-visible{outline:3px solid #d37b33;outline-offset:3px}@media(max-width:600px){#rankedDialog{width:calc(100vw - 20px);max-width:none;max-height:94dvh;padding:16px}#rankedDialog header h2{font-size:18px}.league-entry{grid-template-columns:1fr;gap:0}.league-profile{padding:15px;margin:14px 0}.league-intro{font-size:12px}.league-replay-actions{flex-wrap:wrap}.league-replay-actions span{flex:1;min-width:150px}#rankedDialog td,#rankedDialog th{padding:9px 5px;font-size:11px}#rankedDialog td:nth-child(2){white-space:normal;overflow-wrap:anywhere}#rankResult strong{font-size:22px}}
#recipeGallery{width:min(880px,94vw);max-height:92dvh;box-sizing:border-box;overflow:auto;background:#fff9e9;color:#294537;border:1px solid #b79859;border-radius:14px;padding:26px;box-shadow:0 25px 100px #0006}#recipeGallery::backdrop{background:#17291ecc;backdrop-filter:blur(4px)}#recipeGallery header{position:static;background:none;height:auto;display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;margin:0;gap:10px}#recipeGallery header small{color:#ad5035;letter-spacing:.18em;font-size:10px}#recipeGallery h2{font-size:27px;margin:8px 0}#recipeGallery>p{font-size:12px;color:#68735d;line-height:1.8}.recipe-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}#recipeGallery button{min-height:44px;border:1px solid #c4af80;border-radius:8px;color:#294537;background:#fff8e8;cursor:pointer}.recipe-card{padding:12px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:background .15s,border-color .15s}.recipe-card svg{width:112px;max-width:100%;height:112px}.recipe-card strong{font-size:15px}.recipe-card span{font-size:11px;color:#64725e;line-height:1.7}.recipe-card[aria-pressed=true]{background:#e8eedb!important;border:2px solid #31543d!important;box-shadow:0 0 0 2px #31543d22}.recipe-card:hover{background:#f6ecd0!important}#recipeGallery footer{position:sticky;bottom:-26px;background:#fff9e9f7;border-top:1px solid #c4af80;padding:15px 0 5px;display:grid;grid-template-columns:1fr 1fr;gap:12px;backdrop-filter:blur(4px)}#recipeGallery footer label{font-size:13px}#recipeGallery footer input{width:100%;min-height:35px;accent-color:#b74830}#recipeGallery footer output{float:right;font-weight:bold}#recipeGallery #createRecipe{background:#b74830;color:#fff8e8;font-weight:bold;padding:12px}#recipeGallery footer small{grid-column:1/-1;font-size:10px;color:#6e775f;line-height:1.7}#recipeGallery button:focus-visible{outline:3px solid #d8873b;outline-offset:2px}@media(max-width:600px){#recipeGallery{width:calc(100vw - 16px);max-width:none;padding:16px}#recipeGallery h2{font-size:20px}#recipeGallery header button{font-size:11px;flex-shrink:0}.recipe-cards{grid-template-columns:repeat(2,1fr);gap:9px}.recipe-card{padding:8px}.recipe-card svg{width:90px;height:90px}.recipe-card strong{font-size:12px}.recipe-card span{font-size:10px}#recipeGallery footer{bottom:-16px;gap:9px}#recipeGallery #createRecipe{font-size:12px}}
.garage-backup{border-top:1px solid #bda77c;padding:18px 0;font-size:13px;line-height:1.8}.garage-backup summary{cursor:pointer;min-height:44px;font-weight:bold}.garage-backup button{min-height:44px;background:#31543d;color:#fff5da;border:1px solid #af9c71;border-radius:7px;padding:8px 15px;margin:4px}.garage-backup #garageImportConfirm{padding:15px;background:#fff0d0;border:1px solid #c29159}.garage-backup [hidden]{display:none!important}.garage-backup #garageBackupStatus{font-weight:bold;color:#31543d}
#recipeGallery{max-width:880px}#recipeGallery header>div,#rankedDialog header>div{display:block}#rankedDialog{max-width:740px}#rankedDialog #rankMe{white-space:nowrap}
@media(max-width:900px) and (orientation:portrait){body>header{height:86px;padding:3px 10px;display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow:hidden}body>header .brand{height:32px;min-height:32px;align-self:flex-start}body>header>div{display:flex;flex-wrap:nowrap;align-items:center;width:100%;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;min-height:46px}body>header .text-button{font-size:11px;min-height:44px;min-width:44px;flex:0 0 auto;padding:7px 10px;border:1px solid #d5c29b;border-radius:6px;background:#fff8e8;white-space:nowrap}.editor-workspace{height:calc(100dvh - 234px - env(safe-area-inset-bottom))}#openRecipes{order:-3}#openRanked{order:-2}#openGarage{order:-1}}