:root{color:#513745;background:#ffe9f4;font-family:Hiragino Maru Gothic ProN,Yu Gothic,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{overflow:hidden}.salon-game{width:min(100%,720px);height:100svh;padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:linear-gradient(#ffe8f4,#dff6ff);grid-template-rows:50px minmax(0,1fr);margin:auto;display:grid}.salon-toolbar{z-index:20;grid-template-columns:46px 1fr 46px 46px;align-items:center;gap:7px;display:grid}.salon-round{color:#fff;background:linear-gradient(#ff9dca,#d9549a);border:3px solid #fff;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;font:900 25px/1 system-ui;text-decoration:none;display:grid;box-shadow:0 4px #a83e79}.salon-stage{touch-action:none;background:linear-gradient(#fbd8ec 0 78%,#c2e6ef 78%);border:4px solid #fff;border-radius:29px;grid-template-rows:minmax(0,1fr) 102px;min-height:0;display:grid;position:relative;overflow:hidden;box-shadow:0 7px #bc8eaa}.mirror{place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.mirror:before{content:"";pointer-events:none;border:9px solid #f7b7d6;border-radius:46% 46% 34% 34%;position:absolute;inset:2% 4%;box-shadow:inset 0 0 0 6px #fff8,0 5px #b9789c}canvas{z-index:1;aspect-ratio:360/430;touch-action:none;width:auto;max-width:100%;height:100%;max-height:100%;display:block;position:relative}.hair-tools{z-index:4;background:linear-gradient(#fff4bd,#f4bd65);border-top:5px solid #fff;grid-template-columns:repeat(4,1fr);gap:7px;padding:9px 10px 12px;display:grid;box-shadow:inset 0 6px #ffffff70}.hair-tool{aspect-ratio:1;touch-action:manipulation;background:#fff9ec;border:5px solid #fff;border-radius:24px;place-items:center;width:min(100%,78px);margin:auto;padding:0;transition:transform .12s,filter .12s;display:grid;position:relative;box-shadow:0 5px #b87845}.hair-tool span{font:900 38px/1 system-ui}.hair-tool.is-selected{filter:drop-shadow(0 0 9px #fff16a);transform:translateY(-6px)scale(1.06);box-shadow:0 8px #b87845,0 0 0 5px #ffeb65}.hair-tool--pink span{background:radial-gradient(circle at 35% 28%,#ff9fc8,#f04f9b 66%);border:6px solid #fff;border-radius:50%;width:47px;height:47px;box-shadow:0 3px #b82d70}.hair-tool--rainbow{background:linear-gradient(135deg,#fff,#fff4c9)}.tool-cursor{z-index:8;pointer-events:none;background:#ffffffd9;border:4px solid #fff;border-radius:50%;place-items:center;width:66px;height:66px;display:none;position:absolute;transform:translate(-50%,-50%);box-shadow:0 5px 10px #733f5d40}.tool-cursor.is-visible{display:grid}.tool-cursor span:before{content:"✂";font:900 34px/1 system-ui}.tool-cursor[data-tool=pink] span:before{color:#f04f9b;content:"●"}.tool-cursor[data-tool=rainbow] span:before{content:"🌈"}.salon-round:focus-visible,.hair-tool:focus-visible{outline-offset:2px;outline:5px solid #2d5794}@media (height<=660px){.salon-stage{grid-template-rows:minmax(0,1fr) 88px}.hair-tools{padding:6px 9px 8px}.hair-tool{border-radius:20px;max-width:66px}.hair-tool span{font-size:32px}.hair-tool--pink span{width:41px;height:41px}.mirror:before{inset:1% 7%}}@media (width<=370px){.salon-stage{grid-template-rows:minmax(0,1fr) 91px}.hair-tools{gap:4px;padding-inline:6px}.hair-tool{max-width:67px}}.color-palette{z-index:12;background:#fff5d9ee;border:4px solid #fff;border-radius:25px;justify-content:center;gap:7px;padding:9px;display:flex;position:absolute;bottom:110px;left:8px;right:8px;box-shadow:0 6px #b87845,0 7px 18px #5c33484d}.color-palette[hidden]{display:none}.color-palette button{background:var(--swatch);touch-action:manipulation;border:5px solid #fff;border-radius:50%;flex:0 0 43px;width:43px;height:43px;padding:0;box-shadow:0 3px #995f45}.color-palette button.is-selected{outline:5px solid #ffdc4f;transform:translateY(-3px)}.hair-tool--pink span{background:radial-gradient(circle at 35% 28%,#fff8,var(--selected-hair-color,#f04f9b) 34% 72%);box-shadow:0 3px 0 color-mix(in srgb,var(--selected-hair-color,#f04f9b),#54203c 42%)}.tool-cursor[data-tool=pink] span:before{color:var(--selected-hair-color,#f04f9b)}.color-palette button:focus-visible{outline-offset:2px;outline:5px solid #2d5794}@media (height<=660px){.color-palette{padding:7px;bottom:96px}.color-palette button{flex-basis:39px;width:39px;height:39px}}.accessory-tray{z-index:12;background:#fff5d9ee;border:4px solid #fff;border-radius:25px;justify-content:center;gap:9px;padding:9px;display:flex;position:absolute;bottom:110px;left:12px;right:12px;box-shadow:0 6px #b87845,0 7px 18px #5c33484d}.accessory-tray[hidden],.accessory-trash[hidden]{display:none}.accessory-tray button{touch-action:none;background:#fff9ec;border:4px solid #fff;border-radius:17px;flex:0 0 49px;place-items:center;width:49px;height:49px;padding:0;font-size:29px;display:grid;box-shadow:0 4px #995f45}.accessory-trash{z-index:15;pointer-events:none;background:#ff867d;border:5px solid #fff;border-radius:20px;place-items:center;width:62px;height:62px;font-size:32px;display:grid;position:absolute;top:12px;right:12px;box-shadow:0 5px #a64b50}.accessory-drag-preview{z-index:1000;pointer-events:none;background:#fff9ec;border:4px solid #fff;border-radius:19px;place-items:center;width:58px;height:58px;font-size:34px;display:grid;position:fixed;transform:translate(-50%,-65%);box-shadow:0 6px 14px #51374555}.accessory-tray button:focus-visible{outline-offset:2px;outline:5px solid #2d5794}@media (height<=660px){.accessory-tray{padding:7px;bottom:96px}.accessory-tray button{flex-basis:43px;width:43px;height:43px;font-size:25px}}.hair-tool--grow .grow-icon{justify-content:center;align-items:flex-end;gap:3px;width:49px;height:53px;display:flex;position:relative}.hair-tool--grow .grow-icon i{background:linear-gradient(90deg,#7b4b35,#d8976c);border:3px solid #6b3f2b;border-top:0;border-radius:0 0 8px 8px;width:7px;height:42px;display:block}.hair-tool--grow .grow-icon i:nth-child(2){height:49px}.hair-tool--grow .grow-icon b{color:#fff;background:#62c95a;border-radius:50%;place-items:center;width:25px;height:25px;font:900 21px/1 system-ui;display:grid;position:absolute;top:-4px;right:-7px}.tool-cursor[data-tool=grow] span:before{content:"〰＋"}