/* ============================================================
   太空主题 · 全站覆盖
   3D 星空画布在 z-index:-1，所有内容做成"玻璃卡"浮在上面
   ============================================================ */
:root{
  --ink:#e9f2ff;
  --sub:#9db1d2;
  --card:rgba(13,21,40,.74);
  --line:rgba(120,165,235,.24);
}

/* 关键：body 必须透明，否则会盖住 z-index:-1 的 3D 画布（画布只会在 html 背景之上） */
html{background:#05070f}
body{
  background:transparent;
  color:var(--ink);
}
/* 两层背景光，做出纵深，别让四周纯黑发死 */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(58% 42% at 50% 10%,rgba(48,96,190,.40),transparent 72%),
    radial-gradient(42% 30% at 84% 80%,rgba(110,60,190,.20),transparent 72%),
    linear-gradient(180deg,#070c1a,#05070f 62%);
}
#bg3d{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;display:block;pointer-events:none;
}
.wrap{position:relative;z-index:1}

/* ---------- 玻璃卡片 ---------- */
.hero,.list,.task,.zi,.q,.qzwrap,.loginBox{
  background:var(--card) !important;
  border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 14px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07) !important;
  color:var(--ink);
}
.row{
  background:transparent !important;
  border-bottom:1px solid rgba(120,165,235,.14);
  color:var(--ink);
}
.row:active{background:rgba(120,165,235,.14) !important}
.hi,.sec,.task .nm,.row .n,.row .t{color:var(--ink)}
.hi small,.muted,.sec span,.task .muted,.row .muted{color:var(--sub)}
header .hi{text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ---------- 输入框 ---------- */
input,select,textarea{
  background:rgba(255,255,255,.07) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:12px;
  color-scheme:dark;
}
input::placeholder{color:#7d90b0}
select option{background:#0d1528;color:var(--ink)}

/* ---------- 按钮 ---------- */
.btn{color:var(--ink);border:1px solid var(--line);background:rgba(255,255,255,.08)}
.btn.ghost{background:rgba(255,255,255,.05) !important;color:#cfe0ff !important}
.btn.ok{background:linear-gradient(180deg,#34d37a,#1fae52) !important;color:#04230f !important;border-color:transparent !important}
.btn.gold{background:linear-gradient(180deg,#ffd166,#ffb020) !important;color:#3a2400 !important;border-color:transparent !important}

/* ---------- 底部导航 ---------- */
nav{
  background:rgba(8,13,26,.88) !important;
  border-top:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
nav a{color:#8aa0c4}
nav a.on{color:#7fb0ff;text-shadow:0 0 12px rgba(90,160,255,.6)}

/* ---------- 进度条 / 周历 ---------- */
.bar{background:rgba(255,255,255,.1) !important}
.week .d{color:var(--sub)}

/* ---------- 选项 / 游戏卡 ---------- */
.opt{
  background:rgba(255,255,255,.08) !important;
  border-color:var(--line) !important;
  color:#d6e6ff !important;
  box-shadow:0 4px 0 rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.35) !important;
}
.opt.right{background:rgba(34,197,94,.24) !important;border-color:#3cc878 !important;color:#a7f3c4 !important}
.opt.wrong{background:rgba(239,68,68,.22) !important;border-color:#e64646 !important;color:#ffb9b9 !important}

.mcard{
  background:linear-gradient(135deg,rgba(90,150,255,.55),rgba(28,64,168,.6)) !important;
  color:#fff;
  box-shadow:0 6px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.45) !important;
}
.mcard.open{background:rgba(255,255,255,.94) !important;color:#16233c !important}
.mcard.gone{background:rgba(255,255,255,.08) !important}

.mmc{
  background:rgba(255,255,255,.08) !important;
  color:#d6e6ff !important;
  border-color:var(--line) !important;
  box-shadow:0 5px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.4) !important;
}
.mmc.sel{background:rgba(255,190,60,.26) !important;border-color:#f0a33a !important;color:#ffe6ae !important}
.mmc.done{background:rgba(34,197,94,.24) !important;border-color:#3cc878 !important;color:#a7f3c4 !important}

.qzwrap{background:var(--card) !important}
.qzbar{background:rgba(255,255,255,.1) !important}
.qzexpr{color:#eaf3ff !important;text-shadow:0 3px 0 rgba(80,140,255,.25), 0 10px 24px rgba(0,0,0,.6)}
.qzopt{
  background:rgba(255,255,255,.08) !important;
  border-color:var(--line) !important;
  color:#d6e6ff !important;
  box-shadow:0 5px 0 rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.4) !important;
}
.qzopt.right{background:rgba(34,197,94,.24) !important;border-color:#3cc878 !important;color:#a7f3c4 !important}
.qzopt.wrong{background:rgba(239,68,68,.22) !important;border-color:#e64646 !important;color:#ffb9b9 !important}

/* ---------- 学习卡里的大字 ---------- */
.big{color:#f4f9ff;text-shadow:0 3px 0 rgba(80,140,255,.3), 0 12px 26px rgba(0,0,0,.65)}
.zi.peek .big{text-shadow:0 6px 0 rgba(80,140,255,.28), 0 18px 34px rgba(0,0,0,.7)}
.zi .py{color:#8fd0ff}
.zi .ci{color:var(--sub)}

/* ---------- 登录页 ---------- */
#login{background:radial-gradient(60% 50% at 50% 18%,rgba(50,100,200,.5),transparent 70%),linear-gradient(170deg,#0a1122,#05070f)}
.loginBox{
  background:rgba(13,21,40,.86) !important;
  border:1px solid var(--line);
  color:var(--ink);
}
.loginBox h2{color:#fff}
.loginBox p{color:var(--sub)}
.loginBox .err{color:#ff9a9a}

/* ---------- 首页：每日一知卡 ---------- */
.dly{
  background:linear-gradient(150deg,rgba(38,58,110,.9),rgba(16,26,48,.92));
  border:1px solid var(--line);border-radius:20px;padding:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px);margin-bottom:14px;
}
.dly .dhead{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.dly .demoji{font-size:34px;line-height:1;filter:drop-shadow(0 6px 14px rgba(255,200,80,.4))}
.dly .dtit{font-size:17px;font-weight:900;color:#f2f8ff}
.dly .dsub{font-size:11.5px;color:var(--sub);margin-top:3px}
.dly .dbody{font-size:14px;line-height:1.82;color:#dbe8ff;margin:12px 0 10px}
.dly .dopts{display:grid;gap:8px}
.dly .dopt{
  text-align:left;padding:10px 13px;border-radius:12px;font-size:14px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#d6e6ff;
  box-shadow:0 3px 0 rgba(255,255,255,.05);
}
.dly .dopt:active{transform:translateY(2px)}
.dly .dopt.right{background:rgba(34,197,94,.24);border-color:#3cc878;color:#a7f3c4}
.dly .dopt.wrong{background:rgba(239,68,68,.22);border-color:#e64646;color:#ffb9b9}
.dly .dres{font-size:13px;font-weight:700;margin-top:8px;color:#ffd166}
.dly .drow{display:flex;gap:8px;margin-top:12px}
.dly .drow .btn{flex:1;text-align:center}

/* 小屏微调 */
@media (max-width:430px){
  .wrap{padding:10px}
  .dly{padding:14px}
  .dly .dbody{font-size:13.5px}
}

/* ============================================================
   登录：太空最亮 → 选模块 → 进模块后太空变淡、卡片变深
   ============================================================ */
#login{
  background:radial-gradient(65% 50% at 50% 20%,rgba(30,66,132,.42),transparent 72%) !important;
}
body.at-login #bg3d{opacity:1;filter:brightness(1.2) saturate(1.1)}
body.at-login::before{opacity:1}

/* 进到具体模块：背景压暗压淡，内容卡变深，保证看得清字 */
body.in-module{--card:rgba(9,15,30,.9)}
body.in-module #bg3d{opacity:.40;filter:brightness(.72) saturate(.85)}
body.in-module::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(6,10,20,.35),rgba(4,7,14,.72));
}
body.in-module .hero,body.in-module .list,body.in-module .task,
body.in-module .zi,body.in-module .q,body.in-module .qzwrap,body.in-module .dly{
  background:rgba(9,15,30,.9) !important;
  border-color:rgba(130,175,245,.22);
  box-shadow:0 14px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* 模块选择页：大瓷砖 */
.launch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.ltile{
  background:rgba(13,21,40,.66);
  border:1px solid var(--line);border-radius:22px;padding:22px 14px;text-align:center;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 16px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transform-style:preserve-3d;
  transition:transform .16s ease, box-shadow .16s ease;
}
.ltile .li{font-size:40px;display:block;margin-bottom:10px;
  filter:drop-shadow(0 10px 18px rgba(90,150,255,.5))}
.ltile .ln{font-size:16px;font-weight:900;color:#f0f7ff;letter-spacing:.5px}
.ltile .lm{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.5}
.ltile:active{transform:translateY(4px) rotateX(7deg) scale(.97);
  box-shadow:0 6px 16px rgba(0,0,0,.5)}
#p-launch header .hi{font-size:21px}
@media (min-width:560px){
  .launch{grid-template-columns:repeat(3,1fr)}
}

/* 每日一知首屏：进门按钮 */
.dlygo{margin-top:14px}
.dlygo .btn{width:100%;text-align:center;padding:15px;font-size:15px}
.btn:disabled{opacity:.5;filter:grayscale(.3)}

/* 游戏区尺寸收敛，别让翻牌占满整屏 */
.mem{max-width:430px;margin-left:auto;margin-right:auto}
.mm{max-width:540px;margin-left:auto;margin-right:auto}
.qzwrap{max-width:540px;margin-left:auto;margin-right:auto}
.mcard{font-size:26px}
@media (max-width:430px){
  .mem{max-width:100%}
  .mcard{font-size:22px}
}

/* ============================================================
   音效 + 特效
   ============================================================ */
/* 点击水波纹 */
.sfx-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(160,205,255,.55),rgba(120,170,255,.12) 60%,transparent 70%);
  transform:scale(0);opacity:.9;
  animation:sfxRipple .6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes sfxRipple{
  0%{transform:scale(0);opacity:.85}
  100%{transform:scale(1);opacity:0}
}

/* 答对星星迸发 */
.sfx-burst{
  position:fixed;z-index:9999;pointer-events:none;width:0;height:0;
}
.sfx-star{
  position:absolute;font-size:16px;line-height:1;
  animation:sfxStar .9s cubic-bezier(.15,.85,.3,1) forwards;
  filter:drop-shadow(0 3px 8px rgba(255,210,80,.65));
}
.sfx-star.bad{filter:drop-shadow(0 3px 8px rgba(255,90,90,.6));font-size:14px}
@keyframes sfxStar{
  0%{transform:translate3d(0,0,0) scale(.5) rotate(0deg);opacity:1}
  70%{opacity:1}
  100%{transform:translate3d(var(--tx),var(--ty),0) scale(1.15) rotate(var(--rz));opacity:0}
}

/* 页面 3D 翻入 */
.page3d-in{animation:page3dIn .58s cubic-bezier(.2,.9,.25,1)}
@keyframes page3dIn{
  0%{transform:perspective(1200px) rotateX(-9deg) translateY(18px) scale(.965);opacity:0}
  100%{transform:perspective(1200px) rotateX(0) translateY(0) scale(1);opacity:1}
}

/* 音效开关 */
#sfxBtn{
  position:fixed;right:12px;top:calc(env(safe-area-inset-top) + 12px);z-index:60;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:rgba(13,21,40,.8);border:1px solid var(--line);
  color:#cfe0ff;backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
#sfxBtn:active{transform:scale(.92)}

/* ============================================================
   强制休息：全屏遮罩，休息期间任何动画都停掉
   ============================================================ */
#restMask{
  position:fixed;inset:0;z-index:900;
  display:none;align-items:center;justify-content:center;
  background:#05070f;
  padding:24px;
}
#restMask.on{display:flex}
.restBox{text-align:center;max-width:340px}
.restIco{font-size:64px;line-height:1;margin-bottom:18px}
.restTit{font-size:22px;font-weight:900;color:#e9f2ff;letter-spacing:1px}
.restTime{
  font-size:56px;font-weight:900;color:#7fb0ff;margin:14px 0 10px;
  font-variant-numeric:tabular-nums;letter-spacing:2px;
  text-shadow:0 0 28px rgba(90,160,255,.55);
}
.restTip{font-size:13.5px;color:#9db1d2;line-height:1.85;margin-bottom:20px}
#restSkip{padding:9px 18px;font-size:13px}

/* 休息期间：背景画布隐藏，全站动画/过渡一律停掉 */
body.resting #bg3d{display:none !important}
body.resting *,
body.resting *::before,
body.resting *::after{
  animation:none !important;
  transition:none !important;
}
body.resting .hero{transform:none !important}

/* ============================================================
   横屏 / 竖屏：横屏重新铺开，不再是一条竖屏拉长
   body.land = 横屏（自动跟随屏幕方向，或点右上角按钮强制）
   ============================================================ */
#rotBtn{
  position:fixed;right:60px;top:calc(env(safe-area-inset-top) + 12px);z-index:60;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:rgba(13,21,40,.8);border:1px solid var(--line);
  color:#cfe0ff;backdrop-filter:blur(10px);box-shadow:0 8px 20px rgba(0,0,0,.45);
}
#rotBtn:active{transform:scale(.92)}
body.land #rotBtn{right:12px}
body.land #sfxBtn{right:60px}

/* 关键：原来 .wrap 固定 720px，横屏时还是窄窄一条 */
body.land .wrap{max-width:1180px;padding:10px 18px 88px}

/* 模块选择：一排 3 个，宽屏 4 个 */
body.land #p-launch .launch{grid-template-columns:repeat(3,1fr);gap:10px}
body.land .ltile{padding:14px 10px;border-radius:18px}
body.land .ltile .li{font-size:30px;margin-bottom:6px}
body.land .ltile .ln{font-size:14px}
body.land .ltile .lm{font-size:10px}
@media (min-width:1000px){body.land #p-launch .launch{grid-template-columns:repeat(4,1fr)}}

/* 每日一知：卡片在左，进模块按钮在右 */
body.land #p-daily.on{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:14px;align-items:start}
body.land #p-daily header{grid-column:1/-1}
body.land #p-daily .dlygo{margin-top:0}
body.land #p-daily>.muted{grid-column:1/-1}

/* 首页：积分卡在左，明细在右 */
body.land #p-home.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
body.land #p-home header{grid-column:1/-1}

/* 学习页：分类在左，学习卡在右 */
body.land #p-learn.on{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:start}
body.land #p-learn header{grid-column:1/-1}

/* 横屏高度矮，大字收敛 */
body.land .zi .big{font-size:72px;letter-spacing:4px}
body.land .zi .py{font-size:20px}
body.land .q .expr{font-size:38px}
body.land .dly .dbody{font-size:13px;line-height:1.7;margin:8px 0}
body.land .hero{margin-bottom:0}
body.land .mem{max-width:520px}
body.land .mm,body.land .qzwrap{max-width:600px}

/* 登录：横屏别一条竖到底 */
body.land .loginBox{max-width:560px;padding:18px 20px}
body.land .loginBox .lg{font-size:42px;margin-bottom:4px}
body.land .loginBox h2{font-size:20px}

/* 修正：上面的 display:grid 会盖掉 .page{display:none}，横屏时几页会一起显出来 */
body.land .page{display:none}
body.land .page.on{display:block}
body.land #p-daily.on{display:grid}
body.land #p-home.on{display:grid}
body.land #p-learn.on{display:grid}

/* 手机横屏（屏幕很矮）再压一点 */
@media (orientation:landscape) and (max-height:470px){
  body.land .wrap{padding:6px 14px 80px}
  body.land #p-launch header .hi{font-size:17px}
  body.land .zi .big{font-size:58px}
  body.land .q .expr{font-size:32px}
  body.land .dly .dbody{font-size:12.5px;line-height:1.62}
}

/* 登录时后面的页面别漏出来（横屏放宽容器后原设计会漏内容） */
body.at-login .wrap{opacity:0;pointer-events:none}

/* ============================================================
   平板 / 手机兼容：宽度分档、触控热区、底部导航留白
   ============================================================ */
/* 1) 内容别被底部固定导航压住；导航项手指要够得着 */
.wrap{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
body.land .wrap{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
nav a{min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* 2) 宽度分档：手机 / 平板竖 / 平板横 */
@media (min-width:760px){ .wrap{max-width:860px} }
@media (min-width:1000px){ .wrap{max-width:1060px} }
body.land .wrap{max-width:1180px}

/* 3) 平板竖屏也铺两栏，别只给窄窄一条 */
@media (min-width:700px) and (orientation:portrait){
  #p-daily.on{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:16px;align-items:start}
  #p-daily.on header{grid-column:1/-1}
  #p-daily.on .dlygo{margin-top:0}
  #p-daily.on>.muted{grid-column:1/-1}
  #p-home.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  #p-home.on header{grid-column:1/-1}
  #p-learn.on{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}
  #p-learn.on header{grid-column:1/-1}
}

/* 4) 大屏字号别显小 */
@media (min-width:1000px){
  .launch{grid-template-columns:repeat(4,1fr)}
  .zi .big{font-size:132px}
  .zi .py{font-size:28px}
  .q .expr{font-size:60px}
  .dly .dtit{font-size:19px}
  .dly .dbody{font-size:15.5px;line-height:1.9}
  nav a{font-size:13px}
  .ltile .li{font-size:46px}
  .ltile .ln{font-size:18px}
  .ltile .lm{font-size:12px}
}