.games-page {
  display: none;
  position: fixed;
  z-index: 115;
  inset: 0;
  overflow: auto;
  background: #101229;
  color: #fff;
}
.raffle-progress{height:10px;margin:14px 0;overflow:hidden;border-radius:10px;background:#e8eaf0}.raffle-progress i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#e8a90a,#f6c33d)}.raffle-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.raffle-tiers span{display:grid;padding:9px 4px;border:1px solid #e4e5ea;border-radius:10px;color:#999;text-align:center}.raffle-tiers span.reached{border-color:#e8a90a;background:#fff9e6;color:#b57900}.raffle-tiers small{margin-top:3px;font-size:9px}
.crabbet-candidates{display:grid;gap:7px;margin:13px 0}.crabbet-candidates label{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e4e5ea;border-radius:11px;background:#fff}.crabbet-candidates input{accent-color:#465ee8}.crabbet-candidates span{display:grid}.crabbet-candidates small{margin-top:3px;color:#999}
.games-page.open {
  display: block;
}
.games-page > header {
  position: sticky;
  z-index: 4;
  top: 0;
  height: 52px;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  background: #171a38;
  border-bottom: 1px solid #ffffff18;
  text-align: center;
}
.games-page > header button {
  border: 0;
  background: none;
  color: #b9c1ff;
}
.games-page > header button:first-child {
  font-size: 28px;
  color: #fff;
}
.games-page > #gamesBody {
  max-width: 720px;
  margin: auto;
  padding: 15px 15px 90px;
}
.game-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px;
  border-radius: 18px;
  background: linear-gradient(135deg, #5d32ba, #293f9d);
  box-shadow: 0 10px 30px #0005;
}
.game-wallet small {
  display: block;
  color: #d7d5ff;
}
.game-wallet strong {
  font-size: 27px;
}
.game-wallet span:last-child {
  text-align: right;
}
.game-banner {
  margin-top: 12px;
  padding: 20px;
  border-radius: 17px;
  background: linear-gradient(135deg, #f05778, #9a3eb9);
}
.game-banner h2 {
  margin: 0 0 6px;
}
.game-banner p {
  margin: 0;
  color: #ffe3eb;
  font-size: 12px;
}
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.game-card {
  min-height: 112px;
  padding: 16px;
  border: 1px solid #ffffff12;
  border-radius: 16px;
  background: #1b1e3d;
  color: #fff;
  text-align: left;
}
.game-card:first-child {
  grid-column: 1/-1;
  background: linear-gradient(135deg, #30255e, #283a78);
}
.game-card i {
  display: block;
  margin-bottom: 8px;
  font-size: 28px;
  font-style: normal;
}
.game-card b {
  display: block;
}
.game-card small {
  display: block;
  margin-top: 5px;
  color: #9ca3ce;
}
.game-panel {
  margin-top: 12px;
  padding: 18px;
  border-radius: 17px;
  background: #1b1e3d;
}
.game-panel h3 {
  margin: 0 0 6px;
}
.game-panel p {
  color: #a7accd;
  line-height: 1.55;
}
.game-panel button,
.quiz-options button {
  border: 0;
  border-radius: 19px;
  padding: 10px 16px;
  background: #7659df;
  color: #fff;
}
.game-result {
  margin-top: 12px;
  padding: 13px;
  border-radius: 11px;
  background: #292d56;
  text-align: center;
  color: #ffe08b;
}
.lottery-rates,.arcade-modes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.lottery-rates span,.arcade-modes span{display:grid;padding:9px;border:1px solid #ffffff14;border-radius:10px;background:#24284b}.lottery-rates small,.arcade-modes small{margin-top:3px;color:#a7accd;font-size:10px}
.arcade-rooms{display:grid;gap:8px;margin:12px 0}.arcade-rooms article{display:grid;gap:7px;padding:11px;border:1px solid #ffffff14;border-radius:12px;background:#24284b}.arcade-rooms article>small{color:#a7accd}.arcade-rooms article>div{display:flex;flex-wrap:wrap;gap:6px}.arcade-rooms select{min-height:36px;padding:0 10px;border:1px solid #ffffff20;border-radius:9px;background:#181b35;color:#fff}.arcade-stake{min-height:34px;padding:0 11px;border-radius:9px}
.crabbet-market{display:grid;grid-template-columns:1fr 90px;gap:7px;margin:10px 0}.crabbet-market select{min-height:38px;padding:0 9px;border:1px solid #ffffff20;border-radius:9px;background:#181b35;color:#fff}.crabbet-rebet{min-height:28px;padding:0 8px;font-size:10px}
.crabbet-market select[hidden],.crabbet-candidates[hidden]{display:none}.crabbet-rule{min-height:38px;padding:10px 12px;border:1px solid #ffffff18;border-radius:10px;background:#181b356e;color:#cfd3ff;font-size:12px;line-height:1.45}.crabbet-market:has(#crabbetFlip[hidden]){grid-template-columns:1fr}
.arcade-stage-legend{display:flex;align-items:center;justify-content:center;gap:5px;margin:10px 0;color:#969cc8;font-size:10px}.arcade-stage-legend i{font-style:normal;color:#58608f}.arcade-rooms article header{display:flex;align-items:center;justify-content:space-between;gap:8px}.arcade-room-state{padding:3px 7px;border-radius:999px;background:#293056;color:#cfd3ff;font-size:10px;font-weight:700}.arcade-room-state.matching,.arcade-room-state.action{background:#573fa0;color:#fff}.arcade-room-state.available{background:#244d49;color:#8ce1d4}
.game-action-state{min-height:18px;margin:7px 0;color:#b8bdf0;text-align:center;font-size:12px}.game-playing button,.game-playing input{pointer-events:none;opacity:.55}.game-playing .game-action-state:before{content:"";display:inline-block;width:12px;height:12px;margin-right:7px;border:2px solid #ffffff35;border-top-color:#ffe08b;border-radius:50%;vertical-align:-2px;animation:game-spin .65s linear infinite}.game-feedback{display:flex;align-items:center;gap:10px;margin:12px 0;padding:13px;border:1px solid #6fdfb855;border-radius:13px;background:#183c39;color:#a9ffe0;animation:game-reveal .4s ease-out}.game-feedback.miss{border-color:#ff708055;background:#442333;color:#ffc0c8}.game-feedback i{display:grid;width:29px;height:29px;place-items:center;border-radius:50%;background:#ffffff16;font-size:20px;font-style:normal}.game-feedback b{flex:1}.game-feedback.win i{animation:game-pop .55s ease-out}.flip-board button:active{transform:rotateY(165deg) scale(.94)}
@keyframes game-spin{to{transform:rotate(360deg)}}@keyframes game-reveal{from{opacity:0;transform:translateY(10px) scale(.97)}}@keyframes game-pop{50%{transform:scale(1.35) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.game-playing .game-action-state:before,.game-feedback,.game-feedback.win i{animation:none}}
.flip-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 16px 0;
}
.flip-board button {
  height: 82px;
  border: 1px solid #ffffff25;
  border-radius: 11px;
  background: linear-gradient(145deg, #684ac2, #303b87);
  font-size: 27px;
}
.quiz-options {
  display: grid;
  gap: 8px;
}
.quiz-options button {
  text-align: left;
  background: #292d56;
}
.auction-price {
  margin: 12px 0;
  color: #ffd36b;
  font-size: 28px;
}
.auction-form {
  display: flex;
  gap: 8px;
}
.auction-form input {
  min-width: 0;
  flex: 1;
  padding: 11px;
  border: 0;
  border-radius: 10px;
}
.record-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #ffffff12;
}
.record-row small {
  display: block;
  color: #8d93ba;
}
.game-empty {
  text-align: center;
  padding: 55px;
  color: #858aad;
}
.auction-reward {
  margin-top: 10px;
  padding: 12px 15px;
  border: 1px solid #ffd36b55;
  border-radius: 12px;
  background: #493d24;
  color: #ffe39a;
  font-weight: 700;
}