/* ======== Shell 3D: home, gate, room chrome. Loaded after 3d.css. Animations are transform/opacity only. ======== */

/* ---- ring of 7 tiles (override 3d.css 5-tile geometry) ---- */
.ring3d { height: 190px; margin-top: 34px; }
.ring3d .tile { backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 12px 8px; display: grid; align-content: center;
  transform: rotateY(calc(var(--k) * 360deg / 7)) translateZ(175px);
  box-shadow: 0 1px 0 #fff5 inset, 0 6px 0 rgba(0, 0, 0, .22), 0 14px 18px -8px rgba(42, 31, 61, .5); }
.ring3d .tile .t { font-size: .95rem; }
.t6 { background: linear-gradient(145deg, #ff8a4a, #e0541a); }
.t7 { background: linear-gradient(145deg, #3b2a63, #1a1030); }
@media (max-width: 520px) {
  .ring3d { height: 150px; }
  .ring3d .tile { width: 104px; height: 104px; left: -52px; transform: rotateY(calc(var(--k) * 360deg / 7)) translateZ(138px); } /* 138 > 52/tan(180/7) = 108; ring spans ~±190px at 1.15x perspective, fits 390 */
  .ring3d .tile .e { font-size: 1.7rem; } .ring3d .tile .t { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { /* no spin: lay the tiles out flat so all 7 stay reachable */
  .ring3d { height: auto; perspective: none; }
  .ring3d .ring { position: static; border: 0; inset: auto; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; transform: none !important; }
  .ring3d .tile { position: static; transform: none; }
}

/* ---- background cubes (brand colours, six faces each) ---- */
.bgcubes .cube .f { font-size: 0; border-radius: 10px; }
.bgcubes .cube:nth-child(2) { animation-delay: -4s; animation-duration: 17s; }
.bgcubes .cube:nth-child(3) { animation-delay: -8s; animation-duration: 12s; }
.bgcubes .cube:nth-child(4) { animation-delay: -2s; animation-duration: 19s; }
.bgcubes .cube:nth-child(5) { animation-delay: -6s; animation-duration: 15s; }
@media (max-width: 520px) { .bgcubes .cube { --s: 44px !important; } }

/* ---- hero fan in 3D ---- */
.fan { transform-style: preserve-3d; perspective: 700px; }
.fan i { box-shadow: 0 1px 0 #fff6 inset, 0 7px 0 rgba(0, 0, 0, .2), 0 14px 16px -6px rgba(0, 0, 0, .4); }
.fan i:nth-child(1) { translate: 0 0 0; } .fan i:nth-child(2) { translate: 0 0 14px; }
.fan i:nth-child(3) { translate: 0 0 28px; } .fan i:nth-child(4) { translate: 0 0 42px; }

/* ---- thick slab panels ---- */
.slab { border-bottom-width: 8px; border-radius: 22px; }
.tilt-card { transform-style: preserve-3d; }

/* ---- topbar slab ---- */
.topbar { background: var(--panel); border: 2px solid var(--line); border-bottom-width: 6px; border-radius: 18px; margin-top: 10px;
  width: calc(100% - 24px); box-shadow: 0 1px 0 #fff8 inset, 0 6px 0 var(--edge), 0 14px 22px -10px rgba(42, 31, 61, .35); }
.topbar .btn.small { min-height: 44px; min-width: 44px; }

/* ---- players as coin tokens ---- */
.player { background: var(--bg); box-shadow: 0 3px 0 var(--edge); min-height: 50px; }
.avatar { width: 40px; height: 40px; font-size: 1.15rem; border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 0 #fff7 inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 4px 0 rgba(0, 0, 0, .35), 0 8px 10px -3px rgba(0, 0, 0, .4); }
.player.turn .avatar { box-shadow: 0 1px 0 #fff7 inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 4px 0 rgba(0, 0, 0, .35), 0 0 0 3px var(--brand); }
.player .btn.small { min-height: 44px; min-width: 44px; }

/* ---- lobby game picker: thick tiles that lift, selected is pressed in ---- */
.games-pick { perspective: 900px; gap: 16px; }
.game-card { min-height: 44px; border-bottom-width: 7px; transform-style: preserve-3d;
  box-shadow: 0 1px 0 #fff8 inset, 0 6px 0 var(--edge), 0 14px 18px -10px rgba(42, 31, 61, .4); }
.game-card:not(:disabled):not(.soon):hover, .game-card:not(:disabled):not(.soon):focus-visible { box-shadow: 0 1px 0 #fff8 inset, 0 10px 0 var(--edge), 0 22px 26px -10px rgba(42, 31, 61, .5); }
[data-tilt].game-card:not(.on):not(:disabled):hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(26px) translateY(-4px); }
.game-card.on, [data-tilt].game-card.on { border-color: var(--brand); border-bottom-width: 3px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(5px);
  box-shadow: inset 0 4px 10px rgba(42, 31, 61, .25), 0 0 0 3px var(--brand), 0 0 22px 4px rgba(255, 107, 44, .55); }
.game-card.soon { transform: none; box-shadow: none; border-bottom-width: 3px; filter: grayscale(.6); opacity: .45; }
#start { min-height: 72px; font-size: 1.5rem; border-radius: 20px; width: 100%; }

/* ---- reduced motion: no tilt/lift ---- */
@media (prefers-reduced-motion: reduce) {
  [data-tilt].game-card:not(.on):not(:disabled):hover { transform: none; }
  .game-card.on, [data-tilt].game-card.on { transform: translateY(5px); }
  .fan i { translate: none !important; }
}