.kr-room { position: absolute; inset: 102px 0 0; overflow: hidden; color: #34584b; background: #eee7d9; isolation: isolate; }
.kr-scenery { position: absolute; inset: 0; pointer-events: none; }
.kr-scenery > svg { width: 1280px; height: 698px; display: block; }
.kr-title { position: absolute; top: 17px; left: 28px; z-index: 3; }
.kr-title small { display: block; color: #927e61; font-size: 12px; font-weight: 750; letter-spacing: 2.5px; }
.kr-title strong { display: block; margin-top: 5px; font-size: 30px; font-weight: 700; letter-spacing: -.8px; }
.kr-recipes { position: absolute; top: 15px; left: 429px; height: 54px; border: 1px solid #dfd7c4; border-radius: 18px; padding: 0 15px; background: #fffbf0; display: flex; align-items: center; gap: 8px; font-size: 18px; z-index: 3; }
.kr-chef { position: absolute; top: 170px; left: 330px; width: 180px; height: 283px; z-index: 2; transition: left .6s ease-in-out; transform-origin: 50% 100%; }
.kr-chef svg { display: block; width: 100%; height: 100%; filter: drop-shadow(1px 5px 3px #5c4b3615); }
.kr-arm-left { transform-origin: 63px 143px; }
.kr-arm-right { transform-origin: 148px 145px; }
.kr-held-spoon, .kr-held-knife { display: none; }
.kr-do-cut .kr-held-knife { display: block; }
.kr-do-mix .kr-held-spoon, .kr-do-fry .kr-held-spoon, .kr-do-bake .kr-held-spoon { display: block; }
.kr-do-cut .kr-arm-right { animation: krChop .32s ease-in-out 4; }
.kr-do-mix .kr-arm-right { animation: krStir .4s ease-in-out 3; }
.kr-do-fry .kr-arm-right, .kr-do-bake .kr-arm-right { animation: krStir .5s ease-in-out 2; }
.kr-do-wash .kr-arm-left, .kr-do-wash .kr-arm-right { animation: krChop .3s ease-in-out 4; }
.kr-do-wave .kr-arm-right, .kr-do-reach .kr-arm-right { animation: krWave .6s ease-in-out 2; }
.kr-counter-mask { position: absolute; left: 22px; top: 418px; width: 920px; height: 176px; background: linear-gradient(90deg, transparent 30%, #497565 30%, #497565 30.3%, transparent 30.3%, transparent 65%, #497565 65%, #497565 65.3%, transparent 65.3%), #638f81; border-radius: 0 0 15px 15px; z-index: 3; pointer-events: none; }
.kr-counter-mask::before, .kr-counter-mask::after { content: ''; position: absolute; top: 35px; width: 185px; height: 11px; border-radius: 5px; background: #dbe5d5; }
.kr-counter-mask::before { left: 335px; }.kr-counter-mask::after { left: 658px; }
.kr-board { position: absolute; top: 329px; left: 308px; width: 315px; height: 171px; border-radius: 28px; background: linear-gradient(110deg,#f3dcb7,#dfba86); border: 5px solid #edcea1; box-shadow: 0 10px 0 #bd9567,0 15px 17px #42574a18; display: grid; place-items: center; z-index: 5; }
.kr-board::after { content: 'Нарезать'; position: absolute; bottom: -42px; left: 104px; background: #edf1e4; color: #436c58; font-size: 17px; padding: 7px 14px; border-radius: 12px; }
.kr-empty-board { display: grid; place-items: center; color: #94744e; font-size: 18px; }
.kr-empty-board svg { height: 90px !important; width: 160px !important; opacity: .65; }
.kr-amount { position: absolute; top: 475px; left: 567px; z-index: 6; border-radius: 12px; background: #fff5dd; padding: 5px 11px; font-size: 17px; color: #8b7149; pointer-events: none; }
.kr-bowl { position: absolute; top: 327px; left: 630px; width: 98px; height: 112px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 17px; }
.kr-mix-bowl { width: 91px; height: 62px; border-radius: 15px 15px 48px 48px; background: #eadac0; box-shadow: inset 0 9px 0 #fff2d9,0 6px 0 #ae9875; font-size: 42px; line-height: 1.2; color: #a78f68; }
.kr-bowl > span:last-child { background: #edf1e4; padding: 6px 9px; border-radius: 10px; }
.kr-sink { position: absolute; top: 277px; left: 730px; width: 180px; height: 150px; z-index: 4; }
.kr-station-tag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 18px; background: #edf1e4; color: #436c58; padding: 7px 14px; border-radius: 12px; }
.kr-water { display: none; position: absolute; top: 44px; left: 16px; width: 10px; height: 53px; border-radius: 8px; background: repeating-linear-gradient(#abdfef 0 8px,#d3edf2 8px 13px); }
.kr-stove { position: absolute; top: 263px; left: 54px; width: 234px; height: 164px; z-index: 4; }
.kr-pan { display: block; position: absolute; left: 20px; top: 0; transform: scaleY(.75); }
.kr-pan svg { filter: drop-shadow(0 6px 4px #283f361a); }
.kr-steam { position: absolute; top: 2px; left: 42px; font-size: 38px; color: #fff9e9; opacity: 0; pointer-events: none; }
.kr-oven { position: absolute; top: 475px; left: 80px; width: 188px; height: 86px; background: #263f3a; border: 7px solid #44635a; border-radius: 14px; z-index: 4; color: #e4eddf; font-size: 19px; }
.kr-oven::before { content: ''; position: absolute; left: 12px; right: 12px; top: 5px; height: 6px; background: #b2c0b3; border-radius: 5px; }
.kr-oven-light { position: absolute; inset: 14px 8px 5px; border-radius: 7px; background: #e7b078; opacity: 0; }
.kr-oven > span:last-child { position: relative; top: 7px; }
.kr-fridge { position: absolute; right: 22px; top: 24px; width: 291px; height: 640px; background: #e6ede3; border: 8px solid #bdcfc1; border-radius: 33px; box-shadow: 7px 10px 0 #738f7b22; z-index: 7; overflow: hidden; }
.kr-fridge-title { height: 50px; display: grid; place-items: center; font-size: 24px; font-weight: 650; color: #4a715b; letter-spacing: -.5px; }
.kr-tabs { display: flex; padding: 0 7px; gap: 5px; }
.kr-tab { flex: 1; height: 70px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #d5e1d4; gap: 2px; font-size: 14px; }
.kr-tab[aria-pressed="true"] { background: #fffdf4; box-shadow: 0 3px 0 #adc4af; }
.kr-products { margin: 14px 8px 0; min-height: 327px; display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 102px; gap: 7px 4px; align-content: start; padding: 4px; border-radius: 15px; background: repeating-linear-gradient(#f5f7ef 0 102px,#b8caba 102px 109px); }
.kr-product { display: flex; align-items: center; flex-direction: column; justify-content: center; border-radius: 13px; font-size: 13px; line-height: 1.1; touch-action: none; user-select: none; }
.kr-product svg { pointer-events: none; flex: none; }
.kr-product span { pointer-events: none; }
.kr-product:hover { background: #ffffffc9; }
.kr-word { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 143px; width: calc(100% - 20px); margin: 10px; border-radius: 18px; background: #f7f8ef; gap: 2px; }
.kr-word span { font-size: 20px; line-height: 1.25; padding: 0 5px; }
.kr-word b { font-family: "Noto Naskh Arabic", "DejaVu Sans", serif; font-size: 35px; font-weight: 400; line-height: 1.45; }
.kr-word small { font-size: 15px; color: #84917a; }
.kr-toolbar { position: absolute; left: 30px; top: 605px; width: 914px; height: 70px; display: flex; gap: 12px; align-items: center; z-index: 6; }
.kr-tool { display: flex; align-items: center; justify-content: center; gap: 9px; height: 66px; min-width: 126px; padding: 0 15px; border-radius: 20px; background: #f7f4e9; box-shadow: 0 4px 0 #bba990; font-size: 20px; }
.kr-tool svg { width: 31px !important; height: 31px !important; }
.kr-tool:disabled { opacity: .45; cursor: default; }
.kr-serve { margin-left: auto; background: #396a53; color: #fff; height: 70px; width: 298px; border-radius: 23px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 24px; box-shadow: 0 4px 0 #254c3a; }
.kr-caption { position: absolute; top: 79px; left: 28px; max-width: 545px; padding: 8px 13px; border-radius: 12px; background: #fcf7e7ed; color: #7d795e; font-size: 17px; line-height: 1.3; z-index: 3; pointer-events: none; }
.kr-drag-ghost { position: absolute; width: 90px; height: 90px; z-index: 30; pointer-events: none; filter: drop-shadow(0 10px 8px #22372b33); }
.kr-active-wash .kr-water { display: block; animation: krWater .22s linear infinite; }
.kr-active-fry .kr-steam, .kr-active-bake .kr-steam { animation: krSteam .7s ease-out infinite; }
.kr-active-fry .kr-pan { animation: krPan .45s ease-in-out 3; }
.kr-active-bake .kr-oven-light { opacity: .8; }
.kr-active-cut .kr-board svg { animation: krChopFood .28s ease-in-out 5; }
.kr-active-mix .kr-mix-bowl { animation: krPan .45s ease-in-out 3; }
.kr-pop { animation: krPop .25s ease-out; }
.kr-serving { position: absolute; inset: 0; background: #f5f0e3fa; z-index: 40; text-align: center; padding-top: 62px; }
.kr-serving h2 { margin: 0; font-size: 43px; font-weight: 700; letter-spacing: -1px; }
.kr-serving-note { font-size: 23px; color: #7a896e; margin: 17px 0; }
.kr-serving-table { position: absolute; top: 208px; left: 100px; right: 100px; height: 285px; border-radius: 100px; background: #dfc6a2; border: 12px solid #ebd5b6; display: flex; align-items: center; justify-content: center; gap: 30px; }
.kr-serving-plate { position: relative; width: 285px; height: 235px; border-radius: 50%; background: #faf6e9; display: grid; place-items: center; box-shadow: 0 6px 0 #c7b59a; }
.kr-serving-plate > span { position: absolute; bottom: 8px; left: 0; right: 0; font-size: 25px; color: #65946f; }
.kr-close-serving { position: absolute; bottom: 38px; left: 45px; height: 64px; padding: 0 24px; border-radius: 20px; background: #e2e7d5; font-size: 23px; }
.kr-next-dish { position: absolute; bottom: 32px; right: 54px; height: 74px; padding: 0 24px; border-radius: 23px; background: #396a53; color: #fff; font-size: 26px; display: flex; align-items: center; gap: 18px; }
.kr-next-dish svg { width: 35px; height: 35px; }
.kr-room button:focus-visible { outline: 4px solid #b98042; outline-offset: 4px; }
.kr-room button:active:not(:disabled):not(.kr-chef) { filter: brightness(.98); }
@keyframes krChop { 50% { transform: rotate(-42deg); } }
@keyframes krStir { 25% { transform: rotate(-35deg) translate(8px,-6px); } 75% { transform: rotate(-15deg) translate(-8px,3px); } }
@keyframes krWave { 30%,70% { transform: rotate(-128deg); } 50% { transform: rotate(-98deg); } }
@keyframes krWater { to { background-position: 0 13px; } }
@keyframes krSteam { from { opacity: 0; transform: translateY(10px); } 50% { opacity: 1; } to { opacity: 0; transform: translateY(-20px); } }
@keyframes krPan { 50% { transform: translateY(-8px) rotate(-6deg); } }
@keyframes krChopFood { 50% { transform: translateY(3px); } }
@keyframes krPop { 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .kr-room *, .kr-room *::before, .kr-room *::after { animation: none !important; transition: none !important; } }