body[data-game="salon"] .game-progress { display: none; }
body[data-game="salon"] .game-content { width: min(980px, 100%); }
body[data-game="salon"] .play-heading { padding-bottom: 4px; }
body[data-game="salon"] .play-heading h1 { font-size: clamp(1.3rem, 2.7vw, 2rem); }
.salon-scene { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.salon-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.salon-doll { display: block; width: 100%; height: 100%; max-width: 650px; overflow: visible; touch-action: none; cursor: crosshair; border-radius: 30px; }
.salon-doll[data-pointer-focus]:focus { outline: none; }
.salon-doll:focus-visible { outline: 2px dashed var(--tf-text-muted); outline-offset: -5px; }
.salon-tray { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; gap: 8px; }
.salon-tools { display: flex; gap: 14px; }
.salon-tool { display: flex; flex-direction: column; align-items: center; width: 84px; height: 86px; padding: 5px; border: 2px solid transparent; border-radius: 18px; background: var(--tf-surface); color: var(--tf-text); touch-action: manipulation; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 6%); }
.salon-tool svg { width: 50px; height: 52px; pointer-events: none; }
.salon-tool span { font: 600 13px/1.3 var(--tf-font); pointer-events: none; }
.salon-tool[aria-pressed="true"] { border-color: var(--tf-text); background: var(--tf-surface-hover); }
.salon-options { position: relative; width: 100%; height: 46px; flex: 0 0 46px; }
.salon-colors, .salon-textures { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 6px; }
.salon-colors[hidden], .salon-textures[hidden] { display: none; }
.salon-quick-undo { position: absolute; bottom: 8px; left: max(8px, calc((100% - 650px) / 2 + 8px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--tf-border); border-radius: 50%; color: var(--tf-text); background: var(--tf-surface); touch-action: manipulation; }
.salon-quick-undo svg { width: 22px; height: 22px; pointer-events: none; }
.salon-quick-undo:disabled { opacity: .35; }
.salon-texture { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 106px; padding: 6px 10px; border: 1px solid var(--tf-border); border-radius: 22px; color: var(--tf-text); background: transparent; font: 600 13px/1.2 var(--tf-font); touch-action: manipulation; }
.salon-texture svg { width: 25px; height: 25px; pointer-events: none; }
.salon-texture[aria-pressed="true"] { border-color: var(--tf-text); background: var(--tf-surface-hover); }
.salon-save-icon { width: 18px; height: 18px; vertical-align: -.18em; margin-right: 7px; }
.salon-color { flex: 0 0 44px; width: 44px; height: 44px; padding: 5px; border: 2px solid transparent; border-radius: 50%; background: transparent; touch-action: manipulation; }
.salon-color span { display: block; width: 100%; height: 100%; background: var(--salon-color); border-radius: 50%; pointer-events: none; }
.salon-color[aria-pressed="true"] { border-color: var(--tf-text); }
.salon-color[aria-pressed="true"] span::after { content: '✓'; color: #fff; font-size: 22px; text-shadow: 0 1px 2px #30434a; }
.salon-parent-tools { padding: 14px 0; border-bottom: 1px solid var(--tf-border); }
.salon-parent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.salon-parent-tools p { margin-bottom: 0; }
.salon-hint .salon-tool[aria-pressed="true"] { outline: 2px dashed var(--tf-text-muted); outline-offset: 4px; }
@media (max-width: 600px) {
 .salon-tools { gap: 8px; }
 .salon-tool { width: 65px; height: 78px; border-radius: 15px; }
 .salon-tool svg { width: 45px; height: 47px; }
 body[data-game="salon"] .play-heading > p:last-child { font-size: .8rem; }
 .salon-scene { gap: 4px; }
}
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
 .salon-scene { flex-direction: row; gap: 14px; }
 .salon-stage { height: 100%; }
 .salon-tray { width: 190px; padding-right: 0; }
 .salon-tools { display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; }
 .salon-tool { width: 44px; height: 62px; padding: 2px; }
 .salon-tool svg { width: 36px; height: 36px; }
 .salon-tool span { font-size: 11px; }
 .salon-options { height: 88px; flex-basis: 88px; }
 .salon-colors { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 0 4px; }
 .salon-textures { flex-direction: column; gap: 0; }
 .salon-texture { width: 128px; flex: 0 0 44px; }
 .salon-quick-undo { left: 0; bottom: 0; }
 .salon-color { width: 44px; height: 44px; flex: 0 0 44px; }
 body[data-game="salon"] .play-heading { position: absolute; top: 18px; left: 155px; right: 105px; padding: 0; }
 body[data-game="salon"] .play-heading h1 { font-size: 17px; }
 body[data-game="salon"] .play-heading > p:last-child { font-size: 11px; }
 body[data-game="salon"] .play-topline { flex-basis: 66px; }
 body[data-game="salon"] .play-brand { display: none; }
 body[data-game="salon"] .play-view { --play-bottom-space: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 360px) and (min-aspect-ratio: 1/1) { body[data-game="salon"] .play-heading > p:last-child { display: none; } .salon-tray { gap: 3px; } .salon-tools { gap: 4px; } }