/* Combo24HR — เว็บแอป (มือถือแนวตั้งเป็นหลัก แล้วขยายบนจอกว้าง)
   ไม่มี CDN ไม่มีฟอนต์ภายนอก ใช้ system font stack ที่มีไทยครบทั้ง iOS/Android/Windows */

:root{
  --teal:#17808c; --teal-dk:#12666f; --teal-lt:#1aa0ae; --teal-pale:#cff1f5;
  --cream:#fbefd8; --cream-bar:#f3e2c4; --cream-line:#dcc49b;
  --card:#fffdf6; --bg:#f6f1e6; --line:#e7d6b6;
  --ink:#3d2b1a; --ink2:#8a7a6a; --white:#fff;
  --orange:#e8871e;
  --g-c:#9e9e9e; --g-b:#27ae60; --g-a:#2980b9; --g-s:#8e44ad; --g-ss:#c0392b; --g-l:#e8871e;
  --top-h:104px; --tab-h:58px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* ⭐ ต้องมี — ไม่งั้น display:flex ของคลาสจะทับ [hidden] ของเบราว์เซอร์ แล้วซ่อนไม่ลง */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun","Leelawadee UI",
    "Noto Sans Thai",Thonburi,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img{display:block; max-width:100%}
button{font:inherit; color:inherit}

/* ── หน้าจอโหลดครั้งแรก ─────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.boot img{border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.15)}
.boot b{font-size:20px; color:var(--teal)}
.boot p{margin:0; color:var(--ink2); font-size:14px}
.boot.err p{color:#c0392b}

/* ── หัวหน้าจอ ─────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:30; background:var(--teal); color:#fff;
  padding:calc(var(--safe-t) + 8px) 12px 8px;
  box-shadow:0 1px 6px rgba(0,0,0,.14);
}
.top-row{display:flex; align-items:center; gap:8px; min-height:30px}
.top-row h1{margin:0; font-size:18px; font-weight:700; letter-spacing:.2px}
.top-row .count{
  font-size:12px; background:rgba(0,0,0,.18); border-radius:999px; padding:2px 9px;
  white-space:nowrap;
}
.top-row .icon-btn{margin-left:auto}
.icon-btn{
  background:rgba(255,255,255,.16); border:0; border-radius:9px; color:#fff;
  width:34px; height:34px; font-size:17px; line-height:1; cursor:pointer; flex:none;
}
.icon-btn:active{background:rgba(255,255,255,.3)}

.search-row{display:flex; gap:8px; margin-top:8px}
.search-row input{
  flex:1 1 auto; min-width:0; border:0; border-radius:9px; padding:9px 12px;
  font:inherit; font-size:15px; background:#fff; color:var(--ink);
}
.search-row input::-webkit-search-cancel-button{-webkit-appearance:none}
.pill-btn{
  flex:none; border:0; border-radius:9px; padding:9px 12px; cursor:pointer;
  background:var(--teal-dk); color:#fff; font-size:13.5px; font-weight:600; white-space:nowrap;
  max-width:52vw; overflow:hidden; text-overflow:ellipsis;
}
.pill-btn.on{background:var(--orange)}

/* ── แถบย่อย ───────────────────────────────────────── */
.subbar{
  position:relative; z-index:20; display:flex; gap:6px; align-items:center;
  background:var(--cream-bar); border-bottom:1px solid var(--cream-line);
  padding:7px 10px; overflow-x:auto; scrollbar-width:none;
}
.subbar::-webkit-scrollbar{display:none}
.subbar button{
  flex:none; border:1px solid var(--cream-line); background:#fff; color:var(--ink2);
  border-radius:999px; padding:5px 13px; font-size:13.5px; font-weight:600; cursor:pointer;
}
.subbar button.on{background:var(--orange); border-color:var(--orange); color:#fff}
.subbar button.act{background:var(--teal); border-color:var(--teal); color:#fff}
.subbar .sp{flex:1 0 4px}

.chipbar{
  display:flex; gap:6px; padding:8px 10px; overflow-x:auto; scrollbar-width:none;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.chipbar::-webkit-scrollbar{display:none}
.chipbar button{
  flex:none; border:1px solid var(--line); background:#fff; color:var(--ink2);
  border-radius:999px; padding:3px 12px; font-size:13px; font-weight:700; cursor:pointer;
}
.chipbar button.on{color:#fff; border-color:transparent}

/* ── แถบเตือน ──────────────────────────────────────── */
.notice{
  background:#fff6d9; border-bottom:1px solid #efd9a0; color:#6b4a2b;
  padding:9px 12px; font-size:13px; display:flex; gap:8px; align-items:center;
}
.notice p{margin:0; flex:1}
.notice button{
  flex:none; border:0; background:var(--teal); color:#fff; border-radius:8px;
  padding:6px 11px; font-size:13px; font-weight:700; cursor:pointer;
}
.notice button.x{background:transparent; color:#a08a63; font-size:17px; padding:2px 6px}

/* ── เนื้อหา ───────────────────────────────────────── */
main{padding:10px 10px calc(var(--tab-h) + var(--safe-b) + 16px)}
.empty{text-align:center; color:var(--ink2); padding:44px 20px; font-size:14px}
.empty b{display:block; font-size:16px; color:var(--ink); margin-bottom:6px}

/* รายการแถว (คุกกี้ / เพ็ท) */
.rows{display:grid; gap:8px}
.row{
  display:flex; gap:10px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:9px 10px; cursor:pointer;
  text-align:left; width:100%; font:inherit;
}
.row:active{background:#fff6e4}
.row.off{opacity:.34}
.thumb{position:relative; flex:none; width:56px; height:56px}
.thumb .bg{
  position:absolute; inset:0; border-radius:50%; background:var(--cream); border:3px solid var(--line);
}
.thumb img{position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); object-fit:contain}
.thumb .lv{
  position:absolute; right:-3px; bottom:-3px; background:var(--teal); color:#fff;
  border-radius:999px; font-size:11px; font-weight:700; padding:1px 6px; border:1.5px solid #fff;
}
.thumb .own{
  position:absolute; left:-3px; top:-3px; background:#27ae60; color:#fff;
  border-radius:50%; width:19px; height:19px; font-size:12px; line-height:16px;
  text-align:center; border:1.5px solid #fff;
}
.row-main{flex:1; min-width:0}
.row-head{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.row-head .nm{font-weight:700; font-size:15px}
.grade{
  color:#fff; border-radius:7px; padding:0 8px; font-size:12px; font-weight:700; line-height:19px;
}
.row .sk{
  margin:2px 0 0; font-size:13.5px; color:#5a4632; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.badge-en{
  background:#d0c0a8; color:#6b4a2b; border-radius:6px; font-size:11px; padding:0 6px; line-height:18px;
}
.fav-dot{color:#e05555; font-size:13px}

/* ตารางช่อง (สมบัติ) */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:7px}
.tile{
  position:relative; aspect-ratio:1/1; border:0; padding:0; background:none; cursor:pointer;
  background-size:100% 100%; background-repeat:no-repeat;
}
.tile:active{transform:scale(.94)}
.tile.off{opacity:.3}
.tile img{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain}
.tile .lv{
  position:absolute; right:0; bottom:0; background:var(--teal); color:#fff;
  border-radius:999px; font-size:10.5px; font-weight:700; padding:0 5px; border:1.5px solid #fff;
}
.tile .fav{position:absolute; left:1px; top:0; font-size:11px; color:#e05555; text-shadow:0 0 2px #fff}
.tile .own{
  position:absolute; left:0; top:0; background:#27ae60; color:#fff; border-radius:50%;
  width:17px; height:17px; font-size:11px; line-height:15px; text-align:center; border:1.5px solid #fff;
}
.tile .x{
  position:absolute; right:0; top:0; background:#3d2b1a; color:#fff; border-radius:999px;
  font-size:10px; font-weight:700; padding:0 5px; border:1.5px solid #fff;
}

.sec-head{
  margin:14px 2px 6px; font-size:13px; font-weight:700; color:var(--ink2);
  display:flex; align-items:center; gap:8px;
}
.sec-head:first-child{margin-top:2px}
.sec-head::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── ปุ่มทั่วไป ────────────────────────────────────── */
.btn{
  border:0; border-radius:10px; padding:11px 14px; font-size:15px; font-weight:700;
  background:var(--teal); color:#fff; cursor:pointer; width:100%; text-align:center;
  display:block; text-decoration:none;
}
.btn:active{background:var(--teal-dk)}
.btn.ghost{background:#fff; color:var(--teal); border:1.5px solid var(--teal)}
.btn.warn{background:#fff; color:#c0392b; border:1.5px solid #e6b7b1}
.btn.sm{padding:8px 12px; font-size:13.5px; width:auto; display:inline-block}
.btn-row{display:flex; gap:8px; margin-top:10px}
.btn-row .btn{flex:1}

/* ── แผ่นเลื่อนขึ้น ────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(30,20,10,.5); z-index:50}
.sheet{
  position:fixed; z-index:51; left:0; right:0; bottom:0; max-height:88vh;
  background:var(--cream); border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -3px 20px rgba(0,0,0,.25); animation:up .18s ease-out;
}
@keyframes up{from{transform:translateY(18px); opacity:.4}to{transform:none; opacity:1}}
.sheet-head{
  display:flex; align-items:center; gap:8px; padding:11px 12px 9px;
  background:var(--teal); color:#fff; border-radius:18px 18px 0 0;
}
.sheet-head b{flex:1; font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 14px calc(16px + var(--safe-b));
}

/* รายละเอียดในแผ่น */
.det-top{display:flex; gap:12px; align-items:center}
.det-icon{position:relative; width:88px; height:88px; flex:none; background-size:100% 100%}
.det-icon img{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain}
.det-icon.round{border-radius:50%; background:var(--cream); border:3px solid var(--line)}
.det-icon.round img{inset:8px; width:calc(100% - 16px); height:calc(100% - 16px)}
.det-name{margin:0; font-size:19px; font-weight:800; line-height:1.3}
.det-sub{margin:3px 0 0; font-size:13px; color:var(--ink2)}

.lvbox{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px 10px; margin-top:12px;
}
.lvbox .lb{font-size:13.5px; font-weight:700; color:var(--ink2); flex:1}
.lvbox .val{
  font-size:18px; font-weight:800; color:var(--teal); min-width:52px; text-align:center;
}
.stepper{
  width:38px; height:38px; border-radius:10px; border:0; background:var(--teal); color:#fff;
  font-size:20px; font-weight:700; cursor:pointer; flex:none; line-height:1;
}
.stepper:disabled{background:#d8cdba}
.slider{width:100%; margin:8px 0 0; accent-color:var(--teal)}

.fx{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-top:10px}
.fx p{margin:0 0 6px; font-size:14.5px; line-height:1.6}
.fx p:last-child{margin-bottom:0}
.fx .star{color:var(--orange); font-weight:700}

/* Power+ — สกิลที่ทำงานแม้ไม่ได้เลือกคุกกี้ตัวนั้นลงวิ่ง (มีแค่ 15 ตัวจาก 93) */
.pp-box{border-left:4px solid #f2b441; background:#fffaf0}
.pp-box .pp-head{font-weight:700; font-size:13.5px; color:#b47c10; margin-bottom:5px}
.pp-box .mini{margin-top:6px; font-size:12px; color:var(--ink2); line-height:1.5}

.blk{margin-top:14px}
.blk h4{margin:0 0 4px; font-size:13px; color:var(--ink2); font-weight:700}
.blk p{margin:0; font-size:14px; line-height:1.65; white-space:pre-line}
.evo-row{
  display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px 10px; cursor:pointer; width:100%; text-align:left; font:inherit;
}
.evo-row .det-icon{width:52px; height:52px}

/* กล่องชิ้นที่มี (สมบัติ) */
.pieces{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.piece{
  display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:4px 6px 4px 11px; font-size:13.5px; font-weight:700;
}
.piece button{
  border:0; background:#f0e5cf; color:#a0785a; border-radius:50%; width:20px; height:20px;
  font-size:12px; line-height:1; cursor:pointer;
}
.piece.add{background:var(--teal); border-color:var(--teal); color:#fff; cursor:pointer; padding:4px 12px}

/* ── ตัวกรอง ───────────────────────────────────────── */
.flt-col{margin-top:12px}
.flt-col h4{margin:0 0 6px; font-size:13px; color:var(--ink2)}
.flt-wrap{display:flex; flex-wrap:wrap; gap:6px}
.flt-wrap button{
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:9px;
  padding:7px 12px; font-size:13.5px; font-weight:600; cursor:pointer;
}
.flt-wrap button.on{background:var(--teal); border-color:var(--teal); color:#fff}

/* ── คอมโบ ─────────────────────────────────────────── */
.combo-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:10px 11px; margin-bottom:9px;
}
.combo-card .ch{display:flex; align-items:center; gap:8px}
.combo-card .ch b{flex:1; font-size:15.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.combo-card .ch button{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 9px;
  font-size:12.5px; cursor:pointer; flex:none;
}
.slot-line{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px}
/* ช่องย่อในการ์ดสรุป — ให้ครบ 6 ช่องอยู่บรรทัดเดียวบนจอมือถือ */
.combo-card .slot{width:46px; height:46px}
.combo-card .slot .hint{font-size:17px; color:#dccdb4}
.combo-card .slot .tag{font-size:8.5px; bottom:-7px}
.combo-card .slot-sep{width:1px; align-self:stretch; background:var(--line); margin:0 2px}
.slot{
  position:relative; width:56px; height:56px; flex:none; border:0; padding:0; cursor:pointer;
  background:#fff8e9 center/100% 100% no-repeat; border-radius:12px;
  box-shadow:inset 0 0 0 2px var(--line);
}
.slot.round{border-radius:50%; box-shadow:inset 0 0 0 3px var(--line)}
.slot.filled{box-shadow:none; background-color:transparent}
.slot img{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain}
.slot.round img{inset:6px; width:calc(100% - 12px); height:calc(100% - 12px)}
.slot .hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#c8b393;
}
.slot .lv{
  position:absolute; right:-2px; bottom:-2px; background:var(--teal); color:#fff;
  border-radius:999px; font-size:10.5px; font-weight:700; padding:0 5px; border:1.5px solid #fff;
}
.slot .tag{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-9px; background:var(--orange);
  color:#fff; border-radius:999px; font-size:9.5px; font-weight:700; padding:0 6px; white-space:nowrap;
}
.slot-grp{margin-bottom:16px}
.slot-grp > .lbl{font-size:12.5px; color:var(--ink2); font-weight:700; margin-bottom:5px}
.boost-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.boost{
  border:1px solid var(--line); background:#fff; border-radius:11px; padding:7px 4px 6px;
  cursor:pointer; text-align:center; font-size:11.5px; line-height:1.35; color:var(--ink);
}
.boost img{width:40px; height:40px; object-fit:contain; margin:0 auto 3px}
.boost.on{background:var(--teal); border-color:var(--teal); color:#fff}
.boost .pr{display:block; font-size:10.5px; opacity:.72}
/* แถวไอคอนบูสต์ในการ์ดสรุป — เล็กกว่าช่องคุกกี้/สมบัติ เพื่อไม่ให้แย่งสายตาจากแถวหลัก */
.boost-row{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:7px}
.boost-row img{width:30px; height:30px; object-fit:contain}
.boost-row .lead{font-size:13px; opacity:.55; margin-right:1px}
.boost-row .nm{
  font-size:11.5px; color:var(--ink2); background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:1px 7px;
}
.rnd-line{
  margin-top:8px; width:100%; text-align:left; font:inherit; font-size:13px; cursor:pointer;
  background:#fff; border:1px dashed var(--cream-line); border-radius:10px; padding:8px 10px;
  color:var(--ink);
}
.mini{font-size:12.5px; color:var(--ink2); margin:4px 0 0}
.chk-row{
  display:flex; align-items:center; gap:9px; padding:9px 4px; border-bottom:1px solid var(--line);
  cursor:pointer; font-size:14px;
}
.chk-row:last-child{border-bottom:0}
.chk-row .bx{
  width:22px; height:22px; border-radius:6px; border:2px solid var(--line); flex:none;
  background:#fff; text-align:center; line-height:19px; font-size:14px; color:#fff;
}
.chk-row.on .bx{background:var(--teal); border-color:var(--teal)}
.chk-row .pc{margin-left:auto; font-size:12.5px; color:var(--ink2); flex:none}

/* ── ตั้งค่า ───────────────────────────────────────── */
.setbox{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:10px}
.setbox h4{margin:0 0 5px; font-size:14.5px}
.setbox p{margin:0 0 8px; font-size:13px; color:#5a4632; line-height:1.6}
.setbox ol{margin:6px 0 8px; padding-left:20px; font-size:13px; color:#5a4632}
textarea.io{
  width:100%; min-height:110px; border:1px solid var(--line); border-radius:9px; padding:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; resize:vertical; background:#fffdf6;
}
.bar{height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:8px}
.bar i{display:block; height:100%; background:var(--teal); width:0; transition:width .2s}

/* ── กล่องข้อความลอย ──────────────────────────────── */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tab-h) + var(--safe-b) + 14px); z-index:70;
  background:rgba(45,30,15,.94); color:#fff; padding:9px 16px; border-radius:999px;
  font-size:13.5px; max-width:88vw; text-align:center;
}

/* ── ป้ายลอย "แอปอื่น ๆ" ──────────────────────────────
   ลอยติดขอบขวา เลื่อนขึ้น-ลงช้า ๆ (fabDrift) + กระโดดเป็นจังหวะ (fabHop)
   ไม่มีปุ่มปิด ตั้งใจให้เห็นตลอด แต่ตัวเล็กและชิดขอบ จะได้ไม่บังเนื้อหา */
.appsfab{
  position:fixed; right:6px; z-index:45;
  bottom:calc(var(--tab-h) + var(--safe-b) + 18px);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:#fff;
  animation:fabDrift 11s ease-in-out infinite alternate;
}
.appsfab-in{
  position:relative; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(160deg,var(--teal-lt),var(--teal-dk));
  border:2px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
  display:grid; place-items:center;
  animation:fabHop 1.25s cubic-bezier(.5,0,.5,1) infinite;
}
/* วงแหวนกระเพื่อม เรียกสายตา */
.appsfab-in::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--teal-lt); opacity:.75;
  animation:fabPing 2.4s ease-out infinite;
}
.appsfab-grid{display:grid; grid-template-columns:repeat(2,7px); gap:3px}
.appsfab-grid i{display:block; width:7px; height:7px; border-radius:2px; background:#fff}
.appsfab b{
  font-size:10px; font-weight:700; white-space:nowrap;
  background:rgba(18,102,111,.94); padding:1px 7px; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}
@keyframes fabHop{
  0%,100%{transform:translateY(0)    scaleY(1)}
  32%    {transform:translateY(-7px) scaleY(1.06)}
  52%    {transform:translateY(0)    scaleY(.93)}
  66%    {transform:translateY(0)    scaleY(1)}
}
@keyframes fabPing{
  0%      {transform:scale(1);   opacity:.75}
  70%,100%{transform:scale(1.7); opacity:0}
}
@keyframes fabDrift{
  from{transform:translateY(0)}
  to  {transform:translateY(-92px)}
}
/* จอกว้าง: เนื้อหาถูกจัดกลางกว้างสุด 900px — ให้ป้ายเกาะขอบคอลัมน์ ไม่ใช่ขอบจอ */
@media (min-width:700px){
  .appsfab{right:max(6px, calc(50% - 450px + 6px))}
}
/* เครื่องที่ผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว" ให้อยู่นิ่ง ๆ แต่ยังเห็นอยู่ */
@media (prefers-reduced-motion:reduce){
  .appsfab,.appsfab-in,.appsfab-in::before{animation:none}
}

/* ── แถบแท็บล่าง ──────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex;
  background:var(--teal); padding-bottom:var(--safe-b);
  box-shadow:0 -1px 8px rgba(0,0,0,.18);
}
.tabbar button{
  flex:1; border:0; background:none; color:var(--teal-pale); cursor:pointer;
  height:var(--tab-h); font-size:11px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.tabbar button span{font-size:20px; line-height:1.1}
.tabbar button.on{color:#fff}
.tabbar button.on span{transform:translateY(-1px)}

/* ── จอกว้าง ──────────────────────────────────────── */
@media (min-width:700px){
  .top,.subbar,.chipbar,.notice,main{max-width:900px; margin-left:auto; margin-right:auto}
  .top{border-radius:0 0 14px 14px}
  .rows{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .sheet{
    left:50%; transform:translateX(-50%); width:min(560px,96vw);
    bottom:24px; border-radius:18px; max-height:84vh;
  }
  .sheet-head{border-radius:18px 18px 0 0}
  .tabbar{max-width:900px; margin:0 auto; border-radius:14px 14px 0 0}
}
@media (min-width:1000px){
  .rows{grid-template-columns:1fr 1fr 1fr}
}