.modal.kitchen-modal{width:min(900px,calc(100vw - 24px));height:min(88vh,880px);max-height:88vh;padding:0;display:flex;flex-direction:column;overflow:hidden;background:#fff8e9;border:6px solid #30211f;border-radius:28px;box-shadow:0 10px 0 #1b1317,0 24px 70px #0008;color:#2e211d;font-family:'Be Vietnam Pro',sans-serif}
.ki-head{background:#ffdc58;border-bottom:5px solid #30211f;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex:none}.ki-head small{font:700 13px 'VT323',monospace;letter-spacing:2px;color:#744519}.ki-head h2{margin:0;font:800 clamp(28px,4vw,40px) 'Baloo 2',sans-serif;line-height:1.05}.ki-close{background:#fff8e9;border:4px solid #30211f;border-radius:12px;font-size:31px;font-weight:900;line-height:1;width:48px;height:48px;cursor:pointer}
.ki-tabs{display:flex;gap:7px;padding:12px 14px 8px;border-bottom:3px solid #e4c998;overflow-x:auto;flex:none}.ki-tabs button{white-space:nowrap;flex:1;min-width:max-content;padding:9px 14px;background:#fff3d7;border:3px solid #352522;border-radius:14px;font:800 15px 'Baloo 2',sans-serif;cursor:pointer}.ki-tabs button.on{background:#ffce35;box-shadow:0 4px 0 #9c651d}.ki-body{overflow:auto;padding:16px;min-height:0;flex:1}.ki-section{background:#fffaf0;border:3px solid #d9be8a;border-radius:18px;padding:14px;margin-bottom:14px}.ki-section h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font:800 22px 'Baloo 2',sans-serif}.ki-section h3 span{font:700 18px 'VT323',monospace;color:#8a5b26}.ki-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ki-slot{height:105px;background:#fff3dd;border:3px dashed #bd9f67;border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;font:800 16px 'Baloo 2',sans-serif;cursor:pointer}.ki-slot.filled{border-style:solid;background:#ffedc4}.ki-slot img{width:58px;height:58px;image-rendering:pixelated}.ki-slot b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ki-main-btn{display:block;width:100%;margin-top:14px;font-size:22px!important}.ki-known{background:#e5f7e7;padding:8px 12px;margin-top:12px;border-radius:8px;font-weight:700}.ki-tools{display:flex;gap:8px;margin-bottom:12px}.ki-tools input,.ki-tools select{min-width:0;background:white;border:3px solid #bba276;border-radius:10px;padding:10px;font:600 15px 'Be Vietnam Pro',sans-serif}.ki-tools input{flex:1}.ki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}.ki-card,.ki-market{position:relative;min-width:0;background:#fff8e8;border:3px solid #352521;border-radius:17px;box-shadow:0 4px 0 #352521;padding:9px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:#332422}.ki-card{cursor:pointer;min-height:172px}.ki-card strong,.ki-market strong{order:1;font:800 15px/1.25 'Baloo 2',sans-serif;min-height:36px;display:flex;align-items:center;justify-content:center}.ki-card img,.ki-market img{order:2;width:80px;height:80px;image-rendering:pixelated;object-fit:contain}.ki-card small,.ki-market small{order:3;font-weight:700;font-size:11px;color:#816d55}.ki-card-top{width:100%;display:flex;justify-content:space-between;align-items:center;order:0}.ki-card-top b{border-radius:7px;background:#765637;color:#fff;padding:2px 7px;font:800 17px 'VT323',monospace}.ki-card-top em{font:800 17px 'VT323',monospace;background:#30213e;color:white;padding:2px 7px;border-radius:7px}.ki-card.ki-uncommon,.ki-market.ki-uncommon{background:#e9faf4;border-color:#188b70}.ki-card.ki-rare,.ki-market.ki-rare{background:#e2f2ff;border-color:#4079c0}.ki-card.ki-legendary,.ki-market.ki-legendary{background:#f2e0ff;border-color:#904bc2}.ki-card.ki-sss,.ki-market.ki-sss{background:linear-gradient(135deg,#fff7c3,#ffcf71 60%,#fba78c);border-color:#a54328;box-shadow:0 4px 0 #683018,0 0 16px #ffb93c88}.ki-card.ki-sss strong{color:#9b311e}.ki-market .btn{order:4;width:100%;padding:6px}.ki-dishes{display:grid;gap:10px}.ki-dish{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:10px;background:#fff5df;border:3px solid #4a3328;border-radius:15px;padding:9px}.ki-dish img{width:74px;height:74px;image-rendering:pixelated}.ki-dish strong{display:block;font:800 18px 'Baloo 2',sans-serif}.ki-dish small{display:block;font-size:12px;color:#6b5747;font-weight:700}.ki-dish-actions{display:flex;flex-direction:column;gap:5px}.ki-dish-actions button{font-size:12px;padding:5px 9px}.ki-dish.ki-perfect{background:linear-gradient(120deg,#fff4bb,#ffd5a1);border-color:#aa542c}.ki-result{text-align:center;background:#30203f;border:5px solid #bfa2d5;border-radius:22px;padding:18px;color:#fff4d8}.ki-result-badge{font:800 19px 'VT323',monospace;color:#ffdc73;letter-spacing:2px}.ki-result h3{font:800 clamp(25px,5vw,39px) 'Baloo 2',sans-serif;margin:6px}.ki-result img{display:block;margin:auto;width:min(58%,240px);aspect-ratio:1;image-rendering:pixelated}.ki-result-meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:10px}.ki-result-meta b{color:#ffd34e}.ki-result-meta strong{font:800 25px 'VT323',monospace;color:#fff}.ki-result-meta span{background:#ffdd74;color:#512b25;border-radius:6px;padding:3px 8px;font-weight:900}.ki-result .btn{min-width:170px}.ki-hunt>div,.ki-specials{display:flex;gap:8px;flex-wrap:wrap}.ki-hunt small{display:block;margin-top:8px;font-weight:700}.ki-best{background:#ffdf7e;border:2px solid #a16a2c;border-radius:10px;padding:9px 12px;margin-bottom:12px;font-weight:700}
@media(max-width:600px){.modal.kitchen-modal{width:calc(100vw - 12px);height:calc(100dvh - 18px);max-height:calc(100dvh - 18px);border-width:4px;border-radius:20px}.ki-head{padding:10px 13px}.ki-tabs{padding:8px;gap:5px}.ki-tabs button{font-size:13px;padding:7px 10px}.ki-body{padding:9px}.ki-section{padding:10px}.ki-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ki-card{min-height:166px}.ki-card img{width:72px;height:72px}.ki-slot{height:92px;font-size:12px}.ki-slot img{width:52px;height:52px}.ki-dish{grid-template-columns:55px 1fr;gap:6px}.ki-dish img{width:54px;height:54px}.ki-dish-actions{grid-column:1/-1;flex-direction:row}.ki-dish-actions button{flex:1}.ki-tools input,.ki-tools select{font-size:12px;padding:7px}}
.ki-result.ki-perfect{background:radial-gradient(circle at 50% 12%,#6b447d,#291b3e 70%);border-color:#ffdb6c;box-shadow:0 0 0 3px #8e5529,0 0 28px #ffcd6580}
.ki-result.ki-perfect h3{color:#ffe8a0;text-shadow:2px 3px #642e43}
.ki-result.ki-perfect .ki-result-badge{color:#fff3b3;text-shadow:0 0 9px #ffe27d}
.ki-result.ki-perfect .ki-result-meta strong{color:#fff0a5;font-size:31px}
.ki-result.ki-low{background:#3a313e;border-color:#8b7984}.ki-result.ki-low .ki-result-badge{color:#d2b5b5}
.ki-pages{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px;font:800 17px 'VT323',monospace}
.ki-pages .btn{padding:6px 12px;font-size:12px}
.ki-dish strong{font:800 18px/1.25 'Baloo 2',sans-serif;text-wrap:balance}
.ki-result h3{max-width:26ch;margin:6px auto;font:800 clamp(25px,5vw,39px)/1.15 'Baloo 2',sans-serif;text-wrap:balance}

.ki-market-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ki-market .ki-card-top span{font-size:11px;font-weight:800}.ki-uncommon .ki-card-top b{background:#176d58}.ki-rare .ki-card-top b{background:#245b99}.ki-legendary .ki-card-top b{background:#7133a5;color:#fff0b7}.ki-sss .ki-card-top b{background:#632f7b;color:#ffe783}.ki-market .btn{min-height:44px}.ki-exchange{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center}.ki-exchange img{width:64px;height:64px;image-rendering:pixelated;background:#ffdf83;border-radius:12px}.ki-exchange select{min-width:0;width:100%;min-height:44px;padding:8px;border:2px solid #af7b34;border-radius:9px;background:#fff6de;font:700 15px 'Baloo 2',sans-serif}.ki-exchange .btn{min-height:44px;padding:8px 12px}@media(max-width:600px){.ki-market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ki-exchange{grid-template-columns:54px minmax(0,1fr)}.ki-exchange img{width:54px;height:54px}.ki-exchange .btn{grid-column:1/-1}}

/* Sáng tạo món: nhịp gacha 2,2 giây, chỉ chạy ở lớp trình bày. */
.ki-reveal { position:relative; isolation:isolate; min-height:480px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%,#5e3a6d 0,#2c203b 54%,#1b172a 100%); color:#fff4dc; border:5px solid #d8ab54; border-radius:22px; text-align:center; }
.ki-reveal-glow { position:absolute; width:440px; height:440px; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 10%,#ffe29255 16%,transparent 24% 35%,#f2a6ff55 45%,transparent 56% 70%,#ffe29255 80%,transparent 90%); filter:blur(10px); animation:kiSpin 3s linear infinite; z-index:-1; }
.ki-reveal-ring { position:absolute; top:50%; left:50%; width:240px; height:240px; border:4px dashed #ffd67c; border-radius:50%; box-shadow:0 0 20px #ffca5a77,inset 0 0 20px #ffca5a77; transform:translate(-50%,-50%); animation:kiRing 2.2s ease-in both; }
.ki-reveal-parts { position:relative; width:250px; height:190px; margin-top:-25px; }
.ki-reveal-parts img { position:absolute; left:calc(50% - 42px); top:35px; width:84px; height:84px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 10px #ffd56f); transform:translateX(var(--sx)) scale(1); animation:kiGather 1.6s cubic-bezier(.22,.8,.24,1) both; }
.ki-reveal-parts img:nth-child(2) { animation-delay:.12s; }.ki-reveal-parts img:nth-child(3) { animation-delay:.24s; }
.ki-reveal-pot { position:relative; margin-top:-75px; width:150px; height:140px; display:grid; place-items:center; background:linear-gradient(145deg,#ffe393,#d58b3b); border:6px solid #62354d; border-radius:45% 45% 38% 38%; box-shadow:0 9px 0 #2b172c,0 0 30px #ffcb5eaa; animation:kiPot 2.2s ease-in-out both; }
.ki-reveal-pot:before { content:''; position:absolute; top:-14px; left:-13px; right:-13px; height:28px; background:#ad6b39; border:5px solid #65364d; border-radius:50%; }
.ki-reveal-pot b { font:800 72px/1 'Baloo 2',sans-serif; color:#71344e; text-shadow:0 3px #ffedaf; }
.ki-reveal-pot span { position:absolute; top:-53px; font-size:44px; color:#fff1aa; text-shadow:0 0 20px #fff; animation:kiStar .4s ease-in-out infinite alternate; }
.ki-reveal-sparks { position:absolute; top:42%; left:50%; width:1px; height:1px; }
.ki-reveal-sparks i { position:absolute; width:8px; height:8px; background:#ffdf6e; transform:rotate(45deg); box-shadow:0 0 12px #fff1a6; animation:kiSpark 1.1s calc(var(--i)*.08s) ease-out infinite; --a:calc(var(--i)*30deg); }
.ki-reveal>strong { position:relative; margin-top:32px; font:800 clamp(19px,3vw,27px) 'Baloo 2',sans-serif; letter-spacing:.08em; text-shadow:0 3px #55314e; }
.ki-reveal>p { position:relative; margin:3px 0 12px; color:#ffe5b0; }
.ki-reveal-progress { width:min(260px,75%); height:10px; border:2px solid #f4cc79; border-radius:999px; overflow:hidden; background:#4b2a50; }
.ki-reveal-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ff9c43,#fff3ac,#ffbe5d); transform-origin:left; animation:kiProgress 2.2s linear both; }
.ki-result { animation:kiResult .4s cubic-bezier(.18,1.5,.45,1) both; }
.ki-result.ki-perfect,.ki-result:has(.ki-result-meta span) { position:relative; }
@keyframes kiSpin { to { transform:rotate(360deg); } }
@keyframes kiGather { 0% { transform:translateX(var(--sx)) translateY(-50px) scale(.9); opacity:0; } 30% { opacity:1; } 80% { transform:translateX(var(--sx)) translateY(0) scale(1.1); opacity:1; } 100% { transform:translateX(0) translateY(70px) scale(.12); opacity:0; } }
@keyframes kiRing { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(90deg); } }
@keyframes kiPot { 0%,45% { transform:rotate(0) scale(1); } 55%,75% { transform:rotate(-4deg) scale(1.05); } 65%,85% { transform:rotate(4deg) scale(1.06); } 100% { transform:scale(1.22); filter:brightness(1.8); } }
@keyframes kiStar { to { transform:scale(1.28) rotate(20deg); } }
@keyframes kiSpark { 0% { opacity:0; transform:rotate(var(--a)) translateX(18px) rotate(45deg) scale(.1); } 25% { opacity:1; } 100% { opacity:0; transform:rotate(var(--a)) translateX(145px) rotate(45deg) scale(1); } }
@keyframes kiProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes kiResult { from { opacity:0; transform:scale(.75); filter:brightness(2); } to { opacity:1; transform:scale(1); filter:brightness(1); } }
@media (max-width:600px) { .ki-reveal { min-height:calc(100dvh - 240px); } .ki-reveal-parts { transform:scale(.85); } .ki-reveal-pot { transform:scale(.85); } }
@media (prefers-reduced-motion:reduce) { .ki-reveal *, .ki-result { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* ---------- Đợt 3: chọn nguyên liệu kiểu thư viện ảnh ---------- */
.ki-tab-create{padding-bottom:0}
.ki-chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}.ki-chips::-webkit-scrollbar{display:none}
.ki-chips button{flex:none;padding:6px 12px;border:2.5px solid #352522;border-radius:999px;background:#fff3d7;font:800 13px 'Baloo 2',sans-serif;cursor:pointer;color:#352522}
.ki-chips button.on{background:#ffce35;box-shadow:0 3px 0 #9c651d}
.ki-pickgrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));padding-bottom:14px}
.ki-pickgrid .ki-card{min-height:150px;transition:transform .12s,box-shadow .12s}
.ki-pickgrid .ki-card img{width:64px;height:64px}
.ki-card .ki-ord{position:absolute;right:-7px;bottom:-7px;width:30px;height:30px;border-radius:50%;display:none;place-items:center;background:#2f7cf6;color:#fff;border:3px solid #fff;box-shadow:0 2px 0 #1b3f7a;font:800 16px/1 'Baloo 2',sans-serif;font-style:normal}
.ki-card.sel{outline:4px solid #2f7cf6;outline-offset:1px;transform:scale(.96);box-shadow:0 0 0 7px #2f7cf633,0 3px 0 #352521}
.ki-card.sel .ki-ord{display:grid}
.ki-card.sel img{filter:saturate(1.2) brightness(1.05)}
.ki-tray{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:#30211f;border-top:4px solid #ffce35;color:#fff4d8;box-shadow:0 -8px 18px #30211f44}
.ki-tray.shake{animation:kiShake .35s}
.ki-tray-slots{display:flex;gap:6px}
.ki-tslot{position:relative;width:52px;height:52px;border-radius:12px;border:2.5px dashed #9c7b52;background:#46302b;display:grid;place-items:center;color:#9c7b52;font:800 18px 'Baloo 2',sans-serif;padding:0}
.ki-tslot.filled{border:3px solid #ffce35;background:#fff3dd;cursor:pointer}
.ki-tslot.filled img{width:40px;height:40px;image-rendering:pixelated}
.ki-tslot.filled i{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#2f7cf6;color:#fff;font:800 12px/20px 'Baloo 2',sans-serif;text-align:center;font-style:normal;border:2px solid #fff}
.ki-tray-info{font-size:12.5px;font-weight:600;line-height:1.3;min-width:0;color:#ffe6b3}
.ki-tray-info b{color:#fff}
.ki-create-btn{font-size:17px!important;padding:10px 16px!important;white-space:nowrap}
.ki-empty{grid-column:1/-1;text-align:center;color:#8a6f52;font-weight:600;padding:16px}
@keyframes kiShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- Thực đơn ---------- */
.ki-live{display:flex;flex-wrap:wrap;align-items:center;gap:5px;background:#e5f7e7;border:2px solid #7cc38a;border-radius:10px;padding:7px 10px;margin-bottom:10px;font-weight:700;font-size:12.5px}
.ki-buffs{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.ki-buffs.center{justify-content:center;margin:6px 0 12px}
.ki-buffs i,.ki-live i{font-style:normal;font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:#fff0c7;border:1.5px solid #d6a84a;color:#6b4a18}
.ki-buffs i.live{background:#d9f5de;border-color:#4ea55f;color:#205c2c}
.ki-dish{position:relative}
.ki-dish.on{box-shadow:0 0 0 3px #57b86a}
.ki-dish-main{min-width:0}
.ki-price{color:#b8441c}
.ki-ings{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0 2px}
.ki-ing{display:flex;align-items:center;gap:4px;max-width:100%;padding:2px 7px 2px 3px;border:2px solid #4a3328;border-radius:999px;background:#fff;cursor:pointer;font:700 11.5px 'Be Vietnam Pro',sans-serif;color:#352522}
.ki-ing img{width:22px;height:22px;image-rendering:pixelated}
.ki-ing span{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ki-ing em{font-style:normal;font:800 13px 'VT323',monospace;color:#2d7a3c}
.ki-ing.miss{border-color:#d0463a;background:#ffe8e3}.ki-ing.miss em{color:#c22f22}
.ki-left{color:#2d7a3c!important}.ki-left.none{color:#b25b16!important}
.ki-miss{grid-column:1/-1;font-size:12px;font-weight:700;color:#b12e22;background:#ffe8e3;border-radius:8px;padding:5px 8px}
.ki-miss button{border:0;background:none;padding:0;font:inherit;color:#b12e22;text-decoration:underline;cursor:pointer}
.ki-dish-actions .btn:disabled{opacity:.55;filter:grayscale(.6)}
.ki-result-sale{margin:4px 0 2px;font-weight:700;color:#ffe9b8}.ki-result-sale b{color:#9df0a8}.ki-result-sale em{font-style:normal;color:#ffd34e}

/* ---------- Thẻ nguyên liệu (nguồn hàng) ---------- */
.ki-sheet-wrap{position:absolute;inset:0;z-index:20;background:#1b131788;display:flex;align-items:flex-end;justify-content:center;animation:kiFade .15s}
.ki-sheet{position:relative;width:min(420px,100%);background:#fff8e9;border:4px solid #30211f;border-bottom:0;border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:kiUp .22s cubic-bezier(.2,1.2,.4,1)}
.ki-sheet .x-btn{position:absolute;top:8px;right:8px}
.ki-sheet>img{width:92px;height:92px;image-rendering:pixelated;background:#ffe9b3;border-radius:18px;padding:6px}
.ki-sheet h3{margin:0;font:800 22px 'Baloo 2',sans-serif}
.ki-sheet>small{font-weight:700;color:#816d55}
.ki-sheet-info{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13px;font-weight:600}
.ki-sheet .btn{width:100%}
.ki-sheet .btn-purple{background:linear-gradient(#8f5bd6,#6a36b0);color:#fff;--edge:#4c2386;--lip:#3a1968}
.ki-sheet-note{font-size:12px;color:#8a6f52;font-weight:600}
@keyframes kiFade{from{opacity:0}}@keyframes kiUp{from{transform:translateY(40px);opacity:0}}
@media(max-width:600px){.ki-pickgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ki-pickgrid .ki-card{min-height:132px;padding:6px}.ki-pickgrid .ki-card strong{font-size:12.5px;min-height:32px}.ki-pickgrid .ki-card img{width:50px;height:50px}.ki-pickgrid .ki-card small{display:none}
  .ki-tray{margin:0 -9px;grid-template-columns:auto 1fr;padding:8px 9px calc(8px + env(safe-area-inset-bottom))}.ki-tray .ki-create-btn{grid-column:1/-1}.ki-tslot{width:46px;height:46px}.ki-tslot.filled img{width:34px;height:34px}
  .ki-dish{grid-template-columns:55px 1fr}.ki-ing span{max-width:70px}}
@media (prefers-reduced-motion:reduce){.ki-tray.shake,.ki-sheet,.ki-sheet-wrap{animation:none}}
.modal.kitchen-modal{position:relative}
.ki-mtools{flex-wrap:wrap}.ki-mtools input{flex:1 1 100%}.ki-mtools select{flex:1}
.ki-dish>img{align-self:start}
@media(max-width:600px){.ki-ing span{display:none}.ki-ing{padding:2px 7px 2px 3px}.ki-ing img{width:24px;height:24px}.ki-dish-main strong{font-size:16px}}

/* Một vùng cuộn; tab và thao tác chính luôn nằm ngoài danh sách. */
.modal.kitchen-modal { width:min(820px,calc(100vw - 24px)); height:min(820px,calc(var(--ui-vh,100dvh) - 24px)); max-height:calc(var(--ui-vh,100dvh) - 24px); border-width:4px; border-radius:20px; }
.ki-head { padding:8px 12px; border-bottom-width:3px; gap:10px; }
.ki-head h2 { font-size:23px; line-height:1.15; }
.ki-head .x-btn { flex:none; min-width:44px; min-height:44px; }
.ki-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:7px 8px; overflow:visible; }
.ki-tabs button { min-width:0; min-height:44px; padding:4px 2px; border-width:2px; border-radius:9px; font-size:13px; line-height:1.1; white-space:normal; }
.ki-tabs button.on { box-shadow:0 2px 0 #9c651d; }
.ki-body { padding:10px; overscroll-behavior:contain; scroll-padding:8px; }
.ki-section { padding:10px; border-width:2px; border-radius:12px; margin-bottom:10px; }
.ki-section:last-child { margin-bottom:0; }
.ki-section h3 { gap:8px; margin-bottom:8px; font-size:18px; line-height:1.2; overflow-wrap:anywhere; }
.ki-section h3 span { flex:none; font-size:15px; }
.ki-tools { gap:6px; margin-bottom:8px; }
.ki-tools input, .ki-tools select { min-height:44px; border-width:2px; padding:6px 8px; font-size:14px; }
.ki-tools input { width:100%; }
.ki-tools > select { max-width:45%; }
.ki-chips { gap:6px; padding:0 0 8px; }
.ki-chips button { min-height:44px; padding:5px 10px; border-width:2px; font-size:12px; }
.ki-pickgrid, .ki-grid { gap:8px; padding-bottom:6px; }
.ki-card, .ki-market { border-width:2px; border-radius:12px; padding:6px; box-shadow:0 2px 0 #352521; gap:2px; }
.ki-card { min-height:132px; }
.ki-card img, .ki-market img { width:56px; height:56px; }
.ki-card strong, .ki-market strong { font-size:13px; line-height:1.2; min-height:32px; overflow-wrap:anywhere; }
.ki-card-top b, .ki-card-top em { font-size:16px; line-height:1.1; padding:2px 5px; }
.ki-foot { flex:none; margin:0; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-top:2px solid #d9be8a; background:#fff8e9; }
.ki-foot > .btn { width:100%; min-height:44px; font-size:15px; padding:7px 10px; }
.ki-foot.ki-tray { position:static; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; border-top:3px solid #ffce35; background:#30211f; box-shadow:none; }
.ki-tray-slots { gap:6px; }
.ki-tslot { width:44px; height:44px; border-radius:9px; flex:none; }
.ki-tslot.filled img { width:32px; height:32px; }
.ki-tslot.filled i { width:18px; height:18px; top:-5px; right:-4px; font-size:11px; line-height:16px; }
.ki-create-btn { font-size:14px!important; min-height:44px; padding:7px 10px!important; }
.ki-foot.ki-tray .ki-create-btn { grid-column:auto; }
.ki-tray-info { font-size:11.5px; line-height:1.25; overflow-wrap:anywhere; }
.ki-hunt-actions > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ki-hunt-actions .btn { min-width:0; min-height:44px; padding:7px 5px; font-size:13px; }
.ki-hunt-actions > small { display:block; margin-top:5px; font-size:11px; color:#6b5747; line-height:1.25; text-align:center; }
.ki-dish { grid-template-columns:56px minmax(0,1fr) auto; padding:7px; gap:7px; border-width:2px; border-radius:12px; }
.ki-dish > img { width:52px; height:52px; }
.ki-dish strong { font-size:16px; line-height:1.2; text-wrap:unset; }
.ki-dish-actions .btn { min-height:44px; padding:6px 8px; }
.ki-ing { min-height:44px; min-width:44px; }
.ki-miss button { display:inline-flex; align-items:center; min-height:44px; }
.ki-pages .btn { min-height:44px; }
.ki-live { padding:6px 8px; margin-bottom:8px; font-size:12px; }
.ki-result { padding:12px; border-width:3px; }
.ki-result h3 { font-size:24px; }
.ki-result img { width:min(45%,160px); }
.ki-result-meta { gap:8px; margin:7px; }
.ki-result-meta strong { font-size:21px; }
.ki-result.ki-perfect .ki-result-meta strong { font-size:23px; }
.ki-reveal { min-height:300px; }
.ki-sheet-wrap { overflow:hidden; }
.ki-sheet { max-height:100%; overflow:auto; overscroll-behavior:contain; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); gap:6px; border-width:3px; }
.ki-sheet > img { width:60px; height:60px; padding:4px; border-radius:12px; }
.ki-sheet h3 { font-size:20px; padding:0 40px; overflow-wrap:anywhere; line-height:1.2; }
.ki-sheet .btn { min-height:44px; font-size:14px; padding:7px 8px; }
.ki-sheet .x-btn { min-width:44px; min-height:44px; }
.ki-sheet-info { font-size:12px; gap:5px 10px; }
.kitchen-modal button:focus-visible, .kitchen-modal input:focus-visible, .kitchen-modal select:focus-visible { outline:3px solid #2f7cf6; outline-offset:2px; }
@media (max-width:600px) { .modal.kitchen-modal { width:calc(100vw - 16px); height:calc(var(--ui-vh,100dvh) - 24px); max-height:calc(var(--ui-vh,100dvh) - 24px); } .ki-head { padding:6px 8px; } .ki-head h2 { font-size:21px; } .ki-tabs { padding:6px; gap:3px; } .ki-tabs button { font-size:11.5px; } .ki-body { padding:8px; } .ki-pickgrid .ki-card { min-height:118px; padding:5px; } .ki-pickgrid .ki-card img { width:44px; height:44px; } .ki-pickgrid .ki-card strong { font-size:12px; min-height:29px; } .ki-card img, .ki-market img { width:52px; height:52px; } .ki-foot.ki-tray { grid-template-columns:1fr auto; gap:6px 8px; } .ki-tray-info { grid-row:2; grid-column:1/-1; font-size:11px; } .ki-foot.ki-tray .ki-create-btn { grid-row:1; grid-column:2; } .ki-dish { grid-template-columns:44px minmax(0,1fr); gap:6px; } .ki-dish > img { width:42px; height:42px; } .ki-dish-actions { grid-column:1/-1; flex-direction:row; } .ki-dish-actions .btn { flex:1; } .ki-exchange { grid-template-columns:44px minmax(0,1fr); gap:6px; } .ki-exchange img { width:44px; height:44px; } .ki-section h3 { font-size:16px; } .ki-buffs i { font-size:10.5px; } }
@media (max-height:480px) and (min-width:601px) { .modal.kitchen-modal { height:calc(var(--ui-vh,100dvh) - 16px); max-height:calc(var(--ui-vh,100dvh) - 16px); } .ki-head { padding:3px 10px; } .ki-head h2 { font-size:20px; } .ki-tabs { padding:4px 8px; } .ki-foot.ki-tray { grid-template-columns:auto minmax(0,1fr) auto; } .ki-result { display:grid; grid-template-columns:100px minmax(0,1fr); gap:4px 12px; text-align:left; } .ki-result img { width:100px; grid-column:1; grid-row:1/6; } .ki-result > :not(img) { grid-column:2; margin:0; justify-content:flex-start; } .ki-result h3 { font-size:20px; } .ki-reveal { min-height:180px; } .ki-reveal-parts { height:120px; transform:scale(.55); margin-top:-30px; } .ki-reveal-pot { width:100px; height:90px; margin-top:-65px; } .ki-reveal > strong { margin-top:12px; font-size:17px; } }