* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }

html, body {
  width: 100%; height: 100%;
  background: #050c03;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

#stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#stage.shake { animation: stageshake .38s cubic-bezier(.2,.9,.3,1); }
@keyframes stageshake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-7px, 3px); }
  40%  { transform: translate(6px, -4px); }
  60%  { transform: translate(-4px, 2px); }
  80%  { transform: translate(3px, -1px); }
  100% { transform: translate(0,0); }
}

#board {
  position: relative;
  width: 1280px; height: 720px;
  flex: 0 0 auto;                  /* keep the fixed size inside the flex stage */
  transform-origin: center center;
  background: linear-gradient(160deg, #16280d 0%, #101f09 60%, #0a1605 100%);
  border-radius: 18px;
  border: 3px solid #050a03;
  box-shadow:
    0 0 0 2px #2c4a16 inset,
    0 0 90px rgba(0,0,0,.9) inset,
    0 18px 60px rgba(0,0,0,.75);
  overflow: hidden;
}

/* ================= animated jungle frame ================= */

/* containers filled by decorateFlora() in game.js */
.flora { position: absolute; z-index: 3; pointer-events: none; }
.flora-layer {
  position: absolute; inset: 0;
  animation: sway 6s ease-in-out infinite alternate;
}
.flora-layer.back  { filter: brightness(.62) saturate(.9); }
.flora-layer.front { animation-name: sway2; }
.dleaf {
  position: absolute; display: block;
  border-radius: 62% 6% 62% 6%;
  box-shadow: 0 3px 5px rgba(0,0,0,.4);
}
@keyframes sway {
  from { transform: rotate(-.6deg) translate(0, -2px); }
  to   { transform: rotate(.6deg)  translate(0, 2px); }
}
@keyframes sway2 {
  from { transform: rotate(-1.3deg) translate(-3px, -3px); }
  to   { transform: rotate(1.3deg)  translate(3px, 3px); }
}

/* drifting mist over the felt */
.mist {
  position: absolute; z-index: 2; pointer-events: none;
  width: 430px; height: 150px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(212,238,190,.075), transparent 68%);
  animation: mistdrift linear infinite;
}
.m1 { top: 140px; animation-duration: 47s; }
.m2 { top: 320px; animation-duration: 63s; animation-delay: -22s; width: 540px; }
.m3 { top: 490px; animation-duration: 54s; animation-delay: -39s; }
@keyframes mistdrift {
  from { transform: translateX(-560px); }
  to   { transform: translateX(1340px); }
}

/* slow sweeping light beam */
.lightray {
  position: absolute; left: 64px; right: 64px; top: 26px; bottom: 26px;
  z-index: 2; pointer-events: none; overflow: hidden; border-radius: 12px;
}
.lightray::before {
  content: ''; position: absolute; top: -22%; bottom: -22%; width: 420px; left: 0;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,235,.05) 38%,
    rgba(255,255,235,.11) 50%,
    rgba(255,255,235,.05) 62%, transparent);
  animation: raysweep 18s ease-in-out infinite alternate;
}
@keyframes raysweep {
  from { transform: translateX(-450px) skewX(-16deg); }
  to   { transform: translateX(1190px) skewX(-16deg); }
}

/* corner torches */
.torch { position: absolute; width: 24px; height: 34px; z-index: 4; pointer-events: none; }
.torch.t1 { left: 76px;   top: 42px; }
.torch.t2 { left: 1180px; top: 42px; }
.torch.t3 { left: 76px;   top: 644px; }
.torch.t4 { left: 1180px; top: 644px; }
.torch::after {
  content: ''; position: absolute; left: 50%; top: 36%;
  width: 170px; height: 170px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,160,60,.17), transparent 64%);
  animation: halopulse 2.3s ease-in-out infinite;
}
.torch::before {
  content: ''; position: absolute; left: 4px; bottom: 8px; width: 16px; height: 23px;
  background: radial-gradient(circle at 50% 78%, #fff2b8, #ffb340 42%, #e0561e 72%, rgba(120,30,8,0) 96%);
  border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%;
  transform-origin: 50% 92%;
  animation: flick .42s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(255,150,50,.7));
}
.torch .cup {
  position: absolute; left: 2px; bottom: 0; width: 20px; height: 10px;
  background: linear-gradient(180deg, #6a705f, #383d31);
  border: 1px solid #20241a; border-radius: 3px 3px 7px 7px;
}
@keyframes flick {
  from { transform: scale(1) skewX(-2deg); }
  to   { transform: scale(1.1, 1.24) skewX(3deg); }
}
@keyframes halopulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* floating leaves */
.leaf {
  position: absolute; width: 28px; height: 15px; z-index: 4;
  background: radial-gradient(ellipse at 30% 50%, #7cbf4a, #3c6b1d 75%);
  border-radius: 50% 4px 50% 4px;
  opacity: .38; pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  animation: drift 16s linear infinite;
}
.leaf.l1 { left: 12%; top: 30%; animation-duration: 19s; }
.leaf.l2 { left: 78%; top: 22%; animation-duration: 23s; animation-delay: -8s; width: 22px; }
.leaf.l3 { left: 30%; top: 66%; animation-duration: 17s; animation-delay: -4s; filter: blur(1px); }
.leaf.l4 { left: 62%; top: 74%; animation-duration: 21s; animation-delay: -12s; }
.leaf.l5 { left: 46%; top: 18%; animation-duration: 25s; animation-delay: -2s; width: 20px; filter: blur(1px); }
.leaf.l6 { left: 88%; top: 58%; animation-duration: 15s; animation-delay: -9s; }
@keyframes drift {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(34px, 22px) rotate(80deg); }
  50%  { transform: translate(-12px, 44px) rotate(160deg); }
  75%  { transform: translate(-40px, 16px) rotate(260deg); }
  100% { transform: translate(0,0) rotate(360deg); }
}

/* ================= felt & pyramids ================= */

#felt {
  position: absolute; left: 64px; right: 64px; top: 26px; bottom: 26px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 7px, transparent 7px 14px),
    radial-gradient(circle at 20% 28%, rgba(10,26,4,.6) 0 30px, transparent 32px),
    radial-gradient(circle at 83% 70%, rgba(10,26,4,.6) 0 34px, transparent 36px),
    radial-gradient(circle at 10% 80%, rgba(10,26,4,.55) 0 24px, transparent 26px),
    radial-gradient(circle at 90% 20%, rgba(10,26,4,.55) 0 26px, transparent 28px),
    radial-gradient(ellipse at center, #315420 0%, #1f3b0e 62%, #122806 100%);
  box-shadow: 0 0 70px rgba(0,0,0,.7) inset;
  border-radius: 12px;
}
/* diagonal light beam across the table, like the arcade original */
#felt::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(112deg,
    transparent 28%,
    rgba(255,255,235,.045) 42%,
    rgba(255,255,235,.09) 50%,
    rgba(255,255,235,.045) 58%,
    transparent 72%);
  pointer-events: none;
}

/* huge carved emblem under the pyramids */
#feltEmblem {
  position: absolute; left: 50%; top: 50%; width: 400px; height: 400px;
  z-index: 1; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 57%, rgba(190,230,160,.055) 59%, transparent 62%),
    radial-gradient(circle, transparent 44%, rgba(190,230,160,.045) 46%, transparent 49%),
    conic-gradient(
      rgba(190,230,160,.04) 0 8deg, transparent 8deg 45deg,
      rgba(190,230,160,.04) 45deg 53deg, transparent 53deg 90deg,
      rgba(190,230,160,.04) 90deg 98deg, transparent 98deg 135deg,
      rgba(190,230,160,.04) 135deg 143deg, transparent 143deg 180deg,
      rgba(190,230,160,.04) 180deg 188deg, transparent 188deg 225deg,
      rgba(190,230,160,.04) 225deg 233deg, transparent 233deg 270deg,
      rgba(190,230,160,.04) 270deg 278deg, transparent 278deg 315deg,
      rgba(190,230,160,.04) 315deg 323deg, transparent 323deg 360deg);
  animation: emblemspin 90s linear infinite;
}
@keyframes emblemspin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.pyramid {
  position: absolute; top: 321px; width: 78px; height: 78px; z-index: 2;
  background: conic-gradient(from 45deg,
    #828c74 0 90deg, #525c46 90deg 180deg,
    #363e2e 180deg 270deg, #646f55 270deg 360deg);
  box-shadow: 0 8px 22px rgba(0,0,0,.7), 0 0 0 3px rgba(0,0,0,.35);
}
.pyramid::before {
  content: ''; position: absolute; inset: 12px;
  background: conic-gradient(from 45deg,
    rgba(255,255,255,.12) 0 90deg, transparent 90deg 180deg,
    rgba(0,0,0,.25) 180deg 270deg, transparent 270deg 360deg);
}
.pyramid::after {
  content: ''; position: absolute; inset: 29px;
  background: linear-gradient(135deg, #b4bda2, #79836a);
  box-shadow: 0 0 12px rgba(255,255,230,.35), 0 0 6px rgba(0,0,0,.4);
  animation: pyrshine 5s ease-in-out infinite;
}
@keyframes pyrshine {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}

/* ================= center round/timer plate ================= */

#centerPlate {
  position: absolute; left: 50%; top: 242px; transform: translateX(-50%);
  z-index: 5; width: 200px; padding: 9px 0 10px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 40%),
    linear-gradient(180deg, #757a6c, #4c5145);
  border: 2px solid #2b2f26;
  border-radius: 11px;
  box-shadow:
    0 0 0 2px #8a8f80 inset,
    0 6px 16px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.2) inset;
}
#roundChip {
  font-weight: 900; font-size: 16px; letter-spacing: 2.5px; color: #f0f3e4;
  text-shadow: 0 2px 3px rgba(0,0,0,.7);
}
.timer-track {
  margin: 7px auto 4px; width: 158px; height: 11px;
  background: #1c2018; border-radius: 6px;
  border: 1px solid #363b30;
  box-shadow: 0 2px 4px rgba(0,0,0,.8) inset;
  overflow: hidden;
}
.timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #b8e04a, #e4c93a 45%, #d9832b 75%, #c8382a);
  border-radius: 6px;
  transition: width .18s linear;
  box-shadow: 0 0 8px rgba(228,201,58,.5);
}
.timer-bar.low { animation: timerflash .5s steps(2) infinite; }
@keyframes timerflash { 50% { filter: brightness(1.9); } }
#timerText {
  font-weight: 900; font-size: 16px; color: #f6edc8;
  text-shadow: 0 0 8px rgba(246,237,200,.4), 0 2px 2px rgba(0,0,0,.8);
  font-variant-numeric: tabular-nums;
}

/* ================= player seats ================= */

.pboard {
  position: absolute; width: 940px; height: 300px;
  transform-origin: center center;
}
.pboard.s0 { left: 170px;  top: 402px; }
.pboard.s1 { left: 170px;  top: 14px;  transform: rotate(180deg); }
.pboard.s2 { left: -318px; top: 210px; transform: rotate(90deg) scale(0.5); }
.pboard.s3 { left: 658px;  top: 210px; transform: rotate(-90deg) scale(0.5); }

.p-panel {
  position: absolute; left: 90px; right: 90px; top: 198px; height: 100px;
  background:
    /* stone blocks: mortar lines + per-block bevel */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.28) 0 3px, rgba(255,255,255,.10) 3px 5px, transparent 5px 78px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.22) 0 2px, rgba(255,255,255,.08) 2px 4px, transparent 4px 50px),
    radial-gradient(circle at 12% 82%, rgba(74,129,39,.35) 0 16px, transparent 18px),
    radial-gradient(circle at 88% 20%, rgba(74,129,39,.3) 0 13px, transparent 15px),
    linear-gradient(180deg, #9aa08f 0%, #757a6c 55%, #565b4e 100%);
  border-radius: 12px;
  border: 3px solid #33382c;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12) inset,
    0 10px 24px rgba(0,0,0,.55);
}

.name-plate {
  position: absolute; left: 116px; top: 214px; width: 176px; height: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 45%),
    linear-gradient(180deg, #3d4237, #292d24);
  border: 2px solid #191c15;
  border-radius: 9px;
  box-shadow: 0 0 0 2px #565c4c inset, 0 3px 8px rgba(0,0,0,.6);
}
.name-plate .nm {
  font-weight: 900; font-size: 15px; letter-spacing: 2.5px; color: #9fdc6f;
  text-shadow: 0 0 8px rgba(140,255,90,.5), 0 1px 2px rgba(0,0,0,.8);
}
.name-plate .sc {
  font-weight: 900; font-size: 24px; color: #c9ff8d;
  text-shadow: 0 0 12px rgba(140,255,90,.65), 0 2px 3px rgba(0,0,0,.8);
  font-variant-numeric: tabular-nums;
}
.name-plate .tot {
  font-size: 10px; letter-spacing: 1px; color: rgba(210,235,185,.7);
  font-variant-numeric: tabular-nums;
}

.p-logo {
  position: absolute; right: 116px; top: 222px;
  font-weight: 900; font-size: 14px; letter-spacing: 2.5px; line-height: 1.25;
  text-align: center; color: #d5d9c9;
  padding: 6px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(180deg, #5a5f52, #3d4136);
  border: 2px solid #24271f; border-radius: 7px;
  box-shadow: 0 0 0 2px #6d7261 inset, 0 3px 8px rgba(0,0,0,.5);
  text-shadow: 0 2px 2px rgba(0,0,0,.7);
}

.slot {
  position: absolute; width: 64px; height: 88px; z-index: 3;
  border: 2px dashed rgba(255,255,255,.3); border-radius: 9px;
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 12px rgba(0,0,0,.4) inset;
  transition: box-shadow .3s, border-color .3s;
}
/* chain charge levels on the main foundation slot */
.slot.charge1 { border-color: rgba(140,255,90,.5);  box-shadow: 0 0 10px rgba(140,255,90,.35); }
.slot.charge2 { border-color: rgba(190,255,110,.7); box-shadow: 0 0 16px rgba(170,255,100,.55); }
.slot.charge3 { border-color: rgba(255,214,90,.85); box-shadow: 0 0 22px rgba(255,214,90,.7); animation: chargehum .8s ease-in-out infinite; }
@keyframes chargehum { 50% { box-shadow: 0 0 30px rgba(255,214,90,.95); } }

.slot.combo {
  border-color: rgba(255, 214, 90, .8);
  box-shadow: 0 0 16px rgba(255, 200, 60, .5), 0 0 20px rgba(255,200,60,.25) inset;
  animation: comboglow 1.4s ease-in-out infinite;
}
@keyframes comboglow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,200,60,.4); }
  50%      { box-shadow: 0 0 26px rgba(255,214,90,.8); }
}
.slot.hidden { display: none; }

.stockpile {
  position: absolute; width: 60px; height: 84px; z-index: 5;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 23px; color: #d8e2cc;
  text-shadow: 0 0 8px rgba(180,230,140,.4), 0 2px 3px rgba(0,0,0,.9);
  background:
    linear-gradient(45deg,  transparent 45%, rgba(0,0,0,.45) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(0,0,0,.45) 45% 55%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #4a5446, #242c22);
  border: 2px solid #10160d;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09) inset,
    2px 2px 0 #1a221a, 3px 3px 0 #151c15, 4px 4px 0 #10160f,
    7px 7px 14px rgba(0,0,0,.6);
}
.stockpile.mine { cursor: pointer; transition: transform .12s; }
.stockpile.mine:hover { transform: translateY(-4px); }
.stockpile.empty { background: rgba(0,0,0,.3); border: 2px dashed rgba(255,255,255,.22); box-shadow: none; cursor: default; }
.stockpile.empty:hover { transform: none; }

.p-glow {
  position: absolute; left: 122px; top: -10px; width: 696px; height: 200px;
  border: 2px solid rgba(150, 255, 95, .35);
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(140,255,90,.5),
    0 0 40px rgba(140,255,90,.2),
    0 0 26px rgba(140,255,90,.18) inset;
  pointer-events: none; z-index: 4;
  transition: opacity .5s, border-color .5s;
}
/* orbiting energy beam: mask ring + rotating conic gradient (transform-only = GPU) */
.p-glow .beam {
  position: absolute; inset: -1px; border-radius: 14px; padding: 5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}
.p-glow .beam::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: conic-gradient(
    transparent 0deg 258deg,
    rgba(190,255,140,.95) 300deg,
    rgba(140,255,90,.22) 336deg, transparent 360deg);
  animation: beamspin 2.8s linear infinite;
}
@keyframes beamspin { to { transform: rotate(360deg); } }
.pboard.done-clear .p-glow {
  border-color: rgba(255,222,90,.9);
  animation: none;
  box-shadow: 0 0 34px rgba(255,214,80,.75), 0 0 60px rgba(255,214,80,.3);
}
.pboard.done-stuck .p-glow { opacity: .22; animation: none; }

/* the whole board heats up with the chain */
.pboard.chain-gold .p-glow { border-color: rgba(255,214,90,.5); }
.pboard.chain-gold .p-glow .beam::before {
  background: conic-gradient(transparent 0deg 258deg, rgba(255,226,130,.95) 300deg, rgba(255,214,90,.22) 336deg, transparent 360deg);
  animation-duration: 1.8s;
}
.pboard.chain-hot .p-glow { border-color: rgba(255,150,60,.55); box-shadow: 0 0 30px rgba(255,140,40,.35); }
.pboard.chain-hot .p-glow .beam::before {
  background: conic-gradient(transparent 0deg 258deg, rgba(255,175,95,.95) 300deg, rgba(255,120,40,.28) 336deg, transparent 360deg);
  animation-duration: 1.1s;
}
.pboard.done-clear .p-glow .beam::before {
  background: conic-gradient(transparent 0deg 258deg, rgba(255,226,130,.95) 300deg, rgba(255,214,90,.25) 336deg, transparent 360deg);
  animation-duration: .9s;
}
.pboard.done-stuck .p-glow .beam::before, .pboard.out .p-glow .beam::before { animation-play-state: paused; opacity: .25; }

/* chain counter badge near the foundation */
.chain-badge {
  position: absolute; z-index: 12;
  min-width: 36px; height: 36px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-weight: 900; font-size: 16px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #8de05a, #3c8a1a 75%);
  border: 2px solid #dfffcc;
  box-shadow: 0 0 12px rgba(140,255,90,.6), 0 3px 6px rgba(0,0,0,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  pointer-events: none;
}
.chain-badge.hidden { display: none; }
.chain-badge.t2 {
  background: radial-gradient(circle at 35% 30%, #ffdf70, #c8881a 75%);
  border-color: #fff5d0; color: #4a3000; text-shadow: none;
  box-shadow: 0 0 16px rgba(255,214,90,.75), 0 3px 6px rgba(0,0,0,.55);
}
.chain-badge.t3 {
  background: radial-gradient(circle at 35% 30%, #ffb054, #d4491e 75%);
  border-color: #ffe6c8; color: #fff;
  box-shadow: 0 0 20px rgba(255,140,40,.85), 0 3px 6px rgba(0,0,0,.55);
}
.chain-badge.bump { animation: badgebump .22s cubic-bezier(.2,2.4,.4,1); }
@keyframes badgebump { from { transform: scale(1.55); } to { transform: scale(1); } }

.p-stamp {
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%) rotate(-9deg);
  z-index: 30; padding: 12px 34px;
  font-weight: 900; font-size: 36px; letter-spacing: 5px;
  color: #ffab9c;
  background: rgba(38, 7, 3, .88);
  border: 4px solid #c24a36; border-radius: 12px;
  text-shadow: 0 0 10px rgba(255,110,80,.5), 0 3px 5px rgba(0,0,0,.9);
  box-shadow: 0 0 24px rgba(180,50,30,.4), 0 8px 26px rgba(0,0,0,.7);
  display: none;
}
.pboard.out .p-stamp { display: block; animation: stampin .4s cubic-bezier(.2,2.4,.4,1); }
.pboard.out .p-panel, .pboard.out .name-plate, .pboard.out .stockpile,
.pboard.out .slot, .pboard.out .p-logo { filter: grayscale(.9) brightness(.55); }
.pboard.out .p-glow { opacity: 0; }
@keyframes stampin {
  from { transform: translateX(-50%) rotate(-9deg) scale(2.6); opacity: 0; }
  to   { transform: translateX(-50%) rotate(-9deg) scale(1); opacity: 1; }
}

/* ================= cards ================= */

.card {
  position: absolute; left: 0; top: 0; width: 60px; height: 84px; z-index: 5;
  transition: transform .17s cubic-bezier(.25,1.3,.4,1);   /* GPU: position via translate3d */
  cursor: default;
}
.card .cbody {
  position: absolute; inset: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(150,170,125,.16) 0 24px, transparent 25px),
    linear-gradient(150deg, #ffffff 0%, #f6f6e9 50%, #e6e6d2 100%);
  border: 1px solid #838474;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -2px 4px rgba(120,120,95,.25) inset,
    0 4px 8px rgba(0,0,0,.55);
  transition: transform .1s, box-shadow .15s;
}
.card.mine.exposed { cursor: pointer; }
.card.mine.exposed:hover .cbody {
  transform: translateY(-7px);
  box-shadow: 0 0 14px rgba(190,255,140,.5), 0 10px 18px rgba(0,0,0,.6);
}

.card .corner {
  position: absolute; top: 3px; left: 5px;
  font-size: 17px; font-weight: 900; line-height: .95;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.card .corner small { display: block; font-size: 13px; }
.card .corner2 {
  position: absolute; bottom: 3px; right: 5px;
  font-size: 17px; font-weight: 900; line-height: .95;
  text-align: center; transform: rotate(180deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.card .corner2 small { display: block; font-size: 13px; }
.card .center-suit {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 33px;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.22));
}

/* real pip layouts for 2-10 */
.card .pips { position: absolute; inset: 9px 7px; pointer-events: none; }
.card .pip {
  position: absolute; font-size: 13px; line-height: 1;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.card .pip.flip { transform: translate(-50%, -50%) rotate(180deg); }

/* court medallion for J / Q / K */
.card .medal {
  position: absolute; inset: 15px 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; font-size: 23px; line-height: 1;
  border: 2px solid rgba(190, 150, 40, .7); border-radius: 7px;
  background: linear-gradient(160deg, rgba(255,240,200,.55), rgba(228,196,110,.12) 65%);
  box-shadow: 0 0 10px rgba(190,150,40,.28) inset, 0 1px 2px rgba(0,0,0,.15);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.card .medal small { font-size: 15px; margin-top: 3px; }
.card.down .pips, .card.down .medal { visibility: hidden; }
.card.red { color: #c22b21; }
.card.black { color: #23232e; }

.card.down .cbody {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #47513f, #232b20);
  border: 2px solid #10160d;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 -3px 6px rgba(0,0,0,.4) inset,
    0 4px 8px rgba(0,0,0,.55);
}
/* carved glowing pyramid rune on card backs */
.card.down .cbody::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -58%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 24px solid rgba(140, 220, 100, .35);
  filter: drop-shadow(0 0 5px rgba(140,255,90,.4));
}
.card.down .cbody::after {
  content: ''; position: absolute; left: 50%; top: 62%;
  width: 30px; height: 3px; transform: translateX(-50%);
  background: rgba(140, 220, 100, .3);
  border-radius: 2px;
}
.card.down .corner, .card.down .corner2, .card.down .center-suit { visibility: hidden; }

.card.flying { z-index: 40 !important; transition: transform .18s ease-in; }
.card.on-found { z-index: 8; }

.card.landing .cbody { animation: landing .18s cubic-bezier(.2,2.2,.4,1); }
@keyframes landing { from { transform: scale(1.34) rotate(4deg); } to { transform: scale(1) rotate(0deg); } }

/* inner frame + face styling */
.card .frame {
  position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid rgba(125, 125, 92, .4);
  border-radius: 5px;
}
.card.court .frame {
  border-color: rgba(190, 150, 40, .65);
  box-shadow: 0 0 0 1px rgba(190,150,40,.18) inset;
}
.card.court .center-suit {
  font-size: 27px;
  text-shadow: 0 0 10px rgba(190,150,40,.45);
}
.card.ace .frame { border-width: 2px; border-color: rgba(125,125,92,.5); }
.card.ace .center-suit {
  font-size: 42px;
  filter: drop-shadow(0 0 7px currentColor) drop-shadow(0 2px 1px rgba(0,0,0,.25));
}
.card.down .frame { display: none; }

.card.shake .cbody { animation: shake .3s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.card.flipin .cbody { animation: flipin .18s; }
@keyframes flipin {
  from { transform: scaleX(.06) translateY(-3px); filter: brightness(1.7); }
  60%  { transform: scaleX(1.12); }
  to   { transform: scaleX(1); }
}

.card.fadeout .cbody { animation: fadeout .5s forwards; }
@keyframes fadeout {
  to { opacity: 0; transform: scale(.6) rotate(14deg); }
}

/* ================= popups ================= */

.popup {
  position: absolute; z-index: 55;
  min-width: 46px; height: 44px; padding: 0 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-weight: 900; font-size: 17px; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 4px 12px rgba(0,0,0,.55);
  animation: pop-rise 1.05s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}
.popup.good { background: radial-gradient(circle at 35% 30%, #8de05a, #3c8a1a 70%); border: 3px solid #e4ffd2; }
.popup.bad  { background: radial-gradient(circle at 35% 30%, #e0685c, #a3271c 70%); border: 3px solid #ffddd8; }
.popup.gold { background: radial-gradient(circle at 35% 30%, #ffdf70, #c8881a 70%); border: 3px solid #fff5d0; color: #4a3000; text-shadow: none; }
.popup.hot  { background: radial-gradient(circle at 35% 30%, #ffb054, #d4491e 70%); border: 3px solid #ffe6c8; box-shadow: 0 0 18px rgba(255,140,40,.65), 0 4px 12px rgba(0,0,0,.55); }
.popup.big  { font-size: 22px; height: 54px; }
@keyframes pop-rise {
  0%   { opacity: 0; transform: translateY(10px) scale(.5); }
  18%  { opacity: 1; transform: translateY(0) scale(1.18); }
  30%  { transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-44px) scale(.96); }
}

/* ================= banner & vignette ================= */

#banner {
  position: absolute; top: 334px; left: 0; right: 0; z-index: 45;
  text-align: center; font-size: 24px; font-weight: 900; letter-spacing: 3px;
  color: #f0fae4; text-shadow: 0 0 18px rgba(140,255,90,.9), 0 3px 6px rgba(0,0,0,.95);
  pointer-events: none;
  animation: bannerin .4s cubic-bezier(.2,1.8,.4,1);
}
#banner.hidden { display: none; }
@keyframes bannerin { from { transform: scale(2.2); opacity: 0; } }

#vignette {
  position: absolute; inset: 0; z-index: 58; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(190, 30, 10, .55) 100%);
  opacity: 0; transition: opacity .4s;
}
#vignette.hot { animation: vigpulse 1s ease-in-out infinite; }
@keyframes vigpulse { 0%,100% { opacity: .14; } 50% { opacity: .55; } }

#fx { position: absolute; inset: 0; z-index: 60; pointer-events: none; }

/* ================= overlays ================= */

.overlay {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background:
    radial-gradient(ellipse at center, rgba(20, 40, 10, .5) 0%, rgba(4, 10, 2, .9) 100%);
  backdrop-filter: blur(4px);
}
.overlay.hidden { display: none; }
.overlay.trans { background: rgba(6, 13, 4, .55); pointer-events: none; backdrop-filter: none; }

.title-logo {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 96px; font-weight: 900; letter-spacing: 13px;
  text-align: center; line-height: .95;
  background: linear-gradient(180deg, #ffffff 15%, #cdeeb2 45%, #7cbf4a 75%, #4a8127 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #cdeeb2;
  filter:
    drop-shadow(0 3px 0 #234310)
    drop-shadow(0 6px 0 #14260a)
    drop-shadow(0 0 26px rgba(140,255,90,.55))
    drop-shadow(0 14px 22px rgba(0,0,0,.85));
}
.title-logo span {
  display: block; font-size: 66px; letter-spacing: 32px;
  margin-top: 8px;
}
.subtitle { font-size: 21px; color: #cfe8b8; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.rules {
  max-width: 680px; text-align: center; font-size: 16px; line-height: 1.6;
  color: rgba(228, 242, 212, .9);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 40%),
    rgba(24, 42, 13, .78);
  border: 2px solid rgba(140,255,90,.35);
  border-radius: 14px; padding: 18px 28px;
  box-shadow: 0 0 24px rgba(140,255,90,.12), 0 10px 30px rgba(0,0,0,.5);
}

.btn {
  font-family: inherit; font-size: 19px; font-weight: 900; letter-spacing: 2px;
  padding: 14px 34px; border-radius: 12px; cursor: pointer;
  color: #eaf5df;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(180deg, #5a654e, #3a4432);
  border: 2px solid #232b1c;
  box-shadow: 0 6px 0 #1c2415, 0 10px 20px rgba(0,0,0,.55);
  transition: transform .1s, box-shadow .1s, filter .15s;
  text-shadow: 0 2px 2px rgba(0,0,0,.6);
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 8px 0 #1c2415, 0 14px 24px rgba(0,0,0,.6); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #1c2415, 0 5px 10px rgba(0,0,0,.5); }
.btn.primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 40%),
    linear-gradient(180deg, #6dc73f, #3f7f1d);
  border-color: #2a5513;
  box-shadow: 0 6px 0 #1e400d, 0 10px 20px rgba(0,0,0,.55), 0 0 22px rgba(120,220,70,.35);
}
.btn.primary:hover { box-shadow: 0 8px 0 #1e400d, 0 14px 24px rgba(0,0,0,.6), 0 0 30px rgba(120,220,70,.5); }
.btn.primary:active { box-shadow: 0 2px 0 #1e400d, 0 5px 10px rgba(0,0,0,.5); }
.btn.big { font-size: 24px; padding: 17px 46px; }
.btn:disabled { filter: grayscale(.6) brightness(.7); cursor: default; transform: none; }

.round-title {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 116px; letter-spacing: 11px;
  background: linear-gradient(180deg, #ffffff 20%, #d6f5bc 50%, #8ecf5c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #d6f5bc;
  filter:
    drop-shadow(0 4px 0 #234310)
    drop-shadow(0 0 36px rgba(140,255,90,.7))
    drop-shadow(0 14px 26px rgba(0,0,0,.9));
  animation: slamin .55s cubic-bezier(.2,1.9,.35,1);
}
.round-sub {
  font-size: 27px; font-weight: 900; letter-spacing: 4px; color: #cfe8b8;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
  animation: slamin .55s cubic-bezier(.2,1.9,.35,1) .1s backwards;
}
@keyframes slamin {
  from { transform: scale(2.6); opacity: 0; filter: blur(6px); }
  to   { transform: scale(1); opacity: 1; filter: blur(0); }
}

.score-title {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 54px; letter-spacing: 7px; color: #eef3e4;
  text-shadow: 0 0 24px rgba(140,255,90,.55), 0 4px 0 #234310, 0 10px 18px rgba(0,0,0,.85);
}
.score-table {
  min-width: 540px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%),
    rgba(24, 42, 13, .8);
  border: 2px solid rgba(140,255,90,.35);
  border-radius: 14px; padding: 12px 0;
  box-shadow: 0 12px 34px rgba(0,0,0,.6);
}
.score-row {
  display: flex; align-items: center; gap: 18px;
  padding: 11px 30px;
  font-size: 21px; font-weight: 900; color: #e4f0d4;
  animation: rowin .3s cubic-bezier(.2,1.6,.4,1) backwards;
}
.score-row:nth-child(2) { animation-delay: .07s; }
.score-row:nth-child(3) { animation-delay: .14s; }
.score-row:nth-child(4) { animation-delay: .21s; }
@keyframes rowin { from { opacity: 0; transform: translateX(-30px); } }
.score-row + .score-row { border-top: 1px solid rgba(140,255,90,.16); }
.score-row .pos { width: 32px; color: #9fdc6f; }
.score-row .nm { flex: 1; letter-spacing: 2.5px; }
.score-row .rs { width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
.score-row .ts { width: 146px; text-align: right; font-size: 15px; color: rgba(220,235,200,.65); font-variant-numeric: tabular-nums; }
.score-row.me .nm { color: #b6ff7d; text-shadow: 0 0 10px rgba(140,255,90,.5); }
.score-row.elim { color: #ffa294; }
.score-row.elim .nm::after { content: '  ✗ AFGEVALLEN'; font-size: 13px; letter-spacing: 1px; }
.score-row.dead { opacity: .38; }
.score-row.dead .nm::after { content: '  (uitgeschakeld)'; font-size: 12px; }

.end-title {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 88px; letter-spacing: 11px;
  background: linear-gradient(180deg, #fff8e0 15%, #ffd75e 55%, #cf8a1e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #ffd75e;
  filter:
    drop-shadow(0 4px 0 #6e4c0c)
    drop-shadow(0 0 38px rgba(255,214,80,.8))
    drop-shadow(0 14px 26px rgba(0,0,0,.9));
  animation: slamin .55s cubic-bezier(.2,1.9,.35,1);
}
.end-title.lost {
  background: linear-gradient(180deg, #ffe3dc 15%, #ff7e6a 55%, #a3271c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #ff7e6a;
  filter:
    drop-shadow(0 4px 0 #4a1008)
    drop-shadow(0 0 30px rgba(255,90,70,.6))
    drop-shadow(0 14px 26px rgba(0,0,0,.9));
}
.end-detail { font-size: 22px; color: #d5e9c2; text-align: center; line-height: 1.55; text-shadow: 0 2px 4px rgba(0,0,0,.8); }

/* ================= online & lobby ================= */

.online-box, .lobby-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 380px; max-width: 480px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 40%),
    rgba(24, 42, 13, .8);
  border: 2px solid rgba(140,255,90,.35);
  border-radius: 14px; padding: 24px 32px;
  box-shadow: 0 12px 34px rgba(0,0,0,.6);
}
.fld-label { font-size: 13px; letter-spacing: 2px; color: #9fdc6f; font-weight: 900; }
.fld {
  width: 240px; padding: 11px 14px;
  font-family: inherit; font-size: 20px; font-weight: 900; letter-spacing: 2px;
  text-align: center; color: #eef3e4;
  background: rgba(8, 16, 4, .85);
  border: 2px solid rgba(140,255,90,.4); border-radius: 10px;
  outline: none;
  user-select: text; -webkit-user-select: text;
  box-shadow: 0 3px 8px rgba(0,0,0,.5) inset;
}
.fld:focus { border-color: rgba(140,255,90,.85); box-shadow: 0 0 14px rgba(140,255,90,.3), 0 3px 8px rgba(0,0,0,.5) inset; }
.fld.code { text-transform: uppercase; font-size: 27px; letter-spacing: 11px; width: 205px; }
.online-sep { font-size: 14px; color: rgba(220,235,200,.55); letter-spacing: 1px; margin: 4px 0; }
.online-err {
  color: #ffa294; font-weight: 900; font-size: 15px; text-align: center;
  padding: 7px 14px; background: rgba(70,12,6,.7);
  border: 2px solid #b3402f; border-radius: 9px;
}
.online-err.hidden { display: none; }

.code-badge {
  display: inline-block; padding: 2px 18px; margin-left: 8px;
  background: rgba(8, 16, 4, .85);
  border: 3px solid rgba(255, 214, 90, .75); border-radius: 11px;
  color: #ffd75e; letter-spacing: 11px;
  text-shadow: 0 0 14px rgba(255,214,90,.5);
  box-shadow: 0 0 18px rgba(255,200,60,.25);
}
.lobby-sub { font-size: 14px; color: rgba(220,235,200,.7); }
.lobby-urls { font-size: 15px; font-weight: 900; color: #9fdc6f; text-align: center; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.lobby-players { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 6px; }
.lobby-player {
  padding: 10px 18px; text-align: center;
  font-size: 19px; font-weight: 900; letter-spacing: 2.5px; color: #e4f0d4;
  background: rgba(8, 16, 4, .6);
  border: 2px solid rgba(140,255,90,.25); border-radius: 9px;
}
.lobby-player.me { color: #b6ff7d; border-color: rgba(140,255,90,.65); box-shadow: 0 0 12px rgba(140,255,90,.2); }
.lobby-hint { font-size: 15px; color: rgba(220,235,200,.65); }
.btn.hidden { display: none; }
.diff-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ================= rotate hint (portrait phones) ================= */

#rotateHint {
  position: fixed; inset: 0; z-index: 500;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #0a1605;
  color: #cfe8b8; font-size: 20px; font-weight: 900; text-align: center;
  padding: 30px;
}
.rotate-icon { font-size: 60px; animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 920px) {
  #rotateHint { display: flex; }
}