/* Catchie V291.3 — game-like public homepage tiles. Icons/content remain unchanged. */
.mobile-games-body{
  --tile-surface:#101a2d;
  --tile-surface-deep:#08111f;
  --tile-text:#f8fbff;
  --tile-muted:#d8e4f4;
}
.mg-game-section{overflow:visible!important}
.mg-game-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(12px,1.45vw,18px)!important;
  align-items:stretch;
}
.mg-game-card{
  --tile-accent:#38bdf8;
  --tile-accent-2:#2563eb;
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--lift:0px;--scale:1;
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  min-width:0;
  min-height:168px!important;
  height:100%;
  padding:18px 14px!important;
  border:1px solid color-mix(in srgb,var(--tile-accent) 72%,white 8%)!important;
  border-radius:22px!important;
  color:var(--tile-text)!important;
  background:
    radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--tile-accent) 38%,transparent) 0%,transparent 38%),
    radial-gradient(circle at 16% 12%,rgba(255,255,255,.12) 0 2px,transparent 2.5px),
    radial-gradient(circle at 78% 78%,rgba(255,255,255,.07) 0 1.5px,transparent 2px),
    linear-gradient(145deg,color-mix(in srgb,var(--tile-accent) 24%,var(--tile-surface)),var(--tile-surface-deep) 72%)!important;
  background-size:auto,38px 38px,44px 44px,auto!important;
  box-shadow:
    0 12px 24px rgba(2,8,23,.34),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 26px color-mix(in srgb,var(--tile-accent) 22%,transparent)!important;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--scale));
  transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease,filter .22s ease!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mg-game-card::before{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.2) 34%,transparent 53%);
  transform:translateX(-125%);transition:transform .65s ease;
}
.mg-game-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 -22px 38px rgba(0,0,0,.16) inset;
}
.mg-game-card:hover,.mg-game-card:focus-visible,.mg-game-card.is-tilting{
  --lift:-8px;--scale:1.025;
  border-color:color-mix(in srgb,var(--tile-accent) 88%,white 12%)!important;
  box-shadow:0 20px 38px rgba(2,8,23,.46),0 0 0 1px rgba(255,255,255,.11) inset,0 0 34px color-mix(in srgb,var(--tile-accent) 46%,transparent)!important;
  filter:saturate(1.12) brightness(1.04);
}
.mg-game-card:hover::before,.mg-game-card:focus-visible::before{transform:translateX(125%)}
.mg-game-card:focus-visible{outline:3px solid color-mix(in srgb,var(--tile-accent) 70%,white 30%)!important;outline-offset:4px}
.mg-game-card:active,.mg-game-card.is-pressed{--lift:-2px;--scale:.985;transition-duration:.08s!important}
.mg-game-card>div{position:relative;z-index:2;transform:translateZ(18px)}
.mg-game-icon{
  position:relative;z-index:2;
  font-size:clamp(2.55rem,4vw,3.25rem)!important;
  line-height:1!important;
  transform:translateZ(34px);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));
  transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease!important;
}
.mg-game-card:hover .mg-game-icon,.mg-game-card:focus-visible .mg-game-icon{
  transform:translateZ(44px) translateY(-4px) scale(1.08);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.32)) drop-shadow(0 0 9px color-mix(in srgb,var(--tile-accent) 54%,transparent));
}
.mg-game-card strong{color:#fff!important;font-size:clamp(.98rem,1.55vw,1.12rem)!important;line-height:1.12!important;text-shadow:0 2px 5px rgba(0,0,0,.4)}
.mg-game-title-th,.mg-course-card [data-copy-en]{color:var(--tile-muted)!important;font-size:.78rem!important;line-height:1.28!important;margin-top:7px!important}
.mg-tile-ripple{position:absolute;z-index:5;width:18px;height:18px;border-radius:999px;pointer-events:none;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:mg-tile-ripple .58s ease-out forwards}
@keyframes mg-tile-ripple{to{opacity:0;transform:translate(-50%,-50%) scale(16)}}
.mg-game-card:nth-child(8n+1){--tile-accent:#38bdf8;--tile-accent-2:#2563eb}
.mg-game-card:nth-child(8n+2){--tile-accent:#d946ef;--tile-accent-2:#7c3aed}
.mg-game-card:nth-child(8n+3){--tile-accent:#fb923c;--tile-accent-2:#ea580c}
.mg-game-card:nth-child(8n+4){--tile-accent:#22c55e;--tile-accent-2:#0f9f6e}
.mg-game-card:nth-child(8n+5){--tile-accent:#06b6d4;--tile-accent-2:#0284c7}
.mg-game-card:nth-child(8n+6){--tile-accent:#a855f7;--tile-accent-2:#7e22ce}
.mg-game-card:nth-child(8n+7){--tile-accent:#f43f5e;--tile-accent-2:#be123c}
.mg-game-card:nth-child(8n){--tile-accent:#eab308;--tile-accent-2:#ca8a04}
.mg-game-card.is-revealed{animation:mg-tile-reveal .48s cubic-bezier(.2,.85,.2,1) both;animation-delay:calc(var(--tile-order,0) * 28ms)}
@keyframes mg-tile-reveal{from{opacity:0;transform:perspective(900px) translateY(16px) scale(.96)}to{opacity:1;transform:perspective(900px) translateY(0) scale(1)}}
@media (min-width:761px){
  .mg-shell{width:min(1280px,100%)!important}
  .mg-game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .mg-game-card{min-height:174px!important}
}
@media (max-width:760px){
  .mg-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;grid-auto-rows:auto!important}
  .mg-game-card{min-height:148px!important;padding:14px 10px!important;border-radius:18px!important}
  .mg-game-icon{font-size:2.35rem!important}
  .mg-game-card strong{font-size:.88rem!important}
  .mg-game-title-th,.mg-course-card [data-copy-en]{font-size:.68rem!important;line-height:1.22!important}
}
@media (max-width:420px){
  .mg-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .mg-game-card{min-height:140px!important;padding:12px 8px!important}
  .mg-game-icon{font-size:2.1rem!important}
}
@media (hover:none),(pointer:coarse){
  .mg-game-card:hover{--lift:0px;--scale:1}
  .mg-game-card:active{--lift:-2px;--scale:.97}
}
@media (prefers-reduced-motion:reduce){
  .mg-game-card,.mg-game-card::before,.mg-game-icon{animation:none!important;transition:none!important}
  .mg-game-card{transform:none!important}
  .mg-tile-ripple{display:none!important}
}