:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #555555;
  --border: #151515;
  --max-width: 1180px;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.4;
}

.hero {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
  padding: 54px 18px 36px;
  text-align: center;
}

.hero-logo {
  width: min(310px, 72vw);
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

.fallback-logo {
  display: none;
  margin: 0 auto 8px;
  width: fit-content;
  font-family: "Comic Sans MS", "Trebuchet MS", cursive;
  font-size: clamp(3rem, 10vw, 5.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
}

.hero-tagline {
  color: #111;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
}

.hero-inspiration {
  margin-top: 6px;
  color: #777777;
  font-size: 0.95rem;
}

.hero-inspiration a {
  color: #111111;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grid {
  width: min(var(--max-width), 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 0 auto;
  padding: 18px 24px 52px;
}

.card {
  display: block;
  overflow: hidden;
  aspect-ratio: 2.74 / 1;
  border: 3px solid var(--border);
  border-radius: 16px;
  background: #f6f6f6;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.08);
}

.card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}

.card-art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Shared typography inside SVG cards */
.title {
  paint-order: stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.subtitle {
  font-size: 24px;
  fill: currentColor;
}

/* Make 67 */
.card-snake {
  background: #fff;
  color: #111;
}
.card-snake .paper { fill:#fff; }
.card-snake .loose-numbers { fill:#aaa; font:700 27px Arial,sans-serif; }
.card-snake .loose-numbers text:nth-child(1){transform:rotate(-10deg);transform-origin:31px 44px}.card-snake .loose-numbers text:nth-child(2){transform:rotate(8deg);transform-origin:445px 46px}.card-snake .loose-numbers text:nth-child(3){transform:rotate(7deg);transform-origin:57px 164px}.card-snake .loose-numbers text:nth-child(4){transform:rotate(-8deg);transform-origin:430px 163px}
.card-snake .make67 { fill:#111; font:900 106px Arial,sans-serif; }
.card-snake .make67 text { transform-box:fill-box; transform-origin:center bottom; }
.card-snake .make67-sub { fill:#111; font:800 13px Arial,sans-serif; letter-spacing:4px; }
.card-snake:hover .make67 .six { animation:card-six 520ms ease-in-out infinite alternate; }
.card-snake:hover .make67 .seven { animation:card-seven 520ms ease-in-out infinite alternate; }

@keyframes card-six {
  from { transform:translateY(7px) rotate(-5deg); }
  to { transform:translateY(-10px) rotate(11deg); }
}

@keyframes card-seven {
  from { transform:translateY(-10px) rotate(10deg); }
  to { transform:translateY(7px) rotate(-10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card-snake .make67 .six,
  .card-snake .make67 .seven { animation:none; }
}

/* Chess */
.card-chess {
  background: #eee3c9;
  color: #211c2b;
}

.card-chess .paper { fill: #eee3c9; }
.card-chess .grid { fill:url(#chaosGrid);opacity:.16; }
.card-chess #chaosGrid path { stroke:#6c6370;stroke-width:1;fill:none; }
.card-chess .horse-sticker { transform-origin:87px 86px;transform:rotate(-4deg); }
.card-chess .sticker-shadow { fill:#211c2b; }
.card-chess .sticker { fill:#d9ff5b;stroke:#211c2b;stroke-width:4; }
.card-chess .horse { font:94px Georgia,serif;fill:#211c2b; }
.card-chess .sticker-scratch { fill:none;stroke:#211c2b;stroke-width:3;stroke-linecap:round; }
.card-chess .type-highlight { fill:#d9ff5b;transform:rotate(-1deg);transform-origin:324px 88px; }
.card-chess .chaos-title { font:900 34px "Arial Black","Franklin Gothic Heavy",Impact,sans-serif;fill:#211c2b;letter-spacing:-1.2px; }
.card-chess .chaos-caption { font:800 10px "Courier New",monospace;fill:#6c6370;letter-spacing:1.15px; }
.card-chess:hover .horse-sticker { animation:wrongKnight 600ms steps(2,end) infinite; }

@keyframes wrongKnight { 0%,100%{transform:rotate(-4deg) translate(0)} 50%{transform:rotate(3deg) translate(5px,-5px)} }

/* Space Flight */
.card-space {
  background: #111727;
  color: #ffffff;
}

.card-space .space-bg { fill: #111727; }
.card-space .star { fill: #fff7b8; }
.card-space .s2 { fill: #9fc5ff; }
.card-space .s3 { fill: #ffdf7a; }
.card-space .orbit { fill: none; stroke: rgba(157, 187, 255, 0.52); stroke-width: 4; stroke-dasharray: 9 8; }
.card-space .body { fill: #f4f7ff; stroke: #7084c8; stroke-width: 4; }
.card-space .fin { fill: #6f7dff; stroke: #4653b8; stroke-width: 3; }
.card-space .window { fill: #78d7ff; stroke: #29335f; stroke-width: 4; }
.card-space .flame { fill: #ffcf55; stroke: #ff8a3d; stroke-width: 3; }
.card-space .mono {
  font-family: "Courier New", monospace;
  font-size: 48px;
  font-weight: 900;
  fill: #ffffff;
  stroke: #111727;
  stroke-width: 5px;
}
.card-space .thin {
  font-size: 39px;
}
.card-space .subtitle {
  font-family: "Courier New", monospace;
  fill: #b8c7ff;
}
.card-space:hover .rocket {
  animation: float 900ms ease-in-out infinite;
}
.card-space:hover .flame {
  animation: flame 180ms ease-in-out infinite alternate;
}

/* Cursor must die */
.card-life {
  background: #f7eddb;
  color: #241915;
  border-color: #241915;
}

.card-life .life-bg {
  fill: #f7eddb;
}

.card-life .life-lines {
  fill: url(#cursorCardLines);
  opacity: .42;
}

.card-life #cursorCardLines path {
  fill: none;
  stroke: #8a6d4d;
  stroke-width: 1;
}

.card-life .life-margin {
  fill: none;
  stroke: #d97c6d;
  stroke-width: 3;
  opacity: .8;
}

.card-life .life-logo-img {
  filter: none;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.card-life .life-title {
  font: 900 54px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  fill: #241915;
  stroke: #fff8eb;
  stroke-width: 4px;
  paint-order: stroke fill;
  letter-spacing: 0;
}

.card-life .life-title-cursor {
  font-size: 62px;
  font-weight: 1000;
}

.card-life .life-title-die {
  font: 400 55px "Segoe Print", "Comic Sans MS", cursive;
  fill: transparent;
  stroke: #241915;
  stroke-width: 1.6px;
  transform: rotate(-1.2deg);
  transform-origin: 292px 122px;
}

.card-life .life-subtitle {
  font: 900 15px "Trebuchet MS", Arial, sans-serif;
  fill: #765d45;
  letter-spacing: 2px;
}

.card-life .life-cursor {
  fill: #ffffff;
  stroke: #241915;
  stroke-width: 5;
  stroke-linejoin: round;
  filter: drop-shadow(5px 6px 0 rgba(36, 25, 21, .16));
  transform-box: fill-box;
  transform-origin: center;
}

.card-life .life-danger circle {
  fill: #c44636;
  stroke: #241915;
  stroke-width: 4;
}

.card-life .life-danger path {
  fill: none;
  stroke: #2f6f6a;
  stroke-width: 8;
  stroke-linecap: round;
  opacity: .78;
}

.card-life:hover .life-title {
  fill: #c44636;
}

.card-life:hover .life-title-die {
  fill: transparent;
  stroke: #c44636;
}

.card-life:hover .life-cursor {
  animation: cursorCardDodge 620ms ease-in-out infinite alternate;
}

.card-life:hover .life-danger {
  animation: cursorCardDanger 720ms ease-in-out infinite alternate;
}

.card-life:hover .life-logo-img {
  animation: cursorCardLogoFloat 1100ms ease-in-out infinite alternate;
}

@keyframes cursorCardDodge {
  to { transform: translate(10px, -6px) rotate(-3deg); }
}

@keyframes cursorCardDanger {
  to { transform: translate(-7px, 5px); }
}

@keyframes cursorCardLogoFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* Modular building game */
.card-fps {
  background: #f2efe6;
  color: #173b31;
}

.card-fps .sky { fill: #efe8df; }
.card-fps .sun { fill: #efb85f; filter:drop-shadow(0 0 8px rgba(239,184,95,.4)); }
.card-fps .ground { fill: #6f3027; }
.card-fps .glass-city { transform-origin:360px 166px; }
.card-fps .tower-shadow{fill:#4c211b;opacity:.22}.card-fps .tower-front{fill:url(#towerGlass);stroke:#18333e;stroke-width:2}.card-fps .tower-grid{fill:url(#towerGrid)}.card-fps .tower-side{fill:#193743;stroke:#18333e;stroke-width:2}.card-fps .tower-top{fill:#8aa7aa;stroke:#18333e;stroke-width:2}.card-fps .tower-shine{fill:#fff;opacity:.13}.card-fps .roof-room{fill:#b9b6ae;stroke:#4e5757;stroke-width:1}.card-fps .antenna{fill:none;stroke:#6f3027;stroke-width:2}.card-fps .entrance{fill:#d9c2a7;stroke:#18333e;stroke-width:2}.card-fps .podium path:first-child{fill:#a94f3d;stroke:#5b2a22;stroke-width:2}.card-fps .podium-side{fill:#71352c!important}.card-fps .podium-top{fill:#d3947d!important}.card-fps .podium-window{fill:#456b73!important;stroke:#e0b096!important;stroke-width:2!important}.card-fps .sparkles path{fill:none;stroke:#fff7e8;stroke-width:2;stroke-linecap:round;opacity:.9}
.card-fps .block {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 37px;
  font-weight:900;
  letter-spacing: -1.5px;
  fill: #fffaf1;
  stroke:#6f3027;
  stroke-width:5px;
  paint-order:stroke fill;
}
.card-fps .title-back{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:37px;font-weight:900;letter-spacing:-1.5px;fill:#d88b71}.card-fps .game-card-title path{stroke:#a94f3d;stroke-width:5;stroke-linecap:round}
.card-fps .subtitle {
  font-family: "Courier New", monospace;
  font-size:12px;
  letter-spacing:2px;
  fill: #754239;
  font-weight:700;
}
.card-fps .infinity-badge rect{fill:#a94f3d}.card-fps .infinity-badge text{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:12px;font-weight:800;text-anchor:middle;fill:#fff9ef}.card-fps:hover .glass-city{animation:cityLift 900ms ease-in-out infinite}.card-fps:hover .tower-shine{animation:towerShine 1.4s ease-in-out infinite}.card-fps:hover .sparkles{animation:enemyPop 900ms ease-in-out infinite}

/* elemental.fun */
.card-elemental {
  background: #050505;
  color: #ffffff;
  border-color: var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

.card-elemental .screen-bg {
  fill: #000000;
}

.card-elemental .elemental-terrain path,
.card-elemental .elemental-terrain rect {
  shape-rendering: crispEdges;
}

.card-elemental #elementalTerrainGrid path {
  fill: none;
  stroke: rgba(0, 0, 0, .42);
  stroke-width: 1;
}

.card-elemental .sand { fill: #e8c87a; }
.card-elemental .fire { fill: #ff6b2c; }
.card-elemental .water { fill: #3a7bd5; }
.card-elemental .plant { fill: #58df8b; }
.card-elemental .lava { fill: #d83a18; }
.card-elemental .ice { fill: #bfe9ff; }
.card-elemental .stone { fill: #8b8b92; }
.card-elemental .acid { fill: #a8ff3e; }

.card-elemental .elemental-word {
  filter: drop-shadow(0 0 14px rgba(255,255,255,.1));
}

.card-elemental .elemental-main,
.card-elemental .elemental-shadow {
  font: 900 58px "Courier New", monospace;
  letter-spacing: -1px;
}

.card-elemental .elemental-main {
  fill: #f8f4e8;
  stroke: #000;
  stroke-width: 7px;
  paint-order: stroke fill;
}

.card-elemental .elemental-shadow {
  fill: #343434;
  stroke: #343434;
  stroke-width: 7px;
}

.card-elemental .e-fire { fill: #ff6b2c; }
.card-elemental .e-water { fill: #45a9ff; }
.card-elemental .e-sand { fill: #f4d44d; }
.card-elemental .e-plant { fill: #58df8b; }
.card-elemental .e-ice { fill: #bfe9ff; }
.card-elemental .e-lava { fill: #ef3f22; }
.card-elemental .e-acid { fill: #a8ff3e; }

.card-elemental .terrain-sand { fill: #e8c87a; }
.card-elemental .terrain-dirt { fill: #7a5232; }
.card-elemental .terrain-stone { fill: #84848b; }
.card-elemental .terrain-grass { fill: #58df8b; }
.card-elemental .terrain-water { fill: #3a7bd5; }

.card-elemental .elemental-terrain {
  opacity: .96;
}

.card-elemental .terrain-grid {
  fill: url(#elementalTerrainGrid);
  opacity: .34;
}

.card-elemental:hover .elemental-word {
  animation: elementalWord 620ms steps(2, end) infinite alternate;
}

.card-elemental:hover .elemental-terrain {
  animation: elementalTerrain 820ms steps(2, end) infinite alternate;
}

.card-elemental:hover {
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.08);
}

@keyframes elementalWord {
  to { transform: translate(3px, -2px); }
}

@keyframes elementalTerrain {
  to { transform: translateY(-2px); }
}

/* Thai City Builder */
.card-city {
  background: #dff5ff;
  color: #3a2415;
}

.card-city .sky { fill: #cdefff; }
.card-city .river { fill: #56b6c8; opacity: 0.9; }
.card-city .field.back { fill: #8ccf52; }
.card-city .field.front { fill: #61ad37; }
.card-city .temple rect { fill: #f9df9a; stroke: #7a421f; stroke-width: 3; }
.card-city .temple path { fill: #d85120; stroke: #7a421f; stroke-width: 3; stroke-linejoin: round; }
.card-city .house rect { fill: #a76536; stroke: #5b351d; stroke-width: 3; }
.card-city .house path { fill: #b33e1f; stroke: #5b351d; stroke-width: 3; stroke-linejoin: round; }
.card-city .sun { fill: #ffd166; stroke: #e58d2e; stroke-width: 4; }
.card-city .thai {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 46px;
  font-weight: 900;
  fill: #fff4d6;
  stroke: #5b351d;
  stroke-width: 7px;
}
.card-city .city3d {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 36px;
  letter-spacing: 1px;
  fill: #ffffff;
  stroke: #5b351d;
  stroke-width: 5px;
}
.card-city:hover .temple,
.card-city:hover .house {
  animation: cityLift 900ms ease-in-out infinite;
}

/* Politics RPG */
.card-abbr .abbr-sticker,.card-abbr .abbr-title,.card-abbr .abbr-title-shadow,.card-abbr .abbr-caption,.card-abbr .abbr-doodles{opacity:1}.card-abbr.is-visible .abbr-sticker,.card-abbr.is-visible .abbr-title,.card-abbr.is-visible .abbr-title-shadow,.card-abbr.is-visible .abbr-caption,.card-abbr.is-visible .abbr-doodles{animation:none}.card-abbr.is-visible{animation:abbrCardIn .58s cubic-bezier(.18,1.35,.3,1) both}.card-abbr:hover .abbr-sticker{animation:abbrStickerWobble .55s ease-in-out infinite alternate}.card-abbr:hover .abbr-title,.card-abbr:hover .abbr-title-shadow{animation:abbrTitleWobble .7s steps(2,end) infinite}.card-abbr:hover .abbr-doodles{animation:abbrDoodleWiggle .45s ease-in-out infinite alternate}@keyframes abbrCardIn{from{opacity:.2;transform:translateY(22px) scale(.94) rotate(1.5deg)}to{opacity:1;transform:none}}

.card.card-abbr{background:#fff}.card.card-abbr .paper{fill:#fff}.card.card-abbr .dot-paper,.card.card-abbr .abbr-caption{display:none}.card.card-abbr .abbr-title text,.card.card-abbr .abbr-title-shadow text{font-size:66px;letter-spacing:-2.5px}.card.card-abbr .abbr-doodles text{display:none}

.card-politics {
  background: #fff8db;
  color: #151515;
}

/* Thai abbreviation quiz */
.card-abbr{background:#f7f1e5;color:#17130f;isolation:isolate}.card-abbr .paper{fill:#f7f1e5}.card-abbr .dot-paper{fill:#cbbfae;opacity:.45}.card-abbr .abbr-sticker{transform-origin:264px 28px}.card-abbr .sticker-shadow{fill:#17130f;transform:translate(5px,5px)}.card-abbr .sticker-blue{fill:#3d73e8;stroke:#17130f;stroke-width:3}.card-abbr .abbr-sticker text{text-anchor:middle;font:700 14px "Leelawadee UI",Tahoma,sans-serif;fill:#fff}.card-abbr .abbr-title text,.card-abbr .abbr-title-shadow text{font:900 58px "Leelawadee UI",Tahoma,sans-serif;letter-spacing:-3px;stroke-linejoin:round}.card-abbr .abbr-title-shadow text{fill:#17130f;stroke:#17130f;stroke-width:10px}.card-abbr .abbr-title text{fill:#17130f;stroke:#fff;stroke-width:7px;paint-order:stroke fill}.card-abbr .abbr-title .abbr-red{fill:#f14d37}.card-abbr .abbr-caption{text-anchor:middle;font:700 14px "Leelawadee UI",Tahoma,sans-serif;fill:#17130f}.card-abbr .abbr-doodles path{fill:none;stroke:#17130f;stroke-width:3;stroke-linecap:round}.card-abbr .abbr-doodles text{font:800 13px "Leelawadee UI",Tahoma,sans-serif;fill:#17130f;opacity:.32}.card-abbr .abbr-sticker,.card-abbr .abbr-title,.card-abbr .abbr-title-shadow,.card-abbr .abbr-caption,.card-abbr .abbr-doodles{opacity:0}.card-abbr.is-visible .abbr-sticker{animation:abbrStickerIn .48s cubic-bezier(.2,1.6,.3,1) .05s both}.card-abbr.is-visible .abbr-title-shadow,.card-abbr.is-visible .abbr-title{animation:abbrTitleIn .62s cubic-bezier(.18,1.45,.32,1) .14s both}.card-abbr.is-visible .abbr-caption{animation:abbrFadeUp .4s ease .43s both}.card-abbr.is-visible .abbr-doodles{animation:abbrFadeUp .35s ease .52s both}.card-abbr:hover .abbr-sticker{animation:abbrStickerWobble .55s ease-in-out infinite alternate}.card-abbr:hover .abbr-title,.card-abbr:hover .abbr-title-shadow{animation:abbrTitleWobble .7s steps(2,end) infinite}.card-abbr:hover .abbr-doodles{animation:abbrDoodleWiggle .45s ease-in-out infinite alternate}.card-abbr:active{transform:translateY(1px) scale(.97) rotate(-.4deg);box-shadow:0 3px 0 rgba(0,0,0,.12)}.card-abbr:active .abbr-title,.card-abbr:active .abbr-title-shadow{transform:translateY(5px) scale(.96);transform-origin:260px 100px}@keyframes abbrStickerIn{from{opacity:0;transform:translateY(-24px) rotate(-5deg) scale(.9)}to{opacity:1;transform:rotate(-1deg)}}@keyframes abbrTitleIn{from{opacity:0;transform:scale(.68) rotate(4deg)}to{opacity:1;transform:none}}@keyframes abbrFadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes abbrStickerWobble{to{transform:translateY(-3px) rotate(2deg)}}@keyframes abbrTitleWobble{50%{transform:translateY(-3px) rotate(-.7deg);transform-origin:260px 100px}}@keyframes abbrDoodleWiggle{to{transform:rotate(2deg) scale(1.04);transform-origin:center}}

.card.card-abbr {
  background: #ffffff;
  color: #111111;
}

.card.card-abbr .paper {
  fill: #ffffff;
}

.card.card-abbr .abbr-grid {
  fill: #b7b7b7;
  font: 800 18px Arial, sans-serif;
  letter-spacing: 0.8px;
}

.card.card-abbr .abbr-grid text {
  transform-box: fill-box;
  transform-origin: center;
}

.card.card-abbr .abbr-badge rect {
  fill: #f5f5f5;
  stroke: #111111;
  stroke-width: 3;
}

.card.card-abbr .abbr-badge text {
  fill: #111111;
  font: 900 13px "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 1.8px;
}

.card.card-abbr .abbr-mark {
  fill: none;
  stroke: #111111;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card.card-abbr .abbr-mark circle {
  fill: #f14d37;
  stroke: #111111;
  stroke-width: 4;
}

.card.card-abbr .abbr-wtf {
  font: 900 74px Impact, "Arial Black", sans-serif;
  fill: #111111;
  letter-spacing: -1px;
}

.card.card-abbr .abbr-red {
  fill: #f14d37;
}

.card.card-abbr .abbr-sub {
  fill: #111111;
  font: 900 19px "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 2.6px;
}

.card.card-abbr .abbr-lines path {
  fill: none;
  stroke: #111111;
  stroke-width: 4;
  stroke-linecap: round;
}

.card.card-abbr.is-visible {
  animation: abbrCardIn .58s cubic-bezier(.18,1.35,.3,1) both;
}

.card.card-abbr:hover .abbr-clean-title {
  animation: abbrCleanPop 650ms ease-in-out infinite alternate;
  transform-origin: 240px 112px;
}

.card.card-abbr:hover .abbr-mark {
  animation: abbrQuestionBob 760ms ease-in-out infinite alternate;
  transform-origin: 346px 92px;
}

.card.card-abbr:hover .abbr-grid text:nth-child(odd) {
  animation: abbrFloatCode 780ms ease-in-out infinite alternate;
}

.card.card-abbr:hover .abbr-grid text:nth-child(even) {
  animation: abbrFloatCode 780ms ease-in-out .12s infinite alternate-reverse;
}

.card.card-abbr:active .abbr-clean-title {
  transform: translateY(4px) scale(.97);
}

@keyframes abbrCleanPop {
  to { transform: translateY(-5px) rotate(-.6deg); }
}

@keyframes abbrQuestionBob {
  to { transform: translateY(-7px) rotate(3deg); }
}

@keyframes abbrFloatCode {
  to { transform: translateY(-5px) rotate(-4deg); }
}

/* Game 4 card: keep the same card shell behavior as cards 1-2 */
.card.card-abbr {
  background: #a8d8ff;
  color: #12192d;
}

.card.card-abbr .paper {
  fill: url(#abbrSky);
}

.card.card-abbr .abbr-pattern {
  fill: url(#abbrPixel);
  opacity: .12;
}

.card.card-abbr #abbrPixel path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
}

.card.card-abbr .abbr-ghosts {
  fill: #ffffff;
  font: 900 26px "Arial Black", Impact, sans-serif;
  opacity: .2;
  letter-spacing: 1px;
}

.card.card-abbr .abbr-card-title {
  transform-box: fill-box;
  transform-origin: center;
}

.card.card-abbr .abbr-title-main,
.card.card-abbr .abbr-title-shadow {
  font: 900 60px Impact, "Arial Black", sans-serif;
  letter-spacing: .5px;
  stroke-linejoin: round;
}

.card.card-abbr .abbr-title-main {
  fill: #11182d;
  stroke: #c7ecff;
  stroke-width: 3;
  paint-order: stroke fill;
}

.card.card-abbr .abbr-title-shadow {
  fill: #11182d;
  stroke: #11182d;
  stroke-width: 7;
  opacity: 1;
}

.card.card-abbr .abbr-blue,
.card.card-abbr .abbr-blue-shadow {
  fill: #2f73ed;
}

.card.card-abbr .abbr-title-line2 {
  font-size: 68px;
}

.card.card-abbr.is-visible {
  animation: none;
}

.card.card-abbr.is-visible .abbr-title-main,
.card.card-abbr.is-visible .abbr-title-shadow,
.card.card-abbr.is-visible .abbr-card-title,
.card.card-abbr.is-visible .abbr-ghosts {
  animation: none;
}

.card.card-abbr:hover .abbr-card-title {
  animation: abbrTitleHover 620ms ease-in-out infinite alternate;
}

.card.card-abbr:hover .abbr-title-main,
.card.card-abbr:hover .abbr-title-shadow {
  animation: none;
}

.card.card-abbr:hover .abbr-ghosts {
  animation: abbrGhostHover 900ms ease-in-out infinite alternate;
}

.card.card-abbr:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}

.card.card-abbr:active .abbr-card-title {
  transform: translateY(3px) scale(.985);
}

.card.card-abbr:active .abbr-title-main,
.card.card-abbr:active .abbr-title-shadow {
  transform: none;
}

@keyframes abbrTitleHover {
  from { transform: translateY(0) rotate(-.4deg); }
  to { transform: translateY(-5px) rotate(.8deg); }
}

@keyframes abbrGhostHover {
  to { transform: translateY(-4px); opacity: .28; }
}

/* ช็อปด้วยเงินมหาเศรษฐีไทย */
.card-politics {
  background: #172d45;
  color: #f8f3e8;
}

.card-politics .paper {
  fill: #172d45;
}

.card-politics .star-field {
  fill: url(#adamsStars);
  opacity: 0.22;
}

.card-politics #adamsStars path {
  fill: none;
  stroke: rgba(245, 230, 192, 0.56);
  stroke-width: 1.15;
}

.card-politics .adams-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  font-weight: 800;
  fill: #f8f3e8;
  stroke: #172d45;
  stroke-width: 4px;
  paint-order: stroke fill;
  letter-spacing: 0;
}

.card-politics .potus-seal {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}

.card-politics .seal-gold {
  fill: #d8b317;
}

.card-politics .seal-cream {
  fill: #f5e6c0;
}

.card-politics .seal-navy {
  fill: #0e1838;
}

.card-politics .seal-stars circle {
  fill: #ffffff;
}

.card-politics .seal-wing {
  fill: #b28a3d;
  stroke: #7d612c;
  stroke-width: 1.2;
}

.card-politics .seal-shield {
  fill: #f8f3e8;
  stroke: #0e1838;
  stroke-width: 1;
}

.card-politics .seal-stripes {
  fill: none;
  stroke: #d92534;
  stroke-width: 1.7;
}

.card-politics .seal-head {
  fill: #ffffff;
  stroke: #0e1838;
  stroke-width: 1;
}

.card-politics .seal-beak {
  fill: #d8b317;
}

.card-politics .capitol-shadow {
  fill: rgba(21, 21, 21, 0.08);
}

.card-politics .pole {
  fill: none;
  stroke: #151515;
  stroke-width: 6;
  stroke-linecap: round;
}

.card-politics .cloth {
  fill: #ffffff;
  stroke: #151515;
  stroke-width: 4;
  stroke-linejoin: round;
}

.card-politics .stripe.red {
  fill: #e94b4b;
}

.card-politics .stripe.white {
  fill: #ffffff;
}

.card-politics .union {
  fill: #315ea8;
}

.card-politics .stars circle {
  fill: #ffffff;
}

.card-politics .podium {
  fill: #ffffff;
  stroke: #151515;
  stroke-width: 4;
  stroke-linejoin: round;
}

.card-politics .podium .dome {
  fill: #dff0ff;
}

.card-politics .ballot rect {
  fill: #ffffff;
  stroke: #151515;
  stroke-width: 4;
}

.card-politics .ballot path {
  fill: none;
  stroke: #151515;
  stroke-width: 4;
  stroke-linecap: round;
}

.card-politics .ballot .check {
  stroke: #2f8c43;
  stroke-width: 5;
}

.card-politics .politics-main {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 54px;
  letter-spacing: 0;
  fill: #ffffff;
  stroke: #151515;
  stroke-width: 7px;
}

.card-politics .politics-sub {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 50px;
  letter-spacing: 2px;
  fill: #e94b4b;
  stroke: #151515;
  stroke-width: 7px;
}

.card-politics .politics-caption {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 900;
  fill: #315ea8;
}

.card-politics:hover .flag {
  animation: flagWave 900ms ease-in-out infinite;
}

.card-politics:hover .ballot {
  animation: ballotPop 700ms ease-in-out infinite;
}

.card-politics:hover .star-field {
  animation: adamsStarsDrift 1.8s linear infinite;
}

.card-politics:hover .adams-title {
  animation: adamsTitleLift 680ms ease-in-out infinite alternate;
}

@keyframes adamsStarsDrift {
  to { transform: translate(12px, -8px); }
}

@keyframes adamsTitleLift {
  to { transform: translateY(-3px); }
}

@keyframes cityLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes flagWave {
  0%, 100% { transform: translateY(0) rotate(0deg); transform-origin: 337px 154px; }
  50% { transform: translateY(-3px) rotate(-1.5deg); transform-origin: 337px 154px; }
}

@keyframes ballotPop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); transform-origin: 419px 81px; }
  50% { transform: rotate(-8deg); transform-origin: 419px 81px; }
}

@keyframes chessBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes spendTitleLift {
  to { transform: translateY(-4px) rotate(-.35deg); }
}

@keyframes spendBillLeft {
  to { transform: translateY(-5px) rotate(-3deg); }
}

@keyframes spendBillRight {
  to { transform: translateY(5px) rotate(3deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes flame {
  from { transform: scaleY(0.9); transform-origin: 260px 135px; }
  to { transform: scaleY(1.22); transform-origin: 260px 135px; }
}

@keyframes recoil {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(-5px, 3px) rotate(-2deg); }
}

@keyframes enemyPop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes towerShine {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.28; }
}

.site-footer {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0 18px 38px;
  text-align: center;
  color: var(--muted);
}

.footer-intro {
  color: #111111;
  font-size: 1.28rem;
  line-height: 1.35;
  margin-bottom: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.footer-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  border: 1px solid #c3c3c3;
  border-radius: 12px;
  color: #111111;
  background: #ffffff;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.footer-button:hover {
  background: #f7f7f7;
  border-color: #9d9d9d;
  transform: translateY(-1px);
}

.footer-button:active {
  transform: translateY(0);
}

.footer-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: block;
  object-fit: cover;
  border-radius: 7px;
}

.footer-contact {
  color: #6f6f6f;
  font-size: 1.04rem;
  line-height: 1.45;
  margin-top: 2px;
}

.site-footer a {
  color: #111111;
  font-weight: 400;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Game 7 refreshed card */
.card-spend { background:#f8fbf8; color:#173126; }
.card-spend .paper { fill:#f8fbf8; }
.card-spend .spend-pattern { fill:url(#spendPattern); opacity:.12; }
.card-spend #spendPattern path { fill:none; stroke:#145c3d; stroke-width:2; }
.card-spend .spend-watermark {
  opacity: .75;
  transform-box: fill-box;
  transform-origin: center;
}
.card-spend .spend-title-group { transform-box:fill-box; transform-origin:center; }
.card-spend .spend-title { font:bold 45px Impact,"Arial Black",sans-serif; fill:#173126; stroke:#f8fbf8; stroke-width:5px; letter-spacing:1px; }
.card-spend .spend-sub { font:bold 29px Impact,"Arial Black",sans-serif; fill:#1f7652; stroke:#f8fbf8; stroke-width:5px; letter-spacing:1.2px; }
.card-spend:hover .spend-watermark { animation:spendWatermark 780ms ease-in-out infinite alternate; }
.card-spend:hover .spend-title-group { animation:spendTitleLift 620ms ease-in-out infinite alternate; }

@keyframes spendWatermark {
  to { transform: translateY(-3px) scale(1.025); }
}

/* Game 8 investment simulator */
.card-invest {
  background: #dfeee4;
  color: #173126;
}

.card-invest .paper {
  fill: url(#investCardWash);
}

.card-invest .invest-grid {
  fill: url(#investGrid);
  opacity: .2;
}

.card-invest #investGrid path {
  fill: none;
  stroke: #145c3d;
  stroke-width: 1;
}

.card-invest .invest-bg-dollar {
  fill: rgba(23, 49, 38, 0.08);
  font: 900 180px Georgia, "Times New Roman", serif;
}

.card-invest .invest-title text {
  fill: #173126;
  stroke: #f8fbf2;
  stroke-width: 5;
  paint-order: stroke fill;
  font: 900 49px Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.card-invest .invest-title text:nth-child(2) {
  fill: #b98a22;
  font-size: 58px;
}

.card-invest .invest-mini-chart path {
  fill: none;
  stroke: #145c3d;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-invest .invest-mini-chart circle {
  fill: #f2dfad;
  stroke: #145c3d;
  stroke-width: 3;
}

.card-invest:hover .invest-title {
  animation: investTitle 620ms ease-in-out infinite alternate;
}

.card-invest:hover .invest-mini-chart {
  animation: investChart 780ms ease-in-out infinite alternate;
}

@keyframes investChart {
  to { transform: translateY(-6px); }
}

@keyframes investTitle {
  to { transform: translateY(-3px); }
}

.copyright {
  margin-top: 12px;
  color: #9a9a9a;
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .hero {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px 14px 40px;
  }

  .card {
    border-width: 2px;
    border-radius: 12px;
  }

  .site-footer {
    padding-bottom: 30px;
  }

  .footer-intro {
    font-size: 1.05rem;
  }

  .footer-links {
    gap: 9px;
  }

  .footer-button {
    min-height: 46px;
    font-size: 1rem;
    border-radius: 11px;
  }

  .footer-contact {
    font-size: 0.95rem;
  }
}