/* บ้านถ้ำน้องลีโอ  mockup_shop/leo-cave.css  (25 ต.ค. 2569)
   ใช้ร่วมกับ leo.css (แถบบน ปุ่มบังคับ แผงท่าทาง) · ไฟล์นี้ = ปุ่มบ้าน + โหมดแต่งบ้าน (แถบเครื่องมือ แผงของ แถบของที่เลือก ผนัง/พื้น กล่องยืนยัน) */
.cv{--sky:#2a1d15;--wood:#5b3a1e;--sheet:0px}
.cv-saved{flex:none;max-width:46vw;font-size:12.5px;font-weight:600;color:#cfd3dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-saved.bad{color:#ffb39f}
.cv-out{background:#2f6d3a;border-color:#2f6d3a;color:#fff;text-decoration:none}
.cv-out:hover,.cv-out:focus{color:#fff;text-decoration:none}
.cv-deco{background:var(--or);border-color:var(--or);color:#fff}
.cv-deco[aria-pressed="true"]{background:var(--ok,#22a35a);border-color:var(--ok,#22a35a)}
.cv-tip{position:fixed;left:50%;top:calc(var(--top) + 96px);z-index:7;transform:translateX(-50%);max-width:calc(100% - 32px);padding:8px 14px;border-radius:18px;background:rgba(58,34,16,.9);color:#fff;font-size:14px;font-weight:700;text-align:center;pointer-events:none}
.cv-tip[hidden]{display:none}
.cv-going .leo-stage{opacity:0}

/* โหมดแต่งบ้าน: ซ่อนปุ่มเดิน/ท่าทาง เหลือเครื่องมือ */
.cv.deco .leo-pad,.cv.deco .leo-emo,.cv.deco .leo-keys,.cv.deco .leo-walk,.cv.deco .cv-out{display:none}
.cv.deco{--sheet:var(--catH,0px)}
.cv-tools{position:fixed;left:8px;right:8px;top:calc(var(--top) + 52px);z-index:8;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.cv-tools::-webkit-scrollbar{display:none}
.cv-tools[hidden]{display:none}
.cv-tb{flex:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.96);font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.cv-tb .i,.cv-sb .i{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-tb:disabled{opacity:.45}
.cv-tb[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cv-tb:active,.cv-sb:active{transform:scale(.96)}

/* แถบของที่เลือก (ลอยเหนือแผงของ) */
.cv-sel{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;bottom:calc(var(--catH,0px) + 12px);z-index:9;display:flex;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:6px;border-radius:24px;background:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.cv-sel[hidden]{display:none}
.cv-sel-n{flex:0 1 auto;min-width:64px;max-width:40vw;padding:0 6px 0 10px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-sb{flex:none;display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 11px;border-radius:19px;background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.cv-sb.is-del{background:var(--or);color:#fff}
#deselBtn{width:38px;padding:0;justify-content:center;background:rgba(255,255,255,.16);color:#fff}

/* แผงของแต่งบ้าน: มือถือ = แผ่นล่าง · คอม = แผงขวา */
.cv-cat{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;max-height:46vh;background:var(--card);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
.cv-cat[hidden]{display:none}
.cv-cat-head{flex:none;display:flex;align-items:center;gap:6px;padding:8px 8px 6px;border-bottom:1px solid var(--line)}
.cv-tabs{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior:contain}
.cv-tabs::-webkit-scrollbar{display:none}
.cv-tab{flex:none;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:17px;background:var(--soft);font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap}
.cv-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cv-fold{flex:none;width:36px;height:34px;border-radius:17px;background:var(--soft);display:flex;align-items:center;justify-content:center}
.cv-fold-a{width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg)}
.cv-cat.fold .cv-fold-a{transform:rotate(-135deg);margin-top:4px}
.cv-cat.fold .cv-grid,.cv-cat.fold .cv-cat-note{display:none}
.cv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cv-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 3px 6px;border:1px solid var(--line);border-radius:10px;background:#fbf7f1;font-size:12px;font-weight:600;line-height:1.2;color:var(--text)}
.cv-card img,.cv-card .cv-ph{display:block;width:100%;max-width:84px;aspect-ratio:1;object-fit:contain}
.cv-card .cv-ph{border-radius:8px;background:var(--soft)}
.cv-card span{max-width:100%;overflow:hidden;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.cv-card i{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:6px;background:var(--or-bg);font-style:normal;font-size:10.5px;font-weight:700;color:var(--or)}
.cv-card:active{transform:scale(.96)}
/* ของรางวัลดาวป่า */
.cv-card i.cv-cost{background:#fff4cc;color:#9a6a00}
.cv-card i.cv-own{background:#e7f7ea;color:#1f8a3a}
.cv-card.is-lock img{opacity:.55;filter:grayscale(.35)}
.cv-starnote{grid-column:1 / -1;margin:0 0 2px;padding:8px 10px;border-radius:10px;background:#fff8e1;font-size:12.5px;line-height:1.45;color:var(--text)}
.cv-starnote b{color:#b07a00}
.cv-ask-yes:disabled{background:var(--soft);color:var(--mute)}
@media (hover:hover){.cv-card:hover{border-color:var(--ink)}}
.cv-cat-note{flex:none;padding:0 10px 8px;font-size:12px;color:var(--mute)}

/* ผนัง/พื้น */
.cv-theme{position:fixed;left:8px;right:8px;top:calc(var(--top) + 98px);z-index:11;padding:10px 12px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cv-theme[hidden]{display:none}
.cv-theme-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.cv-theme-head b{font-size:15px;color:var(--text)}
.cv-theme-t{margin:8px 0 6px;font-size:13px;font-weight:700;color:var(--mute)}
.cv-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cv-swb{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:4px;border:2px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:600;color:var(--text)}
.cv-swb canvas{display:block;width:100%;aspect-ratio:2;border-radius:6px}
.cv-swb.on{border-color:var(--or);color:var(--or)}

/* กล่องยืนยัน (ล้างทั้งหมด) หัว+ปุ่มล่างล็อก */
.cv-ask{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,12,15,.5)}
.cv-ask[hidden]{display:none}
.cv-ask-box{display:flex;flex-direction:column;width:100%;max-width:360px;max-height:80vh;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.cv-ask-head{flex:none;padding:14px 16px;font-size:17px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line)}
.cv-ask-body{flex:1;overflow-y:auto;padding:14px 16px;font-size:15px;line-height:1.55;color:var(--text)}
.cv-ask-foot{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.cv-ask-no,.cv-ask-yes{height:46px;border-radius:12px;font-size:15px;font-weight:700}
.cv-ask-no{border:1px solid var(--line);background:var(--soft);color:var(--text)}
.cv-ask-yes{background:var(--or);color:#fff}

/* มือถือ: เครื่องมือ 4 ปุ่มเต็มแถว ไอคอนบนชื่อ */
@media (max-width:520px){
  .cv-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  .cv-tb{flex-direction:column;justify-content:center;gap:2px;height:auto;min-height:48px;padding:5px 2px;border-radius:12px;font-size:12px}
  .cv-tb span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .cv-theme{top:calc(var(--top) + 112px)}
}
/* คอม: แผงของอยู่ขวา */
@media (min-width:900px){
  .cv-cat{left:auto;top:calc(var(--top) + 12px);right:12px;bottom:12px;width:380px;max-height:none;border-radius:14px}
  .cv-cat.fold{bottom:auto}
  .cv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cv.deco{--sheet:0px}
  .cv-sel{right:404px;bottom:16px}
  .cv-tools{right:404px}
  .cv-theme{left:auto;right:404px;width:420px}
}