/* 29/10: giao diện game theo mẫu chị Mai (Bingo đánh số, Memory Match thẻ tím số màu, Bubble Pop bầu trời mây hồng). */
.gamePage.reviewGame,.gamePage{background:radial-gradient(ellipse 60% 30% at 10% 100%,#ffd6ec 0 60%,transparent 61%),radial-gradient(ellipse 55% 28% at 90% 100%,#e5d4ff 0 60%,transparent 61%),radial-gradient(ellipse 40% 18% at 50% 104%,#fff1c9 0 60%,transparent 61%),linear-gradient(180deg,#cdeaff 0%,#e9e3ff 55%,#ffe9f4 100%)!important}
.gamePage .gameShell .stage{background:#ffffffd9;border:3px solid #fff;box-shadow:0 10px 30px #7a5cc22e,inset 0 0 0 2px #eadffb}
.gameMeta strong{background:#fff;border-radius:999px;padding:4px 16px 4px 6px;box-shadow:0 3px 0 #e2d6f5;color:#5b2fc4;font-family:'Baloo 2',Nunito,sans-serif;font-size:clamp(17px,2.6vw,26px)}
.gameMeta .progress i{background:#e3d8f6;border-radius:99px}
.gameMeta .progress i.on{background:linear-gradient(90deg,#ffc928,#ffb000)}
.gameBar .roundIcon{background:#fff;box-shadow:0 4px 0 #ddd0f2;color:#5b2fc4}
/* Bingo: ô đánh số màu, ảnh phủ kín ô */
.stage .bingo{counter-reset:bg;gap:clamp(8px,1.6vmin,14px)}
.stage .bingoCell{counter-increment:bg;position:relative;border-radius:20px;padding:6px;background:#fff;border:3px solid var(--bgc,#f6c9d6);box-shadow:0 4px 0 var(--bgc,#f6c9d6)}
.stage .bingoCell:nth-child(9n+1){--bgc:#f8c5d4;--bgn:#ff4f7d}.stage .bingoCell:nth-child(9n+2){--bgc:#bfdcff;--bgn:#2f7df0}.stage .bingoCell:nth-child(9n+3){--bgc:#ffe1a6;--bgn:#ff8a00}
.stage .bingoCell:nth-child(9n+4){--bgc:#dacbff;--bgn:#7a4df0}.stage .bingoCell:nth-child(9n+5){--bgc:#ffc9d0;--bgn:#ff3d5a}.stage .bingoCell:nth-child(9n+6){--bgc:#c3eed6;--bgn:#20a55a}
.stage .bingoCell:nth-child(9n+7){--bgc:#bfe0ff;--bgn:#1f6fe0}.stage .bingoCell:nth-child(9n+8){--bgc:#ffe6a8;--bgn:#f08a00}.stage .bingoCell:nth-child(9n+9){--bgc:#dccdfa;--bgn:#8b4de8}
.stage .bingoCell::before{content:counter(bg);position:absolute;left:6px;top:2px;z-index:2;font:900 clamp(20px,3.6vmin,34px)/1 'Baloo 2',Nunito,sans-serif;color:var(--bgn);-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 2px 0 #fff}
.stage .bingoCell .vocabArt.small{width:100%;max-width:none;height:100%;object-fit:cover;border-radius:14px}
.stage .bingoCell.marked{box-shadow:0 0 0 4px #ffd23f,0 4px 0 #e7b400}
/* Memory Match: thẻ tím có số màu và ngôi sao */
.stage .pairGrid{counter-reset:pc;gap:clamp(8px,1.8vmin,16px)}
.stage .pairCard{counter-increment:pc;position:relative;border-radius:20px;border:3px solid #fff;background:linear-gradient(160deg,#8f63ee,#6a3fd6);box-shadow:0 5px 0 #4f2ab0,0 8px 16px #5a35c033}
.stage .pairCard::before{content:counter(pc);position:absolute;left:8px;top:4px;z-index:2;font:900 clamp(20px,3.8vmin,36px)/1 'Baloo 2',Nunito,sans-serif;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
.stage .pairCard:nth-child(4n+1)::before{color:#ff4f9a}.stage .pairCard:nth-child(4n+2)::before{color:#2fa8ff}.stage .pairCard:nth-child(4n+3)::before{color:#ff9b1f}.stage .pairCard:nth-child(4n+4)::before{color:#2ccf6f}
.stage .pairCard .pairBack svg{color:#ffd23f;fill:#ffd23f;filter:drop-shadow(0 3px 0 #e0a800)}
.stage .pairCard.open,.stage .pairCard.done{background:#fffaf2;border-color:#7fe0cf;box-shadow:0 0 0 3px #b9f1e6,0 5px 0 #8fd8c8}
/* Bubble Pop: trời xanh, mây hồng tím, bóng óng ánh */
.bpGame .gameShell .stage,.stage .bubbleArena{background:radial-gradient(ellipse 30% 16% at 12% 92%,#ffd3ea 0 60%,transparent 62%),radial-gradient(ellipse 34% 18% at 88% 90%,#e2d1ff 0 60%,transparent 62%),radial-gradient(ellipse 26% 12% at 50% 100%,#fff0c4 0 60%,transparent 62%),radial-gradient(ellipse 22% 10% at 85% 12%,#ffe3f2 0 60%,transparent 62%),linear-gradient(180deg,#5fb8ff 0%,#9fd6ff 55%,#ffd9ec 100%)!important}
.stage .bubbleTarget{border:4px solid #ffffffcc!important;background:radial-gradient(circle at 30% 22%,#ffffffee 0 8%,transparent 9%),radial-gradient(circle,#ffffff00 58%,#ff9ad5aa 72%,#9fd8ff 86%,#d7b8ff)!important;box-shadow:0 0 18px #ffffffaa,inset 0 0 14px #ffffff99!important}
.stage .bubbleTarget .vocabArt.small{width:100%;max-width:none;border-radius:50%;background:transparent}
.gameMeta strong{display:inline-flex;align-items:center;gap:8px;width:auto;margin:0 auto}
.gameMeta{display:flex;flex-direction:column;align-items:center}
.stage .bingo{width:min(96%,calc(100svh - 230px))!important;max-width:none}
.stage .bingoCell{aspect-ratio:1}
.stage .pairGrid{width:min(96%,calc((100svh - 170px)*1.9));max-width:none!important}
.stage .pairCard{aspect-ratio:1.05}
.stage .pairCard .pairBack svg{width:clamp(36px,9vmin,80px)!important;height:auto}
@media (orientation:portrait){
  .stage .pairGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:min(94%,calc((100svh - 190px)*.55))}
  .stage .pairCard{aspect-ratio:1.15}
}
@media (orientation:landscape){
  .stage .bingo{width:min(96%,calc((100svh - 130px)*1.55))!important}
  .stage .bingoCell{aspect-ratio:1.5}
}
@media (orientation:landscape){
  .gameShell .stage:has(> .bingo){flex-direction:row;align-items:center;justify-content:safe center;gap:18px}
  .gameShell .stage:has(> .bingo) > *{margin-top:0;margin-bottom:0}
  .stage .bingo{width:min(80%,calc((100svh - 104px)*1.5))!important}
  .stage .pairGrid{width:min(96%,calc((100svh - 100px)*2))}
}
@media (orientation:landscape){
  .stage .bingo{width:min(78%,calc((100svh - 124px)*1.4))!important}
  .stage .bingo .bingoCell{aspect-ratio:1.4!important;min-height:0!important;height:auto!important}
}
.stage .bingoCell{overflow:hidden}
.stage .bingoCell .vocabArt{position:absolute!important;inset:6px;width:calc(100% - 12px)!important;height:calc(100% - 12px)!important;max-width:none!important;max-height:none!important;object-fit:cover;border-radius:14px;margin:0}