:root {
  --ink: #192238;
  --muted: #7b8294;
  --cream: #fffaf1;
  --orange: #ff7859;
}
.dino-visual {
  background: linear-gradient(#f8c978, #f5e0a2);
}
.dino-preview {
  position: absolute;
  left: 28%;
  top: 54px;
  font-size: 68px;
}
.dino-cactus {
  position: absolute;
  right: 22%;
  bottom: 28px;
  font-size: 43px;
}
.gem-visual {
  background: linear-gradient(135deg, #7548a7, #e26b9e);
}
.gem-preview {
  position: absolute;
  left: 34%;
  top: 35px;
  color: #fff;
  font: 700 42px/1.35 "Baloo 2";
  text-shadow: 0 5px 0 #31215c;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
}
.page-glow {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}
.glow-one {
  background: #ffd36e;
  top: -180px;
  left: -150px;
}
.glow-two {
  background: #82d9e7;
  right: -200px;
  bottom: 0;
}
.topbar {
  max-width: 1160px;
  margin: auto;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: "Baloo 2";
  font-size: 29px;
  font-weight: 800;
}
.brand span span {
  color: var(--orange);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  background: var(--ink);
  color: #ffd66b;
  border-radius: 12px;
  font-size: 22px;
}
.topbar nav {
  display: flex;
  gap: 34px;
}
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.status-pill {
  font-size: 12px;
  color: #5f7a64;
  font-weight: 600;
  background: #eff9e9;
  border-radius: 30px;
  padding: 10px 14px;
}
.status-pill i {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #71cf7c;
  border-radius: 50%;
  margin-right: 6px;
}
.hero {
  max-width: 1160px;
  margin: 42px auto 0;
  padding: 30px 28px 75px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--orange);
  margin: 0 0 18px;
}
.eyebrow span {
  display: inline-block;
  width: 23px;
  height: 2px;
  background: var(--orange);
  vertical-align: middle;
  margin-right: 8px;
}
.hero h1 {
  font-family: "Baloo 2";
  font-size: 75px;
  line-height: 0.96;
  letter-spacing: -2px;
  margin: 0 0 22px;
}
.hero h1 em {
  font-style: normal;
  color: var(--orange);
}
.hero-text {
  max-width: 390px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 29px;
}
.primary-button,
.play-button {
  border: 0;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 15px 20px;
  font: 600 13px "Space Grotesk";
  cursor: pointer;
  box-shadow: 0 8px 18px #19223818;
  transition: 0.2s;
}
.primary-button:hover,
.play-button:hover {
  transform: translateY(-3px);
  background: var(--orange);
}
.primary-button span,
.play-button span {
  color: #ffd66b;
  margin-left: 9px;
}
.hero-art {
  height: 340px;
  position: relative;
  background: #ffedc7;
  border-radius: 40% 44% 38% 43%;
  overflow: hidden;
  transform: rotate(3deg);
  box-shadow: inset 0 -20px #f7c77b;
}
.sun {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #ffd56e;
  top: 45px;
  right: 70px;
}
.cloud {
  position: absolute;
  width: 90px;
  height: 26px;
  border-radius: 30px;
  background: #fff8e9;
  opacity: 0.8;
}
.cloud:before,
.cloud:after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud:before {
  width: 42px;
  height: 42px;
  left: 14px;
  top: -20px;
}
.cloud:after {
  width: 31px;
  height: 31px;
  left: 50px;
  top: -11px;
}
.cloud-a {
  top: 80px;
  left: 48px;
}
.cloud-b {
  top: 139px;
  right: 35px;
  transform: scale(0.7);
}
.island-ground {
  position: absolute;
  width: 360px;
  height: 100px;
  background: #86c9a1;
  border-radius: 50% 50% 0 0;
  bottom: 0;
  left: 50px;
}
.island-tree {
  position: absolute;
  font-size: 74px;
  bottom: 42px;
  left: 92px;
  z-index: 2;
}
.hero-snake {
  position: absolute;
  font-size: 73px;
  bottom: 44px;
  right: 65px;
  z-index: 3;
}
.hero-bird {
  position: absolute;
  top: 113px;
  left: 177px;
  font-size: 56px;
  z-index: 3;
}
.spark {
  position: absolute;
  color: #ffae48;
  font-size: 25px;
}
.spark-a {
  top: 48px;
  left: 172px;
}
.spark-b {
  bottom: 100px;
  right: 166px;
}
.games-section {
  max-width: 1160px;
  margin: auto;
  padding: 0 28px 90px;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 27px;
}
.section-heading h2,
.about h2 {
  font-family: "Baloo 2";
  font-size: 37px;
  line-height: 1;
  margin: 0;
}
.game-count {
  color: var(--muted);
  font-size: 13px;
}
.game-count span {
  color: var(--orange);
  margin: 0 5px;
}
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
}
.page-button {
  width: 38px;
  height: 38px;
  border: 1px solid #eadfcd;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 600 13px "Space Grotesk";
  cursor: pointer;
  transition: 0.2s;
}
.page-button:hover,
.page-button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}
.game-card {
  background: #fff;
  border: 1px solid #f1eadc;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 15px 40px #6b53300b;
}
.mini-card .card-visual {
  height: 170px;
}
.two-visual {
  background: #f7c67b;
}
.break-visual {
  background: #8eb8e8;
}
.ufo-visual {
  background: #6b6ab0;
}
.catch-visual {
  background: #f3d28d;
}
.number-preview,
.break-preview,
.ufo-preview,
.catch-preview {
  position: absolute;
  left: 30%;
  top: 42px;
  font: bold 30px "Baloo 2";
  line-height: 1.35;
  color: #fff;
}
.break-preview {
  color: #ffed8b;
}
.ufo-preview {
  font-size: 65px;
}
.catch-preview {
  left: 23%;
  font-size: 40px;
}
.mini-visual {
  position: relative;
  overflow: hidden;
}
.fm-visual {
  background:
    linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)) 50% 50% / 100% 2px no-repeat,
    radial-gradient(circle at 50% 50%, transparent 22%, rgba(255, 255, 255, 0.3) 23%, transparent 25%),
    repeating-linear-gradient(90deg, #2f9a57 0 12%, #2a8c4f 12% 24%);
}
.fm-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
.fm-preview b {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #fff;
}
.mouse-visual {
  background: #ffd98a;
}
.dodge-visual {
  background: #b8e8a2;
}
.memory-visual {
  background: #d7c4f1;
}
.tic-visual {
  background: #f6b7a5;
}
.mini-emoji,
.runner {
  position: absolute;
  left: 42%;
  top: 55px;
  font-size: 58px;
}
.target {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ff7859;
  border: 5px solid #fff;
}
.target-one {
  top: 57px;
  left: 20%;
}
.target-two {
  bottom: 25px;
  right: 20%;
}
.obstacle {
  position: absolute;
  bottom: 0;
  right: 22%;
  width: 35px;
  height: 65px;
  background: #ff7859;
  border-radius: 7px;
}
.memory-preview,
.tic-preview {
  position: absolute;
  left: 31%;
  top: 45px;
  font: bold 27px "Baloo 2";
  line-height: 1.5;
  color: #ff7859;
  transform: rotate(-5deg);
}
.memory-preview {
  color: #7d5fba;
}
.xq-visual {
  background: #e8c48a;
}
.xq-preview {
  position: absolute;
  left: 31%;
  top: 42px;
  font: 900 34px "KaiTi", "STKaiti", "SimSun", serif;
  line-height: 1.45;
  color: #2a2a2a;
  transform: rotate(-5deg);
}
.xq-preview i {
  font-style: normal;
  color: #b8231a;
}
.chess-visual {
  background: #a9c48a;
}
.chess-preview {
  position: absolute;
  left: 31%;
  top: 36px;
  font: 44px "Segoe UI Symbol", "DejaVu Sans", serif;
  line-height: 1.25;
  color: #2a2a2a;
  transform: rotate(-5deg);
}
.chess-preview i {
  font-style: normal;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.tic-preview i {
  font-style: normal;
  color: #379a82;
}
.pika-visual {
  background: #1b2f66;
}
.pika-preview {
  position: absolute;
  left: 50%;
  top: 55%;
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 3px;
  transform: translate(-50%, -50%) rotate(-4deg);
}
.pika-preview span {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 5px;
  background: linear-gradient(160deg, #fffaf0, #fde2c4 60%, #f6caa0);
  box-shadow:
    inset -2px -2px 0 #d9965d,
    inset 2px 2px 0 #fffdf6;
  font-size: 22px;
}
.farm-visual {
  background: #afe597;
}
.farm-preview {
  position: absolute;
  left: 50%;
  top: 56%;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 5px;
  transform: translate(-50%, -50%) scale(1, 0.58) rotate(45deg);
}
.farm-preview i {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 4px;
  background: #e9a35b;
  box-shadow: inset 0 0 0 3px #c97d38;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}
/* xoay ngược để emoji đứng thẳng trên ô đất hình thoi */
.farm-preview i b {
  font-weight: 400;
  transform: rotate(-45deg) scale(1, 1.72);
}
.farm-preview i.lock {
  background: #d6d6d6;
  box-shadow: inset 0 0 0 3px #fff;
  font-size: 16px;
}
.pac-visual {
  background: #14143a;
}
.pac-preview {
  position: absolute;
  left: 50%;
  top: 55%;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translate(-50%, -50%);
}
.pac-preview .pac {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #ffff00 0 62%, transparent 62% 88%, #ffff00 88%);
  animation: pacChomp 0.35s steps(2) infinite;
}
@keyframes pacChomp {
  50% {
    background: conic-gradient(from 90deg, #ffff00 0 72%, transparent 72% 78%, #ffff00 78%);
  }
}
.pac-preview .d {
  width: 7px;
  height: 7px;
  background: #ffb8ae;
}
.pac-preview .ghost {
  width: 38px;
  height: 40px;
  margin-left: 6px;
  border-radius: 19px 19px 0 0;
  background:
    radial-gradient(circle at 34% 40%, #2121ff 0 3px, #fff 3.5px 7px, transparent 7.5px),
    radial-gradient(circle at 70% 40%, #2121ff 0 3px, #fff 3.5px 7px, transparent 7.5px),
    #ff0000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 83% 84%, 67% 100%, 50% 84%, 33% 100%, 17% 84%, 0 100%);
}
.mines-visual {
  background: #7fb8b8;
}
.mines-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-auto-rows: 34px;
  padding: 3px;
  background: #c0c0c0;
  box-shadow:
    inset 2px 2px #808080,
    inset -2px -2px #fff;
  transform: translate(-50%, -42%) rotate(-5deg);
  font: bold 20px "Courier New", monospace;
}
.mines-preview span {
  display: grid;
  place-items: center;
  font-size: 15px;
  box-shadow:
    inset -2px -2px #808080,
    inset 2px 2px #fff;
}
.mines-preview .o {
  font-size: 20px;
  box-shadow: inset 1px 1px #808080;
}
.mines-preview .n1 {
  color: #0000ff;
}
.mines-preview .n2 {
  color: #008000;
}
.mines-preview .n3 {
  color: #ff0000;
}
.sudoku-visual {
  background: #b9cdee;
}
.sudoku-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-auto-rows: 34px;
  border: 3px solid #344861;
  background: #fff;
  transform: translate(-50%, -42%) rotate(-5deg);
  font: bold 20px "Baloo 2", sans-serif;
  color: #344861;
}
.sudoku-preview span,
.sudoku-preview i {
  display: grid;
  place-items: center;
  border: 1px solid #c9d3e3;
}
.sudoku-preview i {
  font-style: normal;
  color: #325aaf;
  background: #bbdefb;
}
.card-visual {
  height: 214px;
  position: relative;
  overflow: hidden;
}
.snake-card .card-visual {
  background: #99dfc1;
}
.bird-card .card-visual {
  background: #a9dcea;
}
.visual-label {
  position: absolute;
  top: 19px;
  left: 21px;
  color: #fff;
  background: #1922382b;
  padding: 7px 10px;
  border-radius: 6px;
  letter-spacing: 1px;
  font-size: 9px;
  font-weight: 700;
  z-index: 3;
}
.grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 33px 33px;
}
.snake-art {
  position: absolute;
  left: 30%;
  top: 72px;
  display: flex;
  align-items: center;
  transform: rotate(-12deg);
  z-index: 2;
}
.snake-art span {
  background: #217e66;
  width: 59px;
  height: 59px;
  border: 4px solid #12604f;
  border-radius: 50%;
  font-size: 0;
  margin-left: -9px;
}
.snake-art span:first-child {
  background: #ff7859;
}
.snake-art b {
  font-size: 42px;
  margin-left: 25px;
}
.bird-art {
  font-size: 78px;
  position: absolute;
  left: 38%;
  top: 62px;
  z-index: 2;
  animation: float 2.5s ease-in-out infinite;
}
.pipe {
  position: absolute;
  width: 48px;
  background: #68b879;
  border: 5px solid #49995e;
  border-radius: 6px;
  right: 65px;
}
.pipe-one {
  height: 99px;
  top: -7px;
}
.pipe-two {
  height: 84px;
  bottom: -6px;
  right: 170px;
}
.pipe:after {
  content: "";
  position: absolute;
  left: -10px;
  width: 60px;
  height: 17px;
  background: #78ca89;
  border: 5px solid #49995e;
  border-radius: 5px;
}
.pipe-one:after {
  bottom: -8px;
}
.pipe-two:after {
  top: -8px;
}
.mini-cloud {
  top: 56px;
  left: 43px;
  transform: scale(0.65);
}
@keyframes float {
  50% {
    transform: translateY(-9px) rotate(-8deg);
  }
}
.card-content {
  padding: 23px 24px 21px;
}
.card-title {
  display: flex;
  gap: 12px;
  align-items: center;
}
.game-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff4df;
  font-size: 23px;
}
.bird-card .game-icon {
  background: #e4f7f8;
}
.card-title h3 {
  font-family: "Baloo 2";
  font-size: 23px;
  margin: 0;
  line-height: 1;
}
.card-title p {
  font-size: 12px;
  color: var(--muted);
  margin: 5px 0 0;
}
.card-description {
  font-size: 13px;
  color: #737b8b;
  line-height: 1.65;
  margin: 17px 0 20px;
  min-height: 43px;
}
.network-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 18px;
  padding: 8px 10px;
  border: 1px solid #ccebd8;
  border-radius: 9px;
  background: #f1fbf5;
  color: #317854;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
.network-note span {
  flex: none;
  font-size: 14px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tag {
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #a5aab4;
  background: #f7f4ee;
  border-radius: 6px;
  padding: 8px 9px;
}
.play-button {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 12px;
}
.about {
  max-width: 1104px;
  margin: 0 auto 65px;
  padding: 25px 35px;
  background: #f4f9ec;
  border-radius: 19px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.about-icon {
  font-size: 36px;
  color: #7fbd79;
}
.about h2 {
  font-size: 25px;
}
.about p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}
.about-stars {
  margin-left: auto;
  color: #b8d9a2;
  letter-spacing: 8px;
}
footer {
  border-top: 1px solid #eee5d4;
  max-width: 1104px;
  margin: auto;
  padding: 22px 0 32px;
  display: flex;
  justify-content: space-between;
  color: #a4a3a0;
  font-size: 11px;
}
footer b {
  color: var(--orange);
}
.modal {
  position: fixed;
  inset: 0;
  background: #172138c9;
  display: none;
  place-items: center;
  padding: 20px;
  z-index: 10;
}
.modal.open {
  display: grid;
}
.modal-panel {
  background: var(--cream);
  border-radius: 23px;
  padding: 30px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 70px #0005;
  max-width: 490px;
  width: 100%;
}
.close-button {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: none;
  font-size: 29px;
  color: #9da2ac;
  cursor: pointer;
}
.modal-panel h2 {
  font-family: "Baloo 2";
  font-size: 32px;
  margin: 0;
}
.modal-panel #modalHelp {
  color: var(--muted);
  font-size: 13px;
  margin: 3px 0 13px;
}
.score-line {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 8px;
}
.score-line strong {
  color: var(--orange);
  font-size: 18px;
  margin-left: 5px;
}
.modal canvas {
  display: block;
  width: min(400px, 100%);
  height: auto;
  background: #1d2840;
  border-radius: 12px;
  margin: auto;
}
.restart-button {
  margin-top: 17px;
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  padding: 12px 20px;
  font: 600 12px "Space Grotesk";
  cursor: pointer;
}
.touch-controls {
  display: none;
  margin: 14px auto 0;
  user-select: none;
  touch-action: manipulation;
}
.mobile-game-controls {
  display: none;
  grid-template-columns: repeat(5, 44px);
  justify-content: center;
  gap: 6px;
  margin: 14px auto 0;
  touch-action: manipulation;
}
.mobile-game-controls button {
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #192238;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-game-controls button:active {
  background: var(--orange);
  transform: scale(0.94);
}

/* Theme picker and seasonal themes */
.topbar-actions { display:flex; align-items:center; gap:10px; }
.theme-switcher { position:relative; z-index:20; }
.theme-toggle { display:flex; align-items:center; gap:7px; min-height:38px; border:1px solid #e9e2d8; border-radius:20px; padding:7px 11px; background:#fffdf9cc; color:var(--ink); box-shadow:0 7px 18px #19223812; cursor:pointer; font:700 12px "Space Grotesk"; }
.theme-toggle>span:first-child { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ffbd3e,#ff7657); font-size:13px; }.theme-arrow { font-size:16px; line-height:1; transition:transform .2s; }.theme-toggle[aria-expanded="true"] .theme-arrow { transform:rotate(180deg); }
.theme-menu { position:absolute; top:calc(100% + 10px); right:0; width:210px; padding:7px; border:1px solid #ffffffaa; border-radius:16px; background:#fffdf9f5; box-shadow:0 20px 45px #1922382b; backdrop-filter:blur(15px); }.theme-menu[hidden] { display:none; }.theme-menu button { display:grid; grid-template-columns:30px 1fr; grid-template-areas:"icon title" "icon desc"; width:100%; border:0; border-radius:11px; padding:8px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }.theme-menu button:hover,.theme-menu button.active { background:#f3eee5; }.theme-menu button>span { grid-area:icon; align-self:center; font-size:20px; }.theme-menu b { grid-area:title; font-size:12px; }.theme-menu small { grid-area:desc; color:var(--muted); font-size:10px; margin-top:2px; }
body { transition:background .45s ease,color .35s ease; overflow-x:hidden; } .game-card,.about,.topbar,.theme-menu,.theme-toggle,.status-pill { transition:background .45s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease; }
html[data-theme="dark"] { --ink:#f4f1ff; --muted:#aeb5cf; --cream:#101427; --orange:#9d7bff; }
html[data-theme="dark"] body { background:radial-gradient(circle at 18% 15%,#2f236d,transparent 27%),radial-gradient(circle at 88% 78%,#0b6979,transparent 30%),#0d1122; }
html[data-theme="dark"] .game-card { background:#181d35; border-color:#303957; box-shadow:0 18px 42px #02040e55; } html[data-theme="dark"] .about { background:#18273a; } html[data-theme="dark"] .tag { background:#252b48; color:#b9c2df; } html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .theme-menu { background:#1d2440ed; border-color:#3f4b72; } html[data-theme="dark"] .theme-menu button:hover,html[data-theme="dark"] .theme-menu button.active { background:#303a60; } html[data-theme="dark"] .status-pill { background:#173537; color:#9fe5d7; } html[data-theme="dark"] .hero-art { filter:saturate(.8) brightness(.8); }
html[data-theme="halloween"] { --ink:#fff0d0; --muted:#d9b8c3; --cream:#180d25; --orange:#ff7a18; }
html[data-theme="halloween"] body { background:radial-gradient(circle at 16% 8%,#6f2f70,transparent 22%),radial-gradient(circle at 88% 72%,#9f421e,transparent 27%),#120817; } html[data-theme="halloween"] body::before { content:"✦  🎃  ✦  🦇"; position:fixed; top:110px; right:4vw; color:#ff9d28; font-size:27px; letter-spacing:14px; opacity:.6; transform:rotate(-8deg); pointer-events:none; animation:seasonFloat 5s ease-in-out infinite; } html[data-theme="halloween"] .game-card { background:#281333; border-color:#643356; box-shadow:0 17px 38px #00000055; } html[data-theme="halloween"] .about { background:#35203c; } html[data-theme="halloween"] .hero-art { filter:hue-rotate(284deg) saturate(1.2) brightness(.78); } html[data-theme="halloween"] .primary-button,html[data-theme="halloween"] .play-button { background:linear-gradient(135deg,#ff7a18,#c83531); } html[data-theme="halloween"] .theme-toggle,html[data-theme="halloween"] .theme-menu { background:#281333ef; border-color:#814363; } html[data-theme="halloween"] .theme-menu button:hover,html[data-theme="halloween"] .theme-menu button.active { background:#482045; } html[data-theme="halloween"] .status-pill { background:#412538; color:#ffd084; }
html[data-theme="christmas"] { --ink:#17394b; --muted:#65808d; --cream:#effcff; --orange:#d53f45; }
html[data-theme="christmas"] body { background:radial-gradient(circle at 15% 5%,#d9f8ff,transparent 26%),radial-gradient(circle at 84% 82%,#d3ead9,transparent 30%),#f6fdff; } html[data-theme="christmas"] body::before { content:"❄  ·  ❅  ·  ❄  ·  ❅  ·  ❄"; position:fixed; top:100px; left:3vw; color:#89cce6; font-size:24px; letter-spacing:13px; opacity:.55; pointer-events:none; animation:seasonFloat 6s ease-in-out infinite; } html[data-theme="christmas"] .game-card { border-color:#d7ece5; box-shadow:0 18px 42px #1c657117; } html[data-theme="christmas"] .about { background:#e5f6e9; } html[data-theme="christmas"] .hero-art { filter:saturate(.85) hue-rotate(125deg); } html[data-theme="christmas"] .primary-button,html[data-theme="christmas"] .play-button { background:linear-gradient(135deg,#cf3c43,#8e1f32); } html[data-theme="christmas"] .theme-toggle,html[data-theme="christmas"] .theme-menu { background:#f9fffeef; border-color:#c6e1da; } html[data-theme="christmas"] .theme-menu button:hover,html[data-theme="christmas"] .theme-menu button.active { background:#e6f4ee; } html[data-theme="christmas"] .status-pill { background:#e4f5ec; color:#267052; }
html[data-theme="tet"] { --ink:#761b2d; --muted:#966567; --cream:#fff2da; --orange:#d73f1b; }
html[data-theme="tet"] body { background:radial-gradient(circle at 12% 12%,#ffe594,transparent 24%),radial-gradient(circle at 88% 76%,#f6b54d,transparent 29%),#fff1d6; } html[data-theme="tet"] body::before { content:"✿  ✦  ✿  ✦  ✿"; position:fixed; top:105px; right:5vw; color:#db9a22; font-size:29px; letter-spacing:17px; opacity:.6; pointer-events:none; animation:seasonFloat 5s ease-in-out infinite; } html[data-theme="tet"] .game-card { border-color:#f4d28a; box-shadow:0 18px 42px #b23b181a; } html[data-theme="tet"] .about { background:#ffe6a7; } html[data-theme="tet"] .hero-art { filter:hue-rotate(335deg) saturate(1.12); } html[data-theme="tet"] .primary-button,html[data-theme="tet"] .play-button { background:linear-gradient(135deg,#d7331b,#9c192e); } html[data-theme="tet"] .theme-toggle,html[data-theme="tet"] .theme-menu { background:#fff9ecf2; border-color:#efcf80; } html[data-theme="tet"] .theme-menu button:hover,html[data-theme="tet"] .theme-menu button.active { background:#fff0cb; } html[data-theme="tet"] .status-pill { background:#ffead0; color:#a42c25; }
@keyframes seasonFloat { 50% { transform:translateY(13px) rotate(5deg); } }
@media (max-width: 560px) { .topbar-actions .status-pill { display:none; } .theme-toggle { min-height:35px; padding:6px 9px; } .theme-menu { right:-4px; } }

/* Fix theme control alignment and preserve contrast in dark palettes. */
.theme-arrow { width:8px; height:8px; margin:-4px 1px 0 2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; font-size:0; transform:rotate(45deg); transition:transform .2s; }
.theme-toggle[aria-expanded="true"] .theme-arrow { transform:rotate(225deg); margin-top:4px; }
html[data-theme="dark"] .primary-button,html[data-theme="dark"] .play-button { background:linear-gradient(135deg,#8d76ff,#6250cd); color:#fff; box-shadow:0 9px 22px #5b4be455; }
html[data-theme="dark"] .page-button:hover,html[data-theme="dark"] .page-button.active { background:#806ce9; border-color:#806ce9; color:#fff; }
html[data-theme="halloween"] .primary-button,html[data-theme="halloween"] .play-button { color:#fff; box-shadow:0 9px 22px #e1541c4d; }
html[data-theme="halloween"] .page-button:hover,html[data-theme="halloween"] .page-button.active { background:#f36f22; border-color:#f36f22; color:#fff; }
.touch-controls > button,
.touch-controls div button {
  width: 48px;
  height: 42px;
  margin: 3px;
  border: 0;
  border-radius: 10px;
  background: #192238;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.touch-controls button:active {
  background: var(--orange);
  transform: scale(0.94);
}
.rapid-visual {
  background: linear-gradient(145deg, #70dbd8, #319c9f) !important;
  overflow: hidden;
}
.block-visual { background: radial-gradient(circle at 50% 20%, #354dba, #111733 70%); }
.block-preview { position:absolute; left:calc(50% - 61px); top:29px; width:122px; height:132px; border:4px solid #252d59; border-radius:8px; background:repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 17px),repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 17px),#151b3b; }
.block-preview i,.block-preview b,.block-preview em,.block-preview strong { position:absolute; display:block; width:17px; height:17px; background:#39d8e6; box-shadow:18px 0 #39d8e6,36px 0 #39d8e6; }
.block-preview i { left:16px; top:80px; }.block-preview b { left:52px; top:63px; background:#f26175; box-shadow:18px 0 #f26175,0 18px #f26175; }.block-preview em { left:70px; top:98px; background:#ffd34d; box-shadow:18px 0 #ffd34d,0 -18px #ffd34d,18px -18px #ffd34d; }.block-preview strong { left:34px; top:28px; background:#ad72ec; box-shadow:18px 0 #ad72ec,36px 0 #ad72ec,18px 18px #ad72ec; }
.rapid-preview {
  position: absolute;
  inset: 32px 24px 22px;
  border: 3px solid #073c43;
  background: #98eeea;
}
.rapid-preview::before,
.rapid-preview::after,
.rapid-preview i,
.rapid-preview b,
.rapid-preview em {
  position: absolute;
  display: block;
  height: 5px;
  background: repeating-linear-gradient(90deg, #073c43 0 3px, transparent 3px 5px);
  content: "";
}
.rapid-preview::before { width: 52px; left: 12px; top: 28px; }
.rapid-preview::after { width: 65px; right: 13px; top: 68px; }
.rapid-preview i { width: 44px; left: 52px; top: 112px; }
.rapid-preview b { width: 58px; right: 30px; top: 150px; }
.rapid-preview em {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  left: 42%;
  top: 92px;
  background: #073c43;
}

/* Preview trên trang chủ: cùng bảng màu/cảm giác với màn chơi thật của từng game. */
.snake-card .card-visual { background: #a3a02a; }
.snake-card .grid-lines { opacity: .3; background-image: linear-gradient(#5a6120 1px, transparent 1px), linear-gradient(90deg, #5a6120 1px, transparent 1px); }
.snake-art span { width: 43px; height: 43px; border-radius: 7px; border-color: #26384a; background: #2c3a52; margin-left: -4px; }
.snake-art span:first-child { background: #f3bd35; }
.snake-art b { font-size: 0; width: 20px; height: 20px; margin-left: 24px; border-radius: 50%; background: #d94f41; box-shadow: 0 0 0 4px #832e29; }
.bird-card .card-visual { background: #078e9c; image-rendering: pixelated; }
.bird-card .card-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 55px; background: linear-gradient(90deg, #07536a 0 7%, transparent 7% 10%, #07536a 10% 17%, transparent 17% 20%, #07536a 20% 29%, transparent 29% 32%, #07536a 32% 41%, transparent 41% 44%, #07536a 44% 54%, transparent 54% 58%, #07536a 58% 70%, transparent 70% 73%, #07536a 73% 82%, transparent 82% 86%, #07536a 86% 100%); border-top: 7px solid #087689; z-index: 1; }
.bird-art { font-size: 0; width: 38px; height: 27px; border: 4px solid #75301e; border-radius: 52% 45% 48% 42%; background: #ffbb33; transform: rotate(8deg); box-shadow: inset -7px -5px #e8702e; }
.bird-art::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; top: 4px; right: 5px; background: #fff; box-shadow: inset 2px 2px #202b47, 14px 8px 0 -1px #f26b32; }
.pipe { border-radius: 0; border-color: #336e3f; background: repeating-linear-gradient(90deg, #76ca1b 0 8px, #5fa616 8px 11px); box-shadow: inset 5px 0 #a7ed35; z-index: 2; }
.pipe:after { border-radius: 0; border-color: #336e3f; background: #78c81e; }
.mouse-visual { background: #1d2840; }
.mouse-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 38px; background: #273650; }
.mini-emoji { font-size: 0; width: 47px; height: 38px; left: 42%; top: 63px; border-radius: 52% 48% 46% 44%; background: #a2afc6; box-shadow: -12px -13px 0 -2px #d3dcef, 13px -13px 0 -2px #d3dcef; z-index: 2; }
.mini-emoji::after { content: ""; position: absolute; width: 25px; height: 3px; right: -21px; bottom: 3px; background: #a2afc6; transform: rotate(18deg); }
.target { border-color: #65e0f3; background: #f6c94c; box-shadow: 0 0 0 4px #273650; z-index: 2; }
.dodge-visual { background: linear-gradient(#151d45 0 54%, #4359a1 54% 76%, #f59b79 76%); }
.dodge-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 29px; background: #18213e; }
.runner { font-size: 44px; top: 58px; z-index: 2; filter: drop-shadow(0 3px #192238); }
.obstacle { background: #ff506f; box-shadow: 0 -10px #ff7890; z-index: 2; }
.memory-visual { background: #1a120c; }
.memory-preview { left: 25%; top: 38px; padding: 7px 12px; border-radius: 10px; background: #efe7da; color: #795a3d; box-shadow: 63px 18px 0 #efe7da, 0 76px 0 #efe7da, 63px 94px 0 #efe7da; font-size: 0; width: 48px; height: 58px; transform: none; }
.memory-preview::after { content: "?"; position: absolute; inset: 8px; display: grid; place-items: center; color: #c9b8a0; font: 800 30px "Baloo 2"; }
.tic-visual { background: radial-gradient(circle at top, #d7f0ee, #fff7e8 78%); }
.tic-preview { color: #f2355b; text-shadow: 68px 0 #3ea8d8, 0 60px #3ea8d8, 68px 60px #f2355b; font-size: 0; left: 34%; top: 35px; width: 110px; height: 110px; border: 5px solid #192238; transform: none; background: linear-gradient(90deg, transparent 47%, #192238 47% 53%, transparent 53%), linear-gradient(transparent 47%, #192238 47% 53%, transparent 53%); }
.tic-preview i { display: none; }
.tic-preview::before, .tic-preview::after { position: absolute; display: grid; place-items: center; width: 45px; height: 45px; font: 800 42px/1 Arial; }
.tic-preview::before { content: "×"; left: 3px; top: 1px; color: #f2355b; }
.tic-preview::after { content: "○"; right: 2px; bottom: 0; color: #3ea8d8; }
.two-visual { background: #fff8ea; }
.number-preview { left: 27%; top: 30px; display: grid; grid-template-columns: repeat(2, 58px); gap: 8px; color: #776e65; font: 800 22px "Baloo 2"; text-align: center; }
.number-preview::first-line { background: #eee4da; }
.break-visual { background: #1e293b; }
.break-preview { left: 20%; top: 27px; width: 61%; padding: 10px; color: #fbbf24; font-size: 25px; letter-spacing: 8px; background: repeating-linear-gradient(90deg, #f05023 0 33px, #fbbf24 33px 66px, #38bdf8 66px 99px); line-height: 1.25; }
.break-visual::after { content: ""; position: absolute; width: 80px; height: 8px; left: calc(50% - 40px); bottom: 22px; border-radius: 8px; background: #f8fafc; box-shadow: 28px -28px 0 -9px #fbbf24; }
.ufo-visual { background: radial-gradient(circle at 23% 28%, #fff 0 2px, transparent 3px), radial-gradient(circle at 75% 48%, #fff 0 2px, transparent 3px), linear-gradient(145deg, #171c47, #6b6ab0); }
.ufo-preview { font-size: 0; width: 74px; height: 29px; left: 39%; top: 70px; border-radius: 50%; background: #8ee0c0; border: 4px solid #234d7a; box-shadow: inset 0 8px #d5ffff; }
.catch-visual { background: linear-gradient(#f3d28d 0 76%, #e0b56c 76%); }
.catch-preview { left: 29%; top: 52px; font-size: 0; width: 135px; height: 70px; border-bottom: 9px solid #bd6f43; border-left: 9px solid transparent; border-right: 9px solid transparent; }
.catch-preview::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; left: 30px; top: -23px; background: #ff7657; box-shadow: 45px 10px #ffd66b, 86px -5px #5eb575; }
.dino-visual { background: linear-gradient(#8ed9eb 0 68%, #f5d18a 68%); }
.dino-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 35px; background: #c99c59; }
.dino-preview { font-size: 48px; position: absolute; z-index: 2; left: 31%; top: 63px; filter: grayscale(.35); }
.dino-cactus { font-size: 42px; position: absolute; z-index: 2; right: 25%; bottom: 22px; }
.rapid-visual { background: #74e3e2 !important; }
.gem-visual { background: #3a3268; }
.gem-preview { left: 25%; top: 31px; display: grid; grid-template-columns: repeat(2, 58px); gap: 10px; font-size: 0; width: 126px; height: 126px; padding: 9px; border-radius: 12px; background: #27204d; }
.gem-preview::before, .gem-preview::after { content: ""; width: 49px; height: 49px; border-radius: 10px; background: linear-gradient(145deg, #73edff, #2186d5); box-shadow: 59px 0 #ff8ec2, 0 59px #ffe879, 59px 59px #94f18c; }
@media (max-width: 760px) {
  .topbar nav {
    display: none;
  }
  .topbar {
    padding: 0 20px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 40px 20px 65px;
    margin: 0;
  }
  .hero h1 {
    font-size: 59px;
  }
  .hero-art {
    height: 270px;
  }
  .games-section {
    padding: 0 20px 60px;
  }
  .section-heading {
    align-items: start;
    gap: 12px;
    flex-direction: column;
  }
  .game-grid {
    grid-template-columns: 1fr;
  }
  .about {
    margin: 0 20px 45px;
    padding: 22px;
    align-items: start;
  }
  .about-stars {
    display: none;
  }
  footer {
    margin: 0 20px;
  }
  .card-description {
    min-height: auto;
  }
  body {
    min-width: 320px;
  }
  .topbar {
    height: 72px;
  }
  .brand {
    font-size: 25px;
  }
  .status-pill {
    padding: 8px 10px;
    font-size: 10px;
  }
  .hero h1 {
    letter-spacing: -1px;
  }
  .hero-art {
    width: calc(100% - 8px);
    margin: auto;
  }
  .modal {
    padding: 10px;
    align-items: start;
    overflow-y: auto;
  }
  .modal-panel {
    margin: 8px 0;
    padding: 24px 14px 18px;
  }
  .modal-panel h2 {
    font-size: 28px;
  }
  .modal canvas {
    max-height: 58vh;
  }
  .touch-controls {
    display: block;
  }
  .mobile-game-controls {
    display: grid;
  }
}