/* =====================================================================
   樂慾島　20261106.7
   一、首頁：不管螢幕多高，最下面一排 App 都不會被 dock 擋到
   二、重口味專區：SM・榨乳・中出殿堂 三個 App
   三、心動圖鑑：隱藏男女主、經紀人、？？？
   ===================================================================== */

/* ---------- 一、首頁 ---------- */
/* 活動大卡片吃剩下的高度：螢幕高就長高，螢幕矮就縮，其他東西維持原本大小 */
.home.h4 .hpg{padding-bottom:calc(106px + env(safe-area-inset-bottom,0px))}
.home.h4 .hpg>.h4ev{flex:1 1 150px;min-height:96px;max-height:250px}
.home.h4 .hpg>.h4now{flex:0 1 auto}
/* 還是放不下的時候（js/ui4.js 量過才加），一級一級收 */
.home.h4 .hpg.c1{gap:9px;padding-top:52px}
.home.h4 .hpg.c1 .h4day .h4d{font-size:26px}.home.h4 .hpg.c1 .h4day .h4d b{font-size:38px}
.home.h4 .hpg.c1 .h4w{min-height:100px;gap:6px}
.home.h4 .hpg.c1 .h4me{padding:10px 12px}.home.h4 .hpg.c1 .h4me .mav .av{width:46px;height:46px;border-radius:16px}
.home.h4 .hpg.c1 .hstrip .hlv,.home.h4 .hpg.c1 .hstrip .hlm{height:80px}
.home.h4 .hpg.c2 .h4line{display:none}
.home.h4 .hpg.c2>.h4ev{min-height:84px}
.home.h4 .hpg.c2 .h4ev .h4evt b{font-size:20px}
.home.h4 .hpg.c2 .h4q button{height:38px}
.home.h4 .hpg.c2 .h4w{min-height:86px;padding:10px 10px 8px}
.home.h4 .hpg.c2 .h4w .h4lv span{aspect-ratio:16/9!important}
.home.h4 .hpg.c2 .h4w .h4hs .av{width:32px;height:32px}
.home.h4 .hpg.c2 .grid{gap:8px 6px}
.home.h4 .hpg.c2 .grid .app .aic{width:52px;height:52px;border-radius:15px}
.home.h4 .hpg.c2 .heavy4{padding:10px}.home.h4 .hpg.c2 .heavy4 .hv4h{margin-bottom:8px}
.home.h4 .hpg.c2 .heavy4 .hvt small{display:none}
.home.h4 .hpg.c2 .h4st b{font-size:17px}
.home.h4 .hpg.c2 .hstrip .hlv,.home.h4 .hpg.c2 .hstrip .hlm{height:70px}
/* 最矮的螢幕：小工具那一排先收起來（裡面的東西 dock 和 App 都點得到） */
.home.h4 .hpg.c3>.h4w2{display:none}
.home.h4 .hpg.c3 .heavy4 .hvt .hvi{width:40px;height:40px;border-radius:12px}

/* ---------- 二、重口味專區 ---------- */
.home.h4 .heavy4 .hv4g{grid-template-columns:repeat(3,1fr);gap:8px}
.home.h4 .heavy4 .hvt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px;border-radius:16px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.07);min-width:0}
.home.h4 .heavy4 .hvt:active{transform:scale(.97)}
.home.h4 .heavy4 .hvt b{font-size:12.5px;font-weight:800;line-height:1.3}
.home.h4 .heavy4 .hvt small{font-size:10px;line-height:1.3;color:#ffb3c3;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home.h4 .heavy4 .hvt.lk{opacity:.6}
.home.h4 .heavy4 .hvt.lk small::before{content:'🔒 '}
.home.h4 .heavy4 .hv-mf .hvi{background:linear-gradient(160deg,#ffe3f1,#ff8fc8 45%,#a0306a);box-shadow:0 6px 14px rgba(255,126,184,.3)}
.home.h4 .heavy4 .hv-hall .hvi{background:linear-gradient(160deg,#e2d3ff,#9b6bff 48%,#3a167a);box-shadow:0 6px 14px rgba(155,107,255,.32)}
.home.h4 .heavy4 .hv-mf small{color:#ffc6e2}.home.h4 .heavy4 .hv-hall small{color:#d9c8ff}
/* 榨乳、中出殿堂各自的顏色（原本三個都是同一個暗紅） */
.appv.mf{background:#120910;--ink2:#120910;--ink3:#24101e;--line:rgba(255,126,184,.13)}
.appv.mf .ahd{background:linear-gradient(180deg,#3a1030,rgba(18,9,16,.3));border-bottom-color:rgba(255,126,184,.18)}
.appv.x-mf .ahd .aht b{color:#ffd6ea}
.appv.hall{background:#0c0816;--ink2:#0c0816;--ink3:#1a1230;--line:rgba(178,123,255,.14)}
.appv.hall .ahd{background:linear-gradient(180deg,#24124a,rgba(12,8,22,.3));border-bottom-color:rgba(178,123,255,.2)}
.appv.x-hall .ahd .aht b{color:#e2d3ff}
.hub-sm{--ac:#ff3355}
.appv.ds .hubseg,.appv.cell .hubseg,.appv.cuff .hubseg,.appv.hunt .hubseg,.appv.rack .hubseg{background:rgba(0,0,0,.5);border-color:rgba(255,80,110,.18)}

/* ---------- 三、心動圖鑑 ---------- */
.dximg{position:relative;overflow:hidden}
/* 還沒接觸到：照片打暗、糊掉，只剩一個問號 */
.dximg.unk::before{content:'';position:absolute;inset:-14px;background-image:inherit;background-size:cover;background-position:center 18%;filter:blur(10px) brightness(.3) saturate(.25)}
.dxqm{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--serif);font-weight:900;font-size:34px;color:rgba(255,255,255,.6);text-shadow:0 0 18px var(--lc,#c86bff),0 2px 10px rgba(0,0,0,.6)}
.flip .dxqm{transform:scaleX(-1)}
.dximg.gl.unk{background:linear-gradient(170deg,#241634,#120a1c)}
.dxc.unk b{color:var(--dim);letter-spacing:.14em}
.dxc.unk .dxst{background:rgba(0,0,0,.6);color:var(--dim)}
/* 隱藏男女主還沒有半身照的時候用剪影：底色帶一點他／她的顏色 */
.dximg.sil{background-color:color-mix(in srgb,var(--lc) 22%,#120a1c);background-position:center 30%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 40%,transparent),inset 0 -40px 40px -20px color-mix(in srgb,var(--lc) 35%,transparent)}
.st-ag .dxst,.psr .st-ag{background:rgba(143,123,255,.6);color:#fff}
/* 分區標題：隱藏男女主、經紀人 */
.dxsp{display:flex;align-items:center;gap:10px;margin:8px 0 10px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,211,122,.24);background:linear-gradient(120deg,rgba(255,211,122,.13),rgba(255,255,255,.02))}
.dxsp+.dxgrid+.dxsp{margin-top:18px}
.dxsp b{display:block;font-family:var(--serif);font-size:17px;font-weight:900;color:var(--gold)}
.dxsp span{display:block;font-size:12px;color:var(--sub);margin-top:2px;line-height:1.5}
.dxsp.agent{border-color:rgba(143,123,255,.3);background:linear-gradient(120deg,rgba(143,123,255,.15),rgba(255,255,255,.02))}
.dxsp.agent b{color:#cfc3ff}
.dxgrid+.dxg{margin-top:18px}
/* 圖鑑頁：還沒接觸到 */
.dxlock .psimg{position:relative;overflow:hidden}
.dxlock .psimg.unk::before{content:'';position:absolute;inset:-24px;background-image:inherit;background-size:cover;background-position:center 20%;filter:blur(18px) brightness(.32) saturate(.3)}
.dxlock .psimg .dxqm{font-size:76px}
.dxlock h3{letter-spacing:.16em}
/* 隱藏男女主的圖鑑頁：五章進度 */
.dxchs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0 8px}
.dxchs i{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0}
.dxchs i b{font-family:var(--num);font-size:16px;font-weight:600;color:var(--dim);line-height:1.2}
.dxchs i small{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px}
.dxchs i.on{background:color-mix(in srgb,var(--lc) 18%,transparent);border-color:color-mix(in srgb,var(--lc) 45%,transparent)}
.dxchs i.on b{color:#fff}.dxchs i.on small{color:var(--sub)}
.dxchips .cur{background:rgba(143,123,255,.38);color:#fff}

/* ---------- 四、上方通知不要擋到 App ---------- */
/* 項鍊通知展開時原本 58px 高，會壓到 App 標題列的返回鍵、閱讀器的自動／快轉。改矮一點，按鈕往下挪 */
.nk.xp{height:50px}
.nk.xp .nkmi{flex-basis:30px;width:30px;height:30px;border-radius:10px;font-size:15px}
.rdbar{top:62px}
.reader .rdlive{top:64px}