/* ============================================================
   游戏星：大厅 + 答题 + 摘星星 + 记忆翻牌
   ============================================================ */
#gamesView{
  overflow-y:auto;
  z-index:10;
  background:
    radial-gradient(42% 30% at 85% 8%, rgba(122,95,208,.16), transparent 70%),
    radial-gradient(38% 28% at 10% 88%, rgba(226,103,143,.10), transparent 70%),
    linear-gradient(180deg,#12122e 0%,#1b1b42 55%,#262650 100%);
  color:#e8e6f5;
}

.games-header{
  text-align:center;
  padding:clamp(48px,9vh,80px) 20px 8px;
}
.games-title{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:clamp(26px,5vw,38px);
  font-weight:600;
  color:#e4d6ff;
  letter-spacing:.14em;
  margin-bottom:8px;
}
.games-subtitle{
  font-size:13px;
  color:rgba(255,255,255,.55);
  letter-spacing:.24em;
}

/* 大厅：三个游戏入口 */
.games-list{
  max-width:860px;
  margin:0 auto;
  padding:26px clamp(16px,4vw,40px) 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}
.game-entry{
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:22px 20px 18px;
  cursor:pointer;
  color:inherit;
  transition:transform .25s cubic-bezier(.25,.7,.3,1), background .25s, border-color .25s;
  -webkit-tap-highlight-color:transparent;
}
.game-entry:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}
.game-entry:focus-visible{outline:2px dashed #ffd27a;outline-offset:4px}
.game-entry .ge-icon{font-size:26px}
.game-entry h3{
  margin-top:10px;
  font-size:17px;letter-spacing:.08em;
  color:#f3ecff;
}
.game-entry p{
  margin-top:6px;
  font-size:12.5px;line-height:1.7;
  color:rgba(255,255,255,.6);
}
.game-entry .ge-best{
  display:inline-block;
  margin-top:12px;
  padding:3px 12px;
  border-radius:999px;
  font-size:11px;letter-spacing:.1em;
  border:1px solid rgba(255,214,122,.35);
  color:#ffd27a;
}

.games-footer{
  text-align:center;
  padding:36px 20px 56px;
  font-size:12px;
  color:rgba(255,255,255,.35);
  letter-spacing:.24em;
}

/* ---------- 通用游戏面板 ---------- */
.game-stage{
  max-width:640px;
  margin:0 auto;
  padding:8px clamp(16px,4vw,40px) 60px;
}
.game-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 2px 18px;
}
.game-topbar .gt-title{
  font-size:16px;letter-spacing:.12em;color:#e4d6ff;
}
.game-topbar .gt-stat{
  font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.55);
}
.game-panel{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  border-radius:18px;
  padding:clamp(18px,4vw,30px);
}

/* ---------- 答题 ---------- */
.quiz-progress{
  height:5px;border-radius:5px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
  margin-bottom:20px;
}
.quiz-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#cbb2f2,#ffd27a);
  border-radius:5px;
  transition:width .4s ease;
}
.quiz-q{
  font-size:17px;line-height:1.8;letter-spacing:.02em;
  color:#f3ecff;
  margin-bottom:18px;
}
.quiz-opts{display:grid;gap:10px}
.quiz-opt{
  text-align:left;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:inherit;
  border-radius:12px;
  padding:13px 16px;
  font-size:14.5px;letter-spacing:.04em;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.quiz-opt:hover:not(:disabled){background:rgba(255,255,255,.11)}
.quiz-opt:active:not(:disabled){transform:scale(.98)}
.quiz-opt:focus-visible{outline:2px dashed #ffd27a;outline-offset:3px}
.quiz-opt.right{
  border-color:rgba(140,220,160,.7);
  background:rgba(110,200,140,.18);
}
.quiz-opt.wrong{
  border-color:rgba(240,120,140,.7);
  background:rgba(220,90,120,.18);
}
.quiz-opt:disabled{cursor:default}
.quiz-note{
  margin-top:16px;min-height:22px;
  font-size:13px;letter-spacing:.04em;
  color:#ffd27a;
}
.quiz-result{text-align:center;padding:12px 0}
.quiz-score{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:56px;color:#ffd27a;
}
.quiz-score small{font-size:20px;color:rgba(255,255,255,.5)}
.quiz-verdict{
  margin-top:8px;
  font-size:15px;letter-spacing:.1em;color:#f3ecff;
}
.quiz-sub{
  margin-top:10px;font-size:13px;line-height:1.8;
  color:rgba(255,255,255,.6);
}
.btn-ghost{
  margin-top:22px;
  padding:11px 28px;
  border-radius:999px;
  border:1px solid rgba(255,214,122,.45);
  background:transparent;
  color:#ffd27a;font-size:14px;letter-spacing:.1em;
  cursor:pointer;
  transition:background .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-ghost:hover{background:rgba(255,214,122,.12)}
.btn-ghost:focus-visible{outline:2px dashed #ffd27a;outline-offset:3px}

/* ---------- 摘星星 ---------- */
.star-field{
  position:relative;
  height:min(52dvh,430px);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(122,95,208,.25), transparent 70%),
    linear-gradient(180deg,#0a0a22 0%,#161638 100%);
  border:1px solid rgba(255,255,255,.08);
}
.pick-star{
  position:absolute;
  width:34px;height:34px;
  border:0;background:none;padding:0;cursor:pointer;
  color:#ffe9b0;
  animation:twinkle 2.6s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.pick-star::before{
  content:"✦";
  font-size:22px;
  text-shadow:0 0 10px rgba(255,225,150,.9),0 0 22px rgba(255,210,120,.5);
}
.pick-star:hover{color:#fff}
.pick-star:focus-visible{outline:2px dashed #ffd27a;outline-radius:50%;outline-offset:2px}
.pick-star.got{animation:none;color:rgba(255,255,255,.18);cursor:default}
.pick-star.got::before{content:"☆";text-shadow:none}
@keyframes twinkle{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.22)}
}
.star-msg{
  margin-top:16px;
  min-height:44px;
  text-align:center;
  font-size:14px;line-height:1.8;letter-spacing:.04em;
  color:#efe8f2;
}
.star-msg b{color:#ffd27a;font-weight:500}
.star-unlock{
  margin-top:14px;
  padding:14px 16px;
  border-radius:12px;
  text-align:center;
  border:1px solid rgba(255,214,122,.4);
  background:rgba(255,214,122,.08);
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:15px;letter-spacing:.06em;
  color:#ffe9c9;
}

/* ---------- 记忆翻牌 ---------- */
.match-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.mcard{
  aspect-ratio:3/4;
  border:0;background:none;padding:0;cursor:pointer;
  perspective:600px;
  -webkit-tap-highlight-color:transparent;
}
/* 发牌入场动画：配合 JS 逐张设置 --rot 与延迟 */
.mcard.deal{
  animation:dealIn .5s cubic-bezier(.3,.8,.35,1) backwards;
}
@keyframes dealIn{
  from{opacity:0;transform:scale(.2) rotate(var(--rot,10deg))}
  to{opacity:1;transform:none}
}
.mcard:focus-visible{outline:2px dashed #ffd27a;outline-offset:3px;border-radius:10px}
.mcard .mc-inner{
  display:block;
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,.1,.3,1);
  border-radius:10px;
}
.mcard.flip .mc-inner{transform:rotateY(180deg)}
.mc-face{
  position:absolute;inset:0;
  border-radius:10px;
  display:grid;place-items:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.mc-front{
  background:linear-gradient(145deg,#2b2b5e,#1d1d46);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,225,150,.75);
  font-size:20px;
}
.mc-back{
  background:linear-gradient(145deg,#fdf6ff,#efe6fa);
  transform:rotateY(180deg);
  font-size:clamp(26px,7vw,34px);
}
.mcard.matched{cursor:default}
.mcard.matched .mc-back{
  background:linear-gradient(145deg,#fff4d6,#ffe3ee);
  box-shadow:0 0 16px rgba(255,214,122,.35);
}
.match-win{
  margin-top:16px;
  padding:14px 16px;
  border-radius:12px;
  text-align:center;
  border:1px solid rgba(255,214,122,.4);
  background:rgba(255,214,122,.08);
  font-size:14.5px;letter-spacing:.05em;
  color:#ffe9c9;
}
@media (max-width:480px){
  .match-grid{gap:8px}
  .mc-front{font-size:16px}
}