/* 3D kocka a usporiadanie pre dvoch hráčov oproti sebe */
.head-to-head { width:min(100%,480px); margin:0 auto; display:grid; grid-template-rows:auto 1fr auto; flex:1; min-height:0; }
.head-to-head > .player-card { width:min(100%,250px); justify-self:center; min-width:180px; }
.head-to-head > .player-card:last-child { transform:rotate(180deg); }
.head-to-head > .player-card.active { transform:translateY(-3px); }
.head-to-head > .player-card:last-child.active { transform:rotate(180deg) translateY(-3px); }
.head-to-head .roll-zone { display:flex; flex-direction:column; justify-content:center; align-items:center; margin:0; }
.head-to-head .actions { margin:1rem auto .35rem; }
.cube-scene { width:142px; height:142px; display:grid; place-items:center; perspective:660px; margin:.1rem auto .35rem; }
.cube { --size:92px; position:relative; width:var(--size); height:var(--size); transform-style:preserve-3d; transform:rotateX(var(--rest-x)) rotateY(var(--rest-y)); }
.cube-face { position:absolute; inset:0; padding:17px; display:grid; background:linear-gradient(135deg,#fff,#d7d7cf); border:1px solid #d2d2c9; border-radius:18%; box-shadow:inset -7px -8px 13px #bfc0b7,inset 6px 6px 12px #fff; backface-visibility:hidden; }
.cube-face i { z-index:1; width:14px; height:14px; background:#20271f; border-radius:50%; box-shadow:inset 2px 2px 2px #596556,1px 1px 2px #0004; }
.one { transform:translateZ(46px); place-items:center; }.six { transform:rotateY(180deg) translateZ(46px); grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); place-items:center; }.three { transform:rotateY(90deg) translateZ(46px); place-items:center; }.four { transform:rotateY(-90deg) translateZ(46px); grid-template-columns:repeat(2,1fr); place-items:center; }.two { transform:rotateX(90deg) translateZ(46px); grid-template-rows:repeat(2,1fr); place-items:center; }.five { transform:rotateX(-90deg) translateZ(46px); grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); place-items:center; }.three i:nth-child(1){justify-self:start}.three i:nth-child(3){justify-self:end}.five i:nth-child(1){justify-self:start}.five i:nth-child(2){justify-self:end}.five i:nth-child(4){justify-self:start}.five i:nth-child(5){justify-self:end}
.is-rolling .cube { animation:dice-tumble .96s cubic-bezier(.18,.8,.18,1) both; }
@keyframes dice-tumble { 0% { transform:translate3d(-95px,38px,0) rotateX(0) rotateY(0) rotateZ(0); } 18% { transform:translate3d(-50px,-34px,35px) rotateX(300deg) rotateY(260deg) rotateZ(80deg); } 48% { transform:translate3d(24px,-12px,0) rotateX(630deg) rotateY(550deg) rotateZ(160deg); } 72% { transform:translate3d(47px,7px,0) rotateX(780deg) rotateY(670deg) rotateZ(245deg); } 100% { transform:translate3d(0,0,0) rotateX(900deg) rotateY(900deg) rotateZ(360deg); } }
@media (max-width:430px) { .game-page .game-shell { padding:1rem 1rem max(1rem, env(safe-area-inset-bottom)); }.game-page .game-intro { margin:.8rem 0 .5rem; }.game-page .game-intro .eyebrow { display:none; }.game-page .game-intro h1 { font-size:1.35rem; }.head-to-head { height:calc(100dvh - 118px); min-height:570px; }.head-to-head > .player-card { padding:.7rem .8rem; }.cube-scene { width:135px; height:135px; }.actions { width:100%; grid-template-columns:1fr; gap:.65rem; }.head-to-head .actions { margin:.75rem auto .35rem; }.round-score { padding:.4rem 1rem; }.turn-status { margin:.2rem 0; }.new-game { margin:.55rem auto 0; } }
@media (prefers-reduced-motion:reduce) { .is-rolling .cube { animation:none; } }