/* Sexopoly ISO board overlay — repositions + restyles the SAME 40 .cell-3d into
   an upright isometric loop. Game logic untouched (cells stay in DOM order,
   tokens still appendChild into cells). Revert = remove this file's <link>. */

/* board container -> plain relative box, sized in real px by the JS (no CSS
   transform: cells are laid out at final pixel size so tiles/icons stay crisp) */
.board-3d{
  display:block !important; position:relative !important;
  grid-template-columns:none !important; grid-template-rows:none !important;
  aspect-ratio:auto !important; max-width:none !important; max-height:none !important;
  width:var(--isoW,600px) !important; height:var(--isoH,600px) !important;
  min-width:0 !important; min-height:0 !important; margin:0 !important;
  /* drop the board container's own frame — no rectangular "wrapper cell" around the loop */
  border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; overflow:visible !important;
}
/* each cell -> absolutely placed rhombus block; NO clip on the cell (tokens are children) */
.board-3d .cell-3d{
  position:absolute !important; grid-column:auto !important; grid-row:auto !important;
  background:transparent !important; box-shadow:none !important;
  overflow:visible !important; padding:0 !important; margin:0 !important;
  min-width:0 !important; min-height:0 !important; display:block !important;
}
/* the visible rhombus face (drawn on ::before so ::after stays free for the owned dot).
   inset:2px carves a thin grout gap so neighbours read as separate tiles (not glued);
   the top-light/bottom-dark gradient + directional bevel + drop-shadow give volume. */
.board-3d .cell-3d::before{
  content:""; position:absolute; inset:2px;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:linear-gradient(160deg,#34343c 0%,#242429 55%,#17171b 100%);
  box-shadow:
    inset 1px 2px 0 rgba(255,255,255,.11),
    inset 0 -3px 8px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.66);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
  z-index:0;
}
/* icon centred on the rhombus */
.board-3d .cell-3d .cell-icon-3d,
.board-3d .cell-3d .start-icon-3d{
  position:absolute !important; left:50% !important; top:45% !important;
  transform:translate(-50%,-50%) !important;
  width:60% !important; height:60% !important; max-width:none !important; max-height:none !important;
  object-fit:contain !important; z-index:1 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
}
/* START corner tinted gold */
.board-3d .cell-3d.corner::before{
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--gold) 20%,#1c1c21),#161619);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 2.5px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 3px 7px rgba(0,0,0,.4);
}
/* ownership + upgrades re-applied to the rhombus (::before) */
.board-3d .cell-3d.owned-p1::before{background:color-mix(in srgb,var(--cool) 40%,#1c1c21);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 2px var(--cool)}
.board-3d .cell-3d.owned-p2::before{background:color-mix(in srgb,var(--rose) 40%,#1c1c21);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 2px var(--rose)}
.board-3d .cell-3d.owned-p1.level-2::before{background:color-mix(in srgb,var(--cool) 54%,#1c1c21)}
.board-3d .cell-3d.owned-p2.level-2::before{background:color-mix(in srgb,var(--rose) 54%,#1c1c21)}
.board-3d .cell-3d.owned-p1.level-3::before{background:color-mix(in srgb,var(--cool) 70%,#1c1c21);box-shadow:inset 0 0 0 2px var(--cool),inset 0 0 12px color-mix(in srgb,var(--cool) 40%,transparent)}
.board-3d .cell-3d.owned-p2.level-3::before{background:color-mix(in srgb,var(--rose) 70%,#1c1c21);box-shadow:inset 0 0 0 2px var(--rose),inset 0 0 12px color-mix(in srgb,var(--rose) 40%,transparent)}
/* current / player-here highlight ring (accent) */
.board-3d .cell-3d.current::before,
.board-3d .cell-3d.player1-here::before,
.board-3d .cell-3d.player2-here::before,
.board-3d .cell-3d.both-players::before{
  box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 14px color-mix(in srgb,var(--accent) 32%,transparent) !important;
}
/* the game's owned-dot ::after — keep, just recenter on the rhombus */
.board-3d .cell-3d.owned-p1::after,
.board-3d .cell-3d.owned-p2::after{ left:50% !important; top:50% !important; z-index:2 !important; }
/* tokens sit near the top of the tile */
.board-3d .cell-3d .player-token-3d,
.board-3d .cell-3d .player-token{
  position:absolute !important; left:50% !important; top:16% !important;
  transform:translate(-50%,-50%) !important; width:16px !important; height:16px !important;
  border-radius:50% !important; z-index:5 !important; margin:0 !important;
}
.board-3d .cell-3d .player-token.p2,
.board-3d .cell-3d .player-token-3d.p2{ top:34% !important; }
/* dice overlay -> centre of the loop; scaled down to a fixed comfortable size
   (board no longer transform-scaled, so this is independent of board size) */
.board-3d .dice-overlay{
  position:absolute !important; left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) scale(.7) !important;
  grid-column:auto !important; grid-row:auto !important; width:auto !important; height:auto !important;
}

/* ===== board backdrop: a soft dot field so the board doesn't read as a dead
   void; radial mask fades the edges so it never looks like a rectangular panel */
.board-3d::before{
  content:""; position:absolute; inset:-6%; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(72% 68% at 50% 48%, #000 42%, transparent 80%);
  mask-image:radial-gradient(72% 68% at 50% 48%, #000 42%, transparent 80%);
}

/* ===== four colour-anchor corners: soft glow + gentle out-of-sync pulse =====
   drawn on ::before (the rhombus face); --glow per anchor drives tint + halo */
@keyframes isoAnchorPulse{
  0%,100%{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 0 7px var(--glow)); }
  50%{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 0 21px var(--glow)); }
}
.board-3d .cell-3d.iso-anchor::before{
  /* dark centre so the corner icon stays readable; colour lives in the ring + halo */
  background:radial-gradient(66% 62% at 50% 44%,
    #14141a 0%, #17171d 36%,
    color-mix(in srgb,var(--glow) 40%,#171719) 80%,
    color-mix(in srgb,var(--glow) 62%,#141418) 100%);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb,var(--glow) 95%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--glow) 58%,transparent),
    inset 0 -3px 8px rgba(0,0,0,.42);
  animation:isoAnchorPulse 2.8s ease-in-out infinite;
}
/* keep the anchor icon lifted above its glow */
.board-3d .cell-3d.iso-anchor .start-icon-3d{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)) brightness(1.12) !important;
}
.board-3d .cell-3d.iso-a-start::before{ --glow:#e7c079; }                          /* START — warm gold */
.board-3d .cell-3d.iso-a-bdsm::before{ --glow:#ff7a1f; animation-delay:.85s; }     /* PRISON / BDSM — hot orange (was crimson, clashed with P2 rose) */
.board-3d .cell-3d.iso-a-rest::before{ --glow:#45d6b6; animation-delay:1.7s; }     /* REST — teal */
.board-3d .cell-3d.iso-a-goprison::before{ --glow:#a988ff; animation-delay:2.55s; }/* GO TO PRISON — violet */

/* ===== roll button: active player's NAME rendered in their colour ===== */
.btn-3d .roll-name, .roll-btn .roll-name{ font-weight:700; letter-spacing:.02em; }
.btn-3d.player1-turn .roll-name, .roll-btn.player1-turn .roll-name{ color:var(--cool); }
.btn-3d.player2-turn .roll-name, .roll-btn.player2-turn .roll-name{ color:var(--rose); }
.btn-3d:not(:disabled):hover .roll-name{ color:#0a0a0a; }

/* ===== MOBILE: reclaim vertical space for the board =====
   Drop the game masthead ("Sexopoly" title block) and lift the premium bar up
   into the header row next to LovePlay.io. The board scales to its container
   automatically (JS fit()), so removing these rows grows the board. */
@media (max-width:1023px){
  .masthead{ display:none !important; }
  body{ position:relative !important; }
  #premiumStatus.premium-bar{
    position:absolute !important; top:9px !important; right:56px !important; left:auto !important;
    margin:0 !important; padding:0 !important; width:auto !important; z-index:30 !important;
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
  }
  /* keep the lifted premium control compact so it never collides with the logo */
  #premiumStatus .premium-cta{ padding:6px 10px !important; font-size:10px !important; letter-spacing:.06em !important; }
  #premiumStatus .premium-badge{ padding:5px 9px !important; font-size:10px !important; }
  #premiumStatus .premium-info .timer-display{ font-size:12px !important; }
  /* mobile dice already smaller natively — keep them a touch larger than desktop */
  .board-3d .dice-overlay{ transform:translate(-50%,-50%) scale(.82) !important; }
}