/* ===== Card Match enhanced UI ===== */
.cardMatchPage{background:radial-gradient(circle at 50% -15%,#29224b 0,#080a10 52%);color:#f7f8fb}
.cmHeroBtns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cmGameTop{width:min(1000px,100%);margin:0 auto 10px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.cmGameTop h2{margin:5px 0;font-size:clamp(26px,3vw,42px);letter-spacing:-1px}
.cmTvControls{display:flex;gap:8px}.cmControl{border:1px solid #30394e;background:#121724;color:#fff;border-radius:10px;padding:10px 13px;font-weight:850;cursor:pointer}.primarySmall{background:#f1d36f!important;color:#112b30!important;border-color:#f1d36f!important}
.turnMeta{color:#aab2c0;font-size:13px;margin-top:7px}.nowPill,.nextPill{font-size:9px;font-weight:950;letter-spacing:1px;padding:4px 6px;border-radius:5px;margin-right:5px}.nowPill{background:#20c997;color:#092d27}.nextPill{background:#30384c;color:#dbe0ea}.arrow{margin:0 7px;color:#657088}
.turnStrip{width:min(1000px,100%);margin:0 auto 10px;display:flex;gap:7px;overflow:auto;padding:3px 1px 7px}
.turnPlayer{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 11px;border:1px solid #2a3245;background:#101521;border-radius:10px;font-weight:800;font-size:12px}.turnPlayer small{font-size:8px;color:#8993a8;letter-spacing:.6px}.turnPlayer.now{border-color:var(--player);box-shadow:0 0 0 1px color-mix(in srgb,var(--player),transparent 65%),0 0 18px color-mix(in srgb,var(--player),transparent 82%)}.turnPlayer.next{border-style:dashed}
.playerDot,.scoreDot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--player);box-shadow:0 0 10px color-mix(in srgb,var(--player),transparent 45%)}
.cmScores{width:min(1000px,100%);margin:0 auto 12px;display:flex;gap:7px;flex-wrap:wrap}.cmScore{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #2a3245;background:#121724;border-radius:10px;min-width:145px}.cmScore.active{border-color:var(--player);box-shadow:inset 3px 0 0 var(--player)}.cmScore div{flex:1}.cmScore small{display:block;color:#8993a8;font-size:8px;letter-spacing:.7px;margin-top:2px}.cmScore strong{font-size:20px}
.cmBoard{width:min(820px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cmCard{appearance:none;border:0;padding:0;background:none;aspect-ratio:1;perspective:1200px;cursor:pointer;min-width:0}.cmCard:disabled{cursor:default}.cmInner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.8,.2,1)}.cmCard.open .cmInner,.cmCard.matched .cmInner{transform:rotateY(180deg)}
.cmFace{position:absolute;inset:0;border-radius:17px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cmBack{background:linear-gradient(145deg,#222b40,#121826);border:1px solid #39445c;box-shadow:inset 0 1px 0 #ffffff0d,0 9px 24px #0004}.backMark{font-size:32px;color:#78849d}
.cmFront{transform:rotateY(180deg);background:#f8f9fb;border:1px solid #ffffff;box-shadow:0 9px 28px #0005}.cmFront img{width:100%;height:100%;display:block;object-fit:cover}
.cmCard.matched .cmFront{box-shadow:0 0 0 3px #20d6a0,0 0 30px #20d6a033}.cmCard:focus-visible .cmFace{outline:3px solid #f1d36f;outline-offset:3px}
.cmFoot{width:min(820px,100%);margin:12px auto 0;display:flex;justify-content:space-between;color:#9ba5b8;font-size:12px}.cmPlayer{display:flex;align-items:center;gap:9px}.cmPlayer .playerDot{flex:none}
.cmPanel .expired{border-color:#ff647c!important}.cmHint{color:#8993a8;font-size:13px;margin:0 0 12px}
.cardMatchPage #toast{position:fixed!important;left:50%!important;top:auto!important;right:auto!important;bottom:24px!important;width:max-content!important;max-width:min(92vw,520px)!important;height:auto!important;min-height:0!important;margin:0!important;padding:12px 18px!important;box-sizing:border-box!important;display:block!important;white-space:normal!important;overflow:hidden!important;border-radius:999px!important;background:#fff!important;color:#111!important;font:800 14px/1.25 Arial,sans-serif!important;text-align:center!important;z-index:99999!important;opacity:0;transform:translate(-50%,20px)!important;pointer-events:none;transition:opacity .2s ease,transform .2s ease!important}
.cardMatchPage #toast.show{opacity:1!important;transform:translate(-50%,0)!important}
@media(max-width:700px){.cmGameTop{display:block}.cmTvControls{margin-top:10px}.cmControl{flex:1}.turnStrip{margin-top:5px}.cmBoard{gap:7px}.cmFace{border-radius:11px}.cmScores{display:grid;grid-template-columns:1fr 1fr}.cmScore{min-width:0}.cmFoot{font-size:11px}}

/* GamesArena visual system */
.cardMatchPage{background:radial-gradient(circle at 50% 0,#147176 0,#075056 35%,#03383d 72%,#022b30 100%)!important;color:#f8fcfb}
.cardMatchPage .sitebar{background:#fff!important;box-shadow:0 3px 18px #001e2344}
.cardMatchPage .sitebar .chip{background:#075056!important}
.cardMatchPage .cmHero h1 em{color:#f1cc5d!important}
.cardMatchPage .cmPanel{background:linear-gradient(180deg,#0b555aee,#063b40ee)!important;border-color:#39b2b555!important;box-shadow:0 16px 45px #001e2344}
.cardMatchPage .cmBack{background:linear-gradient(145deg,#0b686d,#064348)!important;border-color:#39b2b555!important}
.cardMatchPage .cmFront{background:#f8fbfa!important;border-color:#f1cc5d!important}
.cardMatchPage .cmScore,.cardMatchPage .turnPlayer{background:#075056cc!important;border-color:#39b2b555!important}
.cardMatchPage .cmScore.active{border-color:var(--player)!important}
.cardMatchPage .cmControl{background:#075056!important;border-color:#39b2b555!important}
.cardMatchPage .primarySmall{background:linear-gradient(135deg,#f1cc5d,#ffe18a)!important;border-color:#f1cc5d!important}
.cardMatchPage .cmSecondary{background:#075056!important;border-color:#39b2b555!important}
.cardMatchPage .cmHero p,.cardMatchPage .cmHint{color:#c4dedb!important}
.cardMatchPage .cmCode{color:#f1cc5d!important}
.cardMatchPage .cmQr{box-shadow:0 10px 30px #001e2344}
.cardMatchPage .gaCardLogo{height:42px!important;width:155px!important;object-fit:contain}.cardMatchPage .cmBrand{gap:9px;color:#075056}.cardMatchPage .cmBrand>b{color:#075056}

.cardMatchPage .gaCardLogo{object-fit:contain!important}

/* =========================================================
   CARD MATCH LAYOUT FOUNDATION
   Fixes all game screens appearing at once / stretched UI.
   ========================================================= */

.cardMatchPage{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
}

.cardMatchPage .sitebar{
  width:100%;
  height:76px;
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:1000;
}

.cardMatchPage .cmBrand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:#075056;
  text-decoration:none;
  font-size:15px;
}

.cardMatchPage .cmBrand .brand{
  display:block;
  height:44px;
  width:auto;
  max-width:245px;
  object-fit:contain;
}

.cardMatchPage .cmBrand b{
  white-space:nowrap;
  font-size:14px;
  letter-spacing:.2px;
}

.cardMatchPage .chip{
  flex:none;
  white-space:nowrap;
}

.cardMatchPage .cmWrap{
  width:100%;
  max-width:1280px;
  min-height:calc(100vh - 76px);
  margin:0 auto;
  padding:44px 28px 34px;
  display:flex;
  flex-direction:column;
}

.cardMatchPage .cmScreen{
  display:none !important;
  width:100%;
  flex:0 0 auto;
}

.cardMatchPage .cmScreen.active{
  display:block !important;
}

.cardMatchPage .cmHero{
  width:min(920px,100%);
  margin:15px auto 0;
  text-align:center;
}

.cardMatchPage .cmHero label,
.cardMatchPage .cmPanel > label,
.cardMatchPage .cmGameTop label{
  display:block;
  color:#f1cc5d;
  font-size:12px;
  font-weight:950;
  letter-spacing:2px;
  text-transform:uppercase;
}

.cardMatchPage .cmHero h1{
  margin:18px 0 14px;
  font-size:clamp(48px,7vw,88px);
  line-height:.92;
  letter-spacing:-3px;
  text-align:left;
}

.cardMatchPage .cmHero h1 em{
  font-style:normal;
}

.cardMatchPage .cmHero p{
  margin:0 auto 28px;
  max-width:700px;
  color:#c4dedb;
  font-size:16px;
  line-height:1.55;
}

.cardMatchPage .cmHeroBtns{
  width:min(680px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.cardMatchPage .primary,
.cardMatchPage .cmSecondary{
  min-height:52px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}

.cardMatchPage .primary.big,
.cardMatchPage .cmSecondary.big{
  width:100%;
  padding:15px 18px;
}

.cardMatchPage .cmSecondary{
  background:#075056;
  color:#fff;
  border:1px solid #39b2b555;
}

.cardMatchPage .cmPanel{
  width:min(620px,100%);
  margin:20px auto 0;
  padding:32px;
  border:1px solid #39b2b555;
  border-radius:22px;
  text-align:center;
}

.cardMatchPage .cmPanel h2{
  margin:9px 0 8px;
  font-size:clamp(28px,4vw,44px);
}

.cardMatchPage .cmPanel p{
  line-height:1.5;
}

.cardMatchPage .cmCode{
  margin:13px 0 5px;
  font-size:clamp(48px,8vw,76px);
  line-height:1;
  font-weight:1000;
  letter-spacing:10px;
}

.cardMatchPage .cmQr{
  width:190px;
  min-height:190px;
  margin:18px auto;
  padding:12px;
  background:#fff;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cardMatchPage .cmQr img,
.cardMatchPage .cmQr canvas{
  max-width:100%;
  height:auto;
}

.cardMatchPage .cmUrl{
  max-width:100%;
  margin:8px auto 18px;
  color:#b8d4d1;
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.cardMatchPage .cmPlayers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:16px 0;
  text-align:left;
}

.cardMatchPage .cmPlayers > *{
  padding:13px;
  border:1px solid #39b2b555;
  border-radius:12px;
  background:#075056aa;
}

.cardMatchPage .wide{
  width:100%;
  margin-top:8px;
}

.cardMatchPage .cmPanel input{
  display:block;
  width:100%;
  min-height:52px;
  margin:0 0 12px;
  border-radius:12px;
  padding:14px 15px;
}

.cardMatchPage .cmGame{
  max-width:1120px;
  margin:0 auto;
}

.cardMatchPage .cmGameTop{
  width:100%;
  margin:0 0 12px;
}

.cardMatchPage .cmGameTop h2{
  margin:6px 0 0;
}

.cardMatchPage .turnStrip,
.cardMatchPage .cmScores{
  width:100%;
}

.cardMatchPage .cmBoard{
  width:min(760px,100%);
  margin:16px auto 0;
}

.cardMatchPage .cmFoot{
  width:min(760px,100%);
}

.cardMatchPage .gaFooter{
  width:100%;
  margin:34px auto 0;
  padding:16px 4px 0;
  border-top:1px solid #39b2b533;
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#9bc0bd;
  font-size:12px;
}

.cardMatchPage #winner .cmPanel h1{
  margin:8px 0 20px;
}

.cardMatchPage .trophy{
  font-size:56px;
  margin-bottom:8px;
}

/* Never allow hidden game screens to reserve layout space. */
.cardMatchPage .cmScreen:not(.active){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  padding:0 !important;
  margin:-1px !important;
}

@media (max-width:760px){
  .cardMatchPage .sitebar{
    height:64px;
    padding:0 14px;
  }
  .cardMatchPage .cmBrand .brand{
    height:36px;
    max-width:190px;
  }
  .cardMatchPage .cmBrand b{
    display:none;
  }
  .cardMatchPage .cmWrap{
    min-height:calc(100vh - 64px);
    padding:28px 14px 24px;
  }
  .cardMatchPage .cmHero{
    margin-top:8px;
  }
  .cardMatchPage .cmHero h1{
    font-size:clamp(44px,15vw,70px);
    letter-spacing:-2px;
  }
  .cardMatchPage .cmHeroBtns{
    grid-template-columns:1fr;
  }
  .cardMatchPage .cmPanel{
    padding:24px 18px;
    border-radius:18px;
  }
  .cardMatchPage .cmPlayers{
    grid-template-columns:1fr;
  }
  .cardMatchPage .cmGameTop{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .cardMatchPage .cmTvControls{
    width:100%;
  }
  .cardMatchPage .cmControl{
    flex:1;
  }
  .cardMatchPage .cmBoard{
    gap:7px;
  }
  .cardMatchPage .cmFace{
    border-radius:11px;
  }
  .cardMatchPage .gaFooter{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

@media (min-width:761px) and (max-height:800px){
  .cardMatchPage .cmWrap{
    padding-top:28px;
  }
  .cardMatchPage .cmHero{
    margin-top:0;
  }
}


/* ===== v110 live board reliability + side panels ===== */
.cardMatchPage .cmGameLayout{
  width:100%;
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(560px,820px) minmax(190px,230px);
  justify-content:center;
  align-items:start;
  gap:18px;
  margin-top:8px;
}
.cardMatchPage .cmCenterBoard{min-width:0}
.cardMatchPage .cmSidePanel{display:flex;flex-direction:column;gap:12px}
.cardMatchPage .cmSideCard{
  background:linear-gradient(180deg,#075056e8,#063b40e8);
  border:1px solid #39b2b555;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px #001e2333;
}
.cardMatchPage .cmSideCard label{
  display:block;color:#f1cc5d;font-size:10px;font-weight:950;letter-spacing:1.6px;margin-bottom:12px
}
.cardMatchPage .cmInfoRow{
  display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;
  padding:9px 0;border-bottom:1px solid #39b2b522;font-size:12px
}
.cardMatchPage .cmInfoRow:last-child{border-bottom:0}
.cardMatchPage .cmInfoRow strong{color:#fff}
.cardMatchPage .cmSideCard p{font-size:11px;line-height:1.5;color:#c4dedb;margin:9px 0}
.cardMatchPage .cmCurrent{
  display:flex;align-items:center;gap:9px;padding:9px;border:1px solid #39b2b522;
  border-radius:10px;margin-bottom:7px;background:#07505688
}
.cardMatchPage .cmCurrent:last-child{margin-bottom:0}
.cardMatchPage .cmCurrent div{min-width:0}
.cardMatchPage .cmCurrent small{display:block;color:#9bc0bd;font-size:8px;text-transform:uppercase;letter-spacing:.8px}
.cardMatchPage .cmCurrent b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardMatchPage .sideScoreRow{
  display:flex;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #39b2b522;font-size:11px
}
.cardMatchPage .sideScoreRow:last-child{border-bottom:0}
.cardMatchPage .sideScoreRow b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardMatchPage .sideScoreRow strong{font-size:16px}
.cardMatchPage .cmBoard{
  width:min(820px,100%);
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin:8px auto 0;
}
.cardMatchPage .cmBack{
  background:radial-gradient(circle at 50% 35%,#0d6b70,#06464b 70%,#03373b)!important;
  border:1px solid #f1cc5d99!important;
}
.cardMatchPage .cmBack .gaCardLogo{
  width:76%!important;height:76%!important;max-width:150px;object-fit:contain!important;
  filter:drop-shadow(0 6px 10px #001e2366);
}
.cardMatchPage .cmCard.matched .cmFront{
  box-shadow:0 0 0 4px var(--pair-color,#20d6a0),0 0 34px color-mix(in srgb,var(--pair-color,#20d6a0),transparent 45%)!important;
  border-color:var(--pair-color,#20d6a0)!important;
}
.cardMatchPage .cmCard.matched.ownedPair .cmInner{
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--pair-color),transparent 25%));
}
.cardMatchPage .cmBoardLoading{
  grid-column:1/-1;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px dashed #39b2b577;border-radius:18px;background:#07505666;color:#fff;gap:8px
}
.cardMatchPage .cmBoardLoading span{font-size:32px;color:#f1cc5d;animation:cmspin 1s linear infinite}
.cardMatchPage .cmBoardLoading small{color:#9bc0bd}
@keyframes cmspin{to{transform:rotate(360deg)}}
.cardMatchPage .cmEmpty{padding:12px;color:#9bc0bd;text-align:center}

@media(max-width:1050px){
  .cardMatchPage .cmGameLayout{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto}
  .cardMatchPage .cmLeftPanel,.cardMatchPage .cmRightPanel{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cardMatchPage .cmGameLayout{display:flex;flex-direction:column}
  .cardMatchPage .cmCenterBoard{order:1;width:100%}
  .cardMatchPage .cmLeftPanel{order:2}
  .cardMatchPage .cmRightPanel{order:3}
  .cardMatchPage .cmLeftPanel,.cardMatchPage .cmRightPanel{display:flex;width:100%}
  .cardMatchPage .cmBoard{gap:7px}
  .cardMatchPage .cmBack .gaCardLogo{width:82%!important;height:82%!important}
}