/* OPEGAME 互动剧场 — 样式表 */

:root{
  --gold:#f3c674;
  --gold-line:rgba(243,198,116,.55);
  --gold-fill:rgba(243,198,116,.13);
  --ink:#0d0a12;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14);
  --text:#f4eef6;
  --muted:#a99fb2;
  --radius:20px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Noto Sans SC","Microsoft YaHei",system-ui,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(130% 120% at 50% -10%,#221a2d,#0a0810);
  display:flex;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;color:inherit}
img{display:block}

/* 手机外框 */
.h5-shell{flex:1;display:flex;align-items:center;justify-content:center;padding:18px}
.device-frame{
  position:relative;
  width:min(420px,100%);
  height:min(900px,calc(100vh - 36px));
  padding:12px;
  border-radius:46px;
  background:linear-gradient(155deg,#39303f,#16121c);
  box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);
}
.device-screen{
  position:relative;
  width:100%;height:100%;
  border-radius:34px;
  overflow:hidden;
  background:var(--ink);
  transform:translateZ(0);
}
.app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ink)}

/* 页面切换 */
.page{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.page.active{display:flex}
.theme-detail-page.active,.photo-page.active{display:block}

/* 头部 */
.page-header{display:flex;align-items:center;gap:12px;padding:18px 16px 12px;flex:none}
.page-header>div{flex:1;min-width:0}
.page-header b{font-size:20px;font-weight:800;display:block}
.page-header span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.round-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(7,193,96,.4);background:rgba(255,255,255,.06);color:#07c160;font-size:22px;display:flex;align-items:center;justify-content:center}
.round-btn.small{width:36px;height:36px;font-size:16px}
.coin-btn{display:none!important}

/* 滚动区与面板 */
.page-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 92px}
.page-panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.intro-panel p{margin:0;color:var(--muted);line-height:1.7;font-size:13px}
.mini-stat-row{display:flex;gap:12px;margin-bottom:10px}
.mini-stat-row>div{flex:1}
.mini-stat-row small{display:block;color:var(--muted);font-size:11px}
.mini-stat-row b{font-size:18px}

/* 通用按钮（暗金玻璃描边） */
.primary,.secondary{border:none;border-radius:999px;padding:13px 16px;font-weight:800;font-size:15px;color:#fff}
.primary{background:var(--gold-fill);border:1px solid var(--gold-line);color:var(--gold);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.secondary{background:rgba(255,255,255,.07);border:1px solid var(--line)}
.full{width:100%;margin-top:10px}
.label{display:inline-block;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.16em}

/* 底部导航（仅主页面显示） */
.bottom-nav{display:none}
.top-page.active~.bottom-nav{
  display:flex;position:absolute;left:12px;right:12px;bottom:12px;z-index:60;
  gap:4px;padding:8px;border-radius:22px;
  background:rgba(20,16,26,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.nav-item{flex:1;border:none;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border-radius:14px;font-weight:700}
.nav-item small{font-size:10px}
.nav-item.active{color:var(--gold);background:var(--gold-fill)}

/* 信息流卡片 */
.feed-stack{display:flex;flex-direction:column;gap:14px}
.feed-item{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#15111c;min-height:420px;display:flex;align-items:flex-end;cursor:pointer}
.feed-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feed-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35) 45%,rgba(8,6,12,.92))}
.feed-content{position:relative;z-index:2;padding:18px;width:100%}
.feed-index{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.12em}
.feed-content h2{margin:6px 0;font-size:24px}
.feed-content p{margin:0;color:rgba(255,255,255,.8);font-size:13px;line-height:1.6}
.feed-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.feed-tags span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.05)}
.feed-actions{margin-top:6px}
.feed-btn{border:1px solid var(--gold-line);border-radius:999px;padding:11px 18px;font-weight:800;color:var(--gold);background:var(--gold-fill)}
.feed-item.is-locked .feed-cover{filter:brightness(.5) grayscale(.2)}
.feed-item.is-locked .feed-btn{background:rgba(255,255,255,.12)}

/* 首页 / 图片互动：去掉无用的顶部栏，卡片占满整屏 */
.home-page>.page-header,.library-page>.page-header{display:none}

/* 信息流：一屏一张，容器卡片 + 海报完整显示 */
.feed-scroll{overflow:hidden;padding:0}
.feed-scroll .feed-stack{height:100%;gap:0;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
.feed-scroll .feed-item{flex:0 0 auto;width:calc(100% - 28px);aspect-ratio:941/1672;max-height:calc(100% - 96px);margin:14px 14px 0;scroll-margin-top:14px;position:relative;display:block;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#15111c;scroll-snap-align:start;cursor:pointer}
.feed-scroll .feed-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.feed-scroll .feed-overlay{display:none}
.feed-scroll .feed-content{display:none}

/* 主题详情 */
.theme-detail-page{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
.detail-hero-image{position:absolute;top:0;left:0;width:100%;height:48%;object-fit:cover}
.detail-shade{position:absolute;top:0;left:0;width:100%;height:48%;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,var(--ink))}
.theme-detail-content{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:42% 16px 40px}
.theme-detail-content h1{margin:8px 0;font-size:28px}
.theme-detail-content>p{margin:0 0 12px;color:rgba(255,255,255,.82);line-height:1.6}
.detail-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.detail-tags span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.detail-actions{display:flex;gap:10px;margin-bottom:20px}
.detail-actions .primary,.detail-actions .secondary{flex:1;margin:0}
.detail-block{margin-bottom:20px}
.detail-block-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.detail-block-head b{font-size:16px}
.detail-block-head span{color:var(--muted);font-size:12px}
.detail-image-grid{display:grid;gap:8px}
.detail-image-grid.three{grid-template-columns:repeat(3,1fr)}
.detail-image-grid.two{grid-template-columns:repeat(2,1fr)}
.detail-image-grid button{border:none;padding:0;border-radius:14px;overflow:hidden;background:#15111c;aspect-ratio:3/4}
.detail-image-grid img{width:100%;height:100%;object-fit:cover}

/* 沉浸播放 / 照片玩法 */
.photo-page{position:absolute;inset:0;overflow:hidden;background:#000}
.photo-story-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,rgba(0,0,0,.8));pointer-events:none}
.player-top{position:absolute;z-index:20;top:0;left:0;right:0;padding:14px;display:flex;align-items:center;gap:10px;transition:.2s}
.player-title{flex:1;min-width:0}
.player-title b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-title span{display:block;color:rgba(255,255,255,.7);font-size:11px;margin-top:2px}
.player-top .round-btn{background:rgba(0,0,0,.5);border-color:rgba(7,193,96,.55);color:#07c160}
.player-top .player-title b{color:#07c160;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.player-top .player-title span{color:#a6ecc4;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.header-actions{display:flex;gap:8px}
.right-actions{position:absolute;z-index:20;right:12px;top:38%;display:flex;flex-direction:column;gap:10px;transition:.2s}
.right-actions button{width:52px;height:56px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.34);backdrop-filter:blur(10px);color:#fff;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.right-actions small{font-size:10px;color:rgba(255,255,255,.7)}
.love-mini{position:absolute;z-index:20;left:14px;top:74px;width:150px;border:1px solid var(--line);background:rgba(0,0,0,.32);backdrop-filter:blur(10px);border-radius:999px;padding:8px 12px;transition:.2s}
.love-mini span{display:flex;justify-content:space-between;font-size:11px}
.love-mini b{color:var(--gold)}
.love-mini i{display:block;height:5px;border-radius:999px;margin-top:6px;background:rgba(255,255,255,.16);overflow:hidden}
.love-mini em{display:block;height:100%;width:0;background:linear-gradient(90deg,#d9a441,var(--gold));border-radius:999px}
.interaction-panel{position:absolute;z-index:30;left:12px;right:12px;bottom:18px;border:1px solid rgba(255,255,255,.2);background:rgba(18,14,24,.4);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-radius:24px;padding:16px;transition:.25s;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.interaction-panel.collapsed{transform:translateY(calc(100% - 56px));opacity:.96}
.subtitle-text{min-height:40px;line-height:1.6;font-size:14px;color:#fff4f8}
.choice-box{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.choice-box button{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.08);color:#fff;padding:12px 14px;text-align:left;font-weight:700;line-height:1.4}
.choice-box button small{color:var(--gold);font-weight:700;font-size:11px;margin-left:6px}
.choice-box button.continue{text-align:center;background:var(--gold-fill);border:1px solid var(--gold-line);color:var(--gold)}
.ui-hidden .player-top,.ui-hidden .love-mini{opacity:0;pointer-events:none}
.ui-hidden .right-actions button:not(.ui-toggle-btn){opacity:0;pointer-events:none}
.ui-hidden .interaction-panel{transform:translateY(calc(100% - 8px));opacity:.2}

/* 相册集 */
.theme-album-list{display:flex;flex-direction:column;gap:12px}
.theme-album-card{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px;border:1px solid var(--line);border-radius:20px;background:var(--panel);text-align:left;align-items:stretch}
.theme-album-cover-wrap{position:relative;width:92px;height:124px}
.theme-album-cover-wrap span{position:absolute;left:6px;bottom:6px;font-size:10px;background:rgba(0,0,0,.55);border-radius:999px;padding:2px 8px;color:#fff}
.theme-album-card-body{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.theme-album-main b{display:block;font-size:16px}
.theme-album-main small{display:block;color:var(--gold);font-size:11px;margin:2px 0 4px}
.theme-album-main p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.mini-progress{height:5px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:8px}
.mini-progress em{display:block;height:100%;background:linear-gradient(90deg,#d9a441,var(--gold))}
.theme-album-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.theme-album-meta em{font-style:normal;font-weight:800;color:var(--gold)}
.theme-album-meta small{color:var(--muted);font-size:11px}

/* 相册主题详情网格 */
.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.album-item{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#15111c;cursor:pointer}
.album-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;font-size:12px}
.album-caption button{border:1px solid var(--gold-line);border-radius:999px;background:var(--gold-fill);color:var(--gold);font-weight:800;padding:6px 10px}

/* 心动指数 */
.affinity-list{display:flex;flex-direction:column;gap:12px}
.affinity-card{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px;border:1px solid var(--line);border-radius:20px;background:var(--panel);text-align:left;align-items:center}
.affinity-card>img{width:84px;height:112px;object-fit:cover;border-radius:16px}
.affinity-card-body{min-width:0}
.affinity-card-head{display:flex;justify-content:space-between;align-items:flex-start}
.affinity-card-head b{display:block;font-size:16px}
.affinity-card-head span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.affinity-card-head em{font-style:normal;font-weight:800;color:var(--gold)}
.affinity-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin:10px 0}
.affinity-bar i,.affinity-bar em{display:block;height:100%;background:linear-gradient(90deg,#d9a441,var(--gold));border-radius:999px}
.affinity-bar.large{height:8px}
.affinity-card-foot{display:flex;gap:10px;flex-wrap:wrap}
.affinity-card-foot small{color:var(--muted);font-size:11px}

/* 心动详情 */
.heart-profile-hero{position:relative;height:300px;border-radius:0 0 24px 24px;overflow:hidden;margin-bottom:14px}
.heart-profile-hero img{width:100%;height:100%;object-fit:cover}
.heart-profile-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,6,12,.92))}
.heart-profile-info{position:absolute;left:16px;right:16px;bottom:16px}
.heart-profile-info span{color:var(--gold);font-size:12px}
.heart-profile-info h2{margin:4px 0;font-size:26px}
.heart-profile-info p{margin:0;color:rgba(255,255,255,.8);font-size:13px}
.heart-big-percent{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.heart-big-percent b{font-size:34px;color:var(--gold)}
.heart-big-percent span{color:var(--muted)}
.heart-detail-grid{display:flex;gap:12px;margin:14px 0}
.heart-detail-grid>div{flex:1}
.heart-detail-grid small{display:block;color:var(--muted);font-size:11px}
.heart-detail-grid b{font-size:14px}
.heart-detail-page .page-scroll{display:flex;flex-direction:column;padding-bottom:16px}
.heart-detail-page .heart-profile-hero{flex:1 1 auto;height:auto;min-height:240px;margin-bottom:12px}
.heart-detail-page .heart-profile-panel{flex:none;margin-bottom:0}
.heart-detail-page .heart-profile-panel .primary.full{margin-top:14px}

/* 我的 */
.pv2-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 96px}
.pv2-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.pv2-title{font-size:24px;font-weight:800}
.pv2-coin-pill{display:flex;align-items:center;gap:5px;border:1px solid var(--gold-line);color:var(--gold);background:var(--gold-fill);border-radius:999px;padding:7px 12px;font-weight:800}
.pv2-identity{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pv2-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-fill);border:1px solid rgba(243,198,116,.35);color:var(--gold);flex:none}
.pv2-name{font-size:18px;font-weight:800}
.pv2-sub-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.pv2-sub{color:var(--muted);font-size:12px;word-break:break-all}
.pv2-copy-btn{flex:none;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.06);color:var(--muted);width:26px;height:24px;display:flex;align-items:center;justify-content:center}
.pv2-stats{display:flex;gap:10px;margin-bottom:16px}
.pv2-stats>div{flex:1;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:12px;text-align:center}
.pv2-stats span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}
.pv2-stats b{font-size:20px}
.pv2-auth-prompt{display:flex;gap:10px;margin-bottom:16px}
.pv2-primary,.pv2-secondary{flex:1;border:none;border-radius:14px;padding:13px;font-weight:800}
.pv2-primary{background:var(--gold-fill);border:1px solid var(--gold-line);color:var(--gold)}
.pv2-secondary{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff}
.pv2-section-title{margin:18px 2px 10px;font-size:13px;color:var(--muted);font-weight:700}
.pv2-list{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:6px}
.pv2-row{display:flex;align-items:center;gap:12px;border:none;background:none;color:var(--text);padding:12px;border-radius:12px;text-align:left;text-decoration:none}
.pv2-row:active{background:rgba(255,255,255,.05)}
.pv2-row-icon{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.pv2-row-text{flex:1;min-width:0}
.pv2-row-text b{display:block;font-size:14px}
.pv2-row-text span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.pv2-row-chev{flex:none;color:var(--muted)}
.pv2-row.pv2-danger .pv2-row-icon{color:#ff6b6b}
.pv2-row.pv2-danger .pv2-row-text b{color:#ff6b6b}
.pv2-footer{text-align:center;color:var(--muted);font-size:11px;margin-top:22px;opacity:.7}

/* 弹层 / 弹窗（磨砂玻璃） */
.sheet,.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;padding:12px;background:rgba(0,0,0,.6)}
.modal{align-items:center}
.sheet.show,.modal.show{display:flex}
.sheet-card,.modal-card{position:relative;width:min(440px,100%);max-height:86%;overflow-y:auto;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(243,198,116,.1),transparent 42%),rgba(20,16,26,.82);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 26px 80px rgba(0,0,0,.55);padding:22px}
.close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px}
.sheet-card h2,.modal-card h2{font-size:24px;margin:8px 0}
.sheet-card>p,.modal-card>p{color:var(--muted);line-height:1.6;font-size:13px}
.recharge-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.modal-card .primary,.modal-card .secondary{margin-top:10px}

/* 大图预览 */
.viewer{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.9)}
.viewer.show{display:flex}
.viewer img{max-width:100%;max-height:84%;border-radius:16px;object-fit:contain}
.viewer-close{z-index:150}
.viewer-caption{position:absolute;left:16px;right:16px;bottom:18px;text-align:center;color:#fff;background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:999px;padding:9px 12px;font-size:13px}

/* 轻提示 */
.toast{position:fixed;z-index:160;left:50%;bottom:30px;transform:translateX(-50%);max-width:80%;display:none;background:rgba(0,0,0,.82);border:1px solid var(--line);color:#fff;border-radius:999px;padding:10px 16px;font-size:13px;text-align:center}
.toast.show{display:block}

/* 登录弹窗（磨砂玻璃） */
.auth-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.66)}
.auth-modal.show{display:flex}
.auth-card{position:relative;width:min(380px,100%);border:1px solid rgba(255,255,255,.16);border-radius:24px;background:rgba(20,16,26,.86);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);padding:22px}
.auth-card h2{margin:0 0 6px;font-size:22px}
.auth-card>p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.5}
.auth-tabs{display:flex;gap:8px;margin-bottom:14px}
.auth-tabs button{flex:1;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--muted);padding:10px;font-weight:700}
.auth-tabs button.active{background:var(--gold-fill);color:var(--gold);border:1px solid var(--gold-line)}
.auth-row{display:flex;gap:8px;margin-bottom:10px}
.auth-card select,.auth-card input{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;padding:12px;font-size:14px;width:100%}
.auth-card select option{color:#111;background:#fff}
.auth-row select{flex:none;width:42%}
.auth-card>input{margin-bottom:10px}
.full-btn{width:100%;border:1px solid var(--gold-line);border-radius:12px;padding:13px;font-weight:800;color:var(--gold);background:var(--gold-fill);margin-bottom:8px}
.auth-close{width:100%;border:1px solid var(--line);border-radius:12px;background:none;color:var(--muted);padding:11px}
.auth-tip{color:#ff7a8f;font-size:12px;text-align:center;min-height:16px;margin-top:8px}

/* 隐藏滚动条（保留滚动能力） */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}

/* 工具类 / 登录态 */
.hidden{display:none!important}
body:not(.logged-in) .profile-v2-page [data-auth="in"]{display:none!important}
body.logged-in .profile-v2-page [data-auth="out"]{display:none!important}

/* 窄屏全屏 */
@media(max-width:460px){
  .h5-shell{padding:0}
  .device-frame{width:100%;height:100vh;padding:0;border-radius:0;box-shadow:none}
  .device-screen{border-radius:0}
  .app{border-radius:0}
}