/* ======== 3D kit (CSS only), loaded after kit.css on every page. Use these primitives in every game. ======== */
:root {
  --felt: #1f8a5b; --felt-2: #136b45; --wood: #7a4a2a; --wood-2: #5a3418;
  --edge: rgba(42, 31, 61, .22);
}
.persp { perspective: 1100px; }
.d3 { transform-style: preserve-3d; }

/* pointer tilt: tilt.js sets --rx/--ry on any [data-tilt] element */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; will-change: transform; }
[data-tilt].tilting { transition: transform .05s linear; }

/* chunky slabs: panels and buttons get real thickness */
.panel { box-shadow: 0 1px 0 #fff8 inset, 0 8px 0 var(--edge), 0 18px 28px -10px rgba(42, 31, 61, .35); }
.btn { box-shadow: 0 1px 0 #fff9 inset, 0 5px 0 var(--line), 0 9px 14px -6px rgba(42, 31, 61, .35); }
.btn.primary { box-shadow: 0 1px 0 #fff6 inset, 0 5px 0 #c24a14, 0 10px 16px -6px rgba(42, 31, 61, .35); }
.btn.accent { box-shadow: 0 1px 0 #fff6 inset, 0 5px 0 #117a70, 0 10px 16px -6px rgba(42, 31, 61, .35); }
.btn.danger { box-shadow: 0 1px 0 #fff6 inset, 0 5px 0 #9c1f31, 0 10px 16px -6px rgba(42, 31, 61, .35); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #fff6 inset, 0 1px 0 var(--line); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 #fff6 inset, 0 1px 0 #c24a14; }
.btn.accent:active:not(:disabled) { box-shadow: 0 1px 0 #fff6 inset, 0 1px 0 #117a70; }
.btn.danger:active:not(:disabled) { box-shadow: 0 1px 0 #fff6 inset, 0 1px 0 #9c1f31; }

/* tabletop: a tilted felt plane with a wooden rim. Put game surfaces inside .table3d > .felt */
.table3d { perspective: 1000px; perspective-origin: 50% 0%; padding: 6px 0 14px; }
.felt {
  position: relative; transform: rotateX(34deg); transform-origin: 50% 100%; transform-style: preserve-3d;
  background: radial-gradient(ellipse at 50% 40%, var(--felt) 0, var(--felt-2) 100%);
  border: 10px solid var(--wood); border-radius: 26px;
  box-shadow: 0 0 0 3px var(--wood-2), 0 18px 0 var(--wood-2), 0 34px 40px -8px rgba(0, 0, 0, .45), inset 0 0 40px rgba(0, 0, 0, .35);
  padding: 22px 14px; margin: 0 8px 22px;
}
.felt::after { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background: repeating-radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px 3px); }
.felt.flat { transform: none; } /* use where a surface must stay readable and tappable */

/* thickness for cards/tiles lying on the table */
.pile3d { position: relative; transform-style: preserve-3d; }
.stackedge { box-shadow: 2px 2px 0 #fff, 3px 3px 0 rgba(0, 0, 0, .25), 5px 5px 0 #fff, 6px 6px 0 rgba(0, 0, 0, .25), 8px 9px 14px rgba(0, 0, 0, .4) !important; }

/* flip: <div class="flip [is-flipped]"><div class="flip-in"><div class="face front"></div><div class="face back"></div></div></div> */
.flip { perspective: 800px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.flip.is-flipped .flip-in { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; }
.flip .face.back { transform: rotateY(180deg); }

/* real CSS cube: <div class="cube" style="--s:80px"><i class="f f1">..</i> ... six faces f1..f6</div>, add .spin to roll */
.cube { --s: 80px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(32deg); }
.cube .f { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; border: 3px solid #fff8; border-radius: 12px; background: var(--cube-c, var(--brand)); color: #2a1f3d; font: 800 calc(var(--s) * .45) 'Baloo 2', sans-serif; backface-visibility: hidden; }
.cube .f1 { transform: translateZ(calc(var(--s) / 2)); } .cube .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube .f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .cube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .cube .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube.spin { animation: cubespin 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cubespin { from { transform: rotateX(540deg) rotateY(-720deg) scale(.4); } }

/* 3D fan for a hand of cards: each child gets style="--i:0;--n:7" */
.fan3d { display: flex; justify-content: center; perspective: 900px; }
.fan3d > * { --mid: calc((var(--n) - 1) / 2); transform-origin: 50% 160%;
  transform: rotate(calc((var(--i) - var(--mid)) * 5deg)); margin: 0 -9px; transition: transform .18s; }
.fan3d > *:hover, .fan3d > *:focus-visible, .fan3d > *.sel { transform: translateY(-26px) rotate(0deg) translateZ(40px) scale(1.08); z-index: 5; }

/* floating cubes behind pages */
.bgcubes { position: fixed; inset: 0; z-index: -1; pointer-events: none; perspective: 900px; overflow: hidden; }
.bgcubes .cube { position: absolute; opacity: .5; animation: floaty 14s ease-in-out infinite alternate; }
@keyframes floaty { from { translate: 0 0; rotate: 0deg; } to { translate: 24px -46px; rotate: 18deg; } }

/* rotating carousel of tiles (home page) */
.ring3d { position: relative; height: 170px; perspective: 1100px; margin: 30px auto 0; max-width: 820px; overflow: visible; }
.ring3d .ring { position: absolute; left: 50%; top: 14px; width: 0; height: 0; transform-style: preserve-3d; animation: ringspin 30s linear infinite; }
.ring3d:hover .ring { animation-play-state: paused; }
.ring3d .tile { position: absolute; width: 128px; height: 124px; left: -64px; top: 0; transform: rotateY(calc(var(--k) * 72deg)) translateZ(210px); }
@keyframes ringspin { to { transform: rotateY(-360deg); } }

@media (max-width: 520px) {
  .felt { transform: rotateX(24deg); margin: 0 2px 16px; border-width: 7px; }
  .ring3d { height: 150px; }
  .ring3d .tile { width: 104px; height: 104px; left: -52px; transform: rotateY(calc(var(--k) * 72deg)) translateZ(150px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
  .felt { transform: none; }
  .ring3d .ring { animation: none; }
  .bgcubes .cube, .cube.spin { animation: none; }
}